LAPORAN

PRAKTIKUM PEMROGRAMAN WEB

PERANCANGAN WEBSITE SEKOLAH TINGGI ILMU

QURAN BATAM

Diajukan Sebagai Syarat Memenuhi Kelulusan Matakuliah Praktikum

Pemrograman Web

Disusun Oleh :

BAKHRUL HUDA SOLIHIN

NPM.1710128262272

FAKULTAS TEKNIK
PROGRAM STUDI TEKNIK INFORMATIKA
UNIVERSITAS IBNU SINA BATAM
2020

i
 HALAMAN PENGESAHAN
PRAKTIKUM PEMROGRAMAN WEB
JUDUL:
PERANCANGAN WEBSITE SEKOLAH TINGGI ILMU QURAN BATAM
Diajukan Sebagai Syarat Kelulusan Pada Mata Kuliah Praktikum Pemrograman
Web Pada Program Studi Teknik Informatika Fakultas Teknik.

Disusun Oleh:
Nama : Bakhrul Huda Solihin
Npm : 1710128262272

Telah di periksa dan disetujui oleh Dosen Pengampu dan Ka.Lab Teknik
Informatika pada tanggal ……….Januari 2020

Ka. Laboratorium Dosen Pengampu

Teknik Informatika Matakuliah

Hanafi, M.Kom Muhammad Ropianto, M.Kom

NIDK. 8873810016 NIDN.1028067804

ii
 MOTTO
“Bergerak lah ketika itu di butuhkan, tidak perlu membuang tenaga, fikiran,
dan waktu untuk hal yang percuma”

iii
 KATA PENGANTAR

Assalamu‘alaikum Warahmatullahi Wabarakatuh.

Puji syukur penulis ucapkan kehadirat Allah SWT atas segala berkat dan
rahmat yang dilimpahkan sehingga penulis dapat menyelesaikan Laporan
Praktikum Pemrograman web yang berjudul “Perancangan website Sekolah Tinggi
Ilmu Quran Batam”.
Selama penyusunan Laporan ini, penulis telah banyak memperoleh bantuan
dan bimbingan dari berbagai pihak. Pada kesempatan ini penulis ingin
menyampaikan rasa hormat dan terima kasih kepada :
1. Bapak H. Andi Ibrahim. BA Selaku Ketua Yayasan Pendidikan Ibnusina.
2. Bapak Dr. Mustaqim Syuaeb, SE, MM Selaku Rektor Universitas Ibnu
Sina.
3. Bapak Ir. Larisang, MT,IPM. Selaku Dekan Fakultas Teknik Universitas
Ibnu Sina.
4. Bapak Okta Veza, M.Kom, Selaku Ketua Program Studi Teknik
Informatika Fakultas Teknik.
5. Bapak Hanafi, M.Kom, Selaku Kepala Laboratorium Fakultas Teknik .
6. Bapak Muhammad Ropianto, M.Kom, Selaku Dosen Pengampu Mata
Kuliah Praktikum Pemrograman web Fakultas Teknik Universitas Ibnu
Sina.
Penulis menyadari bahwa masih banyak kekurangan dalam penulisan
Laporan Praktikum ini. Oleh karena itu , penulis sangat mengharapkan kritik dan
saran yang membangun dari semua pihak untuk penyempurnaan penulisan Laporan
Praktikum ini.
Wassalamu‘alaikum Warahmatullahi Wabarakatuh.
Batam, Januari 2020
Penulis,

Bakhrul Huda Solihin

NIM: 1710128262272

iv
 DAFTAR ISI
Contents
COVER .................................................................................................................... i
HALAMAN PENGESAHAN ................................................................................. ii
MOTTO ................................................................................................................. iii
KATA PENGANTAR ........................................................................................... iv
DAFTAR ISI ........................................................................................................... v
DAFTAR GAMBAR ............................................................................................ vii
DAFTAR TABEL ................................................................................................ viii
BAB I PENDAHULUAN ..................................................................................... I-1
Latarbelakang .................................................................................................... I-1
Rumusan Masalah ............................................................................................. I-2
Tujuan Praktikum .............................................................................................. I-2
Manfaat Praktikum ............................................................................................ I-2
Sistematika Penulisan Laporan ......................................................................... I-3
BAB II LANDASAN TEORI ............................................................................. II-1
Pemrograman ................................................................................................... II-1
Sistem .............................................................................................................. II-1
Informasi ......................................................................................................... II-2
Sistem Informasi .............................................................................................. II-2
Web ................................................................................................................. II-3
PHP .................................................................................................................. II-4
PHPMyAdmin ................................................................................................. II-4
Flowchart ......................................................................................................... II-4
ERD ................................................................................................................. II-6
DFD ................................................................................................................. II-7
XAMPP ........................................................................................................... II-9
BAB III PERANCANGAN SISTEM ................................................................ III-2
Flowchart ........................................................................................................ III-5
ERD ................................................................................................................ III-5
DFD ................................................................................................................ III-6
Relasi ............................................................ III-Error! Bookmark not defined.

v
 Rancangan File ............................................................................................... III-6
Rancangan Sistem ........................................................................................ III-13
BAB IV HASIL DAN PEMBAHASAN ........................................................... IV-1
Implementasi .................................................................................................. IV-1
Banner Input ................................................................................................... IV-1
Banner Output ................................................................................................ IV-8
BAB V PENUTUP .............................................................................................. V-1
Kesimpulan ...................................................................................................... V-1
Saran ................................................................................................................ V-1
DAFTAR PUSTAKA ............................................................................................. 1

vi
 DAFTAR GAMBAR
Gambar 3.1 Flowchart Website STIQ Kepri .................................................... III-1
Gambar 3.2 ERD Website STIQ Kepri .............................................................. III-2
Gambar 3.3 DFD Website STIQ Kepri .............................................................. III-2
Gambar 3.4 Relasi Tabel Website STIQ Kepri .................................................. III-3
Gambar 3.5 Rancangan Login.......................................................................... III-10
Gambar 3.6 Rancangan Input........................................................................... III-10
Gambar 3.7 Rancangan Output ........................................................................ III-11
Gambar 4.1 Halaman Log-in.............................................................................. IV-1
Gambar 4.2 Dashboard Admin .......................................................................... IV-2
Gambar 4.3 Halaman Daftar Berita ................................................................... IV-2
Gambar 4.4 Input Berita ..................................................................................... IV-3
Gambar 4.5 Halaman Kategori Berita ................................................................ IV-3
Gambar 4.6 Halaman Data pengguna ................................................................ IV-4
Gambar 4.7 Halaman Agenda ............................................................................ IV-4
Gambar 4.8 Halaman Pengumuman .................................................................. IV-5
Gambar 4.9 Halaman Download ........................................................................ IV-5
Gambar 4.10 Halaman Album ........................................................................... IV-6
Gambar 4.11 Halaman Photos ........................................................................... IV-6
Gambar 4.12 Halaman Data Guru ...................................................................... IV-7
Gambar 4.13 Halaman Data Siswa .................................................................... IV-7
Gambar 4.14 Halaman Home atau Tampilan Awal ........................................... IV-8
Gambar 4.15 Halaman Profil ............................................................................. IV-8
Gambar 4.16 Halaman Guru .............................................................................. IV-9
Gambar 4.17 Halaman Siswa ............................................................................. IV-9
Gambar 4.18 Berita/ Blog ................................................................................ IV-10
Gambar 4.19 Pengumuman .............................................................................. IV-11
Gambar 4.20 Acara/Agenda ............................................................................. IV-11
Gambar 4.21 Halaman Download .................................................................... IV-12
Gambar 4.22 Halaman Gallery ........................................................................ IV-12
Gambar 4.23 Halaman Kontak ......................................................................... IV-13

