tugas akhir - bina sarana informatika€¦ · pemrograman php serta memanfaatkan database mysql...

SISTEM INFORMASI NILAI AKADEMIK BERBASIS WEB

PADA SMK BINA MANDIRI 2 SUKABUMI

TUGAS AKHIR

Diajukan untuk memenuhi salah satu syarat kelulusan Diploma Tiga (D.III)

DARMAWAN SAPUTRA

NIM : 12143296

Program Studi Manajemen Informatika

Akademi Manajemen Informatika dan Komputer Bina Sarana Informatika

Jakarta

2017

vii

KATA PENGANTAR

Dengan nama Allah Yang Maha Pengasih lagi Maha Penyayang.

Alhamdulillah, penulis panjatkan puji syukur kehadirat Allah Yang Maha

Pengasih lagi Maha Penyayang yang telah melimpahkan rahmat, taufik dan

hidayah-Nya kepada penulis dalam menyusun dan menyelesaikan tugas akhir ini.

Adapun judul tugas akhir, yang penulis ambil sebagai berikut “Sistem

Informasi Nilai Akademik Berbasis Web Pada Smk Bina Mandiri 2”.

Adapun tujuan dari pembuatan tugas akhir ini adalah sebagai salah satu

syarat kelulusan program Diploma Tiga (D.III) Akademi Manajemen Informatika

dan Komputer Bina Sarana Informatika. Sebagai bahan penulisan diambil

berdasarkan hasil penelitian (eksperimen), observasi dan beberapa sumber

literatur yang mendukung penulisan ini. Penulis juga mengucapkan terima kasih

banyak kepada pihak yang telah membantu, membimbing dan memberikan

dorongan moril maupun materil yang dibutuhkan dalam proses menyelesaikan

tugas akhir ini. Terutama kepada :

1. Direktur Akademi Manajemen Informatikan dan Komputer Bina Sarana

Informatika.

2. Ketua Program Studi Manajemen Informatika Akademi Manajemen

Informatika dan Komputer Bina Sarana Informatika.

3. Bapak Muhammad Hilman Fahriza M.Kom, selaku Dosen Pembimbing Tugas

Akhir yang telah memberikan bimbingan dan pengarahan dalam penyelesaian

tugas akhir ini.

ix

ABSTRAK Darmawan Saputra (12143296), “Sistem Informasi Nilai Akademik Berbasis Web Pada Smk Bina Mandiri 2 Sukabumi ” Dalam era globalisasi sekarang ini, kemajuan teknologi informasi melaju dengan sangat cepatnya. Komputer yang merupakan peralatan yang diciptakan untuk mempermudah pekerjaan, Dalam penelitian ini penerapan nya pada SMK Bina Mandiri 2 Sukabumi yang slama ini dilakukan secara manual atau sudah terkomputerisasi tetapi menggunakan Microsoft Office Excel. Rumusan masalah dari penelitian ini adalah bagaimana membuat Sistem Informasi nilai akademik di SMK Bina Mandiri 2 Sukabumi. Sistem Informasi Nilai akademik berbasis web ini dibangun dengan bahasa pemrograman php serta memanfaatkan database MysQl Sebagai Database Server. Kata Kunci:Sistem Informasi Nilai Akademik,Php, Mysql

x

ABSTRACT

Darmawan saputra(12143296), " Web Based Values Information System At Smk Bina Mandiri 2 Sukabumi” In today's era of globalization, information technology progresses very fast. Computers that are tools created to simplify the work, In this research its application on SMK Bina Mandiri 2 Sukabumi which slama is done manually or already computerized but using Microsoft Office Excel. The problem formulation of this research is how to make Information System academic value in SMK Bina Mandiri 2 Sukabumi. Information Systems This web-based academic value is built with the php programming language as well as utilizing the MysQl database As a Database Server. Keywords: Academic Value Information System, Php, Mysql

xi

DAFTAR ISI

Lembar Judul Tugas Akhir ......................................................................................... i Lembar Pernyataan Keaslian Tugas Akhir ................................................................. ii Lembar Pernyataan Persetujuan Publikasi Karya Ilmiah ........................................... iii Lembar Persetujuan dan Pengesahan Tugas Akhir .................................................... iv Lembar Konsultasi Tugas Akhir ................................................................................ v Kata Pengantar ........................................................................................................... vii Abstrak ....................................................................................................................... ix Daftar Isi ..................................................................................................................... xi Daftar Simbol ............................................................................................................. xiii Daftar Gambar ............................................................................................................ xiv Daftar Tabel ............................................................................................................... xvii BAB I PENDAHULUAN ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

1.1. Latar Belakang Masalah ................................................................... 1 1.2. Maksud dan Tujuan .................................................................... 2 1.3. Metode Penelitian ............................................................................. 3 1.4. Ruang Lingkup ................................................................................. 5 1.5.Sistematika Penulisan ........................................................................ 6

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

2.1. Konsep Dasar Web ............................................................. 5 2.1.1. Pengertian Internet ........................................................ 6 2.1.2. Bahasa Pemrograman ............................................... 8 2.1.3. Basis Data ............................................................................ 11 2.1.4. Model Pengembangan Perangkat Lunak ............................. 15

2.2. Teori Pendukung .............................................................................. 15 2.2.1. Struktur Navigasi ................................................................. 19 2.2.2. ERD (Entity Relationship Diagram) .................................... 20 2.2.3. LRS (Logical Record Structure) .......................................... 24 2.2.4. Alat Pendukung ................................................................... 25 2.2.4. Pengujian Web (Blackbox Testing) ..................................... 26

BAB III PEMBAHASAN .................................................................................... 28

3.1. Tinjauan Sekolah ........................................................................... 28 3.1.1. Sejarah Sekolah ................................................................... 30 3.1.2. Struktur Organisasi dan Fungsi ........................................... 32

3.2. Analisis Kebutuhan ........................................................................ 35 3.2.1. Kebutuhan Fungsional ......................................................... 35 3.2.2. Kebutuhan Non Fungsional ................................................. 36

3.3. Perancangan Perangkat Lunak ....................................................... 37 3.3.1. Rancangan Antar Muka ....................................................... 37 3.3.2. Rancangan Basis Data ......................................................... 71 3.3.3. Rancangan Struktur Navigasi .............................................. 81

3.4. Implementasi dan Pengujian Unit .................................................. 84

xii

3.4.1. Implementasi ........................................................................ 84 3.4.2. Pengujian Unit ..................................................................... 111

BAB IV PENUTUP .............................................................................................. 125

4.1. Kesimpulan .................................................................................... 125 4.2. Saran ............................................................................................. 125

DAFTAR PUSTAKA ............................................................................................... 127 DAFTAR RIWAYAT HIDUP................................................................................. 129 SURAT KETERANGAN PKL/ RISET ................................................................ 130

DAFTAR SIMBOL

xiii

DAFTAR GAMBAR Halaman

Entitas / Entity

Entitas adalah suatu objek yang dapat diidentifikasi dalam lingkungan pemakai

Relasi

Relasi Menunjukkan adanya hubungan di antara sejumlah entitas yang berbeda

Atribut

Atribut berfungsi mendeskripsikan karakter entitas (atribut yang berfungsi sebagai key diberi garis bawah)

Garis

Garis sebagai penghubung antara relasi dengan entitas atau dengan atribut

xiv

Gambar III.1 Struktur Organisasi Sekolah .......................................................... 32 Gambar III.2 Rancangan Tampilan Halaman Utama .......................................... 38 Gambar III.3 Rancangan Tampilan Halaman Login ........................................... 38 Gambar III.4 Rancangan Tampilan Halaman Gagal Login................................. 40 Gambar III.5 Rancangan Tampilan Halaman Menu Admin ............................... 40 Gambar III.6 Rancangan Tampilan Halaman Menu Admin Ruang Guru.......... 41 Gambar III.7 Rancangan Tampilan Halaman Menu admin Tambah Guru ........ 42 Gambar III.8 Rancangan Tampilan Halaman Menu Edit Guru .......................... 43 Gambar III.9 Rancangan Tampilan Halaman Menu Hapus Guru ...................... 44 Gambar III.10 Rancangan Tampilan Halaman Menu Admin Sukses Guru ....... 44 Gambar III.11 Rancangan Tampilan Halaman Menu Admin Gagal Guru ......... 44 Gambar III.12 Rancangan Tampilan Halaman Menu Admin Profil Guru .......... 45 Gambar III.13 RancMangan Tampilan Halaman Admin Siswa Dan Nilai ........ 46 Gambar III.14 Rancangan Tampilan Halaman Menu Admin Tambah Siswa..... 47 Gambar III.15 Rancangan Tampilan Halaman Menu Admin Edit Siswa .......... 48 Gambar III.16 Rancangan Tampilan Halaman Menu Sukses Edit Siswa ........... 49 Gambar III.17 Rancangan Tampilan Halaman Menu Edit Gagal Siswa ............ 49 Gambar III.18 Rancangan Tampilan Halaman Menu Admin Hapus Siswa ...... 49 Gambar III.19 Rancangan Tampilan Halaman Data Admin Nilai Siswa ........... 50 Gambar III.20 Rancangan Tampilan Halaman Menu Mata Pelajaran ............... 51 Gambar III.21 Rancangan Tampilan Halaman Tambah Mata Pelajaran ............ 52 Gambar III.22 Rancangan Tampilan Halaman Menu Edit Mata Pelajaran ........ 52 Gambar III.23 Rancangan Tampilan Halaman Menu Edit Sukses ..................... 53 Gambar III.24 Rancangan Tampilan Halaman Hapus Mata Pelajaran .............. 53 Gambar III.25 Rancangan Tampilan Halaman Menu Admin Kelas .................. 54 Gambar III.26 Rancangan Tampilan Halaman Menu Tambah Kelas ................ 55 Gambar III.27 Rancangan Tampilan Halaman Menu Edit Kelas ....................... 55 Gambar III.28 Rancangan Tampilan Halaman Menu Admin Sukses Edit ......... 56 Gambar III.29 Rancangan Tampilan Halaman Menu hapus Kelas .................... 57 Gambar III.30 Rancangan Tampilan Halaman Menu Admin jadwal ................. 57 Gambar III.31 Rancangan Tampilan Halaman Menu Tambah Jadwal .............. 58 Gambar III.32 Rancangan Tampilan Halaman Menu Edit Jadwal ..................... 59 Gambar III.33Rancangan Tampilan Halaman Menu Edit jadwal Sukses ......... 59 Gambar III.34Rancangan Tampilan Halaman Admin Edit Jadwal Gagal ...... 59 Gambar III.35Rancangan Tampilan Halaman Menu Admin Edit Jadwal ....... 60 Gambar III.36Rancangan Tampilan Halaman Menu Admin Hapus Jadwal ... 60 Gambar III.37Rancangan Tampilan Halaman Menu Admin Tampilan Guru . 61 Gambar III.38Rancangan Tampilan Halaman Menu Admin Guru Profil ....... 61 Gambar III.39Rancangan Tampilan Halaman Menu Guru Mengajar .............. 62 Gambar III.40Rancangan Tampilan Halaman Menu Guru Pilih Kelas ............ 63 Gambar III.41Rancangan Tampilan Halaman Menu Guru Listing Siswa ....... 63 Gambar III.42Rancangan Tampilan Halaman Guru Kelola Nilai .................... 64 Gambar III.43Rancangan Tampilan Halaman Guru Tambah Nilai siswa ....... 65 Gambar III.44Rancangan Tampilan Halaman Guru Sukses Tambah Nilai ..... 65 Gambar III.45Rancangan Tampilan Menu Guru Edit Nilai .............................. 66 Gambar III.46Rancangan Tampilan Menu Guru Sukses Edit Nilai .................. 66 Gambar III.47Rancangan Tampilan Menu Guru Gagal Edit Nilai .................. 67 Gambar III.48Rancangan Tampilan Halaman Menu Guru Buat raport .......... 67

xv

Gambar III.49Rancangan Tampilan Halaman Menu Guru Cetak Raport ......... 68 Gambar III.50Rancangan Tampilan Halaman Menu Siswa ............................ 68 Gambar III.51Rancangan Tampilan Halaman Menu Siswa Nilai ................... 69 Gambar III.52Rancangan Tampilan Halaman Menu Siswa Cetak Nilai........... 70 Gambar III.53Rancangan Tampilan Halaman Menu Siswa Jadwal .................. 70 Gambar III.54Gambar ERD ............................................................................... 71 Gambar III.55Gambar LRS .............................................................................. 72 Gambar III.56 Strukrur Navigasi Siswa .............................................................. 81 Gambar III.57Struktur Navigasi Admin ............................................................. 82 Gambar III.58Struktur Navigasi Guru ............................................................... 82 Gambar III.59Struktur Navigasi Siswa ............................................................... 83 Gambar III.60Gambar Halaman Utama .............................................................. 84 Gambar III.61Gambar Halaman Login ............................................................... 85 Gambar III.62Gambar Halaman Login ............................................................... 85 Gambar III.63Gambar Halaman Menu Admin ................................................... 86 Gambar III.64Gambar Halaman Admin Ruang Guru......................................... 87 Gambar III.65Gambar Halaman Admin Tambah Guru ...................................... 87 Gambar III.66Gambar Halaman Admin Edit Guru ............................................ 88 Gambar III.67Gambar Halaman Admin Edit Sukses Guru ................................ 89 Gambar III.68Gambar Halaman Admin Edit Gagal ........................................... 89 Gambar III.69Gambar Halaman Admin Hapus Guru ......................................... 89 Gambar III.70Gambar Halaman Admin Profil Guru .......................................... 90 Gambar III.71Gambar Halaman Admin Ruang Siswa dan Nilai ....................... 91 Gambar III.72Gambar Halaman Admin Tambah Siswa .................................... 92 Gambar III.73Gambar Halaman Admin Edit Siswa ........................................... 92 Gambar III.74Gambar Halaman Admin Edit Sukses Siswa ............................... 93 Gambar III.75Gambar Halaman Admin Edit Gagal ........................................... 93 Gambar III.76Gambar Halaman Admin Hapus Siswa ....................................... 93 Gambar III.77Gambar Halaman Admin Profil Nilai Siswa ............................... 94 Gambar III.78Gambar Halaman Admin Matapelajaran ..................................... 94 Gambar III.79Gambar Halaman Admin Tambah Matapelajaran ....................... 95 Gambar III.80Gambar Halaman Admin Edit Matapelajaran.............................. 95 Gambar III.81Gambar Halaman Admin Edit Sukses Matapelajaran ................. 96 Gambar III.82Gambar Halaman Admin Hapus Matapelajaran .......................... 96 Gambar III.83Gambar Halaman Admin Kelas ................................................... 96 Gambar III.84Gambar Halaman Admin Tambah Kelas ..................................... 97 Gambar III.85Gambar Halaman Admin Edit Kelas ........................................... 97 Gambar III.86Gambar Halaman Admin Edit Sukses ......................................... 98 Gambar III.87Gambar Halaman Admin Edit Gagal ........................................... 98 Gambar III.88Gambar Halaman Admin Hapus .................................................. 98 Gambar III.89Gambar Halaman Admin Jadwal ................................................. 99 Gambar III.90Gambar Halaman Admin Tambah Jadwal ................................... 100 Gambar III.91Gambar Halaman Admin Edit Jadwal ......................................... 100 Gambar III.92Gambar Halaman Admin Edit Sukses ......................................... 101 Gambar III.93Gambar Halaman Admin Edit Gagal ........................................... 101 Gambar III.94Gambar Halaman Admin Hapus .................................................. 101 Gambar III.95Gambar Halaman Menu Guru ..................................................... 102 Gambar III.96Gambar Halaman Profil Guru ...................................................... 102

