MODUL

WEB PROGRAMMING III

Disusun oleh:
MOHAMMAD SYAMSUL AZIS

SEKOLAH TINGGI MANAJEMEN INFORMATIKA

DAN KOMPUTER NUSA MANDIRI
PROGRAM STUDI SISTEM INFORMASI
JAKARTA
2020
 KATA PENGANTAR

Segala puji syukur kepada Allah Yang Maha Esa atas berkat rahmat-Nya penulisan
modul Mata Kuliah Web Programming III dapat diselesaikan dengan baik. Modul ini disusun
untuk memenuhi kebutuhan mahasiswa pada mata kuliah Web Programming III yang disajikan
dalam bentuk praktikum dan diharapkan dapat membekali mahasiswa dalam memahami
Pembuatan Website dengan menggunakan Template CSS dari Template Bootstrap dan
Framework dari Codeigniter 4.
Modul Web Programming III hanya ruang lingkup tentang halaman Administrator (Back-
End) saja. Di akhir perkuliahan mahasiswa diharapkan mampu mengimplementasikannya dalam
bentuk final project yang harus dipresentasikan sebagai syarat kelulusan mata kuliah Web
Programming III. Teknik penyajiannya dilakukan secara terpadu dan sistematis.
Seperti layaknya sebuah modul, maka pembahasan dimulai dengan menjelaskan target
pembelajaran yang hendak dicapai. Dengan demikian pengguna modul ini secara mandiri dapat
mengukur tingkat ketuntasan yang dicapainya.
Penulis menyadari sepenuhnya bahwa modul ini tentu masih memiliki beberapa
kekurangan. Untuk itu penulis dengan lapang dada menerima masukan dan kritik yang
membangun dari berbagai pihak demi kesempurnaannya di masa mendatang. Semoga modul ini
dapat bermanfaat bagi para pembacanya. Aamiin.

Jakarta, 20 Februari 2020

Mohammad Syamsul Azis

ii
 DAFTAR ISI

HALAMAN SAMPUL…………………………………………………………………. i
KATA PENGANTAR…………………………………………………………………. . ii
DAFTAR ISI……………………………………………………………………………. iii
PERTEMUAN 1 PENJELASAN KONTRAK KULIAH DAN TUGAS……………… 1
1.1. Penjelasan Kontrak Kuliah dan Penegasan Tugas……………………………… 1
PERTEMUAN 2 INSTALASI CODEIGNITER 4 DAN APLIKASI PENDUKUNG.. 2
2.1. Instalasi XAMPP...….………………………………………………………….. 2
2.2. Instalasi Github…………………………………………………………………. 3
2.3. Instalasi Composer……………………………………………………………… 4
2.4. Instalasi Codeigniter 4………………………………………………………….. 5
PERTEMUAN 3 PEMBUATAN DATABASE……………………………………….. 31
3.1. Membuat Database Pustaka……………………………………………………. 31
PERTEMUAN 4 MVC DAN INSTALASI PLUGINS VISUAL STUDIO CODE…… 37
4.1. MVC…………………………………………………………………………… 38
4.2. Instalasi Plugins Visual Studio Code………………………………………….. 39
PERTEMUAN 5 PEMBUATAN LAYOUT………………………………………….. 44
5.1. Pembuatan Layout…………………………………………………………….. 45
PERTEMUAN 6 IMPELEMENTASI MODEL DAN CONTROLLER……………… 60
6.1. Model dan Controller………………………………………………………….. 62
PERTEMUAN 7 REVIEW MATERI…………………………………………………. 91
PERTEMUAN 8 UJIAN AKHIR SEMESTER……………………………………….. 92
PERTEMUAN 9 PAGINATION DAN SEARCHING………………………………... 93
9.1. Pagination…………………………………………………………………….. 106
9.2. Searching……………………………………………………………………… 108
PERTEMUAN 10 INSTALASI LIBRARY FORM LOGIN…………………………. 105
10.1. Update Composer…………………………………………………………… .. 106
10.2. Instalasi Myth/Auth…………………………………………………………… 108
PERTEMUAN 11 IMPLEMENTASI FORM LOGIN DAN FORM REGISTRASI… 116
iii
 11.1. Implementasi Form Login dan Form Registrasi…………………...………….. 116
PERTEMUAN 12 PEMBUATAN LOGOUT………………………………………… 122
12.1. Pembuatan Menu Logout……………………………………………………… 122
PERTEMUAN 13-15 PRESENTASI PROJECT……………………………………... 123
PERTEMUAN 16 UJIAN AKHIR SEMESTER……………………………………... 124
DAFTAR PUSTAKA…………………………………………………………………. 125

iv
 PERTEMUAN 1
PENJELASAN KONTRAK KULIAH DAN TUGAS

Deskripsi Pembelajaran
Pada bab ini dijelaskan bagaimana proses pembelajaran berlangsung setiap pertemuannya yaitu
mahasiswa diarahkan untuk mandiri dengan diberikan tugas individu di setiap pertemuan yang
mana tugas tersebut berupa mengimpplementasikan dan mengerjakan tiap materi dan latihan
yang ada pada pertemuan berikutnya. Sehingga pada saatnya pertemuan tersebut berlangsung,
mahasiswa sudah mengetahui materi yang ada dan bisa fokus berdiskusi pada bagian materi yang
masih kurang paham.

Tujuan Pembelajaran
Pada bab ini diharapkan mahasiswa dapat memahami kontrak perkuliahan yang harus diikuti dan
jenis tugas yang akan diberikan selama satu semester ke depan.

1.1. Penjelasan Kontrak Perkuliahan dan Tugas

A. Tugas Projek Kelompok
1. Tugas project diadakan untuk memperoleh nilai dan pengganti UTS dan UAS. Tugas ini
dikerjakan secara kelompok dengan 1 kelompok sebanyak 5 mahasiswa atau disesuaikan
dengan jumlah mahasiswa dalam satu kelas.
2. Bentuk tugas projek adalah mencari aplikasi web nativ (tidak menggunakan framework)
yang sudah jadi kemudian di transformasikan menjadi aplikasi web framework
CodeIgniter 4 dan membuat analisa kebutuhan user dan sistem dari web tersebut.
3. Aplikasi web nativ harus ditunjukan ke dosen pengampu mata kuliah, sebagai bukti
bahwa aplikasi web nativ memang ada dan dapat dijalankan.
4. Aplikasi web nativ diperbolehkan didapat dari berbagai sumber.

