Tugas 7 : View of PPDB Page with Codeigniter 4

 Pemrograman Berbasis Kerangka Kerja

Latihan 7 - View with Codeigniter 4 (Create UI View of PPDB Page)

06/11/2023

        Halo semua! pada kesempatan kali ini, saya ingin membagikan pengalaman dalam membuat Project UI View of PPDB Page menggunakan Codeigniter 4. CodeIgniter merupakan framework PHP open-source yang ringan dan memungkinkan pengembangan aplikasi web dengan cepat berkat dukungan library yang beragam. Versi terbaru, CodeIgniter 4, hanya mendukung PHP 7.3 ke atas dan masih mengikuti konsep Model-View-Controller (MVC) dengan antarmuka dan struktur proyek yang sederhana, memungkinkan penulisan kode yang konsisten dan terstruktur. Kecepatan performa dan konfigurasi minim membuatnya populer di kalangan Web Developer.

Berikut langkah-langkah yang saya lakukan dalam membuat UI View of PPDB Page :

        1. Install Codeigniter 4 using Composer (Create Folder)

Dengan syarat Composer telah terinstall, buka Terminal, atur path folder pada C:\xampp\htdocs dan jalankan command composer create-project codeigniter4/appstarter nama_folder -vvv (-vvv merupakan opsional sebagai Verbose Mode yaitu detail informasi selama proses create project berlangsung)

        2. Testing running (Default Example of the Project)

Buka Visual Studio Code (atau bisa juga tetap di Terminal) dan jalankan command php spark serve

Dan, buka link yang diberikan (ctrl + click), yaitu http://localhost:8080

Dengan demikian Project Codeigniter 4 telah berhasil dijalankan. Selanjutnya saya perlu mengubah tampilan Default (index) sebagai tampilan awal halaman PPDB dan membuat Endpoint baru untuk menampilkan form registrasi dari PPDB.

        3. Create New Action 

Dalam file Home.php pada folder /app/Controllers , ubah return view fungsi Action dengan nama index dalam controller class Home 

Ubah yang semula return mengarah kepada View "welcome_message.php" menjadi "home.php".  File dari View home.php  akan dibuat setelah mengatur Action 

Setelah itu, buat Action untuk page Register, dengan membuat file baru dengan nama Register.php pada folder /app/Controllers , isikan dengan kode berikut

Controllers class Register berisi fungsi helper untuk form dan juga terdapat fungsi dengan nama register yang me-return pada View "register.php". File dari View register.php  juga akan dibuat setelah mengatur Action 
 

        4. Setup Template & View

Dalam pembuatan View dari halaman PPDB, pada folder /Views, pertama-tama tambahkan external template dari https://adminlte.io/ dengan cara Download lalu Extract dan buka template HTML Code Front-end yang akan digunakan. Setelah itu masukkan dalam folder /Views/template (Buat folder baru dengan nama templated dan buat file baru dengan nama "template-fe.php").  Potongan kode dari file template-fe.php kurang lebihnya sebagai berikut:

Kemudian tambahkan folder yang telah di-extract kedalam folder /Public dengan membuat folder baru dengan nama AdminLTE. Ini bertujuan agar assets dari template dapat digunakan kedalam Project

Jika langkah diatas telah dilakukan, selanjutnya adalah membuat View baru sebagai tampilan awal website. Pertama buat View/File baru dengan nama home.php dan potongan kode dari file tersebut kurang lebih seperti berikut:

Kedua, buat View baru dengan nama register.php sebagai tampilan Form PPDB pada website. Potongan kode dari file register.php kurang lebih seperti berikut:

        5. Create GET Route 

Setelah melakukan setup dan membuat View, langkah selanjutnya adalah mengatur Route dari Program ketika sedang berjalan. Dalam folder /app/Config ,buka file Routes.php, dapat dilihat telah tersedia route untuk tampilan index dan tidak perlu melakukan perubahan routes tersebut karena saya hanya ingin tampilan (View) awal website berubah tidak dengan routes nya. 

Kemudian untuk menampilkan View Register yang telah dibuat yaitu dengan membuat get routes baru dengan custom endpoint (disini saya menggunakan /ppdb/register) dan sambungkan dengan controller Register dengan Action register

        6. Testing running 

Jalankan seperti cara pertama, yaitu dengan php spark serve dan setelah itu buka Link yang diberikan yaitu http://localhost:8080 dengan cara ctrl + click pada Terminal VSCode 

Dapat dilihat tampilan index menampilkan View dari home.php, tak lagi menampilkan View dari welcome_message.php. Gambar dalam tampilan index berjumlah 3 buah dengan menggunakan button Next dan Previous (Diatur dalam home.php)

Kemudian untuk menampilkan tampilan dari Form Register PPDB, dapat dilakukan click pada navbar "Mendaftar" (base url telah diatur dalam template-fe.php) atau click pada button "Daftar Sekarang!" (base url telah diatur dalam home.php) atau jika dengan cara manual yakni tambahkan Endpoint setelah port 8080, menjadi seperti ini http://localhost:8080/ppdb/register dan hasilnya menjadi seperti berikut

Dalam register form, user juga dapat melakukan set Tanggal, Bulan dan Tahun dengan menggunakan Dropdown. Tampilan nya kurang lebih seperti berikut:

Untuk Dropdown pada bagian Bulan dan Tahun juga memiliki tampilan yang sama. 

Dan hasil setelah setup ketiga Waktu tersebut seperti berikut:

Note:

Untuk semua assets gambar yang saya gunakan, saya simpan pada Folder /Public dengan membuat Folder baru dengan nama "ui-img" 

Jika Anda ingin melihat lebih lanjut secara teknikal, Anda dapat kunjungi Repository saya pada Platform GitHub berikut : GitHub

Sekian, Terima kasih! 😊