vii
 DAFTAR TABEL

Tabel 2.1 Simbol-Simbol Flowchart Diagram ......................................................... II-5

Tabel 2.2 Simbol-Simbol Entity Relationship Diagram ........................................ II-7
Tabel 2.3Simbol-Simbol Data Flow Diagram ......................................................... II-8
Tabel 3.1 Tabel Agenda ............................................................................................ III-3
Tabel 3.2 Tabel Album ............................................................................................. III-4
Tabel 3.3 Tabel Files ................................................................................................ III-4
Tabel 3.4 Tabel Galeri .............................................................................................. III-5
Tabel 3.5 Tabel Guru ................................................................................................ III-5
Tabel 3.6 Tabel Inbox ............................................................................................... III-6
Tabel 3.7 Tabel Kategori .......................................................................................... III-6
Tabel 3.8 Tabel Kelas ............................................................................................... III-6
Tabel 3.9 Tabel Pengguna ........................................................................................ III-7
Tabel 3.10 Tabel Pengumuman ............................................................................... III-8
Tabel 3.11 Tabel Pengunjung .................................................................................. III-8
Tabel 3.12 Tabel Siswa ............................................................................................ III-8
Tabel 3.13 Tabel Tulisan .......................................................................................... III-9

viii
 I-1

BAB I
PENDAHULUAN

Latarbelakang
1.1. Latar Belakang
Perkembangan teknologi informasi membawa kita memasuki sebuah dunia
baru, dunia dimana komunikasi memegang peranan penting dalam kehidupan.
Berbagai macam fasilitas disediakan guna memenuhi semua kebutuhan akan
komunikasi. Penggunaan fasilitas Internet beserta aplikasi aplikasinya, sudah tidak
asing lagi di masyarakat. Karena kemampuannya dalam menyajikan informasi
secara cepat dan akurat tidak diragukan lagi. Salah satu aplikasi internet yang
sekarang marak digunakan adalah Website . Website ini selain berfungsi sebagai
penyedia informasi juga sebagai pengelola data. Sehingga website selain
tampilannya menarik juga menyajikan informasi yang interaktif dan komunikatif.
Tidak ketinggalan juga yaitu sistem akademik sebuah sekolah dimana sistem
informasi akademik merupakan hal yang sangat vital di sebuah sekolah, yaitu
berupa info-info data siswa, data guru, serta daftar nilai siswa yang telah menempuh
ujian.
Sistem informasi tersebut bisa diimplementasikan kedalam bentuk Web,
sehingga siswa Maupun guru mudah untuk mengaksesnya dengan ponsel sekalipun
dengan syarat ada koneksi internetnya. Web tersebut bisa dibuat menggunakan Php
dengan aplikasi Xampp untuk koneksi dan database serta mendesainnya dengan
mudah melalui Dreamweaver yang merupakan program open source dan sangat
umum digunakan karena memudahkan pembuatan dengan tool tool yang lengkap.
Sistem Informasi Akademik Sekolah Tinggi Ilmu Quran Batam yang ada saat ini
sudah memenuhi standar pendidikan, hanya saja masih terdapat beberapa
kelemahan dan kekurangan yaitu cara penginputan yang masih manual. Sehingga
perlu dilakukan pengembangan lebih lanjut untuk dapat mengatasi kelemahan dan
kekurangan tersebut. Sekolah Tinggi Ilmu Quran Batam adalah salah satu nya
memiliki sistem informasi yang masih kurang, dengan adanya sistem informasi ini
diharapkan siswa juga mudah mendapatkan materi tambahan dari sistem tersebut.
 I-2

Dari latar belakang diatas penulis memiliki pemikiran membuat sistem

akademik menggunakan web yang bisa berguna dan bermanfaat bagi guru maupun
murid dengan menggunakan aplikasi Xampp serta dreamweaver dan mudah untuk
menjalankanya oleh admin.
Dengan pertimbangan dan pemikiran tersebut, maka penulis sangat tertarik
membuat proyek tugas akhir dengan mengangkat judul “Perancangan website
Sekolah Tinggi Ilmu Quran Batam”

Rumusan Masalah
1.2. Rumusan Masalah
Dari Sistem akademik Sekolah Tinggi Ilmu Quran Batam tersebut penulis
merumuskan masalah sebagai berikut :
1. Bagaimana merancang website Sekolah Tinggi Ilmu Quran Batam?
2. Bagaimana implementasi website di Sekolah Tinggi Ilmu Quran Batam?

Tujuan Praktikum
1.3. Tujuan Praktikum
1. Merancang website pada Sekolah Tinggi Ilmu Quran Batam.
2. Untuk menguji serta mendokumentasikan suatu prosedur website Sekolah
Tinggi Ilmu Quran Batam dalam penerapan rencana yang sudah dibuat.

1.4. Manfaat Praktikum

Hasil analisa terhadap laporan yang didapat ini diharapkan dapat
mempermudah bagi pihak-pihak yang memerlukan data dimasa yang akan
datang. Adapun manfaat dari penulisan laporan praktikum ini adalah sebagai
berikut :
1. Terciptanya rancangan website Sekolah Tinggi Ilmu Quran Batam.
2. Terciptanya website Sekolah Tinggi Ilmu Quran Batam.
 I-3

Sistematika Penulisan Laporan

1.5. Sistematika Penulisan Laporan
Secara garis depan penulisan laporan praktikum ini adalah sebagai berikut:

BAB I PENDAHULUAN
Dalam bab ini diuraikan mengenai latar belakang masalah, batasan dan
rumusan masalah, tujuan dan manfaat dan sistematika penulisan.
BAB II LANDASAN TEORI
Dalam bab ini diuraikan mengenai tentang landasan teori yaitu :
Pemrograman, Sistem, Informasi, Sistem Informasi, Web, PHP,
PHPMyAdmin, Flowchart, ERD, DFD, XAMPP.
BAB III PERANCANGAN SISTEM
Dalam bab ini menguraikan mengenai Deskripsi Pemrograman, Sistem,
Informasi, Sistem Informasi, Web, PHP, PHPMyAdmin, Flowchart, ERD,
DFD.
BAB IV HASIL DAN PEMBAHASAN
Dalam bab ini menguraikan tentang bagaimana hasil program dan alur
program.
BAB V PENUTUP
Bab ini berisikan tentang kesimpulan dan saran dari aplikasi dan laporan ini.
DAFTAR PUSTAKA
Tulisan yang tersusun di akhir sebuah karya ilmiah yang berisi nama
penulis, judul tulisan, penerbit, identitas penerbit dan tahun terbit sebagai
sumber atau rujukan seorang penulis.
 II-1

BAB II
LANDASAN TEORI