xvi

Gambar III.97Gambar Halaman Guru Jadwal Mengajar .................................... 103 Gambar III.98Gambar Halaman Guru Pilih Kelas ............................................. 103 Gambar III.99Gambar Halaman Guru Listing Siswa ......................................... 104 Gambar III.100Gambar Halaman Guru Kelola Nilai ......................................... 105 Gambar III.101Gambar Halaman Guru Tambah Nilai ...................................... 105 Gambar III.102Gambar Halaman Menu Guru Edit Nilai ................................... 105 Gambar III.103Gambar Halaman Guru Edit Nilai ............................................. 106 Gambar III.104Gambar Halaman Guru Edit Sukses .......................................... 106 Gambar III.105Gambar Halaman Guru Edit Gagal ............................................ 106 Gambar III.106Gambar Halaman Guru Buat Raport .......................................... 107 Gambar III.107Gambar Halaman Guru Cetak Raport ....................................... 107 Gambar III.108Gambar Halaman Menu Siswa................................................... 108 Gambar III.109Gambar Halaman Profil Siswa dan Nilai ................................... 108 Gambar III.110Gambar Halaman Siswa Cetak Nilai ........................................ 109 Gambar III.111Gambar Halaman Menu Siswa Jadwal ...................................... 109

DAFTAR TABEL

xvii

Halaman Tabel III.1 Spesifikasi File Admin ..................................................................... 73 Tabel III.2 Spesifikasi File Guru ........................................................................ 74 Tabel III.3 Spesifikasi File Siswa....................................................................... 75 Tabel III.4 Spesifikasi File Tabel Jadwal ........................................................... 76 Tabel III.5 Spesifikasi File Tabel Kelas ............................................................. 77 Tabel III.6 Spesifikasi File Mata Pelajaran ........................................................ 78 Tabel III.7 Spesifikasi File Nilai ....................................................................... 80 Tabel III.8 Spesifikasi File Jurusan .................................................................... 80

1

BAB I

PENDAHULUAN

1.1. Latar Belakang Masalah

Perkembangan aplikasi web yang semakin pesat sejak munculnya internet

sangat membantu dalam kemudahan serta kecepatan pengiriman, penyampaian dan

penerimaan informasi. Mulai dari perusahaan-perusahaan, sekolah-sekolah,

perguruan tinggi dan lembaga atau organisasi telahbanyak memanfaatkan aplikasi

web dalam kegiatan penjualan, prmosi, belajar dan kegiatan lainnya dimana

dibutuhkan pengiriman, penyebaran dan penerimaan informasi sehingga memberikan

kemudahan bagi pengguna (user) yang membutuhkan.

Aplikasi web atau biasa disebut juga dengan perangkat lunak berbasis web

telah berkembang dengan pesat, baik dari segi penggunaan , ukuran, bahasa yang

digunakan, dan kompleksitasnya. Aplikasi web pada mulanya hanya berupa situs web

yang bersifat statis dan navigated oriented, serta lebih banyak digunakan sebagai

brosur produk dan profil perusahaan online.

Salah satu aplikasinya yaitu World Wide Web (WWW). Di awal

perkembangannya World Wide Web hanya digunakan untuk kalangan akademisi dan

riset, namun sekarang World Wide Web digunakan untuk bisnis dan hiburan. Oleh

karena itu dengan berkembangnya kemajuan teknologi ini, maka penulis membuat

suatu website di SMK BINA MANDIRI 2, yang mana sebelumnya di sekolah ini

2

belum mempunyai sebuah website. Dengan sebuah website ini, SMK BINA

MANDIRI2 dapat mempromosikan berbagai program, informasi, maupun prestasi-

prestasi yang dimiliki oleh siswa-siswanya kepada masyarakat luas dan masyarakat

pun dengan mudah mengakses dan mengetahui segala sesuatu mengenai SMK BINA

MANDIRI2 dengan cepat tanpa memerlukan waktu yang banyak.

Informasi tentang sekolah yang dapat di akses oleh semua orang melalui

internet memberikan ide buat penulis untuk membuat suatu website sekolah yang bias

memberikan informasi bagi para pengunjungnya.

Berdasarkan uraian diatas, penulis ingin memberikan kontribusi dengan

membuat website pendidikan (sekolah) dengan judul “ SISTEM INFORMASI

NILAI AKADEMIK BERBASIS WEB PADA SMK BINA MANDIRI 2”.

1.2. Maksud dan Tujuan

Maksud dari penulisan tugas akhir ini adalah:

1. Mengenalkan sekaligus mempromosikan SMK BINA MANDIRI2 agar lebih

dikenal masyarakat dengan segala fasilitas dan prestasi yang dimiliki agar

para orang tua mau menyekolahkan anak-anaknya di sekolah ini.

2. Mempermudah masyarakat, wali murid, siswa, maupun guru untuk

memperoleh informasi tentang SMK BINA MANDIRI dan update informasi

terbaru dari sekolah tersebut.

Sedangkan tujuan penulisan tugas akhir ini adalah sebagai salah satu syarat

kelulusan Program Diploma Tiga (DIII) Jurusan Manajemen Informatika di Akademi

Bina Sarana Informatika dan Komputer Bina Sarana Informatika (AMIK BSI).

3

1.3. Metode Penelitian

Dalam menyelesaikan penulisan tugas akhir ini, penulis menggunakan

beberapa metode :

1. Pengamatan (Observation)

Penulis melakukan pengamatan terhadap kegiatan di sekitar sekolah, yang

meliputi kegiatan siswa-siswa, guru, dan lingkungan sekitar sekolah ini.

Penulis juga melakukan observasi pada struktur organisasi sekolah pada SMK

BINA MANDIRI 2

2. Wawancara (Interview)

Melakukan interview dengan pihak sekolah meliputi guru-guru dan staf

sekolah tersebut untuk mengetahui struktur sekolah dan hal-hal yang akan

dijadikan bahan untuk pendukun pembuatan web sekolah tersebut.

3. Studi Pustaka

Untuk mendapatkan sumber-sumber dari pembuatan Tugas Akhir ini, penulis

melakukan studi pustaka dengan mencari materi pendukung dalam

pembuatan web sekolah.

1.4.Ruang Lingkup

Ruang lingkup yang dibahas disini adalah mengenai pemberian informasi

tentang SMK BINA MANDIRI 2 SUKABUMI. Program tersebut menggunakan

website atau situs internet sebagai sarana pendukung dalam memberikan informasi

yang terjadi di sekitar secara onlineyang prosesnya dimulai dari penginputan data dari

4

sekolah tersebut hingga menampilkan data mengenai informasi yang akan dibaca oleh

para pencari informasi tentang sekolah dasar tersebut.

Pada program website yang penulis buat menampilkan informasi mengenai

beranda, profil, visi dan misi, daftar guru, data siswa, berita, galeri, fasilitas

sekolah,buku tamu.

1.5.Sistematika Penulisan

Adapun sistematika penulisan tugas akhir ini adalah sebagai berikut :

BAB I PENDAHULUAN

Dalam bab ini berisikan latar belakang masalah, maksud dan tujuan,

metode penelitian, ruang lingkup dan sistematika penulisan

BAB II LANDASAN TEORI

Pada bab ini penulis membahas tentang konsep dasar web dan teori

pendukung.

BAB III PEMBAHASAN

Pada bab ini membahas analisis kebutuhan, perancangan perangkat

lunak, implementasi dan pengujian unit.

BAB IV PENUTUP

Bab ini berisi kesimpulan dari seluruh bab dan saran yang dibahas

penulis mengenai perancangan aplikasi web sekolah dalam penulisan

tugas akhir yang penulis lakukan.

DAFTAR PUSTAKA

LAMPIRAN

5

BAB II

LANDASAN TEORI

2.1. Konsep Dasar Web

Menurut Sidik (2014:1) “Web pada awalnya adalah ruang informasi dalam

internet,dengan menggunakan teknologi hypertext, pemakai dituntut untuk

menemukan informasi dengan mengikuti link yang disediakan dalam dokumen

web yang ditampilkan dalam browser web”.

Kini internet identik dengan web, karena kepopuleran web sebagai standar

interface pada layanan-layanan yang ada di internet, dari awalnya sebagai

penyedia informasi, kini digunakan juga untuk komunikasi dari e-mail sampai

dengan chatting, sampai dengan melakukan transaksi bisnis. Selain itu web telah

diadopsi oleh perusahaan sebagai sebagian dari strategi teknologi informasinya,

karena beberapa alasan yaitu:

1. Akses informasi mudah

2. Setup server lebih mudah

3. Informasi mudah didistribusikan

4. Bebas platform; informasi dapat disajikan oleh browser pada sistem operasi

mana saja karena adanya standar dokumen berbagai tipe data dapat disajikan.

6

2.1.1. Pengertian Internet

Menurut Wahyuningsih, (2017:5) “Internet merupakan singkatan dari

interconnected networking yaitu system yang menghubungkan antar jaringan

dengan memanfaatkan kemajuan teknologi telekomunikasi menggunakan satelit”.

Sehingga kata “Online” merupakan istilah yang lazim digunakan ketika kita

sedang terhubung melalui internet. Hal tersebut menjelaskan bahwa aktifitas

online selalu berkaitan dengan pengguna internet, sedangkan internet adalah

bagian dari teknologi jaringan. Di dalam penggunaannya, internet memiliki

beberapa istilah, diantaranya:

1. WWW (World Wide Web)

Menurut Pratama (2015:152) “WWW (World Wide Web) atau lebih dikenal

sebagai web yang selalu berkaitan dengan HTTP (Hyper Text Transfer Protocol)

dan terkadang dengan HTTPS (Hyper Text Transfer Protocol Secure) sebagai

protocol yang digunakannya”. WWW merupakan contoh aplikasi berbasis client-

server melalui aplikasi web server.

2. Web Browser

Menurut Rachmanto (2017:19) “Web browser adalah perangkat utama yang

kita perlukan untuk menampilkan halaman web dari hasil pengkodean”.

3. Web Server

Menurut Madcoms (2016:4) “Web server adalah suatu program komputer

yang mempunyai tanggung jawab atau tugas menerima permintaan HTTP dari

komputer klien, yang dikenal dengan nama web browser dan melayani mereka

7

dengan menyediakan respon HTTP berupa konten data, biasanya berupa halaman

web yang terdiri dari dokumen HTML dan objek terkait seperti gambar dan lain-

lain”.

4. Website

Menurut Hariyanto (2015:2) “Website dapat diartikan sebagai kumpulan

halaman yang menampilkan informasi data teks, data gambar, data animasi, suara,

video dan atau gabungan dari semuanya, baik yang bersifat statis maupun dinamis

yang membentuk satu rangkaian bangunan yang saling terkait, dimana masing-

masing dihubungkan dengan jaringan-jaringan halaman (hyperlink)”.

Website juga merupakan salah satu media penyampaian informasi dan

publikasi yang mudah diakses dari mana saja, kapan saja tanpa terbatas oleh

wilayah geografis yang dapat dimanfaatkan oleh sekolah.

5. URL (Uniform Resource Locator)

Menurut Pratama (2015:152) “URLharus mencantumkan alamat dari

komputer server yang dituju maupun komputer pemberi layanan”. Misalkan

dalam hal ini yaitu menyertakan alamat server atau komputer tujuan dalam bentuk

IPAddress maupun domain.

6. ISP (Internet Service Provider)

Menurut Andi (2017:2) “ISP (Internet Service Provider )adalah organisasi

yang menyediakan layanan untuk menggunakan maupun mengakses jaringan

internet”. Layanan internet yang disediakan oleh ISP antara lain meliputi akses

internet, web hosting, registrasi domain, transit internet, dan kolokasi.

8

7. DNS (Domain Name Space)

Menurut Andi (2017:5) “DNS (Domain Name Space) adalah sebuah sitem

yang menyimpan informasi tentang nama host ataupun nama domain dalam

bentuk basis data tersebar (distributed)”. Secara kasar, DNS dapat dikatakan

sebagai “penerjemah” nama domain menjadi angka-angka numeric yang terdapat

di dalam IP supaya lebih mudah diingat.

8. IP (Internet Protocol)

Menurut Andi (2017:6) “IP (Internet Protocol) adalah protocol lapisan

jaringan atau protocol lapisan internetwork yang digunakan oleh protokol TCP/IP

untuk melakukan pengamatan dan routing paket data”.

2.1.2. Bahasa Pemrograman

Telah diketahui bahwa program adalah sekumpulan instruksi yang

digunakan untuk mengatur perangkat keras komputer agar melaksanakan tindakan

tertentu. Kegiatan yang berkaitan dengan penulisan program biasa disebut

pemrograman.

Seperti halnya manusia yang menggunakan bahasa untuk berkomunikasi,

komputer pun juga memiliki bahasa tersendiri. Supaya manusia dapat

berkomunikasi dengan komputer, pemrogram perlu menuliskan program dalam

bahasa yang bisa dimengerti oleh komputer. Bahasa inilah yang disebut dengan

bahasa pemrograman atau bahasa komputer. Bahasa pemrograman terdiri atas

sekumpulan instruksi yang ditunjukan agar orang bisa menuangkan perintah yang

nantinya adakan dijalankan oleh komputer, dikutip dari Kadir (2014:192).

9

Beberapa bahasa pemrograman yang biasa digunakan yaitu:

1. PHP

Menurut Winarno dkk(2013:59) “PHP atau PHP Hypertext Preprocessor,

adalah sebuah bahasa pemrograman web berbasis server(server-side)”. Artinya,

kode ini dijalankan di server, kalau tidak adaserver, maka kode PHP tidak bisa

dijalankan.

Sedangkan menurut Andi (2012:76) “PHP merupakan bahasa pemrograman

berbasis web yang memiliki kemampuan untuk memproses dan mengolah data

secara dinamis”. PHP dapat dikatakan sebagai sebuah server-side embedded script

language, artinya sintak-sintak dan perintah program yang ditulis akan

sepenuhnya dijalankan oleh servertetapi dapat disertakan pada halaman HTML

biasa.

2. HTML

Menurut Winarno dkk (2013:1) “HTML merupakan singkatan dari

Hypertext Markup Language, artinya bahasa ini adalah bahasa markup untuk

memformat konten halaman web”. Atau dengan kata lain, bahasa untuk mengatur

bagaimana penampilan dan pemformatan konten di web.

HTML memiliki 4 jenis elemen yaitu:

a. Struktural

