TUGAS AKHIR

RANCANG BANGUN WEBSITE SEKOLAH UNTUK SMA

NEGERI 1 BUNUT HILIR

Diajukan Sebagai Persyaratan Untuk Menyelesaikan Pendidikan Diploma Tiga

Pada Program Studi Teknik Informatika Jurusan Teknik Elektro
Politeknik Negeri Pontianak

OLEH:
AHMAD FAHRIZI
NIM : 3201916067

PROGRAM STUDI D3 TEKNIK INFORMATIKA

JURUSAN TEKNIK ELEKTRO
POLITEKNIK NEGERI PONTIANAK
2022
 HALAMAN PENGESAHAN

RANCANG BANGUN WEBSITE SEKOLAH PADA SMA

NEGERI 1 BUNUT HILIR

Oleh:
Ahmad Fahrizi
3201916067

Tugas akhir ini telah diterima dan disahkan sebagai salah satu syarat untuk
menyelesaikan Program Pendidikan Diploma Tiga pada Program Studi
Teknik Informatika Jurusan Teknik Elektro Politeknik Negeri Pontianak.

Disahkan oleh :

Ketua Jurusan Teknik Elektro Ketua Program Studi

D-III Teknik Informatika

Hasan, S.T., M.T. Suheri, S.T., M.Cs.

NIP. 197108201999031003 NIP. 198307172008121005

Mengetahui,
Direktur Politeknik Negeri Pontianak

Dr. Ir. H. Muhammad. Toasin Asha, M.Si

NIP. 196112251990111001

ii
 HALAMAN PERNYATAAN

RANCANG BANGUN WEBSITE SEKOLAH PADA SMA

NEGERI 1 BUNUT HILIR

Oleh:
Ahmad Fahrizi
(3201916067)
Dosen Pembimbing:

Nurul Fadillah, S.Pd., M.Ed., TESOL

NIP. 198809202015041003

Telah dipertahankan di depan penguji pada tanggal 2 September 2022 dan

dinyatakan memenuhi syarat sebagai Tugas Akhir.

Dosen Penguji:
Penguji I Penguji II

Ferry Faisal, S.ST., M.T. Tri Bowo Atmojo, S.T., M.Cs.

NIP. 197302061995011001 NIP. 198407172019031010

iii
 HALAMAN PERNYATAAN ORISINALITAS

Saya yang bertanda tangan dibawah ini :

Nama                   : Ahmad Fahrizi
NIM                    : 3201916067
Jurusan / Program Studi : Teknik Elektro / Teknik Informatika
Judul Tugas Akhir        : Rancang Bangun Website Sekolah Pada SMA
Negeri 1 Bunut Hilir
Menyatakan dengan sebenar-benarnya bahwa penulisan Tugas Akhir ini
berdasarkan hasil penelitian, pemikiran dan pemaparan asli dari saya sendiri, baik
untuk naskah tugas akhir maupun kegiatan yang tercantum sebagai bagian dari
Tugas Akhir ini. Jika terdapat karya orang lain, saya akan mencantumkan sumber
yang jelas.
Demikian pernyataan ini saya buat dengan sesungguhnya dan apabila
dikemudian hari terdapat penyimpangan dan ketidakbenaran dalam pernyataan ini,
maka saya bersedia menerima sanksi akademik berupa pencabutan gelar yang
telah diperoleh karena karya tulis ini dan sanksi lain sesuai dengan peraturan yang
berlaku di Politeknik Negeri Pontianak.
Demikian pernyataan ini saya buat dalam  keadaan sadar tanpa paksaan dari
pihak manapun.  

Pontianak, 2 September 2022

Yang membuat pernyataan,

Materai
10000

Ahmad Fahrizi
NIM. 3201916067

iv
 RIWAYAT HIDUP

Biodata Mahasiswa :
Nama Mahasiswa : Ahmad Fahrizi
NIM : 3201916067
Tempat / Tanggal Lahir : Bunut Hilir
Jenis Kelamin : Laki-Laki
Agama : Islam
Alamat : Bunut, Kalimantan Barat
No. Telpon Rumah / Handphone : 08xxxxx
Email : fahrizi12@gmail.com

v
ABSTRAK

vi
ABSTRACT

vii
 PRAKATA

Puji syukur kepada Tuhan Yang Maha Esa yang telah melimpahkan segala
rahmat dan hidayah-Nya sehingga penulis dapat menyelesaikan penulisan tugas
akhir yang berjudul “Rancang Bangun Website Sekolah Pada SMA Negeri 1
Bunut Hilir”. Tujuan penulisan tugas akhir ini adalah memenuhi persyaratan
untuk menyelesaikan Pendidikan Diploma Tiga pada Program Studi Teknik
Informatika Jurusan Teknik Elektro Politeknik Negeri Pontianak. Dengan segala
kerendahan hati, penulis menyadari bahwa dalam menyelesaikan penulisan tugas
akhir ini tidak lepas dari peran berbagai pihak yang telah banyak memberikan
saran, bimbingan, doa, serta motivasi. Dalam kesempatan ini, penulis ini
mengucapkan terima kasih khususnya kepada :
1. Orang tua yang selalu memberikan nasihat dan dukungan selama
berjalannya proses penyusunan Tugas Akhir.
2. Bapak Dr. Ir. H. Muhammad Toasin Asha, M. Si selaku Direktur Politeknik
Negeri Pontianak.
3. Bapak Hasan, ST., M.T. selaku Ketua Jurusan Teknik Elektro
4. Bapak Suheri, S.T., M.Cs. selaku Ketua Program Studi Teknik Informatika
5. Bapak Muhammad Diponegoro, S.Kom., M.Cs. selaku Koordinator Tugas
Akhir Program Studi Teknik Informatika.
6. Ibu Nurul Fadillah, S.Pd., M.Ed., TESOL. selaku Dosen Pembimbing yang
tiada henti memberikan bimbingan, dorongan, saran, kritik, dan motivasi
kepada penulis.
7. Bapak Ferry Faisal, S.ST., M.T. selaku Dosen Penguji 1 yang juga telah
memberikan saran dan kritik selama proses penyusunan Tugas Akhir ini.
8. Bapak Tri Bowo Atmojo, S.T., M.Cs. selaku Dosen Penguji 2 yang juga
telah memberikan saran dan kritik selama proses penyusunan Tugas Akhir.
9. Seluruh staf pengajar dan administrasi Politeknik Negeri Pontianak,
khususnya di Jurusan Teknik Elektro Program Studi Teknik Informatika
Penulis menyadari bahwa dalam penyusunan laporan Tugas Akhir ini
masih jauh dari sempurna, untuk itu kritik dan saran dari pembaca yang
membangun sangat penulis harapkan untuk menjadi pelajaran di kemudian hari.

viii
Penulis berharap semoga laporan Tugas Akhir ini dapat memberikan manfaat bagi
kita semua. Terima kasih .

Pontianak, 08 September 2022

Penulis

ix
 DAFTAR ISI

TUGAS AKHIR
HALAMAN PENGESAHAN
HALAMAN PERNYATAAN
HALAMAN PERNYATAAN ORISINALITAS
RIWAYAT HIDUP
ABSTRAK
ABSTRACT
KATA PENGANTAR
DAFTAR ISI
DAFTAR GAMBAR
DAFTAR TABEL
BAB I PENDAHULUAN
1.1 Latar Belakang
1.2 Rumusan Masalah2
1.3 Batasan Masalah
1.4 Tujuan Penelitian3
1.5 Manfaat Penelitian3
1.5.1 Bagi Mahasiswa3
1.5.2 Bagi SMA 1 Bunut Hilir
1.6 Metodologi Penelitian
1.6.1 Metode Observasi
1.6.2 Metode Wawancara
1.6.3 Metode Literatur4
1.6.4 Metode Pengembangan Sistem
1.7 Metodologi Penelitian
BAB II DASAR TEORI8
2.1 Tinjauan Pustaka8
2.2 Dasar Teori9
2.2.1 Website9
2.2.2 HTML9
2.2.3 PHP10

x
 2.2.4 XAMPP10
