Framework Code Igniter - Latihan 1

 

Modul Praktikum

PRD News Hub

Hand-on Labs

Testing

Desain UI

Deskripsi studi kasus

Nama proyek: NewsHub — Portal Berita Online

NewsHub merupakan aplikasi web untuk mengelola berita dari berbagai kategori, seperti pendidikan, teknologi, ekonomi, olahraga, dan gaya hidup. Mahasiswa berperan sebagai pengembang web yang membangun sistem pengelolaan berita menggunakan CodeIgniter 4.

Tujuan pembelajaran

Setelah praktikum, mahasiswa diharapkan mampu:

• Memahami konsep dan struktur proyek CodeIgniter 4.

• Menerapkan arsitektur MVC (Model–View–Controller).

• Menghubungkan aplikasi dengan database MySQL.

• Mengimplementasikan CRUD untuk data berita.

• Menggunakan routing, validasi form, dan template Bootstrap 5.

• Menerapkan keamanan dasar pada aplikasi web.

https://www.youtube.com/watch?v=NOwLcV05Lz8

https://www.youtube.com/watch?v=0uG-4MnQxOU&list=PLzt0WdHR1Z3lKa42UGu7kXCBAgUkNCVdP&index=2

https://github.com/dirumahrafif

composer create-project codeigniter4/appstarter ci4composer --no-dev

php spark serve

Vibe Coding Tutorial

 

https://www.youtube.com/watch?v=F9sgBaGnbU0

https://www.youtube.com/watch?v=JVCgq1G5IWE

Pemrograman Web - Back End

 

Antigravity - Membuat Website

 

https://www.youtube.com/watch?v=b808iRlbfco

https://www.youtube.com/watch?v=I5iGSwe715Q

https://www.youtube.com/watch?v=9ofarfOoEWY

https://www.youtube.com/watch?v=H1V3mD00M1c

Website Design

 

https://www.getlayers.ai/layer/nexus

https://collectui.com/designs/sign-up-ui-design-inspiration

https://websiteprompts.ai/prompts/hair-salon-editorial

https://www.siteinspire.com/

https://loadmo.re/

https://logosystem.co/

Tech With Tim

 

https://www.youtube.com/watch?v=o8p7uQCGD0U

https://www.youtube.com/watch?v=7R-CfL21zIY&list=PLzMcBGfZo4-lMz6bsWzF2tt8K8iZJdLd1

https://www.youtube.com/watch?v=1HHRWg--Ce4&list=PLzMcBGfZo4-lkJOu1AWab-nFtjDw7aPek

GitHub - Download dan Install Source Code

 

https://www.youtube.com/watch?v=gSF5D39wECM&t=443s

https://www.youtube.com/watch?v=94xoOGQl4Ew&list=PL-eukzxzHa5LepTY0FTax92sAQVDjMumu

https://www.youtube.com/watch?v=q-mXwehlY7I

https://www.youtube.com/watch?v=83jbndVTkEc&t=4s

https://www.youtube.com/watch?v=N8mr5_LAApQ&t=18s

https://www.youtube.com/watch?v=oaX_mKTv4EU&t=38s

https://www.youtube.com/watch?v=EFeqcpWEeUQ

https://www.youtube.com/watch?v=-ak-MbqEym8

https://www.youtube.com/watch?v=NCxFULJkEfs

https://www.apachefriends.org/download.html

https://docs.endor.dev/guides/hello/

https://docs.endor.dev/guides/laravel/

https://endor.dev/s/lamp

https://github.com/Mikael2909/webcrud

https://github.com/topics/simple-crud?o=desc&s=forks

https://github.com/muhammadridwan47/WebcrudArkademy

https://github.com/topics/php-crud

https://github.com/indrasatya/crud-php-mysql

https://github.com/suryamsj/tutorial-crud-php-native

https://github.com/saturdayclass/simple-crud-php

https://github.com/sofyansetiawan/Create-Read-Update-Delete-CRUD-dengan-PHP-dan-MySQL

https://github.com/topics/simple-crud?o=desc&s=forks

https://github.com/pustakakoding/aplikasi-crud-php8-mysql8-bootstrap5-jquery-ajax

https://github.com/nurfawaiq/crud-php-mysql

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

🎯 Tujuan Pembelajaran

Setelah menyelesaikan lab ini, Anda akan dapat:

1. Mencari dan mengunduh source code proyek website berbasis PHP dari GitHub.

2. Menjalankan dan mengonfigurasi proyek secara lokal menggunakan XAMPP.

3. Melakukan modifikasi sederhana pada tampilan website (judul, warna, dan teks).

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

1. Buka browser dan akses situs GitHub.

2. Pada kolom pencarian GitHub, ketikkan kata kunci pencarian, misalnya web crud untuk mencari aplikasi CRUD sederhana.

3. Pilih salah satu repositori menggunakan bahasa pemrograman PHP (contoh dalam video: proyek milik Farhan Ade Atalarik).

4. Klik tombol hijau berikon panah/unduh, lalu pilih Download ZIP.

5. Ekstrak file ZIP tersebut di komputer Anda.

Modul 2: Setup Database dan Server Lokal (XAMPP)

1. Buka aplikasi XAMPP Control Panel, lalu klik Start pada modul Apache dan MySQL.

2. Masuk ke direktori instalasi XAMPP Anda (biasanya di C:\xampp\htdocs\).

3. Buat folder baru di dalam folder htdocs dengan nama crud-php.

4. Salin (copy) semua file dari folder hasil ekstrak GitHub ke dalam folder crud-php yang baru dibuat.

5. Buka browser dan ketikkan http://localhost/phpmyadmin/.

6. Buat database baru:

   • Klik tab New.

   • Beri nama database, misal: crud_web_php.

   • Klik Create.

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

1. Buka folder proyek crud-php menggunakan Visual Studio Code.

2. Cari file koneksi atau fungsi database (misal: file function.php).

3. Sesuaikan konfigurasi nama database agar mengarah ke database lokal yang baru dibuat (crud_web_php). Simpan file (Ctrl + S).

4. Uji coba dengan membuka browser dan akses: http://localhost/crud-php/.

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

6. Simpan perubahan dan refresh browser Anda untuk melihat hasilnya.

Modul 4: Upload dan Hosting Gratis di InfinityFree

1. Masuk ke akun InfinityFree Anda dan buka bagian File Manager.

2. Masuk ke dalam direktori htdocs hosting Anda.

3. Unggah (upload) seluruh file proyek dari folder crud-php lokal Anda ke dalam folder htdocs tersebut.

4. Unggah juga folder pendukung seperti folder css jika diperlukan.

5. Buat database baru di panel kontrol InfinityFree (pada menu MySQL Databases) dan catat detail host, database name, username, serta password-nya.

6. Masuk ke phpMyAdmin di InfinityFree, lalu lakukan import file database .sql seperti langkah lokal sebelumnya.

7. Sesuaikan kembali konfigurasi database pada file function.php di File Manager InfinityFree menggunakan detail database baru dari server hosting.

8. 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?