UNIVERSITAS GUNADARMA

FAKULTAS TEKNOLOGI INDUSTRI

PENULISAN ILMIAH

PEMBUATAN APLIKASI SISTEM ADMINISTRASI

SEKOLAH SMK YAPIN 02 SETU

Nama : Anan Hidayah

NPM : 50419675
Jurusan : Teknik Informatika
Pembimbing : Dr. Nurma Nugraha, S.Si., M.Si.

Diajukan Guna Melengkapi Sebagian Syarat Dalam Mencapai

Gelar Setara Sarjana Muda
Bekasi
2022
 PERNYATAAN ORIGINALITAS DAN PUBLIKASI

Saya yang bertanda tangan di bawah ini,

Nama : Anan Hidayah
NPM : 50419675
Judul PI : Pembuatan Apilikasi Sistem Administrasi Sekolah
Tanggal Sidang :
Tanggal Lulus :

Menyatakan bahwa tulisan ini adalah merupakan hasil karya saya sendiri dan dapat
dipublikasikan sepenuhnya oleh Universitas Gunadarma. Segala kutipan dalam
bentuk apa pun telah mengikuti kaidah dan etika yang berlaku. Mengenai isi dan
tulisan adalah merupakan tanggung jawab Penulis, bukan Universitas Gunadarma.
Demikian pernyataan ini dibuat dengan sebenarnya dan dengan penuh kesadaran.

Bekasi,

( Anan Hidayah)

ii
 LEMBAR PENGESAHAN

Judul PI : Pembuatan aplikasi Sistem Administrasi Sekolah

Nama : Anan Hidayah
NPM : 50419675
Tanggal Sidang :
Tanggal Lulus :

Menyetujui,

Pembimbing Kasubag. Sidang PI

(Dr. Nurma Nugraha S.Si, M.Si.) (Dr. Achmad Fahrurozi, S.Si., M.Si.)

Ketua Jurusan Teknik Informatika

(Dr. Lintang Yuniar Banowosari, S.Kom., MSc)

iii
 ABSTRAKSI

Anan Hidayah. 50419675.

Pembuatan aplikasi Sistem Administrasi Sekolah.
Penulisan Ilmiah, Jurusan Teknik Informatika, Fakultas Teknologi Industri,
Universitas Gunadarma, 2022.
Kata Kunci : Website, Sekolah, Pembayaran.

Aplikasi berbasis web adalah salah satu aplikasi yang di ciptakan yang berguna
untuk membantu manusia untuk mengerjakan sesuatu. Aplikasi berbasis web juga
dapat di gunakan dalam berbagai macam bidang, contohnya : Bisnis, Proyek,
Pengelolahan Perusahaan. Secara umum sistem pendidikan yang ada di indonesia
membutuhkan sebuah aplikasi web yang berfungsi untuk merekam kegiatan yang
ada di sekolah dan membantu sekolah untuk menyimpan semua data. Tujuan dari
penulisan ini adalah membuat Aplikasi Sekolah berbasis Web yang akan di
persembahkan kepada SMK Yapin 02 Setu untuk membantu menyimpan data yang
terekam serta membantu pekerjaan para Staff dan Guru di sekolah tersebut, dan
website ini dapat membantu siswa-siswi untuk mendapatkan informasi tagihan
pembayaran mereka. Metode penelitian yang digunakan dalam penulisan ini adalah
metode SDLC (System Development Life Cycle) tahapan metode tersebut terdiri
dari tahapan perencanaan, tahap analisis, tahap perancangan, tahap implementasi,
dan tahap uji coba. Setelah di lakukan uji coba dapat disimpulkan bahwa website
ini dapat membantu dan memudahkan pengguna yang menggunakan website ini
dan angka keberhasilan dari aplikasi website ini adalah 86,32%

Daftar Pustaka (2018 - 2020)

iv
 KATA PENGANTAR

Puji dan syukur penulis panjatkan kepada Tuhan Yang Maha Esa, yang telah
memberikan rahmat dan hidayahnya sehingga penulis dapat menyelesaikan
penulisan ilmiah yang diberi judul “Pembuatan aplikasi Sistem Administrasi
Sekolah”.
Adapun penyusunan penulisan ini bertujuan untuk melengkapi sebagian
syarat dalam mencapai jenjang setara Sarjana Muda pada Jurusan Teknik
Informatika, Fakultas Teknologi Industri, Universitas Gunadarma.
Dalam kesempatan ini, penulis ingin menyampaikan penghargaan dan
ucapan terima kasih yang sebesar-besarnya atas dorongan dan bantuan yang telah
diterima baik moril maupun material kepada :
1. Prof. Dr. E. S. Margianti, SE., MM, selaku Rektor Universitas Gunadarma.
2. Prof. Dr. -Ing. Adang Suhendra, SSi., SKom., MSc, selaku Ketua Jurusan
Teknik Informatika Universitas Gunadarma.
3. Ibu Dr. Lintang Yunari Banowosari, S.Kom., M.Sc., selaku Ketua Jurusan
Teknik Informatika
4. Dr. Achmad Fahrurozi, S.Si, M.Si, selaku Koordinator Penulisan Ilmiah
Universitas Gunadarma.
5. Dr. Nurma Nugraha, S.Si., M.Si. selaku Dosen Pembimbing Penulisan
Ilmiah yang telah membimbing penulis dalam menyelesaikan penulisan ini.
6. Kedua Orang Tua saya yaitu Papa Arena dan Mama Yati yang telah
memberikan dukungan berupa bantuan moril maupun materi.
7. Untuk rekan-rekan yang turut membantu Fitranindya Alifia Syawali, James
Anes, Robby Mahesa Koswara,Kristina Rajagukguk, Kristanti Rumondang,
Rafly Alamsyah, Maureen Camilatuzzahra Davito Arrachman, Muhammad
Fawwaz, Dinda Intan Pertiwi, Annisa Sidqi, Rossa Rosdiana, Nurul Rizki
Leonita, yang telah memberikan semangat, pengertian, dan inspirasi kepada
penulis sehingga penulis dapat menyelesaikan penulisan ini dengan tenang.

v
8. Teman-teman seperjuangan kelas 3IA19 yang ikut serta berjuang
menyelesaikan penulisan ini.
9. Semua pihak yang telah membantu, memotivasi, dan memberi dukungan
hingga terselesaikannya penulisan ini yang tidak dapat disebutkan satu-
persatu.

Penulis juga menyadari bahwa dalam Penulisan Ilmiah ini masih banyak
kekurangan. Oleh karena itu, kritik dan saran sangat penulis harapkan demi
terciptanya penulisan yang lebih baik lagi.
Pada akhirnya penulis berharap semoga penulisan ini bermanfaat bagi
pembaca pada umumnya.

Bekasi,

(Anan Hidayah)

vi
 DAFTAR ISI
Halaman
Halaman Judul……..………………………………………………………………i
Peryataan Orginalitas Dan Publikasi……………………………………………...ii
Lembar Pengesahan……....………………………………………………………iii
Abstrak…..………………………………………………………………………..iv
Kata Pengantar…………………………………………………………………….v
Daftar Isi…..……………………………………………………………………..vii
Daftar Gambar……..……………………………………………………………..xi
Daftar Tabel…….……………………………………………………………….xiv

BAB I PENDAHULUAN………………………………………………………...1
1.1 Latar Belakang…………………………………………………………..1
1.2 Batasan Masalah………………………………………………………...2
1.3 Tujuan Penelitian………………………………………………………..2
1.4 Metode Penelitian……………………………………………………….3
1.5 Sistematika Penulisan…………………………………………………...4

BAB II LANDASAN TEORI……………………………………………………6

2.1 Website Sekolah………………………………………………………...6
2.2 Visual Studio…………………………………………………………....6
2.3 Bootstrap………………………………………………………………..7
2.4 Xampp…………………………………………………………………..7
2.5 Mysql…………………………………………………………………. ..8
2.6 Php………………………………………………………………………8
2.7 Html……………………………………………………………………10
2.8 Condegniter……………………………………………………………10
2.9 uml……………………………………………………………………..11
2.9.1 Use Case Diagram……….….……………………………………….11
2.9.2 Activity Diagram……….…..………………………………………..12

vii
 2.9.3 Struktur Navigasi……….………..…………………………………..12

BAB III PEMBAHASAN DAN IMPLEMENTASI………………………….16

3.1 Gambaran Umum……………………………………………………...16
3.2 Spesifikasi Perangkat Lunak dan Perangkat Keras……………………17
3.3 Perancangan Sistem dengan php………………………………………17
3.3.1 Use Case Diagram……………………………………………...17
3.3.2 Activity Diagram……………………………………………….18
3.3.3 Sequence Diagram……………………………………………...19
3.4 Struktur Navigasi……………………………………………………...20
3.5 Rancangan Storyboard………………………………………………...25
3.6 Desain Input dan Output………………………………………………26
3.6.1 Rancangan Tampilan Halaman Login Admin Dashboard…….26
3.6.2 Rancangan Tampilan Halaman pembayaran siswa……………27
3.6.3 Rancangan Pos Keuangan……………………………………...28
3.6.4 Rancangan Tampilan Halaman jenis pembayaran……………..29
3.6.5 Rancangan Tampilan Halaman Jurnal umum pengeluaran….....31
3.6.6 Rancangan Tampilan Halaman jurnal umum penerimaan….....32
3.6.7 Rancangan Tampilan Halaman manajemen data Tahun Ajaran.33
3.6.8 Rancangan Tampilan Halaman kelas…………….………...….34
3.6.9 Rancangan Tampilan Halaman Program Keahlian………...….35
3.6.10 Rancangan Tampilan data siswa……………………………...37
3.6.11 Rancangan Tampilan Halaman kelulusan………………….....38
3.6.12 Rancangan Tampilan Halaman kenaikan kelas…………….....39
3.6.13 Rancangan Tampilan Halaman Laporan keuangan……….……40
3.6.14 Rancangan Tampilan Halaman laporan rekapitulasi……….….41
3.6.15 Rancangan Tampilan Halaman informasi………………….….42
3.6.16 Rancangan Tampilan Halaman pengaturan sekolah……….…..42
3.6.17 Rancangan Tampilan Halaman pengaturan Bulan……….…...43
3.6.18 Rancangan Tampilan Halaman manajemen pengguna………...44
3.6.19 Rancangan Tampilan Halaman pemeliharaan…………….…..44

viii
3.7 Instalasi Perangkat Lunak……..……………………….…………….45
3.7.1 Instalasi XAMPP…………………………………………….46
3.7.2 Instalasi Visual Studio………………………….……………46
3.7.3 Instalasi Mozila Firefox……………………………………...47
3.7.4 Instalasi Mysql……………………………………………….48
3.7.5 Membuat database mysql…………………………………….49
3.8 Perancangan Database…………………………………………………….
3.8.1 Struktur Database Tabel pada Database………………...……49
3.8.2 Struktur Database Tabel Siswa……………………………….51
3.9 Pembuatan Database………………………………………………...52
3.9.1 Pemanggilan Databse Mysql ke Phpmyadmin………... …….55
3.9.2 Pembuatan Database Tabel Bebas pembayaran……………...55
3.9.3 Pembuatan Database Tabel Bebas pay……………………….56
3.9.4 Pembuatan Database Tabel Bulan……………………………56
3.9.5 Pembuatan Database Tabel CI_session Pada Database……...57
3.9.6 Pembuatan Database Tabel Class…………………………….57
3.9.7 Pembuatan Database Tabel Pada Debit………………………57
3.9.8 Pembuatan Database Tabel Pada Holiday…………………...58
3.9.9 Pembuatan Database Tabel information…………..………….58
3.9.10 Pembuatan Database Tabel Kredit…………………………...59
3.9.11 Pembuatan Database Tabel student Pada Letter…………….59
3.9.12 Pembuatan Database Tabel Logs…………………………….60
3.9.13 Pembuatan Database Tabel Month…………………………...60
3.9.14 Pembuatan Database Tabel payment ……………………….......61
3.9.15 Pembuatan Database Tabel period.…………………………..61
3.9.16 Pembuatan Database Tabel pos.……………………………...62
3.9.17 Pembuatan Database Tabel setting.…………………………..62
3.9.18 Pembuatan Database Tabel student.………………………….62
3.9.19 Pembuatan Database pada Tabel user.……………………….63

ix
 3.9.20 Pembuatan Database Tabel user_roles……………………....63

3.10 Scripting……………………………………………………………..64
3.10.1 Melakukan Koneksi Website Dengan Database……………...64
3.10.2 Arc.php ……………………………………………………….66
3.10.3 database.php…..………………………………………………67
3.10.4 Login.php……..………………………………………………68
3.10.5 Sidebar.php…..……………………………………………….69
3.10.6 LoginStudent.php…..…………………………………………71
3.10.7 Portal.php…………..…………………………………………72
3.11 Uji Coba Aplikasi …………………………………………………..71