2.2.5 MySQK
2.2.6 Framework Boostrap12
2.2.7 Framework Codeigniter12
BAB III RANCANGAN SISTEM5
3.1 Gambaran Umum
3.1.1 Kebutuhan Pengguna5
3.2 Analisis Kebutuhan6
3.2.1 Kebutuhan Perangkat Keras6
3.2.2 Kebutuhan Perangkat Lunak6
3.3 Perancangan Proses6
3.3.1 Use Case Diagram6
3.3.2 Definisi Aktor8
3.3.3 Use Case Scenario19
3.4 Rancangan Database28
3.4.1 Struktur Tabel28
3.5 Rancangan User Interface30
3.5.1 Tampilan Rancangan Beranda30
3.5.2 Tampilan Rancangan Halaman Profil Sekolah31
3.5.3 Tampilan Rancangan Halaman Berita32
3.5.4 Tampilan Rancangan Halaman Galeri34
3.5.5 Tampilan Rancangan Halaman Prestasi35
3.5.6 Tampilan Rancangan Halaman Kontak Kami36
BAB IV HASIL DAN PEMBAHASAN
4.1 Implementasi Tampilan
4.1.1 Tampilan Halaman Login37
4.1.2 Tampilan Halaman Dashboard37
4.1.3 Tampilan Halaman Kategori Berita38
4.1.4 Tampilan Halaman Berita38
4.1.5 Tampilan Halaman Profil Sekolah39
4.1.6 Tampilan Halaman Tata Tertib Guru40
4.1.7 Tampilan Halaman Tata Tertib Siswa41

xi
 4.1.8 Tampilan Halaman Kelola Galeri42
4.1.9 Tampilan Halaman Kelola Prestasi42
4.1.10 Tampilan Halaman Beranda43
4.1.11 Tampilan Halaman Profil (Pengunjung)43
4.1.12 Tampilan Halaman Berita45
4.1.13 Tampilan Halaman Detail Berita45
4.1.14 Tampilan Halaman Galeri Pengunjung47
4.1.15 Tampilan Halaman Kontak47
4.2 Pengujian Sistem48
BAB V PENUTUP
5.1 Kesimpulan
5.2 Saran
DAFTAR PUSTAKA

xii
 DAFTAR GAMBAR

Gambar 1.1 Tahapan Pengembangan Metode Prototyping4

Gambar 3.1 Use Case Diagram Admin17
Gambar 3.2 Use Case Diagram Pengunjung18
Gambar 3.3 Mockup Halaman Beranda
Gambar 3.4 Mockup Halaman Profil Sekolah
Gambar 3.5 Mockup Halaman Berita
Gambar 3.6 Mockup Halaman Galeri
Gambar 3.7 Mockup Halaman Prestasi
Gambar 3.8 Mockup Halaman Kontak Kami
Gambar 4.1 Halaman Login
Gambar 4.2 Halaman Dashboard
Gambar 4.3 Halaman Kategori Berita
Gambar 4.4 Halaman Berita
Gambar 4.5 Halaman Profil Sekolah
Gambar 4.6 Halaman Tata Tertib Guru
Gambar 4.7 Halaman Tata Tertib Siswa
Gambar 4.8 Halaman Kelola Galeri
Gambar 4.9 Halaman Kelola Prestasi
Gambar 4.10 Halaman Beranda
Gambar 4.11 Halaman Profil
Gambar 4.12 Halaman Berita Pengunjung
Gambar 4.13 Halaman Detail Berita
Gambar 4.14 Halaman Galeri Pengunjung
Gambar 4.15 Halaman Kontak

xiii
 DAFTAR TABEL
Tabel 3.1. Use Case Scenario Login19
Tabel 3.2. Use Case Scenario Mengelola Data Admin19
Tabel 3.3. Use Case Scenario Mengelola Berita20
Tabel 3.4. Use Case Scenario Mengelola Kategori Berita21
Tabel 3.5. Use Case Scenario Mengelola Profil Sekolah21
Tabel 3.6. Use Case Scenario Mengelola Tata Tertib Guru22
Tabel 3.7. Use Case Scenario Mengelola Tata Tertib Siswa22
Tabel 3.9. Use Case Scenario Mengelola Galeri23
Tabel 3.10. Use Case Scenario Mengelola Prestasi24
Tabel 3.11. Use Case Scenario Mengelola Beranda24
Tabel 3.12. Use Case Scenario Mengelola Profil Sekolah25
Tabel 3.13. Use Case Scenario Mengelola Tata Tertib Guru25
Tabel 3.14. Use Case Scenario Mengelola Tata Tertib Siswa26
Tabel 3.15. Use Case Scenario Mengakses Berita26
Tabel 3.16. Use Case Scenario Mengakses Galeri27
Tabel 3.17. Use Case Scenario Mengakses Kontak27
Tabel 3.18. Struktur Tabel User28
Tabel 3.19. Struktur Tabel Berita28
Tabel 3.20. Struktur Tabel Foto29
Tabel 3.21. Struktur Tabel Galeri29
Tabel 3.22. Struktur Tabel Kategori29
Tabel 3.23. Struktur Tabel Prestasi29
Tabel 3.24. Struktur Tabel Profil30
Tabel 3.25. Struktur Tabel Guru30
Tabel 4.1. Pengujian Metode Blackbox48

xiv
 BAB I
PENDAHULUAN
1.1 Latar Belakang
Bagi sebuah instansi pendidikan saat ini yang memiliki banyak informasi
yang harus selalu disampaikan kepada siswa, guru, dan juga masyarakat umum,
sangat tepat jika penyampaian informasi tersebut disampaikan dengan
memanfaatkan internet untuk memudahkan dalam penyebaran informasi tersebut,
dan media aplikasi yang digunakan untuk menyebarkan informasi tersebut yaitu
dengan menggunakan website. Website atau juga sering disebut dengan situs
merupakan kumpulan beberapa halaman web yang berguna untuk menampilkan
informasi berupa teks, gambar, suara, animasi atau gabungan dari semuanya yang
dijalankan dari satu halaman web domain. Dan saat ini website dapat dengan
mudah diakses menggunakan berbagai perangkat yang terhubung dengan internet,
kapan saja dan dimana saja, termasuk di daerah Bunut Hilir.
SMAN 1 Bunut Hillir yang beralamat di jalan Beringin Jaya No. 159
Kecamatan Bunut Hilir Kabupaten Kapuas Hulu. Merupakan salah satu satuan
pendidikan dengan jenjang Sekolah Menengah Atas (SMA) dibunut Hilir.
Disekolah ini dalam menyampaikan informasi, misalnya pengumuman
penerimaan peserta didik baru (PPDB) dan sebagainya masih dilakukan secara
konvensional, seperti dilakukan melalui baliho, spanduk dan pembagian brosur di
ditempat umum, Tentu saja dengan memakai media cetak seperti baliho, spanduk
dan brosur akan memerlukan biaya karena harus mencetak. Maka dari itu
dibutuhkan sebuah sistem informasi yang dapat memberikan informasi terkait
kegiatan di SMA Negeri 1 Bunut hilir agar mudah diterima secara luas, yaitu
menggunakan sistem informasi berbasis website. Dengan adanya website di SMA
Negeri 1 Bunut hilir, bisa dijadikan sebagai media atau alat untuk menyampaikan
informasi yang efektif dan efisien karena dapat menghemat biaya anggaran
sekolah dan waktu, dimana cukup membuat pengumuman pada halaman website,
dengan itu informasi akan lebih mudah diterima dan dibaca orang tua siswa atau
calon siswa dan masyarakat umum secara luas jika dibandingkan dengan media
informasi menggunakan media cetak. Untuk akses internet di SMA Negeri 1

1
 2

Bunut hilir sendiri saat ini sudah terkoneksi dengan jaringan internet sehingga
mudah dalam menyampaikan informasi melalui website.
Dengan dibangunnya website di SMA 1 Bunut Hilir, dapat membantu pihak
sekolah dalam menyampaikan informasi secara luas dan cepat kepada orang tua
siswa atau calon siswa dan masyarakat umum, serta dapat mengelola data
kegiatan-kegiatan yang dilakukan di SMA Negeri 1 Bunut Hilir akan mudah
untuk mencarinya di dalam sistem tersebut.
Berdasarkan permasalahan diatas, maka penulis ingin mengajukan Proposal
Tugas Akhir dengan judul “Rancang Bangun Website Sekolah Untuk SMA
Negeri 1 Bunut Hilir”. Dengan harapan adanya website ini dapat membantu
orang tua siswa atau calon siswa dan masyarakat umum mengetahui informasi
kegiatan di sekolah SMA Negeri 1 Bunut Hilir.
1.2 Rumusan Masalah
Berdasarkan analisis masalah di latar belakang, maka yang menjadi
permasalahan adalah bagaimana merancang dan membangun website Sekolah
SMA Negeri 1 Bunut Hilir Kabupaten Kapuas Hulu ?

1.3 Batasan Masalah