Tanda yang menentukan level atau tingkatan dari tulisan (misalnya, < h1

>Golf< /h1 > memerintahkan browser untuk menampilkan “Golf” sebagai tulisan

tebal besar yang menunjukkan sebagai Heading 1.

10

b. Presentasi

Tanda yang menentukan tampilan dari sebuah tulisan tidak peduli dengan

level dari tulisan tersebut (contoh, < b >tebal< /b > akan menampilkan tulisan

tebal. Tanda presentasi ini sudah lazim digantikan oleh CSS dan tidak

direkomendasikan untuk mengatur tampilan tulisan via HTML.

c. Hiperteks

Tanda yang berfungsi membuat link di dokumen, baik link di dokumen itu

sendiri atau ke dokumen lain (contoh, < a

href=http://www.wikipedia.org/>Wikipedia</a> akan membuat link ke situs

wikipedia.org.

d. Widget

Elemen widget yang membuat objek-objek lain seperti tombol (<button>),

list (<li>), dan garis horizontal (<hr>).

3. CSS

Menurut Hariyanto (2015:31) “CSS adalah kumpulan kode program yang

digunakan untuk mendesain atau mempercantik tampilan halaman HTML”.

Dengan CSS, kita bisa mengubah desain dari text, warna, gambar dan latar

belakang dari (hamper) semua kode tag HTML.

CSS biasanya selalu dikaitkan dengan HTML, karena keduanya memang

saling melengkapi. HTML ditujukan untuk membuat struktur atau konten dari

http://www.wikipedia.org/

11

halaman web. Sedangkan CSS digunakan untuk tampilan dari halaman web

tersebut.

4. JQuery

Menurut Hidayatullah (2017:399) “JQuery adalah kumpulan fungsi-fungsi

JavaScript yang sudah dibentuk sebagai suatu objek”. Sehingga penggunaan

JQuery ini bisa dikategorikan sebagai library yang nantinya kita hanya perlu

menggunakan fungsi-fungsi di dalam library tersebut.

JQuery dikenal dengan slogan “Write less, do more” artinya penulisan kode

yang sedikit tetapi memiliki beberapa aksi (action). JQuery juga merupakan

libraryopen source dengan lisensi GNU General Public License dan MIT license.

Ukuran file JQuery tidak lebih dari 200kb. JQuery juga sudah support plugin-

plugin tambahan untuk fungsi-fungsi pada masalah yang lebih spesifik. Untuk

mendapatkan plugin-plugin tersebut dapat mengakses http://plugins.jquery.com/.

5. JavaScript

Menurut Sianipar (2015:1) “JavaScript merupakan bahasa script populer

yang dipakai untuk menciptakan halaman web yang dapat berinteraksi dengan

pengguna dan dapat merespon event yang terjadi pada halaman”. JavaScript

merupakan perekat yang menyatukan halaman-halaman web. Akan sangat susah

menjumpai halaman web komersial yang tidak memuat kode JavaScript.

2.1.3. Basis Data

Menurut Hidayatullah (2017:142) “Basis data dapat didefinisikan sebagai

himpunan kelompok data yang saling berhubungan yang diorganisasikan

sedemikian rupa agar kelak dapat dimanfaatkan kembali dengan cepat dan

12

mudah”. Prinsip utamanya adalah pengaturan data. Tujuan utamanya kemudahan

dan kecepatan dalam pengambilan kembali data.

Adapun aplikasi basis data yang digunakan dalam pembuatan aplikasi web

sekolah ini diantaranya:

1. MySQL

Menurut Jubilee (2014:2) “MySQL adalah RDBMS yang cepat dan mudah

digunakan, serta sudah banyak digunakan untuk berbagai kebutuhan”. MySQL

dikembangkan oleh MySQL AB Swedia. Berikut keunggulan dari MySQL:

a. Berlisensi open-source, sehingga dapat digunakan secara gratis.

b. Merupakan program yang powerfull dan menyediakan fitur yang lengkap.

c. Menggunakan bentuk standar bahasa data SQL.

d. Dapat bekerja dengan banyak sistem operasi dan dengan bahasa-bahasa

pemrograman seperti PHP, PERI,C, C++, JAVA, dan lain-lain.

e. Bekerja dengan cepat dan baik, bahkan dengan data set yang banyak.

f. Sangat mudah digunakan dengan PHP untuk pengembangan aplikasi web.

g. Mendukung banyak database, sampai 50 juta baris atau lebih dalam suatu

tabel.

h. Dapat dikostumisasi sesuai dengan keinginan.

2. PhpMyAdmin

Menurut Madcoms (2016:186) “phpMyAdmin adalahsebuah aplikasi open

source yang berfungsi untuk memudahkan manajemen MySQL”. Dengan

menggunakan phpMyAdmin, kita dapat membuat database, membuat tabel, meng-

13

insert, menghapus dan meng-update data dengan GUI dan terasa lebih mudah,

tanpa perlu mengetikkan perintah SQL secara manual.

Karena berbasis web, maka phpMyAdmin dapat dijalankan di banyak OS,

selama dapat menjalankan web server dan MySQL. PhpMyAdmin dapat di-

download secara gratis di http://www.phpmyadmin.net. Jika kita menggunakan

paket software web server Xampp, maka tidak perlu meng-instal phpMyAdmin

secara terpisah.

3. Framework

Menurut Hidayatullah (2017:282) “Framework dapat diartikan sekumpulan

perintah atau program dasar dimana perintah dasar tersebut dapat digunakan lagi

untuk menyelesaikan masalah yang lebih kompleks sehingga dapat digunakan

untuk membantu membuat aplikasi baru atau aplikasi kompleks tanpa harus

membuat program dari awal”.

Beberapa keuntungan yang didapat dalam penggunaan framework adalah:

a. Menghemat waktu pengembangan

b. Penggunaan ulang program atau kode

c. Bantuan komunitas

d. Kumpulan program terbaik

4. CodeIgniter

Menurut Hidayatullah (2017:281) “Code Igniter adalah salah satu

Framework PHP bahkan Framework PHP yang paling powerful saat ini karena di

dalamnya terdapat fitur lengkap aplikasi web di mana fitur-fitur tersebut sudah

dikemas menjadi satu”. Selain itu , Code Igniter juga saat ini banyak digunakan

http://www.phpmyadmin.net/

14

khususnya bagi developer web untuk mengembangkan aplikasi berbasis webnya

tersebut.

5. Bootstrap

Menurut Jubilee (2016:1) “Bootstrap adalah framework front-end yang

intuitif dan powerful untuk pengembangan aplikasi web yang lebih cepat dan

mudah”. Bootstrap menggunakan HTML, CSS, dan JavaScript.

Berikut ini kelebihan-kelebihan Bootstrap yaitu:

a. Menghemat waktu

b. Fitur yang responsive

c. Desain yang konsisten

d. Mudah digunakan

e. Didukung oleh semua browser popular

f. Gratis

6. Adobe Photoshop

Menurut Hendratman (2016:1) “Adobe Photoshop adalah software gratis

berbasis Bitmap (pixel), yang biasa dipakai untuk mengedit foto, membuat

ilustrasi bahkan desain web”. Sehingga banyak digunakan di studio foto,

percetakan, production house, biro arsitektur, pabrik tekstil dan bidang yang

berkaitan dengan Teknologi Informatika (IT).

15

2.1.4. Model Pengembangan Perangkat Lunak

Menurut Pressman (2015:42) “Model Waterfall adalah model klasik yang

bersifat sistematis, berurutan dalam membangun software”. Nama model ini

sebenarnya adalah “Linear Sequential Model”. Model ini sering disebut juga

dengan “classic life cycle” atau metode waterfall. Model ini termasuk ke dalam

model generic pada rekayasa perangkat lunak dan pertama kali di perkenalkan

oleh WinstonRoyce sekitar tahun 1970 sehingga sering dianggap kuno, tetapi

merupakan model yang paling banyak dipakai dalam Software Enginering (SE).

Model ini melakukan pendekatan secara sistematis dan berurutan. Disebut dengan

waterfall karena tahap demi tahap yang dilalui harus menunggu selesainya tahap

sebelumnya dan berjalan berurutan.

Dalam pengembangannya metode waterfall memiliki beberapa tahapan

yang berurut yaitu : requirement (analisis kebutuhan), design system (desain

sistem), Coding (pengkodean) &Testing (pengujian), Penerapan Program,

pemeliharaan.

Tahapan-tahapan dari metode waterfall sebagai berikut:

1. Analisis Kebutuhan (Requirement Analisis)

Tahap ini pengembang sistem diperlukan komunikasi yang bertujuan untuk

memahami perangkat lunak yang diharapkan oleh pengguna dan batasan

perangkat lunak tersebut. Informasi ini biasanya dapat diperoleh melalui

wawancara, diskusi atau survei langsung. Informasi dianalisis untuk mendapatkan

data yang dibutuhkan oleh pengguna.

16

2. Desain Sistem (System Design)

Spesifikasi kebutuhan dari tahap sebelumnya akan dipelajari dalam fase ini

dan desain sistem disiapkan. Desain Sistem membantu dalam menentukan

perangkat keras (hardware) dan sistem persyaratan dan juga membantu dalam

mendefinisikan arsitektur sistem secara keseluruhan.

3. Implementation

Pada tahap ini, sistem pertama kali dikembangkan di program kecil yang

disebut unit, yang terintegrasi dalam tahap selanjutnya. Setiap unit dikembangkan

dan diuji untuk fungsionalitas yang disebut sebagai unit testing.

4. Integration & Testing

Seluruh unit yang dikembangkan dalam tahap implementasi diintegrasikan

ke dalam sistem setelah pengujian yang dilakukan masing-masing unit. Setelah

integrasi seluruh sistem diuji untuk mengecek setiap kegagalan maupun

kesalahan.

5. Operation & Maintenance

Tahap akhir dalam model waterfall. Perangkat lunak yang sudah jadi,

dijalankan serta dilakukan pemeliharaan. Pemeliharaan termasuk dalam

memperbaiki kesalahan yang tidak ditemukan pada langkah sebelumnya.

Perbaikan implementasi unit sistem dan peningkatan jasa sistem sebagai

kebutuhan baru.

Kelebihan menggunakan metode air terjun (waterfall) adalah metode ini

memungkinkan untuk departementalisasi dan kontrol. proses pengembangan

model fase one by one, sehingga meminimalis kesalahan yang mungkin akan

17

terjadi. Pengembangan bergerak dari konsep, yaitu melalui desain, implementasi,

pengujian, instalasi, penyelesaian masalah, dan berakhir di operasi dan

pemeliharaan.

2.2. Teori Pendukung

2.2.1. Struktur Navigasi

Dalam penggunaan sebuah program website diperlukan struktur navigasi

sebagai bentuk penggambaran dari halaman-halaman apa saja yang tersedia

didalam website. Layaknya petunjuk arah, navigasi memudahkan pengguna untuk

“berselancar” didalam sebuah website.

Objek yang digunakan dalam navigasi dapat berupa tombol atau teks yang

disisipkan hyperlink untuk mengakses suatu halaman tertentu.

Menurut Andriansyah (2016:61) “Struktur navigasi dapat diartikan sebagai

alur dari suatu program yang menggambarkan rancangan hubungan antar area

yang berbeda sehingga memudahkan proses pengorganisasian seluruh elemen

website”.

Menurut Binanto (2010:269-270), ada empat macam bentuk navigasi, yaitu:

1. Struktur Navigasi Linier

Struktur navigasi linier hanya mempunyai satu rangkaian cerita yang

berurut yang menampilkan satu demi satu tampilan layar secara berurut menurut

urutannya. Tampilan yang dapat ditampilkan pada struktur jenis ini adalah satu

halaman sebelumnya atau satu halaman sesudahnya, tidak dapat dua halaman

sebelumnya atau dua halaman sesudahnya, pengguna akan melakukan navigasi

secara berurutan, dalam frame atau byte informasi satu ke yang lainnya.

18

Sumber : Binanto (2010a:269)

Gambar II.1. Struktur Navigasi Linier

2. Struktur Navigasi Tidak Berurut (Non-Linier)

Struktur navigasi non-linier merupakan pengembangan dari struktur

navigasi linier. Pada struktur ini diperkenankan membuat navigasi bercabang.

Percabangan yang dibuat pada struktur non-linier ini berbeda dengan percabangan

pada struktur hirarki, karena pada percabangan non-linear ini walaupun terdapat

percabangan tetap tiap-tiap tampilan mempunyai kedudukan yang sama yaitu

tidak ada Master Page dan Slave Page, pengguna akan melakukan navigasi

dengan bebas melalui isi proyek dengan tidak terikat jalur yang sudah ditentukan

sebelumnya.

Sumber : Binanto (2010c:270)

Gambar II.2. Struktur Navigasi Non-Linier

http://ehnanda.blogspot.com/


19

3. Struktur Navigasi Hirarki

Struktur dasar ini disebut juga struktur linier dengan percabangan karena

pengguna melakukan navigasi disepanjang cabang pohon struktur yang terbentuk

oleh logika isi.

Sumber : Binanto (2010b:269)

Gambar II.3. Struktur Navigasi Hirarki

4. Struktur Navigasi Campuran (Composite)

Struktur navigasi jenis ini pengguna akan melakukan navigasi dengan bebas

(secara non-linier), tetapi terkadang dibatasi presentasi linier film atau informasi

penting dan pada data yang paling terorganisasi secara logis pada suatu hirarki.


20

Sumber : Binanto (2010d:270)

Gambar II.4. Struktur Navigasi Campuran

2.2.2. ERD (Entity Relationship Diagram)

Menurut Fathansyah (2015:81) “Model Entity-Relationship yang berisi

komponen-komponen Himpunan Entitas dan Himpunan Relasi yang masing-

masing dilengkapi dengan atribut-atribut yang merepresentasikan seluruh fakta

dari „dunia nyata‟ yang kita tinjau, dapat digambarkan dengan lebih sistematis

dengan menggunakan Diagram Entity-Relationship (Diagram E-R)”.

Notasi-notasi simbolik di dalam Diagram E-R yang digunakan adalah:

A. Persegi panjang, menyatakan Himpunan Entitas.

B. Lingkaran atau Elip, menyatakan Atribut (Atribut yang berfungsi sebagai

key di garis bawahi).

C. Belah ketupat, merupakan Himpunan Relasi.

D. Garis, sebagai penghubung antara Himpunan Relasi dengan Himpunan

Entitas dan Himpunan Entitas dengan Atributnya.


21

E. Kardinalitas Relasi dapat dinyatakan dengan banyaknya garis cabang atau

dengan pemakaian angka (1 dan 1 untuk relasi satu-ke-satu, dan N untuk

relasi satu-ke-banyak atau N dan N untuk relasi banyak-ke-banyak).

Berikut contoh notasi simbolik di dalam Diagram E-R antara lain:

Himpunan Entitas E Himpunan Relasi R

Atribut a sebagai key Link

Sumber : Fathansyah (2015a:82)

Gambar II.5. Simbol atau Notasi Diagram E-R

Berikut adalah contoh penggambaran relasi antar himpunan entitas lengkap

dengan kardinalitas relasi dan atribut-atributnya:

1. Relasi satu-ke-satu (one-to-one)

Contoh:

Adanya relasi antara himpunan entitas Dosen dengan himpunan entitas

Jurusan. Himpunan relasinya kita beri nama „Mengepalai‟. Para relasi ini, setiap

dosen paling banyak mengepalai satu jurusan (walaupun memang tidak semua

dosen yang menjadi ketua jurusan). Dan setiap jurusan pasti dikepalai oleh paling

banyak satu orang dosen. Maka penggambarannya adalah:

E

a

R

22

Sumber : Fathansyah (2015b:82)

Gambar II.6. Diagram E-R Untuk Relasi Satu Ke Satu

Pada Diagram E-R diatas dapat dilihat bahwa himpunan entitas Dosen dan

himpunan entitas Jurusan masing-masing memiliki 2 buah atribut saja. Sementara

itu, pada himpunan relasi Mengepalai juga terdapat 2 buah atribut yang secara

bersama-sama berfungsi juga sebagai key pada himpunan relasi tersebut. Karena

kedua atribut atau key tersebut sebetulnya berasal dari atribut key dari masing-

masing himpunan entitas yang dihubungkannya, maka keduanya digolongkan

sebagai Key Asing (Foreign-Key). Adanya kedua atribut key tersebut selanjutnya

akan dapat menunjukkan dosen mana yang mengepalai suatu jurusan (menjadi

ketua jurusan), atau sebaliknya jurusan mana yang dikepalai seorang dosen.

2. Relasi satu-ke-banyak (one-to-many)

Contoh:

Adanya relasi antara himpunan entitas Dosen dengan himpunan entitas

Kuliah. Himpunan relasinya diberi nama „Mengajar‟. Pada relasi ini, setiap dosen

dapat mengajar lebih dari satu mata kuliah, sedang setiap mata kuliah diajar hanya

oleh paling banyak satu orang dosen. Maka penggambarannya adalah:

23

Sumber : Fathansyah (2015c:83)

Gambar II.7. Diagram E-R Untuk Relasi Satu Ke Banyak

Key Asing (Foreign-Key) dari himpunan relasi Mengajar diatas adalah

nama_dos dan kode_kul, yang masing-masing berasal dari himpunan entitas

Dosen dan himpunan entitas Kuliah. Tetapi disamping kedua atribut key tersebut,

ada pula 2 atribut tambahan yang tidak berasal dari salah satu himpunan entitas

yang dihubungkannya. Hal ini memang dimungkinkan dan bahkan umum terjadi.

Dengan adanya keempat atribut tersebut pada himpunan relasi Mengajar, maka

dapat kita ketahui jadwal pelaksanaan setiap mata kuliah beserta dosen yang

mengajarkannya.

3. Relasi banyak-ke-banyak (many-to-many)

Contoh:

Adanya relasi antara himpunan entitas Mahasiswa dengan himpunan entitas

Kuliah. Himpunan relasinya diberi nama „Mempelajari‟. Pada relasi ini, setiap

mahasiswa dapat mempelajari lebih dari satu mata Kuliah. Demikian juga

sebaliknya, setiap mata kuliah dapat dipelajari oleh lebih dari satu orang

mahasiswa. Maka penggambarannya adalah:

24

Sumber : Fathansyah (2015d:84)

Gambar II.8. Diagram E-R untuk Relasi Banyak Ke Banyak

Keberadaan himpunan relasi Mempelajari diatas akan memliki dua fungsi,

yaitu untuk menunjukkan mata kuliah mana saja yang diambil oleh seorang

mahasiswa (atau mahasiswa mana saja yang mengambil mata kuliah tertentu) dan

indeks nilai yang diperoleh seorang mahasiswa untuk mata kuliah tertentu (tentu

saja setelah data indeks nilai tersebut disimpan).

2.2.3. LRS (Logical Record Structure)

Menurut Andriansyah (2016:53) “LRS merupakan transformasi dari

penggambaran ERD dalam bentuk yang lebih jelas dan mudah untuk dipahami.

Penggambaran LRS hampir mirip dengan penggambaran normalisasi file, hanya

saja tidak digambarkan symbol asterix (*) sebagai simbol primary key (kunci

utama) dan foreign key (kunci tamu)”.

25

2.2.4. Alat Pendukung

1. Adobe Dreamweaver CS6

Menurut Mandar (2017:1) “Adobe Dreamweaver merupakan aplikasi

pengembang yang berfungsi untuk mendesain web yang dibuat, dikembangkan,

dan diproduksi oleh Adobe System”. Sampai saat ini versi terbaru dari Adobe

Dreamweaver adalah Adobe Dreamweaver CS6 yang dirilis pada tanggal 21 April

2012 dengan harga $399 USD.

Aplikasi pengembang web ini sangat digemari oleh web desainer dalam

merancang web sebab perangkat lunak komputer ini memiliki kelebihan dan

kemudahan dalam penggunaannya. Dengan menggunakan aplikasi ini,

pengembang web dapat dilakukan secara visual sehingga hasil perancangan web

dapat langsung terlihat tanpa harus menggunakan aplikasi bantu peramban seperti

Google Crome, Firefox, atau Internet Explorer. Teknologi web yang didukung

oleh Adobe Dreamweaver sangat beragam, salah satunya adalah teknologi untuk

kebutuhan pengembang web berbasis mobile.

2. XAMPP

Menurut Madcoms (2016:186) “Xampp adalah sebuah paket kumpulan

software yang terdiri dari Apache, MySQL, PhpMyAdmin, PHP, Perl, Filezilla

dan lain-lain”. Xampp berfungsi untuk memudahkan instalasi lingkungan PHP,

dimana biasanya lingkungan pengembang web memerlukan PHP, Apache,

MySQL dan PhpMyAdmin serta software-software yang terkait dengan

pengembangan web. Dengan menggunakan Xampp, tidak perlu lagi menginstal

aplikasi-aplikasi tersebut satu persatu. Paket aplikasi perlu di extract dan di-instal

26

terlebih dahulu, dengan memilih jenis Xampp sesuai dengan jenis OS-nya. Setelah

sukses menginstal Xampp, kita dapat langsung mengaktifkan MySQL.

2.2.5. Pengujian Web (Blackbox Testing)

Menurut Pratama (2014:50-51) “Blackbox Testing adalah pengujian di sisi

pengembang dilakukan oleh pengembang atau programmer dari aplikasi

bersangkutan, atau mereka yang mengerti dan terlibat di dalam pengembangan

sistem tersebut”. Pengujian ini menekankan pada sejauhmana fungsionalitas

sistem informasi berjalan dengan baik sesuai dengan yang diinginkan oleh

pengguna dan pengembang.

Blackbox Testing mempunyai empat jenis pengujian yaitu:

1. Pengujian Interface (tatap muka) aplikasi.

Pengujian Interface (tatap muka) aplikasi sistem informasi bertujuan untuk

mengetahui fungsionalitasdari setiap elemen interface yang ada di setiap halaman

pada aplikasi sistem informasi. Elemen ini berupa tombol (button) yang

menjalankan aksi sesuai yang diharapkan oleh pengguna dan pengembang.

2. Pengujian fungsi dasar sistem.

Pengujian fungsi dasar sistem bertujuan untuk mengetahui sejauh mana

kinerja dari setiap fungsi dasar sistem yang ada di dalam aplikasi sistem

informasi. Fungsi-fungsi ini dalam penerapannya membentuk satu atau sejumlah

modul. Modul ini dapat digunakan baik di sisi pengembang maupun sebagai

pengguna (misal: instalasi modul melalui akun administrator).

3. Pengujian form handle sistem.

27

Pengujian form handle sistem bertujuan untuk mengetahui seperti apa dan

sejauh mana respon oleh sistem informasi terhadap inputan yang diberikan oleh

pengguna. Inputan yang diberikan oleh pengguna ke dalam sistem informasi dapat

berupa inputan bernilai (misalkan: data) maupun inputan kosong.

4. Pengujian keamanan sistem.

Pengjian keamanan sistem bertujuan untuk mengetahui sejauh mana tingkat

keamanan yang dimiliki oleh sistem informasi untuk dapat memberikan

kenyamanan kepada para pengguna. Keamanan dicek dari sisi sistem (misalkan:

SQL injection), kebijakan (misalkan: ada tidaknya penanganan minimal jumlah

karakter untuk password, otentikasi via e-mail), serta pengguna (misalkan: ada

tidaknya perbedaan hak akses untuk setiap kelompok pengguna).

28

BAB III

PEMBAHASAN

3.1. Tinjauan Sekolah

1. Menyiapkan tamatan agar menjadi warga Negara yang produktif,

adaptif dan kreatif serta memili ahlak yang mulia dalam

mengamalkan ilmu pengetahuannya.

2. Memberikan kesempatan pada para remaja yang orang tuanya

kurang mampu membiayai mereka masuk perguruan tinggi agar

terpenuhi haknya untuk mendapatkan pendidikan secara layak,

sehingga dalam usia 18-20 tahun mereka sudah mempunyai

kecakapan/keterampilan untuk diterima bekerja di dunia industri

atau mengembangkan usaha mandiri.

3. Mengembangkan ilmu desain dengan dukungan kreatifitas dan

kemajuan teknologi multimedia dan jaringan merupakan salah satu

bekal kemandirian untuk menjadi inovator dalam mengelola potensi

daerah dalam pengembangan industri kreatif.

4. Memberikan pendidikan dan pelatihan untuk program keahlian

Multimedia dan Tehnik Komputer Jaringan, kepada para lulusan

SMP/MTs agar mereka memiliki kompetensi bidang Multimedia

dan Tehnik Komputer Jaringan dan mampu bersaing secara

professional di dunia usaha.

5. Menjadi wirausahawan bidang Multimedia dan Komputer Jaringan

setelah lulus dari SMK Bina Mandiri 2 atau menjadi pekerja kelas

menengah di sektor industri multimedia, design, percetakan,

jaringan komputer, dll.

6. Menyiapkan peserta didik yang akan melanjutkan ke Perguruan

Tinggi dengan bekal IMTAQ dan IPTEK yang seimbang.

7. Mengutamakan penyiapan peserta didik untuk memenuhi lapangan

kerja serta mengembangkan sikap professional.

29

8. Agar tamatan Sekolah Menegah Kejuruan mempunyai peluang yang

semakin besar untuk memasuki lapangan kerja di dalam dan di luar

negeri.

9. Agar tamatan Sekolah Menengah Kejuruan memiliki bekal yang

kuat untuk berhasil dalam melakukan usaha mandiri.

10. Dengan ketrampilan hidup yang memadai menyiapkan peserta

didik agar memiliki banyak pilihan karir, mampu berkompetisi dan

mampu mengembangkan diri.

A. Profil Sekolah

1. Nama Sekolah : SMK BINA MANDIRI 2

2. Kepala Sekolah : M TATA WARDANA S.PD

3. Akreditasi Sekolah : B (Baik)

4. Nomor Statistik Sekolah : 402020623424

5. Nomor Statistik Bangunan : 00114171312001

6. Nomor Pokok Sekolah Nasional : 6988463

7. Surat Keputusan / SK : 421.3/910/DISDIK

8. Tahun berdiri : 2006

9. Alamat : Jl. Karang Tengah-Cireundeu KM7

10. Telepon : (0283) 3321259

11. Kelurahan / kecamatan : Girijaya

12. Kabupaten / Provinsi : Sukabumi / Jawa Barat

30

3.1.1. Sejarah Sekolah

Berawal dari kepedulian tokoh masyarakat dilingkungan Kampung Cireundeu Desa Girijaya Kecamatan Nagrak, Kabupaten Sukabumi tentang pendidikan generasi remaja yang minim kemampuan dan legaliatas pendidikan, untuk menjawab tantangan dunia kerja dan kehidupan masyarak secara umum, timbulah gagasan untuk mendidirikan lembaga pendidikan yang bisa memenuhi semua tujuan yang dimaksud. Maka cikal Bakal SMK Bina Mandiri 2 Kab. Sukabumi pun secara bertahap tumbuh, SMK Bina Mandiri 2 Kabupaten Sukabumi yang beralamat di Jalan Karangtengah Cireundeu KM.7 Desa Girijaya RT 006/ RW 002 Kecamatan Nagrak Kab. Sukabumi, Berdiri Sejak Tahun 2006.

Pada Tahun 2014 penantian lama terjawab, yaitu secara Administrasi dan Lokasi SMK Bina Mandiri 2 Kab. Sukabumi menjadi sekolah yang mandiri. Artinya lokasi sudah milik sendiri dan Izin Oprasional Sekolah (IOS) pun telah disahkan oleh Kementrian Pendidikan Wilayah Sukabumi, dengan Nomor 421.3/910/DISDIK Tanggal 24 Desember 2014.

Berikut daftar kepala sekolah yang pernah menjabat di SMK BINA MANDIRI2 :

1. Asep Sukma S.PD menjabat periode 2006– 2014

2. M Tata Wardana S.PD menjabat periode 2014 –( sampai sekarang)

31

Setiap lembaga pendidikan tentunya mempunyai gambaran atau tujuan di

masa depan (Visi) dan cara untuk mencapai tujuan itu (Misi). Adapun visi misi

Sekolah Menengah Kejuruan Bina Mandiri yaitu yaitu:

1. Visi

“Mewujudkan SMK unggulan, bermutu dan berwawasan global di bidang

teknologi informasi serta membekali peserta didik dengan IMTAQ dan IPTEK

yang seimbang untuk dapat menjawab tantangan masa depan”.

2. Misi

a. Mengembangkan kegiatan pendidikan keahlian yang mengarah kepada

pembekalan life skill teknologi informasi dan wawasan global.

b. Menerapkan sistem pembelajaran yang memanfaatkan teknologi informasi

terkini.

c. Menerapkan sistem pembelajaran yang memanfaatkan teknologi informasi

terkini.

3. Tujuan Sekolah

a) Memiliki kualitas keimanan dan ketakwaan kepada Allah SWT.

b) Memiliki Sumber Daya Manusia yang profesional.

c) Bermutu dalam pelaksanaan pembelajaran dan pengelolaan