BAB IV PENUTUP…………………………………………………………..76
4.1 Kesimpulan…………………………………………………………76
4.2 Saran………………...……………………………………………...76
Daftar Pustaka……………………………………………………....78
Laporan Input Program………...…………………………………...80
Laporan Output Program……………...….……………………….150

x
 DAFTAR GAMBAR

Halaman
Gambar 2.1 Struktur Navigasi Linier ………………….…...………………….13
Gambar 2.2 Struktur Navigasi Hirarki………………..…….……………….....14
Gambar 2.3 Stuktur Navigasi Non Linear…………...….…..………..………...14
Gambar 2.4 Stuktur Navigasi Composite (Campuran)….……………………..15
Gambar 3.1 Use Case Diagram…...……………..………..……………………18
Gambar 3.2 Activity Diagram…………………………….……………………19
Gambar 3.3 Sequence Diagram………………………………………………...20
Gambar 3.4 Struktur Navigasi Halaman Utama / Home……………………….21
Gambar 3.5 Struktur Navigasi Login Admin…………………………………..22
Gambar 3.6 Struktur Navigasi Cek pembayaran siswa-siswi………………….23
Gambar 3.7 Struktur Navigasi login siswa-siswi………………………………23
Gambar 3.8 Storyboard Website Sekolah SMK Yapin 02 setu………………...26
Gambar 3.9 Rancangan Tampilan Halaman utama (Dahboard)…………….....27
Gambar 3.10 Rancangan Pembayaran Siswa…………………………………..28
Gambar 3.11 Rancangan Pos keuangan………………………………………..29
Gambar 3.12 Rancangan Halaman Jenis pembayaran…………………………30
Gambar 3.13 Rancangan Halaman Tarif Pembayaran…………………………30
Gambar 3.14 Rancangan Halaman jurnal umum pengeluaran…………………31
Gambar 3.15 Rancangan Tampilan Halaman aksi jurnal umum pengeluaran…31
Gambar 3.16 Rancangan Tampilan Halaman jurnal umum……………………32
Gambar 3.17 Rancangan Tampilan Halaman jurnal umum penerimaan aksi….32
Gambar 3.18 Rancangan Tampilan Halaman manajemen data Tahun Ajaran...33
Gambar 3.19 Rancangan Tampilan Halaman manajemen data Tahun
Ajaran(Aksi)………………………………………………………………………...……34
Gambar 3.20 Rancangan Tampilan Halaman manajemen data kelas………..35
Gambar 3.21 Rancangan Tampilan Halaman manajemen data kelas (AKSI)..35

xi
 Gambar 3.22 Rancangan Tampilan Halaman manajemen data Program
keahlian…………………………………………………………………………..36
Gambar 3.23 Rancangan Tampilan Halaman manajemen data Program
keahlian(Aksi)……………………………………………………………………36
Gambar 3.24 Rancangan Tampilan Halaman manajemen data Siswa……….37
Gambar 3.25 Rancangan Tampilan Halaman manajemen data Siswa (Aksi)...38
Gambar 3.26 Rancangan Tampilan Halaman manajemen data Kelulusan…...38
Gambar 3.27 Rancangan Tampilan Halaman manajemen data Kenaikan
kelas……………………………………………………………………………...39
Gambar 3.28 Rancangan Tampilan Halaman Laporan keuangan……………40
Gambar 3.29 Rancangan Tampilan Halaman Laporan keuangan Excell…….40
Gambar 3.30 Rancangan Tampilan Halaman Laporan Rekapitulasi...……….41
Gambar 3.31 Rancangan Tampilan Halaman Laporan Rekapitulasi Excell….41
Gambar 3.32 Rancangan Tampilan Halaman Informasi……………………...42
Gambar 3.33 Rancangan Tampilan Halaman pengaturan sekolah…………...43
Gambar 3.34 Rancangan Tampilan Halaman pengaturan bulan……………..43
Gambar 3.35 Rancangan Tampilan Halaman manajemen pengguna………...44
Gambar 3.36 Rancangan Tampilan Halaman pemeliharaan…………………45
Gambar 3.37 Unduhan XAMPP………………………………………………45
Gambar 3.38 Unduhan Visual Studio………………………………………...46
Gambar 3.39 Unduhan Browser Mozila Firefox……………………………..47
Gambar 3.40 Unduhan Mysql………………………………………………..48
Gambar 3.41 pembuatan database Mysql……………………………………49
Gambar 3.42 Tampilan Awal PHPMyAdmin………………………………..52
Gambar 3.43 Tampilan Membuat Database Baru…………………………...53
Gambar 3.44 menubar import database Mysql anansppsl…………….……..53
Gambar 3.45 Browse import database Mysql anansppsl…………………….53
Gambar 3.46 Go import database Mysql anansppsl…………………………54

xii
 Gambar 3.47 Tampilan Database mysql yang telah di import ke
phpmyadmin……………………………………………………………………...55
Gambar 3.48 Tampilan Membuat Database Tabel Bebas pembayaran…….55
Gambar 3.49 Tampilan Membuat Database Tabel bebas_pay……………...56
Gambar 3.50 Tampilan Membuat Database Tabel bulan……………………56
Gambar 3.51 Tampilan Membuat Database pada Tabel Ci_sessions……….57
Gambar 3.52 Tampilan Membuat Database Tabel Class……………………57
Gambar 3.53 Tampilan Membuat Database Tabel Debit……………………58
Gambar 3.54 Tampilan Membuat Database pada Tabel Holiday……………58
Gambar 3.55 Tampilan Membuat Database Tabel information……………..58
Gambar 3.56 Tampilan Membuat Database Tabel Kredit…………………...59
Gambar 3.57 Tampilan Membuat Database pada Tabel Letter……………...59
Gambar 3.58 Tampilan Membuat Database pada Tabel Logs……………….60
Gambar 3.59 Tampilan Membuat Tabel Month..…...………………………..60
Gambar 3.60 Tampilan Membuat Database pada Tabel Payment…………...61
Gambar 3.61 Tampilan Membuat Database pada Tabel Period……………..61
Gambar 3.62 Tampilan Membuat Database pada Tabel Pos………………...62
Gambar 3.63 Tampilan Membuat Database pada Tabel Setting……………..62
Gambar 3.64 Tampilan Membuat Database pada Tabel student……………..63
Gambar 3.65 Tampilan Membuat Database pada Tabel user………………...63
Gambar 3.66 Tampilan Membuat Tabel user_roles………………………….64
Gambar 3.67 Melakukan Koneksi Website Dengan Database……………….65
Gambar 3.68 Arc.php…………………………………………………………66
Gambar 3.69 database.php……………………………………………………67
Gambar 3.70 Login.php ………………………………………………………68
Gambar 3.71 sidebar.php……………………………………………………...69
Gambar 3.72 login student.php………………………………………………..71
Gambar 3.73 portal.php………………………………………………………..72

xiii
 DAFTAR TABEL

Halaman
Tabel 3.1 Database Mysql…………. ………………….…...…………………49
Tabel 3.2 Database Student………….………………..…….………………....50
Tabel 3.3 Uji Coba………….....................................….…..………..………...72

xiv
 BAB 1

PENDAHULUAN

1.1 Latar Belakang Masalah

Pada zaman ini banyak sekali orang yang menggunakan website untuk kegiatan sehari-hari
baik untuk umum ataupun pribadi website yang secara langsung tujuanya adalah mempermudah
User untuk mengakses data yang ingin dikunjungi contohya Ketika seseorang ingin mencari tutor
untuk membuat resep makanan tentulah orang itu akan membuka google untuk mengunjungi
sebuah website untuk mencari sebuah resep makanan tersebut.

Dari masa ke masa website sudah dipergunakan banyak orang dalam bidang pekerjaan ,
Pendidikan , menaruh jurnal dan sebagainya. Pada zaman sekarang juga website sudah sangat
dikenal luas oleh seluruh orang di dunia karena hampir semua orang di seluruh dunia ini hidup di
era Digital dimana suatu informasi bisa kita dapatkan dengan mudah pada saat ini. Banyak sekali
Sekolah yang masih belum memiliki system keuangan tentu ini adalah masalah umum yang sering
terjadidi dunia Pendidikan Indonesia. Hal ini bukanlah hal yang wajar dan patut di biarkan , karena
sebuah system Pendidikan pasti perlu untuk membuat website tersendiri yang berguna untuk
mengatur system di sekolahan tersebut, agar pengelola sekolahan tersebut bisa menangani semua
permasalahan yang ada di sebuah sekolah.

Salah satu System yang dapat membantu menangani permasalahan yang ada di setiap sekolah
adalah website yang telah banyak digunakan di beberapa sekolah. website sekolah biasanya
diguanakan untuk melakukan kegiatan - kegiatan yang akan dilakukan oleh pengelola sekolah agar
bisa tersusun rapi dan juga terstruktur. maka dari itu sebuah sekolah harus memiliki website yang
berfungsi menangani masalah dari sekolah tersebut seperti system melakukan transaksi bayaran ,
menyimpan biodata siswa/siswi, membantu mendaftarkan siswa/siswi baru, menginformasikan

1
kegiatan sekolah kepada siswa/siswi, mencetak data-data kelulusan, dan lain-lain. Cara ini sangat
efektif dalam menangani kasus permasalahan sekolah sehingga setiap sekolah di haruskan
memiliki website tersendiri namun sayang banyak beberapa Sekolah yang tidak mempunyai
website sekolah mereka sendiri sehingga pengelolah dari sekolah tersebut akan merasa kewalahan
untuk mengelola semua kegiatan tersebut.

Tujuan penelitian dibuatkan program website sekolah ini agar pihak sekolah bisa merekam
kegitan-kegiatan yang ada di sekolah dan pengelola sekolah bisa menangani dengan baik. Dalam
website ini pengelola sekolah bisa melakukan transaksi kepada mahasiswa dengan cara offline
sehingga dapat mencatat dan menyimpan transaksi dari siswa atau siswi. Karena website bukan
hanya sekedar memposting atau menyampaikan informasi namun di era sekarang website juga bisa
digunakan untuk system bekerja, jualan, menyimpan data-data, dan juga sangat efektif di dunia
Pendidikan. Hal ini dikarena website bisa menyimpan rekaman dari sebuah kegiatan dalam suatu
tempat atau komunitas yang akan di informasikan.

Alasan pembuatan website SMK Yapin 02 Setu untuk mempermudah pihak Administrator
dalam megerjakan pekerjaan sekolah yang sebelumnya memakai cara manual atau sistem catat
mencatat. Dalam pembuatan Website ini terdapat perekaman serta penyimpanan data dari
keseluruhan database yang disimpan sehingga database tersebut bisa di backup tanpa perlu takut
kehilangan data-data yang ada di sekolah SMK Yapin 02 Setu tersebut.

Website yang baik adalah website yang di lengkapi fitur-fitur yang sempurna yang dapat
memuaskan keinginan dari User yang menggunakan website tersebut. Berdasarkan latar belakang
yang sudah dibuat yaitu website sekolah akan mempermudah User sebagai pemilik sekolah untuk
merekam kegiatan-kegiatan yang ada di dalam sekolah tersebut.

2
1.2 Batasan Masalah

Batasan masalah pada penulisan ilmiah ini adalah Bahasa pemograman yang digunakan dalam
merancang website ini adalah Bahasaphp, html, mysql, css,js, Bootsrap serta laptop untuk
menjalankan program yang akan di buat. Website ini dibuat menggunakan Visual Studio Code
2019 dan mysql untuk menulis atau mengkoding program yang dibuat. Website ini menyediakan
system pembayaran, menginformasikan kegiatan, penerimaan data siswa-siswi baru, kelulusan,
penyimpanan biodata siswa-siswi serta terdapat 3 ( Tiga ) Menu akses yang bisa digunakan 2 (Dua)
pihak dalam 1 (Satu) platfrom.

Website ini bersifat umum bisa diikunjungi oleh 2 (Dua) User yaitu Administrator sekolah
dan juga siswa/siswi masing masing user memiliki hak akses nya tersendiri Administrator sekolah
menggunakan akses admin dan password tersendiri dan siswa/siswi memiliki hak akses masuk
menggunakan nomer NIS danjuga memiliki password tersendiri.

1.3 Tujuan Penulisan

