Tugas Akhir Prodistik (Ahmad Musafir Khoirul Fattah)

LAPORAN TUGAS AKHIR
APLIKASI PENGOLAHAN DATA STATISTIK

PENDUDUK DI MA ISLAMIYAH SENORI
TUBAN BERBASIS WEB MENGGUNAKAN
CODEIGNITER 4, BOOTSTRAP 4 DAN
JAVASCRIPT
AHMAD MUSAFIR KHOIRUL FATTAH

NIS 131235230022180004
NISN 0035494776
Pembimbing
M. KHARIS RIDHO A., S.Kom
KHOLIFUDDIN TRI OVIM E. N., S.Kom
PROGRAM PENDIDIKAN TERAPAN BIDANG

TEKNOLOGI INFORMASI DAN KOMUNIKASI
(PRODISTIK)
Kerjasama MA Islamiyah Senori

&
ITS Surabaya
Tuban
2021
LAPORAN TUGAS AKHIR
APLIKASI PENGOLAHAN DATA STATISTIK

PENDUDUK DI MA ISLAMIYAH SENORI
CODEIGNITER 4, BOOTSTRAP 4 DAN
JAVASCRIPT
AHMAD MUSAFIR KHOIRUL FATTAH

NIS 131235230022180004
NISN 0035494776
Pembimbing
M. KHARIS RIDHO A., S.Kom
KHOLIFUDDIN TRI OVIM E. N., S.Kom
PROGRAM PENDIDIKAN TERAPAN BIDANG

TEKNOLOGI INFORMASI DAN KOMUNIKASI
(PRODISTIK)
Kerjasama MA Islamiyah Senori

&
ITS Surabaya
Tuban
2021
ii
iii
LEMBAR PERSETUJUAN
Tugas Akhir ini diaju kan oleh :

Nama : A. MUSAFIR KHOIRUL FATTAH
NIS : 131235230022180004
NISN : 0035494776
Judul : APLIKASI PENGOLAHAN DATA
STATISTIK PENDUDUK DI MA
ISLAMIYAH SENORI TUBAN BERBASIS
WEB MENGGUNAKAN CODEIGNITER 4,
BOOTSTRAP 4 DAN JAVASCRIPT
Pembimbing Tugas Akhir :
1. M. Kharis Ridho A., S.Kom ( )

2. Kholifuddin Tri Ovim Edi N., S.Kom ( )
Telah disetujui dan berhasil dipertahankan di hadapan dewan penguji

pada tanggal dan diterima sebagai
syarat untuk memperoleh sertifikat Program Pendidikan Terapan
Bidang Teknologi Informasi dan Komunikasi (PRODISTIK).
Penguji Tugas Akhir :
1. ………………………….. ( )
2. ………………………….. ( )
iv
LEMBAR PENGESAHAN
Laporan Tugas Akhir Ini

Diajukan sebagai syarat untuk memperoleh sertifikat Program
Pendidikan Terapan Bidang Teknologi Informasi dan Komunikasi
(PRODISTIK)
Kerjasama:
MA Islamiyah Senori Tuban
&
Institut Teknologi Sepuluh Nopember (ITS)
Oleh :
A. MUSAFIR KHOIRUL FATTAH
NIS : 131235230022180004
NISN : 0035494776
Disahkan oleh:
Kepala MA Islamiyah Senori, Ketua Prodistik MA
Islamiyah Senori,
Drs. GATOT UTUH SANTOSO NARJUL KIROM, S. PdI

NIP : - NIP : -
v
PERYATAAN KEASLIAN
Saya menyatakan dengan sesungguhnya bahwa Tugas Akhir
ini adalah asli hasil karya saya sendiri, dan sepanjang pengetahuan
saya tidak terdapat karya atau pendapat yang pernah ditulis atau
dipublikasikan oleh orang lain, kecuali yang secara tertulis disebutkan
sumbernya dalam naskah dan dalam daftar pustaka.
Tuban, ..................................
Yang menyatakan,

NIS : 131235230022180004
vi
KATA PENGANTAR
Syukur alhamdulillah penulis sampaikan keharibaan Illahi
Rabbi atas segala kenikmatan dan kekuatanNya, sehingga penulis
dapat menyelesaikan Laporan Tugas Akhir ini. Sholawat serta salam
penulis sampaikan kepada baginda Rasulullah Muhammad SAW yang
telah menuntun kita dari zaman kebodohan menuju zaman yang penuh
dengan ilmu yang menerangi kehidupan manusia yaitu agama Islam.
Keberhasilan penulisan tidak lepas dari bantuan beberapa pihak,
untuk itu penulis mengucapkan terima kasih yang sebesar- besarnya
kepada :
1. Pengurus Yayasan Madrasah Islamiyah Sunnatunnur Senori
Tuban
2. Bapak Drs. Gatot Utuh Santoso selaku Kepala MA Islamiyah
Senori Tuban
3. Ibu Dr. Ismaini Zain, M. Si, Ketua Program Kerjasama
PRODISTIK-ITS
4. Bapak Narjul Kirom, S. Pd. I, selaku Ketua Program Pendidikan
Terapan Bidang TIK (PRODISTIK) MA Islamiyah Senori Tuban.
5. Bapak M. Kharis Ridho A., S. Kom., selaku pembimbing utama,
6. Bapak Kholifuddin Tri Ovim Edi N, S. Kom., selaku pembimbing
pendamping,
vii
7. Bapak/Ibu Guru dan keluarga besar MA Islamiyah Senori Tuban
yang telah membimbing saya selama di MA Islamiyah Senori
tercinta.
8. Rekan-rekan mahasiswa Prodistik.
9. Semua pihak yang tidak dapat penulis sebutkan satu-persatu,
terima kasih atas bantuannya.
Penulis menyadari akan keterbatasan dan kekurangan dalam
penyusunan laporan tugas akhir ini. Oleh karena itu, segala saran dan
kritik yang membangun dari pembaca sangat penulis harapkan.
Akhirnya semoga tugas akhir ini membawa manfaat bagi semuapihak,
umumnya bagi pembaca dan khusunya bagi penulis.
Tuban, .........................
Penulis
viii
DAFTAR ISI
HALAMAN JUDUL ................................................................. ii
LEMBAR PERSETUJUAN ..................................................... iv
LEMBAR PENGESAHAN ....................................................... v
PERNYATAAN KEASLIAN .................................................. vi
KATA PENGANTAR............................................................. vii
DAFTAR ISI ............................................................................ ix
DAFTAR GAMBAR ............................................................... xi
DAFTAR TABEL .................................................................. xiv
BAB I PENDAHULUAN ......................................................... 1
1.1 Latar Belakang ............................................................. 1
1.2 Rumusan Masalah ........................................................ 2
1.3 Batasan Masalah ........................................................... 3
1.4 Tujuan Penulisan .......................................................... 3
1.5 Manfaat Penulisan ........................................................ 3
BAB II LANDASAN TEORI.................................................... 5
2.1 Web Programming ....................................................... 5

2.2 HTML .......................................................................... 6
2.3 CSS .............................................................................. 6
2.4 JavaScript ..................................................................... 7
2.5 PHP .............................................................................. 7
2.6 Apache ......................................................................... 8
ix
2.7 Framework ................................................................... 9
2.8 CodeIgniter ................................................................... 9
2.9 Bootstrap .................................................................... 10
2.10 Composer ................................................................. 10
2.11 Git ............................................................................ 11
2.12 Database ................................................................... 12
2.13 DBMS ...................................................................... 13
2.14 Database data type ................................................... 13
2.15 MySQL .................................................................... 20
2.16 Flowchart ................................................................. 21
2.17 XAMPP ................................................................... 23
2.18 Visual Studio Code .................................................. 25
BAB III PERANCANGAN ..................................................... 31

3.1 Persiapan Alat dan Bahan ........................................... 31
3.2 Pembuatan konsep desain ........................................... 32
3.3 Timeline pengerjaan ................................................... 33
3.4 Database ..................................................................... 33
3.5 Home/dashboard......................................................... 37
3.6 Tabel data guru ........................................................... 38
3.7 Buat data guru ............................................................ 39
3.8 Detail data guru .......................................................... 41
3.9 Hapus data guru .......................................................... 42
x
3.10 Ubah data guru ......................................................... 44

3.11 Tabel data siswa ....................................................... 46
3.12 Buat data siswa ........................................................ 47
3.13 Detail data siswa ...................................................... 48
3.14 Hapus data siswa ...................................................... 50
3.15 Detail data siswa ...................................................... 51
3.16 Cari data guru .......................................................... 53
3.17 Cari data siswa ......................................................... 55
BAB IV PEMBAHASAN ....................................................... 57

4.1 Langkah-langkah Pembuatan...................................... 57
4.2 Pengujian aplikasi....................................................... 95
BAB V PENUTUP ................................................................ 101

5.1 Kesimpulan .............................................................. 101
5.2 Kritik ........................................................................ 101
5.3 Saran......................................................................... 101
DAFTAR PUSTAKA ........................................................... 103

BIODATA PENULIS ........................................................... 106
xi
DAFTAR GAMBAR
Gambar 2.0 Simbol-simbol dalam flowchart ........................... 23
Gambar 2.1 Tampilan Utama Control Panel XAMPP ............. 24
Gambar 2.2 Tampilan Utama VS Code ................................... 26
Gambar 2.3 Tampilan Explorer VS Code ................................ 28
Gambar 2.4 Tampilan Extensions VS Code ............................. 29
Gambar 3.0 Diagram Dashboard ............................................ 37
Gambar 3.1 Diagram tabel guru ............................................. 38
Gambar 3.2 Diagram menambahkan data guru ...................... 39
Gambar 3.3 Diagram memunculkan detail data guru.............. 41
Gambar 3.4 Diagram menghapus data guru ........................... 42
Gambar 3.5 Diagram mengubah data guru ............................. 44
Gambar 3.6 Diagram index/halaman tabel siswa .................... 46
Gambar 3.7 Diagram menambahkan data siswa ..................... 47
Gambar 3.8 Diagram memunculkan detail data siswa ............ 48
Gambar 3.9 Diagram menghapus data siswa .......................... 50
Gambar 3.10 Diagram mengubah data siswa .......................... 51
Gambar 3.11 Diagram cari data guru ..................................... 54
Gambar 3.12 Diagram cari data siswa .................................... 55
Gambar 4.0 Buat data baru ..................................................... 96
Gambar 4.1 Kirim data baru ................................................... 96
xii
Gambar 4.2 Detail data ........................................................... 97
Gambar 4.3 Hapus data .......................................................... 98
Gambar 4.4 Hapus data .......................................................... 98
Gambar 4.5 Ubah data ............................................................ 99
Gambar 4.6 Ubah data .......................................................... 100
xiii
DAFTAR TABEL
Tabel 3.0 Tabel waktu pengerjaan .......................................... 33