administrasi, untuk menghasilkan lulusan yang handal.

d) Memiliki wawasan yang luas tentang imtaq, perkembangan iptek dan

sosial budaya

e) Memiliki tanggung jawab sosial terhadap lingkungan.

f) Memiliki keunggulan yang berakar dari ciri khas daerah

32

3.1.2. Struktur Organisasi dan Fungsi

1. Struktur Organisasi

Sumber : Petunjuk Teknis Pengelolaan Administrasi Sekolah Menengah SMK

BINA MANDIRI 2 Periode Tahun 2016 / 2017

Gambar III.1. Struktur Organisasi Sekolah

2. Tugas Pokok dan Fungsi

A. Dewan Komite Sekolah

Sebagai lembaga pendukung, baik yang berwujud finansial, pemikiran

maupun tenaga dalam menyelenggarakan pendidikan disuatu pendidikan.

B. Kepala Sekolah

Sebagai seorang pemimpin, membuat suatu perencanaan sekolah setiap

tahunnya. Perencanaan program seklah tersebut yang menyangkut tujuan

yang dicapai, materi belajar yang bersifat akademis maupun praktis serta

perencanaan tenaga pendidik.

33

C. Wakil Kepala Sekolah

Wakil Kepala Sekolah Membantu kepala sekolah dalam kegiatan-kegiatan

menyusun perencanaan , membuat program kegiatan dan pelaksanaan program

D. Bendahara

Mengelola kegiatan keuangan sekolah dan bertanggung jawab kepada

kepala sekolah

E. Operator

Operator mengurus data siswa dan tenaga pendidik

F. Tata Usaha

Mempunyai tugas mengkoordinir dan melaksanakan ketatausahaan sekolah

serta bertanggung jawab kepada kepala sekolah

G. Kabid Kesiswaan

Merencanakan,mempersiapkkan dan melaksanakan kegiatan penerimaan