Penulisan ini bertujuan untuk membuat sebuah penulisan ilmiah tentang Website sekolah
SMK Yapin 02 Setu yang berguna untuk memudahkan administrator mengelola semua kegiatan
yang ada di dalam sekolah tersebut. Sehingga dengan website ini Administrator dapat merekam
serta melakukan backup data berdasarkan bantuan dari database yang tersedia dan siswa-siswi
dapat mengetahui Jumlah Tagihan pembayaran yang ada di dalam sekolah SMK Yapin 02 Setu
dan Program pembuatan aplikasi sistem administrasi sekolah ini nantinya akan di serahkan kepada
pihak sekolah tersebut. Penulisan ini juga dilakukan sebagai syarat untuk menyelesaikan program
penulisan ilmiah/program (PI)yang dilakukan pada setiap semester enam ( 6 ) di Universitas
Gunadarma.

1.4 Metode Penulisan

Dalam metode penulisan ilmiah ini terdapat 5 tahapan system SDLC ( Sotftware Development
Life Cycle ). Dan terdapat 5 tahapan dalam system penulisan SDLC sebagai berikut :

3
1. Perencanaan Sistem(System Planning)
Pada tahap perencanaan sistem akan dilakukan pengumpulan data dari berbagai sumber,
mencari informasi melakukan waawancara terhadap pihak sekolah mengenai untuk
mengetahui data-data yaang tedapat pada sekolah tersebut dan juga mencari informasi melalui
internet, dan pengumpulan informasi melalui jurnal-jurnal mengenai Pembuatan aplikasi Sistem
Administrasi Sekolah yang berkaitan dengan penulisan ini

2. Analisis Sistem (System Analysis)

Pada tahap analisis akan Mengidentifikasikan apakah masalah yang terjadi pada sekolah
SMK Yapin 02 Setu dapat terbantu dan diselesaikan melalui pengembangan sistem.

3. Perancangan Sistem (System Design)

Pada tahap perancangan akan dilakukan sebua gambaran rancangan yang ada pada aplikasi
ini, gambaran tersebut merupakan sebuah struktur navigasi, use case diagram, activity diagram,
skema basis data dan perancangan halaman pada website yang akan menjadi suatu tampilan
yang bisa dilihat oleh pengguna.

4. Implementasi Sistem (System Implementation)

Pada tahap implementasi adalah tahap pembuatan website dengan menggunkan perangkat
lunak (software) yang telah di tetapkan dalam pembuatan aplikasi sistem administrasi sekolah
ini.

5. Uji Coba

Pada tahap ini adalah tahap dilakukan uji coba untuk menetukan angka keberhasilan
pembuatan aplikasi sistem administrasi sekolah ini sebelum di luncurkan.

4
1.5 Sistematika Penulisan
Dalam penulisan ilmiah ini terdiri dari bab-bab yang sesuai dengan topik atau pembahasanya
tersendiri serta memiliki hubungan keselarasan topik pembahasanya Yang terdiri dari bab 1
pendahuluan, bab 2 landasan teori, bab 3 pembahasan, bab 4 penutup.

Bab 1 PENDAHULUAN

Bab ini berisi tentang penjelasan latar belakang, tujuan penulisan, metode , dan sistematika
penulisan.

Bab 2 LANDASAN TEORI

Bab ini berisikan kumpulan dari konsep-konsep dan teori-teori yang akan menjadi landasan
dalam menyelesaikan permasalahan antara lain menyangkut sekilas tentang aplikasi berbasis PHP
(Hypertext Preprocessor), CSS (Cascading Style Sheets), HTML (Hypertext Markup Languange),
MYSQL (My Structured Query Language) dengan software Visual Studio code sebagai text editor
yang digunakan untuk mengkoding serta UML ( Unified Modeling Language) sebagai data
spesifikasi standar yang untuk mendokumentasikan, menspesifikasikan, dan membangun sistem
perangkat lunak.

Bab 3 PEMBAHASAN

Bab ini berisikan penjelasan mengenai rancangan dalam pembuatan aplikasi sistem
administrasi sekolah ini antara lain struktur navigasi, perancangan use case diagram, perancangan
activity diagram, perancangan basis data dan perancangan tampilan antar muka pada website yang
dibuat.

5
Bab 4 PENUTUP

Bab ini berisikan kumpulan hasil kesimpulan dari tahap penyelesaian masalah yang Dihadapi
dan juga saran yang bertujuan untuk pengembangan website ini .

BAB 2

LANDASAN TEORI

2.1 Website Sekolah

Website sekolah sekarang ini sedang menjadi trend di dunia pendidikan dan website
sekolah mendapatkan perhatian, tanggapan yang sangat bagus dari berbagai pihak baik itu dari
tenaga kependidikan, siswa dan juga masyarakat serta keberadaan website sekolah pada saat
ini memang sangat penting. Proses penginputan data siswa,data guru dan karyawan disekolah
tersebut,akan tetapi sekolah ini belum memiliki website sendiri untuk mempermudah siswa,
guru dan karyawan mendapatkan informasi, dengan begitu sulit untuk mengetahui informasi
yang ada pada sekolah tersebut. Tujuan diadakan penelitian ini untuk membuat website pada
Sekolah Menengah Kejuruan Yapin 02 Setu. Untuk mempermudah siswa,guru, karyawan dan
masyarakat mendapatkan informasi tentang SMK Yapin 02 Setu dengan cepat. Untuk
memperkenalkan SMK Yapin 02 Setu ke publik melalui website.

6
2.2 Visual Studio

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. 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
dikontribusi 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.3 Bootstrap

Bootstrap merupakan salah satu framework HTML, CSS, Dan JS yang digunakan untuk
membuat website yang bersifat responsive atau bisa menyesuaikan tampilan layout nya
berdasarkan ukuran viewport dari device pengaksesnya, mulai dari smartphone, tablet, maupun
layar PC. Teknologi web bootstrap merupakan framework untuk membangun desain web
secara responsif. Artinya, tampilan web yang dibuat dengan framework bootstrap akan
menyesuaikan ukuran layar dari browser yang akan gunakan baik di desktop, tablet ataupun
mobile device. Fitur ini bisa diaktifkan ataupun dinon-aktifkan sesuai dengan keinginan
sendiri, sehingga bisa membuat web untuk tampilan desktop saja dan apabila dirender oleh
mobile browser maka tampilan dari web yang di buat tidak bisa beradaptasi sesuai layar.
Dengan Bootstrap, developer web bisa menghemat waktu dalam mendesain tampilan aplikasi.
Dalam Bootstrap sudah tersedia CSS, HTML dan juga JQuery Plugin untuk typography, forms,

7
buttons, tables, grids, navigation dan berbagai komponen interface lainnya. Mendesain web
dengan menggunakan Bootstrap akan langsung menyesuaikan dengan lebar dari media
perambahnya. Sehingga tampilan web akan tetap rapih dibuka dengan media apapun, baik itu
handphone, tablet, laptop ataupun PC desktop. Jadi, tampilan tidak akan terganggu dengan
resolusi dari layar.

2.4 Xampp

XAMPP adalah perangkat lunak bebas, yang mendukung banyak sistem operasi,
merupakan kompilasi dari beberapa program. Fungsinya adalah sebagai server yang berdiri
sendiri (localhost), yang terdiri atas program Apache HTTP Server, MySQL database, dan
penerjemah bahasa yang ditulis dengan bahasa pemrograman PHP dan Perl. Nama XAMPP
merupakan singkatan dari X (empat sistem operasi apapun), Apache, MySQL, PHP dan Perl.
Program ini tersedia dalam GNU General Public License dan bebas, merupakan web server
yang mudah digunakan yang dapat melayani tampilan halaman web yang dinamis.

2.5 Mysql

MySQL merupakan software database open source yang sering digunakan untuk
mengolah basis data yang menggunakan bahasa SQL (Subagia, 2018:67). Menurut Winarno
(2014:101), “MySQL adalah sebuah software database. MySQL merupakan tipe data
relasional yang artinya MySQL menyimpan datanya dalam bentuk table-tabel yang saling
berhubungan. Keuntungan menyimpan data di database adalah kemudahannya dalam
penyimpanan dan menampilkan data karena dalam bentuk tabel.” Menurut Priyanto,
Hidayatullah dkk (2015:180) “MySQL adalah salah satu aplikasi DBMS yang sudah sangat
banyak digunakan para pemrogram aplikasi web. Kelebihan dari MySQL adalah gratis, handal,
selalu di-update dan banyak forum yang memfasilitasi para pengguna jika memiliki kendala.
MySQL juga menjadi DBMS yang sering di bundling dengan web server sehingga proses

8
instalasinya jadi lebih mudah”. Dapat ditarik kesimpulan bahwa MySQL merupakan aplikasi
yang digunakan untuk mengolah basis data yang banyak digunakan untuk membangun aplikasi
yang menggunakan database.

2.6 Php

Salah satu bahasa pemrograman open source yang sangat cocok atau dikhususkan untuk
pengembangan web dan dapat ditanamkan pada sebuah skripsi HTML. Bahasa PHP dapat
dikatakan menggambarkan beberapa bahasa pemrograman seperti C, Java, dan Perl serta
mudah untuk dipelajari. PHP merupakan bahasa scripting server – side, dimana pemrosesan
datanya dilakukan pada sisi server. Sederhananya, serverlah yang akan menerjemahkan skrip
program, baru kemudian hasilnya akan dikirim kepada client yang melakukan permintaan.
Adapun pengertian lain PHP adalah akronim dari Hypertext Preprocessor, yaitu suatu bahasa
pemrograman berbasiskan kode – kode (script) yang digunakan untuk mengolah suatu data
dan mengirimkannya kembali ke web browser menjadi kode HTML”. Menurut Kustiyaningsih
(2011:114), “PHP (atau resminya PHP: Hypertext Preprocessor) adalah skrip bersifat server
– side yang ditambahkan ke dalam HTML”. Pada prinsipnya server akan bekerja apabila ada
permintaan dari client. Dalam hal ini client menggunakan kode-kode PHP untuk mengirimkan
permintaan ke server. Sistem kerja dari PHP diawali dengan permintaan yang beasal dari
halaman website oleh browser.

Berdasarkan URL atau alamat website dalam jaringan internet, browser akan menemukan
sebuah alamat dari webserver, mengidentifikasi halaman yang dikehendaki, dan
menyampaikan segala informasi yang dibutuhkan oleh webserver. Selanjutnya webserver akan
mencarikan berkas yang diminta dan menampilkan isinya di browser. Browser yang
mendapatkan isinya segera menerjemahkan kode HTML dan menampilkannya. Lalu
bagaimana apabila yang dipanggil oleh user adalah halaman yang mengandung script PHP?
Padaprinsipnya sama dengan memanggil kode HTML, namun pada saat permintaan dikirim

9
ke web-server, web-server akan memeriksa tipe file yang diminta user. Jika tipe file yang
diminta adalah PHP, maka akan memeriksa isi script dari halaman PHP tersebut. Apabila
dalam file tersebut tidak mengandung script PHP, permintaan user akan langsung ditampilkan
ke browser, namun jika dalam file tersebut mengandung script PHP, maka proses akan
dilanjutkan ke modul PHP sebagai mesin yang menerjemahkan script-script PHP dan
mengolah script tersebut, sehingga dapat dikonversikan ke kode-kode HTML lalu ditampilkan
ke browser user.

2.7 Html

HTML adalah suatu bahasa pemrograman yang digunakan untuk pembuatan halaman
website agar dapat menampilkan berbagai informasi baik tulisan maupun gambar pada sebuah
web browser. Saat ini bahasa HTML masih terus dikembangkan. Hal ini dikarenakan pengguna
internet semakin hari semakin berkembang pesat. Oleh karena itu bahasa HTML harus
ditingkatkan lagi agar bias menciptakan halaman web yang lebih berkualitas. Untuk itulah
dibentuk organisasi yang bertanggung jawab mengembangkan bahasa HTML organisasi ini
bernama W3C. Seiring dengan pesatnya perkembangan zaman HTML pun berkembang dari
masa ke masa. HTML pertama kali diciptakan oleh IBM pada tahun 1980 dengan dibentuknya
suatu program untuk melakukan pemformatan dokumen secara otomatis dari susunan elemen
elemen tag.

2.8 Condegniter

CodeIgniter merupakan sebuah framework yang dibuat dengan menggunakan bahasa

PHP, yang dapat digunakan untuk pengembangan web secara cepat. Adapun framework
sendiri dapat diartikan sebagai suatu struktur pustaka-pustaka, kelas-kelas dan infrastruktur
run-time yang dapat digunakan oleh programmer untuk mengembangkan aplikasi web secara
cepat. Tujuan penggunaan framework adalah untuk mempermudah pengembang web
mengembangkan aplikasi web yang robust secara cepat tanpa kehilangan fleksibilitas. Pola
desain dalam pengembangan web dengan CodeIgniter menggunakan MVC (Models-View
10
Controller). Dimana aplikasi yang dibuat akan dipisahkan antara logika bisnis dan
presentasinya, sehingga memungkinkan web programmer dan web designer bekerja secara
terpisah antara satu dengan yang lain. Agar bisa mengembangkan web dengan CodeIgniter,
maka perlu dipahami terlebih dahulu konsep MVC dan struktur direk