Tabel 3.1 Tabel format database siswa ................................... 34
Tabel 3.2 Tabel fungsi kolom database siswa .......................... 35
Tabel 3.3 Tabel format database guru..................................... 36
Tabel 3.4 Tabel fungsi kolom database guru ........................... 37
xiv
BAB I
PENDAHULUAN
1. 1. Latar Belakang Masalah
Di zaman modern ini, pengetahuan di bidang
komputer sangatlah dibutuhkan, salah satunya adalah
dalam bidang pengembangan situs web, hingga kini telah
banyak bahasa pemrograman berbasis open source untuk
menunjang proses pengembangan web agar lebih
berkembang dan lebih banyak memberikan manfaat.
Salah satu manfaat web developing yang kini kian
populer adalah untuk membuat aplikasi pengolahan
statistik kependudukan di sekolah berbasis web. Secara
garis besar aplikasi database kependudukan di sekolah
adalah aplikasi yang digunakan untuk mengelola data para
penduduk sekolah yang ada di dalam database.
Dalam pembuatan aplikasi pengolahan data
statistik kependudukan di sekolah berbasis web ini,
penyusun menggunakan beberapa perangkat lunak utama
yaitu XAMPP dan Visual Studio Code serta perangkat
lunak pendukung yaitu Git dan Composer.
Keunggulan dari aplikasi berbasis web adalah bisa
diakses dengan berbagai perangkat (dekstop maupun
mobile), berbeda dengan aplikasi berbasis dekstop yang
1
2
jika ingin mengakses apikasi tersebut harus melalui

perangkat dekstop saja.
Dengan menggunakan XAMPP dan Visual Studio
Code (yang selanjutnya akan disebut dengan “VS Code”),
penyusun dapat mengaplikasikan pembuatan aplikasi
pengolahan database kependudukan di sekolah berbasis
web. Selama belajar di Prodistik MA Islamiyah Senori
inilah penyusun dapat memahami tentang pemrograman
dan perangkat lunak untuk pengembangannya. Maka dari
itu, penyusun memutuskan untuk membuat tugas akhir
dengan judul “APLIKASI PENGOLAHAN DATA
STATISTIK PENDUDUK DI MA ISLAMIYAH
SENORI TUBAN BERBASIS WEB
MENGGUNAKAN CODEIGNITER 4, BOOTSTRAP
4 DAN JAVASCRIPT”.
1. 2. Rumusan Masalah
1) Bagaimana cara membuat database kependudukan di
sekolah berbasis web?
2) Bagaimana langkah-langkah membuat aplikasi
web?
3
1. 3. Batasan Masalah
Berdasarkan rumusan masalah yang telah disebutkan
di atas, maka penulisan ini dibatasi pada:
1) Pengerjaan hanya berlaku untuk pembuatan aplikasi
web dan tidak mencakup pembuatan nilai harian maupun
nilai rapot siswa.
2) Pengerjaan tidak mencantumkan rancangan dari aplikasi
pengolahan database berbasis web.
1. 4. Tujuan Penulisan
Adapun penulisan ini bertujuan untuk :
1) Untuk mengetahui cara membuat database
kependudukan di sekolah berbasis web mengunakan
MySQL.
2) Untuk mengetahui cara membuat aplikasi pengolahan
database kependudukan di sekolah berbasis web
mengunakan XAMPP dan Visual Studio Code.
1. 5. Manfaat Penulisan
Adapun manfaat penulisan sebagai berikut ;
1) Bagi Penulis
4
Dapat menuangkan ide kreatif dan berbagai

pengetahuan kepada pembaca serta menerapkan ilmu
yang telah di dapat selama di bangku perkulihan
khususnya mengenai program aplikasi XAMPP dan
Visual Studio Code.
2) Bagi Pembaca
Dapat di jadikan referensi serta menambah
pengetahuan bagi pembaca mengenai cara membuat
aplikasi pengelola database kependudukan di sekolah
menggunakan XAMPP dan Visual Studio Code.
3) Bagi Sekolah
Dapat menambah minat baca serta menambah
khazanah pengetahuan mengenai bagaimana suatu
aplikasi pengelola database kependudukan di sekolah
menggunakan XAMPP dan Visual Studio Code.
BAB II
LANDASAN TEORI
2. 1. Web programming
Web Programming1 terdiri dari dua suku kata yaitu web
dan programming. Programming dapat diartikan sebagai
proses, cara, atau pembuatan suatu program. Sedangkan web
dapat diartikan sebagai jaringan komputer yang terdiri dari
kumpulan situs internet yang menawarkan teks, grafik, suara
dan sumber daya animasi melalui protokol transfer hypertext
(HTTP).
Jadi, web programming adalah suatu proses, cara, atau

pembuatan suatu program berbasis web. Dalam memahami
web programming, mungkin terbesit di dalam benak Anda
harus darimana Anda memulai dalam mempelajari web
programming. Pada artikel ini, Logique akan menjelaskan
mengenai tahapan-tahapan dalam mempelajari web
programming secara runut hanya untuk Anda.
1
Diolah dari pelbagai sumber
5
6
2. 2. HTML
HTML2 adalah singkatan dari Hypertext Markup
Language. HTML memungkinkan seorang user untuk
membuat dan menyusun bagian paragraf, heading, link atau
tautan, dan blockquote untuk halaman web dan aplikasi.
HTML bukanlah bahasa pemrograman, dan itu berarti

HTML tidak punya kemampuan untuk membuat
fungsionalitas yang dinamis. Sebagai gantinya, HTML
memungkinkan user untuk mengorganisir dan memformat
dokumen, sama seperti Microsoft Word.
2. 3. CSS
CSS3 adalah singkatan dari Cascading Style Sheets.
Jika diterjemahkan ke bahasa Indonesia secara harfiah, CSS
berarti “lembar penataan menurun”. Namun secarakonteks,
Cascading Style Sheets adalah kumpulan perintah yang
digunakan untuk menjelaskan tampilan sebuah halaman
situs web dalam mark-up language. Mark-up language atau
bahasa markah adalah bahasa pemrograman yang biasanya
digunakan membuat website.
2
https://www.hostinger.co.id/tutorial/apa-itu-html/ [Diakses: 14 September 2020].
3
https://www.dewaweb.com/blog/belajar-css-pengertian-peran-fungsi-dan-macamnya/
[Diakses: 14 September 2020].
7
2. 4. Javascript
Javascript4 adalah bahasa pemrograman script yang
cara kerjanya hanya memerlukan interpreter sehingga tidak
membutuhkan compiler agar bisa menjalankannya. Di dalam
bahasa pemrograman Javascript, tidak terdapat proses
kompilasi lebih dahulu supaya program bisa Anda jalankan.
Selain itu, aplikasi yang dibutuhkan adalah web browser dan
text editor saja. Fitur-fitur yang dimiliki Javascript yaitu
berorientasi objek, client-side, high-level programming, dan
loosely tiped.
2. 5. PHP
PHP5 adalah bahasa pemrograman yang sering
disisipkan ke dalam HTML. PHP sendiri berasal dari kata
Hypertext Preprocessor. Sejarah PHP pada awalnya
merupakan kependekan dari Personal Home Page (Situs
personal). PHP pertama kali dibuat oleh Rasmus Lerdorf
pada tahun 1995. Pada waktu itu PHP masih bernama Form
Interpreted (FI), yang wujudnya berupa sekumpulan skrip
yang digunakan untuk mengolah data formulir dari web.
4
https://idcloudhost.com/mengenal-apa-itu-js-javascript-definisi-keunggulan-dan-cara-
kerjanya/ [Diakses: 14 September 2020].
5
https://www.niagahoster.co.id/blog/pengertian-php/ [Diakses: 14 September 2020]
8
Bahasa pemrograman ini menggunakan sistem server-

side. Server-side programming adalah jenis bahasa
pemrograman yang nantinya script/program tersebut akan
dijalankan/diproses oleh server. Kelebihannya adalah mudah
digunakan, sederhana, dan mudah untuk dimengerti dan
dipelajari.
Bahasa pemrograman PHP membantu Anda untuk
mengembangkan aplikasi berbasis web yang cukup
kompleks, handal, dan cepat. Tergantung dari spesifikasi
bisnis, penggunaan hosting, tingkat pengalaman, kebutuhan
aplikasi, dan pengembangan timeframe. Selain itu ada
banyak PHP frameworks yang dapat Anda pilih seperti
CodeIgniter, Laravel, dan Symfony.
2. 6. Apache
Apache6 adalah software web server yang gratis dan
bersifat open source. Server ini telah menjadi platform bagi
46% website di seluruh dunia. Nama resminya adalah
Apache HTTP Server, dan software ini dikelola dan
dikembangkan oleh Apache Software Foundation.
6
https://www.hostinger.co.id/tutorial/apa-itu-apache/ [Diakses: 14 September 2020]
9
2. 7. Framework
Framework7 adalah sebuah kerangka program yang
digunakan untuk membantu developer untuk
mengembangkan kode secara konsisten.
Dengan adanya framework developer bisa mengurangi
jumlah bug pada aplikasi yang dibuat. Karena, fungsi dan
variabel yang sudah tersedia di dalam komponen framework.
Contoh dari framework sendiri sepertiCodeIgniter, Laravel,
Bootstrap, Symfony, Material, danlain-lain.
2. 8. CodeIgniter
CodeIgniter adalah framework PHP untukmembangun
aplikasi berbasis web yang bersifat open source dan
menggunakan metode MVC (Model, View, Controller).
CodeIgniter bersifat free alias tidak berbayar jika
menggunakannya. Framework CodeIgniter dibuat dengan
tujuan sama seperti framework lainnya yaitu utuk
memudahkan developer atau programmer dalam
membangun sebuah aplikasi berbasis web tanpa harus
membuatnya dari awal.
7
https://www.niagahoster.co.id/blog/apa-itu-framework [Diakses: 14 September 2020].
10
2. 9. Bootstrap
Bootstrap merupakan sebuah library framework CSS
yang telah dibuat khusus uintuk mengembangkan front end
sebuah website. Bootstrap juga dikenal sebagai salah satu
framework CSS, HTML, Javascript yang begitu populer di
kalangan website developer atau pengembang website. Apa
itu bootstrap dan fungsinya? yang pasti bootstrap digunakan
untuk mengembangkan website agar lebih responsive dan
rapi.
2. 10.Composer
Composer adalah tools dependency manager pada PHP,
Dependency (ketergantungan) sendiri diartikan ketika project
PHP yang kamu kerjakan masih membutuhkan atau
memerlukan library dari luar. Composer berfungsi sebagai
penghubung antara project PHP kamu dengan library dari
luar. Dependency manager memungkinkan kamu untuk
membuat dan mengambil library pada project PHP kamu
pada library packagist.org. Packagist.org sendiri
merupakan situs yang menyediakan banyak library yang
bisa kamu gunakan. Dengan bantuan tools tersebut kamu
bisa terhubung pada situs packagist.org dan kamu dapat
mengambil dan mengunggah library.
11
2. 11.Git
Git adalah salah satu sistem pengontrol versi (Version
Control System) pada proyek perangkat lunak yang
diciptakan oleh Linus Torvalds.
Pengontrol versi bertugas mencatat setiap perubahan
pada file proyek yang dikerjakan oleh banyak orang maupun
sendiri.
Git dikenal juga dengan distributed revision control
(VCS terdistribusi), artinya penyimpanan database Git tidak
hanya berada dalam satu tempat saja.
Semua orang yang terlibat dalam pengkodean proyek
akan menyimpan database Git, sehingga akan memudahkan
dalam mengelola proyek baik online maupun offline.
Dalam Git terdapat “merge” untuk menyebut aktifitas
penggabungan kode.
Sedangkan pada VCS (Version Control System) yang
terpusat, database disimpan dalam satu tempat dan setiap
perubahan disimpan ke sana.
VCS terpusat memiliki beberapa kekurangan:
• Semua tim harus terkoneksi ke jaringan untuk
mengakses source-code;
12
• Tersimpan di satu tempat, nanti kalau server

