Lihat sumber Praktik: Men-deploy aplikasi web sederhana di server lokal

==Tujuan Praktik==
Setelah mengikuti praktik ini, siswa 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.

==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).

==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.

==Langkah-langkah Praktik==

==Langkah 1: Update Sistem==

 sudo apt update && sudo apt upgrade -y

==Langkah 2: Install Apache Web Server==

 sudo apt install apache2 -y

Setelah instalasi selesai, jalankan:

 sudo systemctl start apache2
 sudo systemctl enable apache2

Cek apakah Apache sudah berjalan:

 sudo systemctl status apache2

Buka browser dan akses:  

 http://localhost

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

==Langkah 3: Menyiapkan Direktori Website==

Secara default, direktori root untuk Apache di Ubuntu adalah:

 /var/www/html

Hapus file default:

 sudo rm /var/www/html/index.html

Buat file HTML sederhana:

 udo nano /var/www/html/index.html

Isi dengan kode berikut:

<pre>
 <!DOCTYPE html>
 <html>
 <head>
   <title>Halo Dunia</title>
 </head>
 <body>
   <h1>Selamat datang di server Apache lokal!</h1>
   <p>Aplikasi web sederhana berhasil dideploy.</p>
 </body>
 </html>
</pre>

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

==Langkah 4: Cek Akses Website==

Buka browser dan akses:

 http://localhost

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


==Langkah 5 (Opsional): Menambahkan File CSS & JS==

1. Buat folder di `/var/www/html/`:

 sudo mkdir /var/www/html/css
 sudo mkdir /var/www/html/js

2. Tambahkan CSS (`style.css`):

 sudo nano /var/www/html/css/style.css

Isi:

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

3. Tambahkan JS (`script.js`):

 sudo nano /var/www/html/js/script.js

Isi:

 alert("Halaman berhasil dimuat!");

4. Edit `index.html`:

 sudo nano /var/www/html/index.html

Tambahkan di `<head>`:

<pre>
 <link rel="stylesheet" href="css/style.css">
 <script src="js/script.js"></script>
</pre>

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

==Pertanyaan Refleksi==
* Apa fungsi utama dari Apache dalam pengembangan web?
* Apa perbedaan antara `localhost` dan `127.0.0.1`?
* Bagaimana cara men-deploy aplikasi web di lingkungan produksi setelah diuji di lokal?

==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/

==Pranala Menarik==

* [[Web Programming]]