5
B. Tugas Mingguan (Tugas Individu)
1. Bentuk tugas mingguan adalah mengimplementasikan materi tiap pertemuan yang ada di
modul dimulai dari materi pertemuan ke 2 sampai materi pertemuan terakhir.
2. Tugas mingguan dikerjakan dari minggu sebelumnya lalu disetorkan di minggu
berikutnya.

6
 PERTEMUAN 2
INSATALASI CODEIGNITER 4 DAN APLIKASI PENDUKUNG

Deskripsi Pembelajaran
Pada bab ini akan dibahas tentang bagaimana cara download/mengundung dan
memasang/instalasi framework codeigniter 4, xampp, git hub, dan composer. Dan mengenal
struktur folder dari framework codeigniter 4 sendiri.

Tujuan Pembelajaran
Pada bab ini diharapkan mahasiswa dapat memahami materi-materi fundamental yang
diperlukan sebelum mempelajari framework codeigniter, yaitu bagaimana cara melakukan
instalasi perangkat-perangkat lunak yang diperlukan untuk dapat bekerja dengan codeigniter
seperti PHP, web server, database server, dan framework codeigniter itu sendiri. Mahasiswa juga
diharapkan dapat memahami pola desain atau arsitektur dari Model-View-Controller (MVC),
yang merupakan syarat mutlak dalam proses pengembangan aplikasi menggunakan codeigniter 4
ini.

2.1. Instalasi XAMPP

Xampp adalah aplikasi server yang nantinya digunakan untuk membuat database jenis
MySQL. Selain MySQL yang digunakan di XAMPP ini juga digunakan fungsi dari Apache.
Yang keduanya dapat diaktifkan melalui control panel xamp. Untuk mendukung codeigniter 4
dibutuh xampp versi terbaru minimal versi 7. Jika computer belum terinstalasi software XAMPP
ini, maka silahkan download aplikasi xampp-nya di web resmi yakni di url: apachefriends.org
Setelah itu pilih yang XAMPP for Windows jika menggunakan sistem operasi computer
windows, jika bukan windows bisa disesuaikan dengan sistem operasi yang sudah terpasang.
Untuk lebih jelasnya bisa ikuti tahapan-tahapanya di halaman berikutnya.

7
Setelah berhasil diunduh langsung bisa diinstall pada komputer dengan cara double click atau
klik dua kali aplikasi XAMPP tersebeut. Maka akan tampil seperti gambar di bawah ini:

Lanjutkan dengan tekan tombol Next.

8
Tekan Next kembali.

Untuk folder install posisi di disk C , lalu tekan tombol Next kembali.

9
Pilih bahasanya English, kemudian tekan tombol Next lagi. Terus pilih tombol next hingga
tampil tampilan proses loading seperti gambar di bawah ini:

Jika prosesnya instalasinya sudah selesai maka akan tampil tampilan sebagai berikut:
10
Tampilan di atas disebutnya XAMPP Control Panel. XAMPP Control Panel inilah yang nantinya
akan sering dibuka untuk mengaktifkan Apache dan MySQL. Jadi hanya dua aksi yang
dibutuhkan dalam pembuatan web ini, yaitu Apache dan MySQL saja, yakni dengan klik start
pada kedua tombol Apache dan MySQL-nya. Dengan begitu Apache dan MySQL sudah dapat
berfungsi.

2.2. Instalasi Git Bash

Kunjungi web resmi dari git bash seperti gambar di bawah ini. Lalu download.

11
Kemudian pilih dengan menyesuaikan sistem operasi yang sudah terpasang di komputer.

Setelah berhasil diunduh, langsung install aplikasi dengan mengikuti tahapan sebagai berikut:

12
Ketika mentahan aplikasi Git Bash dibuka maka akan tampil jendela seperti diatas lalu klik run.
Perlu diketahui untuk instalasi git bash ini dibutuhkan internet. Karena ada beberapa part git bash
membutuhkan koneksi jaringan/internet. Jika tidak tersedia jaringan internet maka instalasi akan
gagal.

Tampilan selanjutnya pilih Next.

13
Pastikan penyimpanan ada pada di disk C di dalam folder program files. Selain disk C pun boleh
asal disk tersebut terdapat folder program files di dalamnya.

Checklist pada additional icons jika memang icon dari aplikasi git bash-nya ingin ditampilkan di
dekstop komputer. Kemudian sampai akhir proses intalasi klik next saja.

14
Apabila proses intalasinya berakhir tampilan terakhir seperti gambar di atas. Jika aplikasinya
langsung ingin dijalankan bisa checklist pada check box Launch Git Bash. Tetapi jika tidak bisa
di unchecklist saja.
Adapun tampilan git bash yang sudah berhasil diinstalasi bisa dilihat pada gambar di bawah ini:

15
2.3. Instalasi Composer
Silahkan masuk ke web resmi composer, untuk urlnya bisa dilihat pada
gambar dibawah ini:

Kemudian pilih donwload.

Setelah tampilan seperti di atas pilih yang Composer-Setup.exe.

16
Saat install composer akan tampil tampilan di bawah ini:

Kemudian pilih Install for all users (recommended)

Lalu pilih Next.

17
Seperti instalasi sebelumnya gunakan disk C untuk folder penyimpanannya dan checklist check
box add this PHP your path. Kemudian pilih Next. Pastikan sebelum instalasi composer XAMPP
sudah terinstall terlebih dahulu dikarenakan composer membutuhkan php.exe. Dan jangan lupa
koneksi jaringan internet saat instalasi composer ini.

Kemudian next lagi hingga ketemu tombol finish seperti ini. Dan composer pun selesai diinstall.

18
2.4. Instalasi Visual Studio Code
Visual studio code disini dibutuhkan sebagai code editor. Selain visual studio code, ada atom
dan juga sublime yang bisa digunakan code editor. Untuk kali ini digunakan visual studio code
untuk editor yang memang sering digunakan oleh programmer saat ini dalam membuat web
menggunakan codeigniter 4. Untuk tahap instalasi visual studio code dimulai setelah mengunduh
mentahannnya terlebih dahulu di web resmi. Untuk alamat websitenya bisa cek pada gambar di
bawah ini:

Setelah berhasil ke web resminya bisa langsung klik download.

Pilih sistem operasinya yang sesuai dengan yang sudah terpasang di komputer.

19
Saat instalasi awal, akan muncul tampilan sebagai berikut:

Pilih I accept the agreement, kemudian pilih Next hingga ketemu dengan tombol finish.

2.5. Instalasi Codeigniter 4

Sebelum melakukan instalasi codeigniter 4 nya ada tahapan yang harus dilakukan terlebih
dahulu agar framework ini dapat digunakan pada komputer tanpa kendala. Tahapannya sebagai
berikut:

20
Buka visual studio code, lalu pilih file -> open file.

Kemudian masuk ke disk C -> xampp -> php. Di dalam folder php cari file dengan nama php
yang memiliki format konfigurasi seperti yang ditunjuk seperti gambar di atas.
Setelah berhasil dibuka di visual studio code tampilannya akan seperti ini:

21
Nama filenya adalah php.ini.
Kemudian hilangkan tanda ; (titik koma) di depan script extension=intl letaknya ada pada baris
ke 917 untuk lebih jelasnya bisa lihat gambar di bawah ini:

Jika sudah berubah maka script tersebut akan berubah seperti gambar di bawah ini:

22
Setelah konfigurasi php.ini sudah berhasil lalu tahapan selanjutnya masuk ke web resmi daripada
codeigniternya.

Kemudian pilih Menu Bar Documentation.

23
Lalu pilih button Online UG (User Guide)

Pilih installation pada sidebar.

24
Tahap selanjutnya pilih yang composer installation karena sebelumnya kita sudah instalasi yang
composernya.

25
Lalu salin script yang diblock biru seperti yang ada pada gambar di bawah ini

Setelah disalin buka git bash pada disk C -> xampp -> htdocs dan klik kanan lalu pilih Git Bash
Here

26
Lalu paste (tempel) hasil script yang sudah disalin sebelumnya pada git bash. Maka akan seperti
gambar di bawah ini:

Tambahkan nama folder project yang diinginkan seperti gambar di bawah ini:

Setelah selesei menambahkan nama folder projectnya tinggal tekan enter untuk mengeksekusi
jalannya instalasi. Tunggu prosesnya hingga selesai. Jika berhasil maka tampilannya sebagai
berikut:

27
Agar tampilan di screen git bashnya kembali bersih, ketikkan perintah clear lalu enter.
Kemudian untuk mengaktifkan server codeigniter 4 tahapannya sebagai berikut:

Masuk terlebih dahulu ke dapam folder project yang sudah dibuat dengan cara mengetikkan
koding pada gambar di atas. Kemudian enter.

28
Lanjutkan dengan mengaktifkan server php pada codeigniternya dengan mengetikkan koding
php spark serve seperti gambar di atas.

Salin pada bagian localhost:8080 untuk dicek dijalankan di browser apakah framework
codeigniternya sudah berjalan atau belum.

29
Jika sudah dipaste di url browser maka tampilannya seperti gambar di atas. Artinya framework
codeigniter sudah bisa digunakan dan dalam keadaan aktif.

30
 PERTEMUAN 3
PEMBUATAN DATABASE

Deskripsi Pembelajaran
Pada bab ini akan dibahas tentang pembuatan database atau basis data untuk nantinya akan
dikoneksikan dengan project web yang akan dibuat. Ada beberapa tabel yang akan dibuat pada
studi kasus ini. Diantaranya ada tabel buku dan anggota, serta selebihnya adalah tabel otomatis
yang akan dibuat dari library framework codeigniter 4 sendiri.

Tujuan Pembelajaran
Pada bab ini diharapkan mahasiswa mampu memahami dalam pembuatan database yang sesuai
dengan project web yang mereka buat. Dan mampu mengimplementasikannya dengan baik,
bagaimana memperhatikan size yang tepat untuk tiap fieldnya dan tabel apa saja yang harus
dibuat sesuai kebutuhan program. Sehingga didapatkan manajemen database yang baik dan
benar.

3.1. Membuat Database Pustaka

Langkah pertama dalam membuat database adalah mengaktifkan terlebih dahulu Apache dan
MySQL yang terdapat pada control panel XAMPP dengan cara klik start pada tombol Apache
dan MySQLnya. Maka dari itu silahkan diaktifkan terlebih dahulu seperti gambar di bawah ini:

31
Setelah Apache dan MySQLnya sudah aktif , tahap selanjutnya masuk ke browser lalu ketikkan
alamat berikut pada url: localhost/phpmyadmin.

Untuk membuat database klik Menu Bar Databases, lalu masukkan nama databasenya: pustaka.
Kemudian klik create.

32
Buat tabel yang pertama dengan nama: buku dan jumlah kolom/number of fields: 6.

Lanjutkan dengan mengisi nama kolom, type, dan length-nya seperti gambar di bawah ini:

Jangan lupa untuk menambahkan primary key pada id_buku yakni kolom yang pertama. Untuk lebih
detailnya bisa dilihat pada gambar di bawah ini:

33
Setelah ditambahkan primary key pada id_buku lanjutkan dengan klik save yang terletak di pojok kanan
bawah.

Maka hasilnya akan seperti ini:

Lanjutkan dengan membuat tabel yang kedua dengan nama anggota dan jumlah kolom berjumlah
4. Untuk membuat tabel baru bisa dengan cara klik Database:pustaka yang terdapat pada
headbar.

34
Untuk nama kolom,tipe, dan ukuran tabel anggota bisa dilihat pada gambar di bawah ini:

Setelah tabel anggota selesai dibuat tahap selanjutnya isi data pada tabel buku dengan cara klik
insert.

Kosongkan pada bagian id_buku karena id_buku penomorannya dibuat otomatis dan sampul
juga dikosongkan terlebih dahulu. Kemudian isikan seperti ini:

Cukup isikan 2 data saja lalu klik Go.

35
Kemudian klik Browse maka akan tampil tampilan sebagai berikut:

Jika pembuatan database sudah selesai, untuk Apache dan MySQLnya bisa dinonaktikfan
kembali.

36
 PERTEMUAN 4
MVC DAN INSTALASI PLUGINS VISUAL STUDIO CODE

Deskripsi Pembelajaran
Pada bab ini akan dibahas tentang penjelasan mengenai apa aitu mvc dan bagaiman cara kerjanya
serta menjelaskan plug in apa saja yang harus diinstalasi ke dalam visual studio code yang
bertujuan untuk memudahkan dalam hal pengodingan.

Tujuan Pembelajaran
Pada bab ini diharapkan mahasiswa dapat memahami kerangka kerja mvc, yakni model, view
dan controller. Selain itu mahasiwa juga diharapkan dapat mengoding dengan mudah dan cepat
karena adanya pembelajaran tentang plug in apa yang harus diinstalasi pada visual studio code.

