Rivaldi Meidon Saputra Dbc118058 Laporan PP

LAPORAN PROGRAM PROFESIONAL
RANCANG BANGUN APLIKASI INFORMASI JADWAL PELAJARAN

SEKOLAH DI SMPN-4 KATINGAN HILIR BERBASIS WEBSITE
DISUSUN OLEH :
NAMA : RIVALDI MEIDON SAPUTRA
NIM : DBC 118 058
JURUSAN TEKNIK INFORMATIKA
FAKULTAS TEKNIK
UNIVERSITAS PALANGKA RAYA
TAHUN 2021
LEMBAR PENGESAHAN
Disusun Oleh :
Rivaldi Meidon Saputra

DBC 118 058
Menyetujui:
Dosen Penguji, Dosen Pembimbing,
Felicia Sylviana,ST.,M.M Drs. Jadiaman Parhusip, M.Kom

NIP. 19760118 200312 2 003 NIP. 19630423 198502 1 001
Mengetahui:
Ketua Jurusan Teknik Informatika,
Abertun Sagit Sahay, ST., M.Eng

NIP. 19751212 200312 1 002
ii
KATA PENGANTAR
Puji syukur kehadirat Tuhan Yang Maha Esa yang atas berkat-Nya yang
melimpah. Sehingga penulis dapat menyelesaikan penulisan Laporan Program
Profesional yang berjudul Rancang Bangun Aplikasi Informasi Jadwal Pelajaran
Sekolah di SMPN-4 Katingan Hilir Berbasis Website. Terima kasih saya ucapkan
kepada Dosen Pembimbing Bapak Drs. Jadiaman Parhusip, M.Kom, dan orang tua
yang telah membantu baik secara moral maupun materi. Terima kasih juga saya
ucapkan kepada teman-teman seperjuangan yang telah mendukung, sehingga bisa
menyelesaikan tugas ini tepat waktu.
Penulis menyadari bahwa laporan Program Profesional ini masih jauh dari kata
sempurna baik segi penyusunan, bahasa, maupun penulisannya. Oleh karena itu,
penulis sangat mengharapkan kritik dan saran yang membangun dari semua pembaca
guna menjadi acuan agar penulis bisa menjadi lebih baik lagi di masa mendatang.
Dengan adanya laporan ini, penulis sangat berharap agar Laporan Akhir Program
Profesional penulis dapat diterima dengan baik dan bermanfaat bagi kita semua,
terkhusus bagi semua mahasiswa Jurusan Teknik Informatika, Fakultas Teknik,
Universitas Palangka Raya.
Palangka Raya, Juni 2021
Rivaldi Meidon Saputra
iii
RIVALDI MEIDON SAPUTRA (DBC 118 058)

Departemen Informatika, Fakultas Teknik, Universitas Palangka Raya
Kampus Tanjung Nyaho, Jalan Yos Sudarso, Palangka Raya 73112
Email: rivaldimeidons@gmail.com
ABSTRAK
Dalam mencari jadwal pelajaran di SMPN-4 Katingan Hilir masih dengan cara
mendatangi sekolah agar mendapatkan informasi jadwal pelajaran. Disinilah murid
yang ingin mendapatkan informasi jadwal pelajaran yang ada di dalam website.
Berdasarkan permasalahan sebelumnya, perancangan website ini bertujuan untuk
membantu murid mendapatkan informasi lebih cepat dan tanpa harus datang ke
sekolah.
Metodologi yang digunakan dalam pembuatan perancangan aplikasi informasi
jadwal pelajaran sekolah di smpn-4 katingan hilir berbasis website ini adalah waterfall
dengan tahapan menurut Summerville tahun 2011. Tahapan tersebut digambar
menggunakan flowchart, analisis kebutuhan dan definisi yang digambarkan melalui
DFD (Data Flow Diagram), ERD (Entity Relationship Diagram), serta implementasi
database dan pengujian unit dengan bahasa pemrograman yang digunakan adalah
integrasi HTML, PHP, CSS, Boostrap, Javascript, dan MySQL serta pengujian sistem
menggunakan metode blackbox.
Website SMPN-4 Katingan Hilir terdapat beberapa fitur yaitu home, profile,
jadwal pelajaran, hubungi kami. Hal ini bertujuan agar murid lebih cepat mendapatkan
informasi jadwal pelajaran yang diinginkan.
Kata kunci : SMPN-4 Katingan Hilir, waterfall, website.
iv
THE DESIGN OD SCHOOL LESSON SCHEDULE APPLICATION AT
SMPN-4 KATINGAN HILIR WEBSITE BASED
RIVALDI MEIDON SAPUTRA (DBC 118 058)

Department of Informatics, Faculty of Engineering, Palangka Raya University
Tanjung Nyaho Campus, Yos Sudarso STREED, Palangka Raya 73112
Email: rivaldimeidons@gmail.com
ABSTRACT
In searching for lesson schedules at SMPN-4 Katingan Hilir, it is still by going

to schools to get information on lesson schedules. This is where students want to get
information on the lesson schedule on the website. Based on the previous problems,
the design of this website aims to help students get information faster and without
having to come to school.
The methodology used in designing an application for information on school
schedule information at SMPN-4 katingan hilir based on this website is a waterfall
with stages according to Summerville in 2011. The stages are drawn using flowcharts,
needs analysis and definitions are described through DFD (Data Flow Diagrams), ERD
(Entity Relationship Diagram), as well as database implementation and unit testing
with the programming language used is the integration of HTML, PHP, CSS, Boostrap,
Javascript, and MySQL as well as system testing using the blackbox method.
This website SMPN-4 Katingan Hilir there are several features, namely home,
profile, lesson schedule, contact us. This is so that students can get the desired lesson
schedule information more quickly.
Keywords : SMPN-4 Katingan Hilir, waterfall , website.
v
DAFTAR ISI
SAMPUL ...................................................................................................................... i
LEMBAR PENGESAHAN ......................................................................................... ii
KATA PENGANTAR ................................................................................................ iii
ABSTRAK .................................................................................................................. iv
ABSTRACT ................................................................................................................. v
DAFTAR ISI ............................................................................................................... vi
DAFTAR TABEL ....................................................................................................... ix
DAFTAR GAMBAR .................................................................................................. xi
BAB I PENDAHULUAN ........................................................................................... 1
1.1. Latar Belakang ........................................................................................ 1
1.2. Rumusan Masalah ................................................................................... 1
1.3. Batasan Masalah ..................................................................................... 2
1.4 Tujuan Penelitian .................................................................................... 4
1.5 Manfaat Penelitian .................................................................................. 5
1.6 Sistematika Penulisan ............................................................................. 5
1.7 Jadwal Kegiatan ...................................................................................... 7
BAB II LANDASAN TEORI ...................................................................................... 8
2.1. Konsep Sistem Informasi Penjadwalan Mata Pelajaran ......................... 8
2.2. Website ................................................................................................. 10
2.2.1. Sejarah Website ........................................................................... 10
2.2.2. Pengertian Website ...................................................................... 11
2.2.3. Jenis-jenis Website ...................................................................... 11
2.3. Basis Data ............................................................................................. 13
vi
2.4. Metode Pengembangan Perangkat Lunak ............................................. 15
2.5. Flowchart .............................................................................................. 16
2.6. Data Flow Diagram (DFD) ................................................................... 20
2.7. Entity Relationship (ERD) .................................................................... 22
2.7.1. Entity ........................................................................................... 22
2.7.2. Atribut ......................................................................................... 23
2.7.3. Hubungan/Relasi ......................................................................... 23
2.8. Perangkat Lunak Pendukung ................................................................ 24
2.8.1. Visual Studio Code...................................................................... 24
2.8.2. SQLyog ....................................................................................... 25
2.8.3. XAMPP ....................................................................................... 26
2.8.4. Edraw Max .................................................................................. 26
2.9. Bahasa Pemrograman ........................................................................... 26
2.9.1. HTML .......................................................................................... 26
2.9.2. CSS .............................................................................................. 27
2.9.3. JavaScribt .................................................................................... 27
2.9.4. PHP .............................................................................................. 28
BAB III METODE PENELITIAN............................................................................. 29
3.1. Analisis Sistem ..................................................................................... 29
3.1.1. Analisis Sistem Lama .................................................................. 29
3.1.2. Analisis Sistem Baru ................................................................... 31
3.2. Analisis Teknologi Dan Pengguna ....................................................... 33
3.2.1. Alat dan Bahan ............................................................................ 33
3.2.2. Analisis Pengguna ....................................................................... 34
3.3. Desain Sistem dan Perangkat Lunak .................................................... 34
vii
3.3.1. Desain Sistem .............................................................................. 34
3.3.2. Desain Tabel Basis Data.............................................................. 49
3.3.3. Desain Navigasi ........................................................................... 55
3.3.3.1. Site Map ........................................................................ 55
3.3.4. Desain Interface ........................................................................... 56
3.3.5. Desain Interface Pengunjung ...................................................... 64
BAB IV HASIL DAN PEMBAHASAN ................................................................... 68
4.1. Implementasi ......................................................................................... 68
4.1.1. Intergrasi dan Implementasi Program ......................................... 68
4.2. Pengujian Sistem................................................................................... 89
BAB V KESIMPULAN DAN SARAN ................................................................... 115
5.1. Kesimpulan ......................................................................................... 115
5.2. Saran ................................................................................................... 115
DAFTAR PUSTAKA ................................................................................................ xv
viii
DAFTAR TABEL
Tabel 1.1 Jadwal Kegiatan ........................................................................................... 7
Tabel 2.1 Jenis-jenis Simbol pada Flowchart ............................................................ 18
Tabel 2.2 Komponen-Komponen Data Flow Diagram Menurut Gane-Sarson dan

Yourdan-DeMarco ..................................................................................................... 21
Tabel 2.3 Simbol-simbol Entity Relationship Diagram (ERD) ................................. 24
Tabel 3.1 Definisi Konteks Diagram ......................................................................... 35
Tabel 3.2 Definisi Storage DFD Level 1 ................................................................... 38
Tabel 3.3 Definisi Proses DFD Level 1 ..................................................................... 40
Tabel 3.4 Tabel admin................................................................................................ 50
Tabel 3.5 Tabel visi_misi ........................................................................................... 50
Tabel 3.6 Tabel guru .................................................................................................. 51
Tabel 3.7 Tabel staff .................................................................................................. 51
Tabel 3.8 Tabel kelas_7a............................................................................................ 52
Tabel 3.9 Tabel kelas_7b ........................................................................................... 52
Tabel 3.10 Tabel kelas_8a.......................................................................................... 53
Tabel 3.11 Tabel kelas_8b ......................................................................................... 53
Tabel 3.12 Tabel kelas_8c.......................................................................................... 53
Tabel 3.13 Tabel kelas_9a.......................................................................................... 54
Tabel 3.14 Tabel kelas_9b ......................................................................................... 54
Tabel 3.15 Tabel admin.............................................................................................. 55
Tabel 4.1 Blackbox Testing Proses Login ................................................................. 90
Tabel 4.2 Blackbox Testing Halaman Utama Admin ................................................ 91
Tabel 4.3 Blackbox Testing Halaman Kelola Admin ................................................ 93
ix
Tabel 4.4 Blackbox Testing Halaman Kelola Visi dan Misi ..................................... 94
Tabel 4.5 Blackbox Testing Halaman Kelola Guru ................................................... 94
Tabel 4.6 Blackbox Testing Halaman Kelola Staff ................................................... 95
Tabel 4.7 Blackbox Testing Halaman Kelola Struktur Sekolah ................................ 96
Tabel 4.8 Blackbox Testing Halaman Kelola Jadwal Pelajaran Kelas 7-A ............... 97
Tabel 4.9 Blackbox Testing Halaman Kelola Jadwal Pelajaran Kelas 7-B ............... 98
Tabel 4.10 Blackbox Testing Halaman Kelola Jadwal Pelajaran Kelas 8-A ............. 99
Tabel 4.11 Blackbox Testing Halaman Kelola Jadwal Pelajaran Kelas 8-B ........... 101
Tabel 4.12 Blackbox Testing Halaman Kelola Jadwal Pelajaran Kelas 8-C ........... 102
Tabel 4.13 Blackbox Testing Halaman Kelola Jadwal Pelajaran Kelas 9-A ........... 103
Tabel 4.14 Blackbox Testing Halaman Kelola Jadwal Pelajaran Kelas 9-B ........... 104
Tabel 4.15 Blackbox Testing Halaman Kelola Hubungi Kami ............................... 105
Tabel 4.16 Blackbox Testing Halaman Utama Pegunjung ...................................... 106
Tabel 4.17 Blackbox Testing Halaman Home ......................................................... 107
Tabel 4.18 Blackbox Testing Halaman Visi dan Misi ............................................. 108
Tabel 4.19 Blackbox Testing Halaman Guru ........................................................... 108
Tabel 4.20 Blackbox Testing Halaman Staff ........................................................... 109
Tabel 4.21 Blackbox Testing Halaman Jadwal Pelajaran Kelas 7-A....................... 109
Tabel 4.22 Blackbox Testing Halaman Jadwal Pelajaran Kelas 7-B ....................... 110
Tabel 4.25 Blackbox Testing Halaman Jadwal Pelajaran Kelas 8-C ....................... 112
Tabel 4.28 Blackbox Testing Halaman Hubungi Kami ........................................... 114
x
DAFTAR GAMBAR
Gambar 2.1 Waterfall Model (Ian Sommervile, 2011) .............................................. 16
Gambar 3.1 Flowchart Sistem Lama.......................................................................... 30
Gambar 3.2 Flowchart Sistem Baru ........................................................................... 32
Gambar 3.3 Diagram Konteks.................................................................................... 34
Gambar 3.4 Data Flow Diagram Level 1 .................................................................. 37
Gambar 3.5 Data Flow Diagram Level 2 proses kelola Data Admin ........................ 47
Gambar 3.6 Data Flow Diagram Level 2 proses kelola Data Guru ........................... 48
Gambar 3.7 Data Flow Diagram Level 2 proses kelola Data Staff ........................... 48
Gambar 3.8 Data Flow Diagram Level 2 proses kelola Data Strukur Sekolah ......... 48
Gambar 3.9 Data Flow Diagram Level 2 proses kelola Data Jadwal Pelajaran ........ 49
Gambar 3.10 Entity Relationship Diagram................................................................ 49
Gambar 3.11 Site maps halaman utama website ........................................................ 56
Gambar 3.12 Desain interface halaman login admin ................................................. 56
Gambar 3.13 Desain interface halaman beranda ....................................................... 57
Gambar 3.14 Desain interface halaman admin .......................................................... 57
Gambar 3.15 Desain interface halaman tambah data admin...................................... 58
Gambar 3.16 Desain interface halaman edit data admin ........................................... 58
Gambar 3.17 Desain interface halaman visi dan misi................................................ 59
Gambar 3.18 Desain interface halaman data guru .................................................... 59
Gambar 3.19 Desain interface halaman edit data guru .............................................. 60
Gambar 3.20 Desain interface halaman data staff ..................................................... 60
Gambar 3.21 Desain interface halaman edit data staff .............................................. 61
Gambar 3.22 Desain interface halaman struktur sekolah .......................................... 61
xi
Gambar 3.23 Desain interface halaman edit data struktur sekolah............................ 62
Gambar 3.24 Desain interface halaman jadwal pelajaran .......................................... 62
Gambar 3.25 Desain interface halaman edit data jadwal pelajaran ........................... 63
Gambar 3.26 Desain interface halaman hubungi kami .............................................. 63
Gambar 3.27 Desain interface home.......................................................................... 64
Gambar 3.28 Desain interface visi dan misi .............................................................. 64
Gambar 3.29 Desain interface guru ........................................................................... 65
Gambar 3.30 Desain interface staff ........................................................................... 65
Gambar 3.31 Desain interface struktur sekolah ......................................................... 65
Gambar 3.32 Desain interface jadwal pelajaran ........................................................ 66
Gambar 3.33 Desain interface hubungi kami ............................................................ 67
Gambar 4.1 Halaman Login ....................................................................................... 69
Gambar 4.2 Pesan gagal login admin......................................................................... 69
Gambar 4.3 Pesan berhasil login................................................................................ 69
Gambar 4.4 Halaman dashboard admin ..................................................................... 70
Gambar 4.5 Link keluar ............................................................................................. 70
Gambar 4.6 Pesan admin keluar................................................................................. 71
Gambar 4.7 Halaman kelola admin ............................................................................ 71
Gambar 4.8 Halaman Tambah Admin ....................................................................... 72
Gambar 4.9 Pesan berhasil tambah admin ................................................................. 72
Gambar 4.10 Halaman edit admin ............................................................................. 72
Gambar 4.11 Pesan berhasil edit admin ..................................................................... 73
Gambar 4.12 Pesan berhasil hapus admin.................................................................. 73
Gambar 4.13 Halaman visi dan misi .......................................................................... 74
Gambar 4.14 Halaman edit visi dan misi ................................................................... 74
xii
Gambar 4.15 Pesan berhasil diedit ............................................................................. 75
Gambar 4.16 Halaman guru dan staff ........................................................................ 75
Gambar 4.17 Halaman Tambah guru ......................................................................... 75
Gambar 4.18 Pesan berhasil tambah guru .................................................................. 76
Gambar 4.19 Halaman Edit guru ............................................................................... 76
Gambar 4.20 Pesan berhasil edit guru....................................................................... 76
Gambar 4.21 Pesan berhasil hapus guru .................................................................... 77
Gambar 4.22 Halaman staff ....................................................................................... 77
Gambar 4.23 Halaman Tambah staff ......................................................................... 78
Gambar 4.24 Pesan berhasil tambah staff .................................................................. 78
Gambar 4.25 Halaman Edit staff ................................................................................ 78
Gambar 4.26 Pesan berhasil edit staff ........................................................................ 79
Gambar 4.27 Pesan berhasil hapus staff .................................................................... 79
Gambar 4.28 Halaman struktur sekolah ..................................................................... 80
Gambar 4.29 Tambah struktur sekolah ...................................................................... 80
Gambar 4.30 Pesan berhasil tambah struktur sekolah ............................................... 81
Gambar 4.31 Edit struktur sekolah ............................................................................ 81
Gambar 4.32 Pesan berhasil edit struktur sekolah ..................................................... 81
Gambar 4.33 Pesan berhasil hapus pesan struktur sekolah ........................................ 82
Gambar 4.34 Halaman jadwal pelajaran .................................................................... 82
Gambar 4.35 Halaman Tambah jadwal pelajaran ...................................................... 83
Gambar 4.36 Pesan berhasil tambah jadwal pelajaran ............................................... 83
Gambar 4.37 Halaman Edit Jadwal Pelajaran ............................................................ 83
Gambar 4.38 Pesan berhasil edit jadwal pelajaran..................................................... 84
Gambar 4.40 Halaman kelola hubungi kami.............................................................. 85
xiii
Gambar 4.41 Pesan berhasil hapus pesan .................................................................. 85
Gambar 4.42 Halaman home ...................................................................................... 86
Gambar 4.43 Halaman website pengunjung visi dan misi ......................................... 86
Gambar 4.44 Halaman website pengunjung guru ...................................................... 87
Gambar 4.45 Halaman website pengunjung staff ...................................................... 87
Gambar 4.46 Halaman website pengunjung struktur sekolah .................................... 87
Gambar 4.47 Halaman website pengunjung jadwal pelajaran ................................... 88
Gambar 4.48 Halaman website pengunjung cetak jadwal pelajaran .......................... 88
Gambar 4.59 Halaman website pengunjung hubungi kami ....................................... 89
xiv
BAB I
PENDAHULUAN
1.1. Latar Belakang
Seiring dengan perkembangan teknologi, aplikasi informasi berbasis

