Tugas 6 - Introduction to CodeIgniter ( CI )

Nama: Reihan Nanda Ramadhan

NRP: 05111840000132

Kelas: PBKK - A

Halo! Kali ini aku akan membagikan beberapa tutorial tentang CI (CodeIgniter). Sebelum aku mulai tutorial pertama yang berfokus mengenai apa itu CI, kalian harus sudah memiliki XAMPP dan sudah mendownload CI. Jika kalian belum memiliki XAMPP dan belum mendowload CI, kalian bisa mendownloadnya di bawah! Untuk CI, kalian bisa menggunakan CI 4 ataupun versi lamanya yaitu CI 3. Download sesuai keperluan kalian, tapi aku sarankan download yang CI 3 saja karena tutorial CI akan menggunakan CI 3. 

Download XAMPP 7.4.*

Download CodeIgniter 3

Download CodeIgniter 4 (Optional)

Okay, untuk tutorial awal ini kita akan membuat MVC menggunakan CI. Let's start it!

1. Pastikan kalian sudah membuka XAMPP Control Panel milik kalian. Biasanya jika baru menginstallnya, XAMPP Control Panel akan terbuka secara otomatis. 

Gambar 1. XAMPP Control Panel

2. Setelah terbuka, jangan lupa untuk menyalakan Apache dan MySQL (nanti kita akan menggunakan MySQL di beberapa tutorial ke depan, jadi untuk menyalakan ini di tutorial pertama hanyalah optional dan tidak akan bermasalah jika kalian tidak menyalakannya). Setelah itu, kalian download CI dan ekstrak file CI nya ke dalam file htdocs yang berada di dalam folder XAMPP kalian. 

Gambar 2. Ekstrak file CI ke dalam folder htdocs (source: PetaniKode)

Jika sudah diekstrak, kalian bebas mengganti nama folder CI nya sesuai dengan kalian. Saranku, ganti namanya dengan nama yang sederhana agar memudahkan kalian saat mengerjakan tutorial ini.

3. Setelah semua itu selesai, kalian bisa cek apakah CodeIgniter kalian sudah bisa digunakan atau tidak menggunakan link http://localhost/<nama_folder_ci_kalian>/ .

Gambar 3. Tampilan localhost CodeIgniter

4. Sekarang, buka code editor kalian dan akses folder CodeIgniter kalian. Disini aku menggunakan VS Code untuk mengakses folder CodeIgniter yang akan diedit. 

Gambar 4. Tampilan VS Code setelah membuka folder CodeIgniter

5. Untuk tutorial pertama ini, kita akan membuat MVC untuk halaman about dan contact. Pertama, kita harus membuat model View nya. Buka application > controllers > welcome.php. Setelah sampai di welcome.php, barulah kita bisa menambahkan View untuk about dan contact.

Gambar 5. Function untuk membuat View untuk about dan contact 

6. Pastinya, setelah membuat View kita harus mengkonfigurasi route agar View dapat dilihat. Sekarang kita akses konfigurasi route nya di application > config > routes.php. Editlah route nya sedemikian rupa agar View model untuk about dan contact dapat diakses.

Gambar 6. Function untuk mengkonfigurasi route about dan contact

7. Setelah membuat View dan route nya, saatnya kita isi about.php dan contact.php agar isi dari laman tersebut tidak kosong. Buatlah kedua file tersebut di direktori views.

Gambar 7. about.php dan contact.php dalam direktori views.

Gambar 8. Isi dari laman about dan contact  yang akan ditampilkan

Untuk isi dari about dan contact, kalian bisa berkreasi sesuka kalian. Mungkin kalian ingin mempercantiknya dengan CSS atau mungkin dengan bootstrap.

8. Setelah selesai mengedit file about dan contact, saatnya kita cek laman yang barusan kita buat. Untuk mengaksesnya, kalian cukup mengetikkan alamat http://localhost/<nama_folder_ci_kalian>/index.php/<nama_ laman_yang_kita_buat_tadi>. 

Contact:

About:

Selesai! Itu saja tutorial pertama kali ini, selamat mencobanya! 🎇