2.9 Uml

Unifield Modeling Language merupakan salah satu metode pemodelan visual yang
digunakan dalam perancangan dan pembuatan sebuah software yang berorientasikan pada
objek. UML merupakan sebuah standar penulisan atau semacam blue print dimana didalamnya
termasuk sebuah bisnis proses, penulisan kelas-kelas dalam sebuah bahasa yang spesifik.
Terdapat beberapa diagram UML yang sering digunakan dalam pengembangan sebuah sistem,
yaitu:

1. Use Case: Merupakan gambaran dari fungsionalitas yang diharapkan dari sebuah
sistem, dan merepresentasikan sebuah interaksi antara aktor dan sistem. Didalam
use case terdapat actor yang merupakan sebuah gambaran entitas dari manuasia
atau sebuah sistem yang melakukan pekerjaan di sistem.

2. Activity Diagram: Merupakan gambaran alir dari aktivitas-aktivitas didalam

sistem yang berjalan.

3. Sequence Diagram: Menggambarkan interaksi antar objek didalam dan di sekitar

sistem yang berupa message yang digambarkan terhadap waktu.

4. Class diagram: Merupakan gambaran struktur dan deskripsi dari class, package,
dan objek yang saling berhubungan sperti diantaranya pewarisan, asosiasi dan
lainnya

11
2.9.1 Use Case Diagram

Use case diagram (usecase) merupakan pemodelan untuk kelakuan sistem informasi
yang akan dibuat. Usecase mendeskripsikan sebuah interaksi antara satu atau lebih aktor
dengan system informasi yang akan dibuat. Secara kasar use case digunakan untuk
mengetahui fungsi apa saja yang ada didalam sebuah system informasi dan siapa saja yang
berhak menggunakan fungsi-fungsi itu. Syarat penamaan pada usecase adalah nama
didefinisikan sesimpel mungkin dan dapat dipahami. Ada dua hal utama pada usecase yaitu
pendefinisian apa yang disebut actor dan usecase.

2.9.2 Activity Diagram

Menurut Tohari dalam Tabrani dan Aghniya (2019:45),mendefinisikan bahwa,

“activity diagram memodelkan workflow proses bisnis dan urutan aktifitas dalam sebuah
proses. Diagram ini sangat mirip dengan flowchartkarena memodelkan workflowdari suatu
aktifitas lainnya atau dari aktifitas ke status”.

Menurut Novitasari (2018), pengertian “activity diagram adalah pemodelan yang

dilakukan pada suatu sistem dan menggambarkan aktivitas sistem berjalan. Activity
diagram di gunakan sebagai penjelelasan aktivitas program tanpa melihat koding atau
tampilan”.

2.9.3 Struktur Navigasi

Menurut Prihatna (2005:51) “Struktur navigasi adalah struktur atau alur suatu program
yang merupakan rancangan hubungan dan rantai kerja dari beberapa area yang berbeda dan
dapat membantu mengorganisasikan seluruh elemen pembuatan website”. Menentukan
struktur navigasi merupakan halaman yang sebaiknya dilakukan sebelum membuat suatu
website. Ada empat macam bentuk dasar dari struktur navigasi yang biasaa ddigunakan
dalam proses pembuatan website yaitu :

12
1. Struktur Navigasi linier

Struktur navigasi linier hanya mempunyai satu rangkaian cerita yang berurut,
yang menampilkan satu demi satu tampilan layar secara berurut menurut urutannya.
Tampilan yang dapat ditampilkan pada struktur jenis ini adalah satu halaman
sebelumnya atau satu halaman sesudahnya, tidak dapat dua halaman sebelumnya
atau dua halaman sesudahnya.

Gambar 2.1 Struktur Navigasi Linier

2. Struktur Navigasi Hirarki

Struktur navigasi hirarki biasa disebut struktur bercabang, merupakan suatu

struktur yang mengandalkan percabangan untuk menampilkan data 16 berdasarkan
kriteria tertentu. Tampilan pada menu satu akan disebut sebagai Master Page
(halaman utama pertama), halaman utama ini mempunyai halaman percabangan
yang disebut Slave Page (halaman pendukung). Jika salah satu halaman pendukung
dipilih atau diaktifkan, maka tampilan tersebut akan bernama Master Page
(halaman utama kedua) dan seterusnya. Pada navigasi ini tidak diperkenalkan
adanya tampilan secara linier.

13
 Gambar 2.2 Struktur Navigasi Hirarki

3. Struktur Navigasi Non-Linier

Struktur navigasi Non-linier merupakan pengembangan dari struktur navigasi

linier. Pada struktur ini diperkenankan membuat navigasi bercabang. Percabangan
pada struktur non linier ini berbeda dengan percabangan pada struktur hirarki.
Karena pada percabangan ini walaupun terdapat percabangan, tetapi tiap-tiap
tampilan mempunyai kedudukan yang sama yaitu tidak ada Master Page dan Slave
Page.

Gambar 2.3 Struktur Navigasi Non-Linier

14
4. Struktur Navigasi Composite (Campuran)

Struktur navigasi bebas yang merupakan gabungan dari ketiga struktur yang
ada. Struktur navigasi ini biasa digunakan dalam Struktur navigasi composite
(campuran) disebut juga struktur pembuatan multimedia karena dapat memberikan
keinteraksian yang lebih tinggi

Gambar 2.4 Struktur Navigasi Composite (Campuran)

15
 BAB 3

PERANCANGAN DAN IMPLEMENTASI

Website untuk sekolah SMK Yapin 02 Setu dibuat untuk mengelola sistem
yang ada disekolah tersebut. Website ini menyediakan 2 bagian yaitu bagian
yang bisa di kelolah oleh administrator dan bagian yang bisa dikelolah oleh
siswa-siswi. Pada bagian Administrator terdapat berbagai fitur-fitur yang sudah
di sediakan dan Administrator bisa menjelajahi Website ini secara online
begitupun dengan siswa-siswi dapat menjelajahi Website ini secara online
untuk mengetahui informasi-informasi yang ada di sekolah tersebut. Adapun
tahapan–tahapan dalam pembuatan Website ini diuraikan pada bab ini.

3.1 Gambaran Umum

Website ini berfungsi menjadi alat yang akan memudahkan dan

mengefisienkan jalannya sistem yang terdapat di SMK Yapin 02 Setu. Dengan
adanya website ini siswa-siswi jadi sangat mudah untuk melihat ttagihan
bulanan serta informasi yang di sampaikan di sekolah Yapin 02 Setu tersebut.
Dan juga siswa-siswi tidak perlu khawatir untuk melakukan transaksi yang akan
di bayarkan karena setelah transaksi yang di lakukan selesai Website akan
secara otomatis mencetak kartu bukti pembayaran yang akaan di tanda tangani
langsung oleh pihak sekolah.. Siswa-siswi yang dapat menggunakan fitur
tersebut hanyalah siswa-siswi yang sudah terdaftar sebagai user dalam website
ini. Dan cara mendaftarnya juga mudah. Hanya dengan cara melakukan
pendaftaran dan mengisi formulir yang diberikan maka pihak sekolah akan
memasukan data tersebut kedalam website ini untuk data password siswa-siswi
perlu untuk request kepada Administrator sekolah tersebut.

16
3.2 Spesifikasi Perangkat Lunak dan Perangkat Keras

Dalam pembuatan website ini, menggunakan perangkat lunak (software)

dan perangkat keras (hardware) dengan rincian hardware yang digunakan yaitu
Intel Core i5, Random Access Memory (RAM) 16.O GB, Video Graphics
Audio (VGA) NVIDIA GEFORCE 820M, dan Harddisk 500 GB. Sedangkan
rincian untuk software yang digunakan yaitu Windows 11 64-Bit Operating
System, XAMPP Control Panel v3.2.2, Visual Studio 1.69.2, Mysql, dan
Mozila Firefox102.0.1 (32-Bit).

3.3 Perancangan Sistem dengan PHP

Untuk memudahkan dalam perancangan website ini, maka digunakan

bahasa pemodelan Hypertext Preprocessor / PHP adalah sebuah bahasa skrip
dengan fungsi umum yang terutama digunakan untuk pengembangan web.

3.3.1 Use Case Diagram

Diagram Use Case akan digunakan untuk menggambarkan secara

sederhana fungsi sistem dan apa saja yang dapat dilakukan didalamnya.
Perancangan yang digunakan pada diagram use case yang terdapat pada
Gambar 3.1 ini menggunakan actor Administrator, actor siswa-siswi.Actor
siswa-siswi memiliki kegiatan register, login, melihat tagihan pembayaran,
dan melakukan pembayaran. Actor Administrator memiliki kegiatan
penerimaan transaksi, memasukan data ke dalam Website, mencetak kartu
tandan bukti dari transaksi yang dilakuakan.

17
 Gambar 3.1 Use Case Diagram

3.3.2 Activity Diagram

Diagram Activity pada Gambar 3.2 memperlihatkan alur yang akan

digunakan pada sistem website SMK Yapin 02 Setu. Alur tersebut
memperlihatkan yaitu, siswa-siswi dan Administrator perlu melakukan
login dengan akun website ini yang bertujuan untuk melakukan transaksi
dari website ini akan memasukkan alamat website dan sistem akan

18
memberikan sebuah tampilan halaman utama website. Pihak dari
Administratorakan mencari data siswa-siswi dengan menggunakan nomor
NIS selanjutnya akan keluar halaman yang berisi tentang data dari siswa-
siswi tersebut. Administrator hanya perlu mengklik bayar pada salah satu
ikon website selanjutnya Cetak kartu bukti pembayaran.

Gambar 3.2 Activity Diagram

19
 3.3.3 Sequence Diagram

Diagram Sequence pada Gambar3.3 alur yang akan diperlihatkan yaitu

dari siswa-siswi akan memasukkan Nomor NIS dan password pada halaman
login. Apabila data yang dimasukkan valid maka siswa-Siswi akan dibawa
menuju halaman Dashboard untuk mengetahui jumlah tagihan. Selanjutnya
siswa-siswi akan melakukan transaksi kepada Administrator dari sekolah
selanjutnya Adminstrator perlu memasukan email dan juga password yang
valid pada halaman login admin, kemudian pada halaman pembayaran
siswa Administrator perlu mencari siswa-siswi berdasarkan NIS dan maka
akan muncul halaman informasi dari siswa-siswi tersebut berserta informasi
tagihan yang harus dibayar, selanjutnya jika sudah melakukan transaksi
kepada siswa-siswi Administrator perlu mencetak kartu tanda bukti dari
transaksi yang sudah dilakukan.

Gambar 3.3 Sequence Diagram

3.4 Struktur Navigasi

Struktur navigasi digunakan untuk menggambarkan alur dari suatu program

Website. Struktur navigasi yang digunakan pada penulisan ini adalah struktur

20
navigasi campuran, karena struktur navigasi campuran merupakan gabungan
dari ketiga struktur navigasi lainnya yaitu linier, non-linier dan hirarki. Struktur
navigasi campuran banyak digunakan dalam pembuatan website karena struktur
ini dapat digunakan dalam pembuatan website sehingga dapat memberikan ke-
interaksian yang lebih tinggi, Gambar 3.4, Gambar 3.5, Gambar 3.6, dan
Gambar 3.7 memperlihatkan struktur navigasi pada website SMK Yapin 02
Setu. Pada gambar–gambar tersebut bisa dilihat bahwa halaman utama
merupakan tampilan yang akan muncul pertama kali pada saat website di buka.
Pada halaman utama tersebut ada beberapa menu yaitu, menu login Admin ,
Cek pembayaran siswa/Siswi, login siswa/Siswi. User hanya dapat memilih
salah satu dari ketiga menu layanan yang tersedia dengan menekan (click) salah
satu Icon pada bagian menubar tersebut. Dan jika di-click maka akan menuju
ke halaman yang bersangkutan.

21
 Gambar 3.4 Struktur Navigasi Halaman Utama / Home

Gambar 3.4 merupakan struktur navigasi dari Home, perbedaan dari struktur
navigasi yang lain adalah halam ini hanya terdapa tiga bagian yang menjadi awal
dari penggunaan website.

22
23
 Gambar 3.5 Struktur Navigasi Login Admin

Gambar 3.5 merupakan struktur navigasi dari Admin, perbedaan