website hadir untuk membantu kebutuhan dalam bidang pendidikan. Adanya
aplikasi informasi berbasis website dapat membantu dalam pengembangan mutu
maupun kinerja dari sebuah sekolah. Karena sistem informasi digunakan untuk
menampilakan informasi dengan mudah dan cepat.
Dalam bidang pendidikan. Apabila siswa/siswi tidak mengetahui atau
kesusahan mendapatkan jadwal pelajaran sekolah, maka siswa/siswi akan
kesekolah untuk menanyakan informasi tentang jadwal pelajaran di sekolah. Hal
ini sangat tidak efisien dalam hal waktu dan biaya transportasi.
Berdasarkan Permasalahan tersebut maka diangkat sebuah materi Program
Profesional dengan judul : “Rancang Bangun Aplikasi Informasi Jadwal Pelajaran
Sekolah Di SMPN-4 Katingan Hilir Berbasis Website”. Yang bertujuan untuk
membantu siswa/siswi dalam mendapatkan informasi jadwal pelajaran yang
mereka butuhkan lebih cepat berdasarkan kelas disekolah.
1.2. Rumusan Masalah
Permasalahan utama yang dibahas dalam “Rancang Bangun Aplikasi

Informasi Jadwal Pelajaran Sekolah Di SMPN-4 Katingan Hilir Berbasis
Website” ini adalah memberikan informasi jadwal pelajaran kepada pengunjung
website yaitu siswa/siswi di SMPN-4 Katingan Hilir.
1
2
1.3. Batasan Masalah
Pembatasan masalah ini dilakukan agar pembuatan website lebih terarah

dan dapat memenuhi tujuan yang ditentukan. Berdasarkan rumusan masalah yang
ada, batasan masalah yang akan dijadikan dasar desain website yang dibuat yaitu
sebagai berikut :
1. Data pada aplikasi berbasis website ini diambil dari SMPN-4 Katingan Hilir.
2. Website ini dibuat menggunakan bahasa pemrograman PHP dan MySQL

berfungsi mengelola database server.
3. Fitur-fitur yang disediakan aplikasi berdasarkan hak akses, adalah sebagai
berikut :
a. Admin
1) Kelola Beranda
Kelola Beranda merupakan halaman untuk mengelola beranda

dimana hanya admin yang dapat menambah, mengedit dan
menghapus data beranda.
2) Kelola Profil Sub Visi dan Misi
Kelola Profil Sub Visi-Misi merupakan halaman untuk

mengelola visi dan misi dimana hanya admin yang dapat mengubah
data visi dan misi.
3) Kelola Profil Sub Guru dan Staff
Kelola Profil Sub Guru dan Staff merupakan halaman untuk

mengelola guru dan staff dimana hanya admin yang dapat mengubah
data guru dan staff.
3
4) Kelola Profil Sub Struktur Sekolah
Kelola Profil Sub Struktur Sekolah merupakan halaman untuk

mengelola struktur sekolah dimana hanya admin yang dapat
mengubah data struktur sekolah.
5) Kelola Jadwal Pelajaran
Kelola Jadwal Pelajaran merupakan halaman untuk mengelola

jadwal pelajaran dimana hanya admin yang dapat menambah,
mengedit dan menghapus data jadwal pelajaran.
6) Kelola Hubungi Kami
Kelola Hubungi Kami merupakan dimana hanya admin yang

dapat melihat kendala atau ada kritik dan saran dari pengunjung
website dan menghapus, mengubah data yang ada di halaman
hubungi kami.
b. Pengunjung
1) Fitur Home
Fitur Home merupakan halaman utama saat mengakses

website Informasi Jadwal Pelajaran Sekolah Di SMPN-4 Katingan
Hilir tersebut.
2) Fitur Profil
Fitur Profil merupakan fitur yang berisi informasi tentang

SMPN-4 Katingan Hilir seperti :
a. Visi dan Misi
b. Guru dan staff

4
c. Struktur Sekolah
3) Fitur Jadwal Pelajaran
Berfungsi untuk membantu siswa/siswi untuk mendapatkan

jadwal pelajaran dengan mudah.
4) Fitur Hubungi Kami
Berfungsi bagi siswa/siswi yang mengalami kendala atau ada

kritik dan saran tentang jadwal pelajaran di SMPN-4 Katingan Hilir
bisa menghubungi admin website secara privasi.
4. Hak Akses
a. Admin
Admin merupakan pengelola website yang memberikan informasi

jadwal pelajaran serta memiliki hak akses penuh terhadap website.
b. Pengunjung
Pengunjung merupakan siswa/siswi di SMPN-4 Katingan Hilir

yang ingin mencari informasi jadwal pelajaran pada website.
1.4 Tujuan Penelitian
Berdasarkan permasalahan yang ada, tujuan dari “Rancang Bangun

Aplikasi Informasi Jadwal Pelajaran Sekolah Di SMPN-4 Katingan Hilir Berbasis
Website” ini adalah:
1. Agar memberikan informasi jadwal pelajaran kepada siswa di SMPN-4

Katingan Hilir.
5
2. Untuk memenuhi persyaratan dalam menyelesaikan Program Profesinal di

Jurusan Teknik Informatika, Fakultas Teknik, Universitas Palangka Raya
tahun 2021.
1.5 Manfaat Penelitian
Adapun manfaat yang didapatkan dari penelitian ini adalah :
1. Bagi penulis
Setelah melaksanakan penelitian diharapkan penulis memiliki cukup

pengetahuan dan pengalaman yang lebih luas, terlebih kaitannya dengan
website serta pemahaman terhadap Mysql dan php. Serta manfaat bagi
siswa/siswi yang membutuhkan informasi jadwal pelajaran.
2. Bagi pengunjung
Membantu pengunjung yaitu siswa/siswi dalam mencari informasi

mengenai jadwal pelajaran di SMPN-4 Katingan Hilir lebih mudah tanpa
mengeluarkan biaya perjalanan.
3. Bagi mahasiswa UPR
Sebagai bahan referensi bagi mahasiswa lainnya yang memerlukan, untuk

pembuatan Program Profesional yang ingin mereka buat.
1.6 Sistematika Penulisan
Penulisan laporan Program Profesional ini disusun dalam lima bab, dengan
menggunakan sistematika sebagai berikut :
6
BAB I PENDAHULUAN
Pada bab ini, diuraikan latar belakang masalah, rumusan masalah,

batasan masalah, tujuan penelitian, manfaat penelitian, sistematika
penulisan dan jadwal kegiatan.
BAB II LANDASAN TEORI

Pada bab ini, berisi penjelasan tentang ilmu yang digunakan
dalam pembuatan laporan dan aplikasi berbasis website. Berisi
pembahasan ilmu yang digunakan dalam penyelesaian batasan masalah
dan rumusan masalah yang ada.
BAB III ANALISIS DAN DESAIN
Bab ini menjelaskan proses desain atau perancangan program

yang dilakukan dalam menyelesaikan proyek mata kuliah program
profesional.
BAB IV IMPLEMENTASI
Bab ini menampilkan hasil pembuatan program dan menjelaskan

bagaimana program ini dijalankan atau digunakan.
BAB V PENUTUP
Pada bab ini akan menguraikan kesimpulan beserta saran yang

didapatkan dari awal pembuatan sampai terselesainya. Kesimpulan
yang berisi ringkasan atas masalah yang dijabarkan. Sedangkan saran
berupa perbaikan atau peningkatan yang diperlukan saat ini ataupun
pada masa yang akan datang.
7
1.7 Jadwal Kegiatan

Adapun jadwal pelaksanaan dalam pembuatan program pada mata kuliah
Program Profesional ini adalah sebagai berikut:
Tabel 1.1 Jadwal Kegiatan
Bulan dan minggu

Rencana
Februari Maret April Mei Juni Juli
Kegiatan PP
III IV I II III IV I II III IV I II III IV I II III IV I
Pengumpulan
Judul
Pengumuman
pembimbing
Analisis Dan
Desain
Implementasi dan
Testing
Pembuatan
Laporan
Pengumpulan
Ujian Tengah
Semester Laporan
Bab I-III
Pengumpulan
Laporan Akhir
PP
Seminar PP
BAB II
LANDASAN TEORI
2.1. Konsep Sistem Informasi Penjadwalan Mata Pelajaran
SMPN-4 Katingan Hilir memiliki sistem kurikulum full day school yaitu
sebuah sistem pembelajaran yang dilakukan dalam kegiatan belajar mengajar
dilakukan sehari penuh dengan memadukan sistem pembelajaan secara intensif
yaitu dengan memberikan tambahan waktu khusus untuk pendalaman selama
lima hari dilaksanakan senin sampai jumat yaitu seharian penuh dari pukul 07.00
WIB sampai dengan pukul 15.00 WIB, waktu istirahat pada pukul 11.00 WIB
sampai dengan pukul 12.00 WIB dan hari sabtu di isi dengan relaksasi atau
kreativitas. Pelaksanaan full day school menurut Baharuddin (Bahruddin,
2010:230) merupakan salah satu alternatif untuk mengatasi berbagai masalah
pendidikan, baik dalam prestasi maupun dalam hal moral atau akhlak. Dengan
mengikuti full day school, orang tua dapat mencegah dan menetralisir
kemungkinan dari kegiatan-kegiatan anak yang menjerumus pada kegiatan yang
negatif. Salah satu alasan para orang tua memilih dan memasukkan anaknya ke
full day school adalah dari segi edukasi siswa.
Sistem informasi penjadwalan mata pelajaran merupakan sistem yang

digunakan untuk menyusun jadwal dan memberikan akses informasi dari jadwal
yang telah dibuat tersebut kepada user yang membutuhkan. Dalam sistem
penjadwalan ini membutuhkan komponen-komponen penting yang akan
dijadwalkan yaitu banyaknya kelas, guru, dan slot waktu yang tersedia untuk
setiap kelas dalam satu minggu hari efektif dimana guru dapat mengajar
bebearapa mata pelajaran dan mata pelajaran bisa diajar oleh beberapa guru. Slot
waktu adalah waktu belajar mengajar yang digunakan dalam satu minggu hari
efektif, yaitu hari senin sampai dengan hari jumat. Ketiga komponen tersebut
memiliki batasan dan syarat (Constraint) tertentu dalam penjadwalan. Di dalam
penjadwalan dikenal dua macam constraint, yaitu hard constraint dan soft
constraint. Hard constraint adalah batasan atau persyaratan yang wajib untuk
9
10
dipenuhi dan tidak boleh dilanggar. Sedangkan soft constraint adalah batasan
yang masih memberi toleransi terhadap pelanggaran, namun sebisa mungkin
untuk meminimalisir pelanggaran (Andang Dwi Jayanto, 2015:13).
Berikut hard constraint yang harus dipenuhi dalam penjadwalan mata pelajaran
di SMPN-4 Katingan Hilir:
1. Tidak boleh menjadwalkan lebih dari satu guru pada waktu dan kelas yang
sama.
2. Satu guru tidak boleh dijadwalkan pada kelas yang berbeda di waktu yang
sama.
3. Satu guru tidak boleh mengajar dua kali tatap muka pada hari dan kelas
yang sama.
Berikut soft constraint penjadwalan mata pelajaran di SMPN-4 Katingan Hilir :