1. Sistem yang dibangun memiliki dua hak akses yaitu admin (Tata Usaha
atau Operator) dan User (Pengunjung).
2. Admin dapat mengelola data admin, mengelola berita, mengelola profil
sekolah, mengelola pengumuman, mengelola galeri sekolah, serta
mengelola data prestasi siswa.
3. Aplikasi dibangun dengan menggunakan bahasa pemrograman PHP,
CSS, Javascript, dan HTML.
4. Framework yang digunakan untuk back-end yaitu Codeigniter, dan
Front-end yaitu Bootstrap.
5. Software Web Server dan Database Server yang digunakan adalah
XAMPP versi 8.0.2
 3

1.4 Tujuan Penelitian

Berdasarkan rumusan masalah yang telah disebutkan maka tujuan dari
penulisan Proposal Tugas Akhir ini adalah menghasilkan website sekolah SMA
Negeri 1 Bunut Hilir Kabupaten Kapuas Hulu.

1.5 Manfaat Penelitian

1.5.1 Bagi Mahasiswa
Menambah wawasan ilmu pengetahuan terkait aplikasi yang dibangun dan
melatih mahasiswa dalam menerapkan pengetahuan serta ilmu-ilmu mengenai
pembangunan dan perancangan aplikasi yang telah diperoleh selama masa
perkuliahan.
1.5.2 Bagi SMA 1 Bunut Hilir
1. Menghasilkan suatu sistem yang dapat membantu mempermudah dalam
menyebarkan informasi Sekolah.
2. Membangun aplikasi sistem informasi sekolahpada SMA 1 Bunut Hilir
Kabupaten Kapuas Hulu.
3. Sistem yang dibuat ini dapat membantu pihak SMA Negeri 1Bunut Hilir
Kabupaten Kapuas Hulu dalam menyebarkan informasi seputar sekolah.
1.6 Metodologi Penelitian
Metodologi yang digunakan oleh penulis dalam penyusunan Tugas Akhir ini
adalah sebagai berikut:
1.6.1 Metode Observasi
Penulis mengamati secara langsung mengenai kegiatan-kegiatan yang
dilakukan tentang sistem pendaftaran sekolah dan informasi data sekolah. Hasil
dari observasi atau pengamatan langsung akan penulis catat. Penulis juga
mengetahui setiap tahapan dari sistem pendaftaran sekolah serta informasi umum
mengenai sekolah sebagai upaya untuk memahami prosedur sistem dan
permasalahan yang telah penulis uraikan pada latar belakang.
 4

1.6.2 Metode Wawancara

Wawancara merupakan cara pengumpulan data secara tatap muka atau
melakukan audiensi tanya jawab dengan Kepala Sekolah SMA 1 Bunut Hilir
Kabupaten Kapuas Hulu, yaitu Bapak Seragi, S.Pd pada tanggal 11 November
2021 yang berkaitan dengan sistem informasi umum seputar sekolah..
1.6.3 Metode Literatur
Metode ini melakukan pengumpulan data dengan mempergunakan modul-
modul, jurnal-jurnal, serta pengumpulan data-data berupa e-book (Electronic
Book), buku-buku referensi maupun informasi di berbagai situs yang terdapat di
internet dengan cara melakukan kegiatan yang disebut browsing pada aplikasi
browser yang ada disetiap sistem operasi komputer maupun PC (Personal
Computer) ataupun segala informasi yang dapat mendukung dan menjadi
landasan dalam penulisan proposal Tugas Akhir ini.
Literatur yang diambil penulis antara lain menggunakan beberapa jurnal dan
artikel yang ada di internet serta proposal Tugas Akhir senior terdahulu yang
berfokus membahas pembuatan website pendaftaran siswa baru dan sistem
informasi sekolah.
1.6.4 Metode Pengembangan Sistem
Metode pengembangan dalam pembuatan website sekolah SMA Negeri 1
Bunut Hilir adalah menggunakan metode Prototype atau Prototyping. Metode
prototyping merupakan metode yang dapat menghemat waktu dalam
pengembangan sistem dan sistem yang dibuat sesuai dengan kebutuhan dan
keinginan pelanggan. Seperti gambar 1 dibawah ini:
 5

Gambar 1. Tahapan Pengembangan Metode Prototyping

Berdasarkan Gambar 1, dalam model prototyping terdapat beberapa tahan yang
dijelaskan sebagai berikut :
1) Pengumpulan Kebutuhan
Pada tahap ini penulis melakukan identifikasi software dan semua kebutuhan
sistem yang akan dibuat yang didapat melalui metode wawancara, observasi dan
studi literatur yang telah dilakukan sebelumnya.
2) Membangun Prototyping
Setelah melakukan pengumpulan data, tahap selanjutnya adalah membangun
prototype dengan membuat perancangan sementara yang akan digunakan untuk
penyajian kepada klient. Pada tahap ini, dibuatlah use case diagram dan mockup
untuk interface user.
3) Evaluasi Prototyping
Pada tahap evaluasi prototyping, klient melihat prototype yang dibangun dan
menilai apakah sudah sesuai dengan keinginan dan kebutuhan klient. Jika tidak
sesuai prototype akan diperbaiki dengan mengulangi langkah-langkah
sebelumnya. Tapi jika sudah, langkah selanjutnya akan dilaksanakan.
4) Mengkodekan Sistem
Pada tahap ini, prototype diterjemahkan ke dalam bahasa pemrograman.
Pengkodean sistem pada tahap ini dibuat dengan bahasa pemrograman PHP
dengan konsep framework.
5) Menguji sistem
Setelah sistem sudah menjadi suatu software yang siap digunakan, maka software
tersebut harus diuji. Pengujian software bertujuan untuk meminimalisir kesalahan
pada software yang dibangun. Pengujian dilakukan dengan menggunakan metode
blackbox testing. Blackbox testing atau disebut juga dengan pengujian fungsional
merupakan pengujian yang didasarkan pada detail aplikasi seperti tampilan
aplikasi, fungsi-fungsi yang ada pada website, dan kesesuaian alur fungsi dengan
proses yang diinginkan klient.
6) Evaluasi Sistem
 6

Ditahap ini klient mengevaluasi sistem yang telah dibuat. Jika sistem belum sesuai
dengan yang diinginkan, maka pengembang mengulangi langkah ke 4 dan 5. Tapi
jika sudah sesuai, maka langkah selanjutnya akan dilakukan.
7) Menggunakan Sistem
Setelah melakukan tahap evaluasi sistem, software sudah dapat digunakan.
1.7 Metodologi Penelitian
Sistem penulisan tugas akhir ini secara garis besar dibagi menjadi beberapa
bab, sebagai berikut :
BAB I : PENDAHULUAN
Pada BAB I berisi mengenai latar belakang, rumusan masalah,
batasan masalah, tujuan tugas akhir, manfaat tugas akhir,
metodologi, dan sistematika penulisan.
BAB II : LANDASAN TEORI
Pada BAB II berisi tentang teori – teori dan dasar yang digunakan
dalam pembuatan website inventaris barang sekolah di SMK Negeri
01 Tebas.
BAB III : PERANCANGAN SISTEM
Pada BAB III berisi tentang perancangan sistem website inventaris
barang sekolah di SMK Negeri 01 Tebas.
BAB IV : HASIL DAN PEMBAHASAN
Pada BAB IV berisi hasil tugas akhir yang telah dibangun beserta
pembahasan mengenai website inventaris barang sekolah di SMK
Negeri 01 Tebas.
BAB V : PENUTUP
Pada BAB V berisi kesimpulan dari keseluruhan tugas akhir dan
saran – saran yang dapat dijadikan pertimbangan untuk
pengembangan tugas akhir
 BAB II
DASAR TEORI

2.1 Tinjauan Pustaka

1. Jurnal yang ditulis oleh Yudie Irawan, Nanik Susanti, Wiwit Agus Triyanto
yang berjudul “Analisa dan Perancangan Sistem Informasi Sekolah
Berbasis Website Untuk Penyampaian Informasi Sekolah dan Media
Promosi Kepada Masyarakat. Referensi ini bertujuan menghasilkan sebuah
media yang sangat interaktif dan dinamis untuk membantu menambah
wawasan masyarakat mengenai sekolah tersebut dan mengatasi
permasalahan dalam penyampaian informasi serta proses promosi sekolah
yang selama ini masih dilakukan secara manual. Adapun hal yang
membedakan dengan penelitian penulis adalah cakupan fitur aplikasi yang
dibahas pada penelitian terlalu luas meliputi data kelas, data materi ajar,
data silabus, data materi uji, data prestasi siswa, prestasi sekolah, agenda,
artikel , berita, dan buku tamu sedangkan penulis melakukan penyempitan
fitur meliputi beranda, profil, berita, galeri, dan kontak[1].
2. Jurnal yang ditulis oleh Ignatius Endar, Ellysa Nursanti, Fourry Handoko
yang berjudul “Rancangan Sistem Informasi Manajemen Sekolah Berbasis
Web Interaktif Terintegrasi Di SMK Negeri 1 Nabire”. Referensi ini
bertujuan menghasilkan sebuah website sistem informasi interaktif
terintegrasi di SMK Negeri 1 Nabire. Adapun hal yang membedakan
proposal penelitian penulis dengan jurnal tersebut adalah fitur aplikasi yang
dibuat pada jurnal tersebut memuat data guru dan data siswa yang
ditampilkan di halaman website pengunjung sedangkan penulis rancang
tidak memiliki fitur tersebut[2].
3. E-Jurnal yang ditulis oleh Recky T. Djaelangkara, Rizal Sengkey, dan
Oktavian yang berjudul “Perancangan Sistem Informasi Akademik Sekolah
Berbasis Web Studi Kasus Sekolah Menengah Atas Kristen 1 Tomohon”.
Referensi ini bertujuan membantu mempermudah pengolahan data
akademik sekolah lebih maksimal dan praktis dengan dibangunnya website
Sistem Informasi Akademik. Adapun hal yang membedakan proposal