4.1. MVC
MVC merupakan model kerangka kerja yang diterapkan pada codeigniter. MVC sendiri
merupakan singkatan dari Model, View, dan Controller. Pada pertemuan kali ini akan dibahas
satu persatu mengenai tentang ap aitu model, view dan controlller.
a. Model
Pada model memiliki tugas yang berkaitan dengan pengolahan database. Model ini lah yang
berfungsi sebagai jembatan atau koneksi antara database dengan program web yang dibuat. Dan
nantinya sangat berperan penting jika sudah diimplementasikan dengan view. Dimana data yang
ada pada database bisa ditampilkan pada fungsi view, dalam hal ini adalah layout.
b. View
View memiliki peran dalam hal menampilkan halaman website. Baik back end ataupun front
end. Dalam kata lain view ini bertugas sebagai layout.
c. Controller
Untuk controller memiliki fungsi terhadap view dan juga model. Tanpa adanya controller view
dan model tidak dapat dijalankan. Jadi controller inilah yang bertugas menjalankan fungsi dari
view dan juga model. Dan keduanya pun bisa dijalankan secara langsung oleh control.
Adapun skema atau siklus mvc sendiri dapat dilihat dari gambar di bawah ini:

37
Dari gambar di atas dapat dijelaskan bahwa apa yang ditampilkan dan dijalankan dari browser itu
berawal dari kerja web server. Dari web server terdapat routes yang berfungsi sebagai kontrol url
yang terdapat pada browser. Kemudian dari routes masuk ke dispatcher. Dispatcher ini lah yang
membaca perintah yang dikirimkan oleh controller. Sedangkan controller sendiri membawa
fungsi yang dikirimkan oleh model dan view. Dimana model membawa fungsi yang diambil dari
database. Database yang dicontohkan disini adalah MySQL.

4.2. Instalasi Plugins Visual Studio Code

Plugins yang akan diinstalasi pada visual studio code terdapat 3 macam, diantaranya: php
intelephense, prettier dan snippet. Adapun tahapan instalasinya sebagai berikut:
a. PHP Intelephense
Cara instalasinya cukup mudah. Buka kembali visual studi code. Lalu ketikkan php
intelephense pada search box yang terdapat pada sidebar. Perlu diperhatikan untuk instalasi
semua plugins pada visual studio code ini menggunakan koneksi internet. Untuk lebih jelasnya
pengetikkan di search box pada sidebar visual studio code bisa dilihat pada gambar di bawah ini:

38
Kemudian klik yang PHP Intelephense. Lalu klik install, maka secara otomatis akan ada
attention dipojok kanan bawah untuk install secara manual dan lanjutkan dengan klik saja. Maka
akan terunduh file seperti di bawah ini:

Drag/Tarik file
tersebut ke dalam
sidebar ini

Dan tunggu prosesnya hingga selesai.

Jika sudah berhasil diinstalasi, tahap selanjutnya konfigurasi php language featurenya agar php
intelephense ini dapat berjalan.
Sama seperti php intelephense ketik di search box: @builtin php . Maka akan tampil seperti
gambar di bawah ini:

39
Setelah itu klik disable hingga berubah menjadi enable seperti contoh gambar di atas.
Adapun fungsi dari php intelephense ini sendiri sebagai sense saat hendak mengoding. Misal
saja saat ingin mengetikan myql_connect maka secara otomatis php intelephense ini akan
memberikan rekomendasi bar saat kita baru mengetikkan satu atau dua huruf yang kita ketik.
Plugins ini mencoba menganalisis apa yang sedang kita fikirkan dan apa yang sedang ingin kita
ketik. Jika apa yang kita ingin cocok dengan yang dimaksud otomatis akan tampil di
recommendation bar dan tinggal tekan tab saja maka yang ada pada recommendation bar tersebut
akan pindah ke dalam screen script kita.
b. Prettier
Instalasi prettier sama halnya dengan intelephense. Ketik prettier pada search box. Lalu klik
Prettier – Code Formatter.

Setelah itu tahpannya sama persis dengan php intelephense. Jika sudah terinstall maka tombol
install akan berubah jadi uninstall seperti gambar di bawah ini:

40
Kemudian tekan “Ctrl + , “ untuk membuka menu setting.

Ketik format pada bar search settingnya.

Kemudian checklist pada bagian Editor: Format on Save.

41
 Adapun fungsi dari prettier ini sendiri adalah untuk merapikan script secara otomatis setalah
file disimpan atau setelah menekan Ctrl + S.
c. Snippets
Untuk instalasi snippets berbeda dengan php intelephense dan prettier. Caranya klik File ->
Preferences -> User Snippets.

Klik new snippets untuk membuat snippet baru:

42
Buat file baru snippet dengan nama: html.json. Untuk ekstensinya gunakan format json.
Penamaan snippet barunya bebas sesuai keinginan. Tapi dalam pembelajaran kali ini disesuaikan
seperti gambar di bawah ini:

Lalu ketikkan perintah di bawah ini:

Fungsi dari coding di atas adalah untuk memudahkan dalam menampilkan tag php. Jadi dari sini
dapat diketahui fungsi snippet adalah sebagai shortcut dalam membuat fungsi-fungsi php, html
dan lain sebagainya yang dengan mudah dapat dipanggil ke dalam script yang sedang dikerjakan.
Dengan teknis misal seperti contoh gambar di atas untuk memanggil <?php $...... ?> hanya
dengan mengetikkan php pada script lalu tekan tab maka akan tampil fungsi tag tersebut, yakni:
<?php $...... ?> .
43
 PERTEMUAN 5
PEMBUATAN LAYOUT

Deskripsi Pembelajaran
Pada bab ini akan dibahas tentang pembuatan layout menggunakan template bootstrap. Layout
yang akan dibuat adalah layout pada bagian back end. Menu yang terdapat pada layout yang
akan dibuat nantinya ada menu home, daftra buku, daftar anggota, dan logout.

Tujuan Pembelajaran
Pada bab ini diharapkan mahasiwa dapat memahami dalam pembuatan layout pada website
dengan menggunakan template bootstrap. Dan mahasiswa dapat dengan terampil membuat
desain yang menarik dari tampilan websitenya. Karena bootstrap menyediakan banyak sekali
template-template yang menarik untuk mempercantik tampilan website.

5.1. Pembuatan Layout

Sebelum masuk ke dalam pembuatan layout, seperti biasa aktifkan terlebih dahulu php
server dari codeigniter 4 nya. Caranya masuk ke disk C -> xampp -> htdocs -> klik kanan pilih
Git Bash Here.

44
Setelah tampilan git bashnya terbuka dilanjutkan dengan mengetikkan koding di bawah ini untuk
masuk ke dalam folder pustaka-booking.

Untuk cd sendiri merupakan singkatan dari change directory. Artinya disini fungsi dialihkan ke
dalam folder pustaka-booking.
Tahapan selanjutnya ketikan koding di bawah ini:

Setelah berhasil diaktifkan tampilannya seperti di bawah ini:

Saat ingin menghentikan php server dari codeigniter 4 ini sendiri hanya dengan menekan CTRL
+ C. Kemudian tahap selanjutnya salin tulisan localhost:8080 untuk dipaste di url browser. Atau
bisa diketik secara langsung pada browser: localhost:8080 lalu enter. Maka tampilannya akan
seperti berikut:
45
Langkah selanjutnya silahkan buka visual studio code. Kemudian pilih File -> Open -> Select
Folder -> Pilih folder project pustaka-booking yang ada di dalam htdocs -> Klik Open.
Setelah file terbuka dilanjutkan dengan membuat file baru dengan cara klik folder app yang
terdapat di dalam folder pustaka-booking kemudian klik folder app, klik kanan pada folder
controllers, pilih new file beri nama filenya: Pages.php. Perlu diperhatikan tiap penulisan nama
file controller di awali dengan huruf besar. Untuk detailnya bisa lihat gambar berikut:

46
Selanjutnya ketikan perintah echo “Hello World” ; di dalam public function index().

Dilanjutkan dengan klik env.

47
Env sendiri merupakan singkatan dari environment. Setelah env tersebut diklik. Klik kanan pada
env lalu pilih copy. Setalah dicopy/disalin rename dengan cara klik kanan pilih rename. Rename
dengan nama: .env. Hasilnya seperti berikut:

Setelah direname maka simbol file env akan berubah menjadi simbol setting atau konfigurasi
seperti yang terlihat pada gambar di atas.
Tahap selanjutnya hapus hashtag yang terdapat pada CI_Environmet dan ubah jenisnya dari
production menjadi developmnet. Hal ini dengan tujuan selama pengodingan ketika terjadi
kesalahan dalam script akan diperlihatkan atau ditampilkan. Karena jika jenisnya production
ketika program debug maka kesalahan tidak akan diperlihatkan oleh sistem. Adapun detailnya
bisa dilihat pada gambar di bawah ini:

48
Tampilan setelah diubah:

Jangan lupa untuk selalu CTRL+S setelah melakukan perubahan pada script. Kemudian cek di
browser, dan selalu ingat ketika ada yang baru dirubah selalu refresh atau reload laman
browsernya agar yang ditampilkan sesuai dengan update-an yang terbaru.