siswa baru. Mempersiapakan MOS,membina dan memantau kegiatan OSIS

H. Kurikulum

Mempersiapkan rapat-rapat guru,menelaah mempelajari dan menguasai

kurikulum yang sedang berlaku ,memberi tugas guru memberi arahan pembuatan

program

I. Sarana

Memelihara dan mengawasi barang-barang inventaris sekolah, mengusulkan

kepada kepala sekolah tentang barang-barang bangunan dan gedung yang

perlu diperbaiki

34

J. Humas

Mempersiapkan pembentukan komite sekolah , mempersiapkan rapat-rapat

pengurus komite sekolah , mempersiapkan dan mengatur pertemuan orang

tua siswa/wali dalam rangka penyampaian program sekolah

K. Program Tkr

Merencanakan seluruh kegiatan KBM praktek di paket keahlian Teknik -

kendaraan ringan

L. Kep Program Administrasi

Merencanakan seluruh kegiatan KBM praktek di paket keahlian Teknik -

kendaraan ringan

M. Wali Kelas

Pengisisan daftar kumpulan nilai, pembuatan catatan khusus tentang siswa,

pengisisan buku laporan pwnilaian hasil belajar, pembagian buku laporan

hasil belajar.

N. Siswa

Mematuhi dan mentaati segala peraturan yang sudah ditetapkan sekolah.

35

3.2. Analisis Kebutuhan

Dalam menganalisa kebutuhan perlu dilakukan analisis kebutuhan pada

sistem untuk menentukan dan mengungkapkan kebutuhan sistem. Kebutuhan ini

meliputi kebutuhan pengguna, kebutuhan perangkat keras dan kebutuhan

perangkat lunak.

3.2.1. Kebutuhan Fungsional

Pada sistem informasi akademik nilai siswa pa SMK BINA MANDIRI

kebutuhan pengguna sebagai berikut:

1. Administrator

a. Admin melakukan login ke dalam sistem administrator.

b. Admin dapat mengubah, menambah, menghapus data guru.

c. Admin dapat mengubah, menambah, menghapus data siswa.

d. Admin dapat mengubah, menambah, menghapus mata pelajaran.

e. Admin dapat mengubah, menambah, menghapus jadwal.

f. Admin dapat melihat data guru.

g. Admin dapat melihat data siswa.

h. Admin dapat melihat data mata pelajaran.

i. Admin dapat melihat data jadwal.

j. Admin melakukan logout.

2. Guru

a. Guru melakukan login ke dalam sistem guru.

b. Guru dapat mengubah, menambah, menghapus jadwal.

c. Guru dapat mengubah, menambah, menghapus mata pelajaran.

d. Guru dapat mengubah, menambah, menghapus nilai siswa.

36

e. Guru dapat melihat data pribadi.

f. Guru melakukan logout.

3. Siswa

a. Siswa login ke dalam sistem siswa.

b. Siswa dapat melihat data pribadi.

c. Siswa dapat melihat jadwal.

d. Siswa dapat melihat mata pelajaran.

e. Siswa dapat melihat nilai.

f. Siswa melakukan logout.

3.2.2. Kebutuhan Non Fungsional

Kebutuhan non fungsional adalah kebutuhan yang berdasarkan pada

kebutuhan dari suatu sistem yang harus dimiliki. Kebutuhan non fungsional juga

berisi informasi-informasi apa saja yang harus ada dan dihasilkan oleh sebuah

sistem. Berikut ini adalah kebutuhan non fungsional dari sistem informasi

akademik nilai siswa berbasis web pada SMK Bina Mandiri :

a. Operasional

1) Sistem operasi yang umum digunakan adalah seperti Microsoft

Windows, Linu

2) x atau MacOs.

3) Prosesor yang digunakan minimal Pentium 4 atau lebih

4) Kebutuhan memory yang digunakan minimal 1 GB

37

5) Untuk mengakses portal atau website membutuhkan web browser dan

koneksi internet

b. Security / Keamanan

1) Sistem memberikan keamanan untuk akses admin dengan adanya

penggunaan username dan password agar bisa masuk ke sistem

2) Keamanan password dalam database juga diatur dengan menerapkan

enskripsi MD5.

c. Informasi

1) Digunakan untuk menginformasikan apabila admin melakukan

kesalahan dalam menginput username dan password ketika login

2) Digunakan untuk menginformasikan apabila pengguna melakukan

kesalahan dalam menginput username dan password ketika login

3.3. Perancangan Perangkat Lunak

3.3.1. Rancangan Antar Muka

Rancangan antar muka (Interface) dimaksudkan untuk memudahkan

pengguna website ini diharapkan dapat digunakan oleh banyak pengguna dari

berbagai latar belakang dan juga karena tidak semua pengguna adalah orang yang

mengerti dan ahli dalam bidang pengoperasian komputer. Rancangan Interface

dari website Sistem Informasi Akademik SMK BINA MANDIRI 2 SUKABUMI

sebagai berikut:

38

1. Rancangan Halaman Utama

Gambar III.2. Rancangan Halaman Utama

Tampilan halaman utama berfungsi untuk menampilkan informasi umum tentang

SMK BINA MANDIRI 2 yang bisa di akses oleh siapa pun (masyarakat, guru,

siswa, orangtua). Di dalam tampilan halaman utama terdapat beberapa menu yaitu

header, home, profil kepala sekolah, sejarah sekolah, visi misi, struktur organisasi

sekolah, sarana prasarana, galeri, login, content, footer.

2. Rancangan Halaman Login

Gambar III.3. Rancangan Halaman Login

39

Menu login ada di halaman utama, ketika menu login di klik lalu akan

mucul kotak yang harus diisi sesuai level akses pengguna yaitu kotak

username, kotak password, kotak hak akses, dan tombol login. Pada

tampilan halaman login ada tiga level akses untuk pengguna yaitu admin,

guru, siswa. Dengan prosedur sebagai berikut:

a. Untuk login sebagai admin, pengguna memasukkan username yaitu

NUPTK (nomor unik pendidik dan tenaga kependidikan) dan password

yaitu tanggal lahir lalu memilih level akses sebagai admin maka

pengguna akan diarahkan dan masuk ke menu sistem admin.

b. Untuk login sebagai guru, pengguna memasukkan username yaitu

NUPTK (nomor unik pendidik dan tenaga kependidikan) dan password

yaitu tanggal lahir lalu memilih level akses sebagai guru maka pengguna

akan diarahkan dan masuk ke menu sistem guru.

c. Untuk login sebagai siswa, pengguna memasukkan username yaitu NIS

(nomor induk siswa) dan password yaitu tanggal lahir lalu memilih level

akses sebagai siswa maka pengguna akan diarahkan dan masuk ke menu

sistem guru. Khusus untuk login siswa bisa diwakilkan oleh orang tua

siswa tersebut dengan memasukkan username NIS siswa tersebut dan

password tanggal lahir siswa tersebut.

40

3. Rancangan Halaman Gagal Login

Gambar III.4. Rancangan Halaman Gagal Login

Untuk pengguna yang ingin masuk ke sistem menu, maka pengguna harus

melakukan pengisian form login dengan memasukkan username dan

password dan memilih hak akses yang benar. Apabila login berhasil maka

sistem akan mengarahkan ke menu halaman sesuai hak akses pengguna. Jika

gagal maka sistem akan menolak dan muncul pesan seperti gambar diatas,

lalu mengarahkan kita untuk klik tombol “Kembali Ke Halaman Login”

untuk kembali ke halaman login dan mengulang proses login.

4. Rancangan Halaman Menu Admin

Gambar III.5. Rancangan Halaman Menu Admin

Setelah pengguna login sebagai admin, maka pengguna akan masuk ke

halaman admin. Pada tampilan menu admin terdapat beberapa menu yaitu

41

navigasi bar yang berisi keterangan halaman admin, dashboard, logout, dan

menu ruang guru, ruang siswa dan nilai, mata pelajaran, kelas, jadwal.

5. Rancangan Halaman Menu Admin Ruang Guru

Gambar III.6. Rancangan Halaman Menu Admin Ruang Guru

Saat admin klik menu ruang guru maka akan tampil halaman ruang guru,

yang terdapat beberapa menu nama guru, NUPTK, jenis guru, gelar, jenis

kelamin, tempat tanggal lahir, alamat, foto, option edit hapus. Dan jika

admin ingin menambah data guru baru klik tombol “Tambah Guru”, dan

ketika admin ingin mencari data guru bisa cari di kolom search dengan

memasukkan kata yang terdapat di halaman ruang guru.

42

6. Rancangan Halaman Menu Admin Tambah Guru

Gambar III.7. Rancangan Halaman Menu Admin Tambah Guru

Untuk menambahkan data guru baru, admin harus mengklik tombol

“Tambah Guru” di menu halaman admin lalu akan muncul form seperti

diatas dan harus diisi semua form nya baru klik simpan. Maka data guru

baru berhasil di tambahkan, Jika tidak jadi untuk menambah data guru baru

klik tombol kembali maka sistem akan kembali ke menu admin halaman

ruang guru.

43

7. Rancangan Halaman Menu Admin Edit Guru

Gambar III.8. Rancangan Halaman Menu Admin Edit Guru

Untuk mengedit data guru yang sudah ada, admin harus mengklik icon edit

pada kolom option lalu akan muncul tampilan seperti diatas, lalu klik baris

yang ingin di edit lalu klik simpan maka data yang baru akan tersimpan, jika

tidak jadi untuk mengedit klik tombol kembali maka sistem akan kembali ke

halaman ruang guru.

44

8. Rancangan Halaman Menu Admin Hapus Guru

Gambar III.9. Rancangan Halaman Menu Admin Hapus

Guru

Untuk menghapus data guru, admin harus mengklik icon hapus pada tabel

ruang guru. Maka sistem akan muncul pesan seperti diatas, jika klik

“Hapus” maka data akan terhapus, jika tidak jadi menghapus klik tombol

“Batal” maka sistem akan kembali ke ruang guru.

9. Rancangan Halaman Menu Admin Sukses Edit Guru

Gambar III.10. Rancangan Halaman Menu Admin Sukses Edit Guru

Ini tampilan halaman sukses edit saat admin berhasil mengedit data guru.

10. Rancangan Halaman Menu Admin Gagal Edit Guru

Gambar III.11. Rancangan Halaman Menu Admin Gagal Edit Guru

45

Saat admin membuka halaman edit tapi tidak ada perubahan data yang

dilakukan lalu klik “Simpan” maka sistem akan menolak dan muncul pesan

gagal edit seperti di atas. Lalu klik tombol kembali sistem akan kembali ke

ruang guru.

11. Rancangan Halaman Menu Admin Profil Guru

Gambar III.12. Rancangan Halaman Menu Admin Profil Guru

Jika admin ingin melihat profil guru, admin harus mengklik nama guru yang

ada di tabel data guru, maka akan muncul tampilan profil guru seperti diatas.

Dengan foto guru dan data diri guru tersebut.

46

12. Rancangan Halaman Menu Admin Ruang Siswa dan Nilai

Gambar III.13. Rancangan Halaman Menu Admin Ruang Siswa dan

Nilai

Untuk menampilkan halaman menu ruang siswa admin harus mengklik

menu “Ruang Siswa dan Nilai”, maka akan muncul tampilan ruang siswa

dan nilai yang berisi menu nama siswa, NIS, kelas, jenis kelamin, tempat

tanggal lahir, alamat, foto, option edit hapus. Untuk menambahkan data

siswa baru admin harus mengklik tombol “Tambah Siswa”. Untuk mencari

data siswa yang sudah terinput admin bisa mengklik tombol search dengan

memasukkan kata yang ada dalam tabel data siswa.

47

13. Rancangan Halaman Menu Admin Tambah Siswa

Gambar III.14. Rancangan Halaman Menu Admin Tambah Siswa

Untuk tambah data siswa admin harus mengisi form tambah siswa seperti

gambar diatas, dan harus terisi semua lalu klik “Simpan” maka data siswa

baru berhasil di tambah kan. Jika tidak jadi untuk tambah siswa klik

“Kembali” lalu akan kembali ke tabel data siswa.

48

14. Rancangan Halaman Menu Admin Edit Siswa

Gambar III.15. Rancangan Halaman Menu Admin Edit Siswa

Jika ingin mengedit data siswa yang sudah ada, admin harus mengklik

“Edit” lalu lakukan perubahan data yang diinginkan di form edit lalu jika

sudah klik “Simpan” maka data akan terupdate. Jika tidak jadi melakukan

perubahan klik “Kembali” maka sistem akan kembali ke tabel data siswa.

49

15. Rancangan Halaman Menu Admin Sukses Edit Siswa

Gambar III.16. Rancangan Halaman Menu Admin Sukses Edit Siswa

Ini merupakan tampilan saat sukses edit siswa saat admin edit data siswa.

16. Rancangan Halaman Menu Admin Gagal Edit Siswa

Gambar III.17. Rancangan Halaman Menu Admin Gagal Edit Siswa

Saat admin membuka halaman edit siswa tapi tidak ada perubahan data yang


gagal edit seperti di atas. Lalu klik tombol “Kembali” sistem akan kembali

ke tabel data siswa.

17. Rancangan Halaman Menu Admin Hapus Siswa

Gambar III.18. Rancangan Halaman Menu Admin Hapus Siswa

50

Untuk menghapus data siswa, admin harus mengklik icon hapus pada tabel

data siswa. Maka sistem akan muncul pesan seperti diatas, jika klik “Hapus”

maka data akan terhapus, jika tidak jadi menghapus klik tombol “Batal”

maka sistem akan kembali ke tabel data siswa.

18. Rancangan Halaman Menu Admin Data dan Nilai Siswa

Gambar III.19. Rancangan Halaman Menu Admin Data dan Nilai

Siswa

Untuk melihat data dan nilai siswa, admin harus mengklik nama siswa

tersebut di tabel data siswa lalu akan mucul gambar seperti diatas yang

berisi data diri siswa dan nilai siswa yang meliputi mata pelajaran, semester,

tahun ajaran, nilai pr, nilai tugas, nilai ulangan, rata harian,nilai uts dan uas.

51

19. Rancangan Halaman Menu Admin Mata Pelajaran

Gambar III.20. Rancangan Halaman Menu Admin Mata Pelajaran

Untuk mengelola mata pelajaran, admin harus mengklik menu “Mata

Pelajaran” lalu akan muncul tampilan menu seperti diatas dengan menu

kode mata pelajaran, nama mata pelajaran, kkm, option edit hapus. Untuk

menambahkan data mata pelajaran baru, admin bisa mengklik tombol

“Tambah Mata Pelajaran”. Untuk mencari data mata pelajaran yang sudah

di input admin bisa mengklik tombol search dengan memasukkan kata yang

data pada tabel mata pelajaran.

52

20. Rancangan Halaman Menu Admin Tambah Mata Pelajaran

Gambar III.21. Rancangan Halaman Menu Admin Tambah Mata

Pelajaran

Untuk menambahkan data mata pelajaran baru, admin harus mengisi form

seperti gambar diatas dan harus terisi semua. Jika sudah klik “Simpan”

maka data mata pelajaran baru akan bertambah. Jika tidak jadi

menambahkan mata pelajaran klik “Kembali” maka sistem akan kembali ke

tabel data mata pelajaran.