bermasalah bagaimana?
Karena itu, Git hadir untuk menutupi kerkurangan yang
dimiliki oleh VCS terpusat.
2. 12.Database
Basis data (database)8 dapat didefinisikan atau diartikan
sebagai kumpulan data yang disimpan secara sistematis di
dalam komputer yang dapat diolah atau dimanipulasi
menggunakan perangkat lunak (software) program atau
aplikasi untuk menghasilkan informasi. Pendefinisian basis
data meliputi spesifikasi berupa tipedata, struktur data dan
juga batasan-batasan pada data yang kemudian disimpan.
Basis data merupakan aspek yang sangat penting dalam
sistem informasi karena berfungsi sebagai gudang
penyimpanan data untuk diolah lebih lanjut. Basis data
menjadi penting karena dapat mengorganisasi data,
menghidari duplikasi data, menghindari hubungan antar data
yang tidak jelas dan juga update yang rumit.
8
https://www.termasmedia.com/lainnya/software/69-pengertian-database.html[Diakses:
14 November 2020]
13
2. 13.DBMS
DBMS adalah kepanjangan dari Database Management
System, yakni yang didefinisikan sebagai sistem atau
software yang dirancang secara khusus sebagai sistem
pengelolaan database dan dapat juga digunakan untuk
menjalankan proses operasi data yang diminta oleh banyak
pengguna sekaligus.
DBMS juga merupakan sistem perantara yang
digunakan sebagai penghubung yang baik antara pengguna
dengan database. Intinya, dengan adanya sistem DBMS ini,
proses pengelolaan pada sistem komputer, terlebih lagi yang
digunakan dalam skala besar oleh banyak pengguna, tetap
mampu berjalan dengan baik, tanpa adanya masalah atau
kekacauan sedikit pun.
2. 14.Database Data Type

Tipe data (data type) digunakan untuk mendefinisikan
suatu field atau kolom. Setiap kolom yang dibuat harus
didefinisikan terlebih dahulu. Jenis – jenis tipe data ada
bermacam – macam. Bisa numerik yang digunakan untuk
angka dan proses perhitungan, bisa karakter / teks, tanggal
atau Biner. Berikut ini Macam – macam tipe data yang
digunakan di SQL :
14
1. Tipe Numerik
Tipe data numerik digunakan untuk menyimpan data
numeric (angka). Ciri utama data numeric adalah suatu data
yang memungkinkan untuk dikenai operasi aritmatika
seperti pertambahan, pengurangan, perkalian dan
pembagian. Berikut ini tipe field (kolom) di MySQL yang
termasuk ke dalam kelompok tipe numerik:
a. TINYINT
▪ Penggunaan : digunakan untuk menyimpan data bilangan
bulat positif dan negatif.
▪ Jangkauan : -128 s/d 127
▪ Ukuran : 1 byte (8 bit)
b. SMALLINT
bulat positif dan negatif..
▪ Jangkauan : -32.768 s/d 32.767
▪ Ukuran : 2 byte (16 bit).
c. MEDIUMINT
▪ Jangkauan : -8.388.608 s/d 8.388.607
15
d. INT
▪ Jangkauan : -2.147.483.648 s/d 2.147.483.647
e. BIGINT
▪ Jangkauan : ± 9,22 x 1018
f. FLOAT
pecahan positif dan negatif presisi tunggal.
▪ Jangkauan : 3.402823466E+38 s/d -1.175494351E-38, 0,
dan 1.175494351E-38 s/d 3.402823466E+38.
g. DOUBLE / REAL
pecahan positif dan negatif presisi ganda.
16
▪ Jangkauan : -1.79…E+308 s/d -2.22…E-308, 0, dan

2.22…E-308 s/d 1.79…E+308.
h. DECIMAL / NUMERIC
pecahan positif dan negatif.
▪ Jangkauan : -1.79…E+308 s/d -2.22…E-308, 0, dan
2.22…E-308 s/d 1.79…E+308.
2. Tipe Date dan Time

Tipe data date dan time digunakan untuk menyimpan
data tanggal dan waktu. Berikut ini tipe field (kolom) di
MySQL yang termasuk ke dalam kelompok tipe date dan
time:
a. DATE
▪ Penggunaan : digunakan untuk menyimpan data tanggal.
▪ Jangkauan : 1000-01-01 s/d 9999-12-31 (YYYY-MM-DD)
▪ Ukuran : 3 byte.
b. TIME
▪ Penggunaan : digunakan untuk menyimpan data waktu.
▪ Jangkauan : -838:59:59 s/d +838:59:59 (HH:MM:SS)
17
c. DATETIME
▪ Penggunaan : digunakan untuk menyimpan data tanggal
dan waktu.
▪ Jangkauan : ‘1000-01-01 00:00:00’ s/d ‘9999-12-31
23:59:59’Ukuran : 8 byte.
d. YEAR
▪ Penggunaan : digunakan untuk menyimpan data tahun dari
tanggal.
▪ Jangkauan : 1900 s/d 2155
3. Tipe String (Text)

Tipe data string digunakan untuk menyimpan data
string (text). Ciri utama data string adalah suatu data yang
memungkinkan untuk dikenai operasi aritmatika seperti
pertambahan, pengurangan, perkalian dan pembagian.
Berikut ini tipe field (kolom) di MySQL yang termasuk ke
dalam kelompok tipe string:
e. CHAR
▪ Penggunaan : digunakan untuk menyimpan data string
ukuran tetap.
18
▪ Jangkauan : 0 s/d 255 karakter
f. VARCHAR
▪ Penggunaan : digunakan untuk menyimpan data string
ukuran dinamis.
▪ Jangkauan : 0 s/d 255 karakter (versi 4.1), 0 s/d 65.535
(versi 5.0.3)
g. TINYTEXT
▪ Penggunaan : digunakan untuk menyimpan data text.
▪ Jangkauan : 0 s/d 255 karakter (versi 4.1), 0 s/d 65.535
(versi 5.0.3)
h. TEXT
▪ Jangkauan : 0 s/d 65.535 (216 – 1) karakter
i. MEDIUMTEXT
▪ Jangkauan : 0 s/d 224 – 1 karakter
j. LONGTEXT
▪ Jangkauan : 0 s/d 232 – 1 karakter
19
4. Tipe BLOB (Biner)

Tipe data blob digunakan untuk menyimpan data
biner. Tipe ini biasanya digunakan untuk menyimpan kode-
kode biner dari suatu file atau object. BLOB merupakan
singkatan dari Binary Large Object. Berikut ini tipe field
(kolom) di MySQL yang termasuk ke dalam kelompok tipe
blob:
k. BIT (sejak versi 5.0.3)
▪ Penggunaan : digunakan untuk menyimpan data biner.
▪ Jangkauan : 64 digit biner
l. TINYBLOB
▪ Jangkauan : 255 byte
m. BLOB
▪ Jangkauan : 216 – 1 byte
n. MEDIUMBLOB
20
o. LONGBLOB
5. Tipe Data yang Lain

Selain tipe data di atas, MySQL juga menyediakan
tipe data yang lain. Tipe data di MySQL mungkin akan terus
bertambah seiring dengan perkembangan versi MySQL.
Berikut ini beberapa tipe data tambahan MySQL:
p. ENUM
▪ Penggunaan : Enumerasi (kumpulan data).
▪ Jangkauan : Sampai dengan 65535 string.
q. SET
▪ Pengunaan : Combination (himpunan data).
▪ Jangkauan : Sampai dengan 255 string anggota
2. 15.MySQL
MySQL adalah DBMS yang open source dengan dua
bentuk lisensi, yaitu Free Software (perangkat lunak bebas)
dan Shareware (perangkat lunak berpemilik yang
penggunaannya terbatas). Jadi MySQL adalah database
server yang gratis dengan lisensi GNU General Public
21
License (GPL) sehingga dapat Anda pakai untuk keperluan

pribadi atau komersil tanpa harus membayar lisensi yang
ada.
Seperti yang sudah disinggung di atas, MySQL masuk
ke dalam jenis RDBMS (Relational Database Management
System). Maka dari itu, istilah semacam baris, kolom, tabel,
dipakai pada MySQL. Contohnya di dalam MySQL sebuah
database terdapat satu atau beberapa tabel.
SQL sendiri merupakan suatu bahasa yang dipakai di
dalam pengambilan data pada relational database atau
database yang terstruktur. Jadi MySQL adalah database
management system yang menggunakan bahasa SQLsebagai
bahasa penghubung antara perangkat lunak aplikasi dengan
database server.
2. 16.Flow chart
Flowchart adalah adalah suatu bagan dengan simbol-
simbol tertentu yang menggambarkan urutan proses secara
mendetail dan hubungan antara suatu proses (instruksi)
dengan proses lainnya dalam suatu program.
Dalam perancangan flowchart sebenarnya tidak ada
rumus atau patokan yang bersifat mutlak (pasti). Hal ini
didasari oleh flowchart (bagan alir) adalah sebuah
22
gambaran dari hasil pemikiran dalam menganalisa suatu

permasalahan dalam komputer. Karena setiap analisa akan
menghasilkan hasil yang bervariasi antara satu dan lainnya.
Kendati begitu secara garis besar setiap perancangan
flowchart selalu terdiri dari tiga bagian, yaitu input, proses
dan output.
Berikut ini adalah beberapa simbol yang digunakan
dalam menggambar suatu flowchart :
23
Gambar 2.0 Simbol – simbol dalam flowchart
2. 17.XAMPP
XAMPP merupakan solusi bagi Anda yang ingin
menjalankan web server dan database di localhost komputer.
Itu artinya kalau Anda sudah punya website online,
XAMPP membantu Anda membuat versi offline dari
24
website. Semisal Anda sedang mengutak-atik website dan