1. Guru dijadwalkan untuk mengajar setiap hari selama satu minggu hari
efektif, yaitu senin sampai dengan jumat.
Agar sistem kurilukum full day mendapatkan hasil jadwal yang baik, maka
sebaiknya batasan dan constraint diatas tidak boleh dilanggar. Karena
penjadwalan yang baik adalah penjadwalan yang tidak mengandung bentrok
antar komponen yang dijadwalkan, dalam hal ini adalah kelas, mata pelajaran,
guru, dan waktu (Andang Dwi Jayanto, 2015:14).
2.2. Website
Dalam landasan teori tentang Website akan menguraikan tentang sejarah

website, pengertian website, jenis-jenis website dan unsur-unsur dalam
penyediaan website seperti bahasa pemrograman, desain website, program
transfer data ke pusat data, dan publikasi website.
2.2.1. Sejarah Website
Website pertama kali ditemukan oleh Sir Timothy John, Tim

Berners-Lee. Pada tahun 1991 website terhubung dengan
jaringan.Ttujuan dari dibuatnya website pada saat itu yakni untuk
mempermudah tukar menukar dan memperbaharui informasi kepada
11
sesama peneliti di tempat mereka bekerja. Dengan demikian pengertian

website saat itu masih sebatas tukar menukar informasi, bukan pengertian
website secara terminologi. (Annisa Saraswati, 2018).
Website dipublikasikan ke publik setelah adanya pengumuman dari
CERN pada tanggal 30 april 1993. CERN menyatakan bahwa website
dapat digunakan secara gratis oleh semua orang. Pada saat ini pengertian
website sudah masuk ke dalam ranah publik karena sudah bisa digunakan
oleh semua orang dimanapun dan kapanpun. (Annisa Saraswati, 2018).
2.2.2. Pengertian Website
Website adalah kumpulan halaman dalam suatu domain yang

memuat tentang berbagai informasi agar dapat dibaca dan dilihat oleh
pengguna internet melalui sebuah mesin pencari. Informasi yang dapat
dimuat dalam sebuah website umumnya berisi mengenai konten gambar,
ilustrasi, video, dan teks untuk berbagai macam kepentingan.
(Muhammad Robith Adani, 2020).
Biasanya untuk tampilan awal sebuah website dapat diakses

melalui halaman utama (homepage) menggunakan browser dengan
menuliskan URL yang tepat. Di dalam sebuah homepage, juga memuat
beberapa halaman web turunan yang saling terhubung satu dengan yang
lain.
2.2.3. Jenis-jenis Website

Berdasarkan penampilan dan respon ketika diakses, website dapat
digolongkan ke dalam dua jenis utama yaitu static website dan dynamic
website. (Ilham Mubarok, 2018). Secara garis besar, website bisa
digolongkan menjadi 3 bagian yaitu:
a. Website Statis
Website statis pada umumnya merupakan informasi yang

disimpan di dalam server dengan format tertentu dan nantinya akan
tampil secara identik untuk semua pengguna. Website jenis ini
12
umumnya dikembangkan dengan menggunakan bahasa pemrograman

HTML ataupun Cascading Style Sheets (CSS).
Pada umumnya website statis ini akan menampilkan bentuk

yang sama ketika mengunjunginya. Meskipun pengelola website
melalukan pembaharuan informasi, biasanya penampilan yang
muncul pada saat kita mengakses website tipe ini tetap sama. Jika
pengelola ingin mengubah penampilan dari website ini, maka
pengelola harus mengubahnya melalui kode-kode program yang
tentunya menuntut pengelola untuk memahami prinsip-prinsip
pemrograman sebuah website.
b. Website Dinamis
Berbeda dengan website statis, website dinamis mempunyai

kemampuan untuk menyesuaikan dirinya sesuai dengan keadaan saat
pengguna mengakses website tersebut dengan memanfaatkan
database. Jika pada website statis kebanyakan diatur menggunakan
HTML dan CSS, maka pada website dinamis ini penampilannya juga
diatur menggunakan bahasa pemrograman seperti Perl, PHP,
Javascript, Phyton dan dan lain sebagainya. Dengan begitu,
pengembang website bisa membuat halaman dengan konsep visual
dan kemampuan interaksi tinggi dengan penggunanya. Beberapa fitur
yang biasanya terdapat pada website dinamis adalah cookies, fasilitas
live chatting, kolom komentar, form registrasi dan lain sebagainya.
c. Interaktif Website
Interaktif Website adalah web yang saat ini memang sedang

booming. Salah satu contoh website interaktif adalah blog dan forum.
Di website ini user bisa berinteraksi, mengajukan topik dan beradu
argument mengenai apa yang menjadi pemikiran mereka. Biasanya
website seperti ini memiliki moderator untuk mengatur supaya topik
13
yang diperbincangkan tidak keluar jalur. Contoh website ini biasanya

adalah website komunitas dan sebagainya. (Yeni Intan, 2017).
2.3. Basis Data
Basis data (bahasa Inggris: database) adalah kumpulan data yang

terorganisir, yang umumnya disimpan dan diakses secara elektronik dari suatu
sistem komputer. Pada saat pangkalan data menjadi semakin kompleks, maka
pangkalan data dikembangkan menggunakan teknik perancangan dan
pemodelan secara formal. (Arifin Mah, 2020).
Konsep dasar dari basis data adalah kumpulan dari catatan-catatan, atau
potongan dari pengetahuan. Sebuah basis data memiliki penjelasan terstruktur
dari jenis fakta yang tersimpan di dalamnya, penjelasan ini disebut skema.
Skema menggambarkan objek yang diwakili suatu basis data, dan hubungan di
antara objek tersebut. Ada banyak cara untuk mengorganisasi skema, atau
memodelkan struktur basis data, ini dikenal sebagai model basis data atau model
data. Model yang umum digunakan sekarang adalah model relasional, yang
menurut istilah layman mewakili semua informasi dalam bentuk tabel-tabel yang
saling berhubungan di mana setiap tabel terdiri dari baris dan kolom (definisi
yang sebenarnya menggunakan terminologi matematika).
Istilah basis data mengacu pada koleksi dari data-data yang saling
berhubungan, dan perangkat lunaknya seharusnya mengacu sebagai sistem
manajemen basis data (database management system/DBMS). Jika konteksnya
sudah jelas, banyak administrator dan programer menggunakan istilah basis data
untuk kedua arti tersebut. Ada puluhan bahkan mungkin ratusan perangkat lunak
Database Management System (DBMS) yang tersedia. Masing-masing memiliki
spesifikasinya sendiri-sendiri. Mulai dari yang sangat sederhana sampai yang
paling kompleks.
DBMS adalah sistem perangkat lunak yang memungkinkan pengguna
untuk mendefinisikan, membuat, memelihara, dan mengontrol akses ke
database. Database Manajement System (DBMS) merupakan software yang
digunakan untuk membangun sebuah sistem basis data yang berbasis
14
komputerisasi. DBMS membantu dalam pemeliharaan dan pengolahan

kumpulan data dalam jumlah besar. Sehingga dengan menggunakan DBMS
tidak menimbulkan kekacauan dan dapat digunakan oleh pengguna sesuai
dengan kebutuhan. Ada 2 bahasa basis data yaitu :
a. Data Definition Language (DDL)
DDL digunakan untuk menggambarkan desain basis data secara

keseluruhan. DDL digunakan untuk membuat tabel baru, memuat indeks,
ataupun mengubah tabel. Hasil kompilasi DDL disimpan di kamus data.
b. Data Manipulation Language (DML)
DML digunakan untuk melakukan menipulasi dan pengambilan data

pada suatu basis data seperti penambahan data baru ke dalam basis data,
menghapus data dari suatu basis data.
Basis Data terdiri dari 2 kata, yaitu Basis dan Data. Basis kurang lebih
diartikan sebagai markas atau gabungan, tempat bersarang / berkumpul.
sedangkan Data adalah refresentatif fakta dunia nyata yang mewakili suatu
objek seperti manusia (pegawai), barang, hewan, peristiwa, konsep, keadaan
dan sebagainya, yang direkam dalam bentuk angka, huruf, simbol, teks,
gambar, bunyi, atau kombinasinya (Fathasyah, 2007).
Basis Data dapat didefinisikan dalam sejumlah sudut pandang seperti :
a. Himpunan Kelompok data (arsip) yang saling berhubungan yang

diorganisasikan sedemikian rupa agar kelak dapat
dimanfaatkankembali dengan cepat dan mudah.
b. Kumpulan data yang saling berhubungan yang disimpan secara

bersama sedemikian rupa dan tanpa pengulangan (redun-dansasi) yang
tidak perlu, untuk memenuhi berbagai kebutuhan.
c. Kumpulan file/tabel/arsip yang saling berhubungan yang disimpan

dalam media penyimpan elektronik.
15
2.4. Metode Pengembangan Perangkat Lunak
Metode Pengembangan web yang digunakan adalah metode Waterfall

menurut Sommerville (2011:29-30). Waterfall model adalah sebuah contoh dari
proses perencanaan, dimana semua proses kegiatan harus terlebih dahulu
direncanakan dan dijadwalkan sebelum dikerjakan. (Sommervile, 2011)
1. Requitments Definition (Definisi Kebutuhan)
Langkah ini merupakan analisa terhadap kebutuhan yang diperlukan

dalam pembuatan untuk mendapatkan pilihan dan solusi fitur apa yang akan
dirancaing. Sehingga kebutuhan tersebut yang akan menjadi acuan sistem
analisis untuk menterjemahkan kedalam bahasa pemrograman, di mana
menetapkan fitur-fitur, kendala dan tujuan sistem.
2. System dan Software Design (Desain Sistem dan Software)
Pada tahap ini dilakukan desain aplikasi yang meliputi desain

interface atau tampilan website dengan menterjemahkan sesuai dengan
syarat/kebutuhan ke dalam sebuah representasi aplikasi yang dapat
diperkirakan demi kualitas sebelum dimulai pengkodean.
3. Implementation and Unit Testing (Implementasi dan pengujian unit)
Tahapan inilah merupakan mengerjakan suatu sistem. Dimana desain

sistem dan desain interface aplikasi yang dirancang sebelumnya di
implementasikan dengan melakukan pembangunan aplikasi yang
diterjemahkan ke kode-kode dalam satu set program atau unit program.
Setelah pengkodean selesai maka akan dilakukan testing terhadap sistem
yang telah dibuat tadi secara unit. Tujuan testing untuk menemukan
kesalahan – kesalahan terhadap sistem tersebut dan kemudian bisa
diperbaiki.
4. Integration and System Testing (Integrasi dan Pengujian Sistem)
Dalam tahapan ini, setiap unit program akan diintegrasikan satu sama
lain atau menyatukan semua unit program untuk diuji secara keseluruhan
16
untuk mendeteksi apakah ada bug atau error didalam website ini agar
terjamin bahwa persyaratan sistem telah dipenuhi atau sudah memenuhi
spesifikasi aplikasinya. Setelah pengujian sistem, perangkat lunak dikirim
ke pengguna.
5. Operation and Maintenance (Operasi dan Pemeliharaan)
Pada tahapan ini sistem diinstal atau mulai digunakan. Melakukan

juga pemeliharaan yang mencakup koreksi dan berbagai kesalahan yang
tidak ditemukan pada tahap-tahap sebelumnya, perbaikan atas implementasi
unit sistem dan pengembangan sistem sebagai penemuan kebutuhan baru,
penambahan fitur dan fungsi baru.
Gambar 2.1 Waterfall Model (Ian Sommervile, 2011)
2.5. Flowchart
Flowchart adalah representasi grafik dari langkah-

langkah yang harus diikuti dalam menyelesaikan suatu permasalahan yang
terdiri atas sekumpulan simbol, dimana masing-
masing simbol merepresentasikan suatu kegiatan tertentu.
Flowchart diawali dengan penerimaan input, pemrosesan input, dan diakhiri
dengan penampilan output. Bagan yang menggambarkan urutan logika dari
suatu prosedur pemecahan masalah. Suatu diagram yang menggambarkan
susunan logika suatu program. (Ikhsan, 2013).
17
Flowchart merupakan gambar atau bagan yang memperlihatkan urutan dan

hubungan antar proses beserta instruksinya. Gambaran ini dinyatakan dengan
simbol. Dengan demikian setiap simbol menggambarkan proses tertentu.
Sedangkan hubungan antar proses digambarkan dengan garis penghubung.
Flowchart ini merupakan langkah awal pembuatan program. Dengan

adanya flowchart urutan poses kegiatan menjadi lebih jelas. Jika ada
penambahan proses maka dapat dilakukan lebih mudah. Setelah flowchart
selesai disusun, selanjutnya pemrogram (programmer) menerjemahkannya ke
bentuk program dengan bahasa pemrograman.
Adapun jenis-jenis Diagram Alir (Flowchart) Flowchart terbagi atas lima

jenis, yaitu :
1. Flowchart System (System Flowchart)
Flowchart system dapat didefinisikan sebagai bagan yang menunjukkan

arus pekerjaan secara keseluruhan dari sistem. Bagan ini menjelaskan urut-
urutan dari prosedur-prosedur yang ada di dalam sistem. Bagan alir sistem
menunjukkan apa yang dikerjakan di sistem
2. Flowchart Dokumen (Document Flowchart)
Merupakan bagan alir yang menunjukkan arus dari laporan dan formulir
termasuk tembusan-tembusannya. Bagan alir dokumen ini menggunakan
simbol-simbol yang sama dengan yang digunakan di dalam bagan alir
sistem
3. Flowchart Skematik (Schematic Flowchart)
Bagan alir ini mirip dengan bagan alir sistem, yaitu untuk menggambarkan
prosedur didalam sistem.
4. Flowchart Program (Program Flowchart)

18
Bagan alir program (program flowchart) merupakan bagan yang

menjelaskan secara rinci langkah-langkah dari proses program. Bagan alir
program dibuat dari derivikasi bagan alir sistem.
Bagan alir program dapat terdiri dari dua macam, yaitu:

a. bagan alir logika program (program logic flowchart) Bagan alir logika
program digunakan untuk menggambarkan tiap-tiap langkah di dalam
program komputer secara logika. Bagan alir logika program ini
dipersiapkan oleh analis sistem.
b. bagan alir program komputer terinci (detailed computer program

flowchart).
5. Flowchart Proses (Process Flowchart)

Flowchart proses merupakan bagan alir yang banyak digunakan di
teknik industri. Bagan alir ini digunakan bagi analis sistem utuk
menggambarkan proses dalam suatu prosedur.
Tujuan dari flowchart adalah untuk menggambarkan suatu tahapan

penyelesaian terhadap suatu masalah secara sederhana, terurai, rapi dan jelas
dapat menggunakan simbol-simbol yang standar.Jenis-jenis symbol pada
Flowchart adalah seperti pada gambar berikut :
Tabel 2.1 Jenis-jenis Simbol pada Flowchart