dari struktur navigasi yang lain adalah pada halaman ini hanya dapat
digunakan oleh admin yang mengelola website tersebut. Pada panel user
yang berada di struktur navigasi Admin terdapat fitur untuk merekam semua
kegiatan yang ada di sekolah tersebut..

Gambar 3.6 Struktur Navigasi Cek pembayaran siswa-siswi

24
 Gambar 3.6 merupakan struktur navigasi dari Cek pembayaran
siswa-siswi, perbedaan dari struktur navigasi yang lain adalah halam ini
tidak perlu melakukan proses login karena halaman ini hanya sebagai jalan
pintas untuk mengetahui informasi tagihan siswa-siswi. Dengan menuliskan
nomor NIS Admin sudah bisa mengetahui informasi dari tagihan tersebut.

Gambar 3.7 Struktur Navigasi login siswa-siswi

Gambar 3.7 merupakan struktur navigasi dari login siswa-siswi,

perbedaan dari struktur navigasi yang lain adalah halaman ini dapat di

25
 gunakan oleh siswa-siswi untuk melihat informasi tagihan pembayaran
yang harus di lunaskan.

3.5 Rancangan Storyboard

Storyboard adalah visualisasi ide dari website yang akan dibangun,

sehingga dapat memberikan gambaran dari website yang akan dihasilkan.
Storyboard dapat dikatakan juga visual script yang akan dijadikan outline dari
sebuah proyek, ditampilkan shot by shot yang biasa disebut dengan istilah
scene. Rancangan storyboard ini berfungsi untuk menjelaskan struktur navigasi
dengan lebih rinci. Gambar 3.8 memperlihatkan rancangan storyboard untuk
website SMK Yapin 02 Setu. Bisa dilihat pada Gambar 3.4 terlihat bahwa
halaman utama atau halaman home adalah tampilan yang akan muncul pertama
kali pada saat website dibuka, kemudian pada halaman utama tersebut terdapat
menubar yang terdiri dari menu Login Admin, Cek pembayaran siswa-siswi,
Login siswa-siswi.

Pada menu bar Login Admin tersedia beberapa fitur yang berfungsi untuk
merekam seluruh kegiatan yang ada di sekolah tersebut, pembayaran siswa
untuk mengetahui melakukan transaksi pembayaran tagihan siswa-siswi yang
menghasilkan kartu pembayaran serta stempel dan tanda tangan sebagai bukti
dari transaksi yang telah dilakukan. Selanjutnya siswa-siswi bisa melihat
informasi tagihan di menubar siswa-siswi login.. Untuk halaman cek
pembayaran siswa-siswi adalah menu bar yang bisa dikatakan jalan pintas yang
hanya menampilkan informasi tentang tagihan siswa-siswi. Admin hanya perlu
menuliskan NIS maka system akan otomatis mencari data dari siswa-siswi
tersebut. Berbeda dengan menu bar Login siswa-siswi dirancang untuk

26
kebutuhan siswa-siswi yang berfungsi untuk melihat biaya tagihan yang harus
di bayarkan dan menerima informasi-informasi yang ada di sekolah tersebut.

Gambar 3.8 Storyboard Website Sekolah SMK Yapin 02 setu

3.6 Desain Input dan Output

Pada Website SMK Yapin 02 Setu ini terdiri dari beberapa tampilan,
seperti tampilan halaman utama atau home, tampilan dari masing–masing
menubar yang dipilih, tampilan login, dan tampilan register. Berikut ini
adalah rancangan tampilan input dan output website SMK Yapin 02 Setu.

3.6.1 Rancangan Tampilan Halaman Login admin (Dashboard)

Tampilan Halaman Utama atau Dahboard merupakan tampilan

yang akan muncul pertama kali ketika website ini dibuka. Gambar 3.9
merupakan rancangan tampilan awal untuk website pada SMK 02 Setu.
Terdapat sebuah header dengan sisi kiri terdapat logo sekolah SMK
Yapin 02 Setu, dan dibawahnya terdapat foto dari administrator yang
menangani website. Pada halaman tengah Dahboard 4 (empat) laporan
yang ada di sekolah yaitu penerimaan hari ini, pengeluaran hari ini ,

27
 total penerimaan, dan siswa aktif . di tengah bawah juga terdapat
kalender dan juga informasi tentag kegiatan yang ada di sekolah SMK
Yapin 02 Setu, informasi ini akan tersambung secara otomatis ke
halaman Login siswa-siswi sehingga semua informasi yang di buat oleh
Admin langsung bisa tersampaikan kepada murid-murid SMK Yapin 02
Setu.

Gambar 3.9 Rancangan Tampilan Halaman utama (Dahboard)

3.6.2 Rancangan Tampilan Halaman pembayaran siswa

Pada halaman Sistem pembayaran terdapat sebuah fitur yang berfungsi

merekam kegiatan pembayaran siswa yang dicari berdasarkan NIS/nomor
induk siswa selanjutnya program akan secara otomatis menampilkan
seluruh data tagihan pembayaran siswa-siswi yang terdaftar di sekolah
tersebut. Selanjutnya ketika siswa-siswi melakukan transaksi kepada
Administrator System Website akan mencetak tanda bukti pembayaran yang
telah dilakukan dalam bentuk file pdf lalu di cetak melalui printer dan
informasi tagihan akan tersimpan di halaman output Login siswa-siswi.
Transaksi yang dilakukan langsung terhitung dan tersimpan secara otomatis

28
oleh system yang akan di Rekapitulasi dan di export ke microsoft excell,
transaksi yang sudah di cetakakan tersimpan di output Dahboard yaitu
Penerimaan Hari ini.

Gambar 3.10 Rancangan Pembayaran Siswa

3.6.3 Rancangan Tampilan Halaman Pos Keuangan

Halaman Pos keuangan berfungsi untuk membuat nama pospembayaran

yang nanti akan menjadi tagihan Siswa-Siswi. Administrator perlu
mensetting tarif poskeuangan pada halaman jenis pembayaran. tagihan
menu yang berfungsi untuk mengatur pos administrasi pembayaran
kemudian bagian administrasi akan mencatat data untuk bayaran keperluan
yang di perlukan oleh sekolah dengan dilengkapi nomer urut Nama Pos
yang berfungsi untuk memberi nama bayaran dan keterangan bayaran

29
Halaman juga bisa mengedit aksi dari kegiatan sekolah tersebut atau tambah
jika ingin menambahkan data yang di perlukan oleh sekolah jika jumlah pos
terlalu banyak dan sekolah ingin mencari atau merevisi pos pembayaran
tersebut dalam website ini jugamenyediakan fitur search untuk mencari
Pembayaran pos yang di inginkan.

Gambar 3.11 Rancangan Pos keuangan

3.6.4 Rancangan Tampilan Halaman jenis pembayaran

Dalam Halaman Jenis pembayaran Administrator dapat mengatur

semua tagihan yang akan di buat. Dalam halaman ini terdapat tombol
Tambah yang berfungsi untuk membuat pos dengan cara memasukan pos,
tahun ajaran, dan tipe bayaran yang memiliki 2 (dua) pilihan yatu bayaran
bulanan dan bayaran bebas. jika sudah membuat Pos selanjutnya
administrator perlu setting tarif pada halaman Tarif pembayaran terdapat 3
(tiga) opsi yaitu opsi Berdasarkan kelas, opsi, berdasarkan program
keahlian, opsi berdasarkan siswa. Untuk gambaran halaman dapat dilihat
pada Gambar 3.12 dan Gambar 3.13.

30
Gambar 3.12 Rancangan Halaman Jenis pembayaran

Gambar 3.13 Rancangan Halaman Tarif Pembayaran

31
3.6.5 Rancangan Tampilan Halaman Jurnal umum pengeluaran

Halaman Jurnal umum pengeluaran merupakan menu yang tersedia di

dalamWebsite yang berguna untuk mencatat rekapan data uang yang telah
dikeluarkan oleh pihak sekolah hal ini bertujuan supaya sekolah memiliki
rekapan tentang uang yang telah dikeluarkan oleh sekolah tersebut sehingga
sekolah bisa dapat mengelola uang yang sudah dikeluarkan. Dilengkapi
dengan fitur Tambah, untuk memasukan data dan aksi untuk merevisi data
seperti pada Gambar 3.14 dan 3.15.

Gambar 3.14 Rancangan Tampilan Halaman jurnal umum

pengeluaran

32
 Gambar 3.15 Rancangan Tampilan Halaman aksi jurnal umum
pengeluaran

3.6.6 Rancangan Tampilan Halaman jurnal umum penerimaan

Halaman Jurnal umum penerimaan merupakan menu yang mencatat

uang yang telah diterima oleh pihak sekolah dengan tujuan agar systembisa
mencetak output ke menu bar Dashboard agar sekolah bisa menegetahui
jumlah uang yang telah di terima. Terdapat fitur Tambah unuk menginput
data dan aksi untuk merevisi data yang sudah dirancang oleh website agar
terlihat rapi dan bisa membantu pihak sekolah untuk mengatur penerimaan
uangatau transaksi yang telah dilakukan seperti Gambar 3.16 dan 3.17.

33
 Gambar 3.16 Rancangan Tampilan Halaman jurnal umum

Gambar 3.17 Rancangan Tampilan Halaman jurnal umum

penerimaan aksi

3.6.7 Rancangan Tampilan Halaman manajemen data Tahun Ajaran

Pada halaman manajemen data Tahun ajaran merupakan menu yang

bertujuan membuat Tahun ajaran yang berlaku dengan di lengkapi tombo
Tambah untuk memasukan input data dan tombol Aksi yang bertujuan untuk
merevisi data yang sudah dibuat seperti Gambar 3.18 dan 3.19.

34
 Gambar 3.18 Rancangan Tampilan Halaman manajemen data
Tahun Ajaran

Gambar 3.19 Rancangan Tampilan Halaman manajemen data Tahun

Ajaran (Aksi)

3.6.8 Rancangan Tampilan Halaman manajemen data kelas

Halaman manajemen data kelas adalah salah satu Halaman yang

berfungsi agar Administrator bisa membuat kelas yang ada di sekolah
tersebut dengan dilengkapi tombol tambah dan aksi pada halaman
Administrator dapat memasukan input data dan merevisi kelas yang sudah
di tentukan stiap kelas memiliki ID kelasnya masing-masing yang berfungsi
untuk mendaftarkan kode pada microsoft excell yang akan dipakai untuk
mengimport siswa-siswi seperti Gambar 3.20 dan 3.21.

35
 Gambar 3.20 Rancangan Tampilan Halaman manajemen data kelas

Gambar 3.21 Rancangan Tampilan Halaman manajemen data kelas

(AKSI)

3.6.9 Rancangan Tampilan Halaman manajemen data Program

Keahlian

Halaman Manjemen data program keahlian merupakan suatu menu

yang berfungsi untu menyimpan program keahlian atau bidang jurusan yang
mereka pilih. Dalam website menyediakan beberapa program keahlian atau
jurusan yang ada di sekolah SMK Yapin 02 Setu data dari siswa-siswi akan

36
tersimpan sesuai program keahlian nya masing-masing. Jadi dalam setiap
program keahlian berbeda pula tagihan pembayaranya pada Halaman
program keahlian terdapat ID program keahlian yang berfungsi untuk
menyambungkan otomatis saat import pendaftaran siswa-siswi dalam
bentuk Excel. Halaman yang dilengkapi tombol tambah dan aksi ini dapat
memasukan data input dan merevisi data yang ingin diubah untuk halaman
program keahlian dapat di lihat pada Gambar 3.22 dan 3.23

Gambar 3.22 Rancangan Tampilan Halaman manajemen data Program

keahlian

Gambar 3.23 Rancangan Tampilan Halaman manajemen data Program

keahlian (Aksi)

37
3.6.10 Rancangan Tampilan Halaman manajemen data siswa

Pada halaman manajemen data siswa tersedia data–data siswa-siswi

yang berada disekolah tersebut pada halaman ini terdapat 7 ( tujuh ) kolom
yaitu No, Nis, Nama, Kelas, Nama ibu kandung, status, Aksi semua itu
berfungsiuntuk menampilkan data dari siswa-siswi tersebut. Dalam kolom
No berfungsi untuk mengambil nomer urut siswa-siswi yang terdaftar, Nis
adalah kolom untuk nomer induk siswa yang setiap siswa-siswi pasti
mempunyai nomer tersebut, kolom Nama berfungsi untuk menampilkan
nama dari siswa-siswi yang berada di sekolah Yapin 02 Setu kolom Kelas
untuk menampilkan kelas yang urut berdasarkan dari nama siswa-siswi
yang berada disekolah tersebut Nama Ibu Kandung merupakan data
keluarga yang dimiliki oleh siswa-siswi tersebut. sehingga jika siswa-siswi
tersebut menghadapi sebuah masalah pihak sekolah dapat menghubungi ibu
kandung dari keluarga tersebut. Bagian Status merupakan data siswa-siswi
dalam perihal aktif atau tidak aktif siswa-siswi tersebut. dan Aksi berfungsi
untuk meresset password, melihat data, edit biodata, dan cetak kartu
pembayaran. Untu melihat manajemen data siswa bisa dilihat pada Gambar
3.24 dan 3.25.