ternyata error, Anda tak perlu khawatir error tersebut muncul
di website online.
Bahkan dengan adanya XAMPP, Anda bisa memiliki
website tanpa harus memiliki hosting atau domain lebih
dahulu. Jadi Anda bisa fokus mengutak-atik website dalam
versi offline.
a. Tampilan Utama dan Bagian-Bagian dari

XAMPP
Gambar 2.1 Tampilan Utama Control Panel XAMPP

25
Berikut penjelasan dari masing-masing fungsi dari

gambar di atas:
1) Judul Window: Berisi nama program;
2) Modules: Menampilkan fitur dari XAMPP;
3) Log: Berisi perintah yang di jalankan aplikasi;
4) Actions: Tombol untuk menjalankan fitur
XAMPP;
2. 18.Visual Studio Code

Visual Studio Code (VS Code) ini adalah sebuah teks
editor ringan dan handal yang dibuat oleh Microsoft untuk
sistem operasi multiplatform, artinya tersedia juga untuk
versi Linux, Mac, dan Windows. Teks editor ini secara
langsung mendukung bahasa pemrograman JavaScript,
Typescript, dan Node.js, serta bahasa pemrograman lainnya
dengan bantuan plugin yang dapat dipasang via marketplace
Visual Studio Code (seperti C++, C#, Python, Go, Java, dst).
Banyak sekali fitur-fitur yang disediakan oleh Visual
Studio Code, diantaranya Intellisense, Git Integration,
Debugging, dan fitur ekstensi yang menambah kemampuan
teks editor. Fitur-fitur tersebut akan terus bertambah seiring
dengan bertambahnya versi Visual Studio Code.
26
Pembaruan versi Visual Studio Code ini juga dilakukan

berkala setiap bulan, dan inilah yang membedakan VS Code
dengan teks editor-teks editor yang lain.
Teks editor VS Code juga bersifat open source, yang
mana kode sumbernya dapat kalian lihat dan kalian dapat
berkontribusi untuk pengembangannya. Kode sumber dari
VS Code ini pun dapat dilihat di link Github. Hal ini juga
yang membuat VS Code menjadi favorit para pengembang
aplikasi, karena para pengembang aplikasi bisa ikut serta
dalam proses pengembangan VS Code ke depannya.
2. 19. Tampilan Utama dan Bagian-Bagian dari Visual

Studio Code
Gambar 2.2 Tampilan Utama VS Code

27
Berikut penjelasan dari masing-masing fungsi dari

gambar di atas:
1) Judul Window: Berisi nama program dan folder yang
dibuka;
2) Toolbar: Menampilkan beberapa fitur dasar VS Code;
3) Tab: Berisi beberapa nama file yang dibuka;
4) Action Bar: Berisi beberapa fitur pembantu seperti File
Manager, Search, Source Control, Run, dan Extensions;
5) Status Bar: Berisi status dari dokumen maupu ekstensi
yang terpasang;
6) Workplace: Tempat untuk mengerjakan proyek nanti;
Dalam pengerjaan projek di VS Code kita
memerlukan alat yang ada di Action Bar. Adapun Action Bar
mencakup alat-alat berikut:
1) Explorer
28
Gambar 2.3 Tampilan Explorer VS Code
Explorer akan membantu untuk memapilkan folder

kerja kita secara terstruktur dan akan membuat waktu
pengerjaan lebih efisien.
2) Extensions
29
Gambar 2.4 Tampilan Extensions VS Code
Extensions berfungsi jika kita ingin menambahkan

beberapa fitur tambahan yang telah disediakan oleh para
pengembang aplikasi. Dalam kasus ini penulis
menggunakan beberapa ekstensi seperti:
• PHP Intelliphense: Berfungsi untuk memperbaiki library

PHP bawaan VS Code yang kurang lengkap;
• Auto Rename Tag: Berfungsi supaya saat mengubah tag
properti HTML tidak perlu mengubah keduanya (hanya
30
mengubah salah satunya saja, baik pembuka atau

penutupnya);
• Bracket Pair Colorizer 2: Berfungsi membantu
menemukan awal dan akhir dari pembungkus dari program;
• Prettier Now: Berfungsi membantu merapikan kode
program saat kode program di simpan.
31
BAB III
PERANCANGAN
3. 1. Menyiapkan Alat & Bahan
1) Alat
Alat yang penulis gunakan dalam pengerjaan Tugas
Akhir ini adalah laptop dengan perincian sistem sebagai
berikut:
Tipe Processor : Intel®
Processor Onboard : Intel Core i3-6006U
(2.OGHz. Cache 3MB)
Memori Standar : 4GB DDR4 SDRAM
Tipe Video Grafis : Intel HD Graphics
Ukuran Display : 14.0” HD LED
Teknologi Layar : LED Backlight
Tipe Hard Drive : 1TB Serial SATA
Tipe Optical Drive : DVD-RW
TipeInput Device : Touchpad
OS Provided : Windows 10 64-Bit
Ports Provided : 2x USB 3.0
1x USB Type C
1x Combo audio jack
1x HDMI
Multimedia : Webcam Microphone/Speaker
32
Network : IEEE 802.11b/g/n

Tipe Baterai : 2-Cell Lithium Ion Battery
2) Bahan
Bahan yang penulis gunakan dalam pengerjaan
Tugas Akhir ini antara lain:
a. Kertas
b. Bolpoin
c. Laptop
3. 2. Pembuatan Konsep Desain

Penulis dalam pembuatan konsep aplikasi web
mengedepankan konsep simpel dan langsung dengan
perincian sebagai berikut:
1) Berbasis web
2) Menggunakan JavaScript
3) Menggunakan Bootstrap 4 untuk frontend
4) Menggunakan PHP 7.5 untuk backend
5) MySQL sebagai database
33
3. 3. Timeline pengerjaan
No. Tanggal Pengerjaan Pengerjaan

1 18 Agustus 2020 Pengajuan Judul kepada Pembimbing 1
2 18 Agustus 2020 Pengajuan Judul kepada Pembimbing 2
19-12 September & Pengerjaan BAB I - BAB II dan
3
27 September 2019 perancangan konsep dan sketsa desain
4 1 Desember 2019 Konsultasi dengan Pembimbing 1
3 September -15
6 Pengerjaan BAB I – BAB 3
Desember 2019
Tabel 3.0 Tabel waktu pengerjaan
3. 4. Database
1. Tabel database siswa
Auto
Nama Tak
Jenis Value Indeks Increment
Kolom ternilai
(AI)
Id INT 11 PRIMARY TRUE
nisn VARCHAR 15
nis VARCHAR 20
nama VARCHAR 256
tem_lahir VARCHAR 50
tan_lahir VARCHAR 15
alamat VARCHAR 256

34
kelas Enum 'X','XI','XII'

'IPA','IPS','BAHA
jurusan Enum
SA'
'Laki-
j_kelamin Enum laki','Perempua
n'
pic VARCHAR 256
created_at DATETIME
updated_at DATETIME TRUE
Tabel 3.1 Tabel format database siswa
Pada tabel database siswa terdapat beberapa kolom

yang berfungsi menyimpan data dari siswa. Rincian dari
fungsi kolom diatas sebagai berikut
Nama Kolom Fungsi
id menyimpan id pada database sebagai key utama
nisn menyimpan data NISN siswa
nis menyimpan data NIS siswa
nama menyimpan data NAMA siswa
tem_lahir menyimpan data TEMPAT LAHIR siswa
tan_lahir menyimpan data TANGGAL LAHIR siswa
alamat menyimpan data ALAMAT siswa
kelas menyimpan data KELAS siswa
jurusan menyimpan data JURUSAN siswa
j_kelamin menyimpan data JENIS KELAMIN siswa

35
pic menyimpan data FOTO siswa
created_at menyimpan kapan data siswa ini di masukkan ke database
updated_at menyimpan kapan data siswa ini di ubah
Tabel 3.2 Tabel fungsi kolom database siswa
2. Tabel database guru

Tak
Nama
Jenis Panjang nilai Indeks AI ternil
Kolom
ai
id INT 11 primary TRUE
nama VARCHAR 128
tem_lahir VARCHAR 128
tan_lahir VARCHAR 15
j_kelamin Enum 'laki - laki','perempuan'
domisili VARCHAR 128
alamat VARCHAR 256
tmt Date
'kepsek','guru','tu','waka_pe
jabatan Enum
nd','waka_sis','waka_hum'
36
'Bahasa Indonesia','Bahasa
Inggris','Matematika
Wajib','Ekonomi','Sejarah','g
eografi','Sosiologi','PKn','Sas
tra
Inggris','Fisika','Kimia','Biolo
gi','Matematika
Peminatan','sbk','PDK','Antr
mapel Enum TRUE
opologi','Pendidikan
Jasmani','Faroid','Tafsir','Ris
alatul Mahidl','Fathul
Qorib','Tarbiyah','Nahwu','I''
rob','SKUA','Ushul
Fiqih','Adab
Islamiyah','Mustholahul
Hadis'
pendidika 'sma_sederajat','ponpes','pe
Enum
n rguruan_tinggi'
lembaga VARCHAR 255
pic VARCHAR 255 TRUE
Tabel 3.3 Tabel format database guru
Pada tabel database guru terdapat beberapa kolom yang

berfungsi menyimpan data dari siswa. Rincian dari fungsi
kolom diatas sebagai berikut
Nama Kolom Fungsi
id menyimpan id pada database sebagai key utama

nama menyimpan data NAMA guru
tem_lahir menyimpan data TEMPAT LAHIR guru
tan_lahir menyimpan data TANGGAL LAHIR guru
j_kelamin menyimpan data JENIS KELAMIN guru
37
domisili menyimpan data DOMISILI guru

alamat menyimpan data ALAMAT guru
tmt menyimpan data TANGGAL MULAI TUGAS guru
jabatan menyimpan data JABATAN guru
mapel menyimpan data MATA PELAJARAN yang dipegang guru
pendidikan menyimpan data PENDIDIKAN guru
lembaga menyimpan data LEMBAGA pendidikan guru
pic menyimpan data FOTO guru
Tabel 3.4 Tabel fungsi kolom database guru
3. 5. Home/Dashboard
Gambar 3.0 Diagram dashboard

38
Diagram diatas mejelaskan bagaimana proses dari

menampilkan dashboard. Rincian lengkapnya adalah
sebagai berikut:
1. Pengguna atau user membuka alamat utama dari
aplikasi;
2. Routes akan mengatur halaman utama adalah
dashboard;
3. Controller Pages menerima request dari Routes untuk
menampilkan halaman utama atau dashboard;
3. 6. Tabel data guru
Gambar 3.1 Diagram tabel guru