(Sumber : http://apriliyantosaryadi69.blogspot.com/2015/10/flowchart-dan-
simbolnya.html?view=sidebar)
Simbol Nama Keterangan Simbol Nama Keterangan
Menunjukan
Menunjukan
Simbol input/output
Simbol dokumen
drum menggunakan
Dokumen input&output
magnetik drum
proses manual,
magnetik
19
mekanik atau
komputer
Menunjukan
Simbol
Simbol Menunjukan input/output
Pita
Kegiatan pekerjaan menggunakan
Kertas
Manual manual Pita Kertas
berlubang
berlubang
Menunjukan
Simbol File non- input yang
Simbol
Simpanan komputer yang menggunakan
Keyboard
Offline di arsip online
keyboard
Menunjukan
Simbol input/output
Simbol Menunjukan
Kartu yang
display output
Plong menggunakan
kartu plong
Dalam batch
Menunjukan
control total
kegiatan
Simbol untuk
Simbol proses dari
Pita pencocokan
Proses operasi
Kontrol diproses
program
batch
komputer
processing.
Menunjukan Menunjukan
kegiatan proses
Simbol Simbol
proses di luar transmisi data
Operasi Hubungan
proses operasi melalui
Luar Komunikasi
komputer chanel
komunikasi
20
Simbol Pita input/output Simbol penjelasan
Magnetik menggunakan penjelasan dari suatu
pita magnetik proses
Menunjukan
proses
Simbol Menunjukan
pengurutan Simbol
pengurutan arus dari
data di luar garis alir
offline proses
proses
komputer
input/output penghubung
Simbol menggunakan Simbol ke halaman
Hardisk hard disk penghubung yang masih
sama atau ke
halaman lain
Menunjukan
Simbol input/output
diskette menggunakan
diskette
2.6. Data Flow Diagram (DFD)
Data Flow Diagram (DFD) adalah suatu langkah atau metode untuk
membuat sebuah perancangan sistem yang mana berorientasi pada alur data yang
bergerak kesebuah sistem lainnya. (Ahmad Ansori, 2020).
DFD (Data Flow Diagram) merupakan alat dalam pembuatan suatu model
yang memungkinkan profesional sistem, dan berfungsi untuk menggambarkan
sistem sebagai suatu jaringan metode fungsional yang dihubungkan antara satu
sama lain menggunakan alur data, baik secara komputerisasi maupun manual.
21
DFD ini merupakan suatu aplikasi pembuatan model yang paling banyak
digunakan, khususnya bila fungsi-fungsi sistem adalah bagian yang
kompleks dan lebih penting dari pada data yang dimanipulasi sebuah sistem.
Dengan nama lain, DFD ialah alat pembuatan model yang memberikan
penekanan hanya pada fungsi sistem.
DFD merupakan rancangan program yang mengarah ke alur data melalui
metode penguraian yang dapat digunakan untuk menganalisa maupun rancangan
sistem yang mudah diterima oleh profesional sistem ke pengguna maupun si
pembuat sistem. Adapun simbol-simbol DFD yaitu :
Tabel 2.2 Komponen-Komponen Data Flow Diagram Menurut Gane-Sarson

dan Yourdan-DeMarco
(Sumber : http://program677.blogspot.com/2019/01/dfd_14.html)
Simbol DFD
Yourdon/De Keterangan
Gane/Sarson
Marco
Entitas eksternal dapat
berupa orang/unit terkait
yang berinteraksi
dengan sistem tetapi
diluar sistem.
Process, merupakan
proses seperti
perhitungan aritmatik,
penulisan suatu formula,
atau pe
mbuatan laporan.
Data Flow, dengan arah
khusus dari sumber ke
tujuan.
22
Data Store,
penyimpanan berupa
database pada sistem
komputer atau catatan
manual
2.7. Entity Relationship (ERD)
Model Entity Relationship diperkenalkan pertama kali oleh P.P. Chen pada
tahun 1976. Model ini dirancang untuk menggambarkan persepsi dari pemakai
dan berisi obyek-obyek dasar yang disebut entity dan hubungan antar entity-
entity tersebut yang disebut relationship. Pada model ER ini semesta data yang
ada dalam dunia nyata ditransformasikan dengan memanfaatkan perangkat
konseptual menjadi sebuah diagram, yaitu diagram ER ( Entity Relationship).
Diagram Entity-Relationship melengkapi penggambaran grafik dari
struktur logika. Dengan kata lain Diagram E-R menggambarkan arti dari aspek
data seperti bagaimana entity-entity, atribut-atribut dan relationship-relationship
disajikan. Sebelum membuat Diagram E-R, tentunya kita harus memahami
betul data yang diperlukan dan ruang lingkupnya. Di dalam pembuatan diagram
E-R perlu diperhatikan penentuan suatu konsep apakah merupakan entity,
atribut, atau relationship.
ERD adalah suatu model untuk menjelaskan hubungan antar data dalam
basis data berdasarkan objek-objek dasar data yang mempunyai hubungan antar
relasi. Model data ini juga akan membantu pada saat melakukan analisis dan
perancangan database, karena model data ini akan menunjukkan bermacam-
macam data yang dibutuhkan dan hubungan antar data. (M Fikri Setiadi, 2017).
Ada tiga komponen yang digunakan, yaitu :
2.7.1. Entity
Entity menunjukkan objek-objek dasar yang terkait di dalam

sistem. Objek dasar dapat berupa orang, benda, atau hal lain yang
keterangannya perlu disimpan dalam database. Untuk menggambarkan
23
entitas dilakukan dengan cara mengikuti aturan berikut (M Fikri Setiadi,

2017):
1. Entitas dinyatakan dengan simbol persegi panjang.
2. Nama entitas berupa kata benda tinggal.
3. Nama entitas sebisa mungkin menggunakan nama yang mudah
dipahami dan menyatakan maknanya dengan jelas.
2.7.2. Atribut
Atribut sering juga disebut sebagai properti, merupakan

keterangan-keterangan yang terkait pada sebuah entitas yang perlu
dsimpan sebagai database.
Atribut berfungsi sebagai penjelas sebuah entitas untuk

mengambarkan atribut yang dilakukan dengan mengikuti aturan
sebagai berikut (M Fikri Setiadi, 2017):
a. Atribut dinyatakan dengan simbol ellipse.
b. Nama atribut ditulis dalam simbol ellipse.
c. Nama atribut berupa kata benda tunggal.
d. Nama atribut sebisa mungkin menggunakan nama yang mudah
dipahami dan padat menyatakan maknanya dengan jelas.
e. Atribut dihubungkan dengan entitas yang sesuai dengan
menggunakan garis.
2.7.3. Hubungan/Relasi
Hubungan antara sejumlah entitas yang berasal dari himpunan

entitas yang berbeda. Gambar relasi diwakili oleh simbol belah ketupat.
Relasi juga terbagi menjadi beberapa jenis (Nita Diva, 2019):
a. One to one: setiap entitas hanya bisa mempunyai relasi dengan satu
entitas lain. Contoh: siswa dengan nomor induk siswa
b. One to many: hubungan antara satu entitas dengan beberapa entitas
dan sebaliknya. Contoh: guru dengan murid dan sebaliknya.
24
c. Many to many: setiap entitas bisa mempunyai relasi dengan entitas

lain, dan sebaliknya. Contoh: siswa dan ekstrakurikuler.
Simbol-simbol dalam ERD adalah seperti tabel berikut:
Tabel 2.3 Simbol-simbol Entity Relationship Diagram (ERD)

(Sumber : https://dwyrizkyrd.files.wordpress.com/2018/11/erd.png?w=640)
No. Notasi Keterangan
Persegi panjang,
1. menyatakan himpunan
entitas.
Belah ketupat, menyatakan

2.
himpunan relasi.
Elips, menyatakan atribut

3. (atribut yang berfungsi
sebagai key)
Garis, sebagai penghubung

4. antara entitas, relasi dan
entitas dengan atribut
2.8. Perangkat Lunak Pendukung
2.8.1. Visual Studio Code
Visual Studio Code adalah Sofware yang sangat ringan, namun

kuat editor kode sumbernya yang berjalan dari desktop. Muncul dengan
built-in dukungan untuk JavaScript, naskah dan Node.js dan memiliki
array beragam ekstensi yang tersedia untuk bahasa lain, termasuk C ++,
C # , Python, dan PHP. Hal ini didasarkan sekitar Github ini Elektron,
yang merupakan versi cross-platform dari Atom komponen kode-editing,
berdasarkan JavaScript dan HTML5. Editor ini adalah fitur lengkap
lingkungan pengembangan terpadu (IDE) dirancang untuk pengembang
yang bekerja dengan teknologi cloud yang terbuka Microsoft. Visual
25
Studio Code menggunakan open source NET perkakas untuk

memberikan dukungan untuk ASP.NET C # kode, membangun alat
pengembang Omnisharp NET dan compiler Roslyn. Antarmuka yang
mudah untuk bekerja dengan, karena didasarkan pada gaya explorer
umum, dengan panel di sebelah kiri, yang menunjukkan semua file dan
folder Anda memiliki akses ke panel editor di sebelah kanan, yang
menunjukkan isi dari file yang telah dibuka. Dalam hal ini, editor telah
dikembangkan dengan baik, dan menyenangkan pada mata. Ia juga
memiliki fungsi yang baik, dengan intellisense dan autocomplete bekerja
dengan baik untuk JSON, CSS, HTML, {kurang}, dan Node.js.
Visual Studio Code telah dirancang untuk bekerja dengan alat-alat

yang ada, dan Microsoft menyediakan dokumentasi untuk membantu
pengembang bersama, dengan bantuan untuk bekerja dengan ASP.NET
5, Node.js, dan Microsoft naskah, serta alat-alat yang dapat digunakan
untuk membantu membangun dan mengelola aplikasi Node.js. Visual
Studio Code benar-benar sedang ditargetkan pada pengembang
JavaScript yang ingin alat pengembangannya lengkap untuk scripting
server-side mereka dan yang mungkin ingin usaha dari Node.js untuk
kerangka berbasis NET. Visual Studio Code, adalah belum solid, lintas
platform kode Editor ringan, yang dapat digunakan oleh siapa saja untuk
membangun aplikasi untuk Web.
2.8.2. SQLyog
SQLyog adalah aplikasi client MySQL yang sangat populer

digunakan di Indonesia. Aplikasi ini memiliki banyak fitur yang
memudahkan pengguna melakukan administrasi maupun melakukan
pengolahan data MySQL.
26
2.8.3. XAMPP
XAMPP adalah perangkat lunak bebas, yang mendukung banyak

system operasi, merupakan kompilasi dari beberapa program. XAMPP
merupakan tool yang menyediakan paket perangkat lunak ke dalam satu
buah paket. Dengan menginstall XAMPP maka tidak perlu lagi
melakukan instalasi dan konfigurasi web server Apache, PHP dan
MySQL secara manual. XAMPP akan menginstalasi dan
mengkonfigurasikannya secara otomatis untuk anda atau auto
konfigurasi.
2.8.4. Edraw Max
EdrawMax adalah software diagram teknis bisnis 2D yang

membantu membuat diagram alir, diagram organisasi, peta pikiran,
diagram jaringan, denah lantai, diagram alur kerja, diagram bisnis, dan
diagram teknik. Versi saat ini, EdrawMax 10.5.0 dirilis pada Maret 2020
untuk Microsoft Windows, macOS, dan Linux. EdrawMax adalah alat
pembuatan diagram mirip Visio.
2.9. Bahasa Pemrograman
2.9.1. HTML
HTML adalah singkatan dari HyperText Markup Language yaitu

bahasa pemrograman standar yang digunakan untuk membuat sebuah
halaman web, yang kemudian dapat diakses untuk menampilkan
berbagai informasi di dalam sebuah penjelajah web Internet (Browser).
HTML dapat juga digunakan sebagai link link antara file-file dalam situs
atau dalam komputer dengan menggunakan localhost, atau link yang
menghubungkan antar situs dalam dunia internet. Supaya dapat
menghasilkan tampilan wujud yang terintegerasi Pemformatan hiperteks
27
sederhana ditulis dalam berkas format ASCII sehingga menjadi halaman

web dengan perintah-perintah HTML. (Silvia, 2019).
2.9.2. CSS
CSS adalah singkatan dari Cascading Style Sheets, berisi rangkaian

instruksi yang menentukan bagiamana suatu text akan tertampil di
halaman web. Perancangan desain text dapat dilakukan dengan
mendefinisikan fonts (huruf), colors (warna), margins (ukuran), latar
belakang (background), ukuran font (font sizes) dan lainlain. Elemen-
elemen seperti colors (warna), fonts (huruf), sizes (ukuran) dan spacing
(jarak) disebut juga styles. Cascading Style Sheets juga bisa berarti
meletakkan styles yang berbeda pada lapisan yang berbeda. CSS terdiri
dari style sheet yang memberitahukan browser bagaimana suatu
dokumen akan disajikan. Fitur-fitur baru pada halaman web lama dapat
ditambahkan dengan bantuan style sheet. Saat menggunakan CSS, tidak
perlu lagi untuk menulis font, color atau size pada setiap paragraf, atau
pada setiap dokumen. (Buhori Muslim dan Liza Dayana, 2016:6).
2.9.3. JavaScribt
JavaScript adalah bahasa pemrograman web yang bersifat Client

Side Programming Language. Client Side Programming Language
adalah tipe bahasa pemrograman yang pemrosesannya dilakukan oleh
client. Aplikasi client yang dimaksud merujuk kepada web browser
seperti Google Chrome, Mozilla Firefox, Opera Mini dan sebagainya.
JavaScript pertama kali dikembangkan pada pertengahan dekade
90’an. Meskipun memiliki nama yang hampir serupa, JavaScript berbeda
dengan bahasa pemrograman Java. Untuk penulisannya, JavaScript dapat
disisipkan di dalam dokumen HTML ataupun dijadikan dokumen
tersendiri yang kemudian diasosiasikan dengan dokumen lain yang
dituju. JavaScript mengimplementasikan fitur yang dirancang untuk
28
mengendalikan bagaimana sebuah halaman web berinteraksi dengan

penggunanya (Henderson, 2009:256).
2.9.4. PHP
PHP adalah bahasa pemrograman untuk dijalankan melalui

halaman web, umumnya digunakan untuk mengolah informasi di
internet. Sedangkan dalam pengertian lain PHP adalah singkatan dari
Hypertext Preprocessor yaitu bahasa pemrograman webserverside yang
bersifat open source atau gratis. PHP merupakan scriptyang menyatu
dengan HTML dan berada pada server (Kurniawan, 2010:2).
Perbedaan PHP dan HTML adalah HTML hanya digunakan untuk

menampilkan content Website didalam Browser (IE,Opera, Firefox),
karena singkatan dari HTML itu Hypertext Markup Language, jadi sudah
jelas kalau HTML tidak dapat digunakan untuk menerapkan logika
Pemrograman seperti I/O, Conditional, Looping dan sebagainya.
Sedangkan PHP bersemayam didalam sebuah Sever / Web Server

(Apche, IIS, dsb). PHP Parser akan mem-Parse-kan Sintaks-Sintaks
dalam Bahasa PHP dan mengeluarkan outputnya di Web Server,
misalkan mengeluarkan output berbentuk HTML. PHP memiliki sifat
yang sama dengan Bahasa Pemrograman pada umumnya seperti C Perl
dan PASCAL, sehingga kita bisa melakukan berbagai manipulasi logika
didalamnya, hanya bedanya, PHP berada didalam Server, sehingga client
atau orang lain tidak bisa melihat apa yang terjadi dengan program kita,
program kita hanya kita yang tahu bukan orang lain.
BAB III
METODE PENELITIAN
3.1. Analisis Sistem
Analisis sistem yang dilakuka meliputi analisis sistem lama atau sistem
yang sedang berjalan dan aalisis sistem baru yang direkomendasikan. Analisis
sistem yang sedang berjalan, akan dilakukan analisis kelemahan sistem yang
sedang berjalan serta akan dianalisis rekomendasi sistem barunya. Analisis
sistem yang sedang berjalan ini bertujuan untuk mengetahui kelemahan dari
sistem lama, sehingga nantinya akan diketahui aktifitas yang dilakukan pada
sistem lama. Sehingga dari analisis sistem lama dapat diketahui sistem baru
seperti apa yang diperlukan.
3.1.1. Analisis Sistem Lama
1. Deskripsi Bisnis Proses Mendapatkan Informasi
1) Pihak sekolah datang ke sekolah.

2) Pihak sekolah menempelkan jadwal pelajaran pada papan
informasi.
3) Pengunjung datang ke SMPN-4 Katingan Hilir.
4) Pengunjung mencari informasi tentang SMPN-4 Katingan Hlir.
5) Pengunjung mendapatkan informasi tentang SMPN-4 Katingan
Hilir.
6) Pengunjung melihat visi dan misi SMPN-4 Katingan Hilir.
7) Pengunjung melihat guru dan staff.
8) Pengunjung melihat struktur sekolah SMPN-4 Katingan Hilir.
9) Pengunjung melihat pengumuman jadwal pelajaran pada papan
informasi.
10) Pengunjung mencatat jadwal pelajaran pada papan informasi.
11) Pengunjung pulang mendapatkan informasi.
29
30
2. Flowchart Sistem Lama
Gambar 3.1 Flowchart Sistem Lama
2. Kesimpulan Sistem Lama

