Hands-On Lab (HOL): Praktik Mengunduh, Memodifikasi, dan Hosting Website dari GitHub

🎯 Tujuan Pembelajaran

Setelah menyelesaikan lab ini, Anda akan dapat:

Mencari dan mengunduh source code proyek website berbasis PHP dari GitHub.
Menjalankan dan mengonfigurasi proyek secara lokal menggunakan XAMPP.
Melakukan modifikasi sederhana pada tampilan website (judul, warna, dan teks).
Melakukan deployment (hosting) website secara gratis menggunakan layanan InfinityFree.

Buka browser dan akses situs GitHub.
Pada kolom pencarian GitHub, ketikkan kata kunci pencarian, misalnya web crud untuk mencari aplikasi CRUD sederhana.
Pilih salah satu repositori menggunakan bahasa pemrograman PHP (contoh dalam video: proyek milik Farhan Ade Atalarik).
Klik tombol hijau berikon panah/unduh, lalu pilih Download ZIP.
Ekstrak file ZIP tersebut di komputer Anda.

Buka aplikasi XAMPP Control Panel, lalu klik Start pada modul Apache dan MySQL.
Masuk ke direktori instalasi XAMPP Anda (biasanya di C:\xampp\htdocs\).
Buat folder baru di dalam folder htdocs dengan nama crud-php.
Salin (copy) semua file dari folder hasil ekstrak GitHub ke dalam folder crud-php yang baru dibuat.
Buka browser dan ketikkan http://localhost/phpmyadmin/.
Buat database baru:
- Klik tab New.
- Beri nama database, misal: crud_web_php.
- Klik Create.
Masukkan (import) file struktur database:
- Pilih database crud_web_php yang baru dibuat.
- Klik menu Import.
- Pilih file database (.sql) yang berada di dalam folder proyek Anda (biasanya di dalam folder DB, contoh: data_siswa.sql).
- Scroll ke bawah dan klik Go.

Buka folder proyek crud-php menggunakan Visual Studio Code.
Cari file koneksi atau fungsi database (misal: file function.php).
Sesuaikan konfigurasi nama database agar mengarah ke database lokal yang baru dibuat (crud_web_php). Simpan file (Ctrl + S).
Uji coba dengan membuka browser dan akses: http://localhost/crud-php/.
Modifikasi Tampilan Sederhana:
- Buka file index.php di VS Code.
- Ubah judul halaman (<title>) menjadi nama yang Anda inginkan (misal: Aplikasi Data Siswa).
- Ubah komponen warna navbar (misal mengganti kelas bg-dark menjadi bg-warning).
- Ubah teks footer atau informasi pembuat sesuai identitas Anda.
Simpan perubahan dan refresh browser Anda untuk melihat hasilnya.

Masuk ke akun InfinityFree Anda dan buka bagian File Manager.
Masuk ke dalam direktori htdocs hosting Anda.
Unggah (upload) seluruh file proyek dari folder crud-php lokal Anda ke dalam folder htdocs tersebut.
Unggah juga folder pendukung seperti folder css jika diperlukan.
Buat database baru di panel kontrol InfinityFree (pada menu MySQL Databases) dan catat detail host, database name, username, serta password-nya.
Masuk ke phpMyAdmin di InfinityFree, lalu lakukan import file database .sql seperti langkah lokal sebelumnya.
Sesuaikan kembali konfigurasi database pada file function.php di File Manager InfinityFree menggunakan detail database baru dari server hosting.
Salin URL web Anda dari panel InfinityFree, buka di tab browser baru, dan pastikan website Anda sudah online serta dapat diakses secara publik!

Apakah website berhasil dijalankan secara lokal di localhost tanpa ada error pada baris kode?
Apakah modifikasi warna dan judul berhasil diterapkan?
Apakah website sudah berhasil diakses secara online melalui domain gratis InfinityFree?