39

menampilkan tabel data guru. Rincian lengkapnya adalah
sebagai berikut:
1. Pengguna atau user akan memilih menu tabel guru pada
sidebar pada halaman utama atau Dashboard;
2. Controller Guru akan memeriksa apakah ada id dari
guru yang dipilih;
3. Jika ada maka gunakan fungsi lain;
4. Jika tidak ada, maka tampilkan data seluruh guru,
3. 7. Buat data guru
Gambar 3.2 Diagram menambahkan data guru

40
Diagram diatas mejelaskan bagaimana proses dari input

atau memasukkan data guru baru . Rincian lengkapnya
adalah sebagai berikut:
1. Pengguna akan menekan tombol “tambah data”;
2. Pop-up tambah data akan muncul dan pengguna akan
mengisi formulir data guru;
3. Saat tombol “submit” ditekan, Controller Guru method
“savedata” akan mengambil data untuk divalidasi;
4. Jika data tidak valid, maka tampilkan lagi halaman
index dan tampilkan pesan errornya;
5. Jika data valid, maka kirim data ke Model Guru untuk
disimpan ke dalam database;
6. Controller Guru akan meng-set flash message utuk
ditampilkan;
7. Halaman tabel guru akan menampilkan bahwa data
berhasil dimasukkan.
41
3. 8. Detail data guru
Gambar 3.3 Diagram memunculkan detail data guru
Diagram diatas mejelaskan bagaimana proses darimelihat

detail dari data guru. Rincian lengkapnya adalah sebagai
berikut:
1. Pengguna akan menekan tombol “detail”;
2. Controller Guru akan mengambil id dari guru yang
dipilih untuk dikirim ke Model Guru;
3. Model Guru menerima id guru dan memeriksanya di
database;
4. Jika data tidak ada, set flash message error dan tampilkan
lagi ke halaman tabel guru dan tampilkanpesan error;
42
5. Jika data ada, ambil data dari database berdasarkan id

dan kirim ke Controller Guru;
6. Controller Guru akan mengirim data ke method “detail”
untuk memproses tampilan dari detail data guru dan
mengirimkan data guru untuk ditampilkan berdasarkan id
yang dikirim;
7. Halaman detail data guru akan di tampilkan berdasar id.
3. 9. Hapus data guru
Gambar 3.4 Diagram menghapus data guru

43

menghapus data guru. Rincian lengkapnya adalah sebagai
berikut:
1. Pengguna akan menekan tombol “hapus atau ikon
sampah”;
database;
lagi ke halaman tabel guru dan tampilkanpesan error;
6. Controller Guru akan mengirim data ke method “delete”
untuk dihapus dan meng-set flash message bahwa data
berhasil dihapus;
7. Controller Guru akan menampilkan halaman tabel guru
dan menampilkan flash message.
44
3. 10. Ubah data guru
Gambar 3.5 Diagram mengubah data guru

mengubah data guru. Rincian lengkapnya adalah sebagai
berikut:
database;
lagi ke halaman tabel siswa dan tampilkan pesan error;
45
6. Controller Guru akan mengirim data ke method “detail”

untuk memproses tampilan dari detail data guru dan
mengirimkan data guru untuk ditampilkan berdasarkan id
yang dikirim;
7. Halaman detail data guru akan di tampilkan berdasar id;
8. Pengguna menekan tombol “edit” dan pop-up ubah data
akan ditampilkan bersama dengan data yang ada di
database;
9. Pengguna akan mengubah data yang ingin diubah dan
menekan tombol submit;
10. Controller guru method “update” akan mengambil data
dan id dari data yang sudah diubah unntuk divalidasi;
11.Jika data tidak valid, kembalikan lagi ke tabel guru dan
tampilkan pesan gagal;
12. Jika data valid, kirim data ke Model Guru untuk
13. Controller Guru akan meng-set flash message bahwa
data berhasil diubah;
14. Controller Guru akan menampilkan halaman tabel guru
dan menampilkan flash message;
46
3. 11. Tabel data siswa
Gambar 3.6 Diagram index/halaman tabel siswa

menampilkan tabel data siswa. Rincian lengkapnya adalah
sebagai berikut:
1. Pengguna atau user akan memilih menu tabel siswa
pada sidebar pada halaman utama atau Dashboard;
2. Controller Siswa akan memeriksa apakah ada id dari
siswa yang dipilih;
3. Jika ada maka gunakan fungsi lain;
4. Jika tidak ada, maka tampilkan data seluruh siswa,
47
3. 12. Buat data siswa
Gambar 3.7 Diagram menambahkan data siswa
Diagram diatas mejelaskan bagaimana proses dari input

atau memasukkan data siswa baru . Rincian lengkapnya
adalah sebagai berikut:
1. Pengguna akan menekan tombol “tambah data”;
2. Pop-up tambah data akan muncul dan pengguna akan
mengisi formulir data siswa;
3. Saat tombol “submit” ditekan, Controller Siswa method
“savedata” akan mengambil data untuk divalidasi;
4. Jika data tidak valid, maka tampilkan lagi halaman
index dan tampilkan pesan errornya;
48
5. Jika data valid, maka kirim data ke Model Siswa untuk

6. Controller Siswa akan meng-set flash message utuk
ditampilkan;
7. Halaman tabel siswa akan menampilkan bahwa data
berhasil dimasukkan.
3. 13. Detail data siswa
Gambar 3.8 Diagram memunculkan detail data siswa
Diagram diatas mejelaskan bagaimana proses darimelihat

detail dari data siswa. Rincian lengkapnya adalah sebagai
berikut:
49
2. Controller Siswa akan mengambil id dari siswa yang

dipilih untuk dikirim ke Model Siswa;
3. Model Siswa menerima id siswa dan memeriksanya di
database;
dan kirim ke Controller Siswa;
6. Controller Siswa akan mengirim data ke method “detail”
untuk memproses tampilan dari detail data siswa dan
mengirimkan data siswa untuk ditampilkan berdasarkan
id yang dikirim;
7. Halaman detail data siswa akan di tampilkan berdasar id.
50
3. 14. Hapus data siswa
Gambar 3.9 Diagram menghapus data siswa

menghapus data siswa. Rincian lengkapnya adalah sebagai
berikut:
1. Pengguna akan menekan tombol “hapus atau ikon
sampah”;
database;
51
6. Controller Siswa akan mengirim data ke method “delete”
untuk dihapus dan meng-set flash message bahwa data
berhasil dihapus;
7. Controller Siswa akan menampilkan halaman tabel siswa
dan menampilkan flash message.
3. 15. Ubah data siswa
Gambar 3.10 Diagram mengubah data siswa

52

mengubah data siswa. Rincian lengkapnya adalah sebagai
berikut:
database;
6. Controller Siswa akan mengirim data ke method “detail”
untuk memproses tampilan dari detail data siswa dan
mengirimkan data siswa untuk ditampilkan berdasarkan
id yang dikirim;
7. Halaman detail data siswa akan di tampilkan berdasar id;
8. Pengguna menekan tombol “edit” dan pop-up ubah data
akan ditampilkan bersama dengan data yang ada di
database;
9. Pengguna akan mengubah data yang ingin diubah dan
menekan tombol submit;
53
10. Controller Siswa method “update” akan mengambil data

dan id dari data yang sudah diubah unntuk divalidasi;
11.Jika data tidak valid, kembalikan lagi ke tabel siswa dan
tampilkan pesan gagal;
12. Jika data valid, kirim data ke Model Siswa untuk
13. Controller Siswa akan meng-set flash message bahwa
data berhasil diubah;
14. Controller Siswa akan menampilkan halaman tabel
siswa dan menampilkan flash message;
3. 16. Cari data guru

54
Gambar 3.11 Diagram cari data guru

mencari data guru Rincian lengkapnya adalah sebagai
berikut:
1. Pengguna akan memasukkan data yang akan dicari;
2. Pengguna meng-klik “enter” atau tombol cari
3. Controller Guru akan mengambil data dari inputan
pengguna untuk dikirim ke Model Guru;
4. Method “search” akan memproses data dengan mencari
data yang dimaksud di dalam database untuk diambil;
5. Data akan diambil dan di tampilkan di view Guru.
55
3. 17. Cari data siswa
Gambar 3.12 Diagram cari data siswa

mencari data siswa Rincian lengkapnya adalah sebagai
berikut:
6. Pengguna akan memasukkan data yang akan dicari;
7. Pengguna meng-klik “enter” atau tombol cari
8. Controller Siswa akan mengambil data dari inputan
pengguna untuk dikirim ke Model Siswa;
9. Method “search” akan memproses data dengan mencari
data yang dimaksud di dalam database untuk diambil;
56
10. Data akan diambil dan di tampilkan di view Siswa

BAB IV
PEMBAHASAN
Langkah-langkah Pembuatan
4.1.1 Membuat Dashboard

1. Pertama atur routes menjadi
$routes->get('/', 'Pages::index');
========================================
Baris diatas berfungsi mengatur routes pertama yang

akan di akses pengguna ketika membuka aplikasi pertama
kali
2. Lalu buat method di controller pages untuk ke

dashboard dengan memasukkan kode berikut
public function index()
{
$data = [
'title' => "Home | CodeIgniter4",
'header' => "Dashboard",
'nama' => "A. Musafir Khoirul Fattah"
];
return view('pages/index', $data);
}
========================================
Method diatas mempunyai rincian fungsi sebagai berikut

1. $data mengirim data dummy yang akan di tampilkan di
view
2. Return..... berfungsi mengembalikan nilai dari
method yang berupa function
57
58
3. Kemudian buat view untuk dashboard. Masukkan

kode dibawah
<section class="content">
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 col-6">

<div class="small-box bg-info">
…
</div>
</div>


<div class="small-box bg-success">
…
</div>
</div>


<div class="small-box bg-warning">
…
</div>
</div>


<div class="small-box bg-danger">
…
</div>
</div>

</div>


<div class="row">
<div class="col-md-6">
<div class="card card-info">
59
<div class="card-header">
<span>Data jumlah siswa selama 10
tahun</span>
<div class="card-tools">
<button type="button" class="btn
btn-tool" data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
</div>
</div>
<div class="card-body">
<div class="chart">
<canvas id="10-years-student"
style="max-width: 100%; display: block; width: 401px;"
width="400" height="250" class="chartjs-render-
monitor"></canvas>
</div>
</div>

</div>
</div>

<div class="card card-primary">
<span>Data siswa 10 tahun terakhir
berdasarkan jenis kelamin</span>
</button>
</div>
</div>
<div class="chart">
<canvas id="10-years-student-
gender" style="max-width: 100%; display: block; width:
401px;" height="250" class="chartjs-render-
monitor"></canvas>
</div>
</div>
60
</div>
</div>
</div>
<div class="row">