Kelemahan sistem lama :
1) Pengunjung datang ke sekolah untuk mendapatkan informasi.
2) Pengunjung menulis jadwal pelajaran pada papan informasi.

31
3) Pengunjung menghubungi pihak sekolah untuk mendapatkan

informasi.
3. Rekomendasi Sistem Baru
Dari Kesimpulan diatas maka dibuatlah Rekomendasi pada sistem

baru untuk menyikapi kelemahan-kelemahan pada sistem lama, yaitu:
1) Pengunjung membuka website SMPN-4 Katingan Hilir.
2) Secara otomatasi sistem web memberikan informasi jadwal

pelajaran kepada pengunjung yang memerlukannya.
3) Data dan informasi dapat diambil oleh pengunjung.
4) Pengunjung dapat membaca informasi tentang SMPN-4 Katingan

Hilir.
5) Data dan informasi di kelola oleh admin.
3.1.2. Analisis Sistem Baru
1. Deskripsi Bisnis Proses Sistem Baru
1) Admin mengakses ke halaman website.
2) Admin melakukan login pada website.
3) Admin mengelola website.
4) Admin menyimpan perubahan di dalam website.
5) Admin logout dan selesai.
6) Pengunjung mengakses website.
7) Pengunjung ke halaman utama website.
8) Pengunjung melihat profil sekolah.
9) Pengunjung mendapatkan informasi jadwal sekolah terbaru.

32
10) Pengunjung dapat menyampaikan secara pribadi kritik dan saran

atau kendala dalam mendapatkan informasi dari website kepada
admin.
11) Pengunjung keluar dari website dan selesai.
2. Flowchart Sistem Baru
Gambar 3.2 Flowchart Sistem Baru

33
3. Kesimpulan Sistem Baru
Pengguna sistem :
1) Pengunjung : siswa yang ingin mendapatkan informasi jadwal

pelajaran di SMPN-4 Katingan Hilir dengan mengunjungi
website.
2) Admin : seorang yang mengelola akun website SMPN-4 Katingan

Hilir.
3.2. Analisis Teknologi Dan Pengguna
3.2.1. Alat dan Bahan
1. Analisis Perangkat Keras (Hardware) yang digunakan dalam

pembuatan Aplikasi berbasis Website ini adalah Laptop Asus TUF
Gaming FX505DT yang memiliki Spesifikasi sebagai berikut:
a. Processor AMD Ryzen 7 3750H with Radeon Vega Mobile Gfx

(8 CPUs), ~2.3GHz
b. NVIDIA GeForce GTX 1650
c. RAM 8GB
d. SSD 512GB
2. Analisis Perangkat Lunak (Software) yang digunakan dalam

pembuatan Aplikasi berbasis Website ini adalah sebagai berikut:
1) Sistem Operasi : Microsoft Windows 10.
2) Text editor : Visual Studio Code.
3) Web server : XAMPP.
4) Browser : Mozilla Firefox.
5) Desain Database : Edraw Max 7.9.
6) Database Editor : SQLyog.

34
3.2.2. Analisis Pengguna
Didalam website Aplikasi Informasi Jadwal Pelajaran Sekolah Di

SMPN-4 Katingan Hilir Berbasis Website ini memiliki 2 pengguna yang
memiliki hak akses berbeda-beda, yaitu sebagai berikut:
a) Admin, mempunyai hak akses untuk mengelola dirinya sendiri
sebagai Admin, lalu admin memiliki hak akses untuk mengelola
beranda, profil sub visi dan misi, profil sub guru dan staff, profil sub
struktur sekolah, jadwal pelajaran, hubungi kami.
b) Pengunjung, merupakan pengguna yang memiliki hak akses untuk

dapat membaca pertanyaan informasi yang terdapat pada website.
3.3. Desain Sistem dan Perangkat Lunak
3.3.1. Desain Sistem
1. Diagram Konteks (Level 0)
Konteks diagram di bawah ini menggambarkan seluruh input ke

sistem atau output dari sistem.
Gambar 3.3 Diagram Konteks
Untuk gambar 3.3 di atas menjelaskan tentang sistem yang akan

digunakan dalam website Aplikasi Informasi Jadwal Pelajaran
35
SMPN-4 Katingan Hilir. dalam sistem ada 2 pengguna yaitu admin

dan pengunjung.
Tabel 3.1 Definisi Konteks Diagram
No. Entitas Luar Keterangan
Siswa/siswi yang mencari

1. Pengunjung
informasi tentang Informasi
Jadwal Pelajaran SMPN-4
Katingan Hilir.
Input :
1. Data hubungi kami
Output :
1. Informasi data profil
2.Informasi data jadwal

pelajaran
3.Informasi data Hubungi

Kami
Petugas atau operator yang

2. Admin
mengelola website.
Input :
1. 1. Data login
2. 2. Data admin
3. 3. Data profil
4. 4. Data jadwal pelajaran
5. 5. Data hubungi kami

36
6. Output :
1. Informasi data login
2. Informasi data admin
3. Informasi data profil
4. Informasi data jadwal

pelajaran
5. Informasi data hubungi

kami
37
2. Data Flow Diagram (DFD) Level 1
Gambar 3.4 Data Flow Diagram Level 1

38
a. Definisi storage
Tempat penyimpanan (storage) yang digunakan pada perancangan

DFD level 1:
Tabel 3.2 Definisi Storage DFD Level 1

No. Nama Penyimpanan Keterangan
1. Tbl_admin Merupakan tabel dalam

basis data untuk
menyimpan data akun dari
admin
2. Tbl_visi_misi Merupakan tabel dalam

basis data untuk
menyimpan data visi dan
misi
3. Tbl_guru Merupakan tabel dalam

basis data untuk
menyimpan data guru
4. Tbl_staff Merupakan tabel dalam

basis data untuk
menyimpan data staff
5. Tbl_struktur_sekolah Merupakan tabel dalam

basis data untuk
menyimpan data struktur
sekolah
6. Tbl_kelas_7a Merupakan tabel dalam

basis data untuk
menyimpan data kelas 7-A
39
7. Tbl_kelas_7b Merupakan tabel dalam

basis data untuk
menyimpan data kelas 7-B

basis data untuk

basis data untuk
10. Tbl_kelas_8c Merupakan tabel dalam

basis data untuk
menyimpan data kelas 8-C

basis data untuk

basis data untuk
13. Tbl_hubungi_kami Merupakan tabel dalam

basis data untuk
menyimpan data dari pesan
pengunjung
40
b. Definisi Proses
Proses yang dilakukan dalam Data Flow Diagram Level 1 :
Tabel 3.3 Definisi Proses DFD Level 1

Nama Aliran Data Aliran Data
No. Keterangan
Proses Input Output
1. Login Data login: Informasi Merupakan
1.Username data login : data admin
2.Password 1.Tampilan untuk masuk
informasi ke dalam
data login sistem untuk
pengolahan
data di
dalam
website
informasi
jadwal
pelajaran
SMPN-4
Katingan
Hilir
2. Kelola Data admin Informasi Merupakan
Admin data admin data untuk
menampilkan
informasi
tentang
admin
3. Kelola Data Visi Informasi Merupakan
Visi dan dan Misi data Visi data untuk
Misi dan Misi menampilkan
informasi
41
tentang
visi dan misi
4. Kelola Data Guru Informasi Merupakan
Guru data guru data untuk
menampilkan
informasi
tentang
guru
5. Kelola Data staff Informasi Merupakan
Staff data staff data untuk
menampilkan
informasi
tentang
staff
6. Kelola Data Informasi Merupakan
Struktur Struktur data data untuk
Sekolah Sekolah Struktur menampilkan
Sekolah informasi
tentang
struktur
sekolah
7. Kelola Data Jadwal Informasi Merupakan
Jadwal Pelajaran data jadwal data untuk
Pelajaran Kelas 7-A pelajaran menampilkan
Kelas 7-A kelas 7-A informasi
tentang
jadwal
pelajaran
kelas 7-A
42

Pelajaran Kelas 7-B pelajaran menampilkan
Kelas 7-B kelas 7-B informasi
tentang
jadwal
pelajaran
kelas 7-B
tentang
jadwal
pelajaran
kelas 8-A
tentang
jadwal
pelajaran
kelas 8-B
Pelajaran Kelas 8-C pelajaran menampilkan
Kelas 8-C kelas 8-C informasi
tentang
jadwal
43
pelajaran
kelas 8-C
tentang
jadwal
pelajaran
kelas 9-A
tentang
jadwal
pelajaran
kelas 9-B
14. Kelola Data Informasi Merupakan
Hubungi Hubungi data data untuk
Kami Kami hubungi menampilkan
kami informasi
tentang
hubungi kami
15. Melihat Informasi Informasi Merupakan
Informasi Visi dan visi dan misi
informasi
Visi dan Misi
Misi untuk untuk
menampilkan
visi dan misi

44

Informasi Guru guru
informasi
Guru
untuk untuk
menampilkan
guru

Informasi Staff staff
informasi
Staff
untuk untuk
menampilkan
staff

Informasi Struktur struktur
informasi
Struktur Sekolah sekolah
Sekolah untuk untuk
menampilkan
Struktur
Sekolah

Informasi jadwal jadwal
informasi
Jadwal pelajaran pelajaran
Pelajaran kelas 7-A kelas 7-A untuk untuk
Kelas 7-A
menampilkan
45
jadwal
pelajaran
kelas 7-A
informasi
Pelajaran kelas 7-B kelas 7-B untuk untuk
Kelas 7-B
menampilkan
jadwal
pelajaran
kelas 7-B

informasi
Kelas 8-A
menampilkan
jadwal
pelajaran
kelas 8-A

informasi
Kelas 8-B
menampilkan
46
jadwal
pelajaran
kelas 8-B

informasi
Pelajaran kelas 8-C kelas 8-C untuk untuk
Kelas 8-C
menampilkan
jadwal
pelajaran
kelas 8-C

informasi
Kelas 9-A
menampilkan
jadwal
pelajaran
kelas 9-A

informasi
Kelas 9-B
menampilkan
47
jadwal
pelajaran
kelas 9-B

Informasi hubungi hubungi
informasi
Hubungi kami kami
Kami untuk untuk
menampilkan
hubungi kami
3. Data Flow Diagram (DFD) Level 2
a. Data Flow Diagram Level 2 Data Admin
Gambar 3.5 Data Flow Diagram Level 2 proses kelola Data

Admin
48
b. Data Flow Diagram Level 2 Data Guru
Gambar 3.6 Data Flow Diagram Level 2 proses kelola

Data Guru
c. Data Flow Diagram Level 2 Data Staff

Data Staff
d. Data Flow Diagram Level 2 Data Struktur Sekolah

Data Strukur Sekolah
49
e. Data Flow Diagram Level 2 Data Jadwal Pelajaran

Data Jadwal Pelajaran
4. Entity Relationship Diagram (ERD)
Gambar 3.10 Entity Relationship Diagram
3.3.2. Desain Tabel Basis Data
Dalam perancangan Website Informasi Jadwal Pelajaran SMPN-4

Katingan Hilir memerlukan database dalam pembuatannya. Website ini
dirancang menggunakan program PHP dan MySQL sebagai
databasenya. Desain Tabel adalah model data yang menggunakan
sejumlah tabel untuk menggambarkan data serta hubungan antara data-
50
data tersebut dengan penyimpanan (dalam DFD). Setiap tabel

mempunyai sejumlah kolom dimana setiap kolom memiliki nama yang
unik. Adapun penjelasan dan keterangan dari masing-masing field dan
table yang ada di database Website Informasi Jadwal Pelajaran SMPN-
4 Katingan Hilir adalah sebagai berikut :
1. Tabel admin
Tabel admin merupakan tabel yang digunakan untuk menyimpan

data admin.
Tabel 3.4 Tabel admin

no nama field tipe data lebar keterangan
1 id_admin int 10 primary key
2 username varchar 50 not null
3 password varchar 100 not null
4 nama_lengkap varchar 100 not null
5 updated timestamp current_timestamp
2. Tabel visi_misi
Tabel visi_misi merupakan tabel yang digunakan untuk

menyimpan data visi_misi
Tabel 3.5 Tabel visi_misi

1 id_visi_misi int 10 primary key
2 judul_visi_misi varchar 100 not null
3 isi_visi_misi text

51
3. Tabel guru
Tabel guru merupakan tabel yang digunakan untuk menyimpan

data guru.
Tabel 3.6 Tabel guru

1 nip_ guru int 20 primary key
2 nama_ guru varchar 100 not null
3 jabatan_guru varchar 100 not null
4. Tabel staff
Tabel staff merupakan tabel yang digunakan untuk menyimpan

data staff.
Tabel 3.7 Tabel staff

1 nip_ staff int 20 primary key
2 nama_ staff varchar 100 not null
3 jabatan_staff varchar 100 not null
5. Tabel kelas_7a
Tabel jadwal_pelajaran merupakan tabel yang digunakan untuk

menyimpan data kelas_7a.
52
Tabel 3.8 Tabel kelas_7a

1 id_kelas7a int 10 primary key
2 nip_guru int 20 foreign key
3 hari varchar 20 not null
4 waktu varchar 100 not null
5 mata_pelajaran varchar 100 not null
6 Nama_guru varchar 100 not null
6. Tabel kelas_7b

menyimpan data kelas_7b.
Tabel 3.9 Tabel kelas_7b

1 id_kelas7b int 10 primary key
7. Tabel kelas_8a

53

1 id_kelas8a int 10 primary key
8. Tabel kelas_8b