8
 9

penelitian penulis dengan jurnal tersebut ialah terdapat hak akses untuk
mengakses website tersebut, sedangkan penulis bangun untuk informasi
umum tidak memerlukan hak akses.

2.2 Dasar Teori

2.2.1 Web
Menurut (Agus Hariyanto, 2015) : “Web dapat diartikan sebagai kumpulan
halaman yang menampilkan informasi data teks, data gambar, data animasi, suara,
video dan gabungan dari semuanya, baik yang bersifat statis maupun dinamis
yang membentuk satu rangkaian bangunan yang saling terkait, di mana masing-
masing dihubungkan dengan jaringan-jaringan halaman (hyperlink)”. Website
adalah sebuah kumpulan halaman pada suatu domain di internet yang dibuat
dengan tujuan tertentu dan saling berhubungan serta dapat diakses secara luas
melalui halaman depan (home page) menggunakan sebuah browser menggunakan
URL website[3]. Berdasarkan uraian di atas, penulis menyimpulkan Website
adalah halaman informasi yang disediakan melalui jalur internet sehingga bisa
diakses seluruh dunia selama terkoneksi dengan jaringan internet.
2.2.2 HTML (HyperText Markup Language)
HyperText Markup Language atau yang lebih akrab dikenal HTML adalah
bahasa pemrograman atau komputer yang digunakan untuk membuat suatu
website. “HyperText” mengacu pada Hyperlink yang ada pada page HTML,
sedangkan “Markup Language” melambangkan cara suatu Tags digunakan untuk
mendefinisikan layout atau desain suatu page dan elemen-elemen di dalamnya. Di
bawah ini adalah contoh kecil dari bahasa HTML :
<!doctype html>
<html>
<head>
<title>Contoh.com</title>
</head>
<body>
<p>Contoh Paragraf dalam HTML</p>
</body>
 10

<html>
Format yang benar pada HTML harus mengandung tags<html>, <head>,
<body>
seperti contoh di atas. Komponen Website seperti Page Title, metadata, dan
links diletakkan diantara tags , sedangkan untuk isinya diletakan di antara
tags<body>[4].

2.2.3 PHP (Hypertext Preprocessor)

PHP merupakan bahasa skrip server dan tool yang ampuh untuk membuat
halaman Web yang dinamis dan interaktif. PHP alternatif yang banyak digunakan,
gratis dan efisien untuk pesaing seperti ASP Microsoft.
PHP adalah bahasa pemrograman script server-side yang didesain untuk
pengembangan web dan bersifat open source. PHP di kembangkan pada tahun
1995 oleh Rasmus Lerdorf dan sekarang dikelola oleh The PHP Group. PHP
disebut bahasa pemrograman server side karena PHP diproses pada komputer
server. Hal 10 ini berbeda dibandingkan dengan bahasa pemrograman client-side
seperti JavaScript yang diproses pada web browser (client). Pada awalnya PHP
merupakan singkatan dari Personal Home Page. Sesuai dengan namanya, PHP
digunakan untuk membuat website pribadi. Dalam beberapa tahun
perkembangannya, PHP menjelma menjadi bahasa pemrograman web yang
powerful dan tidak hanya digunakan untuk membuat halaman web sederhana,
tetapi juga website populer yang digunakan oleh jutaan orang seperti wikipedia,
wordpress, joomla, dll. Saat ini PHP adalah singkatan dari PHP: Hypertext
Preprocessor, sebuah kepanjangan rekursif, yakni permainan kata di mana
kepanjangannya terdiri dari singkatan itu sendiri: PHP: Hypertext Preprocessor.
PHP dapat digunakan dengan gratis (free) dan bersifat Open Source. PHP dirilis
dalam lisensi PHP License, sedikit berbeda dengan lisensi GNU General Public
License (GPL) yang biasa digunakan untuk proyek Open Source[4].

2.2.4 XAMPP Control Panel V3.3.0]

XAMPP adalah sebuah paket perangkat lunak (software) komputer yang
sistem penamaannya diambil dari akronim kata Apache, MySQL (dulu) /
 11

MariaDB (sekarang), PHP, dan Perl. Sementara imbuhan huruf “X” yang terdapat
pada awal kata berasal dari istilah cross platform sebagai simbol bahwa aplikasi
ini bisa dijalankan di empat sistem operasi berbeda, seperti OS Linux, OS
Windows, Mac OS, dan juga Solaris. Sejarah mencatat, software XAMPP pertama
kali dikembangkan oleh tim proyek bernama Apache Friends dan sampai saat ini
sudah masuk dalam rilis versi 8.1.2 yang bisa didapatkan secara gratis dengan
label GNU (General Public License). Program aplikasi XAMPP berfungsi sebagai
server lokal untuk mengampu berbagai jenis data website yang sedang dalam
proses pengembangan. Dalam praktiknya, XAMPP bisa digunakan untuk menguji
kinerja fitur ataupun menampilkan konten yang ada di dalam website kepada
orang lain tanpa harus terkoneksi dengan internet, cukup akses melalui Xampp
control panel, atau istilahnya website offline. XAMPP bekerja secara offline
layaknya web hosting biasa namun tidak bisa diakses oleh banyak orang. Maka
dari itu, XAMPP biasanya banyak digunakan oleh para mahasiswa maupun
pelajar untuk melihat hasil desain website sebelum akhirnya dibuat online
menggunakan web hosting yang biasa dijual di pasaran[5].
.
2.2.5 MySQL[6]
MySQL merupakan software yang tergolong sebagai DBMS (Database
Management System) yang bersifat Open Source”. Open Source menyatakan
bahwa software ini dilengkapi dengan source code (kode yang dibuat untuk
membuat MySQL), selain bentuk executable-nya atau kode yang dapat dijalankan
secara langsung dalam sistem operasi.
Berikut merupakan kelebihan dari MySQL :
1. Portabilitas. MySQL dapat berjalan stabil pada berbagai sistem operasi
seperti Windows, Linux, FreeBSD, Mac Os X Server, Solaris, Amiga,
dan masih banyak lagi.
2. Perangkat lunak sumber terbuka. MySQL didistribusikan sebagai
perangkat lunak sumber terbuka, dibawah lisensi GPL sehingga dapat
digunakan secara gratis.
3. Multi-user. MySQL dapat digunakan oleh beberapa pengguna dalam
waktu yang bersamaan tanpa mengalami masalah atau konflik.
 12

4. Skalabilitas dan Pembatasan. MySQL mampu menangani basis data

dalam skala besar, dengan jumlah rekaman (records) lebih dari 50 juta
dan 60 ribu tabel serta 5 milyar baris. Selain itu batas indeks yang dapat
ditampung mencapai 32 indeks pada tiap tabelnya.
5. Antar Muka. MySQL memiliki antar muka (interface) terhadap berbagai
aplikasi dan bahasa pemrograman dengan menggunakan fungsi API
(Application Programming Interface).
6. Klien dan Peralatan. MySQL dilengkapi dengan berbagai peralatan
(tool) yang dapat digunakan untuk administrasi basis data, dan pada
setiap peralatan yang ada disertakan petunjuk online.
Struktur tabel. MySQL memiliki struktur tabel yang lebih fleksibel dalam
menangani ALTER TABLE, dibandingkan basis data lainnya seperti PostgreSQL
ataupun Oracle.

2.2.6 Framework Boostrap