Gambar 3.24 Rancangan Tampilan Halaman manajemen data

Siswa.

38
 Gambar 3.25 Rancangan Tampilan Halaman manajemen data
Siswa (Aksi).

3.6.11 Rancangan Tampilan Halaman manajemen data kelulusan

Pada Halaman manajemen data kelulusan merupakan menu yang

berfungsi untuk mencetak setiap siswa-siswi yang akan lulus atau tidak dari
sekolah tersebut. Dan menu ini juga dapat melakukan pencarian terhadap
siswa-siswi nya melalui menu pilih kelas yang telah di sediakan dan jika
sudah maka akan tampil siswa yang ada di sekolah tersebut maka dengan
begitu website dapat menangani kelulusa siswa-siswi dengan baik. Halaman
manajemen data kelulusan dapat dilihat pada Gambar 3.26.

39
 Gambar 3.26 Rancangan Tampilan Halaman manajemen data
Kelulusan.

3.6.12 Rancangan Tampilan Halaman manajemen data kenaikan kelas

Pada Halaman manajemen data kenaikan kelas bertujuan untuk

menentukan kenaikan kelas siswa-siswi setelah lulus dari kelas tahap
sebelumnya. Caranya cukup mudah Administrator hanya perlu menekan
pilih kelas dan selanjutnya akan keluar data siswa-siswi yang akan naik
kelas dengan melakukan itu siswa-siswi dapat menemukan kelas di kelas
tahap yang akan ditempuh. Selanjutnya masukan data dari kelas sebelumnya
maka website sekolah akan secara otomatis menemukan data siswa-siswi
yang dipilih dan website akan memperingati pihak sekolah tentang
Warning!... ! Jika ada siswa yang telah dibuatkan tagihan dan dipindah
kelasnya melalui halaman ini, maka tagihan tetap ada di kelas sebelumnya!.
Peringatan ini bertujuan memberitahu Administrator jika siswa-siswi sudah
pindah atau naik kelas maka biaya yang belum terbayarkan harus tetap
dibayarkan oleh siswa-siswi ke pihak sekolah. Halaman manajemen data
kenaikan kelas dapat dilihat pada Gambar 3.27.

40
 Gambar 3.27 Rancangan Tampilan Halaman manajemen data
Kenaikan kelas.

3.6.13 Rancangan Tampilan Halaman Laporan keuangan

Pada Halaman laporan keuangan terdapat 2 ( Dua ) Kolom yang

bertujuan untuk menentukan tanggal awal dan akhir dan data laporan
keuangan akan di ctak menjadi file Excel. Laporan yang dicetak adalah
laporan data secara menyeluruh Seperti yang terdapat pada Gambar 3.28
dan 3.29.

41
 Gambar 3.28 Rancangan Tampilan Halaman Laporan
keuangan

Gambar 3.29 Rancangan Tampilan Halaman Laporan keuangan Excell

3.6.14 Rancangan Tampilan Halaman laporan rekapitulasi

Halaman laporan rekapitulasi berfungsi untuk merekap semua transaksi

yang telah dilakukan oleh siswa-siswi dan administrator system akan secara
otomatis menyimpan data dari tagihan yang sudah di bayarkan dan akan
ditampung ke halaman laporan rekapitulasi. Pada halaman laporan
rekapitulasi berfungsi untuk menemukan rekapan Administrator perlu
mengatur Tahun ajaran dan memilih kelas serta program keahlian
selanjutnya akan terdapat tabel rekapan dengan bulan dan tagihan masing-
masing, hasil rekapan ini bisa di cetak dalam bentuk excel dengan menekan
tombol export excell maka system akan secara otomatis mencetak dalam
bentuk excell.

42
 Gambar 3.30 Rancangan Tampilan Halaman Laporan Rekapitulasi.

Gambar 3.31 Rancangan Tampilan Halaman Laporan Rekapitulasi (

Excell )

3.6.15 Rancangan Tampilan Halaman informasi

Halaman informasi adalah tempat untuk mengumumkan informasi

yang terdapat di sekolah Yapin 02 Setu pada halaman ini terdapat tombol
tambah untuk membuat input informasi baru dan aksi untuk merevisi bagian
yang salah. Informasi yang sudah diumumkan akan langsung tersambung
pada halaman login siswa-siswi informasi yang telah di terbitkan dapat
langsung di ketahui oleh siswa-siswi SMK Yapin 02 Setu .Halam informasi
bisa dilihat pada Gambar 3.32

43
 Gambar 3.32 Rancangan Tampilan Halaman Informasi

3.6.16 Rancangan Tampilan Halaman pengaturan sekolah

Pada halaman pengaturan sekolah Administrator perlu memasukan

semua data sekolah SMK Yapin 02 Setu pada halaman pengaturan sekolah
terdapat beberapa kolom yang harus di disi dengan benar kolom tersebut
yaitu Tingkat Sekolah, Nama Sekolah, Alamat Sekolah, Nama Kecamatan,
Nama Kota Kabupaten, Nomor Telepon, Dan Logo Sekolah Halaman pada
pengaturan sekolah dapat dilihat pada Gambar 3.33.

44
 Gambar 3.33 Rancangan Tampilan Halaman pengaturan sekolah

3.6.17 Rancangan Tampilan Halaman pengaturan Bulan

Pada pengaturan bulan Administrator dapat membuat catatan bulan

dari Awal Bulan sampai Akhir Bulan dengan dilengkapi tiga kolom yaitu
No, Nama Bulan, Aksi. yang memiliki fungsi masing masing sesuai dengan
kebutuhan sekolah, Halaman pengaturan sekolah dapat dilihat pada Gambar
3.34

Gambar 3.34 Rancangan Tampilan Halaman pengaturan bulan.

3.6.18 Rancangan Tampilan Halaman manajemen pengguna

Pada halaman manajemen pengguna berfungsi untuk mendaftarkan

Admin untuk mengakses Website Administrator hanya perlu klik tombol
tambah lalu membuatkan emai website , setting password , danmemilih hak
akses yang akan di berikan . Halaman manajemen pengguna dapat dilihat
pada Gambar 3.35.

45
Gambar 3.35 Rancangan Tampilan Halaman manajemen pengguna

3.6.19 Rancangan Tampilan Halaman pemeliharaan

Pemeliharaan adalah menu yang bertujuan untuk memback up data

menjadi file rar yang di dalamnya terdapat file database mysql yang nanti
bisa di import lagi ke phpmyadmin. Untuk di menyimpan data-data sekolah
secra aman kemudian akan digunakan lagi. Halaman pemeliharaan dapat
dilihat pada Gambar 3.36.

Gambar 3.36 Rancangan Tampilan Halaman pemeliharaan

46
3.7 Instalasi Perangkat Lunak

Beberapa perangkat lunak yang diperlukan untuk membuat website untuk

SMK Yapin 02 Setu ini yaitu XAMPP, Visual Code Text Editor dan Browser
Mozila Firefox.

3.7.1 Instalasi XAMPP

Pembuatan sebuah website awalnya hanya berupa sebuah local yang

terdapat pada komputer atau laptop si pemprogram. Maka dari itu, kita perlu
menggunakan host untuk local yaitu menggunakan XAMPP. Sehingga
sebelum melakukan pemrograman perlu melakukan instalasi XAMPP
terlebih dahulu. Penulis menggunakan XAMPP versi 3.2.2. XAMPP dapat
di unduh secara gratis di situs resminya https://www.apachefriends.org/
download.htmlpada Gambar 3.37. Jika proses unduh telah selesai
dilakukan, file eksekusinya harus kita jalankan dengan cara click double
untuk memulai instalasi XAMPP. Disini penulis menggunakan XAMPP
dan diinstalasi di drive C:\ .

Gambar 3.37 Unduhan XAMPP

47
3.7.2 Instalasi Visual Studio

Selanjutnya yang perlu di-instalasi adalah Visual studio. Visual Studio

adalah sebuah Text Editor yang diperlukan untuk membuat dan
mengembangkan website. Visual Studio dapat diunduh di situs resminya
https://visualstudio.microsoft.com/ terlihat pada Gambar 3.38. Jika proses
unduh telah selesai dilakukan, file eksekusinya dijalankan dengan cara click
double untuk memulai instalasi visual studio.

Gambar 3.38 Unduhan Visual Studio

3.7.3 Instalasi Mozila Firefox

Selanjutnya perlu dilakukan instalasi browser sebagai media untuk

menjalankan website tersebut. Browser Mozila Firefox tersebut dapat
diunduh secara gratis di situs website resminya melalui link berikut
https://www.mozilla.org/id/firefox/new/ pada Gambar 3.39. Jika proses
unduh telah selesai dilakukan, file eksekusinya dijalankan dengan cara click
double untuk memulai instalasi Mozila Firefox

48
 Gambar 3.39 Unduhan Browser Mozila Firefox

3.7.4 Instalasi Mysql

Selanjutnya dilakukan instalasi Mysql untuk membantu programmer

membuat fitur-fitur tampilan pada website tersebut dan juga tampilan
website bisa menjadi responsif. Mysql dapat diunduh di situs resminya
https://downloads.digitaltrends.com/mysql-com/windows terlihat pada
Gambar 3.40.

49
 Gambar 3.40 Unduhan Mysql

3.7.5 Membuat database mysql

Selanjutnya dalam pembuatan program perlu database yang harus di

sediakan disini pemrogram membuat database menggunakan MYSQL
untuk di import ke XAMPP. pembuatan database mysql dapat dilihat pada
Gambar 3.41

50
 Gambar 3.41 pembuatan database Mysql

3.8 Perancangan Database

Ada dua puluh satu tabel dari database website pada SMK Yapin 02 Setu
yang digunakan, yaitu tabel bebas, tabel bebas_pay, tabel bulan, ci_sessions,
tabel class, tabel debit, tabel holiday, information , tabel kredit, tabel letter, tabel
letter, tabel logs, tabel log_trx , tabel majors, tabel month, tabelpayment, tabel
period, tabel pos, tabel setting, tabel student, Tabel users, tabel user_roles.

3.8.1 Struktur Database Tabel pada Database

Pemrogram membuat beberapa struktur database yang berguna untuk
membuat fitur-fitur yang ada pada website agar Administrator dapat dengan
mudah menggunakan website ini. Berikut struktur database pada program :

51
Nama Tabel Rows Type Collation Size
bebas 0 InnoDB latin1_swedish_c 48 kb
bebas_pay 0 InnoDB latin1_swedish_c 48 kb
bulan 0 InnoDB latin1_swedish_c 80 kb
ci_sessions 0 InnoDB utf8_general_ci 32 kb
class 1 InnoDB latin1_swedish_ci 16 kb
debit 0 InnoDB latin1_swedish_ci 32 kb
holiday 0 InnoDB latin1_swedish_ci 16 kb
information 0 InnoDB latin1_swedish_ci 32 kb
kredit 0 InnoDB latin1_swedish_ci 32 kb
letter 0 InnoDB latin1_swedish_ci 16 kb
logs 1 InnoDB latin1_swedish_ci 32 kb
log_trx 0 InnoDB latin1_swedish_ci 64 kb
majors 0 InnoDB latin1_swedish_ci 16 kb
month 12 InnoDB latin1_swedish_ci 16 kb
payment 0 InnoDB latin1_swedish_ci 48 kb
period 1 InnoDB latin1_swedish_ci 16 kb
pos 0 InnoDB latin1_swedish_ci 16 kb
setting 10 InnoDB latin1_swedish_ci 16 kb
student 0 InnoDB latin1_swedish_ci 48 kb
users 1 InnoDB latin1_swedish_ci 32 kb
user_roles 2 InnoDB utf8_general_ci 16 kb

Tabel 3.1 Databse mysql

Pada structur pengoperasian Website terdapat Database yang datanya

diambil dari tabel diatas.

52
 3.8.2 Struktur Database Tabel Siswa

Tabel siswa berfungsi untuk mencakup semua data yang di perlukan

pada siswa. Selanjutnya data ini akan dikelola oleh Administrator untuk di
simpan di dalam Website.

Nama Type Null deafault