1 ide_kelas8b int 10 primary key
9. Tabel kelas_8c

menyimpan data kelas_8c.
Tabel 3.12 Tabel kelas_8c

ide nama field tipe data lebar keterangan
1 ide_kelas8c int 10 primary key

54
10. Tabel kelas_9a


1 ide_kelas9a int 10 primary key
11. Tabel kelas_9b


1 id_kelas9b int 10 primary key

55
12. Tabel hubungi_kami
Tabel hubungi_kami merupakan tabel yang digunakan untuk

menyimpan data hubungi_kami.
Tabel 3.15 Tabel admin

1 id_hub_kami int 10 primary key
2 nama varchar 100 not null
3 email varchar 100 not null
4 pesan text
3.3.3. Desain Navigasi
3.3.3.1. Site Map
Dalam merancang site map, seperti kerangka website yang

menggambarkan denah dari website, memuat informasi
mengenai setiap halaman yang ada di dalam website informasi
jadwal pelajaran smpn-4 katingan hilir.
1. Home
2. Profil
3. Jadwal Pelajaran
4. Hubungi Kami
56
a. Model Layout Split

Tata letak dan susunan yang baik dan proposal dapat
membuat halaman tampilan lebih jelas dan rapi, sehingga
nyaman dilihat dan dibaca, maka dari itu halaman dibagi
berdasarkan model layout split.
Gambar 3.11 Site maps halaman utama website
3.3.4. Desain Interface
1. Desain Interface Halaman Login Admin
Gambar 3.12 Desain interface halaman login admin

57
2. Desain Interface Halaman Beranda
Gambar 3.13 Desain interface halaman beranda
3. Desain Interface Halaman Admin
Gambar 3.14 Desain interface halaman admin

58
4. Desain Interface Halaman Tambah Data Admin
Gambar 3.15 Desain interface halaman tambah data admin
5. Desain Interface Halaman Edit Data Admin
Gambar 3.16 Desain interface halaman edit data admin

59
6. Desain Interface Halaman Visi dan Misi
Gambar 3.17 Desain interface halaman visi dan misi
7. Desain Interface Halaman Data Guru
Gambar 3.18 Desain interface halaman data guru

60
8. Desain Interface Halaman Edit Data Guru
Gambar 3.19 Desain interface halaman edit data guru
9. Desain Interface Halaman Data Staff
Gambar 3.20 Desain interface halaman data staff

61
10. Desain Interface Halaman Edit Data Staff
Gambar 3.21 Desain interface halaman edit data staff
11. Desain Interface Halaman Struktur Sekolah
Gambar 3.22 Desain interface halaman struktur sekolah

62
12. Desain Interface Halaman Edit Data Struktur Sekolah
Gambar 3.23 Desain interface halaman edit data struktur

sekolah
13. Desain Interface Halaman Jadwal Pelajaran
Gambar 3.24 Desain interface halaman jadwal pelajaran

63
14. Desain Interface Halaman Edit Data Jadwal Pelajaran
Gambar 3.25 Desain interface halaman edit data jadwal

pelajaran
15. Desain Interface Halaman Hubungi Kami
Gambar 3.26 Desain interface halaman hubungi kami

64
3.3.5. Desain Interface Pengunjung
1. Desain Interface Home
Gambar 3.27 Desain interface home
2. Desain Interface Visi dan Misi
Gambar 3.28 Desain interface visi dan misi

65
3. Desain Interface Guru
Gambar 3.29 Desain interface guru
4. Desain Interface Staff
Gambar 3.30 Desain interface staff

66
5. Desain Interface Struktur Sekolah
Gambar 3.31 Desain interface struktur sekolah
6. Desain Interface Jadwal Pelajaran
Gambar 3.32 Desain interface jadwal pelajaran

67
7. Desain Interface Hubungi Kami
Gambar 3.33 Desain interface hubungi kami

BAB IV
HASIL DAN PEMBAHASAN
4.1. Implementasi
Setelah desain sistem selesai baik desain basis data maupun desain tampilan,
dan dilakukan penulisan program, website yang telah dibuat akan
diimplementasikan. Website yang dibuat akan di testing terlebih dahulu, jika ada
kesalahan, maka akan kembali ke metodologi sebelumnya yaitu pembuatan Kode
Program Website. Metode testing yang digunakan pada pembuatan website ini
adalah metode blackbox.
4.1.1. Intergrasi dan Implementasi Program

Tahap implementasi merupakan tahapan untuk membuktikan bahwa
website Aplikasi Informasi Jadwal Pelajaran Sekolah Di SMPN-4 Katingan
Hilir Berbasis Website ini berfungsi dengan baik, maka diperlukan skenario
uji coba yang dapat menunjukan bahwa hasil yang diperoleh dalam uji coba
tersebut telah berjalan dengan benar dan sesuai dengan yang diharapkan.
a. Tampilan Website Untuk Admin

1. Halaman Login Admin
a) Halaman Login Admin
Halaman ini merupakan halaman awal saat seorang user yaitu
admin mengakses website ini. Terlihat dalam halaman login
ini form login dengan isi username dan password. Untuk
masuk ke dalam sistem seorang admin harus login terlebih
dahulu.
68
69
Gambar 4.1 Halaman Login
b) Pesan Gagal Login Admin

Pemberitahuan saat username yang dimasukan salah.
Maka akan ditampilkan pemberitahuan berikut ini :
Gambar 4.2 Pesan gagal login admin
c) Pesan Berhasil Login Admin

Apabila admin telah berhasil login maka akan
dtampilkan pemberitahuan seperti berikut :
Gambar 4.3 Pesan berhasil login

70
2. Halaman Dashboard
Apabila seorang admin telah berhasil login maka akan
ditampilkan dashboard dimana sebagai tampilan utama dan jalan
pintas atau shortcut menuju kelola data lainnya.
Gambar 4.4 Halaman dashboard admin
Terlihat pada tampilan awal admin terdapat beberapa bagian

yaitu header, menu, isi dan juga footer. Dalam halaman utama
terlihat pada bagian header terdap icon user, ikon user tersebut
dapat di klik dan akan menampilkan link keluar dari sistem, berikut
tampilan :
Gambar 4.5 Link keluar

71
Apabila link keluar diklik keluar dari website maka akan

tampil pesan berikut :
Gambar 4.6 Pesan admin keluar
3. Halaman Kelola Admin

a) Halaman Kelola Admin
Admin memiliki hak akses untuk kelola akun admin, yaitu
untuk mengubah akun admin pada website. Berikut adalah
tampilan halaman kelola admin :
Gambar 4.7 Halaman kelola admin

72
b) Halaman Tambah Admin
Gambar 4.8 Halaman Tambah Admin
c) Tambah Admin
Pesan yang akan ditampilkan jika admin berhasil
menambah data admin :
Gambar 4.9 Pesan berhasil tambah admin
d) Halaman Edit Admin
Gambar 4.10 Halaman edit admin

73
e) Edit Admin
Apabila admin telah berhasil mengubah data akun admin
maka akan ditampilkan pesan sukses berikut :
Gambar 4.11 Pesan berhasil edit admin
f) Hapus Admin
Berikut pesan jika admin berhasil menghapus data kelola
admin :
Gambar 4.12 Pesan berhasil hapus admin
4. Halaman Kelola Profil

Pada halaman kelola profil terdapat 3 sub menu yaitu visi dan
misi, guru dan staff, dan struktur sekolah.
a) Halaman Visi dan Misi

Halaman visi dan misi merupakan halaman dimana
dituliskan visi dan misi tentang SMPN-4 Katingan Hilir. Berikut
tampilan halaman visi dan misi :
74
Gambar 4.13 Halaman visi dan misi
b) Halaman Edit Visi dan Misi

Pesan yang akan ditampilkan ketika admin berhasil
mengedit atau mengubah isi dari visi dan misi tersebut. Berikut
tampilan pesan :
Gambar 4.14 Halaman edit visi dan misi
c) Edit Visi dan Misi

Berikut pesan jika admin berhasil mengedit data kelola
visi dan misi :
75
Gambar 4.15 Pesan berhasil diedit
d) Halaman Guru
Halaman guru merupakan halaman dimana terdapat guru
dan staff yang bertugas di SMPN-4 Katingan Hilir. Berikut
tampilan halaman guru :
Gambar 4.16 Halaman guru dan staff
e) Halaman Tambah Guru
Gambar 4.17 Halaman Tambah guru

76
f) Tambah Guru
Berikut pesan jika admin berhasil menambahkan data kelola
guru :
Gambar 4.18 Pesan berhasil tambah guru
g) Halaman Edit Guru
Gambar 4.19 Halaman Edit guru
h) Edit Guru
Berikut pesanyang akan muncul jika admin berhasil
mengedit data guru :
Gambar 4.20 Pesan berhasil edit guru

77
i) Hapus Guru
menghapuskan data guru :
Gambar 4.21 Pesan berhasil hapus guru
j) Halaman Staff
Halaman staff merupakan halaman dimana terdapat staff
yang bertugas di SMPN-4 Katingan Hilir. Berikut tampilan
halaman staff :
Gambar 4.22 Halaman staff

78
k) Halaman Tambah Staff
Gambar 4.23 Halaman Tambah staff
l) Tambah Staff
menambahkan data staff :
Gambar 4.24 Pesan berhasil tambah staff
m) Halaman Edit Staff
Gambar 4.25 Halaman Edit staff

79
n) Edit Staff
Berikut pesan yang akan muncul jika admin berhasil
mengedit data staff :
Gambar 4.26 Pesan berhasil edit staff
o) Hapus Staff
menghapus data staff :
Gambar 4.27 Pesan berhasil hapus staff

80
p) Halaman Struktur Sekolah

Halaman struktur sekolah merupakan halaman dimana
terdapat guru dan staff yang bertugas di SMPN-4 Katingan
Hilir. Berikut tampilan halaman guru :
Gambar 4.28 Halaman struktur sekolah
q) Halaman Tambah Struktur Sekolah
Gambar 4.29 Tambah struktur sekolah

81
r) Tambah Struktur Sekolah

menambahkan data struktur sekolah:
Gambar 4.30 Pesan berhasil tambah struktur sekolah
s) Halaman Edit Struktur Sekolah
Gambar 4.31 Edit struktur sekolah
t) Edit Struktur Sekolah

mengedit data struktur sekolah:
Gambar 4.32 Pesan berhasil edit struktur sekolah

82
u) Hapus Struktur Sekolah

menghapus data struktur sekolah:
Gambar 4.33 Pesan berhasil hapus pesan struktur sekolah
5. Halaman Kelola Jadwal Pelajaran

a) Halaman Jadwal Pelajaran
Halaman jadwal pelajaran merupakan halaman dimana
dituliskan jadwal pelajaran yang ada di SMPN-4 Katingan Hilir.
Berikut tampilan halaman jadwal pelajaran :
Gambar 4.34 Halaman jadwal pelajaran
b) Halaman Tambah Jadwal Pelajaran

Halaman tambah jadwal pelajaran ini dimana admin
memasukan nama guru, pelajaran, kelas, hari waktu. Berikut
tampilan halaman tambah jadwal pelajaran :
83
Gambar 4.35 Halaman Tambah jadwal pelajaran
c) Tambah Jadwal Pelajaran

Pesan yang akan ditampilkan jika admin berhasil
menambah data jadwal pelajaran :
Gambar 4.36 Pesan berhasil tambah jadwal pelajaran
d) Halaman Edit Jadwal Pelajaran
Gambar 4.37 Halaman Edit Jadwal Pelajaran

84
e) Edit Jadwal Pelajaran

menghapus data mata pelajaran :
Gambar 4.38 Pesan berhasil edit jadwal pelajaran
f) Hapus Jadwal Pelajaran
Gambar 4.39 Pesan berhasil hapus jadwal pelajaran
6. Halaman Kelola Hubungi Kami

a) Halaman Kelola Hubungi Kami
Halaman hubungi kami merupakan halaman dimana
tempat kritik dan saran yang dikirim oleh pengunjung website
SMPN-4 Katingan Hilir. Berikut tampilan halaman hubungi
kami :
85
Gambar 4.40 Halaman kelola hubungi kami
b) Hapus Pesan
menghapus data hubugni kami :
Gambar 4.41 Pesan berhasil hapus pesan
b. Tampilan Website Untuk Pengunjung

1. Halaman Home
Pada halaman home pengunjung ini terdapat bagian header
dengan menu website yaitu home, profil, jadwal pelajaran, dan
hubungi kami. Serta terdapat juga background gambar dan tulisan
selamat datang, serta footer.
86
Gambar 4.42 Halaman home
2. Halaman Profil
Pada halaman profil pengunjung ini terdapat 3 dropdown
halaman yaitu visi dan misi, guru dan staff, dan struktur sekolah
Berikut tampilan masing-masing halaman :
a) Visi dan Misi
Gambar 4.43 Halaman website pengunjung visi dan misi
b) Guru dan Staff

Pada halaman guru dan staff pengunjung ini terdapat 2
dropdown pilihan halaman yaitu guru, dan staff. Berikut
tampilan masing-masing halaman :
87
Gambar 4.44 Halaman website pengunjung guru
Gambar 4.45 Halaman website pengunjung staff
c) Struktur Sekolah
Gambar 4.46 Halaman website pengunjung struktur

sekolah
88
3. Halaman Jadwal Pelajaran

Pada halaman jadwal pelajaran pengunjung ini terdapat
tombol yang berfungsi untuk mencetak jadwal pelajaran. Berikut
tampilan masing-masing halaman :
Gambar 4.47 Halaman website pengunjung jadwal pelajaran
Gambar 4.48 Halaman website pengunjung cetak jadwal

pelajaran
89
4. Halaman Hubungi Kami

Halaman hubungi kami pengunjung ini merupakan halaman
yang digunakan pengunjung untuk mengajukan kendala atau ada
kritik dan saran kepada admin website. Berikut tampilan halaman :
Gambar 4.59 Halaman website pengunjung hubungi kami
4.2. Pengujian Sistem

Setelah melakukan implementasi, dilakukan pengujian terhadap sistem
dengan tujuan untuk melihat semua kesalahan dan kekurangan yang ada pada
sistem. Pengujian sistem pada website ini dilakukan dengan menggunkan metode
blackbox. Pada pengujian ini fokus pada kebutuhan fungsional dan output sesuai
dengan yang diharapkan atau sebaliknya.
Dalam pengujian sistem ini digunkan metode black box yaitu dilakukan
dengan membuat kasus yang bersifat mencoba semua fungsi dengan memakai
perangkat lunak apakah sesuai dengan spesifikasi yang dibutuhkan. Kasus uji
yang dibuat untuk melakukan pengujian black box harus dibuat dengan kasus
yang benar dan kasus yang salah. Berikut beberapa proses yang akan dilakukan
pengujian yaitu :
1. Kegiatan yang dilakukan admin
2. Kegiatan yang dilakukan pengunjung
Adapun hasil testing black box adalah sebagai berikut :

90
a. Pengujian Yang Dilakukan Admin

1) Proses Login Admin
Pengujian halaman Login Admin saat setelah login dapat dilihat pada
Tabel 4.1 berikut (OK) merupakan tanda yang berarti halaman diuji
berhasil.
Tabel 4.1 Blackbox Testing Proses Login
Kondisi
Kondisi Hal Yang
No Yang Kondisi Hasil Hasil
Awal Dilakukan
Diinginkan
1 Melakuka Mengisi Masuk ke Masuk ke OK