<div class="card card-success">
<span>Data siswa berdasarkan
jurusan</span>
</button>
</div>
</div>
<div class="chart">
<canvas id="major" style="max-
width: 100%; display: block; width: 401px;"
monitor"></canvas>
</div>
</div>
</div>
</div>

<div class="card card-info">
<span>Ekstrakurikuler</span>
</button>
</div>
</div>
61
<div class="chart">
<canvas id="ekskul" style="max-
width: 100%; display: block; width: 401px;"
monitor"></canvas>
</div>
</div>
</div>
</div>
</div>

<div class="card">
<div class="container-fluid">
Lorem, ipsum dolor sit amet consectetur
adipisicing elit. Quidem reiciendis eius quas fuga non
modi, veniam molestiae, aut mollitia nam sapiente
officiis ipsum, magni voluptatibus illum odit vero
omnis? Sapiente?
</div>
</div>
</div>

</div>
</section>
========================================
Kode diatas berfungsi menampilkan data dummy sebagai

template yang terdiri dari beberapa info dari keluar
masuknya murid yang berupa tulisan biasa maupun grafik
4.1.2 Membuat tabel data guru

1. Buat data baru
1. Pertama buat model baru
62
protected $allowedFields = [
'nama', 'tem_lahir', 'tan_lahir', 'j_kelamin',
'domisili', 'alamat', 'tmt', 'jabatan', 'mapel',
'pendidikan', 'lembaga', 'pic'
];
========================================
Variabel diatas mempunyai fungsi memberi perizinan

kepada aplikasi tentang field mana saja pada database
yang boleh di isi oleh pengguna
2. Buat method
$data = array(
'nama' => $this->request->getVar('nama'),
'tem_lahir' => $this->request-
>getVar('tem_lahir'),
'tan_lahir' => $this->request-
>getVar('tan_lahir'),
'j_kelamin' => $this->request-
>getVar('j_kelamin'),
'domisili' => $this->request->getVar('domisili'),
'alamat' => $this->request-
>getVar('alamat'),
'tmt' => $this->request->getVar('tmt'),
'jabatan' => $this->request-
>getVar('jabatan'),
'mapel' => $this->request->getVar('mapel'),
'pendidikan' => $this-
>request->getVar('pendidikan'),
'lembaga' => $this->request->getVar('lembaga'),
'pic' => $namaFileGuru
);
$this->GuruModel->insert($data);
========================================

63
1. $data berisi array yang didalam array berisi fungsi

yang berfungsi mengambil data yang di kirim melalui
form
2. $this->GuruModel->insert($data) berfungsi mengirim
data ke database dengan parameter $data
3. Buat view
<form action="/guru/savedata" method="POST" class="md-

10" enctype="multipart/form-data">
<?= csrf_field(); ?>
<div class="form-group">
<label for="nama">Nama</label>
<input type="text" class="form-control
<?= ($valid->hasError('nama')) ? 'is-invalid' : '';
?>" id="nama" placeholder="Nama" name="nama" autofocus
autocomplete="off" value="<?= old('nama'); ?>">
<div id="validationServer03Feedback"
class="invalid-feedback">
<?= $valid->getError('nama'); ?>
</div>
</div>
<div class="form-row form-group">
<div class="col">
<label for="tempatlahir">Tempat
lahir</label>
<input type="text" class="form-
control" placeholder="Tempat lahir" id="tempatlahir"
name="tem_lahir" autocomplete="off" value="<?=
old('tem_lahir'); ?>">
</div>
<div class="col">
<label for="tanggallahir">Tanggal
lahir</label>
<div class="input-group flex-nowrap">
<input type="date" class="form-
control" placeholder="Tanggal lahir" id="tanggallahir"
name="tan_lahir" autocomplete="off" value="<?=
old('tan_lahir'); ?>">
</div>
64
</div>
</div>
<label for="tmt">Tanggal mulai
tugas</label>
control" placeholder="Tanggal mulai tugas" id="tmt"
name="tmt" autocomplete="off" value="<?= old('tmt');
?>">
</div>
</div>
<div class="col">
<label for="jabatan">Jabatan</label>
<select id="jabatan" class="form-
control" name="jabatan">
...
</select>
</div>
<div class="col">
<label for="mapel">Mapel</label>
<select id="mapel" class="form-
control" name="mapel">
...
</select>
</div>
</div>
<label for="jeniskelamin">Jenis
Kelamin</label>
<select id="jeniskelamin" class="form-
control" name="j_kelamin">
...
</select>
</div>
<label
for="pendidikan">Pendidikan</label>
<select id="pendidikan" class="form-
control" name="pendidikan">
...
</select>
65
</div>
<label for="lembaga">Lembaga</label>
<textarea class="form-control"
id="lembaga" rows="2" name="lembaga"><?=
old('lembaga'); ?></textarea>
</div>
<label for="domisili">Domisili</label>
id="domisili" rows="2" name="domisili"><?=
old('domisili'); ?></textarea>
</div>
<label for="alamat">Alamat</label>
id="alamat" rows="3" name="alamat"><?= old('alamat');
?></textarea>
</div>
<label for="pic">Tambah foto
guru</label>
<input type="file" class="form-control-
file <?= ($valid->hasError('pic')) ? 'is-invalid' :
''; ?>" id="pic" name="pic" onchange="previewFoto()">
<?= $valid->getError('pic'); ?>
</div>
</div>
<div class="form-group col d-inline-block
">
<img src="/img/default.png" class="img-
thumbnail img-preview">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-
secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-
success" name="submit">Submit</button>
</div>
</form>
66
========================================
Kode diatas berisi form yang berfungsi sebagai

formulir untuk menambahkan data baru ke database
2. Melihat data
1. Buat model
public function getGuru($id = false){

if ($id == false) {
return $this->findAll();
}
return $this->where(['id' => $id])->first();
}
========================================
Method diatas mempunyai fungsi melakukan pengecekan

data yang akan di tampilkan pada view. Jika tidak ada
parameter yang di kirim maka tampilkan semua data yang
ada di database dan hasil dari pengecekan akan di
kembalikan sebagai output dari method
2. Buat method
public function detail($id){

$data = [
'title' => 'Detail guru',
'valid' => \Config\Services::validation(),
'guru' => $this->GuruModel->getGuru($id)
];
return view('guru/detail', $data);
}
========================================

67

view
3. Buat view
<div class="row mt-3">

<div class="col-sm-3 col-md col-5">
<label style="font-weight:bold;">Nama
Lengkap</label>
</div>
<div class="col-md-8 col-6">
<?= $guru['nama']; ?>
</div>
</div>
<hr />
<div class="row">
<label style="font-
weight:bold;">Jabatan</label>
</div>
...
</div>
</div>
<hr />
<div class="row">
<label style="font-weight:bold;">Mata
pelajaran</label>
</div>
<?= $guru['mapel']; ?>
</div>
</div>
<hr />
68
<div class="row">
<label style="font-weight:bold;">Tempat,
tanggal lahir</label>
</div>
<?= "{$guru['tem_lahir']},
{$guru['tan_lahir']}"; ?>
</div>
</div>
<hr />
<div class="row">
<label style="font-weight:bold;">Jenis
Kelamin</label>
</div>
<?= $guru['j_kelamin'] == "laki - laki"
? 'Laki - laki' : 'Perempuan' ?>
</div>
</div>
<hr />
<div class="row">
<label style="font-
weight:bold;">Alamat</label>
</div>
<?= $guru['alamat']; ?>
</div>
</div>
<hr />
<div class="row">
<label style="font-
weight:bold;">Pendidikan</label>
</div>
...
</div>
69
</div>
<hr />
<div class="row">
<label style="font-
weight:bold;">Lembaga</label>
</div>
<?= $guru['lembaga']; ?>
</div>
</div>
========================================
Kode diatas berfungsi menampilkan data dari data dari

database berdasarkan id
3. Menghapus data
1. Buat model

if ($id == false) {
}
}
========================================

2. Buat method
70
public function delete($id){

$guru = $this->GuruModel->find($id);
if ($guru['pic'] != 'default.png') {
unlink('img/' . $guru['pic']);
}
$this->GuruModel->delete($id);
session()->setFlashdata('pesan', 'Data berhasil
dihapus!');
return redirect()->to('/guru');
}
========================================
Method diatas mempunyai fungsi melakukan pencarian

data berdasarkan id untuk dihapus dan men-setting
pesan berhasil atau tidaknya data dihapus
4. Mengubah data
1. Buat model

if ($id == false) {
}
}
========================================

71
2. Buat method
$data = array(
'domisili' => $this->request->getVar('domisili'),
'alamat' => $this->request-
>getVar('alamat'),
'tmt' => $this->request->getVar('tmt'),
'jabatan' => $this->request-
>getVar('jabatan'),
'mapel' => $this->request->getVar('mapel'),
'pendidikan' => $this-
>request->getVar('pendidikan'),
'lembaga' => $this->request->getVar('lembaga'),
'pic' => $namaFileGuru
);
$this->GuruModel->update($data);
========================================

form
2. $this->GuruModel->update($data) berfungsi mengganti
data di database dengan parameter $data
72
3. Buat view
<form action="/guru/savedata" method="POST" class="md-

10" enctype="multipart/form-data">
<input type="text" class="form-control
<?= ($valid->hasError('nama')) ? 'is-invalid' : '';
?>" id="nama" placeholder="Nama" name="nama" autofocus
</div>
</div>
<div class="col">
<label for="tempatlahir">Tempat
lahir</label>
<input type="text" class="form-
control" placeholder="Tempat lahir" id="tempatlahir"
name="tem_lahir" autocomplete="off" value="<?=
old('tem_lahir'); ?>">
</div>
<div class="col">
lahir</label>
control" placeholder="Tanggal lahir" id="tanggallahir"
</div>
</div>
</div>
73
<label for="tmt">Tanggal mulai

tugas</label>
control" placeholder="Tanggal mulai tugas" id="tmt"
name="tmt" autocomplete="off" value="<?= old('tmt');
?>">
</div>
</div>
<div class="col">
<label for="jabatan">Jabatan</label>
<select id="jabatan" class="form-
control" name="jabatan">
...
</select>
</div>
<div class="col">
<label for="mapel">Mapel</label>
<select id="mapel" class="form-
control" name="mapel">
...
</select>
</div>
</div>
Kelamin</label>
<select id="jeniskelamin" class="form-
control" name="j_kelamin">
...
</select>
</div>
<label
for="pendidikan">Pendidikan</label>
74
<select id="pendidikan" class="form-