pemrograman
2.1 Pemrograman
Menurut saragih (2016), Pemrograman merupakan serangkaian instruksi
yang ditulis untuk melakukan suatu fungsi spesifik pada komputer. Komputer pada
dasarnya membutuhkan keberadaan program agar bisa menjalankan fungsinya
sebagai komputer, biasanya hal ini dilakukan dengan cara mengeksekusi
serangkaian instruksi program tersebut pada prosesor. Sebuah program biasanya
memiliki suatu bentuk model pengeksekusian tertentu agar dapat secara langsung
dieksekusi oleh komputer. Program yang sama dalam format kode yang dapat
dibaca oleh manusia disebut sebagai kode sumber, bentuk program yang
memungkinkan programmer menganalisis serta melakukan penelaahan algoritma
yang digunakan pada program tersebut.

Sistem
2.2 Sistem
Menurut Susanto (2017), Sistem adalah seperangkat unsur yang saling
terikat dalam suatu antar relasi diantara unsur-unsur tersebut dengan lingkungan.
Sedangkan menurut Anatol Raporot, sistem adalah suatu kumpulan kesatuan dan
perangkat hubungan satu sama lain dan Menurut L. Ackof, Sistem adalah setiap
kesatuan secara konseptual atau fisik yang terdiri dari bagian-bagian dalam keadaan
saling tergantung satu sama lainnya.
Menurut Romney (2014), pengertian sistem merupakan suatu rangkaian
dari dua atau lebih komponen-komponen yang saling berhubungan, yang
berinteraksi untuk mencapai suatu tujuan. Sedangkan menurut Hall (2013) sistem
adalah kelompok dari dua atau lebih komponen atau subsistem yang saling
berhubungan yang berfungsi dengan tujuan yang sama. Adapun pengertian sistem
dan menghasilkan informasi sebagaimana yang dikemukakan oleh The American
National Standards Committee dalam La Midjan dan Susanto (2013) adalah sistem
 II-2

dalam pengolahan data, suatu kumpulan dari manusia, mesin dan metode yang
terorganisir untuk memenuhi seperangkat fungsi.
Sistem terdiri dari tiga unsur yaitu: input (masukan), proses dan output
(pengeluaran). Input merupakan komponen penggerak atau pemberi tenaga di mana
sistem itu dioperasikan, sedangkan output adalah hasil operasi. Dalam pengertian
sederhana output berarti yang menjadi tujuan sasaran atau target pengoperasian
suatu sistem sedangkan proses merupakan aktivitas yang dapat mentransformasikan
input menjadi output.

Informasi
2.3 Informasi
Sebelum mendefinisikan informasi, penulis memaparkan definisi dari data.
Data adalah kenyataan yang menggambarkan suatu kejadian dan kesatuan nyata.
Kesatuan nyata adalah berupa suatu objek nyata seperti tempat, benda dan orang
yang betul-betul ada dan terjadi. Untuk pengambilan keputusan bagi manajemen,
maka faktor-faktor tersebut harus diolah lebih lanjut untuk menjadi suatu informasi
(Ladjamudin, 2005). Informasi adalah data yang telah diklasifikasi atau diolah
untuk digunakan dalam proses pengambilan keputusan (Sutabri, 2005 : 11).
Menurut Gordon. B. Davis, informasi adalah data yang telah menjadi bentuk yang
lebih berarti bagi penerimanya dan bermanfaat dalam pengambilan keputusan masa
kini maupun yang akan datang (Kadir,2003 : 31).
Dari pengertian tersebut diatas dapat disimpulkan bahwa informasi
merupakan hasil dari pengolahan data menjadi bentuk yang lebih berguna bagi yang
menerimanya dan menggambarkan suatu kejadian-kejadian nyata dan dapat
digunakan sebagai alat bantu untuk pengambilan suatu keputusan.

Sistem Informasi
2.4 Sistem Informasi
Menurut Wilkinson (Kadir, 2003: 11), sistem informasi adalah kerangka
kerja yang mengkoordinasikan sumber daya (manusia, komputer)untuk mengubah
 II-3

masukan (Input) menjadi keluaran (informasi), guna mencapai sasaran-sasaran

perusahaan.
Menurut Bodnar dan Hopwood (kadir,2003:11), sistem informasi adalah
kumpulan perangkat keras dan perangkat lunak yang dirancang untuk
mentransformasikan data kedalam bentuk informasi yang berguna.
Menurut Gelinas, Oram dan Wiggins (Kadir,2003:11), sistem informasi
adalah suatu sistem buatan manusia yang secara umum terdiri atas sekumpulan
komponen berbasis komputer dan manual yang dibuat untuk menghimpun,
menyimpan dan mengelola data serta menyediakan informasi keluaran kepada para
pemakai.
Dari beberapa pengertian diatas dapat diambil kesimpulan, sistem informasi
merupakan komponen yang terdiri dari manusia, teknologi informasi, dan prosedur
kerja yang memproses, menyimpan, menganalisis dan mendistribusikan informasi
untuk mencapai suatu tujuan.

Web
2.5 Web
Menurut Destiningrum (2017), Website adalah Web dapat diartikan sebagai
kumpulan halaman yang menampilkan informasi data teks, data gambar, data
animasi, suara, video dan gabungan dari semuanya, baik yang bersifat statis
maupun dinamis yang membentuk satu rangkaian bangunan yang saling terkait,
dimana masing-masing dihubungkan dengan jaringan-jaringan halaman
(hyperlink).
Menurut Basuki (2007) web merupakan Sekumpulan halaman yang terdiri
dari beberapa halaman yang berisi informasi dalam bentuk data digital baik berupa
text, gambar, video, audio, dan animasi lainnya yang disediakan melalui jalur
koneksi internet.
 II-4

PHP
2.6 PHP (Hypertext Processor)
Menurut Suhartanto (2017), PHP singkatan dari PHP Hypertext Processor
yang digunakan sebagai bahasa script server-side dalam pengembangan Web yang
disisipkan pada dokumen HTML. Penggunaan PHP memungkinkan Web dapat
dibuat dinamis sehingga maintenance situs Web tersebut menjadi lebih mudah dan
efisien. PHP merupakan software Open-Source yang disebarkan dan dilisensikan
secara gratis serta dapat didownload secara bebas dari situs resminya. PHP ditulis
dengan menggunakan bahasa C.

PHPMyAdmin
2.7 PHPMyAdmin
Menurut Soca (2018), PhpMyAdmin adalah sebuah aplikasi open source
yang berfungsi untuk memudahkan manajemen MySQL. Dengan menggunakan
PhpMyAdmin, Anda dapat membuat database, membuat tabel, meng-insert,
menghapus dan meng-update data dengan GUI dan terasa lebih mudah, tanpa perlu
mengetikkan perintah SQL secara manual. Sedangkan pengertian phpMyAdmin
Menurut Kadir (2009), PhpMyAdmin adalah utilitas yang tersedia pada WAMP5,
yang dapat digunakan untuk berinteraksi dengan database MySQL.
Jadi, dari pengertian PhpMyAdmin di atas dapat disimpulkan bahwa
PhpMyAdmin merupakan aplikasi open source yang dapat digunakan untuk
berinteraksi dengan database MySQL tanpa perlu mengetikkan perintah SQL.