21. Rancangan Halaman Menu Admin Edit Mata Pelajaran

Gambar III.22. Rancangan Halaman Menu Admin Edit Mata

Pelajaran

53

Untuk mengedit data mata pelajaran yang sudah ada, admin harus mengklik

tombol edit pada tabel data mata pelajaran dan melakukan perubahan pada

form edit mata pelajran seperti gambar diatas. Jika Sudah klik “Edit” maka

data mata pelajaran akan terupdate. Jika batal klik “Kembali” maka sistem

akan kembali ke data tabel mata pelajaran.

22. Rancangan Halaman Menu Admin Sukses Edit Mata Pelajaran

Gambar III.23. Rancangan Halaman Menu Admin Sukses Edit Mata

Pelajaran

Ini merupakan tampilan saat admin berhasil mengedit mata pelajaran.

23. Rancangan Halaman Menu Admin Hapus Mata Pelajaran

Gambar III.24. Rancangan Halaman Menu Admin Hapus Mata

Pelajaran

Untuk menghapus data mata pelajaran, admin harus mengklik icon hapus

pada tabel data mata pelajaran. Maka sistem akan muncul pesan seperti

diatas, jika klik “Hapus” maka data akan terhapus, jika tidak menghapus

klik tombol “Batal” maka sistem akan kembali ke tabel data mata pelajaran.

54

24. Rancangan Halaman Menu Admin Kelas

Gambar III.25. Rancangan Halaman Menu Admin Kelas

Untuk menampilkan menu kelas, admin harus mengklik “Kelas” lalu akan

muncul tampilan menu kelas yang berisi keterangan kode kelas, nama kelas,

jumlah siswa, option edit hapus. Untuk menambahkan data kelas baru,

admin klik tombol “Tambah Kelas”. Dan untuk mencari data kelas klik

tombol search dengan memasukkan kata yang ada di tabel kelas.

55

25. Rancangan Halaman Menu Admin Tambah Kelas

Gambar III.26. Rancangan Halaman Menu Admin Tambah Kelas

Untuk menambahkan data kelas baru, admin harus mengisi form seperti

gambar diatas dan harus terisi semua. Jika sudah klik “Simpan” maka data

kelas baru akan bertambah. Jika tidak jadi menambahkan kelas klik

“Kembali” maka sistem akan kembali ke tabel data kelas.

26. Rancangan Halaman Menu Admin Edit Kelas

Gambar III.27. Rancangan Halaman Menu Admin Edit Kelas

Untuk mengedit data kelas yang sudah ada, admin harus mengklik tombol

edit pada tabel data kelas dan melakukan perubahan pada form edit kelas

seperti gambar diatas. Jika Sudah klik “Edit” maka data kelas akan

terupdate. Jika batal klik “Kembali” maka sistem akan kembali ke data tabel

kelas.

56

27. Rancangan Halaman Menu Admin Sukses Edit Kelas

Gambar III.28. Rancangan Halaman Menu Admin Sukses Edit Kelas

Ini merupakan tampilan saat admin berhasil mengedit kelas.

28. Rancangan Halaman Menu Admin Gagal Edit Kelas

Gambar III.29. Rancangan Halaman Menu Admin Gagal Edit Kelas

Saat admin membuka halaman edit kelas tapi tidak ada perubahan data yang



ke tabel data kelas.

57

29. Rancangan Halaman Menu Admin Hapus Kelas

Gambar III.30. Rancangan Halaman Menu Admin Hapus Kelas

Untuk menghapus data kelas, admin harus mengklik icon hapus pada tabel

data kelas. Maka sistem akan muncul pesan seperti diatas, jika klik “Hapus”

maka data akan terhapus, jika tidak jadi menghapus klik tombol “Batal”

maka sistem akan kembali ke tabel data kelas.

30. Rancangan Halaman Menu Admin Jadwal

Gambar III.31. Rancangan Halaman Menu Admin Jadwal

Untuk menampilkan kelola jadwal, admin mengklik “Jadwal” lalu akan

muncul tampilan menu jadwal yang berisi keterangan nama kelas, mata

58

pelajaran, guru, hari, jam masuk, jam keluar, option edit hapus. Untuk

menambahkan data jadwal baru, admin klik tombol “Tambah Jadwal”.

Untuk mencari data yang sudah terinput klik tombol search dengan

memasukkan kata yang ada di tabel jadwal.

31. Rancangan Halaman Menu Admin Tambah Jadwal

Gambar III.32. Rancangan Halaman Menu Admin Tambah Jadwal

Untuk menambahkan data jadwal baru, admin harus mengisi form seperti

gambar diatas dan harus terisi semua. Jika sudah klik “Simpan” maka data

jadwal baru akan bertambah. Jika tidak jadi menambahkan kelas klik

“Kembali” maka sistem akan kembali ke tabel data jadwal.

59

32. Rancangan Halaman Menu Admin Edit Jadwal

Gambar III.33. Rancangan Halaman Menu Admin Edit Jadwal

Untuk mengedit data jadwal yang sudah ada, admin harus mengklik tombol

edit pada tabel data jadwal dan melakukan perubahan pada form edit jadwal

seperti gambar diatas. Jika Sudah klik “Edit” maka data jadwal akan

terupdate. Jika batal klik “Kembali” maka sistem akan kembali ke data tabel

jadwal.

33. Rancangan Halaman Menu Admin Sukses Edit Jadwal

Gambar III.34. Rancangan Halaman Menu Admin Sukses Edit Jadwal

Ini merupakan tampilan saat admin berhasil mengedit kelas.

60

34. Rancangan Halaman Menu Admin Gagal Edit Jadwal

Gambar III.35. Rancangan Halaman Menu Admin Gagal Edit Jadwal

Saat admin membuka halaman edit jadwal tapi tidak ada perubahan data

yang dilakukan lalu klik “Simpan” maka sistem akan menolak dan muncul

pesan gagal edit seperti di atas. Lalu klik tombol “Kembali” sistem akan

kembali ke tabel data jadwal.

35. Rancangan Halaman Menu Admin Hapus Jadwal

Gambar III.36. Rancangan Halaman Menu Admin Hapus Jadwal

Untuk menghapus data jadwal, admin harus mengklik icon hapus pada tabel

data jadwal. Maka sistem akan muncul pesan seperti diatas, jika klik

“Hapus” maka data akan terhapus, jika tidak jadi menghapus klik tombol

“Batal” maka sistem akan kembali ke tabel data jadwal.

61

36. Rancangan Halaman Menu Guru

Gambar III.37. Rancangan Halaman Menu Guru

Untuk masuk ke menu guru, pengguna harus login terlebih dahulu sebagai

guru lalu klik login maka sistem akan menampilkan menu guru yang

didalamnya terdapat menu profil atau data diri, jadwal mengajar, kelola

ruang siswa dan nilai, logout.

37. Rancangan Halaman Menu Guru Profil

Gambar III.38. Rancangan Halaman Menu Guru Profil

62

Untuk melihat profil, guru harus klik tombol “Profil” pada menu guru lalu

akan muncul tampilan seperti gambar diatas yang berisi foto dan data diri

guru tersebut.

38. Rancangan Halaman Menu Guru Jadwal Mengajar

Gambar III.39. Rancangan Halaman Menu Guru Jadwal Mengajar

Untuk melihat jadwal mengajar guru, klik tombol “Jadwal Mengajar” lalu

akan muncul tampilan seperti gambar diatas yang berisi nama kelas, mata

pelajaran, hari, jam masuk, jam keluar. Kolom search untuk mencari data

sesuai dengan kata yang ada didalam tabel jadwal mengajar.

63

39. Rancangan Halaman Menu Guru Pilih Kelas

Gambar III.40. Rancangan Halaman Menu Guru Pilih Kelas

Untuk guru jika ingin melihat data siswa atau menginput nilai siswa klik

menu “Ruang Siswa dan Nilai” lalu akan muncul “Pilih Kelas” lalu pilih

kelas yang dikehendaki, lalu klik “Search”.

40. Rancangan Halaman Menu Guru Listing Siswa

Gambar III.41. Rancangan Halaman Menu Guru Listing Siswa

64

Ini merupakan tampilan listing data siswa setelah guru memilih kelas, dan

ditabel berisi menu nama siswa, NIS, kelas, jenis kelamin, tempat tanggal

lahir, alamat, foto siswa, option kelola. Juga terdapat tombol search untuk

mencari data siswa dengan memasukan kata yang ada di tabel data siswa.

41. Rancangan Halaman Menu Guru Kelola Nilai

Gambar III.42. Rancangan Halaman Menu Guru Kelola Nilai

Untuk kelola nilai siswa, setelah guru pilih kelas lalu klik tombol “Kelola”

pada nama siswa yang akan diinput atau kelola nilainya. Maka akan mucul

tampilan seperti gambar diatas.

65

42. Rancangan Halaman Menu Guru Tambah Nilai Siswa

Gambar III.43. Rancangan Halaman Menu Guru Tambah Nilai Siswa

Untuk menambahkan data nilai siswa klik tombol “Tambah Nilai” pada

ruang siswa maka muncul form tambah nilai seperti gambar diatas. Lalu

pilih mata pelajaran, semester, tahun ajaran, dan isikan nilai-nilai lalu klik

“Simpan” maka data nilai akan bertambah pada tabel nilai siswa. Jika tidak

jadi klik “Batal” maka sistem akan kembali ke menu ruang siswa.

43. Rancangan Halaman Menu Guru Sukses Tambah Nilai

Gambar III.44. Rancangan Halaman Menu Guru Sukses Tambah Nilai

Ini merupakan tampilan sukses tambah nilai ketika guru tambah nilai.

66

44. Rancangan Halaman Menu Guru Edit Nilai

Gambar III.45. Rancangan Halaman Menu Guru Edit Nilai

Untuk mengedit nilai siswa yang sudah ada, guru mengklik icon edit maka

akan muncul tampilan gambar seperti diatas. Lalu lakukan perubahan yang

di kehendaki setelah itu klik “Simpan” maka data nilai akan terupdate. Jika

tidak jadi untuk mengedit klik “Batal”.

45. Rancangan Halaman Menu Guru Sukses Edit Nilai

Gambar III.46. Rancangan Halaman Menu Guru Sukses Edit Nilai

Ini merupakan tampilan sukses edit nilai ketika guru berhasil mengedit nilai.

67

46. Rancangan Halaman Menu Guru Gagal Edit Nilai

Gambar III.47. Rancangan Halaman Menu Guru Gagal Edit Nilai

Saat guru membuka halaman edit nilai tapi tidak ada perubahan data yang



ke data nilai siswa.

47. Rancangan Halaman Menu Guru Buat Raport

Gambar III.48. Rancangan Halaman Menu Guru Buat Raport

68

Ini adalah tampilan halaman buat raport yang merupakan hasil dari data

nilai siswa yang dipilih berdasarkan semester dan tahun ajar.

48. Rancangan Halaman Menu Guru Cetak Raport

Gambar III.49. Rancangan Halaman Menu Guru Cetak Raport

Ini adalah tampilan output cetak raport yang bisa di download dan save

oleh guru yang berisi data siswa dan nilai.

49. Rancangan Halaman Menu Siswa

Gambar III.50. Rancangan Halaman Menu Siswa

69

Untuk masuk ke menu siswa, pengguna harus login terlebih dahulu sebagai

siswa lalu klik login. Lalu sistem akan menampilkan menu siswa yang

didalamnya memiliki menu profil dan nilai, jadwal, dan logout.

50. Rancangan Halaman Menu Siswa Nilai

Gambar III.51. Rancangan Halaman Menu Siswa Nilai

Untuk menampilkan data diri siswa dan nilai siswa, siswa dapat mengklik

tombol “Profil dan Nilai Saya” maka sistem akan memunculkan data diri

dan nilai siswa tersebut. Dan terdapat tombol “Cetak Nilai” untuk

mendownload hasil nilai siswa tersebut.

70

51. Rancangan Halaman Menu Siswa Cetak Nilai

Gambar III.52. Rancangan Halaman Menu Siswa Cetak Nilai

Ini adalah tampilan output yang bisa siswa download untuk mencetak nilai

yang siswa miliki yang berisi data diri siswa dan nilai hasil belajar siswa di

sekolah.

52. Rancangan Halaman Menu Siswa Jadwal

Gambar III.53. Rancangan Halaman Menu Siswa Jadwal

71

3.3.2. Rancangan Basis Data

A. Entity Relationship Diagram (ERD)

Gambar III.54. Entity Relationship Diagram (ERD)

72

B. Logical Record Structure (LRS)

Gambar III.55. Logical Record Structure (LRS)

73

C. Spesifikasi File

Di dalam pembuatannya, website ini di tunjang oleh file-file atau tabel yang

terbentuk dari transformasi ERD (file-file penunjang untuk web). File-file ini

tersimpan pada sebuah database dengan nama “binamandiri.sql” dengan

parameter-parameter sebagai berikut:

1. Tabel Admin

Nama File : Admin

Akronim : admin

Fungsi : Untuk menyimpan data admin

Tipe File : File Master

Organisasi File : Indexed Sequential

Akses File : Random

Media : Harddisk

Panjang Record : 78 Karakter

Kunci Field : id_user

Software : Mysql

No Elemen Data Nama Field Tipe Size Keterangan

1 Id User id_user Integer 11 Primary Key

2 Nama User nama_user Varchar 30

3 Password Password Varchar 8

74

Tabel III.1. Spesifikasi File Admin

2. Tabel Guru

Nama File : Guru

Akronim : guru

Fungsi : Untuk menyimpan data guru



Akses File : Random

Media : Harddisk


Kunci Field : id_guru

Software : Mysql


1 Id Guru id_guru Integer 11 Primary Key

2 Nama Guru nama_guru Varchar 30

3 No Induk no_induk Integer 15

4 Password password Varchar 8

5 Type User type_user Varchar 5

6 Photo img_url Varchar 225

7 Jenis Guru jenis_guru Varchar 30

8 Tempat Lahir tempat_lahir Varchar 30

9 Tanggal Lahir tanggal_lahir Date 8

10 Alamat Alamat Varchar 100

11 Agama Agama Varchar 8

12 Jenis Kelamin jenis_kelamin Varchar 1

13 Gelar Gelar Varchar 20

4 Tipe User type_user varchar 5



7 Status User status_user Varchar 1

75

14 Bidang Study bidang_study Integer 11

15 Status Guru status_guru Varchar 1

Tabel III.2. Spesifikasi File Guru

3. Tabel Siswa

Nama File : Siswa

Akronim : siswa

Fungsi : Untuk menyimpan data siswa



Akses File : Random

Media : Harddisk


Kunci Field : id_siswa

Software : Mysql


1 Id Siswa id_siswa Integer 11 Primary Key

2 Nama Siswa nama_siswa Varchar 30


4 Password password Varchar 8

5 Type User type_user Varchar 5

6 Photo img_url Varchar 225

7 Nama Kelas nama_kelas Varchar 10

8 Tempat Lahir tempat_lahir Varchar 30


10 Alamat alamat Varchar 100

11 Agama agama Varchar 8

12 Jenis Kelamin jenis_kelamin Varchar 1

13 Kelas Siswa kelas_siswa Integer 11

76

14 Status Siswa status_siswa Varchar 1

Tabel III.3. Spesifikasi File Siswa