control" name="pendidikan">
...
</select>
</div>
<label for="lembaga">Lembaga</label>
id="lembaga" rows="2" name="lembaga"><?=
old('lembaga'); ?></textarea>
</div>
<label for="domisili">Domisili</label>
id="domisili" rows="2" name="domisili"><?=
old('domisili'); ?></textarea>
</div>
id="alamat" rows="3" name="alamat"><?= old('alamat');
?></textarea>
</div>
<label for="pic">Tambah foto
guru</label>
<input type="file" class="form-control-
file <?= ($valid->hasError('pic')) ? 'is-invalid' :
''; ?>" id="pic" name="pic" onchange="previewFoto()">
</div>
</div>
<div class="form-group col d-inline-block
">
75

</div>
</div>
<button type="submit" class="btn btn-
success" name="submit">Submit</button>
</div>
</form>
========================================

4.1.3 Membuat tabel data siswa

5. Buat data baru
1. Pertama buat model baru
protected $allowedFields = [
'nama', 'nisn', 'nis', 'tem_lahir',
'tan_lahir', 'kelas', 'jurusan', 'j_kelamin',
'alamat', 'pic'
];
========================================
Variabel diatas mempunyai fungsi memberi perizinan

kepada aplikasi tentang field mana saja pada database
yang boleh di isi oleh pengguna
2. Buat method
76
$data = array(
'nisn' => $this->request->getVar('nisn'),
'nis' => $this->request->getVar('nis'),
'kelas' => $this->request->getVar('kelas'),
'jurusan' => $this->request->getVar('jurusan'),
'alamat' => $this->request->getVar('alamat'),
'pic' => $namaFileSiswa
);
$this->siswaModel->insert($data);
========================================

form
2. $this->siswaModel->insert($data) berfungsi mengirim
data ke database dengan parameter $data
3. Buat view
<form action="/siswa/savedata" method="POST"

class="md-10" enctype="multipart/form-data">
77
<input type="text" class="form-control <?=

($valid->hasError('nama')) ? 'is-invalid' : ''; ?>"
id="nama" placeholder="Nama" name="nama" autofocus
</div>
</div>

<div class="col">
<label for="nisn">NISN</label>
($valid->hasError('nisn')) ? 'is-invalid' : ''; ?>"
placeholder="NISN" name="nisn" value="<?=
old('nisn'); ?>">
<?= $valid->getError('nisn'); ?>
</div>
</div>
<div class="col">
<label for="nis">NIS</label>
($valid->hasError('nis')) ? 'is-invalid' : ''; ?>"
placeholder="NIS" name="nis" value="<?= old('nis');
?>">
<?= $valid->getError('nis'); ?>
</div>
</div>
</div>
78

<div class="col">
<label for="tempatlahir">Tempat lahir</label>
<input type="text" class="form-control"
placeholder="Tempat lahir" name="tem_lahir"
value="<?= old('tem_lahir'); ?>">
</div>
<div class="col">
lahir</label>
<input type="date" class="form-control"
placeholder="Tanggal lahir" id="tanggallahir"
</div>
</div>
</div>

<div class="col">
<label for="kelas">Kelas</label>
<select id="kelas" class="form-control"
name="kelas">
…
</select>
</div>
<div class="col">
<label for="jurusan">Jurusan</label>
<select id="jurusan" class="form-control"
name="jurusan">
…
</select>
79
</div>
</div>
Kelamin</label>
<select id="jeniskelamin" class="form-control"
name="j_kelamin">
…
</select>
</div>
<textarea class="form-control" id="alamat"
rows="3" name="alamat"><?= old('alamat');
?></textarea>
</div>
<label for="pic">Tambah foto siswa</label>
<input type="file" class="form-control-file
<?= ($valid->hasError('pic')) ? 'is-invalid' : '';
?>" id="pic" name="pic" onchange="previewFoto()">
</div>
</div>
<div class="form-group col d-inline-block ">

</div>
</div>
80
<button type="submit" class="btn btn-success"
name="submit">Submit</button>
</div>
</form>
========================================

6. Melihat data
1. Buat model
public function getSiswa($id = false){

if ($id == false) {
}
}
========================================

2. Buat method
public function detail($id){

$data = [
81
'title' => 'Detail siswa',

'siswa' => $this->siswaModel->getSiswa($id),
'valid' => \Config\Services::validation()
];
return view('siswa/detail', $data);
}
========================================

view
3. Buat view
<div class="row mt-3">

<label style="font-weight:bold;">Nama
Lengkap</label>
</div>

<?= $siswa['nama']; ?>
</div>
</div>
<hr />
<div class="row">
<label style="font-weight:bold;">NISN</label>
</div>
<?= $siswa['nisn']; ?>
82
</div>
</div>
<hr />
<div class="row">
<label style="font-weight:bold;">NIS</label>
</div>
<?= $siswa['nis']; ?>
</div>
</div>
<hr />
<div class="row">
<label style="font-weight:bold;">Tempat, tanggal
lahir</label>
</div>
<?= "{$siswa['tem_lahir']},
{$siswa['tan_lahir']}"; ?>
</div>
</div>
<hr />
<div class="row">
<label style="font-weight:bold;">Kelas /
Jurusan</label>
</div>
<?= "{$siswa['kelas']} / {$siswa['jurusan']}"; ?>
</div>
</div>
83
<hr />
<div class="row">
<label style="font-weight:bold;">Jenis
Kelamin</label>
</div>
<?= $siswa['j_kelamin']; ?>
</div>
</div>
<hr />
<div class="row">
<label style="font-weight:bold;">Alamat</label>
</div>
<?= $siswa['alamat']; ?>
</div>
</div>
========================================
Kode diatas berfungsi menampilkan data dari data dari

database berdasarkan id
7. Menghapus data
1. Buat model

if ($id == false) {
}
84
========================================

2. Buat method
public function delete($id){

// cari gambar berdasar id
$siswa = $this->siswaModel->find($id);
// cegah hapus default.png

if ($siswa['pic'] != 'default.png') {
// hapus gambar
unlink('img/' . $siswa['pic']);
}
$this->siswaModel->delete($id);
session()->setFlashdata('pesan', 'Data berhasil
dihapus!');
return redirect()->to('/siswa');
}
========================================
Method diatas mempunyai fungsi melakukan pencarian

data berdasarkan id untuk dihapus dan men-setting
pesan berhasil atau tidaknya data dihapus
8. Mengubah data
85
1. Buat model

if ($id == false) {
}
}
========================================

2. Buat method
$data = array(
'nisn' => $this->request->getVar('nisn'),
'nis' => $this->request->getVar('nis'),
'kelas' => $this->request->getVar('kelas'),
'jurusan' => $this->request->getVar('jurusan'),
'alamat' => $this->request->getVar('alamat'),
'pic' => $namaFileSiswa
);
86
$this->siswaModel->update($data);
========================================

form
2. $this->siswaModel->update($data) berfungsi
mengganti data di database dengan parameter $data
3. Buat view
<form action="/siswa/savedata" method="POST"

class="md-10" enctype="multipart/form-data">
($valid->hasError('nama')) ? 'is-invalid' : ''; ?>"
id="nama" placeholder="Nama" name="nama" autofocus
</div>
</div>

<div class="col">
<label for="nisn">NISN</label>
($valid->hasError('nisn')) ? 'is-invalid' : ''; ?>"
placeholder="NISN" name="nisn" value="<?=
old('nisn'); ?>">
87
<?= $valid->getError('nisn'); ?>
</div>
</div>
<div class="col">
<label for="nis">NIS</label>
($valid->hasError('nis')) ? 'is-invalid' : ''; ?>"
placeholder="NIS" name="nis" value="<?= old('nis');
?>">
<?= $valid->getError('nis'); ?>
</div>
</div>
</div>

<div class="col">
<label for="tempatlahir">Tempat lahir</label>
<input type="text" class="form-control"
placeholder="Tempat lahir" name="tem_lahir"
value="<?= old('tem_lahir'); ?>">
</div>
<div class="col">
lahir</label>
<input type="date" class="form-control"
placeholder="Tanggal lahir" id="tanggallahir"
</div>
88
</div>
</div>

<div class="col">
<label for="kelas">Kelas</label>
<select id="kelas" class="form-control"
name="kelas">
…
</select>
</div>
<div class="col">
<label for="jurusan">Jurusan</label>
<select id="jurusan" class="form-control"
name="jurusan">
…
</select>
</div>
</div>
Kelamin</label>
<select id="jeniskelamin" class="form-control"
name="j_kelamin">
…
</select>
</div>
<textarea class="form-control" id="alamat"
rows="3" name="alamat"><?= old('alamat');
?></textarea>
89
</div>
<label for="pic">Tambah foto siswa</label>
<input type="file" class="form-control-file
<?= ($valid->hasError('pic')) ? 'is-invalid' : '';
?>" id="pic" name="pic" onchange="previewFoto()">
</div>
</div>
<div class="form-group col d-inline-block ">

</div>
</div>
<button type="submit" class="btn btn-success"
name="submit">Submit</button>
</div>
</form>
========================================

4.1.4 Membuat halaman profile

