🌐 Web Server TCP dengan Socket Programming

Tugas Besar Jaringan Komputer - Kelompok 3
Implementasi web server berbasis TCP dengan socket programming untuk menangani request HTTP

---

📋 Daftar Isi

• 🌟 Overview
• ✨ Fitur Utama
• 🛠️ Teknologi
• 📁 Struktur Proyek
• ⚙️ Instalasi & Setup
• 🚀 Cara Penggunaan
• 📖 Dokumentasi API
• 🌐 Antarmuka Web
• 🎯 Spesifikasi Tugas
• 👥 Tim Pengembang
• 📝 Lisensi

---

🌟 Overview

Proyek ini merupakan implementasi web server berbasis TCP menggunakan socket programming dalam Python. Server dapat menangani permintaan HTTP, melayani file statis, dan mengelola beberapa koneksi secara bersamaan menggunakan multithreading. Proyek ini juga menyertakan client HTTP untuk testing dan antarmuka web interaktif dengan tema jaringan komputer.

---

✨ Fitur Utama

Server Features

• 🔌 TCP Socket Server: Implementasi server TCP menggunakan socket programming
• 🧵 Multithreading: Menangani beberapa koneksi client secara bersamaan
• 📁 File Serving: Melayani file HTML, CSS, JavaScript, dan gambar
• 🚫 Custom 404 Page: Halaman error 404 kustom yang menarik
• 📝 HTTP Parsing: Parse dan handle HTTP GET requests
• 🔍 MIME Type Detection: Deteksi otomatis content type berdasarkan ekstensi file

Client Features

• 📡 HTTP Client: Client sederhana untuk testing server
• 📋 Response Display: Menampilkan header dan body response
• ⏱️ Timeout Handling: Handling timeout untuk koneksi yang lambat

Web Interface Features

• 🌙 Dark/Light Mode: Toggle tema gelap/terang
• 👥 Team Profiles: Card interaktif untuk profil anggota tim
• ✨ Network Animations: Animasi bertema jaringan komputer
• 📱 Responsive Design: Desain yang responsif untuk berbagai perangkat
• 🎭 Modal Dialogs: Detail profil dengan modal yang elegan

---

🛠️ Teknologi

Backend Python 3.9+ Socket Programming Threading HTTP Protocol

Frontend HTML5 CSS3 (dengan animasi) JavaScript (ES6+) Font Awesome Icons

---

📁 Struktur Proyek

tugas-besar-jarkom/
├── server.py            # Main web server implementation
├── client.py            # HTTP client untuk testing
├── klien.py            # Versi client dalam bahasa Indonesia
├── page.html           # Homepage dengan profil tim
├── 404.html            # Custom 404 error page
├── control.js          # JavaScript untuk interaksi UI
├── design.css          # Styling untuk website
├── *.jpg               # Foto profil anggota tim
└── README.md           # Dokumentasi proyek

---

⚙️ Instalasi & Setup

Prerequisites

• Python 3.9 atau lebih tinggi
• Web browser modern (Chrome, Firefox, Safari, Edge)

Instalasi

1. Clone repository

git clone https://github.com/username/tugas-besar-jarkom.git
cd tugas-besar-jarkom

2. Tidak ada dependencies tambahan yang diperlukan. Server menggunakan library standard Python.

---

🚀 Cara Penggunaan

Menjalankan Server

1. Jalankan server pada port default (6789):

python server.py

2. Atau jalankan pada port custom:

python server.py 8080

3. Server akan berjalan di http://localhost:6789 (atau port yang Anda pilih)

Menjalankan Client

Untuk testing server menggunakan client:

python client.py localhost 6789 page.html

Format command:

python client.py <server_host> <server_port> <filename>

Mengakses Web Interface

1. Buka browser
2. Akses http://localhost:6789/page.html
3. Atau akses http://localhost:6789/ (akan redirect ke page.html)

---

📖 Dokumentasi API

HTTP Request Format

GET /filename HTTP/1.1
Host: localhost:6789
Connection: close

HTTP Response Format

HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 1234
Connection: close

[Content Body]

Status Codes

• 200 OK: File berhasil ditemukan dan dikirim
• 404 Not Found: File tidak ditemukan (menampilkan 404.html)
• 501 Not Implemented: Method selain GET tidak didukung

MIME Types Support

• .html: text/html
• .css: text/css
• .js: application/javascript
• .jpg/.jpeg: image/jpeg
• .png: image/png

---

🌐 Antarmuka Web

Halaman Utama (page.html)

• Hero section dengan animasi network
• Profile cards untuk anggota tim
• Dark/Light mode toggle
• Responsive layout

Halaman 404 (404.html)

• Custom error page dengan animasi
• Network-themed design
• Link kembali ke homepage

Fitur Interaktif

• Profile Cards: Klik untuk melihat detail lengkap
• Theme Toggle: Switch antara dark dan light mode
• Smooth Animations: Transisi dan efek hover yang halus
• Toast Notifications: Notifikasi saat server berhasil diakses

---

🎯 Spesifikasi Tugas

Proyek ini memenuhi semua spesifikasi tugas:

✅ Server TCP dengan Socket Programming

• Menerima dan parsing HTTP request
• Mengambil file dari sistem file
• Membuat HTTP response dengan header yang sesuai

✅ Handling File Not Found

• Mengirim HTTP 404 response
• Menampilkan custom 404 page

✅ Multithreading

• Thread utama listening di port tertentu
• Thread terpisah untuk setiap koneksi client
• Melayani beberapa request secara simultan

✅ HTTP Client untuk Testing

• Koneksi TCP ke server
• Mengirim HTTP GET request
• Menampilkan response dari server

---

👥 Tim Pengembang

Syahril Arfian Almazril NIM: 103032300013

Nauval Yusriya Athala NIM: 103032300xxx

Muhammad Arief Ridwan Syah NIM: 103032300xxx

Kelas: IT-47-04
Mata Kuliah: Jaringan Komputer
Universitas: Telkom University

---

📝 Lisensi

© 2025 Kelompok 3 - Tugas Besar Jaringan Komputer
Telkom University