Post on 05-Jul-2018
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 1/120
1
PENGEMBANGAN WEB APLIKASI
PADA SMK NEGERI 4 BATAM
SKRIPSI
disusun oleh
Julian Damas Suryawan12.11.!2
J"R"SAN TEKNIK IN#$RMATIKA
SEK$LA% TINGGI MANAJEMEN IN#$RMATIKA DAN K$MP"TER
AMIK$M &$G&AKARTA
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 2/120
2
&$G&AKARTA
2'1
PENGEMBANGAN WEB APLIKASI
PADA SMK NEGERI 4 BATAM
SKRIPSI
Untuk memenuhi sebagian persyaratan
mencapai derajat Sarjana S1
pada jurusan Teknik Informatika
disusun oleh
Julian Damas Suryawan
12.11.!2
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 3/120
2
J"R"SAN TEKNIK IN#$RMATIKA
SEK$LA% TINGGI MANAJEMEN IN#$RMATIKA DAN K$MP"TER
AMIK$M &$G&AKARTA
&$G&AKARTA
2'1
DAFTA ISI
!A"A#A$ %UDU" &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& i
DAFTA ISI &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& ii
DAFTA 'A#(A &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& )i
DAFTA TA(*" &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& )ii
(A( I +*$DA!U"UA$
1&1 "atar (elakang #asalah &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 1
1&2 umusan #asalah &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 2
1&, (atasan #asalah &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& ,
1&- Tujuan +enelitian &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& ,
1&. #anfaat +enelitian &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& -
1&/ #etode +enelitian &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& -
1&0 Sistematika +enulisan &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& /
(A( II "A$DASA$ T*I
2&1 Tinjauan +ustaka &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 0
2&2 Dasar Teori &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 1
2&2&1 Definisi Sistem3 Informasi dan Sistem Informasi &&&&&&&&&&&&&&&&&&&& 1
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 4/120
,
2&2&1&1 Sistem &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 1
2&2&1&2 Informasi &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 11
2&2&1&, Sistem Informasi &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 12
2&2&2 4arakteristik Sistem &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 12
2&2&2&1 4omponen Sistem Informasi &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 1,
2&2&, #odel +roses &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 1-
2&2&,&1 Soft5are De)elopment "ife 6ycle 7SD"68 &&&&&&&&&&&& 1-
2&2&- 4onsep +emodelan Sistem &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 1.
2&2&-&1 +ermodelan +roses 7+rocess #odelling8 &&&&&&&&&&&&&&&&& 1/
2&2&-&2 +ermodelan Data 7Data #odelling8 &&&&&&&&&&&&&&&&&&&&&&&&& 10
2&2&-&, Flo5chart Sistem &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 2
2&2&. 4onsep (asis Data &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 22
2&2&.&1 +engertian (asis Data &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 22
2&2&.&2 4omponen Sistem (asis Data &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 2,
(A( III A$A"ISIS DA$ +*A$6A$'A$
,&1 Tinjauan Umum &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 2.
,&1&1 Tentang S#4$ - (atam &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 2.
,&1&2 9isi3 #isi dan Tujuan &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 2.
,&1&, Struktur rganisasi &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 20
,&2 Analisis &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 2:
,&2&1 Analisis +I*6*S &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 2:
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 5/120
-
,&2&1&1 Analisis Performance &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 2:
,&2&1&2 Analisis Information &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 2;
,&2&1&, Analisis Economy &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& ,
,&2&1&- Analisis Control &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& ,1
,&2&1&. Analisis Eficiency &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& ,1
,&2&1&/ Analisis Services &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& ,2
,&2&2 Analisis 4ebutuhan &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& ,,
,&2&2&1 Analisis 4ebutuhan Fungsional &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& ,,
,&2&2&2 Analisis 4ebutuhan $on<Fungsional &&&&&&&&&&&&&&&&&&&&&&& ,.
,&2&2&, Analisis 4ebutuhan (iaya &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& ,0
,&, +erancangan Sistem &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& ,:
,&,&1 +emodelan Data &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& ,:
,&,&1&1 *ntity elationship Diagram &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& ,:
,&,&1&2 elasi Antar Tabel &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& ,;
,&,&2 +emodelan +roses &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& -
,&,&2&1 Data Flo5 Diagram 7DFD8 &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& -
,&,&, +erancangan Tampilan &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& -:
(A( I9 I#+"*#*$TASI DA$ +*#(A!ASA$
-&1 Implementasi +erancangan Sistem &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& .-
-&1&1 +embuatan Database &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& .-
-&1&1&1 #enjalankan 5ebser)er local dan database local &&&& .-
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 6/120
.
-&1&1&2 +embuatan Database3 Tabel beserta Atributnya &&&&&&& ..
-&1&2 4oneksi +ada Database &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& /2
-&1&, "isting +rogram &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& /2
-&1&,&1 "isting +rogram +ada !alaman Admin &&&&&&&&&&&&&&&&&&& /2
-&1&,&2 "isting +rogram +ada !alaman Utama =ebsite &&&&&& /:
-&2 Implementasi Sistem &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 0.
-&2&1 Uji 6oba Sistem &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 0.
-&2&2 #anual Sistem &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 0/
(A( 9 4*SI#+U"A$ DA$ SAA$
.&1 4esimpulan &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& ;1
.&2 Saran &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& ;1
DAFTA +USTA4A && &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& ;2
DA#TAR TABEL
Tabel 2&1 Tabel +erbedaan +enelitian &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& :
Tabel 2&2 *lemen > elemen dari DFD dan Simbolnya &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 10
Tabel 2&, *lemen > elemen dari *D &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 1:
Tabel 2&- Simbol > simbol Flo5chart Standar &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 21
Tabel ,&1 Analisis +erformance &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 2;
Tabel ,&2 Analisis Information &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& ,
Tabel ,&, Analisis *conomy &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& ,
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 7/120
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 8/120
0
'ambar ,&12 DFD "e)el 2 +roses lah Data #apel &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& -.
'ambar ,&1, DFD "e)el 2 +roses lah Data #ateri &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& -.
'ambar ,&1- DFD "e)el 2 +roses lah DataTugas &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& -/
'ambar ,&1. DFD "e)el 2 +roses lah Data Album &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& -/
'ambar ,&1/ DFD "e)el 2 +roses lah Data 'allery &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& -0
'ambar ,&10 DFD "e)el 2 +roses lah Data !alstatis &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& -0
'ambar ,&1: Tampilan "ogin &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& -:
'ambar ,&1; !alaman Utama =ebsite &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& -:
'ambar ,&2 !alaman Statis &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& -;
'ambar ,&21 !alaman (erita3 Informasi dan Agenda &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& -;
'ambar ,&22 !alaman Daftar 'uru &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& .
'ambar ,&2, !alaman Daftar Sis5a &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& .
'ambar ,&2- !alaman 'allery &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& .1
'ambar ,&2. !alaman Dashboard &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& .1
'ambar ,&2/ Admin Tambah (erita &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& .2
'ambar ,&20 Admin Data Album3 4elas dan #ata +elajaran &&&&&&&&&&&&&&&&&&&&&&&&& .2
'ambar ,&2: Admin Tambah 'uru dan Sis5a &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& .,
'ambar ,&2; Admin Tambah #ateri dan Tugas &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& .,
'ambar -&1 Interface @A#++ &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& ..
'ambar -&2 Tabel +ada Database smkn-batam &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& ./
'ambar -&, Tabel Admin &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& ./
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 9/120
:
'ambar -&- Tanel Admin &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& .0
'ambar -&. Tabel (erita &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& .0
'ambar -&/ Tabel 'allery &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& .:
'ambar -&0 Tabel 'uru & &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& .:
'ambar -&: Tabel !alstatis &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& .;
'ambar -&; Tabel 4ategori &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& .;
'ambar -&1 Tabel 4elas &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& .;
'ambar -&11 Tabel #apel &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& /
'ambar -&12 Tabel #ateri &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& /
'ambar -&1, Tabel Sis5a &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& /1
'ambar -&1- Tabel Tugas &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& /1
'ambar -&1. 4ode +rogram Untuk 4oneksi Database &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& /2
'ambar -&1/ 4ode +rogram Auntentikasi "ogin Admin &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& /2
'ambar -&10 4ode +rogram #enampilkan Data (erita &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& /,
'ambar -&1: 4ode +rogram Tambah (erita &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& /,
'ambar -&1; 4ode +rogram Tambah 'uru &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& /-
'ambar -&2 4ode +rogram Tambah 4elas &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& /.
'ambar -&21 4ode +rogram #enampilkan Data 4elas &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& /.
'ambar -&22 4ode +rogram Tambah #ata +elajaran &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& //
'ambar -&2, 4ode +rogram #enampilkan Data #ata +elajaran &&&&&&&&&&&&&&&&&&& //
'ambar -&2- 4ode +rogram Tambah #ateri &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& /0
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 10/120
;
'ambar -&2. 4ode +rogram *dit (erita &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& /0
'ambar -&2/ 4ode +rogram !apus Data Sis5a &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& /:
'ambar -&20 4ode +rogram Autentikasi "ogin guru &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& /:
'ambar -&2: 4ode +rogram !alaman Utama =ebsite bagian 1 &&&&&&&&&&&&&&&&&&&&& /;
'ambar -&2; 4ode +rogram !alaman Utama =ebsite bagian 2 &&&&&&&&&&&&&&&&&&&&& 0
'ambar -&, 4ode +rogram !alaman Statis &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 01
'ambar -&,1 4ode +rogram Tampilan +anel 'uru bagian 1 &&&&&&&&&&&&&&&&&&&&&&&&&& 02
'ambar -&,2 4ode +rogram Tampilan +anel 'uru bagian 2 &&&&&&&&&&&&&&&&&&&&&&&&&& 0,
'ambar -&,, 4ode +rogram Tampilan +anel 'uru bagian , &&&&&&&&&&&&&&&&&&&&&&&&&& 0,
'ambar -&,- 4ode +rogram Tampilan 'allery &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 0-
'ambar -&,. !alaman "ogin Admin &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 0/
'ambar -&,/ !alaman Tampil (erita &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 0/
'ambar -&,0 !alaman Data 'uru &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 00
'ambar -&,: !alaman Data Sis5a &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 00
'ambar -&,; !alaman Data #ateri &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 0:
'ambar -&- !alaman Data Tugas &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 0:
'ambar -&-1 !alaman Data !alaman Statis &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 0;
'ambar -&-2 !alaman Tambah (erita &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 0;
'ambar -&-, !alaman Tambah Album &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& :
'ambar -&-- !alaman Tambah 'allery &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&:
'ambar -&-. !alaman Tambah !alaman Statis &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& :1
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 11/120
1
'ambar -&-/ !alaman Tambah 'uru &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& :1
'ambar -&-0 !alaman Tambah Data Sis5a &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& :2
'ambar -&-: !alaman 4elas &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& :,
'ambar -&-; !alaman #ata +elajaran &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& :,
'ambar -&. !alaman Tambah #ateri &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& :-
'ambar -&.1 !alaman Tambah Tugas &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& :-
'ambar -&.2 !alaman Utama =ebsite &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& :.
'ambar -&., !alaman Statis &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& :/
'ambar -&.- !alaman (erita3 Informasi dan Agenda &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& :0
'ambar -&.. !alaman Daftar 'uru &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& ::
'ambar -&./ !alaman Daftar Sis5a &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& :;
'ambar -&.0 !alaman 'allery &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& ;
BAB I
PENDA%"L"AN
1.1 La(ar B)la*an+ Masala,
Teknologi masa kini yang tidak bisa lagi dipungkiri bah5a sudah sangat
berkembang pesat& ang mana salah satu teknologi yang sangat umum bagi semua
orang adalah internet& Internet bagi beberapa orang bukan lagi sebuah pilihan atau
pun sebagai pelengkap3 namun sudah sebagai kebutuhan sehari<hari& Dengan
menggunakan internet semua orang bisa dengan mudah melakukan sesuatu yang
dahulunya mungkin sulit dilakukan&
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 12/120
2
Salah satu kegunaan internet adalah sebagai sarana untuk mengakses sebuah
5ebsite& Saat ini media promosi3 iklan3 penyampaian informasi3 jual dan beli3
bersosialisasi3 dan banyak lagi lainnya sudah dapat dengan mudah dilakukan
melalui sebuah 5ebsite& Dengan 5ebsite banyak orang dengan mudah
mendapatkan apa yang dicari tanpa kesulitan& Salah satu contoh 5ebsite yang
umumnya sering di akses adalah sosial media3 jual beli online3 media informasi
berita3 artikel3 profil instansi3 profil sekolahBuni)ersitas3 dan masih banyak lagi&
S#4$ - (atam3 merupakan salah satu Sekolah #enengah 4ejuruan $egeri
yang ada di +ro)insi 4epulauan iau3 yang beralamat di TI(A$ II kelurahan
+atam "estari3 Sekupang > (atam3 merupakan sekolah yang ingin memajukan
sekolah nya melalui media internet lebih tepat nya adalah menggunakan media
5ebsite& ang mana dengan mengguanakan 5ebsite3 kedepannya sekolah akan
lebih dikenal oleh masyarakat luas dan dapat dengan mudah diakses oleh semua
masyarakat&
=ebsite S#4$ - (atam yang saat ini masih belum maksimal membuat
para masyarakat sulit mendapatkan informasi tentang sekolah tersebut& %ika tanpa
menggunakan media 5ebsite3 para sis5a atau masyarakat yang ingin
mendapatkan informasi yang dicari dari sekolah terebut harus datang langsung
kesekolah itu3 sehingga itu kurang efektif dan efisien&
Dengan begitu solusi dari masalah tersbut adalah pengembangan 5ebsite
S#4$ - (atam yang sudah ada sekarang agar dapat memajukan citra sekolah&
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 13/120
,
=ebsite yang bagus akan menambah daya tarik para masyarakat yang melihat
nya3 dan juga dengan 5ebsite yang bagus itu juga akan mencerminkan sekolah itu
bagus pula&
(erdasarkan latar belakang diatas3 maka penulis ingin melakukan
pengembangan 5ebsite S#4$ - (atam& ang mana tujuan nya adalah sebagai
media penyampaian informasi yang berhubungan dengan S#4$ - (atam&
1.2 Rumusan Masala,
(erdasarkan latar belakang kekurangan dan kelemahan yang ada serta
masalah yang telah dijelaskan diatas3 maka penulis merumuskan masalah yaitu
bagaimana 5ebsite resmi sekolah dapat dipergunakan dengan optimal dengan
tampilan yang menarik agar nyaman dipergunakan user&
1.- Ba(asan Masala,
(erdasarkan rumusan masalah diatas3 maka 5ebsite yang akan dibangun
memiliki batasan masalah sebagai berikut C
1& +engembangan 5ebsite ini dikhususkan untuk S#4$ - (atam&
2& +engembangan 5ebsite ini meliputi desain3 fungsi<fungsi beberapa
page3 dan olah data&
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 14/120
-
,& =ebsite ini membahas informasi mengenai S#4$ - (atam baik itu
profile sekolah3 data informasi3 berita terbaru3 data guru3 data sis5a3 dan
kegiatan sekolah&
-& +embuatan 5ebiste menggunakan bahasa pemrograman +!+ dengan
base !T#"3 database menggunakan #yS"3 5eb desain
menggunakan 6SS3 dan beberapa fitur 5ebsite menggunakan
%a)ascript&
1.4 Tuuan P)n)li(ian
Tujuan dari penelitian ini adalah sebagai berikut C
1& Sebagai syarat kelulusan program Strata<1 %urusan Teknik Informatika
pada Sekolah Tinggi #anajemen Informatika Dan 4omputer EST#I4
A#I4# ogyakarta&
2& Untuk membangun 5ebsite S#4$ - (atam sebagai media informasi
yang efektif dan efisien sehingga memudahkan akses infromasi yang
dicari userBmasyarakat&
1. Man/aa( P)n)li(ian
1& (agi penulis
a& #ememuhi syarat kelulusan program strata sati di ST#I4
A#I4# ogyakarta&
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 15/120
.
b& Secara nyata dan langsung dapat menerapkan ilmu dan pengetahuan
yang sudah didapat dan dimiliki&
c& #enambah pengetahuan dan pengalaman dalam pembuatan sebuah
5ebsite&
2& (agi S#4$ - (atam
a& #emiliki 5ebsite yang efisien dan efektif dalam media penyampain
informasi&
b& #empermudah akses informasi bagi guru3 sis5a3 dan masyarakat&
1.0 M)() P)nili(ian
#etode penelitian yang digunakan dalam pengumpulan data yang
diperlukan untuk menyusun skripsi ini adalah sebagai berikut C
1& #etode +engumpulan Data
a& #etode bser)asi
#etode pengumpulan data dengan langsung mengadakan penelitian
terhadap permasalahan yang di teliti&
b& #etode =a5ancara
#etode pengumpulan data dengan mangajukan pertanyaan<
pertanyaan yang sejalur pada pokok masalah&
c& #etode 4epustakaan
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 16/120
/
#etode pengumpulan data dengan cara mengetahui metode apa yang
di gunakan untuk menyelesaikan permasalahan yang di teliti serta
mendapatkan dasar referensi yang baik buat penulis&
2& Analisis
Dengan menganalisis data<data yang telah diperoleh dari sekolah3
kemudian membuat diagram aliran data yang terdiri dari flo5chart dan
data flo5 diagram 7DFD8 untuk menggambarkan sistem yang sedang
berjalan dan untuk memproleh kebutuhan informasi&
,& +erancangan
#etode perancangan adalah metode dengan cara merancang dan
membuat 5ebsite untuk keperluan penyampaian informasi yang
berkaitan dengan S#4$ - (atam&
-& Uji 6oba
!asil dari penelitian dan hasil deri perancangan 5ebsite yang dibuat
akan di uji coba di ser)er local host terlebih dahulu3 untuk mengetahui
sejauh mana kelayakan 5ebsite tersebut& Dan juga memperbaiki
kesalahan<kesalahan yang ada pada 5ebsite tersebut&
.& Implementasi
!asil yang telah lulus uji coba kemudian akan diimplementasikan dan
diupload langsung agar 5ebsite tersebut online dan sudah dapat di
akses secara langsung bagi sis5a3 guru3 dan masyarakat&
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 17/120
0
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 18/120
:
1.3 Sis()ma(i*a P)nulisan
"aporan skripsi ini di tulis secara sistematika ke dalam . bab& ang
masing<masing di uraikan sebagai berikut C
BAB I PENDA%"L"AN
(erisi latar latar belakang masalah3 rumusan masalah3
batasan masalah3 tujuan penelitian3 manfaat penelitian3
metode penelitian dan sistematika penulisan laporan skripsi&
BAB II LANDASAN TE$RI
(ab ini berisi uraian mengenai konsep dasar internet3
konsep dasar 5ebsite3 tentang +!+ #yS" 6SS dan
%a)ascript3 dan sejarah internet& Dan juga menjelaskan
tentang perangkat lunak yang digunakan&
BAB III ANALISIS DAN PERANANGAN SISTEM
Analisis terhadap masalah yang sedang di teliti di uraikan
pada bab ini& Selain itu menganalisa3 bab ini membahas
tentang analisis sistem3 dan perancangan sistem&
BAB I5 IMPLEMENTASI DAN PEMBA%ASAN
(ab ini berisi penjelasan tentang penerapan implementasi3
pembahasan mengenai rancangan 5ebiste S#4$ - (atam
yang dibuat&
BAB 5 PEN"T"P
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 19/120
;
(ab ini berisi kesimpulan dan saran dari penelitian yang
telah di lakukan sehingga di harapkan bermanfaat&
BAB II
LANDASAN TE$RI
2.1 Tinauan Pus(a*a
(agus unianto =ibo5o 721,83 Uni)ersitas STI4U(A$4 Semarang
dengan judul Analisis dan Pengembangan Web SMP-SMA-SMK Unggulan Nurul
Islami Semarang membahas tentang pengembangan 5ebsite pada S#+<S#A<
S#4 Unggulan $urul Islami Semarang& Dengan pengembangan yang dibuat
penulis memfokuskan pada sistem proses +enerimaan 6alon Sis5a baru dengan
menerapkan metode nline yang telah menggunakan sistem ini& Sehingga lebih
dipermudah dan proses yang cepat serta akurat&
D5i Sutanti 721,83 Uni)ersitas Surakarta dengan judul Pembuatan
Website Profil Seola! Menenga! Pertama Negeri " Ker#o Kabu$aten
Karanganyar membahas tentang pembuatan sebuah 5ebsite sekolah untuk media
informasi yang sebelum nya belum memiliki sistem ini& Dengan menggunakan
sistem yang dibuat oleh penulis sekolah tersebut akan dapat berkembang dalam
meyampaikan informasi&
Dedi Trisna5arman 721-83 Uni)ersitas Tarumanegara dengan judul
Pengembangan Website %an E-&earning Seola! membahas tentang
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 20/120
1
pengembangan 5ebsite dan e<learning pada SDS Fajar Islami Tangerang (anten&
Sistem lama masih menggunakan metode manual belum menggunakan sebuah
sistem& Sekolah tersebut masih menggunakan surat atau pengumuman tertulis
sehingga informasi kurang tepat 5aktu dan juga belum ada nya sistem e<learning
sehinga penyebaran materi dan belum bisa dilakukan secara maksimal&
Ta6)l 2.1 Ta6)l P)r6)aan P)n)li(ian
N$ J"D"L
PENELITIAN
NAMA
PEN"LIS
TA%"N %ASIL PERBEDAAN
1 Analisis dan
+engembangan
=eb S#+<
S#A<S#4
Unggulan $urul
Islami
Semarang
(agus
unianto
=ibo5o
21, #enghasilkan
sebuah sistem
informasi3
pembelajaran
dan penerimaan
sis5a baru
berbasis 5eb&
#emiliki proses
untuk pendaftaran
sis5a baru
melalui jalur
online dan
menggunakan
frame5ork
codeigniter&
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 21/120
11
2 +embuatan
=ebsite +rofil
Sekolah
#enengah
+ertama $egeri
2 4erjo
4abupaten
4aranganyar
D5i
Sutanti
21, =ebsite sebagai
media
penyampaian
informasi
Sistem ini
memfokuskan
pada media
informasi untuk
mempermudah
penyampaian
informasi&
Ta6)l 2.1 Ta6)l P)r6)aan P)n)li(ian
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 22/120
12
, +engembangan
=ebsite Dan *<
"earning
Sekolah
Dedi
Trisna5ar
man
21- ancangan dan
penerapan
5ebsite sekolah
dengan aplikasi
e<learning ini
digunakan
sebagai sarana
promosi yang
intensif melalui
forum diskusi
tanpa dibatasi
jam sekolah dan
tempat&
Sistem ini
ditujukan untuk
media promosi
sekolah dengan
manambahan fitus
sistem e<learning
yang berguna
untuk
mempermudah
sistem belajar
namun
menggunakan
cms yang sudah
ada yaitu %oomla
untuk
membangun
5ebsite tersebut&
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 23/120
1,
2.2 Dasar T)ri
2.2.1 D)/inisi Sis()m7 In/rmasi an Sis()m In/rmasi
2.2.1.1 Sis()m
Al Fatah 72083 Sistem adalah sekumpulan elemen3 komponen yang
saling berinteraksi dan berinteraksi untuk mencapai tujuan tertentu& #urdick dan
oss 71;;,8 mendefinisikan sistem sebagai seperangkat elemen yang
digabungkan satu dengan yang lainya untuk tujuan bersama& Sedangkan definisi
sistem dari kamus Webster's Unbriged adalah elemen<elemen yang saling
berhubungan dan membentuk satu kesatuan dan organisasi& #enurut Scott 71;;/83
sistem terdiri dari unsur<unsur seperti masukan (in$ut)3 pengolahan ($rocessing)3
serta keluaran (out$ut)& (anyak ahli mengajukan konsep mengenai sistem dengan
deskripsi yang berbeda3 tetapi pada prinsipnya hampir sama dengan konsep dasar
sistem pada umumnya&
Suatu sistem yang kompleks biasanya tersusun atas beberapa subsistem&
Subsistem biasa dijelaskan sebagai sebuah sistem dalam sistem yang lebih besar&
Setiap sistem mempunyai subsistem<subsistem yang saling berhubungan&
Subsistem tersebut terdiri dari atas komponen<komponen atau elemen<elemen&
#isalnya komputer adalah sistem& Sebagai subsistemnya adalah soft*are+
!ard*are dan brain*are&
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 24/120
1-
Untuk subsistem dari hard5are terdiri dari in$ut+ proses dan out$ut,
4emudian subsistem dari input terdiri dari komponen seperti mouse3 eyboard 3
layar sentuh dan perangkat<perangkat in$ut <an lainya&
2.2.1.2 In/rmasi
Informasi adalah data yang telah diolah menjadi sebuah bentuk yang berarti
bagi penerimanya dan bermafaat dalam pengambilan keputusan saat ini atau
mendatang 7 %avis+ ../8& Mc &eod (../) mengatakan bah5a informasi adalah
data yang telah diproses atau data yang memiliki arti&
4ualitas informasi dikatakan lebih manfaat dalam proses pengambilan
keputusan apabila informasi tersebut memiliki kualitas nilai& 4riteria kualitas
informasi C
1& Akurat3 Informasi harus tidak menyesatkan dan bebas dari kesalahan&
2& Tepat =aktu3 Informasi yang sampai tidak boleh terlambat&
,& ele)an
-& Informasi bermanfaat bagi penerima&
Informasi dapat menjadi tidak bernilai apabila C
1& #etode pengukuran dan pengumpulan data yang salah&
2& Tidak mengikuti prosedur&
,& Data yang hilang&
-& 4esalahan mencatat B koreksi data&
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 25/120
1.
.& File historis B induk yang salah 7salah pilih file historis8&
/& Salah dalam pengolahan data&
0& Disengaja 7informasi salah8&
2.2.1.- Sis()m In/rmasi
Sistem informasi adalah sistem dalam organisasi yang mempertemukan
pengolahan data transaksi harian3 mendukung operasi3 bersifat manajerial3
kegiatan strategis dari suatu organisasi dan menyediakan pihak luar tertentu
dengan laporan<laporan yang diperlukan& Data sebagai bahan baku informasi
adalah kejadian yang ber5ujud karakter3 angka atau simbol<simbol yang
mempunyai arti&
Sasaran sistem informasi adalah pengingkaran kinerja3 peningkatan
efektifitas informasi3 penurunan biaya3 peningkatan keamanan aplikasi3
peningkatan efisiensi dan peningkatan pelayanan pada pelanggan&
2.2.2 Kara*()ris(i* Sis()m
1& (atasan 7boundary8
+enggambaran dari suatu elemen atau unsur mana yang termasuk didalam
sistem dan mana yang diluar sistem&
2& "ingkungan 7environment 8
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 26/120
1/
Segala sesuatu diluar sistem3 lingkungan yang menyediakan asumsi3
kendala dan input terhadap suatu sistem&
,& #asukan 7in$ut 8
Sumber daya 7data3 bahan baku3 peralatan3 energi8 dari lingkungan yang
dikonsumsi dan dimanipulasi oleh sistem&
-& 4eluaran 7out$ut 8
!asil dari suatu sistem yang dapat berupa informasi3 laporan3 dokumen
dan hasil lainnya yang disediakan untuk lingkungan sistem&
.& 4omponen 7com$onent 8
+roses dalam suatu sistem yang mengolah masukan 7in$ut 8 menjadi
keluaran 7out$ut 8&
/& +enghubung 7interface8
Tempat dimana komponen atau sistem dan lingkungannya bertemu atau
berinteraksi&
0& +enyimpanan 7 storage8
Suatu unsur yang digunakan untuk menyimpan informasi dan sebagian
banyak yang bersifat sementara atau tetap&
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 27/120
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 28/120
1:
melalui in)estigasi3 analisis3 perancangan3 implementasi dan pera5atan& SD"6
juga dikenal sebagai pengambangan sistem informasi atau pengembangan
aplikasi& Sebuah SD"6 harus menghasilkan sistem berkualitas tinggi yang
memenuhi atau bahkan melibihi harapan pelanggan dalam hal perkiraan 5aktu
dan harga3 dapat bekerja dengan efektif dan efisien dalam insfratuktur teknologi
informasi yang ada sekarang atau yang sedang dirancang3 serta membutuhkan
biaya yang rendah dalam pera5atannya dan cost-effective dalam pengembangan
selanjutnya&
Selain itu3 SD"6 juga menggunakan model konseptual yang digunakan
dalam manajemen proyek yang mendeskripsikan tahapan<tahapan yang dilakukan
dala proyek pembangunan sistem informasi3 mulai dari studi kelayakan pertama
sampai pera5atan aplikasi yang telah sempurna& Ada banyak metode yang
dikembangkan untuk menuntun jalannya proses pengembangan yang harus
dilalui3 misalnya 0a$id A$$lication %evelo$ment 7AD83 fountain model 3 s$iral
model dan *aterfall model 7metode SD"6 klasik8&
Setiap ahli mendefinisikan proses<proses kedalam tahapan yang berbeda&
Secara garis besar tahapan tersebut dibagi menjadi .3 yaitu analsis3 desain3
impelementasi3 pengujian dan pemeliharaan&
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 29/120
Requirement
Analysis
Design
Imple-mentation
Testing
Evolution
1;
Gam6ar 2.1 System Development Life Cycle
2.2.4 Kns)8 P)m)lan Sis()m
"angkah a5al desain biasanya dimulai dengan permodelan sistem& #odel
digunakan untuk menyederhanakan cara mengkomunikasikan proses<proses bisnis
yang harus dilakukan sistem dengan cara yang formal antara pemain pengembang
sistem informasi& +ermodelan yang dilakukan biasanya mencakup dua hal3 yaitu
permodelan proses dan permodelan data&
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 30/120
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 31/120
21
rang3 organisasi atau sistem yang berada di luar sistem tetapi berinteraksi
dengan sistem&
#asing<masing dari elemen tersebut akan diberi lambang tertentu untuk
membedakan satu dengan yang lain& Ada beberapa metode untuk menggambarkan
elemen<elemen tersebut& Untuk lebih jelasnya dapat dilihat pada gambar berikut C
Ta6)l 2.2 El)m)n=)l)m)n ari D#D an Sim6lnya
K)()ran+an Sim6l G)n) an Sarsn Sim6l D) Mar: an
Juran
+roses
Aliran Data
+enyimpanan Data
*ntitas *ksternal
2.2.4.2 P)rm)lan Da(a ;Da(a M)llin+<
Data model adalah cara formal untuk menggambarkan data yang
digunakan dan diciptakan dalam suatu sistem bisnis& #odel ini menunjukkan
orang3 tempat atau benda dimana data diambil dan hubungan antar data tersebut&
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 32/120
22
+enyusunan permodelan data harus seimbang dengan permodelan proses& Salah
satu cara permodelan data adalah dengan menggunakan *D 7*ntity elationship
Diagram8&
*D adalah gambar atau diagram yang menunjukan informasi yang
dibuat3 disimpan dan digunakan dalam sistem bisnis& *ntitas biasanya
menggambarkan jenis informasi yang sama& Dalam entitas digunakan untuk
menghubungkan antar entitas yang sekaligus menunjukkan hubungan antar data&
+ada akhirnya *D bisa juga digunakan untuk menunjukan aturan<aturan bisnis
yang ada pada sistem informasi yang akan dibangun&
Seperti Data Flo5 Diagram3 *D juga menggunakan simbol<simbol
khusus untuk menggambarkan elemen<elemen *D& (erikut simbol<simbol yang
digunakan&
Ta6)l 2.- El)m)n=)l)m)n ari ERD
IDE#I> ,)n In/rma(in
En+in))rin+
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 33/120
2,
*ntitas C
rang3 tempat atau
benda
#emiliki nama tunggal
Ditulis dengan huruf
besar
(erisi lebih dari 1
instance
*ntity $ame *ntity $ame *ntity $ame
Ta6)l 2.- El)m)n=)l)m)n ari ERD
Atribut C
+roperti dan entitas
!arus digunakan oleh
menimal 1 proses bisnis
Dipecah dalam detail
*ntity $ame *ntity $ame
ID*$TIFI* GIdentifier
Attribute<name
Attribute<name
Attribute<name
Attribute<
name
Attribute<name
Attribute<name
Attribute<name
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 34/120
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 35/120
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 36/120
2/
+enghubung 4eluar komputer masuk dari
bagian lain flo5chart khususnya
halaman yang sama&
Anak +anah #erepresentasikan alur kerja&
4eputusan 4eputusan dalam program&
Terminal +oints A5alBakhir flo5chart
Dokumen IB dalam format yang dicetak&
#agnetic Drum +enyimpanan Data 7 storage8
#anual Input Input yang dimasukkan secara
manual dari keyboard&
2.2. Kns)8 Basis Da(a
2.2..1 P)n+)r(ian Basis Da(a
(asis data adalah sekumpulan data yang saling terintegrasi satu sama lain
dan terorganisasi berdasarkan sebuah skema atau struktur tertentu dan tersimpan
pada sebuah !ard*are komputer& (asis data terdiri dari beberapa tabel yang saling
terorganisir& Tabel digunakan untuk menyimpan data dan terdiri dari baris dan
kolom& Data tersebut dapat ditampilkan3 dimodifikasi dan dihapus dari tabel&
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 37/120
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 38/120
2:
Terdapat tiga jenis data3 yaitu C
a& Data perasional
Data daru suatu organisasi berupa data yang disimpan dalam basis data&
b& Data #asukkan 7in$ut data8
Data dari sistem yang dimasukkan melalui peralatan input 7misalnya C
keyboard8 yang dapat mengubah data operasional&
c& Data 4eluaran 7out$ut data8
Data dapat berupa laporan melalui peralatan output 7misalnya C screen3
printer dan lain<lain8 sebagai hasil proses dari dalam suatu sistem yang
mengakses data operasional&
2& +erangkat 4eras 7!ard*are8
Terdiri dari semua peralatan komputer yang digunakan untuk pengelolaan
sistem basis data3 berupa C
a& +eralatan untuk menyimpan basis data&
b& +eralatan input dan output&
c& +eralatan proses dan komunikasi data dan lain<lain&
,& +ernagkat "unak 7 soft*are8
(erfungsi sebagai perantara 7interface8 antara pemakai dengan data fisik pada
basis data& Soft5are dari basis data dapat berupa C
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 39/120
2;
a& D(#S 7 %atabase Management System8 yang menangani akses terhadap
basis data sehingga tidak perlu memikirkan proses penyimpanan dan
pengolahan data secara detail&
b& +rogram<program aplikasi dan prosedur<prosedurnya&
-& +emakai 7user 8
+emakai basis data dapat dibagi atas tiga klasifikasi3 yaitu C
a& Database administrator3 orang atau tim yang bertugas mengelola sistem
basis data secara keseluruhan&
b& +rogrammer3 orang atau tim yang bertugas membuat program aplikasi&
c& User3 orang yang mengakses basis data melalui terminal dengan
menggunakan program aplikasi yang dibuat oleh programmer&
BAB III
ANALISIS DAN PERANANGAN
-.1 Tinauan "mum
-.1.1 T)n(an+ SMKN 4 Ba(am
S#4$ - (atam adalah salah satu instansi sekolah negeri yang beralamat
di kota (atam3 4epulauan iau& Sekolah ini sudah mulai berkembang sejak a5al
berdiri nya pada tahun 2/& Dengan saat ini memiliki , buah jurusan yaitu 4imia
Industri3 ekayasa +erangkat "unak dan #ultimedia& (erikut adalah identitas
resmi dari S#4$ - (atam C
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 40/120
2/
$+S$ C 112.01
$ama Sekolah C S#4$ - (atam
Alamat Sekolah C Tiban II +atam "estari3 Sekupang3 (atam
$o Telpon C ,20/2/
*<#ail C infoHsmkn-batam&sch&id
-.1.2 5isi7 Misi an Tuuan
1& 9isi
#e5ujudkan Sumber Daya #anusia yang (erakhlak #ulia yang #ampu
(ersaing Dalam Dunia 4erja Secara 'lobal&
2& #isi
a& #enciptakan suasana yang kondusif untuk mengembangkan potensi
sis5a melalui penekanan pada penguasaan kompetensi bidang ilmu
pengetahuan dan teknologi serta (ahasa Inggris&
b& #eningkatkan penguasaan (ahasa Inggris sebagai alat komunikasi
dan alat untuk mempelajari pengetahuan yang lebih luas&
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 41/120
20
c& #eningkatkan penguasaan (ahasa Inggris sebagai alat komunikasi
dan alat untuk mempelajari pengetahuan yang lebih luas&
d& #enumbuhkembangkan nilai<nilai ketuhanan dan nilai<nilai
kehidupan yang bersifat uni)ersal dan mengintegrasikannya dalam
kehidupan&
e& #enerapkan manajemen partisipatif dengan melibatkan seluruh 5arga
sekolah3 "embaga S5adaya #asyarakat3 stake holders dan instansi
serta institusi pendukung pendidikan lainnya&
,& Tujuan
a& Sis5a memiliki kompetensi penguasaan konsep untuk seluruh mata
pelajaran secara komprehensif dan benar sehingga mampu
berkompetisi ditingkat nasional dan tahun 212 mampu berkompetisi
di tingkat internasional
b& Sis5a mampu menggunakan (ahasa Inggris sebagai alat komunikasi
untuk mendapatkan pengetahuan yang lebih luas
c& Sis5a mampu membangun kebiasaan yang aktif untuk mencari
informasi menggunakan teknologi informasi&
d& Sekolah memiliki sarana dan prasarana penunjang +(# yang lengkap&
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 42/120
2:
e& Sekolah memiliki guru dan tenaga pendukung yang handal untuk
mendukung seluruh manajemen sekolah&
f& Sekolah memiliki hubungan kemitraan yang baik dengan seluruh
5arga sekolah3 stake holders dan instansi serta institusi pendukung
pendidikan lainnya&
g& Sis5a memiliki3 mengaplikasikan dan meningkatkan nilai<nilai
ketuhanan serta nilai<nilai kehidupan yang bersifat uni)ersal dalam
kehidupannya&
-.1.- S(ru*(ur $r+anisasi
Gam6ar -.1 S(ru*(ur $r+anisasi SMKN 4 Ba(am
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 43/120
2;
-.2 Analisis
-.2.1 Analisis PIEES
Sistem memiliki kelemahan dan potensi terjadinya permasalahan saat
sistem berjalan maka dari itu di lakukanlah analisis sistem3 sehingga diharapkan
pada sistem yang akan dibangun dapat mengurangi kelemahan yang ada& Untuk
menganalisis sistem yang dibuat ini menggunakan metode +I*6*S sebagai dasar
untuk memperoleh pokok<pokok permasalahan yang jelas dan spesifik& Dengan
menggunakan metode ini yang akan menghasilkan hasil analisis yang digunakan
sebagai usulan<usulan yang akan diterapkan pada sistem baru3 dan juga dapat
mengetahui apakah sistem tersebut layak digunakan atau tidak& (erikut adalah
hasil dari analisa C
-.2.1.1 Analisis Performance
Sebuah sistem pasti memiliki tugas masing<masing3 dalam menjalankan
tugas tersebut kinerja sistem sangatlah penting& Dengan kinerja sistem
yang cepat3 tepat dan akurat akan membantu mencapai sebuah tujuan&
%umlah produksi 7troug!$ut 8 dan 5aktu yang digunakan untuk
menyelesaikan pekerjaan 7res$onse time8 adalah sebagai tolak ukur kinerja
sistem& +ada S#4$ - (atam menghasilkan analisa sebagai berikut C
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 44/120
,
a& Sebagai sekolah yang telah memiliki sebuah 5ebsite resmi3 selayaknya
5ebsite tersebut dapat digunakan sesuai dengan fungsinya3 namun
bagaimana jika ternyata 5ebsite tersebut susah untuk diakses dan
susah untuk dimengerti oleh user 7tidak user freindly8&
b& +roses belajar<mengajar dalam kelas memiliki 5aktu 1@-. menit per
mata pelajaran dan 2@-. menit per mata pelajaran3 namun dengan
5aktu tersebut sis5a hanya disibukkan untuk mencatat materi&
Ta6)l -.1 Analisis Performance
4eterangan Sistem "ama Sistem (aru !asil
Performance =aktu yang
dibutuhkan untuk
mengolah data
sis5a dan guru
masih lama&
+engolahan data
sis5a dan guru
lebih cepat karena
sudah ada
perkembangan&
Sistem baru lebih
menghemat aktu
dan kinerja yang
optimal&
-.2.1.2 Analisis Information
*)eluasi terhadap kemampuan sistem informasi dalam menghasilkan dan
menyampaikan informasi yang bermanfaat& +ada S#4$ - (atam
menghasilkan analisa sebagai berikut C
a& Sebagai sekolah yang sering mengadakan event dan acara<acara namun
belum dapat menyampaikan informasi tersebut dengan baik&
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 45/120
,1
b& Sekolah yang memikiki guru3 staff dan murid yang banyak dengan
sistem yang sekarang sulit untuk dijalankan&
c& +ekerjaan rumah adalah salah satu tugas yang sering diberikan oleh
guru kepada sis5a namun dengan penanganan yang masih kurang
untuk saat ini&
Ta6)l -.2 Analisis Information
4eterangan Sistem "ama Sistem (aru !asil
Information Informasi yang
dihasilkan
kurang akurat3
rele)an dantepat 5aktu
karena sistem
belum optimal&
+engembangangan
5ebsite yang telah
optimal untuk
penyampaianinformasi&
Sistem baru lebih
akurat3 rele)an dan
tepat 5aktu dalam
menyampaikaninformasi&
-.2.1.- Analisis Economy
Analisis ekonomi berkaitan dengan biaya operasional yang dikeluarkan
oleh sistem& +ada S#4$ - (atam menghasilkan analisa sebagai berikut C
a& Sebuah informasi dan berita jika dilakukan melalui selebaran dan surat&
ang memakan biaya yang lebih banyak& 4ertas !9S p -&3<
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 46/120
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 47/120
,,
dan keamanan
data masih kurang
karna hanya dan
hanya satu orang
yang memiliki hak
askes&
keamanan data
lebih aman dan
hak akses sudah
dibagi menjadi
tiga yaitu admin3
guru dan sis5a&
keamanan lebih
terjaga dan
terjamin&
-.2.1. Analisis Eficiency
Dengan sumber daya yang terdapat di S#4$ - (atam maka dari itu
bagaimana agar tidak terjadi nya pemborosan yang mana menghasilkan
out$ut yang semaksimal mungkin dan in$ut yang seminimal mungkin&
+ada S#4$ - (atam menghasilkan analisa sebagai berikut C
a& Sumber daya manusia yang dikerahkan dalam penyampaian informasi&
b& =aktu yang lama agar informasi dapat tersebar dengan cepat&
c& 0esources yang penggunaan nya masih kurang maksimal seperti
jaringan internet dan komputer&
Ta6)l -. Analisis Eficiency
4eterangan Sistem "ama Sistem (aru !asil
Eficiency Sistem lama
kurang efisien
karena dibutuhkan
banyak tenaga dan
"ebih cepat dan
efisien dalam
mencapai tujuan
seperti
*fisien dan
mudah dalam
mencapai tujuan
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 48/120
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 49/120
,.
-.2.2 Analisis K)6u(u,an
-.2.2.1 Analisis K)6u(u,an #un+sinal
Analisis ini dilakukan untuk mengetahui apa saja yang dapat dilakukan
oleh sistem& #enjelaskan fungsi<fungsi yang dapat dilakukan oleh sistem sesuai
hak akses yang diberlakukan pada sistem& Sebagai berikut C
1& Admin
a& Admin bisa menambah data berita3 kategori berita3 data guru3 data
sis5a3 profil sekolah3 kelas3 mata pelajaran3 materi3 tugas3 album dan
gellery&
b& Admin bisa merubah data berita3 kategori berita3 data guru3 data sis5a3
profil sekolah3 kelas3 mata pelajaran3 materi3 tugas3 album dan gellery&
c& Admin bisa menghapus data berita3 kategori berita3 data guru3 data
sis5a3 profil sekolah3 kelas3 mata pelajaran3 materi3 tugas3 album dan
gellery&
d& Admin bisa melihat informasi data berita3 kategori berita3 data guru3
data sis5a3 profil sekolah3 kelas3 mata pelajaran3 materi3 tugas3 album
dan gellery&
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 50/120
,/
2& 'uru
a& 'uru bisa menambah data materi dan data tugas&
b& 'uru bisa merubah data materi dan data tugas&
c& 'uru bisa menghapus data materi dan data tugas&
d& 'uru bisa melihat informasi data berita3 kategori berita3 data guru3 data
sis5a3 profil sekolah3 kelas3 mata pelajaran3 materi3 tugas3 album dan
gellery&
,& Sis5a
a& Sis5a dapat merubah data sis5a&
b& Sis5a bisa melihat informasi data berita3 kategori berita3 data guru3
data sis5a3 profil sekolah3 kelas3 mata pelajaran3 materi3 tugas3 album
dan gellery&
-& Tamu
Tamu bisa melihat informasi data berita3 data guru3 data sis5a3 album dan
gallery&
-.2.2.2 Analisis K)6u(u,an Nn=#un+sinal
Analisis ini dilakukan untuk mengetahui apa saja yang dibutuhkan untuk
menjalan kan sistem dan berisi properti prilaku yang dimiliki oleh sistem&
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 51/120
,0
1& perasional
a& =ebsite
1& Ser)er !osting3 digunakan untuk 5ebser)er dengan spesifikasi
minimal sebagai berikut C
Ta6)l -.3 S)r9)r %s(in+
Storage 0
(and5idth 1 #(Bbulan
2& Domain3 alamat yang akan di akses oleh semua orang& Domain
yang digunakan adalah 555&smkn-batam&sch&id&
b& Admin
Seorang admin membutuhkan perangkat untuk pengoperasionalan
dengan menggunakan spesifikasi minimal sebagai berikut C
Ta6)l -.! S8)si/i*asi Minimial Km8u()r Amin
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 52/120
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 53/120
,;
-.2.2.- Analisis K)6u(u,an Biaya
Dalam pengembangan sistem ini dibutuhkan rincian biaya untuk
implementasi sistem baru pada S#4$ - (atam&
Ta6)l -.? Rin:ian Biaya
D)s*ri8si Biaya
!osting : '( B bulan p :0&. @ 12 J p 1&.&
Domain B tahun p .&
Internet Speedy 2 #bps B bukan p 2.& @ 12 J p ,&&
T(al @ Ta,un R8 4.1''.'''
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 54/120
-
-.- P)ran:an+an Sis()m
-.-.1 P)m)lan Da(a
-.-.1.1 En(i(y R)la(ins,i8 Dia+ram
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 55/120
-1
Gam6ar -.2 Ran:an+an ERD
-.-.1.2 R)lasi An(ar Ta6)l
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 56/120
-2
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 57/120
-,
Gam6ar -.- R)lasi An(ar Ta6)l
-.-.2 P)m)lan Prs)s
-.-.2.1 Da(a #lw Dia+ram ;D#D<
Gam6ar -.4 Dia+ram Kn()*s W)6si() SMKN 4 Ba(am
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 58/120
--
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 59/120
-.
Gam6ar -. D#D L)9)l ' W)6si() SMKN 4 Ba(am
Gam6ar -.0 D#D L)9)l 2 Prs)s $la, Da(a Amin
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 60/120
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 61/120
-0
Gam6ar -.! D#D L)9)l 2 Prs)s $la, Da(a Ka()+ri
Gam6ar -.? D#D L)9)l 2 Prs)s $la, Da(a Guru
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 62/120
-:
Gam6ar -.1' D#D L)9)l 2 Prs)s $la, Da(a Siswa
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 63/120
-;
Gam6ar -.11 D#D L)9)l 2 Prs)s $la, Da(a K)las
Gam6ar -.12 D#D L)9)l 2 Prs)s $la, Da(a Ma8)l
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 64/120
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 65/120
.1
Gam6ar -.1 D#D L)9)l 2 Prs)s $la, Da(a Al6um
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 66/120
.2
Gam6ar -.10 D#D L)9)l 2 Prs)s $la, Da(a Gall)ry
Gam6ar -.13 D#D L)9)l 2 Prs)s $la, Da(a %als(a(is
-.-.- P)ran:an+an Tam8ilan
1& Tampilan "ogin
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 67/120
.,
Gam6ar -.1! Tam8ilan L+in
2& !alaman Utama =ebsite
Gam6ar -.1? %alaman "(ama W)6si()
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 68/120
.-
,& !alaman Statis
Gam6ar -.2' %alaman S(a(is
-& !alaman (erita3 Informasi dan Agenda
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 69/120
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 70/120
./
Gam6ar -.22 %alaman Da/(ar Guru
/& !alaman Daftar Sis5a
Gam6ar -.2- %alaman Da/(ar Siswa
0& !alaman 'allery
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 71/120
.0
Gam6ar -.24 %alaman Gall)ry
:& Admin Dashboard
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 72/120
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 73/120
.;
Gam6ar -.23 Amin Da(a Al6um7 K)las an Ma(a P)laaran
11& Admin Tambah 'uru dan Sis5a
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 74/120
/
Gam6ar -.2! Amin Tam6a, Guru an Siswa
12& Admin Tambah #ateri dan Tugas
Gam6ar -.2? Amin Tam6a, Ma()ri an Tu+as
BAB I5
IMPLEMENTASI DAN PEMBA%ASAN
4.1 Im8l)m)n(asi P)ran:an+an Sis()m
Tahapan ini adalah tahapan dimana suatu sistem yang telah dibuat akan
diterapkan yang rancangan pembuatan sistem sudah ada pada pokok pembahasan
sebelum nya& Adapun pembahasan yang dilakukan adalah mengenai pembuatan
database3 pembuatan program dan testing&
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 75/120
/1
4.1.1 P)m6ua(an Da(a6as)
+ada pengembangan sistem ini menggunakan database #yS" dan
menggunakan 5eb ser)er local yaitu apache& Database yang digunakan
diberinama smkn-batam dengan memiliki 12 tabel yaitu3 admin3 guru3 sis5a3
tugas3 materi3 berita3 kategori3 kelas3 mata pelajaran3 album3 gallery dan halaman
statis&
4.1.1.1 M)nalan*an w)6s)r9)r l:al an a(a6as) l:al
@A#++ merupakan suatu soft5are open source yang menyediakan
bundling layanan yang dikemas dalam satu soft5are yaitu @A#++& Salah satu
diantara nya yang akan digunakan adalah Apache dan #yS"& Untuk
menjalankan nya3 buka @A#++3 pada control panel @A#++ klik start Apache
dan #yS"
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 76/120
/2
Gam6ar 4.1 Interface >AMPP
4.1.1.2 P)m6ua(an Da(a6as)7 Ta6)l 6)s)r(a A(ri6u(nya
@A#++ yang telah berjalan dan service yang dibutuhkan juga suda mulai
jalan yaitu Apache dan #yS"3 selanjutnya adalah membuat database&
#embuatnya dengan menjalankan Kuery sebagai berikutC
6*AT* DATA(AS* smkn-batam
uery tersebut akan diproses dan terbentukan sebuah database yang
bernama smkn-batam3 kemudian pada database tersebut langkah selanjutnya
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 77/120
/,
adalah membuat tabel beserta dengan atributnya& (erikut tabel<tabel yang sudah
dibuat C
Gam6ar 4.2 Ta6)l Paa Da(a6as) sm*n46a(am
(erikut adalah atribut<atribut yang telah dibuat pada masing<masing tabel C
, Tabel admin
Tabel admin memiliki 0 atribut3 berikut adalah tampilan atribut yang telah
diimplementasikan kedalam tabel admin C
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 78/120
/-
Gam6ar 4.- Ta6)l Amin
", Tabel album
Tabel album memiliki - atribut3 berikut adalah tampilan atribut yang telah
diimplementasikan kedalam tabel admin C
Gam6ar 4.4 Ta6)l Al6um
1, Tabel berita
Tabel berita memiliki . atribut3 berikut adalah tampilan atribut yang telah
diimplementasikan kedalam tabel admin C
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 79/120
/.
Gam6ar 4. Ta6)l B)ri(a
2, Tabel gallery
Tabel gallery memiliki - atribut3 berikut adalah tampilan atribut yang telah
diimplementasikan kedalam tabel admin C
Gam6ar 4.0 Ta6)l Gall)ry
/, Tabel guru
Tabel guru memiliki 1, atribut3 berikut adalah tampilan atribut yang telah
diimplementasikan kedalam tabel admin C
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 80/120
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 81/120
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 82/120
/:
6, Tabel materi
Tabel materi memiliki 0 atribut3 berikut adalah tampilan atribut yang telah
diimplementasikan kedalam tabel admin C
Gam6ar 4.12 Ta6)l Ma()ri
, Tabel sis5a
Tabel sis5a memiliki 1, atribut3 berikut adalah tampilan atribut yang telah
diimplementasikan kedalam tabel admin C
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 83/120
/;
Gam6ar 4.1- Ta6)l Siswa
", Tabel tugas
Tabel tugas memiliki / atribut3 berikut adalah tampilan atribut yang telah
diimplementasikan kedalam tabel admin C
Gam6ar 4.14 Ta6)l Tu+as
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 84/120
0
4.1.2 Kn)*si Paa Da(a6as)
4oneksi database merupakan suatu proses untuk menghubungkan antara
sistem dengan database yang telah dibuat& (erikut implementasinya C
Gam6ar 4.1 K) Pr+ram "n(u* Kn)*si Da(a6as)
4.1.- Lis(in+ Pr+ram
4.1.-.1 Lis(in+ Pr+ram Paa %alaman Amin
1& !alaman login
!alaman ini adalah porses auntentikasi untuk login seorang admin3 berikut
adalah cuplikan kode login admin C
Gam6ar 4.10 K) Pr+ram Aun()n(i*asi L+in Amin
2& !alaman das!board menampilkan data berita3 data guru3 data sis5a3 data
materi3 data tugas3 data halaman statis dan data gallery&
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 85/120
01
!alaman ini menampilkan data berita3 guru3 sis5a3 materi3 tugas3 halaman
statis dan gallery yang sudah tersimpan di database& (erikut adalah cuplikan
dara salah satu halaman yaitu halaman yang menampilan data berita C
Gam6ar 4.13 K) Pr+ram M)nam8il*an Da(a B)ri(a
,& !alaman fitur tambah berita3 album3 gallery dan halaman statis&
!alaman ini berisi tentang proses penambahan berita3 album3 gallery dan
halaman statis& (erikut salah satu cuplikan kode program tambah beritaC
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 86/120
02
Gam6ar 4.1! K) Pr+ram Tam6a, B)ri(a
-& !alaman tambah data guru dan sis5a
!alaman ini berisi tentang proses penambahan data guru dan sis5a& (erikut
salah satu cuplikan kode program yaitu tambah guruC
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 87/120
0,
Gam6ar 4.1? K) Pr+ram Tam6a, Guru
.& !alaman tambah kelas dan data kelas
!alaman ini berisi tentang proses tambah kelas dan menampilkan data
kelas& (erikut adalah cuplikan kode program terserbut C
Gam6ar 4.2' K) Pr+ram Tam6a, K)las
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 88/120
0-
Gam6ar 4.21 K) Pr+ram M)nam8il*an Da(a K)las
/& !alaman tambah mata pelajaran dan data pelajaran
!alaman ini berisi tentang proses tambah mata pelajaran dan menampilkan
data mata pelajaran& (erikut adalah cuplikan kode program tersebut C
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 89/120
0.
Gam6ar 4.22 K) Pr+ram Tam6a, Ma(a P)laaran
Gam6ar 4.2- K) Pr+ram M)nam8il*an Da(a Ma(a P)laaran
0& !alaman *<"earning tambah materi dan tambah tugas
!alaman ini berisi tentang proses tambah materi dan tambah tugas& (erikut
adalah cuplikan kode program yaitu tambah materi C
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 90/120
0/
Gam6ar 4.24 K) Pr+ram Tam6a, Ma()ri
:& !alaman edit
!alaman ini berisi proses edit data berita3 guru3 sis5a3 kelas dan mata
pelajaran& (erikut adalah salah satu cuplikan kode program untuk proses
edit yaitu edit berita C
Gam6ar 4.2 K) Pr+ram Ei( B)ri(a
;& !alaman hapus
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 91/120
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 92/120
0:
2& !alaman utama 5ebsite
!alaman utama 5ebsite yang berisi informasi berita3 pengumuman dan
agenda& (erikut adalah listing program halaman utama 5ebsite C
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 93/120
0;
Gam6ar 4.2! K) Pr+ram %alaman "(ama W)6is() 6a+ian 1
Gam6ar 4.2? K) Pr+ram %alaman "(ama W)6si() 6a+ian 2
,& !alaman statis
!alaman ini berisi tampilan data dari halaman statis untuk di gunakan
seperti profil sekolah3 )isi misi3 tujuan dll& ang tidakt terlalu berubah<
ubah& (erikut salah satu listing program nya C
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 94/120
:
Gam6ar 4.-' K) Pr+ram %alaman S(a(is
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 95/120
:1
-& !alaman panel info user login
!alaman ini berisi panel disaat login& (aik itu admin3 guru maupun sis5a3
nanti setiap panel akan berbdeda sesuai le)el user login& (erikut adalah
kode program tampilan panel guru C
Gam6ar 4.-1 K) Pr+ram Tam8ilan Pan)l Guru 6a+ian 1
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 96/120
:2
Gam6ar 4.-2 K) Pr+ram Tam8ilan Pan)l Guru 6a+ian 2
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 97/120
:,
Gam6ar 4.-- K) Pr+ram Tam8ilan Pan)l Guru 6a+ian -
.& 'allery
(erisi tampilan gallery foto<foto yang sudah tersimpan didatabase sesuai
dengan album& (erikut adalah kodep program nya C
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 98/120
:-
Gam6ar 4.-4 K) Pr+ram Tam8ilan Gall)ry
4.2 Im8l)m)n(asi Sis()m
4.2.1 "i 6a Sis()m
Untuk mengetahui apakah sistem yang sudah dibuat sudah memenuhi
sesuai kebutuhan dilakukan lah sebuah uji coba sistem& #etode yang digunakan
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 99/120
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 100/120
:/
1& "ogin
#enu halaman untuk login sesuai jenis user login&
Gam6ar 4.- %alaman L+in Amin
2& Tampilan Data (erita
#anampilkan data berita yang sudah tersimpan pada database
Gam6ar 4.-0 %alaman Tam8il B)ri(a
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 101/120
:0
,& Tampilan Data 'uru
!alaman yang menampilkan data guru yang sudah tersimpan didatabase
Gam6ar 4.-3 %alaman Da(a Guru
-& Tampilan Data Sis5a
!alaman yang menampilkan data sis5a yang sudah tersimpan didalam
database&
Gam6ar 4.-! %alaman Da(a Siswa
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 102/120
::
.& Tampilan Data #ateri
!alaman yang mampilkan data materi yang tersimpan pada database
Gam6ar 4.-? %alaman Da(a Ma()ri
/& Tampilan Data Tugas
!alaman yang menampilkan data tugas yang sudah tersimpan didatabase
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 103/120
:;
Gam6ar 4.4' %alaman Da(a Tu+as
0& Tampulan Data !alaman Statis
!alaman yang menampilkan data halaman statis yang tersimpan pada
database&
Gam6ar 4.41 %alaman Da(a %alaman S(a(is
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 104/120
;
:& Tambah (erita
!alaman untuk menambahkan data berita kedalam database&
Gam6ar 4.42 %alama Tam6a, B)ri(a
;& Tambah Album
!alaman untuk menambahkan data album ke dalam database&
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 105/120
;1
Gam6ar 4.4- %alaman Tam6a, Al6um
1& Tambah 'allery
!alaman untuk menambahkan data gallery sesuai album kedalam
database&
Gam6ar 4.44 %alaman Tam6a, Gall)ry
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 106/120
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 107/120
;,
Gam6ar 4.40 %alaman Tam6a, Guru
1,& Tambah Data Sis5a
!alaman untuk menambahkan data sis5a kedalam database&
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 108/120
;-
Gam6ar 4.43 %alaman Tam6a, Da(a Siswa
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 109/120
;.
1-& 4elas
!alaman untuk menambahkan data kelas serta menampilkan data kelas&
Gam6ar 4.4! %alaman K)las
1.& #ata +elajaran
!alaman untuk menambahkan data mata pelajaran serta menampilkan data
mata pelajaran&
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 110/120
;/
Gam6ar 4.4? %alaman Ma(a P)laaran
1/& *<learning #ateri
!alaman untuk menambahkan data materi bagi sis5a&
Gam6ar 4.' %alaman Tam6a, Ma()ri
10& *<learning Tugas
!alaman untuk menambahkan data tugas bagi sis5a&
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 111/120
;0
Gam6ar 4.1 %alaman Tam6a, Tu+as
1:& !alaman Utama =ebsite
!alaman utama 5ebsite yang menampilkan berita3 info sekolah3 dan
agenda&
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 112/120
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 113/120
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 114/120
1
2& !alaman (erita3 Informasi dan Agenda
!alaman ini berisi tentang informasi berita3 informasi sekolah dan agenda
sekolah yang akan dimuat di5ebsite yang berfungsi sebagai media
menyampaikan informasi&
Gam6ar 4.4 %alaman B)ri(a7 In/rmasi an A+)na
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 115/120
11
21& !alaman Daftar 'uru
!alaman ini berisi daftar guru dan staff yang ada dalam instansi
pendidikan S#4$ - (atam ini&
Gam6ar 4. %alaman Da/(ar Guru
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 116/120
12
22& !alaman Daftar Sis5a
(erisi tentang sis5a yang terdaftar dan aktif di S#4$ - (atam&
Gam6ar 4.0 %alaman Da/(ar Siswa
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 117/120
1,
2,& !alaman 'allery
!alaman ini berisi tentang gallery dari dokemtasi agenda dan acara yang
diadakan S#4$ - (atam&
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 118/120
1-
Gam6ar .3 %alaman Gall)ry
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 119/120
BAB 5
KESIMP"LAN DAN SARAN
.1 K)sim8ulan
Telah diuraikan dan dijelaskan pada bab<bab sebelumya dari hasil
penelitian yang dilakukan penulis3 dapat mengambil kesimpulan sebagai berikut C
1& Data guru dan sis5a dapat di tampilkan dengan baik dan di olah dengan
mudah&
2& Sistem yang sudah dikembangkan ini mampu mempercepat
menyampaikan informasi dari sekolah&
,& Ada , jenis user yaitu admin3 guru3 sis5a dan tamu 7pengakses umu8&
-& Ada 12 tabel database dalam sistem yaitu3 materi3 gallery3 album3 mapel3
guru3 kelas3 tugas3 sis5a3 admin3 halstatis3 kategori3 berita&
.2 Saran
Dengan pengembangan 5ebsite S#4$ - (atam ini3 bukan berarti sudah
sempurna& #aka dari itu penulis memiliki beberapa saran yang dapat
dipertimbangkan guna untuk meningkatkan kualitas dan kuantitas pada 5ebsite C
1& (agi sekolah3 hendaknya upgrade ser)er yang menyediakan autobackup
per hari agar terhindar dari kehilangan data&
2& (agi peneliti berikunya yang akan melakukan penelitian dengan topik
sejenis disarankan hendaknya menambah fitur guna meningkatkan kualitas
dan kuantitas kerja&
;1
8/15/2019 SURYA.docx
http://slidepdf.com/reader/full/suryadocx 120/120
DA#TAR P"STAKA
L1&M Al fatta3 !anif& 20& Analisis dan perancangan system informasi untuk
keunggulan perusahaan dan organisasi kelas dunia& ogyakarta C +enerbit
Andi&
L2&M Arif3 #&udyanto& 2/& +emrograman (asis Data menggunakan Transact
S" dengan #icrosoft S" ser)er 2& ogyakartaC A$DI&
L,&M %ogiyanto& 2.& Analisis dan Desain Sistem Informasi C +endekatan
Terstruktur3 Teori dan +raktik Aplikasi (isnis& ogyakarta C +enerbit Andi&
L-&M ouf3 Abdul3 2123 E +engujian +erangkat "unak Dengan #enggunakan
#etode =hite (o? Dan (lack (o?3
httpCBBejournal&himsya&ac&idBinde?&phpB!I#SAT*6!BarticleBdo5nloadB2
:B20& 7Diakses 1. Agustus 21.8&
L.&M Supriyanto3 Aji& 2.& +engantar Teknologi Informasi& %akarta C +enerbit
Salemba Infotek&