Berikut adalah modul praktik yang dapat digunakan dalam kuliah **Web Programming**, khususnya untuk topik **Pengenalan Server Web Apache**, dengan fokus pada praktik **men-deploy aplikasi web sederhana di server lokal** menggunakan **Ubuntu 24.04** **tanpa menggunakan tool dari Microsoft sama sekali**:

---

**Modul Praktik: Men-deploy Aplikasi Web Sederhana di Server Lokal (Apache Web Server - Ubuntu 24.04)**

1. **1. Tujuan Praktik**

Setelah mengikuti praktik ini, mahasiswa diharapkan dapat: - Memahami fungsi dan cara kerja server web Apache. - Menginstall dan mengkonfigurasi Apache di Ubuntu 24.04. - Men-deploy aplikasi web sederhana berbasis HTML/CSS/JS di server lokal. - Mengakses aplikasi web melalui browser menggunakan `localhost` atau IP lokal.

1. **2. Prasyarat**

- Telah menginstall Ubuntu 24.04 (dapat berupa dual boot, VirtualBox, WSL tanpa GUI, atau Live USB). - Telah memahami dasar-dasar HTML, CSS, dan JavaScript. - Tidak menggunakan tool dari Microsoft (seperti VS Code, Windows, WSL2, dll).

1. **3. Peralatan**

- Laptop atau PC dengan Ubuntu 24.04. - Teks editor berbasis open-source di Linux (misalnya: `nano`, `vim`, `gedit`, atau `Kate`). - Terminal bawaan Ubuntu. - Browser open-source seperti Firefox.

---

1. **4. Langkah-langkah Praktik**

1. 1. **Langkah 1: Update Sistem**

```bash sudo apt update && sudo apt upgrade -y ```

---

1. 1. **Langkah 2: Install Apache Web Server**

```bash sudo apt install apache2 -y ```

Setelah instalasi selesai, jalankan: ```bash sudo systemctl start apache2 sudo systemctl enable apache2 ```

Cek apakah Apache sudah berjalan: ```bash sudo systemctl status apache2 ```

Buka browser dan akses: ``` http://localhost ```

Jika muncul halaman default Apache Ubuntu, maka server sudah berjalan.

---

1. 1. **Langkah 3: Menyiapkan Direktori Website**

Secara default, direktori root untuk Apache di Ubuntu adalah: ``` /var/www/html ```

Hapus file default: ```bash sudo rm /var/www/html/index.html ```

Buat file HTML sederhana: ```bash sudo nano /var/www/html/index.html ```

Isi dengan kode berikut: ```html <!DOCTYPE html> <html> <head>

 <title>Halo Dunia</title>

</head> <body>

Selamat datang di server Apache lokal!

Aplikasi web sederhana berhasil dideploy.

</body> </html> ```

Tekan `Ctrl + O`, lalu `Enter` untuk menyimpan. Tekan `Ctrl + X` untuk keluar dari nano.

---

1. 1. **Langkah 4: Cek Akses Website**

Buka browser dan akses: ``` http://localhost ```

Jika muncul halaman "Selamat datang di server Apache lokal!" maka proses deployment berhasil.

---

1. 1. **Langkah 5 (Opsional): Menambahkan File CSS & JS**

1. Buat folder di `/var/www/html/`: ```bash sudo mkdir /var/www/html/css sudo mkdir /var/www/html/js ```

2. Tambahkan CSS (`style.css`): ```bash sudo nano /var/www/html/css/style.css ```

Isi: ```css body {

 background-color: #f0f0f0;
 text-align: center;
 font-family: sans-serif;

} ```

3. Tambahkan JS (`script.js`): ```bash sudo nano /var/www/html/js/script.js ```

Isi: ```javascript alert("Halaman berhasil dimuat!"); ```

4. Edit `index.html`: ```bash sudo nano /var/www/html/index.html ```

Tambahkan di `<head>`: ```html <link rel="stylesheet" href="css/style.css"> <script src="js/script.js"></script> ```

Simpan dan refresh `http://localhost` di browser.

---

1. **5. Pertanyaan Refleksi**

1. Apa fungsi utama dari Apache dalam pengembangan web? 2. Apa perbedaan antara `localhost` dan `127.0.0.1`? 3. Bagaimana cara men-deploy aplikasi web di lingkungan produksi setelah diuji di lokal?

---

1. **6. Tugas Tambahan (Opsional)**

Deploy halaman HTML sederhana berisi biodata diri (nama, foto, deskripsi singkat) dan upload ke direktori `/var/www/html/profil/`. Pastikan halaman bisa diakses melalui: ``` http://localhost/profil/ ```

---

Kalau mau, modul ini bisa juga dijadikan PDF atau handout untuk dosen dan mahasiswa. Perlu dibikin versi print-friendly juga?

Praktik: Men-deploy aplikasi web sederhana di server lokal

Selamat datang di server Apache lokal!

Navigation menu

Search