Flowchart
2.8 Flowchart
Menurut Silvana (2015), Flowchart merupakan penggambaran secara fisik
dari langkah-langkah dan urutan prosedur dari suatu program. Flowchart dapat
membantu analisis untuk memecahkan masalah dalam bentuk segmen-segmen
yang lebih kecil dan memudahkan dalam mendapatkan alternatif lain yang dalam
proses pengoperasian. Flowchart biasanya digunakan pada penyelesaian suatu
masalah terutama masalah yang perlu pembahasan mendalam dan butuh untuk
dievaluasi lebih lanjut.
 II-5

Tabel 2.1 Simbol-Simbol Flowchart Diagram

SIMBOL KETERANGAN

Terminal. menunjukkan permulaan (start) atau akhir

(stop) dari suatu proses.

Arus. simbol yang digunakan untuk menghubungkan

antara simbol yang satu dengan simbol yang lain
(connecting line). Simbol ini juga berfungsi untuk
menunjukkan garis alir dari proses.

Proses. menunjukkan kegiatan yang dilakukan oleh

komputer. Pada bidang industri (proses produksi
barang), simbol ini menggambarkan kegiatan inspeksi
atau yang biasa dikenal dengan simbol inspeksi

Keputusan. simbol yang digunakan untuk memilih

proses atau keputusan berdasarkan kondisi yang ada.
Simbol ini biasanya ditemui pada flowchart program.

Keluar-Masuk. proses input-output yang terjadi tanpa

tergantung dari jenis peralatannya.
 II-6

Proses Terdefinisi. simbol yang digunakan untuk

menunjukkan pelaksanaan suatu bagian prosedur (sub-
proses). Dengan kata lain, prosedur yang terinformasi di
sini belum detail dan akan dirinci di tempat lain

Connector (On-page). menyederhanakan hubungan

antar simbol yang letaknya berjauhan atau rumit bila
dihubungkan dengan garis dalam satu halaman

Connector (Off-page). Sama seperti on-page connector,

hanya saya simbol ini digunakan untuk menghubungkan
simbol dalam halaman berbeda. label dari
simbol ini dapat menggunakan huruf atau angka

Persiapan. simbol yang digunakan untuk

mempersiapkan penyimpanan di dalam storage.

Manual Input. menunjukkan input data secara manual

menggunakan online keyboard.

ERD
2.9 ERD (Entity Relationship Diagram)
Menurut Sukamto & Shalahudin (2014: 50), pemodelan awal basis data
yang paling banyak digunakan adalah menggunakan Entity Relationship Diagram
(ERD). ERD dikembangkan berdasarkan teori himpunan dalam bidang matematika.
ERD digunakan untuk pemodelan basis data relasional. Sehingga jika penyimpanan
basis data menggunakan OODBMS maka perancangan basis data tidak perlu
menggunakan ERD. ERD memiliki beberapa aliran notasi seperti notasi Chen
 II-7

(dikembangkan oleh Peter Chen), Barker (dikembangkan oleh Richard Barker, Ian
Palmer, Harry Ellis), notasi Crow’s Foot, dan beberapa notasi lain. Namun yang
banyak digunakan adalah notasi dari Chen.
Tabel 2.2 Simbol-Simbol Entity Relationship Diagram

SIMBOL KETERANGAN

Entitas. Notasi untuk mewakili suatu objek dengan

karakteristik sama, sehingga pada lingkungan nyata setiap
objek akan berbeda dengan objek lainnya.

Attribute. Simbol terminal ini untuk menunjukkan nama-

nama atribut yang ada pada entity.

Attribute Key. Simbol atribut yang digaris bawahi, berfungsi

sebagai key (kunci) di antara nama-nama atribut yang ada
pada suatu entity.

Relasi. Notasi yang digunakan untuk menghubungkan

beberapa entitas berdasarkan fakta pada suatu lingkungan.

Garis Penghubung. Notasi untuk merangkaikan keterkaitan

antara notasi notasi yang digunakan dalam diagram ER,
yaitu entitas, relasi dan atribut.

DFD
2.10 DFD (Data Flow Diagram)
Data Flow Diagram adalah suatu network yang menggambarkan suatu
sistem automat atau komputerisasi, manualisasi, atau gabungan dari keduanya,
 II-8

yang penggambaranya disusun dalam bentuk kumpulan komponen sistem yang

saling berhubungan sesuai aturan mainya. (Abdurahman, 2017).
Tabel 2.2 Simbol-Simbol Data Flow Diagram

SIMBOL Keterangan

Proses Transformasi. Proses yang mengubah data dari

input menjadi output

Sumber & tujuan data. Karyawan & organisasi yang

mengirim data ke dan menerima data dari sistem.

Arus Data. Arus data yang masuk ke dalam dan keluar

dari sebuah proses.

Penyimpanan Data. Penyimpanan Data

Dokumen. sebuah dokumen atau laporan;dokumen

dapat dibuat dengan tangan atau dicetak oleh komputer.

Dokumen rangkap. Digambarkan dengan menunjuk

simbol dokumen dan pencetakan nomor dokumen di
bagian depan dokumen pada bagian kiri atas.
 II-9

Input/Output. Digunakan untuk menggambarkan

berbagai media input dan output dalam sebuah bagan alir
program. Menggambarkan jurnal dan buku besar dalam
bagan alir dokumen.

Pemasukan data on-line. Entri data oleh alat on-line

seperti terminal CRT atau komputer pribadi.

Arsip. Arsip dokumen disimpan dan diambil secara

manual. Huruf didalamnya menunjukkan cara
pengurutan arsip;N=Urut nomor,A=Urut abjad;T=urut
tanggal.

XAMPP
2.11 XAMPP
Menurut Josi (2017), Xampp adalah sebuah aplikasi yang dapat menjadikan
komputer kita menjadi sebuah server. Kegunaan Xampp ini untuk membuat
jaringan local sendiri dalam artian kita dapat membuat website secara offline untuk
masa coba-coba di komputer sendiri. Jadi fungsi dari Xampp server itu sendiri
merupakan server website kita untuk cara memakainya. Disebut server karena
dalam hal ini komputer yang akan kita pakai harus memberikan pelayanan untuk
mengkoneksikan web, untuk itu komputer kita harus menjadi server.
Dapat disimpulkan xampp adalah aplikasi tools untuk menyediakan paket
lunak yang berisi konfigurasi Web Server, Apache, PHP, MySQL untuk membantu
kita dalam proses pembuatan aplikasi web yang menyatu menjadi satu sehingga
memudahkan kita dalam membuat program web.
 III-2

BAB III
PERANCANGAN SISTEM

Pengembangan Sistem
3.1 Pengembangan Sistem
Untuk pengembangan sistem penelitian ini menggunakan model SDLC
(Software Development Life Cycle). System Development Life Cycle (SDLC) adalah
proses pembuatan dan pengubahan sistem serta model dan metodologi yang
digunakan untuk mengembangkan sebuah sistem. SDLC juga merupakan pola yang
diambil untuk mengembangkan sistem perangkat lunak, yang terdiri dari tahap-
tahap: rencana (planning), analisis (analysis), desain (design), implementasi
(implementation), uji coba (testing) dan pengelolaan (maintenance).
Model SDLC yang dipakai dalam Analisa praktikum ini adalah model
Waterfall. Waterfall Model atau Classic Life Cicle merupakan model yang paling
banya dipakai dalam Software Enginnering (SE). Menurut Nugraha (2018) disebut
waterfall karena tahap demi tahap yang harus dilalui menunggu selesainya tahap
sebelumnya dan berjalan berurutan.