Bootstrap adalah framework open-source khusus front end yang awalnya
dibuat oleh Mark Otto dan Jacob Thornton untuk mempermudah dan
mempercepat pengembangan web di front end. Bootstrap memiliki semua jenis
HTML dan template desain berbasis CSS untuk berbagai fungsi dan komponen,
seperti navigasi, sistem grid, carousel gambar, dan tombol (button).
Framework ini memang menghemat waktu developer karena tidak perlu
mengelola template berkali-kali. Namun, fungsi utama dari Bootstrap adalah
untuk membuat situs yang responsif. Interface websiteakan bekerja secara optimal
di semua ukuran layar baik di layar smartphone maupun layar komputer/laptop.
Developer tak perlu lagi mendesain situs khusus untuk perangkat tertentu.
Trafik dan jangkauan audiens versi desktop tidak akan hilang dan tetap diarahkan
ke website versi mobile. User dan komunitas Bootstrap semakin berkembang.
Developer dan designer website bisa bertukar informasi dan juga berdikusi
mengenai patch framework terbaru[7].
 13

2.2.6 Framework Codeigniter[8]

Pengertian Codeigniter adalah sebuah framework yang dibuat dengan
berdasarkan rumus desain atau design pattern dengan model view controller atau
yang juga biasanya dinamakan sebagai MVC.
Design pattern sendiri merupakan sekumpulan penjelasan yang di dalamnya
memuat berbagai macam metode untuk menyelesaikan permasalahan yang umum
yang biasanya ditemukan ketika melakukan proses perancangan sotware atau
perangkat lunak.
Design pattern juga merupakan sebuah petunjuk mengenai langkah-langkah
yang perlu dilakukan untuk menyelesaikan permasalahan tersebut yang berkaitan
dengan software design. Sementara itu, MVC merupakan metode pendekatan
yang berfungsi memisahkan sebuah aplikasi menjadi 3, yakni:
1. Model
Model digunakan untuk mempresentasikan data yang akan digunakan oleh
aplikasi. Contoh data tersebut misalnya seperti database, RSS, maupun data yang
didapatkan melalui sebuah pemanggilan API. Selain itu, model juga bisa
diperoleh melalui sebuah aksi yang melibatkan beberapa tugas operasi, seperti
Update, Create, maupun Delete data.
2. View
View merupakan sebuah tampilan yang akan ditampilkan oleh pengguna
melalui sebuah browser. Tampilan tersebut biasanya akan berbentuk file HTML
maupun juga berbagai kode PHP yang berperan di dalam penyusunan template
untuk sebuah website. Di dalam codeigniter, view bisa berupa bagian-bagian yang
ada di dalam suatu halaman, template, maupun juga jenis lainnya yang berasal
dari halaman maupun template tersebut.
3. Controller
Controller merupakan sebuah business logic yang berperan sebagai
jembatan antara view dan model. Tugas dari controller yakni merespon
permintaan yang berasal dari HTTP yang berasal dari pengguna ketika
mengetikkan pencarian di browser. Dari request inilah nantinya controllerakan
menentukan apa yang seharusnya dilakukan. Jika memang diperlukan,
 14

controllerakan melakukan pemanggilan pada model agar supaya dapat mengolah

data.
Selanjutnya, controllerakan mulai memanggil view dengan berdasarkan data
yang diinput sehingga bisa menampilkan hasil yang sesuai dengan apa yang
dimaksud. Pada akhirnya, controller tersebut akanmengembalikan kembali dan
memunculkannya di browser sehingga user bisa mendapatkan apa yang mereka
inginkan.
 BAB III
PERANCANGAN SISTEM

3.1 Gambaran Umum

Aplikasi website SMA Negeri 1 Bunut adalah suatu aplikasi yang dibuat
untuk memudahkan pengunjung dalam mengakses informasi umum mengenai
sekolah tanpa harus datang ke tempat sekolah tersebut.
Aplikasi ini dirancang menggunakan Framework Codeigniter sebagai
kerangka kerja untuk mendukung bahasa program HTML, PHP, dan CSS. Dengan
MySQL sebagai database yang digunakan.
3.1.1. Kebutuhan Pengguna
1. Admin
Pada aplikasi berbasis website ini, admin merupakan orang yang
bertanggung jawab untuk mengelola website sistem informasi. Adapun kebutuhan
admin adalah sebagai berikut:

a) Mengelola data admin

b) Mengelola berita
c) Mengelola profil sekolah
d) Mengelola galeri
e) Mengelola prestasi
2. Pengunjung
Pengunjung merupakan orang yang dapat melihat serta mengunjungi
website SMA 1 Bunut tanpa harus melakukan login. Adapun kebutuhan
pengunjung adalah sebagai berikut.
a) Mengakses beranda
b) Mengakses profil sekolaj
c) Mengakses tata tertib guru
d) Mengakses tata tertib siswa
e) Mengakses galeri
f) Mengakses berita
g) Mengakses kontak

15
 16

3.2 Analisis Kebutuhan

Analisis kebutuhan bertujuan untuk memperoleh semua kebutuhan aplikasi
yang akan dibutuhkan oleh Aplikasi Sistem Informasi SMA 1 Bunut Hilir
berbasis website ini. Analisis kebutuhan meliputi dua hal, yaitu kebutuhan
perangkat keras dan kebutuhan perangkat lunak.
3.2.1 Kebutuhan Perangkat Keras
Perangkat keras keras sangat berperan besar dalam mengembangkan
Aplikasi website ini, perangkat keras akan mendukung sistem dalam menjalankan
PC (Personal Computer). Perangkat keras yang Penulis gunakan untuk
pengembangan membangun aplikasi yaitu:
ASUS VivoBook 14 A14DA, dengan spesifikasi sebagai berikut :
1. Procesor AMD Ryzen 3 3200U
2. RAM 8 GB DDR4
3. AMD Radeon Vega Graphic
4. SSD 512 GB
3.2.2 Kebutuhan Perangkat Lunak
Beberapa perangkat lunak yang diperlukan untuk pembuatan aplikasi ini,
yaitu :
1. Visual Studio Code
2. Xampp Version 8.1.6
3. Framework Codeigniter 3.1

3.3 Perancangan Proses

Membangun website Sistem Informasi SMA 1 Bunut Hilir dilakukan
dengan pendekatan berorientasi objek dengan menggunakan usecase model.
Adapun analisis yang dilakukan adalah mendefinisikan aktor, membuat usecase
diagram, mendefinisikan pengguna dan usecase scenario.
3.3.1 Use Case Diagram
Use-Case diagram menekankan pada pemetaan suatu keseluruhan
kemungkinan pengguna yang ada dan apa yang dapat dilakukannya dalam sistem
perangkat yang akan dibangun. Use-case diagram adalah gambaran grafik dari
 17

beberapa atau semua aktor yang dapat berperan, use-case, dan hubungan yang
dilakukan diantara semua komponen sistem yang akan dibangun. Use case
diagram menjelaskan pemetaan penggunaan suatu sistem penurut sudut pandang
orang yang berada diluar sistem tersebut. Diagram yang dipetakan menggunakan
use-case dapat menjelaskan sistem secara fungsional. Berikut ini adalah
penjelasan dan gambaran use case rancangan yang akan di bangun.
1) Use Case Admin

Mengelola Data
Admin
<<
in
cl
ud
e>
Mengelola Profil << >
Sekolah in c
lu d
e>
>

<<inc
Mengelola Berita lu de>>
Login

<<include>>
Admin
Mengelola Galeri >
e>
l ud
c
in
<<

Mengelola Prestasi

Gambar 3.1. Use Case Diagram Admin

Pada gambar diatas merupakan use case diagram untuk admin, dimana
admin bertugas mengelola data admin, mengelola profil sekolah, mengelola
berita, mengelola galeri, dan mengelola prestasi. Untuk melakukan itu semua
admin diwajibkan login terlebih dahulu.
 18

2) Use Case Diagram Pengunjung

Mengakses Profil
Sekolah

Mengakses Berita

Mengakses Galeri

Pengunjung
Mengakses Prestasi

Mengakses Kontak

Gambar 3.2. Use Case Diagram Pengunjung

Pada gambar diatas merupakan use case diagram pengunjung, dimana

pengunjung dapat melihat beranda website, melihat profil sekolah, melihat berita,
melihat galeri, melihat prestasi, dan melihat kontak.
3.3.2 Definisi Aktor
1. Admin
Admin bertugas untuk mengelola data akun admin, kemudian mengelola
data profil sekolah, mengelola berita, mengelola galeri dan mengelola prestasi,
untuk bisa masuk menjadi admin, diwajibkan login terlebih dahulu.
2. Pengunjung
Pengunjung dapat mengakses website seperti beranda, profil sekolah, tata
tertib guru, tata tertib siswa, berita, galeri dan kontak.
 19

3.3.3 Use Case Scenario

Use Case Scenario merupakan alur jalannya proses dari segi aktor yaitu
admin, dan pengunjung. Adapun use case scenario pada website ini adalah sebagai
berikut :

