Praktik: Men-deploy aplikasi web sederhana di server lokal

From OnnoWiki
Jump to navigation Jump to search

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.

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: 

 <!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>

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>`: 

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

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

Retrieved from "https://onnocenter.or.id/wiki/index.php?title=Praktik:_Men-deploy_aplikasi_web_sederhana_di_server_lokal&oldid=72424"