4. Tabel Jadwal

Nama File : Jadwal

Akronim : jadwal

Fungsi : Untuk menyimpan data jadwal



Akses File : Random

Media : Harddisk


Kunci Field : id_jadwal

Software : Mysql

Tabel III.4. Spesifikasi File Jadwal

5. Tabel Kelas

Nama File : Kelas


1 Id Jadwal id_jadwal Integer 11 Primary Key

2 Id Kelas id_kelas Integer 11

3 Id Mata Pelajaran

id_matapelajaran Integer 11

4 Hari Jadwal hari_jadwal Varchar 6

5 Jam Mulai jam_mulai Varchar 11

6 Jam Selesai jam_selesai Varchar 11

7 Id Guru id_guru Integer 11

8 Status Jadwal status_jadwal Varchar 1

77

Akronim : kelas

Fungsi : Untuk menyimpan data kelas



Akses File : Random

Media : Harddisk


Kunci Field : kode_kelas

Software : Mysql

Tabel III.5. Spesifikasi File Kelas

6. Tabel Mata Pelajaran

Nama File : Mata Pelajaran

Akronim : mata_pelajaran

Fungsi : Untuk menyimpan data mata pelajaran


1 Kode Kelas kode_kelas Integer 11 Primary Key


3 Kode_nama_kelas kode_nama_kelas Varchar 20

4 Status Kelas status_kelas Varchar 1

78



Akses File : Random

Media : Harddisk


Kunci Field : id_pelajaran

Software : Mysql

Tabel III.6. Spesifikasi File Mata Pelajaran

7. Tabel Nilai

Nama File : Nilai

Akronim : nilai

Fungsi : Untuk menyimpan data nilai



Akses File : Random

Media : Harddisk


Kunci Field : id_nilai

Software : Mysql


1 Id Pelajaran id_pelajaran Integer 11 Primary Key

2 Kode Mata Pelajaran kode_mata_pelajaran Varchar 20

3 Nama Mata Pelajaran nama_mata_pelajaran Varchar 30

4 Nilai KKM nilai_kkm Integer 11

5 Status Mata Pelajaran status_mata_pelajaran Varchar 1

79


1 Id Nilai id_nilai Integer 11 Primary Key

2 Id Siswa id_siswa Integer 11

3 Id Pelajaran id_pelajaran Integer 11

4 PR 1 pr_1 Integer 11



7 Ulangan 1 ulangan_1 Integer 11



10 Tugas 1 tugas_1 Integer 11



13 UTS UTS Integer 11

14 UAS UAS Integer 11

15 Rata PR rata_pr Varchar 5

16 Rata Ulangan rata_ulangan Varchar 5

17 Rata Tugas rata_tugas Varchar 5

18 Rata Harian rata_harian Varchar 5

19 Nilai Proses nilai_proses Varchar 5

20 Nilai Raport nilai_raport Varchar 5

21 Status Nilai status_nilai Varchar 1

22 Semester Semester Integer 11

23 Tahun Ajaran tahun_ajaran Integer 11

Tabel III.7. Spesifikasi File Nilai

8. Tabel Jurusan

Nama File : Jurusan

Akronim : siswa

Fungsi : Untuk menyimpan data jurusan



Akses File : Random

80

Media : Harddisk


Kunci Field : id_jurusan

Software : Mysql

Tabel III.8. Spesifikasi File Siswa

3.3.3. Rancangan Struktur Navigasi

Rancangan struktur navigasi digunakan untuk menggambarkan secara garis

besar isi dari seluruh website dan bagaimana menggambarkan hubungan antara

isi-isi website. Struktur navigasi website ini adalah struktur navigasi campuran

(composite). Melalui struktur navigasi ini terlihat bagaimana isi dan susunan dari

website secara menyeluruh.

Pembuatan struktur navigasi ini akan sangat membantu nantinya ketika akan

membuat rancangan seluruh halaman website. Struktur navigasi yang baik adalah

yang mampu memberitahukan kepada pengguna tentang lokasi mereka sekarang

dan lokasi yang bisa dikunjungi dari lokasi sekarang berada.

1. Struktur Navigasi Pengunjung dan Pengguna


1 Kode Kelas kode_kelas Integer 11 Primary Key


3 Kode_nama_kelas kode_nama_kelas Varchar 20

4 Id_Siswa Id_nama Kelas Varchar 20

81

Gambar III.56. Struktur Navigasi Pengunjung dan Pengguna

2. Struktur Navigasi Admin

Gambar III.57. Struktur Navigasi Admin

3. Struktur Navigasi Guru

82

Gambar III.58. Struktur Navigasi Guru

4. Struktur Navigasi Siswa

Gambar III.59. Struktur Navigasi Siswa

3.4. Implementasi dan Pengujian Unit

83

3.4.1. Implementasi

A. Implementasi Rancangan Antar Muka

Implementasi rancangan antar muka pada sistem informasi akademik nilai

siswa berdasarkan hasil rancangan antar muka.

1. Halaman Utama

Gambar III.60. Halaman Utama

84

2. Halaman Login

Gambar III.61. Halaman Login

3. Halaman Gagal Login

Gambar III.62. Halaman Gagal Login

4. Halaman Menu Admin

85

Gambar III.63. Halaman Menu Admin

5. Halaman Menu Admin Ruang Guru

86

Gambar III.64. Halaman Menu Admin Ruang Guru

6. Halaman Menu Admin Tambah Guru

87

Gambar III.65. Halaman Menu Admin Tambah Guru

7. Halaman Menu Admin Edit Guru

Gambar III.66. Halaman Menu Admin Edit Guru

8. Halaman Menu Admin Sukses Edit Guru

88

Gambar III.67. Halaman Menu Admin Sukses Edit Guru

9. Halaman Menu Admin Gagal Edit Guru

Gambar III.68. Halaman Menu Admin Gagal Edit Guru

10. Halaman Menu Admin Hapus Guru

Gambar III.69. Halaman Menu Admin Hapus Guru

89

11. Halaman Menu Admin Profil Guru

Gambar III.70. Halaman Menu Admin Profil Guru

90

12. Halaman Menu Admin Ruang Siswa dan Nilai

Gambar III.71. Halaman Menu Admin Ruang Siswa dan Nilai

91

13. Halaman Menu Admin Tambah Siswa

Gamabar III.72. Halaman Menu Admin Tambah Siswa

14. Halaman Menu Admin Edit Siswa

Gambar III.73. Halaman Menu Admin Edit Siswa

92

15. Halaman Menu Admin Sukses Edit Siswa

Gambar III.74. Halaman Menu Admin Sukses Edit Siswa

16. Halaman Menu Admin Gagal Edit Siswa

Gambar III.75. Halaman Menu Admin Gagal Edit Siswa

17. Halaman Menu Admin Hapus Siswa

Gambar III.76. Halaman Menu Admin Hapus Siswa

93

18. Halaman Menu Admin Profil dan Nilai Siswa

Gambar III.77. Halaman Menu Admin Profil dan Nilai Siswa

19. Halaman Menu Admin Mata Pelajaran

Gambar III.78. Halaman Menu Admin Mata Pelajaran

94

20. Halaman Menu Admin Tambah Mata Pelajaran

Gambar III.79. Halaman Menu Admin Tambah Mata Pelajaran

21. Halaman Menu Admin Edit Mata Pelajaran

Gambar III.80. Halaman Menu Admin Edit Mata Pelajaran

95

22. Halaman Menu Admin Sukses Edit Mata Pelajran

Gambar III.81. Halaman Menu Admin Sukses Edit Mata Pelajaran

23. Halaman Menu Admin Hapus Mata Pelajaran

Gambar III.82. Halaman Menu Admin Hapus Mata Pelajaran

24. Halaman Menu Admin Kelas

Gambar III.83. Halaman Menu Admin Kel

96

25. Halaman Menu Admin Tambah Kelas

Gambar III.84. Halaman Menu Admin Tambah Kelas

26. Halaman Menu Admin Edit Kelas

Gambar III.85. Halaman Menu Admin Edit Kelas

97

27. Halaman Menu Admin Sukses Edit Kelas

Gambar III.86. Halaman Menu Admin Sukses Edit Kelas

28. Halaman Menu Admin Gagal Edit Kelas

Gambar III.87. Halaman Menu Admin Gagal Edit Kelas

29. Halaman Menu Admin Hapus Kelas

Gambar III.88. Halaman Menu Admin Hapus Kelas

98

30. Halaman Menu Admin Jadwal

Gambar III.89. Halaman Menu Admin Jadwal

99

31. Halaman Menu Admin Tambah Jadwal

Gambar III.90. Halaman Menu Admin Tambah Jadwal

32. Halaman Menu Admin Edit Jadwal

Gambar III.91. Halaman Menu Admin Edit Jadwal

100

33. Halaman Menu Admin Sukses Edit Jadwal

Gambar III.92. Halaman Menu Admin Sukses Edit Jadwal

34. Halaman Menu Admin Gagal Edit Jadwal

Gambar III.93. Halaman Menu Admin Gagal Edit Jadwal

35. Halaman Menu Admin Hapus Jadwal

Gambar III.94. Halaman Menu Admin Hapus Jadwal

101

36. Halaman Menu Guru

Gambar III.95. Halaman Menu Guru

37. Halaman Menu Guru Profil

Gambar III.96. Halaman Menu Guru Profil

102

38. Halaman Menu Guru Jadwal Mengajar

Gambar III.97. Halaman Menu Guru Jadwal Mengajar

39. Halaman Menu Guru Pilih Kelas

Gambar III.98. Halaman Menu Guru Pilih Kelas

103

40. Halaman Menu Guru Listing Siswa

Gambar III.99. Halaman Menu Guru Listing Siswa

104

41. Halaman Menu Guru Kelola Nilai

Gambar III.100. Halaman Menu Guru Kelola Nilai

42. Halaman Menu Guru Tambah Nilai

Gambar III.101. Halaman Menu Guru Tambah Nilai

Gambar III.102. Halaman Menu Guru Sukses Tambah Nilai

105

43. Halaman Menu Guru Edit Nilai

Gambar III.103. Halaman Menu Guru Edit Nilai

44. Halaman Menu Guru Sukses Edit Nilai

Gambar III.104. Halaman Menu Guru Sukses Edit Nilai

45. Halaman Menu Guru Gagal Edit Nilai

Gambar III.105. Halaman Menu Guru Gagal Edit Nilai

106

46. Halaman Menu Guru Buat Raport

Gambar III.106. Halaman Menu Guru Buat Raport

47. Halaman Menu Guru Cetak Raport

Gambar III.107. Halaman Menu Guru Cetak Raport

107

48. Halaman Menu Siswa

Gambar III.108. Halaman Menu Siswa

49. Halaman Menu Siswa Profil dan Nilai

Gambar III.109. Halaman Menu Siswa Profil dan Nilai

108

50. Halaman Menu Siswa Cetak Nilai

Gambar III.110. Halaman Menu Siswa Cetak Nilai

51. Halaman Menu Siswa Jadwal

Gambar III.111. Halaman Menu Siswa Jadwal

109

B. Spesifikasi Sistem Komputer

Berikut ini adalah spesifikasi perangkat keras danperangkat lunak minimum

yang dibutuhkan untuk mengimplementasikan sistem informasi akademik nilai

siswa berbasis web pada SMK BINA MANDIRI 2.

1. Spesifikasi Perangkat Keras

a. Server

1) CPU

(a) Processor Intel® Pentium® Core 2 Duo

(b) RAM DDR2 4 GB

(c) Hard Disk 500 GB

2) Mouse

3) Keyboard

4) Monitor dengan resolusi layar minimum 1024x768

5) Koneksi internet dengan kecepatan 2 Mbps.

b. Client

1) CPU

(a) Processor Intel® Pentium® 4

(b) RAM DDR2 1GB

(c) Hard Disk 20 GB

2) Mouse

3) Keyboard

4) Monitor dengan resolusi layar minimum 1024x768

5) Koneksi internet dengan kecepatan 56 kbps.

110

2. Spesifikasi Perangkat Lunak

1. Server

a. Sistem operasi yang umum digunakan seperti: Microsoft Windows atau

Linux (Ubuntu, Fedora, dan lain-lain).

b. Aplikasi bundle web server seperti: Xampp, WampServer, php2triad yang

terdiri dari beberapa komponen, diantaranya:

(1) Aplikasi Apache Server v2

(2) Aplikasi PHP Server v5

(3) Aplikasi MySQL Server v5

(4) Aplikasi phpMyAdmin v3

c. Aplikasi Web Browser seperti Mozilla Firefox, Opera, Safari, Internet

Explorer, Google Chrome.

3.4.2. Pengujian Unit

Pengujian terhadap program yang dibuat menggunakan black box testing

yang fokus terhadap proses masukan dan keluaran program.

1. Pengujian Terhadap Form Login Admin

No Skenario Pengujian

Test Case Hasil Pengujian

Hasil Yang Di harapkan

Kesimpulan

1 Username dan Password tidak diisi lalu pilih hak akses admin, lalu klik login

Username (kosong) Password (kosong)

Sistem akan menolak Akses user Akan menampilkan “Please Out This Field”

Sesuai

harapan

Valid

2 Mengetikan username tapi Password tidak Diisi, lalu klik hak akses

Username: 10000000 0000001 Password: (kosong)

Sistem akan menolak Akses user Akan menampilkan “Please Out

Sesuai

harapan

Valid

111

admin Kemudian klik login

This Field”

3 Tidak mengetikan username,tapi password diisi dan pilih hak akses admin, lalu klik login

Username: (kosong) Password: (21041992)


Sesuai

harapan

Valid

4 Mengetikan Salah satu kondisi salah Pada username atau password lalu pilih hak akses admin, lalu klik login

Username: 101 (salah) Password: 21041992 (bener)

Sistem akan menolak dan Menampilkan “Error login!( No Induk Atau Password Atau Hak Akses Yang Anda Ketikan salah !!!)

Sesuai

harapan

Valid

5 Mengetikan Salah satu kondisi salah Pada username atau password lalu pilih hak akses admin, lalu klik login

Username: 100000000 000001 (benar) Password: 21 (salah)


Sesuai

Harapan

Valid

6 Username dan password benar, tapi pilih hak akses sebagai guru

Username: 100000000 000001 (benar) Password: 21041992 (benar) Hak akses: guru (salah)


Sesuai

Harapan

Valid

7 Username dan password

Username: 100000000

Sistem akan menolak dan

Sesuai Valid

112

benar, tapi pilih hak akses sebagai siswa

000001 (benar) Password: 21041992 (benar) Hak akses: siswa (salah)

Menampilkan “Error login!( No Induk Atau Password Atau Hak Akses Yang Anda Ketikan salah !!!)

Harapan

8 Username, password, hak akses benar sebagai admin lalu klik login

Username: 100000000 000001 (benar) Password: 01081989 (benar) Hak akses: Admin (benar)

Sistem akan menerima dan diarahkan ke Dashboard Admin

Sesuai

harapan

Valid

Tabel III.8.

Pengujian Black Box Testing Halaman Login Admin

2. Pengujian Terhadap Form Login Guru




Kesimpulan

1 Username dan Password tidak diisi lalu pilih hak akses guru, lalu klik login



Sesuai

harapan

Valid

2 Mengetikan username tapi Password tidak Diisi, lalu klik hak akses guru Kemudian klik login