Gambar 3.1 Metode Waterfall menurut Nugraha (2018)

3.1.1 System atau Information Engineering and Modeling

Permodelan ini diawali dengan mencari kebutuhan dari keseluruhan
sistem yang akan diaplikasikan ke dalam bentuk software. Hal ini sangat
penting, mengingat software harus dapat berinteraksi dengan elemen-
elemen yang lain seperti hardware, database, dsb. Tahap ini sering disebut
dengan Project Definition.
 III-3

3.1.2 Software Requirements Analysis

Proses pencarian kebutuhan diintensifkan dan difokuskan pada
software. Untuk mengetahui sifat dari program yang akan dibuat, maka para
software engineer harus mengerti tentang domain informasi dari software,
misalnya fungsi yang dibutuhkan, user interface, dsb. Dari 2 aktivitas
tersebut (pencarian kebutuhan sistem dan software) harus
didokumentasikan dan ditunjukkan kepada pelanggan.

3.1.3 System Design

Proses ini digunakan untuk mengubah kebutuhan-kebutuhan diatas
menjadi representasi ke dalam bentuk “blueprint” software sebelum coding
dimulai. Desain harus dapat mengimplementasikan kebutuhan yang telah
disebutkan pada tahap sebelumnya. Seperti 2 aktivitas sebelumnya, maka
proses ini juga harus didokumentasikan sebagai konfigurasi dari software.
Penjelasan lebih lengkap dari aktifitas ini terdapat pada bab 3.6.

3.1.4 Implementation
Untuk dapat dimengerti oleh mesin, dalam hal ini adalah komputer,
maka desain tadi harus diubah bentuknya menjadi bentuk yang dapat
dimengerti oleh mesin, yaitu ke dalam bahasa pemrograman melalui proses
coding. Tahap ini merupakan implementasi dari tahap design yang secara
teknis nantinya dikerjakan oleh programmer.

3.1.5 Testing atau Verification

Sesuatu yang dibuat haruslah diujicobakan. Demikian juga dengan
software. Semua fungsi-fungsi software harus diujicobakan, agar software
bebas dari error, dan hasilnya harus benar-benar sesuai dengan kebutuhan
yang sudah didefinisikan sebelumnya.
Setelah proses pembangunan aplikasi selesai, Analisa praktikum ini
melakukan pengujian pada tahap ini. Aplikasi diuji berdasarkan metode
 III-4

black box untuk mengetahui tingkat keberhasilan dari bagian sistem.

Penjelasan lebih lengkap dari aktifitas ini terdapat pada bab 4.4.

3.1.6 Maintenance
Pemeliharaan suatu software diperlukan, termasuk di dalamnya
adalah pengembangan, karena software yang dibuat tidak selamanya hanya
seperti itu. Ketika dijalankan mungkin saja masih ada errors kecil yang tidak
ditemukan sebelumnya, atau ada penambahan fitur-fitur yang belum ada
pada software tersebut. Pengembangan diperlukan ketika adanya perubahan
dari eksternal perusahaan seperti ketika ada pergantian sistem operasi, atau
perangkat lainnya.
Analisa praktikum ini belum sampai pada tahap maintenance,
sehingga tahap ini belum terlaksana. Rencana Analisa praktikum akan
melakukan beberapa perbaikan tidak pada semua tahapan, namun hanya
pada tahapan sebelum terjadi error. Sehingga Analisa praktikum tidak akan
dipusingkan dengan melakukan tahapan dari awal hingga akhir kembali.

3.1.7 Alat Dan Bahan

Alat yang digunakan berupa perangkat keras dan perangkat lunak.
1. Perangkat Keras
a. Motherboard : Asus
b. Processor : Intel Core i7-6200
c. Harddisk : 1 TB
d. RAM : 8 GB (7.96 GB Usable)
e. Keyboard : Standart
f. Mouse : Standart
g. Printer : Standart
2. Perangkat Lunak
a. Operating System : Windows 10 Home Single Language 64-bit
b. Web Browser : Mozilla Firefox
 III-5

3.2 Flowchart
Flowchart merupakan suatu bagan dengan simbol-simbol tertentu yang
menggambarkan urutan proses secara mendetail dan hubungan antara suatu proses
(instruksi) dengan proses lainnya dalam suatu program.

N
Y

Gambar 3.1 Flowchart Website STIQ Kepri

ERD
3.2 ERD (Entity Relationship Diagram)
Entity Relationship Diagram (ERD) merupakan suatu model untuk
menjelaskan hubungan antar data dalam basis data berdasarkan objek-objek dasar
data yang mempunyai hubungan antar relasi. ERD untuk memodelkan struktur data
 III-6

dan hubungan antar data, untuk menggambarkannya digunakan beberapa notasi dan
simbol.
nama Data_agenda Data_berita
username
Data_download
email Halaman
password ADMIN menginput Data_guru
Dashboard Admin
jenkel Data_siswa
level Data_pengumuman
Data_galeri

Gambar 3.2 ERD Website STIQ Kepri

DFD
3.3 CD (Context Diagram)
Context Diagram (CD) adalah alat bantu perancangan secara global yang
memperlihatkan sistem secara umum dan bagian – bagian dari subsitem – subsistem
yang terlihat dalam sistem secara keseluruhan, keterkaitan dan interaksi antara
subsistem-subsistem.

ADMIN PENGGUNA

Mengelola data SISTEM INFORMASI Melihat website

Melihat informasi website BERBASIS WEBSITE

Gambar 3.4 Context Diagram Website STIQ Kepri

Rancang an F ile

3.4 Rancangan Database

Merupakan perancangan tabel dalam database yang telah ditentukan yang
digunakan untuk menyimpan data yang di inputkan. Design Database dalam
Aplikasi Website STIQ Kepri adalah sebagai berikut:

1. Tabel Agenda
Nama Database : db_websekolah
Nama Tabel : tbl_agenda
Field Kunci : agenda_id
 III-7

Tabel 3.1 Tabel Agenda

No Nama Field Type Width Keterangan
1 agenda_id Int 11 Primary Key
2 agenda_nama Varchar 200 Nama Agenda
3 agenda_tanggal Timestamp - Tanggal Agenda
4 agenda_deskripsi Text - Deskripsi Agenda
5 agenda_mulai Date - Mulai Agenda
6 agenda_selesai Date - Selesai Agenda
7 agenda_tempat Varchar 90 Tempat Agenda
8 agenda_waktu Varchar 30 Waktu Agenda
9 agenda_keterangan Varchar 200 Keterangan Agenda
10 agenda_author Varchar 60 Penulis Agenda