student_id int(11) No None
student_nis varchar(45) Yes NULL
student_nisn varchar(45) Yes NULL
student_password varchar(100) Yes NULL
student_full_name varchar(255) Yes NULL
student_gender enum('L', 'P') Yes NULL
student_born_place varchar(45) Yes NULL
student_born_date date Yes NULL
student_img student_img Yes NULL
student_phone varchar(45) Yes NULL
student_hobby varchar(100) Yes NULL
student_address text Yes NULL
student_name_of_mother varchar(255) Yes NULL
student_name_of_father varchar(255) Yes NULL
student_parent_phone varchar(45) Yes NULL
class_class_id int(11) Yes NULL
majors_majors_id int(11) Yes NULL
student_status tinyint(1) Yes 1
student_input_date timestamp Yes NULL
student_last_update timestamp Yes NULL
Tabel 3.2 Database student

53
3.9 Pembuatan Database

Dalam pembuatan database, pemrogram perlu mengggunakan XAMPP

versi 3.3.2 sebagai server offline dimana pada software ini sudah terdapat
MySQL sebagai DBMS dan berbentuk Graphical User Interface (GUI) yang
disebut dengan PHPMyAdmin. Setelah perangkat lunak XAMPP terpasang
pada komputer, hal yang perlu dilakukan sekarang adalah membuka fasilitas
PHPMyAdmin pada browser caranya yaitu dengan menuliskan alamat
http://localhost/phpmyadmin pada kolom URL di browser yang digunakan,
kemudian akan muncul tampilan awal (homepage) PHPMyAdmin. Gambar 3.40
berikut ini merupakan tampilan awalnya:

Gambar 3.42 Tampilan Awal PHPMyAdmin

Kemudian pembuatan basis data sesuai dengan apa yang dengan di

rancang sebelumnya, nama basis data yang dibuat adalah ananpi. Gambar
3.42 merupakan tampilan untuk membuat sebuah database baru.

54
 Gambar 3.43 Tampilan Membuat Database Baru

Selanjutnya membuat database barudengan nama da_ananpi untuk

menyimpan semua data base yang sudah dibuat dan di coding dalam bentuk
file mysql.

Gambar 3.44 menubar import database Mysql anansppsl.

Dalam phpmyadmind kita perlu mengklik menubar import untuk

mengimport file mysql yang sudah dibuat

Gambar 3.45 Browse import database Mysql anansppsl.

Pada tahapan ini database yang sudah di buat perlu mengimport file
database mysql yang sudah dibuat oleh pemrogram.

55
 Gambar 3.46 Go import database Mysql anansppsl.

Jika sudah menemukan file mysql maka kita perlu tekan Go untuk
memunculkan database yang tersedia.

56
3.9.1 Pemanggilan Databse Mysql ke Phpmyadmin
Adapun struktur database yang dimiliki program adalah seperti yang
terlihat dibawah ini .

Gambar 3.47 Tampilan Database mysql yang telah di import ke

phpmyadmin

3.9.2 Pembuatan DatabaseBebas pembayaran

Adapun struktur Database yang dimiliki tabel bebas adalah tabel yang
digunakan untuk pembayaran atau tagihan yang akan di informasikan
kepada siswa-siswi dan Gambar 3.48 adalah tampilan pembuatan tabel
Bebas.

57
 Gambar 3.48 Tampilan Membuat DatabaseTabel Bebas

3.9.3 Pembuatan49 Database Bebas pay

Adapun struktur Database yang dimiliki tabel bebas_pay digunakan
untuk mencetak tagihan transaksi sebagai barang bukti telah melakukan
pembayaran dan Gambar 3.49 adalah tampilan pembuatan tabel Slider.

Gambar 3.49 Tampilan Membuat Database Tabel bebas_pay

3.9.4 Pembuatan Database Bulan

Adapun struktur Database yang berfungsi untuk menampilkan
pengaturan bulan dan tanggal menahun dan menampilkan bulan dan tanggal
pada percetakandan Gambar 3.50 adalah tampilan pembuatan tabel bulan.

Gambar 3.50 Tampilan Membuat Database Tabel bulat

58
3.9.5 Pembuatan Database pada Tabel CI_session

Adapun struktur Database Ci_session yang berfungsi untuk

menyambungkan localhost melalui ip addres folder XAMPP yang sudah di
buat agar bisa dibuka di mozila dan Gambar 3.51 adalah tampilan
pembuatan tabel ci_session.

Gambar 3.51 Tampilan Membuat Database pada Tabel Ci_sessions

3.9.6 Pembuatan Database pada Tabel Class

Adapun struktur Database yang dimiliki tabel Class berfungsi untuk

memberikan nama kelas dan id kelas di dalam dan Gambar 3.52 adalah
tampilan pembuatan tabel kelas.

Gambar 3.52 Tampilan Membuat Database Tabel Class

3.9.7 PembuatanDatabase Pada Tabel Debit

Adapun struktur Database yang dimiliki tabel Debit berfungsi mencatat

kekurangan uang yan nanti akan di cetak jurnal umum pengeluaran dan
Gambar 3.53 adalah tampilan pembuatan tabel Debit.

59
 Gambar 3.53 Tampilan Membuat Database Tabel Debit

3.9.8 Pembuatan DatabasePada Holiday

Adapun struktur Database yang dimiliki tabel Holiday berfungsi untuk
mencatat agenda pada kalender pada halaman Dashboard dan Gambar 3.54
adalah tampilan pembuatan tabel Holiday.

Gambar 3.54 Tampilan Membuat Database pada Tabel Holiday.

3.9.9 Pembuatan Database padaTabel information

Adapun struktur Database yang dimiliki tabel Information berfungsi
untuk membuat informasi yang akan diselenggarakan dan Gambar 3.55
adalah tampilan pembuatan tabel information.

60
 Gambar 3.55 Tampilan Membuat Database Tabel information

3.9.10 Pembuatan Database pada Tabel Kredit

Adapun struktur Database yang dimiliki tabel kredit berfungsi untuk

membuat laporan uang penambahan dan akan dicetak di halaman
Dashboard dan Gambar 3.56 adalah tampilan pembuatan tabel Kredit.

Gambar 3.56 Tampilan Membuat Database Tabel Kredit

3.9.11 Pembuatan Tabel studentPada Letter

Adapun struktur Database yang dimiliki tabel Letter berfungsi untuk
memberi nama , nomer transaksi , bulan pembayaran , tahun pembayaran
yang akan di tambilkan pada percetakan PDF dan Gambar 3.57 adalah
tampilan pembuatan tabel student.

61
 Gambar 3.57 Tampilan Membuat Database pada Tabel Letter

3.9.12 Pembuatan Database pada Tabel Log

Adapun struktur Database yang dimiliki tabel Log berfungsi untuk

membuat tahun ajaran Gambar 3.58 adalah tampilan pembuatan tabel
student.

Gambar 3.58 Tampilan Membuat Database pada Tabel Log

62
3.9.13 Pembuatan Database pada Tabel Month
Adapun struktur Database yang dimiliki tabel month berfungsi untuk
membuat bulan sesuai dengan tahun ajaran dan Gambar 3.59 adalah
tampilan pembuatan tabel bulan.

Gambar 3.59 Tampilan Membuat Tabel Majors

3.9.14 Pembuatan Database padaTabel payment

Adapun struktur Database yang dimiliki tabel payment berfungsi untuk

memasukan transaksi bayar berdasarkan bulan pada halaman pembayaran
dan Gambar 3.60 adalah tampilan pembuatan tabel Payment.

Gambar 3.60 Tampilan Membuat Database pada Tabel Payment

63
3.9.15 Pembuatan Database pada Tabel period

Adapun struktur Database yang dimiliki tabel period berfungsi untuk

memasukan tanggal awal dan akhir dalam sistem pembelajaran dan Gambar
3.61 adalah tampilan pembuatan tabel Period.

Gambar 3.61 Tampilan Membuat Database pada Tabel Period

3.9.16 Pembuatan Database pada Tabel pos

Adapun struktur Database yang dimiliki tabel pos berfungsi untuk

membuat pos pembayaran dan Gambar 3.62 adalah tampilan pembuatan
tabel Period.

Gambar 3.62 Tampilan Membuat Database pada Tabel Pos

3.9.17 Pembuatan Database pada Tabel setting

Adapun struktur Database yang dimiliki tabel setting berfungsi untuk

membuat settingan pada website dan Gambar 3.63 adalah tampilan
pembuatan tabel Period.

64
 Gambar 3.63 Tampilan Membuat Databese pada Tabel Pos

3.9.18 Pembuatan Database pada Tabel student

Adapun struktur Database yang dimiliki tabel student berfungsi untuk

memasukan data-data siswa-siswi dan Gambar 3.64 adalah tampilan
pembuatan tabel Student.

Gambar 3.64 Tampilan Membuat Database pada Tabel student

65
3.9.19 Pembuatan Database pada Tabel user

Adapun struktur Database yang dimiliki tabel user_roles berfungsi

untuk membuat akun admin dan Gambar 3.65 adalah tampilan pembuatan
tabel user.

Gambar 3.65 Tampilan Membuat Database pada Tabel user

3.9.20 Pembuatan Database Tabel user_roles

Adapun struktur Database yang dimiliki tabel user_roles berfungsi

untuk dengan hak akses administrator atau super user admin serta
memasukan data-data admin membuat akun dan Gambar 3.66 adalah
tampilan pembuatan tabel user

Gambar 3.66 Tampilan Membuat Tabel user_roles

66
3.10 Scripting

Setelah melakukan perancangan struktur navigasi, storyboard, desain input

dan output, instalasi perangkat lunak hingga perancangan database maka
langkah selanjutnya adalah pembuatan website. Langkah awal dari
pembuatannya adalah melakukan koneksi ke database.

3.10.1 Melakukan Koneksi Website Dengan Database

Untuk mengkoneksikan website dengan database maka harus dibuat

config pada kodingan seperti yang terlihat pada Gambar 3.67,pada potongan
kodingan tersebut localhost sebagai Hostname dari website, yang berarti
pada saat website dibuka user harus mengawali kata local host di klom url
dengan username root pada database, dengan password kosong karena
password pada database belum di atur, dan sppkuy sebagai database
website.

67
Gambar 3.67 Potongan Kodingan config Website dengan Database

Dan potongan kodingan pada Gambar 3.67, dapat di panggil

pada halaman–halaman lainnya yang terdapat pada website tersebut.
Dengan memanggil file yang terdapat potongan kodingan tersebut,
seperti yang terlihat pada Gambar 3.67.

68
3.10.2 Arc.php

Gambar 3.68 Arc.php

arc.php adalah kodingan yang berfungsi untuk menyimpan nama

sekolah yang muncul di dasboard tampilan awal pada website sekolah nanti
untuk menampilkan nama pada sekolah nanti kita perlu menuliskannya
dibaris ke 21 dan di baris ke23 untuk menambahkan nama penjang sekolah
di bagian halaman login.

69
3.10.3 database.php

Gambar 3.69 database.php

Pada bagian database.php berfungsi untuk mwndaftarkan hasil import

data mysql yang sudah dibuat oleh administrator di baris ke78 terdapat
hostname yang harus di masukan karena website ini memakai hostname
bawaan dari xampp dan bukan domain dari website maka kita tulis
hostname nya adalah localhost pada baris ke81 ada perintah database yang
harus masukan file dari database di phpmyadmin yang bernama db_sppkuy
maka jika sudah dimasukan otomatis akan terbaca database db_sppkuy.

70
3.10.4 Login.php

Gambar 3.70 login.php

Login.php berfungsi untuk menyetting tampilan pada halaman pertama

website lalu akses login admin dari website sekolah tersebut jika admin
salah menulis email atau passwor maka akan otomatis akan terdeteksidan
mengeluarkan informasi bahwa password atau email salah maka admin
harus mengulanginya lagi.

71
 3.10.5 Sidebar.php

Gambar 3.71 sidebar.php

Sidebar.php ini adalah from yang menyediakan menu-menu yang ada

di dashboad administrator seidebar.php ini adalah tempat menyimpan
keperluan yang dibutuhkan admin untuk mengelola sistem sekolah di
bagian sidebar.php terdapat 10 bagian yaitu :

1. Dashboard yang merupakan tampilan awal dari website sekolah ini didalam
dashboard terdapat laporan keuangan, keaktifan siswa-siswi, kalender , dan
juga informasi dari sekolahan tersebut.