1. Buat controller
90
public function about({

$data = [
'title' => "About Me | CodeIgniter4",
'header' => "About Me",
'nama' => "A. Musafir Khoirul Fattah",
'whatsapp' =>
"http://wa.me/62895365016420",
'phone' => "+62 895 3650 16420",
'instagram' =>
"https://www.instagram.com/musafir.khoirul
/?hl=id",
'facebook' =>
"https://www.facebook.com/sndv.20",
'github' =>
"https://github.com/khoirulfa",
];
return view('pages/about', $data);
}
========================================

form
2. return berfungsi mengembalikan hasil outputan dari
function
2. Buat view
<div class="card">
<div class="card-title mb-4">
<div class="d-flex justify-content-start">

<div class="image-container">
91
<img src="/assets/img/profile.jpg"
id="imgProfile" style="width: 150px; height: 150px"
class="img-thumbnail" />
</div>

<div class="userData ml-3 mr-4">
<h2 class="d-block mb-3" style="font-size:
1.5rem; font-weight: bold">Khoirul</h2>
<h6 class="d-block">Student at MA Islamiyah
Senori</h6>
<h6 class="d-block">Junior Web Developer</h6>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<ul class="nav nav-tabs mb-4" id="myTab"
role="tablist">
<li class="nav-item">
<a class="nav-link active" id="basicInfo-tab"
data-toggle="tab" href="#basicInfo" role="tab"
aria-controls="basicInfo" aria-
selected="true">Basic Info</a>
</li>
<li class="nav-item">
<a class="nav-link" id="connectedServices-
tab" data-toggle="tab" href="#connectedServices"
role="tab" aria-controls="connectedServices" aria-
selected="false">Connected Services</a>
</li>
</ul>
<div class="tab-content ml-1"

id="myTabContent">
92
<div class="tab-pane fade show active"

id="basicInfo" role="tabpanel" aria-
labelledby="basicInfo-tab">
<div class="row">
<div class="col-sm-3 col-md-3 col-5">
<label style="font-weight:bold;">Full
Name</label>
</div>
Ahmad Musafir Khoirul Fattah
</div>
</div>
<hr />
<div class="row">
<div class="col-sm-3 col-md-3 col">
<label style="font-weight:bold;">National
Student ID</label>
</div>
0035494776
</div>
</div>
<hr />
<div class="row">
<label style="font-weight:bold;">Local
Student ID</label>
</div>
131235230022180004
</div>
</div>
<hr />
93
<div class="row">
<label style="font-weight:bold;">Birth
Date</label>
</div>
January 10, 2003
</div>
</div>
<hr />
<div class="row">
<label style="font-weight:bold;">Place of
Birth</label>
</div>
Sidoarjo
</div>
</div>
<hr />
<div class="row">
<label style="font-
weight:bold;">Sex</label>
</div>
Man
</div>
</div>
<hr />
<div class="row">
94

<label style="font-
weight:bold;">Phone</label>
</div>
<?= $phone; ?>
</div>
</div>
<hr />
</div>
<div class="tab-pane fade"
id="connectedServices" role="tabpanel" aria-
labelledby="ConnectedServices-tab">
<ul class="list-group mt-1 mb-4">
<li class="list-group-item align-middle">
See my profile on <br>
<a href="<?= $facebook; ?>" target="blank">
<i class="fab fa-fw fa-facebook fa-lg"></i>
Facebook
</a>
</li>
Contact me at <br>
<a href="<?= $whatsapp; ?>" target="blank">
<i class="fab fa-fw fa-whatsapp fa-lg"></i>
WhatsApp
</a>
</li>
See my project and repository on <br>
<a href="<?= $github; ?>" target="blank">
<i class="fab fa-fw fa-github fa-lg"></i>
Github
</a>
95
</li>
Follow me on <br>
<a href="<?= $instagram; ?>"
target="blank">
<i class="fab fa-fw fa-instagram fa-
lg"></i> Instagram
</a>
</li>
Call me <br>
<i class="fas fa-fw fa-phone"></i> <?=
$phone; ?>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
Pengujian aplikasi
4.2.1 Buat data baru

a. Klik tombol “tambah data baru”
96
Gambar 4.0 Buat data baru
b. Masukkan data
c. Klik “submit”
Gambar 4.1 Kirim data baru

97
4.2.2 Lihat data

a. Klik “detail” pada data yang ingin dilihat
Gambar 4.2 Detail data
4.2.3 Hapus data

a. Klik ikon sampah di samping tombol detail
98
Gambar 4.3 Hapus data
b. Lalu klik “OK”
Gambar 4.4 Hapus data

99
4.2.4 Ubah data

a. Masuk ke detail
b. Klik “ubah data”
Gambar 4.5 Ubah data
c. Ganti data
d. Klik “ubah”
100
Gambar 4.6 Ubah data

BAB V
PENUTUP
5. 1. Kesimpulan
Aplikasi berbasis web adalah sebuah website yang

digunakan untuk mengelola suatu program di dalam
web sehingga bersifat responsif terhadap device yang
digunakan untuk mengaksesnya.
5. 2. Kritik
Pada saat pembuatan Tugas Akhir penulis menyadari

bahwa banyak sekali kesalahan dan masih jauh dari
kesempurnaan. Oleh sebab itu penulis mengharapkan
kritik serta sarannya mengenai pembahasan Tugas
Akhir dalam kesimpulan di atas.
5. 3. Saran
Meskipun penulis menginginkan kesempurnaan
dalam penyusunan makalah atau tugas akhir ini, akan
tetapi pada kenyataanya masih banyak kekurangan
yang perlu penulis perbaiki. Oleh karena itu, kritik dan
saran yang membangun dari para pembaca sangat
101
102
penulis harapkan sebagai bahan evaluasi dan

pengembangan untuk kedepannya.
103
DAFTAR PUSTAKA
Anonim. (2019, 26 November) Mengenal Apa itu JS

(Javascript) Definisi, Keunggulan dan Cara Kerjanya.
Diakses pada 14 September 2020, dari
https://idcloudhost.com/mengenal-apa-itu-js-
javascript-definisi-keunggulan-dan-cara-kerjanya/
Anonim. (2020, 02 November) Pengertian PHP, Fungsi dan

Sintaks Dasarnya. Diakses pada 14 September 2020,
dari https://www.niagahoster.co.id/blog/pengertian-
php/
Anonim. (2020, 13 Mei) Yuk! Mengenal Apa Itu Framework

& Fungsinya. Diakses pada 14 September 2020, dari
https://www.hostinger.co.id/tutorial/apa-itu-apache/
Admin. (2020, 14 September) Pengertian Database.

Diakses pada 14 September 2020, dari
https://www.termasmedia.com/lainnya/software/69-
pengertian-database.html
104
Anonim. (2020, 13 Mei) Yuk! Mengenal Apa Itu Framework

& Fungsinya. Diakses pada 14 September 2020, dari
https://www.hostinger.co.id/tutorial/apa-itu-apache/
C, Ariata. (2020, 02 Desember) Apa Itu HTML? Fungsi dan

Cara Kerja HTML. Diakses pada 14 September 2020,
dari https://www.hostinger.co.id/tutorial/apa-itu-html/
C, Ariata. (2020, 14 Desember) Apa Itu Apache? Pengertian

Apache Serta Kelebihan dan Kekurangannya. Diakses
pada 14 September 2020, dari
https://www.hostinger.co.id/tutorial/apa-itu-
apache/
Dewaweb. (2019, 21 Maret) Belajar CSS: Pengertian,

Peran, Fungsi, dan Macamnya. Diakses pada 14
September 2020, dari
https://www.dewaweb.com/blog/belajar-css-
pengertian-peran-fungsi-dan-macamnya/
Galih, Sandhika. (2020, 16 Desember) Web Programming

UNPAS. Diakses pada 14 September 2020, dari
105
https://www.youtube.com/channel/UCkXmLjEr95LVtG
uIm3l2dPg
Muharam, Akram. (2018, 18 Juli) Tahapan Utama dalam

Mempelajari Web Programming. Diakses pada 16
Desember 2020, dari
https://www.logique.co.id/blog/2018/07/30/tahapan-
mempelajari-web-programming/
106
BIODATA PENULIS
Nama : A. MUSAFIR KHOIRUL FATTAH
Jenis Kelamin : Laki - laki

TTL : Sidoarjo,10 Januari 2003
Alamat Rumah Asal : Tanjek Wagir – Krembung - Sidoarjo
No Telpon./HP 0895365016420
Email : ahmusafir.khoirul@gmail.com
Nama Orang Tua :
a. Ayah : Senadi
b. Ibu : Siti Masti’ah
Alamat Orang Tua : Tanjek Wagir – Krembung - Sidoarjo
Judul Tugas Akhir : APLIKASI PENGOLAHAN DATA
STATISTIK PENDUDUK DI MAISLAMIYAH SENORI
CODEIGNITER 4, BOOTSTRAP 4 DAN JAVASCRIPT
Pembimbing : M. Kharis Ridho A., S. Kom.
Kholifuddin Tri Ovim Edi N, S. Kom.
Tuban, .............................
Penulis,
FOTO
A. MUSAFIR KHOIRUL F.
NIS: 131235230022180004

Tugas Akhir Prodistik (Ahmad Musafir Khoirul Fattah)

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Tugas Akhir Prodistik (Ahmad Musafir Khoirul Fattah)

Diunggah oleh

Hak Cipta:

Format Tersedia

LAPORAN TUGAS AKHIR

APLIKASI PENGOLAHAN DATA STATISTIK

AHMAD MUSAFIR KHOIRUL FATTAH

PROGRAM PENDIDIKAN TERAPAN BIDANG

Kerjasama MA Islamiyah Senori

APLIKASI PENGOLAHAN DATA STATISTIK

AHMAD MUSAFIR KHOIRUL FATTAH

PROGRAM PENDIDIKAN TERAPAN BIDANG

Kerjasama MA Islamiyah Senori

Tugas Akhir ini diaju kan oleh :

Pembimbing Tugas Akhir :

1. M. Kharis Ridho A., S.Kom ( )

Telah disetujui dan berhasil dipertahankan di hadapan dewan penguji

Penguji Tugas Akhir :

Laporan Tugas Akhir Ini

Drs. GATOT UTUH SANTOSO NARJUL KIROM, S. PdI

A. MUSAFIR KHOIRUL FATTAH

A. MUSAFIR KHOIRUL FATTAH

BAB II LANDASAN TEORI.................................................... 5

2.1 Web Programming ....................................................... 5

BAB III PERANCANGAN ..................................................... 31

3.10 Ubah data guru ......................................................... 44

BAB IV PEMBAHASAN ....................................................... 57

BAB V PENUTUP ................................................................ 101

DAFTAR PUSTAKA ........................................................... 103

Tabel 3.0 Tabel waktu pengerjaan .......................................... 33

jika ingin mengakses apikasi tersebut harus melalui

Dapat menuangkan ide kreatif dan berbagai

Jadi, web programming adalah suatu proses, cara, atau

HTML bukanlah bahasa pemrograman, dan itu berarti

Bahasa pemrograman ini menggunakan sistem server-

• Tersimpan di satu tempat, nanti kalau server

2. 14.Database Data Type

▪ Jangkauan : -1.79…E+308 s/d -2.22…E-308, 0, dan

2. Tipe Date dan Time

3. Tipe String (Text)

▪ Jangkauan : 0 s/d 255 karakter

4. Tipe BLOB (Biner)

5. Tipe Data yang Lain

License (GPL) sehingga dapat Anda pakai untuk keperluan

gambaran dari hasil pemikiran dalam menganalisa suatu

Gambar 2.0 Simbol – simbol dalam flowchart

website. Semisal Anda sedang mengutak-atik website dan

a. Tampilan Utama dan Bagian-Bagian dari

Gambar 2.1 Tampilan Utama Control Panel XAMPP

Berikut penjelasan dari masing-masing fungsi dari

2. 18.Visual Studio Code

Pembaruan versi Visual Studio Code ini juga dilakukan

2. 19. Tampilan Utama dan Bagian-Bagian dari Visual

Gambar 2.2 Tampilan Utama VS Code

Berikut penjelasan dari masing-masing fungsi dari

Gambar 2.3 Tampilan Explorer VS Code

Explorer akan membantu untuk memapilkan folder

Gambar 2.4 Tampilan Extensions VS Code

Extensions berfungsi jika kita ingin menambahkan

• PHP Intelliphense: Berfungsi untuk memperbaiki library

mengubah salah satunya saja, baik pembuka atau

Network : IEEE 802.11b/g/n

3. 2. Pembuatan Konsep Desain

No. Tanggal Pengerjaan Pengerjaan

nama VARCHAR 256

alamat VARCHAR 256

kelas Enum 'X','XI','XII'