LAPORAN SEMESTER

PERANCANGAN SISTEM INFORMASI SEKOLAH

BERBASIS WEB PADA SMP
Untuk Memenuhi Syarat Tugas
Program Studi Teknik Elektronika dan Informatika Komputer
Disusun oleh :
1. KRNIAWAN SR!A PRADHANA "1#$%$1%&'
#. ANACHERINA SR!A PTRI "1#$%$1%('
$. RISMINAH "1#$%$1)%'
). TRI!ONO "1#$%$1%*'
(. WAISHOL AKMAL "1#$%$1#$'
POLITEKNIK DHARMA PATRIA
KEBMEN
#%1)
1
KATA PENGANTAR
Dengan memanjatkan puji syukur kehadirat Allh ST! karena atas rahmat dan
hidayah"#ya penulis dapat menyelesaikan $aporan Semester ini yang %erjudul +Sis,e-
In.o/-0si Se1ol0h Be/20sis We2 +
$aporan ini disusun untuk menempuh tugas ahli madya pada program Diploma
tiga Teknik Elektro Informatika di Politeknik Dharma Patria Ke%umen&
Dalam kesempatan ini perkenankan penulis mengu'apkan terima kasih kepada(
1& )apak D*S &K & Prihartono A&+&!S!Sos&!MM&! selaku Direktur Politeknik Dharma
Patria&,ang terhormat )apak Khakim -isa%il! S&T selaku ketua jurusan Teknik
Informatika
.& )apak Ahmad Sururi #gafif! S&T selaku pem%im%ing yang telah meluangkan /aktu
serta mem%erikan %er%agai masukan dan dorongan semangat sehingga penulis dapat
menyelesaikan penyusuan $aporan Semester ini&
0& ,ang terhormat Kepala Sekolah! )apak dan I%u 1uru! dan seluruh staf yang terkait
di SMP kesempatan yang di%erikan&
Mudah"mudahan kepada semua pihak yang telah mem%antu dalam menyelesaikan
penulisan tugas ini! akan mendapat %alasan dari A$$A+ ST& Penulis %erharap semoga
tugas ini dapat %ermanfaat %agi penulis khususnya dan %agi semua pihak pada umumnya&
Ke%umen! 1. Mei .213
Penyusun
.
DAFTAR ISI
KATA PE#1A#TA*&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& .
DA-TA* ISI&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 0
BAB I. PENDAHLAN&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 4
1&1 $atar )elakang Masalah &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 4
1&. Identifikasi Masalah &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 4
1&0 )atasan Masalah&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 4
1&3 Maksud dan Tujuan &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 5
1&6 Metode Penelitian &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 5
1&4 Sistematika Penulisan &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 5
BAB II. LANDASAN TEORI&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 7
.&1& Konsep Dasar &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 7
.&.& Komponen dan Elemen Sistem Informasi&&&&&&&&&&&&&&&&&&&&&&&&&& 12
.&0& Data -lo/ Diagram&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 10
.&3& Pengertian Data%ase&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 13
.&6& -lo/'hart&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 16
.&4& Pengertian e%&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 15
BAB III. PROSES DAN RANCANGAN WEBSITE&&&&&&&&&&&&&&&&&&&&&&&&&&& 17
0&1& Proses Aplikasi&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 17
0&.& 1am%ar Diagram&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 17
0&0& Peran'angan Data%ase&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& .1
0&3& Analisa Sistem&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& .3
DAFTAR GAMBAR
.&1 Sim%ol 8 Sim%ol -lo/'hart9999999999&& 14
0&1& Diagram Konteks &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 17
0&.& Data -lo/ Diagram le:el 2&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& .2
0&0 1am%ar E*D999999999999999&&& .1
0&3 *elasi Antar Ta%el9999999999999&&& .3
0&6 Tampilan *an'angan -orm $ogin9999999&& .6
0&4 -lo/'hart $ogin99999999999999&& .6
0&5 Tampilan *an'angan -orm $ogin9999999& .4
0&; -lo/'hart +ome99999999999999&& .5
0&7 Tampilan ran'angan -orm Profil99999999 .;
0&12 -lo/'hart Profil 99999999999999 .;
0&11 *an'angan data guru999999999999& .7
0&1. -lo/'hart data guru9999999999999 .7
0&10 *an'angan -orm data sis/a999999999& 02
0
0&13 -lo/'hart data sis/a999999999999& 02
0&16 *an'angan info pem%ayaran sis/a999999&& 01
0&14 -lo/'hart info pem%ayaran sis/a9999999 01
BAB I
PENDAHLAN
1&1 $ATA* )E$AKA#1
Saat ini internet semakin %anyak digunakan %aik untuk indi:idu maupun oleh
perusahaan atau pelaku %isnis untuk memperkenalkan produk! mempromosikan
organisasi ataupun mengiklankan produk apa saja yang dikeluarkan atau diproduksi yang
sekiranya akan menunjang kemajuan indi:idu! organisasi! maupun perusahaan&
-asilitas"fasilitas yang ada dalam internet ini yang %erupa /e% akan diperjelas lagi
oleh penulis& <leh karena itu dalam $aporan Semester ini penulis ingin mem%uat suatu
/e%site yang %erisikan tentang ser%a"ser%i yang %erhu%ungan dengan sekolah SMP&
1&. IDE#TI-IKASI MASA$A+
3
Informasi yang ada dalam internet itu %isa %anyak dampaknya& )aik yang %erdampak
positif dan negatif %agi penggunanya& Dengan adanya /e%site ini para user diharapkan
dapat memperoleh informasi tentang Sekolah terse%ut dengan mudah dan 'epat& Dan
diharapkan dapat %erguna %agi user dan digunakan se"efektif dan se"efisien mungkin&
1&0 )ATASA# MASA$A+
)atasan masalah yang ada dalam /e% ini %erisi informasi yang %isa mem%antu dan
mempermudah user dalam melihat nilai online! data sis/a! profil sekolah! profil pengajar!
:isi dan misi sekolah! kegiatan yang ada disekolah terse%ut! %erita ter%aru dan lain"lain&
1&3 MAKSUD DA# TU=UA#
Maksud pem%uatan laporan semester ini adalah(
1& Untuk mem%uat /e% SMP
.& Tujuannya adalah untuk mem%uat suatu media atau fasilitas informasi mengenai
profil SMP! sehingga user yang mem%utuhkan informasi akan le%ih mudah
memperoleh informasi yang di%utuhkan&
1&6 MET<DE PE#E$ITIA#
1& Penelitian se'ara langsung terhadap o%jek
.& a/an'ara
0& <%ser:asi
6
1&4 SISTEMATIKA PE#U$ISA#
Se'ara garis %esar sistematka penulisan $aporan Semester ini adalah se%agai %erikut(
)A) I PE#DA+U$UA#
Pendahuluan merupakan penjelasan dari su% %a% yang terdiri dari latar
%elakang! identifikasi masalah! %atasan masalah! maksut dan tujuan
penulisan! rumusan masalah! tujuan penelitian! metode penelitian!
sistematika penulisan&
)A) II K<MP<#E#"K<MP<#E# DA# E$EME# DATA PE*A#>A#1A#
SISTEM I#-<*MASI E)SITE
)a% ini mem%uat teori"teori yang %erhu%ungan dengan kegiatan penelitian
dalam peran'angan mem%uat system informasi /e%site! meliputi konsep
dasar system! komponen dan elemen system informasi!flo/'hart!
pengertian data%ase! pengertian /e%! unsur"unsur dalam pem%uatan /e%
dan lain se%againya&
)A) III P*<SES DA# PE*A#>A#1A# E)
)a% ini menguraikan tentang gam%aran ran'angan /e%site yang akan
di%uat dan alur"alur dalam peran'angan sistem informasi /e%site&
)A) I? KESIMPU$A# DA# SA*A#
Dalam )A) I? ini %erisi kesimpulan dari keseluruhan laporan semester
dan saran"saran yang dapat dijadikan %ahan masukan yang %erarti %agi
SMP untuk pengem%angan sistem %erikutnya&
4
BAB II
LANDASAN TEORI
.&1& Konsep Dasar
.&1&1& Konsep Dasar Sistem
Suatu sistem pada dasarnya adalah sekolompok unsur yang erat hu%ungannya
satu dengan yang lain! yang %erfungsi %ersama"sama untuk men'apai tujuan
tertentu& Se'ara sederhana! suatu sistem dapat diartikan se%agai suatu
kumpulan atau himpunan dari unsur! komponen! atau :aria%el yang
terorganisir! saling %erinteraksi! saling tergantung satu sama lain! dan terpadu&
Dari defenisi ini dapat dirin'i le%ih lanjut pengertian sistem se'ara
umum!yaitu(
1& Setiap sistem terdiri dari unsure"unsur
.& Unsur"unsur terse%ut merupakan %agian terpadu sistem yang %ersangkutan&
0& Unsur sistem terse%ut %ekerja sama untuk men'apai tujuan sistem&
3& Suatu sistem merupakan %agian dari sistem lain yang le%ih %esar&
.&1&.& Konsep Dasar Informasi
Se'ara umum informasi dapat didefinisikan se%agai hasil dari pengolahan
data dalam suatu %entuk yang le%ih %erguna dan le%ih %erarti %agi
penerimanya yang menggam%arkan suatu kejadian"kejadian yang nyata yang
5
digunakan untuk pengam%ilan keputusan& Informasi merupakan data yang
telah diklasifikasikan atau diolah atau diinterpretasi untuk digunakan dalam
proses penga%ilan keputusan&
.&1&0& Konsep Dasar Sistem Informasi
Sistem informasi adalah suatu sistem dalam suatu organisasi yang
mempertemukan
ke%utuhan pengolahan transaksi harian yang mendukung fungsi operasi
organisasi yang %ersifat manajerial dengan kegiatan strategi dari suatu
organisasi untuk dapat menyediakan kepada pihak luar tertentu dengan
informasi yang diperlukan untuk pengam%ilan keputusan&
Sistem informasi dalam suatu organisasi dapat dikatakan se%agai suatu sistem
yang menyediakan informasi %agi semua tingkatan dalam organisasi terse%ut
kapan saja diperlukan& Sistem ini menyimpan! mengam%il! mengu%ah!
mengolah dan mengkomunikasikan informasi yang diterima dengan
menggunakan sistem informasi atau peralatan sistem lainnya&
.&.& Komponen dan Elemen Sistem Informasi
.&.&1& Komponen Sistem Informasi
Sistem informasi terdiri dari komponen"komponen yang dise%ut %lok
%angunan @%uilding %lokA! yang terdiri dari komponen input! komponen
model! komponen output! komponen teknologi! komponen hard/are!
komponen soft/are! komponen %asis data! dan komponen kontrol& Semua
komponen terse%ut saling %erinteraksi satu dengan yang lain mem%entuk
suatu kesatuan untuk men'apai sasaran&
1 Komponen input
Input me/akili data yang masuk kedalam sistem informasi& Input disini
termasuk metode dan media untuk menangkap data yang akan
dimasukkan! yang dapat %erupa dokumen"dokumen dasar&
.& Komponen model
Komponen ini terdiri dari kom%inasi prosedur! logika! dan model
matematik yang akan memanipulasi data input dan data yang tersimpan di
;
%asis data dengan 'ara yang sudah ditentukan untuk menghasilkan
keluaran yang diinginkan&
0& Komponen output
+asil dari sistem informasi adalah keluaran yang merupakan informasi
yang %erkualitas dan dokumentasi yang %erguna untuk semua pemakai
sistem&
3 Komponen teknologi
Teknologi merupakan Btool %oCD dalam sistem informasi! Teknologi
digunakan untuk menerima input! menjalankan model! menyimpan dan
mengakses data! meghasilkan dan mengirimkan keluaran! dan mem%antu
pengendalian dari sistem se'ara keseluruhan&
6& Komponen hard/are
+ard/are %erperan penting se%agai suatu media penyimpanan :ital %agi
sistem informasi& ,ang %erfungsi se%agai tempat untuk menampung
data%ase atau le%ih mudah dikatakan se%agai sum%er data dan informasi
untuk memperlan'ar dan mempermudah kerja dari sistem informasi&
4& Komponen soft/are
Soft/are %erfungsi se%agai tempat untuk mengolah!menghitung dan
memanipulasi data yang diam%il dari hard/are untuk men'iptakan suatu
informasi&
5& Komponen %asis data
)asis data @data%aseA merupakan kumpulan data yang saling %erkaitan dan
%erhu%ungan satu dengan yang lain! tersimpan di pernagkat keras
komputer dan menggunakan perangkat lunak untuk memanipulasinya&
Data perlu disimpan dalam %asis data untuk keperluan penyediaan
informasi le%ih lanjut& Data di dalam %asis data perlu diorganisasikan
sedemikian rupa supaya informasi yang dihasilkan %erkualitas& <rganisasi
%asis data yang %aik juga %erguna untuk efisiensi kapasitas
penyimpanannya& )asis data diakses atau dimanipulasi menggunakan
perangkat lunak paket yang dise%ut D)MS @Data%ase Management
SystemA&
7
;& Komponen kontrol
)anyak hal yang dapat merusak sistem informasi! seperti %en'ana alam!
api! temperatur! air! de%u! ke'uranganke'urangan! kegagalan"kegagalan
sistem itu sendiri! ketidak efisienan! sa%otase dan lain se%againya&
)e%erapa pengendalian perlu diran'ang dan diterapkan untuk meyakinkan
%ah/a hal"hal yang dapat merusak sistem dapat di'egah ataupun %ila
terlanjur terjadi kesalahankesalahan dapat langsung 'epat diatasi&
.&.&.& Elemen Sistem Informasi
Sistem informasi terdiri dari elemen"elemen yang terdiri dari orang! prosedur!
perangkat keras! perangkat lunak! %asis data! jaringan komputer dan
komunikasi data& Semua elemen ini merupakan komponen fisik&
1& <rang
<rang atau personil yang di maksudkan yaitu operator komputer! analis
sistem! programmer! personil data entry! dan manajer sistem
informasiEEDP
.& Prosedur
Prosedur merupakan elemen fisik& +al ini di se%a%kan karena prosedur
disediakan dalam %entuk fisik seperti %uku panduan dan instruksi& Ada 0
jenis prosedur yang di%utuhkan! yaitu instruksi untuk pemakai! instruksi
untuk penyiapan masukan! instruksi pengoperasian untuk karya/an pusat
komputer&
0& Perangkat keras
Perangkat keras %agi suatu sistem informasi terdiri atas komputer @pusat
pengolah! unit masukanEkeluaranA! peralatan penyiapan data! dan terminal
masukanEkeluaran&
3& Perangkat lunak
Perangkat lunak dapat di%agi dalam 0 jenis utama (
a& Sistem perangkat lunak umum! seperti sistem pengoperasian dan system
manajemen data yang memungkinkan pengoperasian sistem komputer&
%& Aplikasi perangkat lunak umum! seperti model analisis dan keputusan&
12
'& Aplikasi pernagkat lunak yang terdiri atas program yang se'ara spesifik
di%uat untuk setiap aplikasi&
6& )asis data
-ile yang %erisi program dan data di%uktikan dengan adanya media
penyimpanan se'arafisik seperti diskette! hard disk! magneti' tape! dan
se%againya& -ile juga meliputi keluaran ter'etak dan 'atatan lain diatas
kertas! mikro film! an lain se%againya&
4& =aringan komputer
=aringan komputer adalah se%uah kumpulan komputer! printer dan
peralatan lainnya yang terhu%ung dalam satu kesatuan& Informasi dan data
%ergerak melalui ka%elka%el atau tanpa ka%el sehingga memungkinkan
pengguna jaringan komputer dapat saling %ertukar dokumen dan data&
5& Komunikasi data
Komunikasi data adalah merupakan %agian dari telekomunikasi yang
se'ara khusus %erkenaan dengan transmisi atau pemindahan data dan
informasi diantara 'omputer"komputer dan pirantipiranti yang lain dalam
%entuk digital yang dikirimkan melalui media komunikasi data& Data
%erarti informasi yang disajikan oleh isyarat digital& Komunikasi data
merupakan %agian :ital dari suatu sistem informasi karena sistem ini
menyediakan infrastruktur yang memungkinkan komputer"komputer dapat
%erkomunikasi satu sama lain&
.&0& Data -lo/ Diagram
Pengertian D-D Data -lo/ Diagram atau D-D merupakan gam%aran suatu sistem
yang telah ada atau sistem %aru yang dikem%angkan se'ara logika tanpa
mempertim%angkan lingkungan fisik dimana data terse%ut mengalir& Dengan adanya
Data -lo/ Diagram maka pemakai sistem yang kurang memahami di%idang
komputer dapat mengerti sistem yang sedang %erjalan& Ada %e%erapa pengertian Data
-lo/ Diagram atau D-D menurut para ahli! antara lain (
1& Pengertian Data -lo/ Diagram @D-DA Menurut ikipedia&
Suatu diagram yang menggunakan notasi"notasi untuk menggam%arkan arus dari
data sistem! yang penggunaannya sangat mem%antu untuk memahami sistem
11
se'ara logika! tersruktur dan jelas& D-D merupakan alat %antu dalam
menggam%arkan atau menjelaskan sistem yang sedang %erjalan logis
.& Pengertian Data -lo/ Diagram @D-DA Menurut ijaya @.225A
1am%aran grafis yang memperlihatkan aliran data dari sum%ernya dalam o%yek
kemudian mele/ati suatu proses yang mentransformasikan ke tujuan yang lain!
yang ada pada o%jek lain&
0& Pengertian Data -lo/ Diagram @D-DA Menurut Kristanto! .220
Suatu model logika data atau proses yang di%uat untuk menggam%arkan dari mana
asal data dan kemana tujuan data yang keluaran dari sistem! dimana data di
simpan! proses apa yang menghasilkan data terse%ut! dan interaksi antara data
yang tersimpan dan proses yang dikenakan pada data terse%ut
3& Pengertian Data -lo/ Diagram @D-DA Menurut =ogiyanto +artono! .226"521
Diagram yang menggunakan notasi sim%ol untuk menggam%arkan arus data
system&
Ada %e%erapa sym%ol"sim%ol yang digunakan dalam pem%uatan Data -lo/ Diagram&
Ta%el .&1 Sim%ol Data -lo/ Diagram
No Si-2ol Fun3si
1&
ECternal Entity @Kesatuan $uarA %oundary @%atas
sistemA& Kesatuan luar merupakan kesatuan @entityA!
dilingkungan luar sistem yang dapat %erupa orang!
organisasi atau system lainnya yang %erada
dilingkungan luarnya yang akan mem%erikan input
atau output dari sistem& Kesatuan luar dapat
disim%olkan dengan suatu notasi kotak dengan sisi
kiri dan atasnya %er%entuk garis te%al&
.&
Data -lo/ @arus dataA! yaitu merupakan arus data
di%eri sym%ol suatu panah& Arus data ini mengalir
diantara proses! simpan data dan kesatuan luar& Arus
data menunjukan arus data dari data yang %erupa
masukan untuk system atau hasil dari proses system&
1.
0&
Proses adalah kegiatan atau kerja yang dilakukan
oleh orang! mesin atau 'omputer dari hasil suatu
arus data yang masuk ke dalam proses untuk
dihasilkan arus data yang akan keluar dari proses&
Proses disim%olkan dengan lingkaran atau empat
persegi panjang tegak dengan sudut"sudut tumpul&
3&
#ama store
Data store @simpan dataA adalah merupakan
simpanan dari data yang dapat %erupa suatu file!
data%ase dan lain"lain& Simpanan data disim%olkan
dengan sepasang garis horiFontal pararel yang
tertutup disalah satu ujungnya&
.&3 Pengertian Data%ase
Data%ase adalah kumpulan dari data"data yang mem%entuk suatu %erkas @fileA yang
saling %erhu%ungan @relationA& Data%ase adalah tempat penyimpanan se%uah data
yang %erupa informasi& Data%ase sangat %erpengaruh penting terhadap penyimpanan
se%uah aplikasi tertentu! jadi so%at no:tani mungkin se%agian sudah pernah
mendengar atau sudah memakainya untuk pem%uatan aplikasi dan se%againya&
)erikut ini ada %ahasan mengenai teori dan %er%agai ma'am data%ase
.&3&1 Data )ase Management System @ D)MS A(
D)MS merupakan soft/are !firm/are dan hard/are yang di'iptakan untuk
melindungi dan manajemen data %ase& D)MS dilengkapi dengan %er%agai
%ahasa generasi 3 atau %ahasa tingkat tinggi yang dapat di pahami oleh seorang
programmer& -ungsi dari D)MS yaitu se%agai %erikut (
1& Definisi data dan hu%ungannya
.& Manipulasi data
0& Keamanan dan integritas data
3& Se'urity dan integritas data
6& *e'o:eryEper%aikan dan 'on'urren'y data
10
Media
4& Data di'tionary
5& Unjuk kerja E performan'e
.&6 -lo/'hart
.&6&1 Pengertian -lo/'hart
-lo/'hart merupakan gam%ar atau %agan yang memperlihatkan urutan dan
hu%ungan antar proses %eserta instruksinya& 1am%aran ini dinyatakan dengan
sim%ol& Dengan demikian setiap sim%ol menggam%arkan proses tertentu&
Sedangkan hu%ungan antar proses digam%arkan dengan garis penghu%ung&
-lo/'hart ini merupakan langkah a/al pem%uatan program& Dengan adanya
flo/'hart urutan poses kegiatan menjadi le%ih jelas& =ika ada penam%ahan
proses maka dapat dilakukan le%ih mudah& Setelah flo/'hart selesai disusun!
selanjutnya pemrogram @programmerA menerjemahkannya ke %entuk program
dengan %ahsa pemrograman&
.&6&. Sim%ol"sim%ol flo/'hart
-lo/'hart disusun dengan sim%ol"sim%ol& Sim%ol ini dipakai se%agai alat %antu
menggam%arkan proses di dalam program& )erikut ini gam%ar %e%erapa
sim%ol"sim%ol flo/'hart&
13
1am%ar .&1 Sim%ol 8 Sim%ol -lo/'hart
.&6&0 Kaidah"kaidah pem%uatan -lo/'hart
Dalam pem%uatan flo/'hart tidak ada rumus atau patokan yang %ersifat
mutlak& Karena flo/'hart merupakan gam%aran hasil pemikiran dalam
menganalisa suatu masalah dengan komputer& Sehingga flo/'hart yang
dihasilkan dapat %er:ariasi antara satu pemrogram dengan pemrogram lainnya&
#amun se'ara garis %esar! setiap pengolahan selalu terdiri dari tiga %agian
utama!yaituG
1& Input %erupa %ahan mentah
.& Proses pengolahan
0& <utput %erupa %ahan jadi&
Untuk pengolahan data dengan komputer! dapat dirangkum urutan dasar untuk
peme'ahan suatu masalah! yaituG
1& STA*T( %erisi instruksi untuk persiapan perlatan yang diperlukan se%elum
menangani peme'ahan masalah&
.& *EAD( %erisi instruksi untuk mem%a'a data dari suatu peralatan input&
16
0& P*<>ESS( %erisi kegiatan yang %erkaitan dengan peme'ahan persoalan
sesuai dengan data yang di%a'a&
3& *ITE( %erisi instruksi untuk merekam hasil kegiatan ke perlatan output&
6& E#D( mengakhiri kegiatan pengolahan
.&4 Pengertian e%site
.&4&1 Definisi e%site atau disingkat adalah sekumpulanhalaman yang terdiri dari
%e%erapa laman yang %erisi informasi dalam %entuk digital %aik itu teks!
gam%ar! animasi yang disediakan melalui jalur internet sehingga dapat diakses
dari seluruh dunia& Pada dasarnya /e%site di%agi menjadi dua %agian! yaitu(
1& e%site Statis! yaitu merupakan /e% yang halamannya tidak %eru%ah!
%iasanya untuk melakukan peru%ahan se'ara manual dengan meru%ah kode
oleh pemiliknya& Dengan salah satu 'ontohnya yaitu profil perusahaan
.& e%site Dinamis! yaitu merupakan /e% yang halamannya selalu update!
%iasanya terdapat halaman %a'kend @halaman administratorA yang digunakan
untuk menam%ah atau mengu%ah konten& e% dinamis mem%utuhkan data%ase
untuk menyimpan& e%site dinamis mempunyai arus informasi dua arah! yakni
%erasal dari pengguna dan pemilik! sehingga pengupdate"an dapat dilakukan
oleh pengguna dan juga pemilik /esite& >ontoh dari /e%site dinamis ini adalah
-a'e%ook! T/itter dan masih %anyak lagi&
.&4&. Unsur e%site
Adapun %e%erapa unsur /e%site se%agai %erikut(
1& #ama Domain
#ama domain adalah alamat unik di dunia maya atau internet yan %erguna
untuk menemukan se%uah /e%site umumnya URL ini diperjual %elikan
dengan system se/a tahunan! dan %iasanya di %elakang URL ini
mempunyai akhiran sesuai dengan lokasi dari kepentingan atas di%uatnya
/e%site terse%ut&
.& e%site +osting
e%site +osting atau dise%ut juga rumah tempat /e%site merupakan
ruangan yang terdapat dalam hardisk se%agai tempat penyimpanan data! file
14
:ideo! email! data%ase dan lain yang nantinya akan ditampilkan dalam
/e%site terse%ut
0& )ahasa Program
Merupakan %ahasa yang digunakan untuk menterjemahkan setiap perintah
pada saat /e%site terse%ut sedang dijalankan& >ontohnya XML, JSP,
HTML, PHP.
3& Design e%site
Merupakan hal yang penting faktor kenyamanan pengunjung harus
diterapkan jika anda mau mem%uat /e%site yang menarik agar pengunjung
mudah dalam penggunaannya sehingga akan terus mengunjungi /e%site
anda
6& Program Transfer Data ke Pusat Data
FTP merupakan akses yang di%erikan pada saat kita memesan /e% hosting
FTP %erguna untuk memindahkan file 8 file /e%site yang ada pada
komputer kita ke pusat /e% hosting agar dapat terakses ke seluruh dunia&

BAB III
PROSES DAN PERANCANGAN WEB
0&1 Proses Aplikasi
15
e% sekolah ini diperuntukkan %agi para user yang ingin mengetahui tentang
informasi sekolah SMP& Informasi yang dapat diperoleh para user adalah nilai
online! data sis/a! profil sekolah! profil pengajar! :isi dan misi sekolah! kegiatan
yang ada disekolah terse%ut! %erita ter%aru& Untuk nilai online hanya diperuntukkan
%agi para sis/a yang terdaftar di sekolah terse%ut& Dengan memasukkan no induk
dari sis/a terse%ut& Adapun proses dari sekolah terse%ut dapat dilihat dalam diagram
konteks dan diagram E"* di%a/ah ini
0&. 1am%ar Diagram
0&.&1 Diagram Konteks
Diagram konteks adalah se%uah gam%aran yang sangat umum mengenai
se%uah sistem dimana sistem terse%ut digam%arkan se%agai proses tunggal&
Gambar.3.1 Diagram Konteks
0&.&. Data -lo/ Diagram
1;
Data Info Pem%&
Data Info Sis/a
Sistem
Informasi
e%site
Sekolah
1uru
Sis/a
Data Info Profil
Data Info
Sis/a
Data Info 1uru
Admin
DataInfoPrfil
Data Info 1uru
Data Info Sis/a
Input Data Sis/a
Input Data 1uru
Input Data Profil
Data Info 1uru
Input Data Info Pem%&
Data Info Pem%&
Data Info Profil
Data -lo/ Diagram dapat juga disingkat dengan D-D yang digunakan untuk
menggam%arkan suatu sistem yang telah ada atau sistem akan dikem%angkan
D-D merupakan representasi grafik dari suatu sistem menunjukkan proses atau
fungsi aliran data tempat penyimpanan data dan entitas eksternal& Dari diagram
konteks diatas dapat di%uat suatu D-D& Admin se%elum masuk ke menu harus
melakukan login terle%ih dahulu&
1& D-D @Data -lo/ DiagramA
1am%ar 0&.& D-D $e:el 2
1&0& Peran'angan Data )ase
0&0&1& E*D @Entity *elationship DiagramA
17
1&2
Sistem
Pengolahan
Data
.&2
Pengolahan
Informasi
e%site
1uru
1uru
Sis/a
Sis/a
In4u, D0,0 Sis50
In4u, D0,0 Gu/u
In4u, P0ss5o/6
Admin
Admin
T02el In.o
Pe-2070/0n
T02el Gu/u
T02el Sis50
In4u, P0ss5o/6
In.o D0,0 Gu/u
In4u, P0ss5o/6
In.o D0,0 Gu/u
In4u, D0,0 In.o Pe-2070/0n
In.o D0,0 Sis50
In.o D0,0 Sis50
In.o D0,0 Pe-2070/0n
1am%ar 0&0& 1am%ar E*D
0&0&.& Struktur Ta%el
1& Ta%el Admin
#ama Ta%el ( T%Admin
-ungsi ( Untuk menyimpan data admin
Ta%el 0&1& Struktur Ta%el Admin
#o -ield Type Ukuran Kun'i
1& Kode Admin TeCt 12 Primary key
.& #ama Admin TeCt .2
0& Pass/ord TeCt 6
.& Ta%el 1uru
#ama Ta%el ( T%1uru
-ungsi ( Untuk menyimpan data guru&
Ta%el 0&.& Struktur Ta%el 1uru
#o& -ield Type Ukuran Kun'i
1& Kode 1uru TeCt 12 Primary Key
.& #ama 1uru TeCt .2
0& Alamat TeCt 02
3& TT$ Date
6& =a%atan TeCt 16
4& Mengajar TeCt 16
0& Ta%el Sis/a
#ama Ta%el ( T%Sis/a
-ungsi ( Untuk menyimpan data sis/a&
Ta%el 0&0& Struktur Ta%el Sis/a
#o& -ield Type Ukuran Kun'i
.2
1& #omor Induk
Sis/a
TeCt 12 Primary key
.& #o K/itansi TeCt 12 -oreign Key
0& #ama Sis/a TeCt .2
3& Kelas TeCt 12
6& Alamat TeCt .2
4& TT$ Date
3& Ta%el Informasi Pem%ayaran Sis/a
#ama Ta%el ( T%Info
-ungsi ( Untuk menyimpan data pem%ayaran&
Ta%el 0&3& Struktur Ta%el Info
#o& -ield Type Ukuran Kun'i
1& #omor Induk
Sis/a
TeCt .2 -oreign Key
.& #o K/itansi #um%er Primary Key
0& SPP TeCt 12
3& 1edung TeCt .2
6& $ain"lain TeCt .2
0&0&0& *elasi Ta%el
1am%ar 0&3& *elasi Antar Ta%el
.1
Gu/u
H Kode 1uru
#ama 1uru
Alamat
TT$
=a%atan
Mengajar
Sis50
Sis50
H#o Induk
HH#o K/itansi
#ama Sis/a
Kelas
Alamat
TT$
H#o Induk
HH#o K/itansi
#ama Sis/a
Kelas
Alamat
TT$
In.o
In.o
H H#o Induk
H#o K/itansi
#ama Sis/a
SPP
1edung
$ain"lain
H H#o Induk
H#o K/itansi
#ama Sis/a
SPP
1edung
$ain"lain
Keterangan(
HPrimary Key
HH-oreign Key
Keterangan(
HPrimary Key
HH-oreign Key
Admin
HKode Admin
#ama Admin
Pss/ord
0&3& Analisa Sistem
Masukan pada sistem adalah data yang diterima dan akan diproses oleh
sistem& )erikut ini yang termasuk dalam analisa masukan pada peran'angan sistem
informasi %arang(
0&3&1& $ogin
Setelah masuk ketampilan utama kemudian mengklik menu login
yang %erada di tampilan utama& Tampilan ran'angan dan flo/'hart pada form
login se%agai %erikut(
0&3&1&1& *an'angan -orm $ogin
1am%ar 0&6& Tampilan *an'angan -orm $ogin
0&3&1&.& -lo/'hart $ogin
Untuk mem%uka menu utama! user harus melakukan login terle%ih
dahulu&Dengan 'ara memasukan data login dan apa%ila sudah %enar
masuk ke menu utama&
1am%ar 0&4& -lo/'hart $ogin
..
Profil Data
1uru
Data
Sis/a
Info&Pem%
Mem%er
$ogin
User (
Pass (
Mem%er
$ogin
User (
Pass (
+ome
Ti601
Menu
Utama
Selesai
Masukan
Data $ogin
Data
Sudah
)enar
I
!0
Mulai
0&3&.& +ome
Setelah masuk ketampilan utama kemudian mengklik menu login yang
%erada di tampilan utama& Tampilan ran'angan dan flo/'hart pada form
login se%agai %erikut(
0&3&.&1& *an'angan -orm +ome
1am%ar 0&5& Tampilan *an'angan -orm $ogin
0&3&.&.& -lo/'hart +ome
Untuk mem%uka menu utama! user harus melakukan login
terle%ih dahulu& Dengan 'ara memasukan data login dan apa%ila
sudah %enar masuk ke menu utama&
.0
+<ME
+<ME Profil Data 1uru Data Sis/a Info&Pem%
Mem%er $ogin
User (
Pass (
Selanat Datang e% Site Di
SMP Ke%umen
Profil
?isi
Misi
Ekstrakurik
uler
1am%ar 0&;& -lo/'hart +ome
.3
Mul0i
Lo3in
1&
1&
Ho-e
P/o.il
D0,0 Gu/u
D0,0 Sis50
In.o Pe-2070/0n
.&
.&
0&
0&
3&
3&
6&
6&
Tampilkan
+ome
Tampilkan
+ome
Tampilkan
Profil
Tampilkan
Profil
Tampilkan
Data 1uru
Tampilkan
Data 1uru
Tampilka
n Data
Sis/a
Tampilka
n Data
Sis/a
Tampilkan
Info&Pem%
Tampilkan
Info&Pem%
Lo3Ou,
Seles0i
!0
!0
!0
!0
!0
A
Ti601
Ti601
0&3&0& Profil
0&3&0&1& *an'angan -orm Profil
1am%ar 0&7& Tampilan *an'angan -orm Profil
0&3&0&.& -lo/'hart Profil
1am%ar 0&12& -lo/'hart Profil
0&3&3& Data 1uru
0&3&3&1& *an'angan -orm Data 1uru
1am%ar 0&11& Tampilan *an'angan -orm Data 1uru
0&3&3&.& lo/'hart Data 1uru
.6
+<ME Data 1uru Info&Pem%
Mem%er $ogin
User (
Pass (
Profil
Profil Data Sis/a
Profil
?isi
Misi
Ekstra
Kuriku
ler
)erita
Sejarah SMP Ke%umen
Struktur <rganisasi
+<ME Data 1uru
Data 1uru Info&Pem%
Mem%er $ogin
User (
Pass (
Profil Data Sis/a
Data 1uru SMP Ke%umen
N0-0 Al0-0, TTL 8020,0n Men3090/
Profil
?isi
Misi
Ekstra
Kuriku
ler
)erita
!0
Ti601
Selesai
Mulai
Tampilkan
Data 1uru
If
1ur
u
Menu Data 1uru
Mulai
Menu Profil
Tampilkan
Profil
If
Profi
l
Selesai
Ti601
!0
1am%ar 0&1.& -lo/'hart Data 1uru
0&3&6& Data Sis/a
0&3&6&1& *an'angan -orm Data Sis/a
1am%ar 0&10& Tampilan *an'angan -orm Data Sis/a
0&3&6&.& -lo/'hart Data Sis/a
1am%ar 0&13& -lo/'hart Data Sis/a
0&3&4& Info Pem%ayaran Sis/a
0&3&4&1& *an'angan -orm Info Pem%ayaran Sis/a
1am%ar 0&16& Tampilan *an'angan -orm Info Pem%ayaran Sis/a
0&3&4&.& -lo/'hart Info Pem%ayaran Sis/a
.4
+<ME Profil Data 1uru
Data Sis/a
Data Sis/a Info&Pem%
Mem%er $ogin
User (
Pass (
Profil
?isi
Misi
Ekstrakur
ikuler
)erita
N0-0 :
Kel0s :
N0-0 Kel0s Al0-0, TTL
Mulai
Tampilkan Data
Sis/a
Masukan
Data Sis/a
Data
Sudah
)enar
Menu Data
Sis/a
Selesai
!0
Ti601
Mulai
Masukan
Data Sis/a
Ti601
Tampilkan Info
Pem%ayaran
+<ME Profil Data 1uru Data Sis/a Info&Pem%
Mem%er
$ogin
User (
Pass (
Profil
?isi
Misi
Ekstrakuri
kuler
Informasi Pem%ayaran Sis/a
No #ama Kelas SPP Praktikum $ain"lain
#ama (
Kelas (
1am%ar 0&14& -lo/'hart Info Pem%ayaran Sis/a
.5
Data
Sudah
)enarI
Menu Info Pem%&
Selesai
!0