1. Skenario Login
Tabel 3. 1 Use Case Scenario Login
Nomor Skenario SK-01
Nama Usecase Login Akun
Ringkasan Admin masuk ke sistem dengan menginputkan
username dan password
Aktor Admin
Kondisi Awal Website menampilkan halaman login yang wajib
diisi
Deskripsi 1. Admin memasukkan username dan
password
2. Admin menekan tombol “Login”
Alternatif Jika username atau password yang diisikan
tidak terdaftar di basis data atau salah,
maka website tidak akan masuk ke
halaman Dashboard.
Kondisi Akhir Admin telah berhasil masuk ke website

2. Skenario Mengelola Data Admin

Tabel 3. 2 Use Case Skenario Mengelola Data Admin
No Skenario SK-02
Nama Use Case Mengelola Data Admin
Ringkasan Admin melihat data admin
Aktor Admin
Kondisi Awal Sistem menampilkan halaman data admin
Deskripsi 1 Admin menekan tombol data admin untuk
melihat data akun admin.
2 Admin menekan tombol tombol add untuk
menambahkan data admin.
 20

Admin menekan tombol delete untuk

3 menghapus data admin.
4 Admin menekan tombol edit untuk mengubah
data admin.
Alternatif -
Kondisi Akhir Sistem akan menampilkan halaman data
admin

3. Skenario Mengelola Berita

Tabel 3. 3 Use Case Skenario Mengelola Berita
No Skenario SK-03
Nama Use Case Mengelola Data Berita
Ringkasan Admin melihat data berita
Aktor Admin
Kondisi Awal Sistem menampilkan halaman data berita
Deskripsi 1 Admin menekan tombol berita untuk
melihat data berita.
2 Admin menekan tombol tombol add untuk
menambahkan data berita.
Admin menekan tombol delete untuk
3 menghapus data berita.
Admin menekan tombol edit untuk mengubah
4 data berita.

Alternatif -
Kondisi Akhir Sistem akan menampilkan halaman data
berita
 21

4. Skenario Mengelola Kategori Berita

Tabel 3. 4 Use Case Skenario Mengelola Kategori Berita
No Skenario SK-04
Nama Use Case Mengelola Kategori Berita
Ringkasan Admin melihat kategori berita
Aktor Admin
Kondisi Awal Sistem menampilkan halaman kategori
berita
Deskripsi 1 Admin menekan tombol kategori berita
untuk melihat kategori berita.
2 Admin menekan tombol tombol add untuk
menambahkan kategori berita.
Admin menekan tombol delete untuk
3 menghapus kategori berita.
Admin menekan tombol edit untuk mengubah
4 kategori berita.

Alternatif -
Kondisi Akhir Sistem akan menampilkan halaman kategori
berita

5. Skenario Mengelola Profil Sekolah

Tabel 3. 5 Use Case Skenario Mengelola Profil Sekolah
No Skenario SK-05
Nama Use Case Mengelola Data Profil Sekolah
Ringkasan Admin melihat data profil sekolah
Aktor Admin
Kondisi Awal Sistem menampilkan halaman data Profil
Sekolah
Deskripsi 1 Admin menekan tombol profil sekolah
untuk melihat data Profil Sekolah.
Admin menekan tombol tombol Ubah Data
 22

2 untuk mengubah data Profil Sekolah.

Alternatif -
Kondisi Akhir Sistem akan menampilkan halaman data
Profil Sekolah

6. Skenario Mengelola Tata Tertib Guru

Tabel 3. 6 Use Case Skenario Mengelola Tata Tertib Guru
No Skenario SK-05
Nama Use Case Mengelola Data Tata Tertib Guru
Ringkasan Admin melihat data Tata Tertib Guru
Aktor Admin
Kondisi Awal Sistem menampilkan halaman data Tata
Tertib Guru
Deskripsi 1 Admin menekan tombol tata tertib guru
untuk melihat Tata Tertib Guru.
Admin menekan tombol tombol Ubah Data
2 untuk mengubah data Tata Tertib Guru.

Alternatif -
Kondisi Akhir Sistem akan menampilkan halaman data
Tata Tertib Guru

7. Skenario Mengelola Tata Tertib Siswa

Tabel 3. 7 Use Case Skenario Mengelola Tata Tertib Siswa
No Skenario SK-07
Nama Use Case Mengelola Data Tata Tertib Siswa
Ringkasan Admin melihat data Tata Tertib Siswa
Aktor Admin
Kondisi Awal Sistem menampilkan halaman data Tata
 23

Tertib Siswa
Deskripsi 1 Admin menekan tombol tata tertib siswa
untuk melihat Tata Tertib Siswa
Admin menekan tombol tombol Ubah Data
2 untuk mengubah data Tata Tertib Siswa.

Alternatif -
Kondisi Akhir Sistem akan menampilkan halaman data
Tata Tertib Siswa

8. Skenario Mengelola Galeri

Tabel 3. 8 Use Case Skenario Mengelola Galeri
No Skenario SK-08
Nama Use Case Mengelola Data Galeri
Ringkasan Admin mengelola data galeri
Aktor Admin
Kondisi Awal Sistem menampilkan data galeri

Deskripsi 1 Admin menekan tombol add untuk

menambahkan galeri
2 Admin menekan tombol edit untuk mengubah
data galeri
Admin menekan tombol delete untuk

3 menghapus data galeri

Admin menekan tombol tambah foto untuk

4
menambahkan data-data di dalam galeri

Alternatif -
Kondisi Akhir Sistem akan menampilkan data galeri
 24

9. Skenario Mengelola Prestasi

Tabel 3. 9 Use Case Skenario Mengelola Prestasi
No Skenario SK-09
Nama Use Case Mengelola Data Prestasi
Ringkasan Admin melihat data Prestasi
Aktor Admin
Kondisi Awal Sistem menampilkan halaman data Prestasi
Deskripsi 1 Admin menekan tombol Prestasi untuk
melihat Prestasi
Admin menekan tombol tombol Ubah Data
2 untuk mengubah data Prestasi.

Alternatif -
Kondisi Akhir Sistem akan menampilkan halaman data
Prestasi.

10. Skenario Mengakses Beranda

Tabel 3. 10 Use Case Skenario Mengakses Beranda
No Skenario SK-10
Nama Use Case Beranda
Ringkasan Pengunjung mengakses beranda website

Aktor Pengunjung
Kondisi Awal Sistem menampilkan halaman beranda
Deskripsi 1 Pengunjung ketika pertama kali mengakses
website maka akan menampilkan halaman
beranda.

Alternatif -
Kondisi Akhir Sistem akan menampilkan halaman beranda
 25

11. Skenario Mengakses Profil Sekolah

Tabel 3. 11 Use Case Skenario Mengakses Profil Sekolah
No Skenario SK-11
Nama Use Case Profil Sekolah
Ringkasan Pengunjung mengakses halaman Profil
Sekolah
Aktor Pengunjung
Kondisi Awal Sistem menampilkan halaman profil sekolah
Deskripsi 1 Pengunjung menekan tombol profil sekolah
untuk melihat profil sekolah

Alternatif -
Kondisi Akhir Sistem akan menampilkan halaman profil
sekolah

12. Skenario Mengakses Tata Tertib Guru

Tabel 3. 12 Use Case Skenario Mengakses Tata Tertib Guru
No Skenario SK-12
Nama Use Case Tata Tertib Guru
Ringkasan Pengunjung mengakses halaman Tata Terib
Guru
Aktor Pengunjung
Kondisi Awal Sistem menampilkan halaman tata tertib
guru
Deskripsi 1 Pengunjung menekan tombol tata tertib guru
untuk melihat tata tertib guru

Alternatif -
Kondisi Akhir Sistem akan menampilkan halaman tata
 26

tertib guru

13. Skenario Mengakses Tata Tertib Siswa

Tabel 3. 13 Use Case Skenario Mengakses Tata Tertib Siswa
No Skenario SK-13
Nama Use Case Tata Tertib Siswa
Ringkasan Pengunjung mengakses halaman Tata Terib
Siswa
Aktor Pengunjung
Kondisi Awal Sistem menampilkan halaman tata tertib
siswa
Deskripsi 1 Pengunjung menekan tombol tata tertib
siswa untuk melihat tata tertib siswa

Alternatif -
Kondisi Akhir Sistem akan menampilkan halaman tata
tertib siswa

14. Skenario Mengakses Berita