2. Tabel Album
Nama Database : db_websekolah
Nama Tabel : tbl_album
Field Kunci : album_id
Tabel 3.2 Tabel Album
No Nama Field Type Width Keterangan
1 album_id Int 11 Primary Key
2 album_nama Varchar 50 Nama Album
3 album_tanggal Timestamp Tanggal Album
4 album_pengguna_id Int 11 Pengguna Album
5 album_author Varchar 60 Penulis Album
6 album_count Int 11 Jumlah Album
7 album_cover Varchar 40 Cover Album
3. Tabel Files
Nama Database : db_websekolah
Nama Tabel : tbl_files
Field Kunci : file_id
 III-8

Tabel 3.3 Tabel Files

No Nama Field Type Width Keterangan
1 file_id Int 11 Primary Key
2 file_judul Varchar 120 Judul file
3 file_deskripsi Text - Deskripsi file
4 file_tanggal Timestamp - Tanggal file
5 file_oleh Varchar 60 Upload file
6 file_download Int 11 Download file
7 file_data Varchar 120 Data file

4. Tabel Galeri
Nama Database : db_websekolah
Nama Tabel : tbl_galeri
Field Kunci : galeri_id
Tabel 3.4 Tabel Galeri
No Nama Field Type Width Keterangan
1 galeri_id Int 11 Primary Key
2 galeri_judul Varchar 60 Judul galeri
3 galeri_tanggal Timestamp - Tanggal galeri
4 galeri_gambar Varchar 40 Gambar galeri
5 galeri_album_id Int 11 Album galeri
6 galeri_pengguna_id Int 11 Pengguna galeri
7 galeri_author Varchar 60 Penulis galeri
 III-9

5. Tabel Guru
Nama Database : db_websekolah
Nama Tabel : tbl_guru
Field Kunci : guru_id
Tabel 3.5 Tabel Guru
No Nama Field Type Width Keterangan
1 guru_id Int 11 Primary Key
2 guru_nip Varchar 30 Nip guru
3 guru_nama Varchar 70 Nama guru
4 guru_jenkel Varchar 2 Jenis kelamin guru
5 guru_tmp_lahir Varchar 80 Tempat Lahir guru
6 guru_tgl_lahir Varchar 80 Tanggal Lahir guru
7 guru_mapel Varchar 120 Mata Pelajaran guru
8 guru_photo Varchar 40 Poto guru
9 guru_tgl_input Timestamp Tanggal input data guru

6. Tabel Inbox
Nama Database : db_websekolah
Nama Tabel : tbl_inbox
Field Kunci : inbox_id
Tabel 3.6 Tabel Inbox
No Nama Field Type Width Keterangan
1 inbox_id Int 11 Primary Key
2 inbox_nama Varchar 40 Nama pesan
3 inbox_email Varchar 60 Email pesan
4 inbox_kontak Varchar 20 Kontak pesan
5 inbox_pesan Text - Pesan masuk
6 inbox_tanggal Timestamp - Tanggal pesan
7 inbox_status Int 11 Status pesan
 III-10

7. Tabel Kategori
Nama Database : db_websekolah
Nama Tabel : tbl_inbox
Field Kunci : kategori_id
Tabel 3.7 Tabel Kategori
No Nama Field Type Width Keterangan
1 kategori_id Int 11 Primary Key
2 kategori_nama Varchar 30 Nama Kategori
3 kategori_tanggal Timestamp - Tanggal Kategori

8. Tabel Kelas
Nama Database : db_websekolah
Nama Tabel : tbl_kelas
Field Kunci : kelas_id
Tabel 3.8 Tabel Kelas
No Nama Field Type Width Keterangan
1 kelas_id Int 11 Primary Key
2 kelas_nama Varchar 40 Nama Kelas

9. Tabel Pengguna
Nama Database : db_websekolah
Nama Tabel : tbl_pengguna
Field Kunci : pengguna_id
Tabel 3.9 Tabel Pengguna
No Nama Field Type Width Keterangan
1 pengguna_id Int 11 Primary Key
2 pengguna_nama Varchar 50 Nama pengguna
3 pengguna_moto Varchar 100 Moto pengguna
4 pengguna_jenkel Varchar 2 Jenis kelamin pengguna
5 pengguna_username Varchar 30 Username pengguna
 III-11

6 pengguna_password Varchar 35 Password pengguna

7 pengguna_tentang Text - Tentang pengguna
8 pengguna_email Varchar 50 Email pengguna
9 pengguna_nohp Varchar 20 No Hp pengguna
10 pengguna_facebook Varchar 35 facebook pengguna
11 pengguna_twitter Varchar 35 twitter pengguna
12 pengguna_linkdin Varchar 35 linkdin pengguna
13 pengguna_google_plus Varchar 35 Google plus pengguna
14 pengguna_status Int 2 status pengguna
15 pengguna_level Varchar 3 level pengguna
16 pengguna_register Timestamp - register pengguna
17 pengguna_photo Varchar 40 poto pengguna

10. Tabel Pengumuman

Nama Database : db_websekolah
Nama Tabel : Tabel Pengumuman
Field Kunci : pengumuman_id

Tabel 3.10 Tabel Pengumuman

No Nama Field Type Width Keterangan
1 pengumuman_id Int 11 Primary Key
2 pengumuman_judul Varchar 150 Judul Pengumuman
3 pengumuman_deskripsi Text - Deskripsi pengumuman
4 pengumuman_tanggal Timestamp - Tanggal pengumuman
5 pengumuman_author Varchar 60 Penulis pengumuman

11. Tabel Pengunjung

Nama Database : db_websekolah
Nama Tabel : Tabel Pengunjung
Field Kunci : pengunjung_id
 III-12

Tabel 3.11 Tabel Pengunjung

No Nama Field Type Width Keterangan
1 pengunjung_id Int 11 Primary Key
2 pengunjung_tanggal Timestamp - Tanggal Pengunjung
3 pengunjung_ip Varchar 40 IP pengunjung
4 pengunjung_perangkat Varchar 100 Perangkat pengunjung

12. Tabel Siswa

Nama Database : db_websekolah
Nama Tabel : Tabel Siswa
Field Kunci : siswa_id
Tabel 3.12 Tabel Siswa
No Nama Field Type Width Keterangan
1 siswa_id Int 11 Primary Key
2 siswa_nis Varchar 20 Nis siswa
3 siswa_nama Varchar 70 Nama siswa
4 siswa_jenkel Varchar 2 Jenis Kelamin siswa
5 siswa_kelas_id Int 11 Kelas siswa
6 siswa_photo Varhcar 40 Poto siswa

13. Tabel Tulisan

Nama Database : db_websekolah
Nama Tabel : Tabel Tulisan
Field Kunci : tulisan_id
Tabel 3.13 Tabel Tulisan
No Nama Field Type Width Keterangan
1 tulisan_id Int 11 Primary Key
2 tulisan_judul Varchar 100 Judul tulisan
3 tulisan_isi Text - isi tulisan
4 tulisan_tanggal Timestamp - Tanggal tulisan
 III-13

5 tulisan_kategori_id Int 11 kategori tulisan

6 tulisan_kategori_nama Varchar 30 Nama kategori tulisan
7 tulisan_views Int 11 Tampilan tulisan
8 tulisan_gambar Varchar 40 Gambar tulisan
9 tulisan_pengguna_id Int 11 Pengguna tulisan
10 tulisan_author Varchar 40 Penulis tulisan
11 tulisan_img_slider Int 2 Gambar slide tulisan
12 tulisan_slug Varchar 200 Slug tulisan