login dan username dan halaman halaman Admin
Klik Button password Admin
login yang benar
2 Melakukan Mengisi Login gagal, Login gagal, OK

login dan username ditampilkan ditampilkan pesan
Klik Button yang benar pesan error error dan kembali
login dan password dan kembali ke halaman login
yang salah ke halaman
login
3 Melakuka Mengisi Login gagal, Login gagal, OK

login dan username ditampilkan ditampilkan pesan
Klik Button yang salah pesan error error dan kembali
login dan password dan kembali ke halaman login
yang salah ke halaman
login
4 Klik Button Klik Button Masuk Ke Masuk Ke OK

Back Back Halaman Halaman Beranda
Beranda Pengunjung
Pengunjung
91
2) Halaman Utama Admin

Pengujian halaman utama admin saat setelah login dapat dilihat pada
Tabel 4.2 berikut (OK) merupakan tanda yang berarti halaman yang diuji
berhasil.
Tabel 4.2 Blackbox Testing Halaman Utama Admin
Hal Yang
No Kondisi Awal Kondisi Hasil Hasil
Diinginkan
1 Klik Menu Masuk Ke Masuk Ke Halaman OK

Dashboard Halaman Dashboard
Dashboard
2 Klik Menu Kelola Masuk Ke Masuk Ke Halaman OK

Admin Halaman Kelola Kelola Admin
Admin
3 Klik Menu Kelola Tampilkan Sub- Tampilkan Sub-Menu OK

Profil Menu Profil Profil
4 Klik Sub-Menu Masuk Ke Masuk Ke Halaman OK

Profil Visi dan Halaman Visi dan Visi dan Misi
Misi Misi

Profil Guru dan Halaman Guru dan Guru dan Staff
Staff Staff
6 Klik Guru dan Masuk Ke Masuk Ke Halaman OK

Staff Menu Guru Halaman Guru Guru
7 Klik Guru dan Masuk Ke Masuk Ke Halaman OK

Staff Menu Staff Halaman Staff Staff

Profil Struktur Halaman Struktur Struktur Sekolah
Sekolah Sekolah
92

Jadwal Pelajaran Halaman Jadwal Jadwal Pelajaran
Pelajaran
8 Klik Menu Kelola Masuk Ke Halaman Masuk Ke Halaman OK

Jadwal Pelajaran Jadwal Pelajaran Jadwal Pelajaran Kelas
Kelas 7-A Kelas 7-A 7-A

Jadwal Pelajaran Jadwal Pelajaran Jadwal Pelajaran
Kelas 7-B Kelas 7-B Kelas 7-B

Kelas 8-A Kelas 8-A Kelas 8-A


Kelas 8-C Kelas 8-C Kelas 8-C

Kelas 9-A Kelas 9-A Kelas 9-A


Hubungi Kami Halaman Hubungi Hubungi Kami
Kami
93
3) Pengujian Setiap Menu

a) Kelola Admin
Pengujian halaman kelola admin saat setelah login dapat dilihat
pada Tabel 4.3 berikut (OK) merupakan tanda yang berarti halaman yang
diuji berhasil.
Tabel 4.3 Blackbox Testing Halaman Kelola Admin
Kondisi
Kondisi Hal Yang
Awal Dilakukan
Diinginkan
Masuk ke
Masuk ke Form
Klik Link Klik Link Form
1 Mengubah Data OK
Edit Edit Mengubah
Admin
Data Admin
Melakukan Mengisikan Data Admin Data Admin

2 Ubah Data Data Baru Berhasil Berhasil OK
Admin Admin Diperbaharui Diperbaharui
Masuk ke
Masuk ke Form
3 Menambah Data OK
Tambah Tambah Menambah
Admin
Data Admin
Melakukan Mengisikan Data Admin Data Admin

4 Tambah Data Baru Berhasil Berhasil OK
Data Admin Admin Ditambah Ditambah
Data Admin
Klik Link Klik Link Data Admin
5 Berhasil OK
Hapus Hapus Berhasil Dihapus
Dihapus
94
b) Kelola Visi dan Misi
Pengujian halaman kelola visi dan misi saat setelah login dapat
dilihat pada Tabel 4.4 berikut (OK) merupakan tanda yang berarti
halaman yang diuji berhasil.
Tabel 4.4 Blackbox Testing Halaman Kelola Visi dan Misi
Kondisi
Kondisi Hal Yang
Awal Dilakukan
Diinginkan
Masuk ke
Form Masuk ke Form
Klik Link Klik Link
1 Mengubah Mengubah Data OK
Edit Edit
Data Visi dan Visi dan Misi
Misi
Melakukan
Mengisikan Data Visi dan Data Visi dan
Ubah Data
2 Data Baru Misi Berhasil Misi Berhasil OK
Visi dan
Visi dan Misi Diperbaharui Diperbaharui
Misi
c) Kelola Guru
Pengujian halaman kelola guru saat setelah login dapat dilihat pada
berhasil.
Tabel 4.5 Blackbox Testing Halaman Kelola Guru
Kondisi
Kondisi Hal Yang
Awal Dilakukan
Diinginkan
95
Masuk ke
Masuk ke Form
1 Mengubah Data OK
Edit Edit Mengubah
Guru
Data Guru
Melakukan Mengisikan Data Guru Data Guru

Guru Guru Diperbaharui Diperbaharui
Masuk ke
Masuk ke Form
3 Menambah Data OK
Guru
Data Guru
Melakukan Mengisikan Data Guru Data Guru

Data Guru Guru Ditambah Ditambah
Data Guru
Klik Link Klik Link Data Guru
5 Berhasil OK
Dihapus
d) Kelola Staff
Pengujian halaman kelola staff saat setelah login dapat dilihat pada
berhasil.
Tabel 4.6 Blackbox Testing Halaman Kelola Staff
Kondisi
Kondisi Hal Yang
Awal Dilakukan
Diinginkan
Masuk ke
Masuk ke Form
1 Mengubah Data OK
Edit Edit Mengubah
Staff
Data Staff
96
Melakukan Mengisikan Data Staff Data Staff

Staff Staff Diperbaharui Diperbaharui
Masuk ke
Masuk ke Form
3 Menambah Data OK
Staff
Data Staff
Melakukan Mengisikan Data Staff Data Staff

Data Staff Staff Ditambah Ditambah
Data Staff
Klik Link Klik Link Data Staff
5 Berhasil OK
Dihapus
e) Kelola Struktur Sekolah
Pengujian halaman kelola struktur sekolah saat setelah login dapat

Tabel 4.7 Blackbox Testing Halaman Kelola Struktur Sekolah
Kondisi
Kondisi Hal Yang
Awal Dilakukan
Diinginkan
Masuk ke
Form Masuk ke Form
Klik Link Klik Link
1 Mengubah Mengubah Data OK
Edit Edit
Data Struktur Struktur Sekolah
Sekolah
Data Struktur
2 Melakukan Mengisikan Data Struktur Sekolah Berhasil OK
Ubah Data Data Baru Sekolah Diperbaharui
97
Struktur Struktur Berhasil

Sekolah Sekolah Diperbaharui
Masuk ke
Form Masuk ke Form
Klik Link Klik Link
3 Menambah Menambah Data OK
Tambah Tambah
Data Struktur Struktur Sekolah
Sekolah
Melakukan
Mengisikan Data Struktur
Tambah Data Struktur
Data Baru Sekolah
4 Data Sekolah Berhasil OK
Struktur Berhasil
Struktur Ditambah
Sekolah Ditambah
Sekolah
Data Struktur
Data Struktur
Klik Link Klik Link Sekolah
5 Sekolah Berhasil OK
Hapus Hapus Berhasil
Dihapus
Dihapus
f) Kelola Jadwal Pelajaran Kelas 7-A
Pengujian halaman kelola jadwal pelajaran saat setelah login dapat

Tabel 4.8 Blackbox Testing Halaman Kelola Jadwal Pelajaran Kelas 7-A
Kondisi
Kondisi Hal Yang
Awal Dilakukan
Diinginkan
Masuk ke
Form Masuk ke Form
Klik Link Klik Link Mengubah Mengubah Data
1 OK
Edit Edit Data Jadwal Jadwal Pelajaran
Pelajaran Kelas 7-A
Kelas 7-A
98
Melakukan Mengisikan Data Jadwal

Data Jadwal
Ubah Data Data Baru Pelajaran
Pelajaran Kelas 7-
2 Jadwal Jadwal Kelas 7-A OK
A Berhasil
Pelajaran Pelajaran Berhasil
Diperbaharui
Kelas 7-A Kelas 7-A Diperbaharui
Masuk ke
Form Masuk ke Form
Klik Link Klik Link Menambah Menambah Data
3 OK
Tambah Tambah Data Jadwal Jadwal Pelajaran
Pelajaran Kelas 7-A
Kelas 7-A

Data Jadwal
Tambah Data Baru Pelajaran
Pelajaran Kelas 7-
4 Data Jadwal Jadwal Kelas 7-A OK
A Berhasil
Ditambah
Kelas 7-A Kelas 7-A Ditambah
Data Jadwal
Data Jadwal
Pelajaran
Klik Link Klik Link Pelajaran Kelas 7-
5 Kelas 7-A OK
Hapus Hapus A Berhasil
Berhasil
Dihapus
Dihapus
g) Kelola Jadwal Pelajaran Kelas 7-B

Tabel 4.9 Blackbox Testing Halaman Kelola Jadwal Pelajaran Kelas 7-B
Kondisi
Kondisi Hal Yang
Awal Dilakukan
Diinginkan
Klik Link Klik Link Masuk ke

1 Masuk ke Form OK
Edit Edit Form
Mengubah Data
Mengubah
99
Data Jadwal Jadwal Pelajaran

Pelajaran Kelas 7-B
Kelas 7-B

Data Jadwal
Pelajaran Kelas 7-
2 Jadwal Jadwal Kelas 7-B OK
B Berhasil
Diperbaharui
Kelas 7-B Kelas 7-B Diperbaharui
Masuk ke
Form Masuk ke Form
3 OK
Pelajaran Kelas 7-B
Kelas 7-B
Melakukan Mengisikan
Data Jadwal Data Jadwal
Tambah Data Baru
Pelajaran Pelajaran Kelas 7-
4 Data Jadwal Jadwal OK
Berhasil B Berhasil
Pelajaran Pelajaran
Ditambah Ditambah
Kelas 7-B Kelas 7-B
Data Jadwal
Data Jadwal
Pelajaran
5 Kelas 7-B OK
Hapus Hapus B Berhasil
Berhasil
Dihapus
Dihapus
h) Kelola Jadwal Pelajaran Kelas 8-A

Kondisi
Kondisi Hal Yang
Awal Dilakukan
Diinginkan
100
Masuk ke
Form Masuk ke Form
1 OK
Pelajaran Kelas 8-A
Kelas 8-A

Data Jadwal
Pelajaran Kelas 8-
A Berhasil
Diperbaharui
Masuk ke
Form Masuk ke Form
3 OK
Pelajaran Kelas 8-A
Kelas 8-A

Data Jadwal
Pelajaran Kelas 8-
A Berhasil
Ditambah
Data Jadwal
Data Jadwal
Pelajaran
5 Kelas 8-A OK
Berhasil
Dihapus
Dihapus
i) Kelola Jadwal Pelajaran Kelas 8-B

101
Kondisi
Kondisi Hal Yang
Awal Dilakukan
Diinginkan
Masuk ke
Form Masuk ke Form
1 OK
Pelajaran Kelas 8-B
Kelas 8-B

Data Jadwal
Pelajaran Kelas 8-
B Berhasil
Diperbaharui
Masuk ke
Form Masuk ke Form
3 OK
Pelajaran Kelas 8-B
Kelas 8-B

Data Jadwal
Pelajaran Kelas 8-
4 Data Jadwal Jadwal Kelas 8-B OK
B Berhasil
Ditambah
Kelas 8-B Kelas 8-B Ditambah
Data Jadwal
Data Jadwal
Pelajaran
5 Kelas 8-B OK
Berhasil
Dihapus
Dihapus
102
j) Kelola Jadwal Pelajaran Kelas 8-C

Tabel 4.12 Blackbox Testing Halaman Kelola Jadwal Pelajaran Kelas 8-C
Kondisi
Kondisi Hal Yang
Awal Dilakukan
Diinginkan
Masuk ke
Form Masuk ke Form
1 OK
Pelajaran Kelas 8-C
Kelas 8-C

Data Jadwal
Pelajaran Kelas 8-
2 Jadwal Jadwal Kelas 8-C OK
C Berhasil
Diperbaharui
Kelas 8-C Kelas 8-C Diperbaharui
Masuk ke
Form Masuk ke Form
3 OK
Pelajaran Kelas 8-C
Kelas 8-C

Data Jadwal
Pelajaran Kelas 8-
4 Data Jadwal Jadwal Kelas 8-C OK
C Berhasil
Ditambah
Kelas 8-C Kelas 8-C Ditambah
103
Data Jadwal
Data Jadwal
Pelajaran
5 Kelas 8-C OK
Hapus Hapus C Berhasil
Berhasil
Dihapus
Dihapus
k) Kelola Jadwal Pelajaran Kelas 9-A

Kondisi
Kondisi Hal Yang
Awal Dilakukan
Diinginkan
Masuk ke
Form Masuk ke Form
1 OK
Pelajaran Kelas 9-A
Kelas 9-A

Data Jadwal
Pelajaran Kelas 9-
A Berhasil
Diperbaharui
Masuk ke
Form Masuk ke Form
3 OK
Pelajaran Kelas 9-A
Kelas 9-A
104

Data Jadwal
Pelajaran Kelas 9-
A Berhasil
Ditambah
Data Jadwal
Data Jadwal
Pelajaran
5 Kelas 9-A OK
Berhasil
Dihapus
Dihapus
l) Kelola Jadwal Pelajaran Kelas 9-B

Kondisi
Kondisi Hal Yang
Awal Dilakukan
Diinginkan
Masuk ke
Form Masuk ke Form
1 OK
Pelajaran Kelas 9-B
Kelas 9-B

Data Jadwal
Pelajaran Kelas 9-
B Berhasil
Diperbaharui
Klik Link Klik Link Masuk ke Masuk ke Form

3 OK
Tambah Tambah Form Menambah Data
105
Menambah Jadwal Pelajaran

Data Jadwal Kelas 9-B
Pelajaran
Kelas 9-B
Melakukan Mengisikan Data Jadwal Data Jadwal

Tambah Data Baru Pelajaran Pelajaran Kelas
4 Data Jadwal Jadwal Kelas 9-B Kelas 9-B OK
Pelajaran Pelajaran Berhasil Berhasil
Kelas 9-B Kelas 9-B Ditambah Ditambah
Data Jadwal
Data Jadwal
Pelajaran
5 Kelas 9-B OK
Berhasil
Dihapus
Dihapus
m) Kelola Hubungi Kami

Pengujian halaman kelola hubungi kami saat setelah login dapat
Tabel 4.15 Blackbox Testing Halaman Kelola Hubungi Kami
Kondisi
Kondisi Hal Yang
Awal Dilakukan
Diinginkan
Data
Hubungi Data Hubungi
Klik Link Klik Link
1 Kami Kami Berhasil OK
Hapus Hapus
Berhasil Dihapus
Dihapus
106
b. Pengujian Yang Dilakukan Pengunjung

