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.

🛠️ Alat dan Bahan yang Dibutuhkan

Koneksi internet.
Browser web (Google Chrome, Firefox, dll.).
Aplikasi XAMPP Control Panel (terinstal di komputer lokal).
Text Editor (Disarankan Visual Studio Code).
Akun aktif di GitHub.com dan InfinityFree.net.

📝 Langkah-Langkah Praktikum

Modul 1: Mengunduh Source Code dari GitHub

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.

Modul 2: Setup Database dan Server Lokal (XAMPP)

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.

Modul 3: Konfigurasi Koneksi Database Lokal & Modifikasi Tampilan

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.

Modul 4: Upload dan Hosting Gratis di InfinityFree

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!

✅ Evaluasi Mandiri

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?

https://drive.google.com/file/d/1occ7L7fqUZlciUdOv99R50VQX_SWUxFy/view?usp=drive_link

Deskripsi Sistem

Sebuah perpustakaan perguruan tinggi masih melakukan pendaftaran anggota secara manual menggunakan formulir kertas. Proses tersebut menimbulkan beberapa kendala, seperti antrean pendaftaran, kesalahan pencatatan data, kesulitan mencari informasi anggota, dan lambatnya pembuatan kartu anggota.

Untuk mengatasi masalah tersebut, perpustakaan membutuhkan aplikasi web bernama LibraryReg — Aplikasi Pendaftaran Anggota Perpustakaan. LibraryReg menyediakan landing page yang menampilkan informasi perpustakaan, menu navigasi yang terstruktur, formulir pendaftaran anggota secara online, dan halaman pengelolaan data anggota untuk petugas perpustakaan.

Pada tahap pembelajaran ini, mahasiswa berfokus pada front end. Data anggota dapat dikelola sementara menggunakan JavaScript dan localStorage, sehingga mahasiswa dapat mempraktikkan interaksi antarmuka tanpa harus langsung membangun backend atau database server.