Rancangan Sistem
3.5 Rancangan Sistem
Rancangan sistem merupakan gambaran tampilan dari website yang kita
buat, didalamnya terdapat rancangan input dan ouput yang memudahkan
pengguna dalam mengakses website tersebut.

3.5.1 Rancangan Input

a. Rancangan Login
Rancangan login berisi menu entry untuk memasukkan username
dan password masuk ke dalam halaman dashboard admin yang digunakan
untuk menginput informasi ke dalam website.

Gambar 3.4 Rancangan Login

 III-14

b. Rancangan Dashboard Admin dan Input Data

Rancangan input berisi menu entry yang digunakan oleh admin
untuk menginput informasi yang akan ditampilkan pada website.

Gambar 3.5 Rancangan Input

3.5.3 Rancangan Output

Rancangan output merupakan tampilan dari informasi yang telah
diinput oleh admin dari menu input informasi website.

Gambar 3.6 Rancangan Output

 IV-1

BAB IV
HASIL DAN PEMBAHASAN

Implementasi
4.1 Implementasi
Untuk mengimplementasikan program yang sudah dibuat, harus
menggunakan aplikasi browser seperti Google Chrome, Mozilla Firefox, dll. Pada
laporan praktikum ini menggunakan Google Chrome untuk
mengimplementasikannya, dengan cara menjalankan Dreamweaver CC 2019. Dan
hasil dari media Pembelajaran akan dijelaskan lebih detail pada poin 4.2 dan
seterusnya.

Banner Input
4.2 Banner Input
Untuk mengolah informasi pengguna haruslah menjadi administrator terlebih
dahulu dan masuk kedalam system atau dashboard admin ketika sudah masuk maka
admin akan bebas melakukan perubahan informasi apapun terhadap website perlu
penulis jelaskan bahwa yang ada di dalam dashboard admin semua halamannya
meiliki sifat CRUD (Creat Read Update Delete). Berikut penjelasan di setiap
halaman yang dimiliki administrator :

1. Log-in
Halaman login ini digunakan sebagai gate atau gerbang untuk masuk ke
dalam system administrator.

Gambar 4.1 Halaman Log-in

 IV-2

2. Dashboard Home Admin

Halaman ini adalah halaman awal ketika administrator masuk setelah
melewati halaman Log-in, yang berisikan tentang informasi website.

Gambar 4.2 Dashboard Admin

3. Daftar Berita
Halaman ini digunakan untuk melihat, mengedit, dan menghapus berita
yang sudah pernah di publikasikan.

Gambar 4.3 Halaman Daftar Berita

 IV-3

4. Berita Terbaru
Pada halaman ini administrator akan bertugas sebagai yang memasukan
berita terbaru untuk menjaga agar website tetap hidup dan memberikan
informasi yang berguna.

Gambar 4.4 Input Berita

5. Kategori Berita
Halaman ini digunakan untuk mengolah data dan informasi tentang
kategori berita yang akan di tampilkan pada dashoard output.

Gambar 4.5 Halaman Kategori Berita

 IV-4

6. Data Pengguna
Halaman ini digunakan untuk mengolah data dan informasi pengguna
dan juga digunakan untuk mendaftarkan admin baru dan authornya.

Gambar 4.6 Halaman Data pengguna

7. Agenda
Halaman ini digunakan untuk mengolah data agenda yaitu informasi
atau kegiatan sekolah yang akan di laksanakan di masa mendatang.

Gambar 4.7 Agenda

 IV-5

8. Data Pengumuman
Halaman ini digunakan untuk mengolah data pengumuman yaitu
informasi yang terjadi di dalam sekolah dan bersifat harus di ketahui oleh
umum termasuk pegawai dan siswa sekolahan.

Gambar 4.8 Halaman Pengumuman

9. Download
Halaman ini digunakan untuk mengolah data dokumen yang sekiranya
perlu untuk di bagikan ke umum seperti modul ataupun e-book.

Gambar 4.9 Halaman Download

 IV-6

10. Album
Halaman ini digunakan untuk mengolah data dan informasi dari
beberapa atau lebih dari satu foto yang di bagikan ke public.

Gambar 4.10 Halaman Album

11. Photos
Halaman ini digunakan untuk mengolah data dan informasi pada setiap
foto yang ada.

Gambar 4.11 Halaman Photos

 IV-7

12. Data Guru

Halaman ini digunakan untuk mengolah data dan informasi guru pada
Sekolah Tinggi Ilmu Quran Kepulauan Riau.

Gambar 4.12 Halaman Data Guru

13. Data Siswa

Halaman ini digunakan untuk mengolah data dan informasi setiap siswa
yang masuk ke Sekolah Tinggi Ilmu Quran Kepulauan Riau.

Gambar 4.13 Halaman Data Siswa

 IV-8

Banner Output
4.3 Banner Output
1. Home
Gambar 4.1 di bawah merupakan halaman yang merupakan tampilan awal
dari perancangan sistem informasi yang dibuat. Dan ada sedikit penjelasan
mengenai Sistem Informasi, serta tombol-tombol untuk ke halaman lain.

Gambar 4.14 Home atau Tampilan Awal

 IV-9

2. Profile

Gambar 4.15 Profil

Pada gambar 4.15 di atas berisikan profile dari Sekolah Tinggi Ilmu Quran
Kepulauan Riau

3. Guru

Gambar 4.16 Guru

Pada gambar 4.16 diatas berisikan data guru dari Sekolah Tinggi Ilmu
Quran Kepulauan Riau
 IV-10

4. Siswa

Gambar 4.17 Siswa

Pada gambar 4.17 diatas berisikan data siswa dari Sekolah Tinggi Ilmu
Quran Kepulauan Riau

5. Berita

Gambar 4.18 Berita/ Blog

Pada gambar 4.18 diatas berisikan Berita dari Sekolah Tinggi Ilmu Quran
Kepulauan Riau
 IV-11

6. Pengumuman

Gambar 4.19 Pengumuman

Pada gambar 4.19 diatas berisikan pengumuman dari Sekolah Tinggi
Ilmu Quran Kepulauan Riau

7. Acara/ Agenda

Gambar 4.20 Acara/Agenda

Pada gambar 4.20 diatas berisikan informasi acara/agenda dari Sekolah
Tinggi Ilmu Quran Kepulauan Riau
 IV-12

8. Download

Gambar 4.21 Halaman Download

Pada gambar 4.21 diatas berisikan File dan dokumen dari Sekolah Tinggi
Ilmu Quran Kepulauan Riau

9. Gallery

Gambar 4.22 Halaman Gallery

Pada gambar 4.22 diatas berisikan Foto-foto dari Sekolah Tinggi Ilmu
Quran Kepulauan Riau
 IV-13

10. Contact

Gambar 4.23 Halaman Kontak

Pada gambar 4.23 diatas berisikan form untuk menghubungi Sekolah
Tinggi Ilmu Quran Kepulauan Riau

4.4 Pengujian Sistem

Pengujian sistem merupakan hal terpenting dalam mengambil keputusan