Tabel 3. 14 Use Case Skenario Mengakses Berita
No Skenario SK-14
Nama Use Case Berita
Ringkasan Pengunjung mengakses berita
Aktor Pengunjung
Kondisi Awal Sistem menampilkan halaman beranda
Deskripsi 1 Pengunjung menekan tombol berita untuk
melihat berita.
2 Pengunjung menekan tombol “lihat
selengkapnya” untuk melihat detail dari
berita yang dipilih
 27

Alternatif -
Kondisi Akhir Sistem akan menampilkan halaman berita

15. Skenario Mengakses Galeri

Tabel 3. 15 Use Case Skenario Mengakses Galeri
No Skenario SK-15
Nama Use Case Galeri
Ringkasan Pengunjung mengakses galeri
Aktor Pengunjung
Kondisi Awal Sistem menampilkan halaman galeri
Deskripsi 1 Pengunjung menekan tombol galeri untuk
melihat galeri.
2 Pengunjung menekan tulisan pada judul
galeri untuk melihat detail dari galeri
tersebut.

Alternatif -
Kondisi Akhir Sistem akan menampilkan halaman galeri

16. Skenario Mengakses Kontak

Tabel 3. 16 Use Case Skenario Mengakses Kontak
No Skenario SK-16
Nama Use Case Kontak Kami
Ringkasan Pengunjung mengakses halaman Kontak
Kami
Aktor Pengunjung
Kondisi Awal Sistem menampilkan halaman kontak kami
Deskripsi 1 Pengunjung menekan tombol kontak kami
untuk melihat informasi kontak yang bisa
dihubungi dan lokasi dari SMA 1 Bunut
 28

Hilir

Alternatif -
Kondisi Akhir Sistem akan menampilkan halaman kontak
kami

3.4 Rancangan Database

Database merupakan sekumpulan data yang saling berhubungan dan
memiliki berbagai macam tipe maupun format yang bertujuan untuk memenuhi
kebutuhan pemakai. Adapun rancangan database untuk aplikasi sistem informasi
SMA Negeri 1 Bunut Hilir berbasis web adalah sebagai berikut:

3.4.1 Struktur Tabel

Adapun struktur tabel – tabel yang digunakan pada database dari website
adalah sebagai berikut :

1. Tabel User
Tabel 3. 17 Struktur Tabel User
Nama Field Tipe Data
Id_admin(primary) int(11)
nama_pengguna varchar(50)
username varchar(50)
password varchar(50)
Created_at timestamp
Updated_at timestamp

2. Tabel Berita
Tabel 3. 18 Struktur Tabel Berita
Nama Field Tipe Data
Id_berita(primary) int(11)

Id_admin Int(11)
Judul_berita Varchar(255)
Slug_berita Varchar(255)
 29

Isi_berita Text
Id_kategori Int(11)
Tanggal_berita datetime
Status_berita Int(1)
Gambar_berita Varchar(150)

3. Tabel foto
Tabel 3. 19 Struktur Tabel Foto
Nama Field Tipe Data
Id_foto(primary) int(11)
Id_galeri Int(11)
Ket_foto Varchar(100)
foto Varchar(100)

4. Tabel Galeri
Tabel 3. 20 Struktur Tabel Galeri
Nama Field Tipe Data
Id_foto(primary) int(11)
Nama_galeri Varchar(100)
Sampul_galeri Varchar(100)

5. Tabel Kategori
Tabel 3. 21Struktur Tabel Kategori
Nama Field Tipe Data
Id_kategori(primary) int(11)
Nama_kategori Varchar(100)

6. Tabel Prestasi
Tabel 3. 22 Struktur Tabel Prestasi
Nama Field Tipe Data
Id_prestasi(primary) int(11)
Nama_siswa Int(11)
 30

Bidang_lomba Varchar(100)
Tingkat_lomba Varchar(100)
Tahun_lomba Varchar(5)
Gambar_prestasi Varchar(100)

7. Tabel Profil

Tabel 3. 23 Struktur Tabel Profil

Nama Field Tipe Data
Id_profil(primary) int(11)
visi Varchar(255)
misi text
tujuan text
Struktur_organisasi Varchar(100)

8. Tabel Tertib Guru

Tabel 3.24 Struktur Tabel Tertib Guru

Nama Field Tipe Data

Id_tertibguru(primary) int(11)
Kewajiban_guru text
Larangan_guru text
Sanksi_guru text

3.5 Rancangan User Interface (Antarmuka)

Rancangan Antarmuka adalah sebuah media visual atau preview dari
sebuah konsep desain datar yang diberikan efek visual sehingga hasilnya sangat
tampak atau menyerupai wujud nyata. Rancangan Antarmuka dapat memberikan
gambaran nyata dari sebuah konsep desain bagaimana konsep itu akan terlihat
nantinya. Berikut ini adalah rancangan antarmuka yang dapat ditampilkan
dibawah ini.

3.5.1 Rancangan Halaman Beranda

Halaman beranda adalah tampilan yang muncul saat mengakses alamat

website online SMA Negeri 1 Bunut Hilir. Halaman ini memiliki enam buah
 31

menu yaitu beranda, profil sekolah, berita, galeri, prestasi, kontak kami. Halaman
beranda berisi slider, serta berisi informasi seputar SMA 1 Bunut Hilir Kabupaten
Kapuas Hulu.

Gambar 3. 1 Rancangan Halaman Login

Gambar 3.2 Mockup Halaman Beranda

3.5.2 Rancangan Halaman Profil Sekolah

 32

Pada halaman ini menampilkan profil sekolah berupa struktur organisasi,

visi dan misi sekolah berikut merupakan halaman profil sekolah.

Gambar 3.3 Mockup Halaman Profil Sekolah

3.5.3 Rancangan Halaman Berita

Halaman berita menampilkan berita terkini mengenai SMA 1 Bunut Hilir

seperti berita perlombaan siswa, berita bantuan dinas, serta berita lainnya yang
terkait dengan SMA 1 Bunut Hilir. Berikut merupakan gambar dari mockup
tersebut.
 33

Gambar 3. 2 Rancangan Halaman Kategori Barang

Gambar 3.4 Mockup Halaman Berita

 34

3.5.4 Rancangan Halaman Galeri

Halaman galeri merupakan halaman yang menampilkan galeri mengenai

SMA 1 Bunut Hilir, seperti galeri upacara 17 Agustus, galeri perlombaan 17
Agustus, Galeri Class Meeting, dan lain sebagainya.

Gambar 3.5 Mockup Halaman Galeri

 35

3.5.5 Rancangan Halaman Kontak Kami

Halaman Kontak Kami merupakan halaman yang memuat informasi

mengenai kontak serta lokasi dari sekolah.

Gambar 3. 6 Mockup Halaman Kontak Kami

 BAB IV
HASIL DAN PEMBAHASAN

4.1 Implementasi Tampilan

Berdasarkan hasil analisis dan perancangan sistem di bab sebelumnya,
sistem berhasil dibuat sesuai dengan rancangan yang telah dibuat. Berikut ini
merupakan hasil dari setiap halaman sistem yang dapat dilihat pada pembahasan
berikut ini

4.1.1 Halaman Login

Pada halaman ini admin harus mengisikan username dan password dengan
benar agar dapat masuk ke halaman utama dari website sistem informasi SMA 1
Bunut Hilir, sehingga dapat mengoperasikan aplikasi ini sesuai dengan menu-
menu yang tersedia di tampilan halaman website ini. Adapun tampilan dari
halaman login ini dapat dilihat pada gambar 4.1.

Gambar 4. 1 Halaman Login

4.1.2 Halaman Dashboard

36
 37

Halaman dashboard merupakan halaman utama sistem ini. Dimana

tampilan halaman dashboard ini juga menampilkan beberapa data menu seperti

kelola admin, berita, profil sekolah, galeri, dan kelola prestasi. Adapun tampilan
halaman dashboard ini dapat dilihat dari gambar 4.2
Gambar 4. 2 Halaman dashboard
4.1.3 Halaman Kategori Berita

Pada halaman kategori berita merupakan halaman untuk mengelompokkan

jenis dari berita yang akan ditampilkan. Adapun tampilan dari halaman kategori
berita dapat dilihat pada gambar 4.3.

Gambar 4. 3 Kategori Berita

4.1.4 Halaman Berita

Pada halaman kelola berita, admin dapat melakukan publish berita,

melakukan perubahan terhadap berita, serta dapat menghapus berita. Adapun
tampilan halaman kelola berita seperti gambar 4.4. di bawah ini.
 38

Gambar 4. 4 Halaman Berita

4.1.5 Halaman Profil Sekolah

Pada halaman ini admin dapat melakukan perubahan terhadap profil SMA
Negeri 1 Bunut Hilir meliputi struktur organisasi, visi dan misi serta tujuan dari
SMA 1 Bunut Hilir. Adapun tampilan halaman kelola profil sebagai berikut.
 39