Username: 10000000 0000010 Password: (kosong)


Sesuai

harapan

Valid

3 Tidak mengetikan username,tapi

Username: (kosong) Password:

Sistem akan menolak Akses user

Sesuai Valid

113

password diisi dan pilih hak akses guru, lalu klik login

(01081989) Akan menampilkan “Please Out This Field”

harapan

4 Mengetikan Salah satu kondisi salah Pada username atau password lalu pilih hak akses guru, lalu klik login



Sesuai

harapan

Valid

5 Mengetikan Salah satu kondisi salah Pada username atau password lalu pilih hak akses guru, lalu klik login

Username: 100000000 000010 (benar) Password: 00000123 (salah)


Sesuai

Harapan

Valid

6 Username dan password benar, tapi pilih hak akses sebagai siswa

Username: 100000000 000010 (benar) Password: 01081989 (benar) Hak akses: siswa (salah)


Sesuai

Harapan

Valid

7 Username dan password benar, tapi pilih hak akses sebagai admin

Username: 100000000 000010 (benar) Password: 01081989 (benar) Hak akses:

Sistem akan menolak dan Menampilkan “Error login!( No Induk Atau Password Atau Hak

Sesuai

Harapan

Valid

114

admin (salah)

Akses Yang Anda Ketikan salah !!!)

8 Username, password, hak akses benar lalu klik login

Username: 100000000 000010 (benar) Password: 01081989 (benar) Hak akses: Guru (benar)

Sistem akan menerima dan diarahkan ke Dashboard guru

Sesuai

harapan

Valid

Tabel III.9.

Hasil Pengujian Black Box Testing Halaman Login Guru

3. Pengujian Terhadap Form Login Siswa




Kesimpulan

1 Username dan Password tidak diisi lalu pilih hak akses siswa, lalu klik login



Sesuai

harapan

Valid

2 Mengetikan username tapi Password tidak Diisi, lalu klik hak akses siswa Kemudian klik login

Username: 3001 Password: (kosong)


Sesuai

Harapan

Valid

3 Tidak mengetikan username,tapi password diisi dan pilih hak akses siswa, lalu klik login

Username: (kosong) Password: (01072017)


Sesuai

harapan

Valid

115

4 Mengetikan Salah satu kondisi salah Pada username atau password lalu pilih hak akses siswa, lalu klik login



Sesuai

harapan

Valid

5 Mengetikan Salah satu kondisi salah Pada username atau password lalu pilih hak akses siswa, lalu klik login

Username: 3001 (benar) Password: 00000001 (salah)


Sesuai

Harapan

Valid

6 Username dan password benar, tapi pilih hak akses sebagai admin

Username: 3001 (benar) Password: 01072017 (benar) Hak akses: admin (salah)


Sesuai

Harapan

Valid

7 Username dan password benar, tapi pilih hak akses sebagai guru

Username: 3001 (benar) Password: 01072017 (benar) Hak akses: guru (salah)


Sesuai

Harapan

Valid

116

8 Username, password, hak akses benar lalu klik login

Username: 3001 (benar) Password: 01072017 (benar) Hak akses: Siswa (benar)

Sistem akan menerima dan diarahkan ke Dashboard guru

Sesuai

harapan

Valid

Tabel III.10.

Hasil Pengujian Black Box Testing Halaman Login Siswa

4. Pengujian Terhadap Halaman Tambah Data Guru




Kesimpulan

1 Jika Kolom Tidak diisi semua lalu klik tombol Simpan

Kolom kosong (tidak diisi semua)

Sistem akan menolak dan akan menampilkan “Please Select a file”

Sesuai

Harapan

Valid

2 Jika ada salah satu kolom yang tidak terisi lalu klik tombol Simpan

Ada salah satu kolom tidak terisi


Sesuai

Harapan

Valid

3 Kolom terisi semua lalu klik tombol Simpan

Kolom terisi semua

Sistem akan menerima dan data akan tersimpan dan data guru bertambah

Sesuai

harapan

Valid

Tabel III.11.

Pengujian Black Box Testing Halaman Tambah Data Guru

117

5. Pengujian Terhadap Form Edit Data Guru




Kesimpulan

1 Jika isi kolom masih sama, tidak ada perubahan, lalu klik simpan

Isi kolom masih sama

Sistem akan menolak dan akan menampilkan “Gagal edit, tidak ada perubahan data guru. Silahkan periksa kembali”

Sesuai

Harapan

Valid

2 Melakukan perubahan data di beberapa kolom, lalu klik simpan

Terdapat perubahan data pada kolom

Sistem akan menerima dan data akan terupdate dengan data yang baru. Dan menampilkan “Data Guru Berhasil Di Edit”

Sesuai

harapan

Valid

Tabel III.12.

Pengujian Black Box Testing Halaman Edit Data Guru

6. Pengujian Terhadap Form Tambah Data Siswa




Kesimpulan




Sesuai

harapan

Valid

2 Jika ada salah satu kolom yang tidak terisi lalu klik


Sistem akan menolak dan akan menampilkan

Sesuai

harapan

Valid

118

tombol Simpan

“Please Select a file”


Kolom terisi semua

Sistem akan menerima dan data akan tersimpan dan data siswa bertambah

Sesuai

harapan

Valid

Tabel III.13.

Pengujian Black Box Testing Halaman Tambah Data Siswa

7. Pengujian Terhadap Form Edit Data Siswa




Kesimpulan



Sistem akan menolak dan akan menampilkan “Gagal edit, tidak ada perubahan data siswa. Silahkan periksa kembali”

Sesuai

Harapan

Valid



Sistem akan menerima dan data akan terupdate dengan data yang baru. Dan menampilkan “Data Siswa Berhasil Di Edit”

Sesuai

harapan

Valid

Tabel III.14.

Pengujian Black Box Testing Halaman Edit Data Siswa

119

8. Pengujian Terhadap Form Tambah Data Mata Pelajaran




Kesimpulan




Sesuai

Harapan

Valid




Sesuai

harapan

Valid


Kolom terisi semua

Sistem akan menerima dan data akan tersimpan dan data mata pelajaran bertambah

Sesuai

harapan

Valid

Tabel III.15.

Pengujian Black Box Testing Halaman Tambah Mata Pelajaran

120

9. Pengujian Terhadap Form Edit Data Mata Pelajaran




Kesimpulan



Sistem akan menerima dan data akan terupdate dengan data yang baru. Dan menampilkan “Data Mata Pelajaran Berhasil Di Edit”

Sesuai

harapan

Valid

Tabel III.16.

Pengujian Black Box Testing Halaman Edit Mata Pelajaran

10. Pengujian Terhadap Form Tambah Data Kelas




Kesimpulan



Kolom terisi semua

Sesuai

Harapan

Valid




Sesuai

Harapan

Valid


Kolom terisi semua

Sistem akan menerima dan data akan tersimpan dan data kelas bertambah

Sesuai

harapan

Valid

121

Tabel III.17.

Hasil Pengujian Black Box Testing Halaman Tambah Data Kelas

11. Pengujian Terhadap Form Edit Data Kelas




Kesimpulan



Sistem akan menolak dan akan menampilkan “Gagal edit, tidak ada perubahan data kelas. Silahkan periksa kembali”

Sesuai

Harapan

Valid



Sistem akan menerima dan data akan terupdate dengan data yang baru. Dan menampilkan “Detail Kelas Berhasil Di Edit”

Sesuai

harapan

Valid

Tabel III.18.

Hasil Pengujian Black Box Testing Halaman Edit Data Kelas

12. Pengujian Terhadap Form Tambah Data Jadwal




Kesimpulan



Kolom terisi semua

Sesuai

Harapan

Valid

2 Jika ada salah satu kolom

Ada salah satu kolom

Sistem akan menolak dan

Sesuai Valid

122

yang tidak terisi lalu klik tombol Simpan

tidak terisi akan menampilkan “Please Select a file”

Harapan


Kolom terisi semua

Sistem akan menerima dan data akan tersimpan dan data Jadwal bertambah

Sesuai

harapan

Valid

Tabel III.19.

Hasil Pengujian Black Box Testing Halaman Tambah Data Jadwal

13. Pengujian Terhadap Form Edit Jadwal




Kesimpulan

1 Jika tidak ada data perubahan lalu klik tombol simpan

Data masih sama seperti semula

Sistem akan menolak dan menampilkan “Detail Jadwal Gagal di Edit,tidak ada data yang berubah, Silahkan periksa kembali”

Sesuai

harapan

Valid

2 Jika ada perubahan data baru lalu klik tombol simpan

Data diisi dengan data baru

Sistem akan menerima dan menampilkan “Detail Jadwal Berhasil di Edit”

Sesuai

harapan

Valid

Tabel III.20.

Hasil Pengujian Black Box Testing Halaman Edit Jadwal

123

14. Pengujian Terhadap Menu Hapus




Kesimpulan

1 Jika data yang Dipilih diklik tombol hapus

Klik tombol hapus

Sistem akan menampilkan “Yakin hapus data? Data yang sudah terhapus tidak akan bisa kembali!” Data akan terhapus

Sesuai

Harapan

Valid

2 Jika data tidak jadi dihapus dan klik tombol batal

Klik tombol batal

Sistem akan menampilkan “Yakin hapus data? Data yang sudah terhapus tidak akan bisa kembali!” Data batal terhapus dan kembali ke data semula

Sesuai

harapan

Valid

Tabel III.21.

Pengujian Black Box Testing Menu Hapus

15. Pengujian Terhadap Menu Search




Kesimpulan

1 Jika kolom cari tidak di isi Lalu tekan enter

Kolom cari Kosong

Sistem akan menampilkan semua data yang ada

Sesuai

harapan

Valid

2 Jika kolom cari diisi dengan kata yang tidak ada

Kolom cari diisi data yang tidak ada ditabel

Sistem tidak menemukan hasil pencarian

Sesuai

harapan

Valid

124

di dalam table 3 Pencarian data

Dilakukan dengan mengetikan kata yang ada dicari sesuai data yang ada di tabel tersebut

Kolom cari Diisi dengan kata yang ada di tabel Tersebut

Sistem akan menyaring data berdasarkan Kata yang di Ketikan di Kolom cari

Sesuai

harapan

Valid

Tabel III.22.

Pengujian Black Box Testing Menu Search

16. Pengujian Terhadap Form Halaman Tambah Nilai




Kesimpulan

1 Jika kolom masih kosong semua lalu klik simpan

Kolom kosong semua

Sistem akan menolak dan menampilkan “Please Select a file”

Sesuai

harapan

Valid

2 Jika kolom salah satu kolom di isi lalu klik simpan

Salah satu kolom sudah terisi

Sistem akan menerima dan data nilai siswa akan terupdate dan tersimpan

Sesuai

harapan

Valid

Tabel III.23.

Pengujian Black Box Testing Menu Tambah Nilai

125

BAB IV

PENUTUP

4.1. Kesimpulan

Dari pembahasan pada bab-bab sebelumnya, dapat diambil kesimpulan bahwa

dengan adanya website akademik nilai siswa pada SMK BINA MANDIRI 2 ini dapat

mempermudah memperoleh informasi tentang nilai akademik siswa.

Sistem informasi ini merupakan aplikasi sistem komputerisasi yang dibuat

berbasis web dan memuat database pengolahan data nilai secara terpusat sehingga

dapat mengolah database tersebut menjadi informasi yang dibutuhkan oleh guru,

siswa, dan administrator.

Sistem informasi akademik nilai siswa pada SMK BINA MANDIRI 2

SUKABUMI juga memiliki kelebihan yaitu dapat diakses dimana saja kapan saja

dengan jaringan internet, peningkatan efisiensi dan efektifitas dalam proses

pengolahan nilai siswa.

4.2. Saran

Berdasarkan kesimpulan diatas, maka penulis bermaksud memberikan saran

sebagai alternative pemikiran dan harapan agar aspek ilmu pengetahuan tidak bersifat

monoton dan terpaku pada disiplin ilmu pengetahuan itu sendiri.

Adapun saran-saran yang dapat penulis sampaikan sebagai berikut:

126

1. Aplikasi yang telah dibuat hendaknya dioperasikan secara baik dan benar untuk

mencapai tujuan yang diharapkan.

2. Untuk mengolah nilai siswa dan jadwal mengajar sesuai data yang sebenarnya

dan selalu terupdate untuk menghindari kesalahan pengolahan nilai siswa yang

terdapat di website dengan yang tertera di informasi sekolah.

3. Untuk selanjutnya saat pengolahan nilai, guru hanya akan bisa menginput nilai

siswa yang terintegrasi dengan kelas yang diajar saja.

Demikian kesimpulan dan saran yang diberikan penulis mengenai Perancangan

Sistem Informasi Akademik Nilai Siswa Berbasis Web Pada SMK BINA MANDIRI

2 dalam tugas akhir ini. Penulis merasa penjelasan dan penyusunan masih jauh dari

sempurna, saran dan kritik yang dapat membangun dalam penyempurnaan penulisan

tugas akhir ini.

127

DAFTAR PUSTAKA

ANDI Offset. 2017. Kiat Sukses & Cara Memulai Bisnis Web Hosting. Semarang: WAHANA KOMPUTER.

ANDI Offset. 2012. Membangun Web Interaktif dengan Adobe Dreamweaver CS5.5, PHP, dan MySQL. Semarang: WAHANA KOMPUTER.

Andriansyah, Doni. 2016. Sistem Informasi Pendaftaran Event Dengan PHP Untuk Panduan Skripsi. Cirebon: CV. ASFA Solution..

Hidayatullah, Priyanto dan Jauhari Khairul Kawistara. 2017. Pemrograman WEB Edisi Revisi. Bandung: INFORMATIKA.

Jubilee Enterprise. 2016. Pemrograman Bootstrap untuk Pemula. Jakarta: PT. Elex Media Komputindo.

Jubilee Enterprise. 2014. MySQL untuk Pemula. Jakarta: PT. Elex Media Komputindo.

Jubilee Enterprise. 2016. Pemrograman Bootstrap untuk Pemula. Jakarta: PT. Elex Media Komputindo.

MADCOMS Madiun. 2016. Pemrograman PHP dan MySQL untuk Pemula. Yogyakarta: ANDI.

Pratama, I Putu Agus Eka. 2014. Sistem Informasi dan Implementasinya. Bandung: Penerbit Bandung.

Pratama, I Putu Agus Eka. 2015. Handbook Jaringan Komputer. Bandung: INFORMATIKA.

Pressman, R.S. 2015. Rekayasa Perangkat Lunak: Pendekatan Praktisi Buku 1. Yogyakarta: ANDI.

Rachmanto, Ricky. 2017. 9 Langkah Praktis Membuat Website Gratis. Jakarta: PT. Elex Media Komputindo.

Sianipar, R.H. 2015. Pemrograman JavaScript Teori dan Implementasi. Bandung: Penerbit Bandung.

128

Sidik, Betha dan Husni Iskandar Pohan. 2014. Pemrograman WEB dengan HTML. Bandung: INFORMATIKA.

Winarno, Edy dan Ali Zaki. 2013. Buku Sakti Pemrograman PHP. Jakarta: PT. Elex Media Komputindo.

tugas akhir - bina sarana informatika€¦ · pemrograman php serta memanfaatkan database mysql...

Documents