72
2. pembayaran siswa adalah menu yang akan di gunakan untuk transaksi
pembayaran sekolah antara siswa-siswi dan guru, menu pembayaran siswa-
siswi juga akan otomatis menyimpan data siswa-siswi yang sudah melunasi
pembayaran di sekolah tersebut.
3. keuangan menu ini berfungsi untuk mengatur sistem keuangan yang ada di
sekolah tersebut mulai dari pos keuangan dan jenis pembayaran.
4. jurnal umum merupakan fungsi untuk merekam semua uang yang di dapat
mulai dari pengeluaran hingga penerimaan uang.
5. manajemen data menu ini adalah menu yang merekam dari semua kegiatan
yang ada di sekolahan tersebut seperti tahun ajaran , kelas , program
keahlian , siswa , kelulusan , kenaikan kelas semua itu akan di tamoung dan
di masukan ke dalam menu majemen data.
6. laporan adalah menu yang berfungsi untuk merekam laporan keuangan
sekolah dan rekapitulasi sekolah
7. informasi menu ini berfungsi untuk mengumpulkan informasi-informasi
yang akan diselenggarakan oleh sekolah tersebut yang nantinya akan
muncul di halaman dashboard.
8. Pengaturan menu yang akan mengatur data dari sekolah maupun bulan
9. manajemen pengguna adalah menu yang berfungsi untuk menyimpan data
user atau admin dari sekolah tersebut.
10. serta pemeliharaan adalah hasil dari rekapitulasi sekolahan dalam bentuk
mysql yang nantinya bisa disimpan dan di perbarui.

73
3.10.6 LoginStudent.php

Gambar 3.72 login student.php

Login student.php adalah kodingan yang berfungsi untuk menampilkan

layar login untuk akses masuk siswa dari sekolah tersebut yang nantinya
akan meminta NIS dan juga pasword dari siswa-siswi sekolah tersebutjika
nanti NIS dan juga password salah maka akan secara otomatis
memerintahkan siswa-siswi untuk memasukan ulang.

74
3.10.7 Portal.php

Gambar 3.73 portal.php

Lalu data tersebut akan ditampilkan pada tabel dengan cara

menampilkan string yang telah digunakan untuk menangkap data.

3.10.8 Tabel Uji Coba

Uji coba dilakukan untuk memastikan apakah semua script telah

berjalan dengan yang telah direncanakan dan dirancang seperti sebelumnya
atau belum. Dan juga uji coba dilakukan agar fitur-fitur yang terdapat pada
website apakah sudah dapat membantu para pengguna atau belum. Uji coba
dilakukan dengan memeriksa semua fungsi dari website.

75
 Tabel 3.3 Tabel uji coba

Evaluasi Setuju Tidak Setuju

Admin dapat
menjelajahi halaman
admin
Admin dapat
mengelola seluruh
rekam kegiatan
sekolah
Admin dapat
menjelajahi halaman
siswa
Siswa dapat
menjelajahi halaman
siswa
Siswa dapat
menjelajahi halaman
Admin
Siswa dapat
mengelola seluruh
rekam kegiatan
sekolah
Website bisa
menampilkan laporan
dari keseluruhan
Website dapat
menampilkan
kalender akademik

76
Website dapat
menampilkan
Laporan Keuangan
Informasi yang
dibuat dapat dilihat
oleh siswa
Website bisa
mengatur
pembayaran siswa
secara bulanan dan
bebas
Website dapat
melakukan transaksi
dari tagihan
Website bisa
menghitung
keuangan dalam
sistem kalkulator
Website dapat
mencetak bukti
transaksi
Website bisa
membuat pos
keuangan
Website dapat
mensetting
pembayaran
berdasarkan pos
keuangan

77
Website dapat
membuat jurnal
umum pengeluaran
dan pemasukan
Website dapat
mensetting tahu
ajaran
Website dapat
membuat kelas
Website dapat
membuat program
keahlian
Website dapat
membuat data siswa
Website dapat
mengupload data
siswa berdasarkan
excell
Website dapat
mencata kelulusan
siswa
Website dapat
mencatat data
kelulusan siswa
Website dapat
mencatat laporan dan
rekapitulasi melalui
excell

78
 Website dapat
membuat informasi
yang akan
diselenggarakan di
sekolah
Website dapat
mengatur data
sekolah
Website dapat
mengatur bulan

Website dapat
membuat data admin

Website dapat
melakukan back up
data melalui data
mysql

Tabel 3.3 uji coba

Pada tabel uji coba3.3 dapat disimpulkan bahwa website sekolah sudah berhasil
dan siap digunakan oleh pihak sekolah.

79
 BAB 4

PENUTUP

4.1 Kesimpulan

Dari hasil analisis dan pembahasan website SMK Yapin 02 Setu yang dibuat
23 Maret 2022 – 16 september 2022 ini telah berhasil dibuat. Website ini membantu
mengoptimalkan proses kerja pihak sekolah yang sebelumnya dengan cara manual,
sehingga dengan menggunakan aplikasi webiste ini membuat pekerjaan menjadi
efektif dan efisien. Sekolah SMK Yapin 02 Setu telah menggunakan website
sebagai media penyimpanan data atau rekapanyang memudahkan pihak sekolah
dalam melakukan proses kerja. Dengan adanya website SMK Yapin 02 Setu guru
dan staff dapat memberikan informasi serta membuat Tagihan pembayaran siswa.
Selain itu Siswa-Siswi dapat melihat informasi tagihan yang dimilikinya tanpa
datang langsung ke sekolah SMK Yapin 02 Setu. Berdasarkan hasil uji coba kepada
User/Pengguna, dapat disimpulkan jika website ini memberi kemudahan bagi
pengguna dalam mengelola pekerjaan yang ada di sekolah SMK Yapin 02 Setu.

Berdasarkan hasil uji coba yang dilakukan oleh User dapat disimpulkan jika
website ini memberi kemudahan bagi pengguna dalam mengelola semua aktivitas
yang ada di sekolah serta memudahkan pengguna untuk melakukan Backup data
yang aman. Berdasarkan hasil uji coba yang dilakukan pengguna melalui media
web server Xampp yang digunakan oleh pengguna, dapat disimpulkan jika website
dapat berjalan dengan baik pada browser google chrome, dan firefox. Berdasarkan
Hasil pengujian menggunakan metode kuisioner angka keberhasilan aplikasi untuk
digunakan sebesar :
1. Admin dapat menjelajahi halaman admin (100%)
2. Admin dapat mengelola seluruh rekam kegiatan sekolah ? (81,8%)
3. Admin dapat menjelajahi halaman siswa ? (90,9%)
4. Siswa dapat menjelajahi halaman siswa ? (90,9%)

80
5. Siswa dapat menjelajahi halaman Admin ? (72,7%)
6. Siswa dapat mengelola seluruh rekam kegiatan sekolah ? ( 81,8%)
7. Siswa dapat mengelola seluruh rekam kegiatan sekolah ? (81,8%)
8. Website bisa menampilkan laporan dari keseluruhan ? (81,8%)
9. Website dapat menampilkan kalender akademik ? (100%)
10. Website dapat menampilkan Laporan Keuangan ? (100%)
11. Informasi yang dibuat dapat dilihat oleh siswa ? (81,8%)
12. Website bisa mengatur pembayaran siswa secara bulanan dan bebas ?
(100%)
13. Website dapat melakukan transaksi dari tagihan ? ( 90,9%)
14. Website bisa menghitung keuangan dalam sistem kalkulator ? (90,9%)
15. Website dapat mencetak bukti transaksi ? (100%)
16. Website bisa membuat pos keuangan ? (100%)
17. Website dapat mensetting pembayaran berdasarkan pos keuangan ? (81,8%)
18. Website dapat membuat jurnal umum pengeluaran dan pemasukan ?
(90,9%)
19. Website dapat mensetting tahun ajaran ? (100%)
20. Website dapat membuat kelas ? (90,9)
21. Website dapat membuat program keahlian ? (100%)
22. Website dapat membuat data siswa ? (90,9)
23. Website dapat mengupload data siswa berdasarkan excell ? (90,9%)
24. Website dapat mencatat kelulusan siswa ? (90,9%)
25. Website dapat mencatat data kelulusan siswa ? (100%)
26. Website dapat mencatat laporan dan rekapitulasi melalui excell ? (100%)
27. Website dapat membuat informasi yang akan diselenggarakan di sekolah ?
(90,9%)
28. Website dapat mengatur data sekolah ? (100%)
29. Website dapat mengatur bulan ? (100%)
30. Website dapat membuat data admin ? (100%)
31. Website dapat melakukan back up data melalui data mysql ? (100%)

81
4.2 Saran
Pembuatan website SMK Yapin 02 Setu yang telah dibuat terdapat beberapa
saran yang mungkin dapat dijadikan bahan untuk referensi yang bertujuan
meningkatkan kualitas dalam sistem seperti penambahan inovasi-inovasi desain
antarmuka dalam sistem yang baru. Bagi yang hendak mengembangkan website ini
lebih lanjut dapat memperbaiki.

82
 Daftar Pustaka

1. Evaluasi Website Sekolah Menengah Atas Di Propinsi Jawa Timur

Dengan Pendekatan Evaluasi Berbasis Konten.
https://media.neliti.com/media/publications/323558-evaluasi-website-
sekolah-menengah-atas-d-7e87ba6f.pdf

2. Pengembangan Sistem Pembelajaran HTML dan CSS dengan Konsep

Gamification berbasis Web Anjumi Kholifatu Rahmatika , Fajar Pradana2,
Fitra Abdurrachman Bachtiar
https://j-ptiik.ub.ac.id/index.php/j-ptiik/article/download/7738/3648/

3. Rancang Bangun Website Profil Hotel Agung Prabumulih Menggunakan

Framework Bootstrap
https://ojs.unikom.ac.id/index.php/jati/article/download/758/570/

4. Pemanfaatan Framework Bootstrap Dalam Merancang Website Responsif

Untuk Toko D2 Adventure
https://core.ac.uk/download/pdf/287342967.pdf

5. Pengembangan Website Unit Penelitian Dan Pengabdian Kepada

Masyarakat Dan Penerapan Jurnal Elektronik Berbasis Open Source Di
Politeknik Negeri Kupang
https://core.ac.uk/download/268045047.pdf

6. Rancang Bangun Website Sekolah Dengan Menggunakan Framework

Bootstrap ( Studi Kasus SMP Negeri 6 Prabumulih )
https://core.ac.uk/download/pdf/287342967.pdf

7. Analisa dan Desain Sistem Bimbingan Tugas Akhir Berbasis Web dengan
Studi Kasus Fakultas Teknologi Informasi
https://media.neliti.com/media/publications/219183-analisa-dan-desain-
sistem-bimbingan-tuga.pdf

83
8. Analisa Dan Perancangan Sistem Informasi Administrasi Kursus Bahasa
Inggris Pada Intensive English Course Di Ciledug Tangerang
https://ojs.ipem.ecampus.id/ojs_ipem/index.php/stmik-
ipem/article/download/164/136

9. Pembuatan Website Informasi Pendidikan Dan Pembelajaran Online SMA

NEGERI 3 BOYOLALI https://core.ac.uk/download/pdf/12348472.pdf

10. Sistem Informasi Perpustakaan Online Berbasis Web

https://ejournal.unsrat.ac.id/index.php/elekdankom/article/download/1165
7/11249

11. Rancangan Sistem Informasi Keuangan Gereja Berbasis Web Di Jemaat

GMIM Bukit Moria Malalayang
https://ejournal.unsrat.ac.id/index.php/elekdankom/article/viewFile/10458/
10044

12. Siti Maryani Sopiya. (2017). PERANCANGAN PROGRAM

PENJUALAN JILBAB BERBASIS WEB
https://repository.bsi.ac.id/index.php/unduh/item/38908/TA_SITI
MARYANI.pdf

84
Lampiran Input Program

Database Mysql

85
86
87
88
89
90
91
92
93
94
Login.php ( Admin )

95
Dashboard

96
97
Pembayaran

Pos

98
99
100
Jenis pembayaran

101
102
103
104
105
106
107
108
109
Jurnal umum pengeluaran

110
111
Jurnal umum penerimaan

112
113
Tahun ajaran

114
115
Kelas

116
117
118
Kelulusan

119
120
121
122
123
124
125
126
Laporan Rekapitulasi

127
128
129
130
131
132
Pengaturan bulan

133
Manajemen pengguna

134
135
136
Program keahlian

137
138
Siswa

139
140
141
142
143
144
145
146
Rekapitulasi

147
Cek pembayaran siswa-siswi

148
149
150
Siswa-siswi Login

151
Dashboard

152
153
LAPORAN OUTPUT PROGRAM

Admin Login

Dashboard

154
Pembayaran siswa

Pos keuangan

155
Jenis pembayaran

Jurnal umum pengeluaran

156
Jurnal umum penerimaan

Tahun Ajaran

157
Kelas

Program keahlian

158
Siswa

Kelulusan

159
Laporan Rekaptulasi

Kenaikan kelas

160
Pengaturan sekolah

Pengaturan Bulan

161
Manajemen pengguna

Rekaptulasi

162
Cek pembayaran siswa/siswi

Siswa siswi login

Cek tagihan pembayaran

163