Gambar 4. 5 Halaman Kelola Profil Sekolah

4.1.6 Halaman Tata Tertib Guru

Pada halaman ini admin dapat melakukan perubahan terhadap Tata Tertib
Guru. Adapun tampilan halaman kelola tata tertib guru sebagai berikut.

Gambar 4. 6 Halaman Tata Tertib Guru

4.1.7 Halaman Tata Tertib Siswa
 40

Pada halaman ini admin dapat melakukan perubahan terhadap Tata Tertib
Siswa. Adapun tampilan halaman kelola tata tertib siswa sebagai berikut.

Gambar 4. 7 Halaman Tata tertib Siswa

4.1.8 Halaman Kelola Galeri
 41

Pada tampilan halaman kelola galeri, admin dapat menambahkan,

mengubah serta menghapus galeri. Adapun tampilan halaman galeri seperti di
bawah ini.

Gambar 4. 8 Halaman Kelola Galeri

4.1.9 Halaman Kelola Prestasi

Pada tampilan halaman kelola prestasi, admin dapat menambahkan, mengubah

serta menghapus prestasi. Adapun tampilan halaman prestasi seperti di bawah ini.

Gambar 4. 9 Halaman Kelola Prestasi

 42

4.1.10 Halaman Beranda

Merupakan halaman pertama kali diakses oleh pengguna. Pada halaman ini
menampilkan carausel atau slider foto yang dijadikan sebagai foto utama. Berikut
merupakan tampilan halaman beranda di bawah ini.

Gambar 4. 10 Halaman Beranda

4.1.11 Halaman Profil (Pengunjung)

Merupakan halaman yang menampilkan profil mengenai informasi sekolah seperti

struktur organisasi, visi dan misi serta tujuan dari SMA 1 Bunut Hilir, adapun
tampilan halaman Profil sebagai berikut.
 43

Gambar 4. 11 Halaman Profil

 44

4.1.12 Halaman Berita

Tampilan halaman berita menampilkan berita seputar informasi mengenai

SMA 1 Bunut Hilir. Adapun tampilan halaman berita sebagai berikut.

Gambar 4. 12 Halaman Berita

4.1.13 Halaman Detail Berita

Tampilan halaman detail berita merupakan tampilan yang memuat informasi

detail dari berita yang dipilih oleh pengguna. Adapun tampilan halaman detail
berita seperti gambar di bawah ini.
 45

Gambar 4. 13 Halaman Detail Berita

4.1.14 Halaman Galeri Pengunjung

 46

Tampilan halaman galeri merupakan tampilan yang memuat informasi galeri

seputar SMA Negeri 1 Bunut Hulu, seperti perlombaan, dan ceremony upacara.
Adapun tampilan halaman galeri seperti gambar di bawah ini

Gambar 4. 14 Halaman Galeri Pengunjung

4.1.15 Halaman Kontak

Tampilan halaman kontak merupakan tampilan yang memuat informasi kontak

SMA 1 Bunut Hilir yaitu nomor telpon, email yang bisa dihubungi, dan lokasi
tempat SMA 1 Bunut Hilir berada serta terdapat Google Maps yang menampilkan
map untuk mempermudah pengunjung mengetahui lokasi atau tempat SMA 1
Bunut Hilir berada.

Gambar 4. 15 Halaman Kontak

 47

4.2 Pengujian Sistem

Pengujian merupakan proses yang bertujuan untuk memastikan apakah
semua fungsi sistem dapat bekerja dengan baik. Pengujian yang dilakukan pada
Aplikasi Sistem Informasi SMA 1 Bunut Hilir berbasis website adalah dengan
melakukan pengujian Black Box. Blacbox Testing itu sendiri merupakan pengujian
yang dilakukan untuk mengamati hasil input dan output dari perangkat lunak
tanpa mengetahui struktur kode dari perangkat lunak. Pengujian ini dilakukan
diakhir pembuatan perangkat lunak untuk mengetahui apakah perangkat lunak
dapat berfungsi dengan baik. Adapun hasil pengujian tersebut adalah sebagai
berikut:
Tabel 4.1 Hasil Pengujian
Skenario Uji Hasil yang diharapkan Hasil
No
Pengujian
Admin login ke sistem Admin berhasil login ke

1. dengan menginputkan website dan menampilkan sesuai

username dan password halaman dashboard
Admin menambahkan Kategori Berita berhasil
2. sesuai
kategori berita ditambahkan
Admin menambahkan Tambar berita berhasil
3. sesuai
berita ditambahkan
Admin mengubah profil Data profil sekolah
4. sesuai
sekolah berhasil diubah
Admin mengubah tata Data tertib guru berhasil
5. sesuai
tertib guru diubah
Admin mengubah tata Data tata tertib siswa
6. sesuai
tertib siswa berhasil diubah
Data galeri berhasil
Admin menambahkan
7. ditambahkan sesuai
galeri

Admin menambahkan Data Prestasi berhasil

8. sesuai
prestasi ditambahkan
 BAB V
PENUTUP
5.1 Kesimpulan
Kesimpulan yang dapat diambil dari hasil penelitian tugas akhir inir ini
adalah sebagai berikut :
1. Website Sistem Informasi SMA 1 Bunut Hilir digunakan sebagai media
promosi untuk memperkenalkan informasi umum mengenai SMA Negeri
1 Bunut Hilir ke masyarakat.
2. Hasil pengujian blackbox menunjukkan bahwa seluruh fungsi telah
berjalan sesuai dengan sistem yang diusulkan.
3. Aplikasi ini dibangun dengan bahasa pemrograman PHP menggunakan
framework Codeigniter Version 3.1

5.2 Saran
Adapun saran – saran yang dapat diberikan penulis untuk pengembangan
dan perbaikan sistem ini selanjutnya adalah sebagai berikut :
1. Untuk Kedepannya dengan menambahkan fitur kelola data nilai siswa,
yang dimana berelasi antara mata pelajaran, siswa dengan nilai yang
diberikan.
2. Untuk pengembangan selanjutnya dengan menambahkan cetak laporan,
yaitu data guru, data siswa, dan data nilai siswa.

48
 49

DAFTAR PUSTAKA
[1] Y. Irawan, N. Susanti, and W. A. Triyanto, “Analisa Dan Perancangan
Sistem Informasi Sekolah Berbasis Website Untuk Penyampaian Informasi
Sekolah Dan Media Promosi Kepada Masyarakat,” Simetris J. Tek. Mesin,
Elektro dan Ilmu Komput., vol. 7, no. 1, p. 257, 2016, doi:
10.24176/simet.v7i1.512.
[2] I. E. N, E. Nursanti, and F. Handoko, “Rancangan Sistem Informasi
Manajemen Sekolah Berbasis Web Interaktif Terintegrasi Di Smk Negeri 1
Nabire,” vol. 1, no. 1, pp. 53–59, 2015.
[3] N. N. Wijayanti, “Apa Itu Website? Pengertian, Jenis, dan Manfaatnya!,”
www.niagahoster.co.id, 2021.
https://www.niagahoster.co.id/blog/pengertian-website/ (accessed Mar. 13,
2022).
[4] S. Priyanto and H. K. Siradjuddin, “Sistem Informasi Pendaftaran
Mahasiswa Baru Berbasis Web Pada Politeknik Sains & Teknologi
Wiratama Maluku Utara,” IJIS - Indones. J. Inf. Syst., vol. 3, no. 1, 2018,
doi: 10.36549/ijis.v3i1.38.
[5] S. Sarwindah, “Sistem Pendaftaran Siswa Baru Pada SMP N 1 Kelapa
Berbasis Web Menggunakan Model UML,” J. Sisfokom (Sistem Inf. dan
Komputer), vol. 7, no. 2, pp. 110–115, 2018, doi:
10.32736/sisfokom.v7i2.573.
[6] D. Guzmaliza, “perangkat lunak bantu administrasi keuangan sekolah
tinggi teknologi pagar alam dengan PHP dan MySQL,” J. Ilm. Betrik, vol.
10, no. 01, pp. 28–37, 2019, doi: 10.36050/betrik.v10i01.24.
[7] Ariata, “Apa Itu Bootstrap dan Fungsinya? Panduan Bagi Pemula,”
www.hostinger.co.id, 2021. https://www.hostinger.co.id/tutorial/apa-itu-
bootstrap (accessed Mar. 13, 2021).
[8] M. Zakaria, “Pengertian CodeIgniter Beserta Kegunaan, Kelebihan, serta
Kekurangannya,” www.nesabamedia.com, 2020.
https://www.nesabamedia.com/pengertian-codeigniter/ (accessed Mar. 13,
2022).