1) Halaman Utama Pengunjung
Pengujian halaman utama pengunjung saat mengakses website dapat
dilihat pada Tabel 4.16 berikut (OK) merupakan tanda yang berarti halaman
yang diuji berhasil.
Tabel 4.16 Blackbox Testing Halaman Utama Pegunjung
Kondisi Yang
No Kondisi Awal Kondisi Hasil Hasil
Diinginkan
Masuk ke halaman Masuk ke halaman

1 Klik menu home OK
home home

2 Klik menu profil OK
profil profil
Klik sub-menu Masuk ke halaman Masuk ke halaman

3 OK
profil visi dan misi visi dan misi visi dan misi
Klik sub-menu Masuk ke halaman Masuk ke halaman

4 OK
guru dan staff guru dan staff guru dan staff
Klik sub-menu
5 guru dan staff OK
guru guru
dropdown guru
Klik sub-menu
5 guru dan staff OK
staff staff
dropdown staff
Klik menu jadwal Masuk ke halaman Masuk ke halaman

4 OK
pelajaran jadwal pelajaran jadwal pelajaran

5 pelajaran dropdown jadwal pelajaran jadwal pelajaran kelas 7- OK
kelas 7-A kelas 7-A A
107

kelas 7-B kelas 7-B B



kelas 8-C kelas 8-C C


Klik menu hubungi Masuk ke halaman Masuk ke halaman

12 OK
kami hubungi kami hubungi kami
2) Pengujian Untuk Setiap Menu

a) Halaman Home
Pengujian halaman home saat mengakses website dapat dilihat
pada Tabel 4.17 berikut (OK) merupakan tanda yang berarti halaman
Tabel 4.17 Blackbox Testing Halaman Home
Kondisi
Kondisi Hal Yang
Awal Dilakukan
Diinginkan
108
Menampilkan
Menampilkan
background
Halaman Klik halaman background dan
1 dan kata OK
home home kata selamat
selamat
datang
datang
b) Halaman Visi dan Misi

Pengujian halaman profil saat mengakses website dapat dilihat
pada Tabel 4.18 berikut (OK) merupakan tanda yang berarti halaman
Tabel 4.18 Blackbox Testing Halaman Visi dan Misi
Kondisi
Kondisi Hal Yang
Awal Dilakukan
Diinginkan
Menampilkan Menampilkan
Halaman visi Klik halaman
1 halaman visi halaman visi dan OK
dan misi visi dan misi
dan misi misi
c) Halaman Guru
Pengujian halaman staff saat mengakses website dapat dilihat pada
Tabel 4.19 berikut (OK) merupakan tanda yang berarti halaman yang
diuji berhasil.
Tabel 4.19 Blackbox Testing Halaman Guru
Kondisi
Kondisi Hal Yang
Awal Dilakukan
Diinginkan
109
Klik
Halaman Menampilkan Menampilkan
1 dropdown OK
guru halaman guru halaman guru
guru
d) Halaman Staff
Pengujian halaman staff saat mengakses website dapat dilihat pada
Tabel 4.20 berikut (OK) merupakan tanda yang berarti halaman yang
diuji berhasil.
Tabel 4.20 Blackbox Testing Halaman Staff
Kondisi
Kondisi Hal Yang
Awal Dilakukan
Diinginkan
Klik
Halaman Menampilkan Menampilkan
1 dropdown OK
staff halaman staff halaman staff
staff
e) Halaman Jadwal Pelajaran Kelas 7-A

Pengujian halaman jadwal pelajaran saat mengakses website dapat
Tabel 4.21 Blackbox Testing Halaman Jadwal Pelajaran Kelas 7-A
Kondisi
Kondisi Hal Yang
Awal Dilakukan
Diinginkan
Klik Menampilkan
1 Halaman Menampilkan OK
dropdown halaman
jadwal halaman jadwal
jadwal jadwal
110
pelajaran pelajaran pelajaran pelajaran kelas

kelas 7-A kelas 7-A kelas 7-A 7-A
Menampilkan
Halaman Klik cetak Menampilkan
halaman
2 jadwal jadwal halaman cetak OK
cetak jadwal
pelajaran pelajaran jadwal pelajaran
pelajaran
f) Halaman Jadwal Pelajaran Kelas 7-B

Tabel 4.22 Blackbox Testing Halaman Jadwal Pelajaran Kelas 7-B

Kondisi
Kondisi Hal Yang
Awal Dilakukan
Diinginkan
Klik Menampilkan
Halaman Menampilkan
dropdown halaman
1 jadwal jadwal OK
pelajaran pelajaran kelas
pelajaran pelajaran
kelas 7-A 7-A
kelas 7-A kelas 7-A
Menampilkan
halaman
cetak jadwal
pelajaran
g) Halaman Jadwal Pelajaran Kelas 8-A

111

Kondisi
Kondisi Hal Yang
Awal Dilakukan
Diinginkan
Klik Menampilkan
Halaman Menampilkan
dropdown halaman
1 jadwal jadwal OK
pelajaran pelajaran
kelas 7-A 7-A
kelas 7-A kelas 7-A
Menampilkan
halaman
cetak jadwal
pelajaran
h) Halaman Jadwal Pelajaran Kelas 8-B


Kondisi
Kondisi Hal Yang
Awal Dilakukan
Diinginkan
Klik Menampilkan
Halaman Menampilkan
dropdown halaman
1 jadwal jadwal OK
pelajaran pelajaran
kelas 7-A 7-A
kelas 7-A kelas 7-A
Menampilkan
halaman
cetak jadwal
pelajaran
112
i) Halaman Jadwal Pelajaran Kelas 8-C

Tabel 4.25 Blackbox Testing Halaman Jadwal Pelajaran Kelas 8-C

Kondisi
Kondisi Hal Yang
Awal Dilakukan
Diinginkan
Klik Menampilkan
Halaman Menampilkan
dropdown halaman
1 jadwal jadwal OK
pelajaran pelajaran
kelas 7-A 7-A
kelas 7-A kelas 7-A
Menampilkan
halaman
cetak jadwal
pelajaran
j) Halaman Jadwal Pelajaran Kelas 9-A


Kondisi
Kondisi Hal Yang
Awal Dilakukan
Diinginkan
Halaman Menampilkan
jadwal Klik Menampilkan halaman jadwal
1 dropdown halaman OK
kelas 7-A jadwal jadwal 7-A
113
pelajaran pelajaran
kelas 7-A kelas 7-A
Menampilkan
halaman
cetak jadwal
pelajaran
k) Halaman Jadwal Pelajaran Kelas 9-B


Kondisi
Kondisi Hal Yang
Awal Dilakukan
Diinginkan
Klik Menampilkan
Halaman Menampilkan
dropdown halaman
1 jadwal jadwal OK
pelajaran pelajaran
kelas 7-A 7-A
kelas 7-A kelas 7-A
Menampilkan
halaman
cetak jadwal
pelajaran
l) Halaman Hubungi Kami

Pengujian halaman hubungi kami saat mengakses website dapat
114
Tabel 4.28 Blackbox Testing Halaman Hubungi Kami
Kondisi
Kondisi Hal Yang
Awal Dilakukan
Diinginkan
Klik Menampilkan Menampilkan

Halaman
1 dropdown halaman halaman OK
hubungi kami
hubungi kami hubungi kami hubungi kami
BAB V
KESIMPULAN DAN SARAN
5.1. Kesimpulan
Berdasarkan uraian dari bab 1 s/d bab 4 maka diambil kesimpulan bahwa
Rancang Bangun Aplikasi Informasi Jadwal Pelajaran Sekolah Di SMPN-4
Katingan Hilir berbasis website dibuat menggunakan metodologi pengembangan
perangkat lunak waterfall menurut Summerville tahun 2011, yang memiliki
tahapan, yaitu requitments definition, digambar menggunakan flowchart,
requitments analysis and definition digambar melalui DFD (Data Flow
Diagram), ERD (Entity Relationship Diagram), dan database. Implementtation
and unit testing dengan bahasa pemograman yang digunakan yaitu HTML, PHP,
CSS, Boostrap, Javascript dan Mysql, Integration and system testing
menggunakan metode blackbox.
Pada website informasi jadwal pelajaran sekolah di SMPN-4 Katingan
Hilir terdapat 2 aktor, yaitu admin dan pengunjung. Admin memiliki hak akses
penuh atas website ini, dan ada pengunjung yaitu aktor yang mendapatkan
informasi dari website ini.
5.2. Saran
Beberapa saran yang dapat diberikan untuk pengembangan website
informasi jadwal pelajaran sekolah di SMPN-4 Katingan Hilir yaitu :
1. Diharapkan dalam pengembangan website ini nantinya dapat melakukan

penambahan fitur yang dapat membantu pengujung lebih banyak lagi selain
mendapakan informasi jadwal pelajaran.
2. Diharapkan juga website ini juga dapat dikembangkan ke pengguna android.
115
DAFTAR PUSTAKA
Aimi, Widi. 2013. Implementasi Kurikulum Program Fullday School Sebagai Sarana
Untuk Membangun Karakter Peserta Didik Dalam Pendidikan Abad 21.
Departemen Pengembangan Kurikulum Sekolah Pascasarjana Universitas
Pendidikan Indonesia. Universitas Pendidikan Indonesia.
Andika, Dwiky. 2018. Pengertian CSS (Cascading Style Sheet) (Online : https://www.it-
jurnal.com/pengertian-css-cascading-style-sheet/, di akses tanggal 15 Maret
2021).
Dwi Jayanto, Andang. 2015. Sistem Informasi Penjadwalan Mata Pelajaran Pada SMP
Negeri 1 Petarukan Pemalang. Jurusan Teknik Elektro. Fakultas Teknik.
Universitas Negeri Semarang.
Edel. 2016. Pengertian PHP (Online :

https://edel.staff.unja.ac.id/blog/artikel/Pengertian-PHP.html, di akses tanggal
16 Maret 2021).
Eka Putra, Ibrahim. 2011. Penjelasan Simbol-Simbol Dasar Flowchart (Online :

https://ibekaputra.wordpress.com/2017/08/02/entity-relationship-diagram-
erd/, di akses tanggal 15 Maret 2021).
Galuh P, Andhika. 2013. Penjelasan Simbol-Simbol Dasar Flowchart (Online :

https://media.neliti.com/media/publications/78929-ID-sistem-informasi-
penjadwalan-mata-pelaja.pdf, di akses tanggal 15 Maret 2021).
Ikhsan. 2013. Penjelasan Simbol-Simbol Dasar Flowchart (Online :

https://ikhsan1961.wordpress.com/2013/10/29/2-1-penjelasan-simbol-simbol-
dasar-flowchart/, di akses tanggal 15 Maret 2021).
Rara. 2017. Data Flow Diagram (DFD) (Online :

http://helloitsrara.blogspot.com/2017/03/data-flow-diagram-dfd.html, di akses
tanggal 16 Maret 2021).
Robith Adani, Muhammad. 2020. Pengenalan Apa Itu Website Beserta Fungsi,
Manfaat dan Cara Membuatnya (Online :
https://www.sekawanmedia.co.id/pengertian-website/, di akses tanggal 15
Maret 2021).
Utama, Yadi. 2013. Sistem Informasi Berbasis Web Jurusan Sistem Informasi Fakultas
Ilmu Komputer Universitas Sriwijaya. Manajemen Pendidikan. Fakultas Ilmu
Komputer Jurusan Sistem Informasi. Universitas Sriwijaya.
xv

Rivaldi Meidon Saputra Dbc118058 Laporan PP

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Rivaldi Meidon Saputra Dbc118058 Laporan PP

Diunggah oleh

Hak Cipta:

Format Tersedia

LAPORAN PROGRAM PROFESIONAL

RANCANG BANGUN APLIKASI INFORMASI JADWAL PELAJARAN

NAMA : RIVALDI MEIDON SAPUTRA

NIM : DBC 118 058

JURUSAN TEKNIK INFORMATIKA

UNIVERSITAS PALANGKA RAYA

Rivaldi Meidon Saputra

Dosen Penguji, Dosen Pembimbing,

Felicia Sylviana,ST.,M.M Drs. Jadiaman Parhusip, M.Kom

Abertun Sagit Sahay, ST., M.Eng

Palangka Raya, Juni 2021

Rivaldi Meidon Saputra

RIVALDI MEIDON SAPUTRA (DBC 118 058)

Kata kunci : SMPN-4 Katingan Hilir, waterfall, website.

RIVALDI MEIDON SAPUTRA (DBC 118 058)

In searching for lesson schedules at SMPN-4 Katingan Hilir, it is still by going

Keywords : SMPN-4 Katingan Hilir, waterfall , website.

LEMBAR PENGESAHAN ......................................................................................... ii

KATA PENGANTAR ................................................................................................ iii

DAFTAR ISI ............................................................................................................... vi

DAFTAR TABEL ....................................................................................................... ix

DAFTAR GAMBAR .................................................................................................. xi

BAB I PENDAHULUAN ........................................................................................... 1

1.1. Latar Belakang ........................................................................................ 1

1.2. Rumusan Masalah ................................................................................... 1

1.3. Batasan Masalah ..................................................................................... 2

1.4 Tujuan Penelitian .................................................................................... 4

1.5 Manfaat Penelitian .................................................................................. 5

1.6 Sistematika Penulisan ............................................................................. 5

1.7 Jadwal Kegiatan ...................................................................................... 7

BAB II LANDASAN TEORI ...................................................................................... 8

2.1. Konsep Sistem Informasi Penjadwalan Mata Pelajaran ......................... 8

2.2. Website ................................................................................................. 10

2.2.1. Sejarah Website ........................................................................... 10

2.2.2. Pengertian Website ...................................................................... 11

2.2.3. Jenis-jenis Website ...................................................................... 11

2.3. Basis Data ............................................................................................. 13

2.5. Flowchart .............................................................................................. 16

2.6. Data Flow Diagram (DFD) ................................................................... 20

2.7. Entity Relationship (ERD) .................................................................... 22

2.7.1. Entity ........................................................................................... 22

2.7.2. Atribut ......................................................................................... 23

2.7.3. Hubungan/Relasi ......................................................................... 23

2.8. Perangkat Lunak Pendukung ................................................................ 24

2.8.1. Visual Studio Code...................................................................... 24

2.8.2. SQLyog ....................................................................................... 25

2.8.3. XAMPP ....................................................................................... 26

2.8.4. Edraw Max .................................................................................. 26

2.9. Bahasa Pemrograman ........................................................................... 26

2.9.1. HTML .......................................................................................... 26

2.9.2. CSS .............................................................................................. 27

2.9.3. JavaScribt .................................................................................... 27

2.9.4. PHP .............................................................................................. 28

BAB III METODE PENELITIAN............................................................................. 29

3.1. Analisis Sistem ..................................................................................... 29

3.1.1. Analisis Sistem Lama .................................................................. 29

3.1.2. Analisis Sistem Baru ................................................................... 31

3.2. Analisis Teknologi Dan Pengguna ....................................................... 33

3.2.1. Alat dan Bahan ............................................................................ 33

3.2.2. Analisis Pengguna ....................................................................... 34

3.3. Desain Sistem dan Perangkat Lunak .................................................... 34

3.3.2. Desain Tabel Basis Data.............................................................. 49

3.3.3. Desain Navigasi ........................................................................... 55