apakah sistem dapat digunakan oleh pengguna dalam hal sarana informasi di

Sekolah Tinggi Ilmu Quran Kepulauan Riau. Pengujian sistem bertujuan untuk

menemukan kesalahan-kesalahan atau kekurangan-kekurangan pada perangkat

lunak yang diuji. Pada gambar 4.14 diatas dapat dilihat pengujian sistem

menggunakan Browser berhasil dan responsive.

4.5 Pengujian Black Box

Sistem Informasi berbasis website pada Sekolah Tinggi Ilmu Quran

Kepulauan Riau selanjutnya diuji dengan model teknik black box. Pengujian black
 IV-14

box digunakan untuk menguji fungsi-fungsi khusus dari perangkat lunak yang

dirancang. Teknik pengujian black box adalah suatu pengujian yang dilakukan

untuk mengamati hasil dari eksekusi pada software tersebut. Pengamatan hasil ini

melalui data uji dan memeriksa fungsional dari perangkat lunak itu sendiri.

Untuk pengujian menggunakan teknik black box dapat ditampilkan sebagai

berikut:

Tabel 4.1 Pengujian Black Box Admin

No Input Proses Output Hasil

1 Login http://bahrul.uisinformatikapagi.com/a Tampil OK
dmin/login Menu
Admin
2 Dashboard http://bahrul.uisinformatikapagi.com/a Tampil OK
dmin/dashboard
Menu
dashboard
3 Data Berita http://bahrul.uisinformatikapagi.com/a Tampil OK
dmin/tulisan
Menu
Berita
4 Data http://bahrul.uisinformatikapagi.com/a Tampil OK
dmin/pengguna
Pengguna Menu
Pengguna
5 Data http://bahrul.uisinformatikapagi.com/a Tampil OK
dmin/agenda
Agenda Menu
Agenda
6 Data http://bahrul.uisinformatikapagi.com/a Tampil OK
dmin/pengumuman
Pengumu Menu
man Pengumu
man
 IV-15

7 Data http://bahrul.uisinformatikapagi.com/a Tampil OK

dmin/galeri
Gallery Menu
Gallery
8 Data Guru http://bahrul.uisinformatikapagi.com/a Tampil OK
dmin/guru
Menu
Guru
9 Data Siswa http://bahrul.uisinformatikapagi.com/a Tampil OK
dmin/siswa
Menu
Siswa

Tabel 4.2 Pengujian Black Box Pengguna

10 Dashboard http://bahrul.uisinformatikapagi.com/ Tampilan OK

Dashboar
d
11 Profile http://bahrul.uisinformatikapagi.com/a Tampilan OK
bout
Menu
Profile
12 Guru http://bahrul.uisinformatikapagi.com/g Tampilan OK
uru
Guru
13 Siswa http://bahrul.uisinformatikapagi.com/s Tampilan OK
iswa
Siswa
14 Berita http://bahrul.uisinformatikapagi.com/b Tampilan OK
log
Berita
15 Pengumu http://bahrul.uisinformatikapagi.com/p Tampilan OK
engumuman
man Pengumu
man
16 Acara http://bahrul.uisinformatikapagi.com/a Tampilan OK
genda
Agenda
17 Gallery http://bahrul.uisinformatikapagi.com/g Tampilan OK
aleri
galeri
 IV-16

18. Contact http://bahrul.uisinformatikapagi.com/c Tampilan OK

ontact
Contact

Dari hasil pengujian dapat disimpulkan untuk uji blackbox yang meliputi uji

input proses dan output dengan acuan perancangan perangkat lunak telah terpenuhi

dengan hasil sesuai dengan rancangan.

 V-1

BAB V
PENUTUP

Kesimpulan
5.1 Kesimpulan
Berdasarkan pembahasan yang telah dilakukan pada bab-bab sebelumnya
dari laporan praktikum ini, maka penulis dapat mengambil kesimpulan sebagai
berikut:
1. Sistem informasi dashboard ini di bangun dengan menggunakan PHP dan
SQL dan mampu mengelola informasi di Sekolah Tinggi Ilmu Quran dan
memudahkan user dalam mencari informasi.
2. Dalam merancang sistem informasi ini penulis memahami dan mengetahui
langkah-langkah dari pembuatan website sistem informasi ini dengan
menggunakan model SDLC dan rancangan awal dari ERD, DFD, dan
Flowchart serta telah diuji pada website dengan url
http://bahrul.uisinformatikapagi.com/ dengan mengunakan aplikasi
browser.

Saran
5.2 Saran
Setelah mengemukakan beberapa kesimpulan dari keseluruhan isi laporan
praktikum ini maka penulis dapat mengemukakan saran-saran sebagai berikut:
1. Dengan menerapkan aplikasi ini alangkah lebih baik jika di kembangkan
lagi untuk dapat mengolah data nilai dan keuangan yang ada pada sekolah
tinggi ilmu quran kepulauan riau.

2. Dashboard ini sebaiknya bisa diterapkan secara bertahap dalam

pelaksanaannya, dengan kata lain tidak mengabaikan/meninggalkan
sistem yang lama.
 V-1

DAFTAR PUSTAKA

Abdurahman, M. (2017). Sistem Informasi Pengolahan Data Pembelian dan

Penjualan pada Toko Koloncucu Ternate. IJIS-Indonesian Journal On
Information System, 2(1).
Basuki, Awan Pribadi., (2007). Membangun Web berbasis PHP dengan Framework
Codeigniter.Yogyakarta
Destiningrum, M., & Adrian, Q. J. (2017). Sistem Informasi Penjadwalan Dokter
Berbasis Web Dengan Menggunakan Framework Codeigniter (Studi Kasus:
Rumah Sakit Yukum Medical Centre). Jurnal Tekno info, 11(2), 30-37.
Hall, J, A., (2013). Sistem Informasi Akuntansi. Jakarta: Penerbit Salemba Empat.
Josi, A. (2017). Penerapan Metode Prototyping Dalam Pembangunan Website Desa
(Studi Kasus Desa Sugihan Kecamatan Rambang). Jurnal Teknologi
Informasi MURA, 9(1).

Kadir, Abdul. (2003). Pengenalan Sistem Informasi. Yogyakarta: Andi.

Ladjamudin, Albahara. (2005). Analisis dan desain sistem informasi. Yogyakarta

Graha Ilmu.

La Midjan dan Susanto, A,. (2013). Sistem Informasi Akuntansi Konsep dan
Pengembangannya. Bandung: Penerbit Lingga Jaya.

Romney, D,. Molina, A., (2014). Collaborative networked organizations and

customer communities: Value co-creation and co-innovation in the
networking era. Production Planning and Control. 22(5- 6),477-472.

Saragih, R. R (2016). Pemrograman Dan Bahasa Pemrograman.

Silvana, M., & Fajrin, H. (2015). Analisis Proses Bisnis Sistem Pembuatan Surat
Perintah Perjalanan Dinas Kantor Regional II PT. Pos Indonesia. Jurnal
Nasional Teknologi dan Sistem Informasi, 1(1), 18-22.

Soca, A. A. (2018). Aplikasi Medical Record Pasien Dan Pendeteksi Dini Wabah