49
Dan dapat dilihat pada browser di atas pada keterangan Environment berubah menjadi
development.
Konfigurasi env selanjutnya yakni pada app.baseUrl=’ ‘. Caranya sama dengan yang
sebelumnya hapus hashtag (#) di depan scriptnya.

Setelah dihapus hashtag maka script tersebut akan aktif.

50
Di dalam kutip baseURL tambahkan hostnamenya.

Ganti script Home pada Controller Pages.php menjadi Pages

Jika sudah, langsung reload di browser. Dan dapat dilihat hasilnya sebagai berikut:

Hal di atas dilakukan untuk testing apakah fungsi controller sudah berfungsi atau belum.
Tahap selanjutnya masuk ke laman bootstrap, pastikan sudah terkoneksi internet. Karena untuk
ke laman resmi bootstrap dibutuhkan akses ke internet.

51
Klik documentation.

Pilih Starter template.

52
Klik copy pilih Starter template.

Setelah itu kembali lagi ke visual studio code. Buat folder baru di dalam folder view.

Buat nama foldernya dengan nama Layout.

53
Buat file degan nama header.php dan footer.php di dalam folder Layout.

Lalu paste hasil salinan sebelumnya di laman file header.php.

54
Pindahkan script yang diblock seperti gambar di bawah ini ke laman file footer.php.

Setelah dipindahkan CTRL+S ke kedua halaman tersebut. Tambahkan file home.php di dalam
folder layout. Dan rename folder Layout menjadi layout. Dari huruf L besar ke huruf l kecil.

Pindahkan Hello World yang ada di laman file header.php ke dalam laman home.php yang ada di
dalam folder layout.

55
Ubah kodingan yang ada di dalam file Pages.php seperti gambar di bawah ini:

Kembali lagi ke laman bootstrap kemudian ketikkan nav pada search box. Lalu klik yang navbar.

56
Copy navbar jenis navbar yang terdapat pada baris kedua.

Tempel atau paste di laman file header.php di bawah coding <body>

Sisipkan koding berikut (pada gambar yang diberikan frame warna biru) dan hilangkan (hapus)
koding yang di block sesuai yang terlihat pada gambar di bawah ini.

57
Lalu sesuaikan koding yang ada pada laman home.php seperti gambar di bawah ini.
Reload/refresh laman browser maka akan tampil tampilan seperti ini:

Langkah selanjutnya masuk ke folder Controller ->Routes.php. Rubah Home menjadi Pages.

58
Ketika url localhost:8080/Pages pada kata Pagesnya dihapus akan tetap tampil seperti di bawah
ini dan tidak ke halaman welcome lagi.
Halaman Welcome:

Halaman yang sudah dirubah Routes.phpnya ke Pages:

Artinya disini Indexnya sudah dipindah ke Pages dan bukan lagi ke Home (File Default CI 4)

59
 PERTEMUAN 6
IMPLEMENTASI MODEL DAN CONTROLLER

Deskripsi Pembelajaran
Pada bab ini akan dibahas tentang penerapan model dan controller. Pada model akan dibahas
tentang pembuatan fungsi CRUD (Create, Rename, Update dan Delete) dan penerapan DML
(Data Manipulating Language). Dari menampilkan data-data buku, menambahkan data buku,
mengubah data buku dan menghapus data buku.

Tujuan Pembelajaran
Pada bab ini diharapkan mahasiswa dapat memahami dalam penerapan model dan controller
pada framework codeigniter 4. Dari memahami fungsi CRUD sampai dengan DML di dalam
framework codeigniter 4.

6.1. Model dan Controller

Melanjutkan dari program selanjutnya. Tambahkan file di dalam folder layout dengan nama
tempalate.php. Kemudian pindahkan kodingan yang ada di dalam file header.php dan footer.php
ke laman template.php. Lalu hapus file header.php dan footer.php-nya.

60
Tambahkan perintah seperti di bawah ini di dalam script yang ada di laman template.php.

Beralih dari template.php ke laman home.php yang ada di dalam folder layout. Sesuaikan koding
yang ada pada home.php seperti gambar di bawah ini:

Khusus untuk yang script lorem ipsum itu bisa otomatis dengan mengetikkan lorem lalu tab
maka kalimat selanjutnya akan muncul otomatis.
Kembali ke template.php, ubah kata Home menjadi Beranda.

61
Reload/refresh browser untuk lihat hasil perbedaanya dengan yang sebelumnya:

Selanjutnya buat file baru dengan nama Buku.php di dalam folder Controller. Lalu masukkan
koding berikut:

Selanjutnya buat file baru dengan nama BukuModel.php di dalam folder Models dan tuliskan
script seperti gambar di bawah ini:

62
Tambahkan folder baru di dalam folder View dengan nama buku. Kemudian di dalam folder
buku tambahkan 3 file baru dengan nama detail.php, index.php dan tambah.php.

Kembali lagi ke laman bootsrap. Pilih documentation-> ketik di search box table.

63
Pilih jenis table seperti yang ada pada gambar di bawah ini lalu copy.

Paste di halaman index.php.

64
Hapus bagian yang tidak penting dan sisakan script yang dibutuhkan. Untuk lebih detailnya bisa
lihat gambar di bawah ini:

65
Tambahkan script di index.php seperti di bawah ini:

Tahap selanjutnya lengkapi scriptnya seperti di bawah ini:

66
Halaman index ini nantinya berfungsi sebagai view dari daftar buku. Di dalamnya terdapat
fungsi perulangan (foreach) yang berguna untuk memanggil semua data buku yang terdapat pada
tabel buku.
Tahapan selanjutnya masukkan beberapa gambar pada disk C -> xampp -> htdocs -> pustaka-
booking -> public -> img.

Setelah itu edit data pada record tabel buku di bagian field sampul.

Nama sampul harus sesuai dengan nama gambar yang ada pada folder img. Format gambarnya
pun harus sama dengan yang ada di dalam folder img.
Ubah beberapa script pada template.php. Yakni pada bagian hrefnya.

Tambahkan script di Routes.php

67
Setelah itu jangan lupa setting env untuk koneksi databasenya. Hapus hashtag (#) pada script
yang diblock di bawah ini:

Lalu ubah databasenya menjadi pustaka (sesuai nama database yang sudah di buat di
phpmyadmin sebelumnya.

68
Dan reload browser untuk melihat hasilnya:

Selanjutnya untuk script di dalam file detail.php dibutuhkan card file. Untuk card file bisa
dengan menyalin di template bootstrape. Search di search box card file. Pilih yang jenis
horizontal lalu copy.

Paste di dalam file detail.php.

69
Kemudian sempurnakan kodingnya seperti di bawah ini:

Pada href di index.php pada tombol edit diubah menjadi sebagai berikut:

70
Klik tombol detail pada laman index untuk menampilkan laman detail.

Setelah klik detail hasil dari laman detailnya seperti gambar di bawah ini:

Jika ingin kembali ke daftar buku bisa dengan klik Kembali Ke Daftar Buku.
Tahapan selanjutnya ke fungsi tambah data buku. Ada yang perlu ditambahkan pada laman
ModelBuku.php.

71
Tambahkan method tambah pada file Buku.php di dalam folder Controllers.

Kurang huruf s,
harusnya Services

72
Kemudian tambahkan method simpan.

Tambahkan routes untuk tambah di Routes.php.

Untuk rancangan tambah.php dibutuhkan css dari bootsrap.

73
Pilih yang jenis form: Horizontal form.

Lalu paste di laman tambah.php

74
Hapus bagian yang tidak diperlukan dan sesuaikan kodingnya seperti ini:

75
Tambahkan script berikut di laman file index.php

Lalu reload browsernya:

Ketika klik tambah data buku maka ini yang akan tampil:

76
Agar formnya lebih rapi ada script yang harus di hapus pada file tambah.php. Yang dihapus
seperti yang diblock biru pada gambar di bawah ini:

77
Setelah diperbaiki tampilannya kan lebih rapi:

Agar text fieldnya tidak terlalu panjang maka panjang kolomnya perlu dirubah. Ubah yang
tadinya sizenya 10 menjadi 4.

78
Setelah diubah sizenya menjadi 4 maka hasilnya seperti ini:

Selanjutnya agar data yang ditambahkan terdapat pesan pemeberitahuan bahwa data berhasil
ditambahkan pada laman daftar buku maka perlu ditambahkan script sebagai berikut:

79
Setelah ditambahkan Flashdata maka hasilnya akan seperti ini jika data berhasil ditambahkan:

Tambahkan method hapus di dalam Controller Buku.

80
Tambahkan routes delete di routes.php nya

Ubah koding href pada aksi hapus di laman detail.phpnya menjadi seperti ini:

Maka hasilnya akan seperti ini:

81
Dan ketika klik OK maka laman buku akan menampilkan pesan data berhasil dihapus.

Tahapan selanjutnya beralih ke fungsi upload. Untuk fungsi upload koding yang akan dirubah-
rubah ada pada laman tambah.php. Dan ada beberapa komponen yang harus ditambahkan yakni
file browser. Untuk itu diperlukan css dari template bootstrap kembali. Silakan buka kembali
laman dari bootstrap. Kemudian cari file browser.

82
Tambahkan script berikut di form action tambah.phpnya, agar form tambah dapat membaca
format file yang diupload.

Dan ubah koding pada komponen sampul seperti berikut.

Dan hasilnya bisa dilihat di bawah ini:

Ubah koding yang ada di dalam method simpan seperti dibawah ini dan hapus yang berkaitan
script validation dari services, karena untuk berikutnya akan ditambahkan script session di dalam

83
BaseController sehingga tidak perlu lagi menambahakan validation dari services pada tiap
method.

Hapus
Hapus

Pada array mime_in ubah pesannya seperti di bawah ini:

84
Selanjutnya tambahkan koding session(); di BaseController.php.

Selanjutnya tinggal form ubah. Untuk form ubah kodingannya tinggal copas (copy paste) dari
form tambah.php.

Ubah dari Tambah Data Buku menjadi Form

Ubah Buku

85
Rubah pada tiap valuenya dari Judul hingga value sampul. Untuk lebih jelasnya bisa lihat
gambar berikut:

Tambahkan routes untuk method ubah di Routes.php-nya.

Tambahkan method ubah di dalam Controller Buku.

86
Rubah form action pada ubah.php-nya.

Dan rubah juga href pada aksi ubah di detail.php

Untuk method update perintahnya sama seperti perintah method simpan hanya ada sedikit yang
dirubah saja.

87
Tambahkan komponen sampulLama dengan type hidden seperti gambar di bawah ini:

Pada bagian method update sesuaikan kodingnya seperti di bawah ini. Untuk letaknya sendiri
setelah redirect.

88
Setelah itu bisa di uji coba pada form ubah, dirubah nama penerbitnya dari andre pratama
menjadi andre.
Sebelum dirubah:

Saat dirubah:

Setelah dirubah:

89
90
 PERTEMUAN 7
REVIEW MATERI

Untuk mengetahui sejauh mana mahasiswa memahamai materi yang sudah disampaikan dari
pertemuan 1 sampai pertemuan 6, maka dipertemuan 7 ini dibuatkanlah sebuah studi kasus yang
harus diselesaikan. Dengan konsep MVC yang sudah dijelaskan pada pertemuan 1 hingga 6 dari
instalasi sampai dengan pembuatan program yang lengkap dari insert, save, edit, update dan
delete dan juga pembuatan view program. Berikut studi kasus yang harus diselesaikan:
1. Toko XXX Bakery membutuhkan program sederhana untuk menyimpan data bahan baku
rotinya. Dengan atribut: id_bahanbaku, nama_bahanbaku, harga_beli, tgl_masuk, stok, dan
gambar.
2. Buatlah program web dengan menerapkan konsep MVC dengan kasus pada no.1. Dimana di
dalam program tersebut bersifat back end. Buatlah model, view dan controllernya. Untuk
konsep tampilan dan pengolahan datanya sama dengan yang sudah dijelaskan di pertemuan 3
sampai dengan pertemuan 6. Dari read data, insert data, edit data, update data, dan delete data.
3. Untuk view dari daftar baku hanya ditampilkan gambar bahan baku dan nama bahan baku
saja. Dan ditambahkan tombol detail untuk menampilkan data bahan baku tersebut secara
lengkapnya.
4. Dari laman detail ditambahkan hyperlink untuk dapat kembali ke datar bahan baku.

91
 PERTEMUAN 8
UJIAN TENGAH SEMESTER

92
 PERTEMUAN 9
PAGINATION DAN SEARCHING

Deskripsi Pembelajaran
Pertemuan 9 ini membahas tentang cara membuat pencarian dari data yang ditampilkan dan
penghalamanan. Jadi untuk pertemuan 9 ini masih melanjutkan sedikit dari pertemuan 6, tapi
tidak sebagai inti tapi lebih ke mendukung pengolahan data yang ada. Kegunaan search box ini
adalah untuk memudahkan user dalam mencari data yang banyak sehingga user hanya
mengetikkan kata kuncinya saja maka data yang dicari dapat langsung ditemukan atau
ditampilkan. Dan kegunaan pagination sendiri adalah untuk memudahkan user dalam
mengetahui halaman berapa yang saat ini mereka sedang kunjungi dan untuk memudahkan user
dalam menemukan data berdasarkan halaman yang mereka cari.

Tujuan Pembelajaran
Pada bab ini mahasiswa diharapkan dapat memahami konsep pagination dan pencarian data
menggunakan search box serta mampu mengimplementasikannya dengan baik.

9.1. Pagination
Silahkan rubah koding yang di method index pada Controller buku seperti gambar di bawah
ini:

Selanjutnya masuk ke dalam folder app -> config -> Pager.php. Kemudian tambahkan scriptnya
seperti gambar di bawah ini:

93
Buatlah file baru dengan nama page_buku di dalam folder Views -> buku.

Untuk script daripada page_buku dapat disalin atau mencontoh di library web resminya
codeigniter sendiri. Untuk itu silahkan buka laman resminya codeigniter lalu pilih read the
manual.

94
Ketikkan pada kolom pencarian pagination lalu klik pada laman sebelah kanannya pagination.

95
Tahap selanjutnya silahkan cari subject dengan nama creating view lalu salin.

Block semua codingnya lalu salin.

96
Kemudian pasti di laman page_buku.php.

Edit beberapa koding yang sudah ditandai dengan frame biru.

97
Hasilnya sebagai berikut:

98
9.2. Searching
Silahkan masuk ke laman resmi bootstrap, pilih documentation keumdian ketik di pencarian
input. Pilih input group.

Pilih yang jenisnya button addons

99
Pilih yang baris kedua, block dan copy.

Paste di index.php

100
Ubah kodingnya seperti di bawah ini:

Lanjutkan dengan mengubah koding yang ada di dalam Controller Buku tepatnya di method
index.

101
Tambahkan method findBuku di dalam Model BukuModel.php. Disini dicontohkan pencarian
berdasarkan judul.

Kemudian tambahkan script di Controller Buku tepatnya di method index.

102
Hasilnya dapat dilihat pada gambar di bawah ini:

Misal saja pencarian berdasarkan judul: desain web. Maka setelah diklik cari akan menampilkan
hasil seperti di bawah ini.
Saat Pencarian:

103
Hasil Pencarian:

Saat Pencarian:

Hasil Pencarian:

104
 PERTEMUAN 10
INSTALASI LIBRARY FORM LOGIN CI4

Deskripsi Pembelajaran
Pada bab ini akan dibahas mengenai tentang bagaimana instalasi librabry form login yang
dikembangkan oleh developer ci4-nya sendiri. Dan ada beberapa tahapan dalam instalasinya,
salah satunya update composer.

Tujuan Pembelajaran
Pada perteuan ini diharapkan mahasiswa mampu memahami instalasi library form login dan
mengetahui perbedaan pembuatan form login pada ci3 dan ci4. Jika di ci3 harus membuat layout
form login dan registrasinya secara manual tetapi di ci4 layoutnya akan terbuat otomatis setelah
instalasi dan konfigurasinya selesai dieksekusi.

10.1. Update Composer

Untuk update composer dilakukan di laman git bash dan membutuhka koneksi internet.
Untuk itu silahkan masuk ke git bash. Pastikan git bashnya sudah masuk di disk C-> xampp ->
htdocs -> pustaka-booking.

105
Jika server php codeigniternya masih belum dinonaktifkan seperti contoh gambar di halaman
sebelumnya, maka dinonaktifkan terlebih dahulu dengan cara tekan CTRL + C. Selanjutnya
ketikan script seperti gambar di bawah ini lalu enter.

Tunggu hingga prosesnya update-nya selesai. Contoh bisa dilihat seperti:

106
10.2. Instalasi myth/auth
Untuk instalasi myth/auth sendiri masih di dalam git bash meneruskan dari update compser
dan instalasi ini dibutuhkan koneksi internet. Untuk kodingnya sebagai berikut:

Jika muncul bar warna merah seperti gambar di bawah ini dikarenakan untuk myth/auth sendiri
belum ada versi yang stablenya. Jadi kita diminta untuk mengubah konfigurasi myth/auth yang
ada di dalam codeigniter 4 nya.

Untuk konfigurasinya silahkan buka visual studio codenya, kemudian klik pada bagian
composer.json.

107
Tambahkan script berikut pada file composer.json-nya.

Selanjutnya kembali lagi ke instalasi myth/auth yang sebelumnya ada attention, untuk sekarang
sudah tidak akan ada masalah lagi karena sudah dikonfigurasi.

Tahap selanjutnya adalah melakukan migrasi myth/auth. Dengan mengetikkan script di bawah
ini lalu enter.

Ketika sudah berhasil dimigrasi hasilnya akan tampak seperti dibawah ini:

108
10.3. Konfigurasi Email di Codeigniter 4
Lanjutkan dengan masuk ke folder app -> config -> Email.php. Kemudian isi yang method
fromEmail dan fromName. Untuk email yang digunakan jangan gunakan email utama melainkan
email cadangan, sedangkan untuk nama email itu bebas.

109
Tahapan berikutnya masuk ke Validation.php yang posisinya masih dalam folder yang sama
dengan Email.php.

Tetap di folder yang sama, pilih Validation.php. Lalu tambahkan koding berikut:

110
Dilanjutkan dengan masuk ke LoginFilter.php yang ada di dalam folder vendor -> myth/auth ->
src -> Filters. Tambahkan script yang di frame biru.

Satu lagi tambahkan pada baris akhir:

Selanjutnya masih di dalam folder myth/auth tetapi bukan di folder Filters lagi tapi di folder
src/Config/. Hilangkan tag komentar (double slash) pada script yang sudah di frame biru.

111
Setelah dihilangkan:

Kembali ke Email.php. lengkapi script di bawah ini. Untuk SMTPuser samakan dengan
fromEmail yang sudah diinput di tahapan sebelumnya.

Untuk password silahkan diisi sesuai dengan password dari email

yang sudah diinput di $SMPTUser.

112
Selanjutnya masuk ke gmail dari email yang sudah dikonfigurasi di Email.php. Lalu pilih akun.

113
Kemudian pilih keamanan.

Lalu aktifkan aksesnya.

114
Geser ke posisi aktif.

115
 PERTEMUAN 11
IMPLEMENTASI FORM LOGIN DAN FORM REGISTRASI

Deskripsi Pembelajaran
Pada bab kali ini membahas tentang implementasi dari form login dan form registrasi. Dimana
kedua form tersebut tidak perlu dibuatkan layoutnya secara manual menggunakan template
bootstrap seperti yang dilakukan saat membuat form login dan registrasi di codeigniter 3 karena
di codeigniter 4 ini sudah disediakan hanya saja mengkonfigurasinya terlebih dahulu dan form
login dan registrasi pun langsung bisa digunakan.

Tujuan Pembelajaran
Pada bab ini diharapkan mahasiswa mampu mengimplementasikan form login dan registrasi
dengan baik. Mengetahui bagaimana cara registrasi dan mengetahui cara validasinya.

11.1. Implementasi Form Login dan Form Registrasi

Sebelum masuk ke browser seperti biasanya aktifkan terlebih dahulu php server codeigniter
4 dengan menggunakan git bash. Setelah itu masuk ke visual studio code dan lengkapi script
yang terdapat di BaseController.php.

116
Cek selanjutnya di browser. Dan hasilnya pun bisa dilihat form login terbuat tanpa perlu
membuat layoutnya secara manual.

Klik need an account untuk menuju ke form registrasinya.

Kemudian isi semua kolom teksnya sesuai akun dengan email yang ingin didaftarkan. Jika sudah
diisi semua, klik register.

117
Jika berhasil akan muncul pesan seperti di bawah ini dan posisi akan kembali lagi ke halaman
form login.

Untuk aktivasi akunnya bisa dengan cek kotak masuk dari email yang baru saja didaftarkan. Lalu
klik activate account. Maka secara otomatis akun yang didaftarkan sudah aktif.

118
Dan saat cek database yang sudah dibuat sebelumnya maka akan banyak table yang tercipta
otomatis. Hal ini disebabkan karena adanya fitur migrasi myth/auth yang sebelumnya sudah
diimport ke dalam codeigniter 4 yang digunakan untuk membuat form log in dan form registrasi
ini. Jika flashback dari pertemuan 2, saat itu tabel yang dibuat hanya ada dua. Yakni, tabel
anggota dan tabel buku.

119
Dan jika dilihat di tabel users, akan terlihat akun yang sudah aktif terdaftar. Dan passwordnya
pun otomatis sudah dienkripsi.

Sedangkan jika tidak ingin menyambungkan form registrasi dan form loginya ke email atau
tanpa melalui konfirmasi ke email bisa dilakukan dengan cara menonaktifkannya melalui
perubahan script berikut:

Rubah menjadi seperti ini:

Dan bisa dicoba ulang untuk melakukan registrasi.

120
Dan saat berhasil tampilannya seperti berikut:

121
 PERTEMUAN 12
PEMBUATAN LOGOUT

Deskripsi Pembelajaran
Pada bab ini akan membahas tentang bagaimana keluar dari beranda web setelah melakukan
login dengan menggunakan menu yang disebut dengan logout.

Tujuan Pembelajaran
Pada bab ini diharapkan mahasiswa dapat memahami cara breakdown (destroy) dari menu utama
di sebuah web untuk kembali lagi ke form login.
12.1. Pembuatan Menu Logout
Logout dibuat pada file template.php. Untuk scriptnya bisa dilihat di bawah ini:

Pembuatan logout pada codeigniter 4 tidak membutuhkan koding destroy seperti koding di
codeigniter 3 karena codeigniter 4 sudah menyediakan fitur logoutnya sendiri pada librabry-nya.
Cukup klik logout maka otomatis halaman akan kembali ke form log in.

122
 PERTEMUAN 13 – 15
PRESENTASI PROJECT

123
 PERTEMUAN 16
UJIAN AKHIR SEMESTER

124
 DAFTAR PUSTAKA

Foster, Rob. 2015. Codeigniter Web Application Blueprints. Birmingham: Packt Publising Ltd.
Harani, Nisa Hanum, Andri Fajar Sunandar.2020. Aplikasi Prospek Sales Menggunakan
Codeigniter. Bekasi: Kreatif.
Nordeen, Alex. 2020. Learn Codeigniter 24 hours. Ahmedabad: Guru99.
Subagia, Anton. 2017. Membangun Aplikasi Dengan CodeIgniter Dan Database SQL Server.
Jakarta: Elex Media Komputindo.
Wardana. 2010.Menjadi Master PHP dengan Framework Codeigniter. Jakarta: Elex Media
Komputindo.

125