PEMBANGUNAN WEBSITE SEBAGAI MEDIA INFORMASI
DAN PROMOSI DI YAYASAN PENDIDIKAN ISLAM
AL-MUKHTARIYAH RAJAMANDALA
KERJA PRAKTEKDiajukan untuk Memenuhi Tugas Mata Kuliah Kerja Praktek
Program Strata Satu Jurusan Teknik Informatika Fakultas Teknik dan Ilmu Komputer
Universitas Komputer Indonesia
FAKHRY AZHARI M
10109666
YUDHA HERMANA P
10109657
JURUSAN TEKNIK INFORMATIKA
FAKULTAS TEKNIK DAN ILMU KOMPUTER
UNIVERSITAS KOMPUTER INDONESIA
BANDUNG
DAFTAR RIWAYAT HIDUP
DATA DIRINama : Fakhry Azhari Mukhtar
Jenis Kelamin : Laki-laki
Tempat/Tgl. lahir : Bandung / 12 Desember 1990
Agama : Islam
Status : Belum Menikah
Alamat : Kp. Kaum RT 01 / RW 11 Desa Mandalasari Kecamatan Cipatat
Kabupaten Bandung Barat 40554
Telpon : 085721895099
E-Mail : [email protected]
DATA PENDIDIKAN FORMAL
1997-2003 : SDN Rajamandala Kulon I
2003-2006 : Madrasah Tsanawiyah Al-Mukhtariyah Rajamandala
2006-2009 : Madrasah Aliyah Yayasan Islam Rajamandala
DAFTAR RIWAYAT HIDUP
DATA DIRINama : Yudha Hermana Pamungkas
Jenis Kelamin : Laki-laki
Tempat/Tgl. lahir : Bandung / 15 Maret 1991
Agama : Islam
Status : Belum Menikah
Alamat : Gg.laksana v no.225/125A kel.kebon waru kel.batununggal bandung
Telpon : 087823658687
E-Mail : [email protected]
DATA PENDIDIKAN FORMAL
1995-1997 : TK Kartika Chandra Bandung
1997-1998 : SD Muararajen Bandung
1998-2003 : SD Galihpakuan Limbangan
2003-2006 : SMPN 1 Limbangan
2006-2009 : SMAN 13 Garut
x
DAFTAR ISI
LEMBAR JUDUL
LEMBAR PENGESAHAN
KATA PENGATAR ... i
DAFTAR GAMBAR ... iii
DAFTAR TABEL ... v
DAFTAR SIMBOL ... vi
DAFTAR ISI ... x
DAFTAR LAMPIRAN ... xv
BAB I PENDAHULUAN 1.1 Latar Belakang Masalah ... 1
1.2 Rumusan dan Identifikasi Masalah ... 2
1.3 Maksud dan Tujuan ... 2
1.3.1 Maksud ... 2
1.3.2 Tujuan ... 2
1.4 Batasan Masalah ... 2
1.5 Metode Penelitian ... 3
1.5.1 Tahap Pengumpulan Data ... 3
1.5.2 Tahap Pembuatan Perangkat Lunak ... 3
1.6 Kegunaan Kerja Praktek ... 5
1.7 Lokasi dan Waktu Kerja Praktek ... 6
1.8 Sistematika Penulisan ... 6
BAB II TINJAUAN PUSTAKA 2.1 Profil Tempat Kerja Praktek ... 8
xi
2.1.2 Struktur Organisasi ... 8
2.1.3 Logo Instansi ... 9
2.1.4 Visi dan Misi ... 9
2.1.4.1 Visi ... 9
2.1.4.2 Misi ... 9
2.2 Landasan Teori ... 9
2.2.1 Konsep Dasar Sistem ... 9
2.2.2 Sistem Informasi Berbasis Web ... 11
2.2.3 Sistem Komputer untuk Web ... 11
2.2.4 Konsep Basis Data (Database) ... 13
2.2.5 Pengertian Jaringan Komputer ... 13
2.2.6 Web ... 14
2.2.6.1 Sejarah Lahirnya Web ... 14
2.2.6.2 Aplikasi Web ... 15
2.2.6.3 Aplikasi Pendukung Perancangan Web ... 16
2.2.7 HTML ... 16
2.2.8 CSS ... 17
2.2.9 PHP (PHP Hypertext Preprocessor) ... 18
2.2.9.1 Sejarah PHP ... 18
2.2.9.2 Kelebihan PHP ... 19
2.2.10 ERD (Entity Relationship Diagram) ... 20
2.2.11 DFD (Data Flow Diagram) ... 22
2.2.12 Flowmap ... 26
BAB III PEMBAHASAN 3.1 Analisis dan Perancangan ... 28
xii
3.1.2 Analisis Kebutuhan Non Fungsional ... 29
3.1.2.1 Karakteristik Pengguna ... 29
3.1.2.2 Analisis Hardware ... 30
3.1.2.3 Analisis Software ... 30
3.1.3 Analisis Basis Data ... 31
3.1.4 Analisis Kebutuhan Fungsional ... 32
3.1.4.1 Diagram Konteks ... 32
3.1.4.2 Data Flow Diagram (DFD) Level 1 ... 33
3.1.4.3 Data Flow Diagram (DFD) Level 2 Proses 1 (login) ... 34
3.1.4.4 Data Flow Diagram (DFD) Level 2 Proses 2 (pengolahan data) ... 34
3.1.4.5 Data Flow Diagram (DFD) Level 2 Proses 4 (tambah komentar) ... 35
3.1.4.6 Spesifikasi Proses ... 35
3.1.4.7 Kamus Data ... 38
3.1.4.8 Struktur Tabel ... 39
3.1.4.9 Perancangan Pengkodean ... 40
3.1.5 Rancangan Program Aplikasi ... 40
3.1.5.1 Struktur Menu... 40
3.1.5.2 Perancangan Antarmuka... 42
3.1.5.2.1 Perancangan Halaman Utama ... 42
3.1.5.2.2 Perancangan Halaman Baca Artikel ... 43
3.1.5.2.3 Perancangan Halaman SMA / Sederajat ... 44
3.1.5.2.4 Perancangan Halaman MTs / Sederajat ... 45
3.1.5.2.5 Perancangan Halaman MI / Sederajat... 46
3.1.5.2.6 Perancangan Halaman RA Sederajat ... 47
3.1.5.2.7 Perancangan Halaman Profil ... 48
xiii
3.1.5.2.9 Perancangan Halaman Menu Admin ... 49
3.1.5.2.9.1 Perancangan Halaman Utama Menu Admin ... 50
3.1.5.2.9.2 Perancangan Halaman Buat Artikel ... 51
3.1.5.2.9.3 Perancangan Halaman Hapus Artikel ... 52
3.1.5.2.9.4 Perancangan Halaman Edit Artikel ... 53
3.1.5.2.9 Perancangan Halaman Penanganan Kesalahan ... 54
3.1.5.2.9.1 Perancangan Halaman Gagal Login ... 54
3.1.5.2.9.2 Perancangan Halaman Gagal Upload Gambar ... 55
3.1.5.2.9.3 Perancangan Halaman Gagal Update Artikel ... 56
3.1.5.2.9.4 Perancangan Pesan Wajib Isi ... 56
3.2 Jaringan Semantik ... 57
3.3 Implementasi ... 57
3.3.1 Tampilan Halaman Beranda ... 58
3.3.2 Tampilan Halaman SMA/Sederajat ... 59
3.3.3 Tampilan Halaman MTs/Sederajat ... 60
3.3.4 Tampilan Halaman MI/Sederajat ... 61
3.3.5 Tampilan Halaman RA/Sederajat ... 62
3.3.6 Tampilan Halaman Profil ... 63
3.3.7 Tampilan Halaman Galeri ... 64
3.3.8 Tampilan Halaman Baca Artikel ... 65
3.3.9 Tampilan Halaman Menu Admin... 66
3.3.10 Tampilan Halaman Buat Artikel (Admin) ... 67
3.3.11 Tampilan Halaman Hapus Artikel (Admin) ... 68
3.3.12 Tampilan Halaman Edit Artikel (Admin) ... 69
3.3.13Tampilan Halaman Gagal Login ... 70
xiv
3.3.15Tampilan Halaman Gagal Update Artikel ... 72
3.3.16Tampilan Pesan Wajib Isi ... 73
BAB IV KESIMPULAN DAN SARAN
4.1 Kesimpulan ... 74
4.2 Saran ... 74
i
KATA PENGANTAR
Asslamu’alaikum Wr. Wb.
Dengan memanjatkan puji syukur kehadirat Allah SWT, atas rahmat dan
karunia-Nya penulis dapat menyelesaikan laporan kerja praktek ini dengan judul
“PEMBANGUNAN WEBSITE SEBAGAI MEDIA INFORMASI DAN PROMOSI DI YAYASAN PENDIDIKAN ISLAM AL-MUKHTARIYAH RAJAMANDALA”, yang merupakan syarat untuk menyelesaikan Mata Kuliah
Kerja Praktek Jurusan Teknik Informatika Fakultas Teknik dan Ilmu Komputer di
Universitas Komputer Indonesia.
Selama pelaksanaan dan penyusunan laporan Kerja Praktek ini banyak
menemui hambatan dan kesulitan. Namun berkat dorongan, bantuan dan
bimbingan baik secara moril ataupun material dari berbagai pihak penulis dapat
mengatasinya. Untuk itu penulis ingin mengucapkan terima kasih kepada :
1. Allah SWT yang telah memberikan rahmat dan hidayah-Nya kepada
penulis sehingga penulis dapat menyelesaikan laporan ini.
2. Kedua Orang Tua kami yang tak ternilai jasanya .
3. Bapak Dr. H. Denny Kurniadie, Ir., M.Sc., selaku dekan Fakultas Teknik
dan Komputer.
4. Bapak Irawan Afrianto, S.T., M.T., selaku Ketua Jurusan Teknik
Informatika.
5. Bapak Alif Finandhita, S.Kom. selaku dosen wali kelas IF-15 sekaligus
sebagai dosen pembimbing penulis unuk menyelesaikan laporan ini.
6. Bapak Drs. H.A.Hanafiah M.Mpd., selaku Kepala Yayasan Pendidikan
Islam Rajamandala yang telah memberikan kami ijin melakukan kerja
ii 7. Bapak Didin Ridwan S.Pd.I selaku pembimbing kami melakukan kerja
praktek.
8. Semua pihak yang terlibat yang telah ikut membantu dalam penulisan
laporan ini baik secara langsung maupun tidak langsung.
Penulis menyadari dengan sepenuhnya bahwa dalam penyusunan laporan
ini masih jauh dari kata sempurna. Hal ini mengingat keterbatasan pengetahuan,
pengalaman dan kemampuan dalam mengolah serta menyajikannya. Namun
demikian, penulis telah berusaha untuk menyusun laporan kerja praktek ini
dengan sebaik-baiknya dan penulis berharap semoga laporan ini dapat bermanfaat
bagi pembaca dan perkembangan ilmu komputer, khususnya bagi penulis sendiri.
Demikian besar harapan kami agar hal yang kecil ini dapat bermanfaat bagi
lingkungan pendidikan, khususnya di lingkungan Universitas Komputer Indonesia
dan masyarakat pada umumnya.
Akhirnya penulis mengucapkan syukur alhamdullilah kehadirat Illahirobi
yang tiada hentinya atas selesainya proses penulisan laporan Kerja Praktek ini.
Kami mengharapkan kritik yang membangun guna perbaikan diwaktu yang akan
datang. Semoga Laporan Kerja Praktek ini berguna bagi semua pihak.
Wassalamu’alaikum Wr. Wb.
Bandung, Oktober 2012
75
DAFTAR PUSTAKA
[1] Pressman, Roger.S. "Software Engineering : A Practioner's Approach." 4th .
McGrawHill. 1997.
[2] Jogiyanto, H. M., Analisis dan Desain Sistem Informasi Pendekatan
Terstruktur Teori dan Praktek Aplikasi Bisnis, Andi Offset, Jakarta, 1989.
[3] Kristanto, A. (2008). Perancangan Sistem Informasi dan Aplikasinya.
Yogyakarta: Gava Media.
[4] Riyanto, Indelarko, Prilnali (2006), Pengembangan Aplikasi Sistem Informasi
Berbasis Dekstop dan Web, Yogyakarta.
[5] Leman. (1998) Metodologi Pengembangan Sistem Informasi. PT Elex Media Komputindo, Jakarta
[6] Kadir, A. (2008). Dasar Pemrograman Web Dinamis Menggunakan PHP. Yogyakarta : ANDI.
[7] Abdul Kadir. (2000), Konsep dan Tuntunan Praktis Basis Data, Yogyakarta:
1
BAB I
PENDAHULUAN
1.1Latar Belakang Masalah
Yayasan Pendidikan Islam Al-Mukhtariyah Rajamandala adalah sebuah
instansi pendidikan yang terdiri dari berbagai tingkatan pendidikan mulai dari
RA sampai MA (Sederajat TK sampai SMA). Yayasan ini beralamat di Jalan
Stasiun Rajamandala no.1 Desa Mandalasari Kecamatan Cipatat Bandung
Barat. Dalam perkembangannya, yayasan ini hanya di dukung dari cerita
masyarakat mulut ke mulut. Kurangnya media promosi untuk menyampaikan
visi misi serta prestasi yang telah diraih menjadikan instansi ini lebih kurang
populer dibandingkan sekolah-sekolah lain. Padahal kualitas dan sarana
pendidikan tidak kalah baik dari sekolah yang lain.
Informasi yang kurang menyebabkan yayasan ini kurang populer. Apabila
ada orang yang ingin mencari informasi tentang yayasan ini juga akan
mengalami kesulitan karena tidak adanya media informasi yang praktis dan
bisa di akses kapan dan dimana saja. Informasi hanya bisa diperoleh dengan
mendatangi kantor yayasan. Tentu hal ini akan sangat merepotkan dan
menghabiskan waktu dan tenaga, apalagi kalau jarak orang itu dan kantor
pusat yayasan sangat jauh.
Beranjak dari masalah-masalah tersebut maka perlu dibangun sebuah
media informasi yang praktis berupa website yayasan untuk memudahkan
yayasan menyampaikan visi misi serta menjadi media promosi. Selain itu juga
akan memudahkan bagi siapa saja orang mencari informasi tentang yayasan
2
1.2Rumusan dan Identifikasi Masalah
Berdasarkan latar belakang yang sudah di jelaskan maka rumusan
masalahnya adalah bagaimana membangun website sebagai media informasi
dan promosi untuk YPI Al-Mukhtariyah Rajamandala.
Identifikasi masalah berdasarkan latar belakang tersebut diantaranya :
1. Belum tersedianya media informasi yang fleksibel.
2. Kurangnya media promosi untuk menarik calon siswa.
3. Sulitnya mendapatkan informasi dari yayasan.
1.3 Maksud dan Tujuan 1.3.1 Maksud
Berdasarkan dari masalah yang ada tersebut maka kami bermaksud untuk
membuat sebuah media informasi berbasis web berupa website yayasan.
1.3.2 Tujuan
Tujuan dari pembuatan website ini diantaranya :
1. Yayasan memiliki media informasi berbasis web yang fleksibel.
2. Sebagai media promosi.
3. Memudahkan masyarakat luas mengetahui informasi dari yayasan
tersebut.
1.4 Batasan Masalah
Batasan masalah dari pembuatan website ini diantaranya :
1. Website yang dibangun merupakan website dinamis.
2. Pengelolaan website hanya bisa dilakukan oleh admin yang sudah login
sebelumnya.
3. Inputan yang bisa dilakukan admin adalah tambah artikel dan tambah
3 4. Proses yang bisa dilakukan admin adalah tambah artikel, edit artikel,
hapus artikel, dan tambah komentar, sedangkan proses pengunjung hanya
tambah komentar saja.
5. Outputnya berupa artikel dan informasi seputar yayasan.
6. Pengguna dari website ini adalah para calon siswa dan siswa dari yayasan
ini sendiri khususnya dan masyarakat luas pada umumnya.
7. Website dibangun dengan menggunakan bahasa pemrograman PHP,
Javascript, dan editor menggunakan Macromedia Dremweaver 8.
1.5 Metode Penelitian
1.5.1 Tahap Pengumpulan Data
Metode pengumpulan data yang digunakan dalam penelitian ini adalah
sebagai berikut :
a. Studi pustaka
Pengumpulan data dengan cara mengumpulkan literatur, jurnal, paper
dan bacaan-bacaan yang ada kaitannya dengan judul penelitian.
b. Observasi
Teknik pengumpulan data dengan mengadakan penelitian dan
peninjauan langsung terhadap permasalahan yang diambil.
c. Wawancara (Interview)
Teknik pengumpulan data dengan mengadakan tanya jawab secara
langsung yang ada kaitannya dengan topik yang diambil.
1.5.2 Tahap Pembuatan Perangkat Lunak (Website)
Teknik analisis data dalam pembuatan website menggunakan paradigma
perangkat lunak secara waterfall, yang menurut Pressman[1] meliputi
beberapa proses diantaranya:
4 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.
b. 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.
c. 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.
d. Coding
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.
5 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.
f. 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.
Gambar model waterfall dapat dilihat pada gambar 1.1 dibawah ini :
Gambar 1.1 Model Waterfall Pressman[1]
1.6 Kegunaan Kerja Praktek
Hasil Kerja Praktek ini diharapkan dapat memberikan kegunaan sebagai
berikut:
6 Kerja praktek ini merupakan suatu kesempatan yang sangat berharga bagi
penulis untuk menambah wawasan dan pengetahuan penulis tentang dunia
kerja terutama dibidang pendidikan.
2. Bagi Instansi
Hasil kerja praktek ini semoga dapat menjadi media informasi dan promosi
bagi YPI Al-Mukhtariyah Rajamandala.
3. Bagi Akademis
Diharapkan hasil laporan kerja praktek ini dapat menambah pengetahuan
bagi akademi dan rekan-rekan mahasiswa Universitas Komputer
Indonesia.
4. Bagi Pihak Lain
Diharapkan dapat bermanfaat bagi masyarakat luas sebagai media
informasi.
1.7 Lokasi dan Waktu Kerja Praktek
Penulis melakukan Kerja Praktek di YPI AL-Mukhtariyah Rajamandala yang
beralamat di Jl. Stasiun Rajamandala No.1 Desa Mandalasari Kecamatan Cipatat
Bandung Barat. Adapun waktu yang digunakan untuk pelaksanaan kerja praktek
ini adalah selama 1 bulan, dimulai dari tanggal 16 Juli 2012 sampai dengan 16
Agustus 2012 dengan jam kerja hari Senin sampai dengan hari Sabtu pukul 07.00
– 15.00 WIB.
1.8 Sistematika Penulisan
Laporan kerja praktek ini terbagi dalam 4 (empat) bab, uraian singkat
mengenai masing-masing bab adalah sebagai berikut :
BAB I PENDAHULUAN
Dalam bab ini dibahas mengenai latar belakang pembuatan laporan,
7 permasalahan, batasan-batasan dari masalah yang dibahas, metode
perancangan dan sistematika penulisan laporan kerja prakek.
BAB II TINJAUAN PUSTAKA
Merupakan pembahasan tentang tempat kerja praktek mulai dari sejarah
instansi, logo instansi, badan hukum instansi, serta struktur organisasi dan job
description. Selain itu di bab ini dijelaskan pula landasan teori yang
merupakan pembahasan tentang teori-teori yang di gunakan yang relevan
dengan topik laporan kerja praktek, dari mulai teori yang bersifat umum,
khusus, sampai teori tentang perangkat lunak yang mendukung perancangan
dan sistematika penulisan.
BAB III PEMBAHASAN
Berisi uraian tentang analisa masalah, penyelesaian masalah yang di
hadapi, analisa aplikasi, metode kerja termasuk di dalamnya diagram konteks
serta perancangan dan implementasi sistem.
BAB IV KESIMPULAN DAN SARAN
Berisikan kesimpulan mengenai apa saja yang telah di hasilkan dan
8
BAB II
TINJAUAN PUSTAKA
2.1 Profil Tempat Kerja Praktek 2.1.1 Sejarah Instansi
Pada mulanya yang pertama berdiri adalah Madrasah Tsanawiyah (MTs)
Al-Mukhtariyah pada tahun 1975. MTs ini berdiri sendiri tanpa ada badan
hukum. Setelah ada peraturan pemerintah bahwa instansi pendidikan harus
memiliki badan hukum maka didirikanlah Yayasan Al-Mukhtariyah sebagai
badan hukumnya. Yayasan ini dibentuk pada tanggal 16 November 1987 atas
hasil kerjasama para guru dengan Badan Pembantu Penyelenggaraan
Pendidikan (BPPP).
2.1.2 Struktur Organisasi
I. PEMBINA
· Ketua Pembina : DJUHAYA
· Pembina I : AYUB SUPRIATNA, S.Ag.
· Pembina II : Drs. H. ENAN HASAN SYADILI, MBA
· Pembina III : Dr. ACENG SOLAHUDIN AHMAD
II. PENGURUS
· Ketua : Drs. H.A. HANAFIAH, MM
· Wakil Ketua : A.Z. MUTTAQIN, SPd.I.
· Sekretaris : JUHANA, SPd.I.
· Bendahara : ADE SITI JUHRO, S.Ag., MM
III. PENGAWAS
· Pengawas I : ZAINAL ARIFIN
9
2.1.3 Logo Instansi
Gambar 2.1 Logo instansi
2.1.4 Visi dan Misi 2.1.4.1 Visi
Menciptakan Sumberdaya manusia yang tangguh, Cerdas, Kreatif dan
Berakhlakul Karimah.
2.1.4.2 Misi
· Menyelenggarakan pendidikan formal dan non formal.
· Meningkatkan kualitas dan kuantitas sarana dan prasarana
pendidikan.
· Meningkatkan kualitas layanan pendidikan.
· Meningkatkan Keimanan dan Ketakwaan kepada Allah SWT
melalui kegiatan rutin yang bernuansa keagamaan.
2.2 Landasan Teori
2.2.1 Konsep Dasar Sistem
Konsep dasar sistem ini meliputi pengertian dasar dari sistem, bentuk
umum sistem, dan karakteristik sistem.
10 Terdapat dua kelompok pendekatan dalam mendefinisikan sistem menurut
JOG[2], yaitu :
· Pendekatan yang menekankan pada prosedurnya.
Suatu sistem adalah suatu jaringan dari prosedur-prosedur yang
saling berhubungan, berkumpul bersama-sama untuk melakukan
suatu kegiatan atau untuk menyelesaikan suatu sasaran tertentu.
· Pendekatan sistem yang menekankan pada komponennya.
Sistem adalah kumpulan dari elemen-elemen yang berinteraksi
untuk mencapai suatu tujuan tertentu.
b. Bentuk Umum Sistem
Bentuk umum dari suatu sistem terdiri atas masukan (input), proses, dan
keluaran (output). Dalam bentuk umum sistem ini biasa melakukan satu atau
lebih masukan yang akan diproses dan menghasilkan keluaran sesuai dengan
rencana yang telah ditentukan sebelumnya,model sistem sederhana dapat
dilihat pada gambar 2.1.
Gambar 2.2 Sistem Sederhana [2]
c. Karakteristik Sistem
Adapun karakteristik suatu sistem, yaitu :
a. Komponen-komponen (Components)
Suatu sistem terdiri dari sejumlah komponen yang saling berinteraksi,yang
artinya saling bekerjasama untuk membentuk satu kesatuan.
Komponen-komponen sistem atau elemen-elemen system dapat berupa suatu
subsistem atau bagian-bagian dari sistem.
b. Batas Sistem(Boundary)
Batas sistem (Boundary) merupakan daerah yang membatasi antara satu
sistem yang lain atau dengan linkungan luarnya. Batas sistem ini
memungkinkan suatu sistemdipandang sebagai satu kesatuan.
11 c. Lingkungan Luar Sistem(Environment)
Lingkungan luar dari suatu sistem adalah apapun diluar batas dari sistem
yang mempengaruhi operasi sistem.
d. Perhubungan (Interface)
Perhubungan merupakan media penghubung antara satu sub sistem
dengansubsistem lain.
e. Masukan (Input)
Masukan adalah energi yang dinasukkan kedalam sistem.
f. Keluaran (Output)
Keluaran adalah hasil dari energi yang diolah dan diklasifikasikan
menjadikeluaran yang berguna.
g. Pengolahan
Suatu sistem dapat mempunyai suatu bagian pengolahan yang akan
merubah masukan menjadi keluaran.
h. Sasaran (Object)
Suatu sistem pasti mempunyai tujuan atau sasaran-sasaran dari sistem
sangat membutuhkan sekali masukan yang dibutuhkan sistemdan keluaran
yang akan dihasilkan sistem. [3]
2.2.2 Sistem Informasi Berbasis Web
Sistem Informasi web terdiri dari tiga kata yaitu Sistem, Informasi dan
web. Sistem sendiri berarti gabungan dari beberapa sub sistem yang bertujuan
untuk mencapai satu tujuan. Informasi berarti sesuatu yang mudah dipahami
oleh si penerima dan web adalah halaman informasi yang disediakan melalui
jalur internet sehingga bisa diakses di seluruh dunia selama terkoneksi dengan
jaringan internet. Sistem Informasi memiliki makna sistem yang bertujuan
menampilkan informasi. [4]
2.2.3 Sistem Komputer untuk Web
Sistem komputer biasanya terdiri dari perangkat keras (hardware) dan
perangkat lunak (software).
12 Terdiri dari beberapa komponen.
1. Central processing unit (CPU)
CPU menjalankan program komputer dan mengendalikan
operasi seluruh komponen.Biasanya digunakan CPU untuk
komputer pribadi (PC/personal computer), atau work station pada
sebuah jaringan komputer.
2. Memory
Memory Utama: adalah bagian paling esensi pada komputer
seluruh data dan program berada pada memori utama untuk akses
yang lebih cepat. Dibutuhkan setidaknya memori berkapasitas 64
MB untuk SIG berbasis PC.
Memory Tambahan: digunakan data berukuran besar baik
permanen maupun semi-permanen, dengan akses lebih rendah
dibanding memori utama. Dikenal juga sebagai media
penyimpanan data, seperti harddisk, disket (floppy disk), pita
magnetis atau cakram padat optis (CD-ROM).Untuk harddisk
dibutuhkan setidaknya yang berkapasitas 1 GB.
b. Perangkat Lunak
Terdiri atas sistem operasi, compiler dan program aplikasi:
Sistem Operasi (Operating System)
Mengendalikan seluruh operasi program, juga menghubungkan
perangkat keras dengan program aplikasi. Untuk PC : WINDOWS
adalah sistem operasi yang banyak digunakan. Untuk Workstation:
UNIX dan VMS adalah OS yang dominan.
Compiler
Menerjemahkan program yang ditulis dalam bahasa komputer pada
kode mesin sehingga CPU mampu menjalankan program yang harus
dieksekusi. Bahasa kompiler yang biasa digunakan adalah PHP, CMS,
APACHE, MYSQL, dll.
13 Program aplikasi merupakan perangkat lunak siap pakai yang
nantinya akan digunakan untuk membantu melaksanakan pekerjaan
penggunanya.[4]
2.2.4 Konsep Basis Data (Database)
Konsep basis data merupakan hal yang sangat penting. Kesulitan utama
dalam merancang basis data adalah bagaimana merancang sehingga database
dapat memuaskan keperluan saat ini dan masa mendatang. Konsep basis data
langkah untuk menentukan basis data yang diharapkan dapat mewakili
seluruh kebutuhan pengguna. Dalam buku konsep dan perancangan database
mendefinisikan database sebagai berikut :
Menurut KRIS [3] :
Database adalah kumpulan file-file yang mempunyai kaitan antara satu
file dengan file lain sehingga membentuk satu bangunan data untuk
menginformasikan satu perusahaan, instansi dalam batasan tertentu.Basis data
sendiri dapat didefinisikan dalam sejumlah sudut pandang seperti :
a. Himpunan kelompok data (arsip) yang saling berhubungan
yangdiorganisasi sedemikian rupa agar kelak dapat dimanfaatkan
kembalidengan cepat dan mudah.
b. Kumpulan data yang saling berhubungan yang disimpan secara
bersamasedemikian rupa dan tanpa pengulangan (redudansi) yang
tidak perlu, untuk memenuhi berbagai kebutuhan.
c. Kumpulan file/tabel/arsip yang saling berhubungan yang disimpan
dalammedia penyimpanan elektronik.
2.2.5 Pengertian Jaringan Komputer
Jaringan komputer adalah sekumpulan komputer pribadi saling
berhubungan antara satu dengan yang lainnya menggunakan protokol
komunikasi sehingga dapat saling berbagi informasi, program penggunaan
bersama perangkat keras seperti printer, harddisk. Selain itu jaringan
komputer dapat diartikan sebagai kumpulan sejumlah terminal komunikasi
14 saling berhubungan. Dalam sebuah jaringan komputer biasanya terhubung
sejumlah komputer ke sebuah/ beberapa server. Server adalah komputer yang
difungsikan sebagai “pelayanan” pengiriman data dan penerimaan data
diantara komputer-komputer yang tersambung. Tujuan dibangunnya suatu
jaringan komputer adalah membawa informasi secara tepat dan tanpa adanya
kesalahan dari sisi pengirim (transmisi) menuju ke sisi penerima (receiver)
melalui media komunikasi.
TCP/IP (Trasmission Control Protocol/Internet Protocol) merupakan
protokol standard internet yang digunakan untuk melakukan koneksi ke
internet protokol. TCP/IP memiliki beberapa subyek protocol yang berbeda
yang beroperasi pada lapisan yang berbeda dan mempunyai tugas
masing-masing. Berkat adanya protokol ini setiap komputer dapat berhubungan
secara fleksibel dengan host-host yang terkoneksi.
Jenis - jenis Jaringan Komputer
Jenis- jenis jaringan ada dua, yaitu:
a. Model Peer To Peer
Menurut model ini, setiap host dapat menawarkan layanan ke peer
lain dan juga mengambil layanan dari peer lain. Model ini cocok untuk
jaringan kecil.
b. Model Client/Server
Model ini memisahkan secara jelas, mana yang dapat memberikan
layananjaringan (server) dan mana yang hanya memberikan layanan
(client).Beberapa komputer diset-up sebagai server yang memberikan
sumberdaya (resource) dari jaringan : printer, modem, dan saluran lainnya
kepada komputer lain yang dikoneksi kejaringan yang berfungsi sebagai
client. [4]
2.2.6 Web
2.2.6.1 Sejarah Lahirnya Web
Sejarah Web dimulai pada bulan Maret 1989 ketika Tim
15 dengan nama Consei European pour la Recherce Nuclaire (CERN) yang
berada di Genewa, Swiss, mengajukan protokol atau suatu tatacara untuk
berkomunikasi systemdistribusi informasi internet yang digunakan untuk
berbagai informasi diantara para fisikawan. Protokol inilah yang yang
selanjutnya dikenal sebagai protokol World Wide Web (WWW) dan
dikembangkan oleh World Wide Web Consortium (W3C).Dimana W3C
adalah konsorsium dari sejumlah organisasi yang berkepentingan
dalampengembangan berbagai standar yang berkaitan denganWeb.W3C
meletakan gabungan spesifikasi dalam standar web, berikut adalah hasil
dari W3C:
a. Standar web yang paling mendasar adalah HTML, Cascade Style
Sheet (CSS), dan Extended Markup Language (XML)
b. Standar HTML yang terakhir adalah Extended Hypertext
markupLanguage 1.0(XHTML 1.0) [4].
2.2.6.2 Aplikasi Web
Aplikasi web pada awalnya dibangun hanya dengan menggunakan
bahasa yang disebut dengan HTML dan protokol yang digunakan yang
dinamakan HyperText Transfer Protocol (HTTP). Pada perkembangan
berikutnya, sejumlah skrip dan objek dikembangkan untuk memperluas
kemampuan HTML, antara lain yaitu PHP Hypertext Preprocessor
(PHP) dan Active Server Pages (ASP), sedangkan contoh yang berupa
objek antara lain adalah applet (Java). Aplikasi Web sendiri dapat dibagi
menjadi dua, yaitu:
a. Web Statis
b. Web Dinamis
Web statis dibentuk dengan menggunakan HTML saja. Kekurangan
aplikasi seperti ini terletak pada keharusan untuk memelihara program
secara terus-menerus untuk mengikuti setiap perubahan yang terjadi,
karena suatu web dapat cepat sekali populer dikalangan pengguna
internet apabila terdapat kemudahan yang disediakan untuk pengguna
16 informasi (surfing) dan juga suatu web akan dikenal dengan cepat apabila
informasi yang disajikan selalu up to date dan atau lengkap. Kelemahan
ini dapat diatasi dengan model aplikasi Web Dinamis yang tidak
memerlukan pemeliharaan program secara terus menerus untuk
mengikuti perubahan yang terjadi, salah satu bahasa yang sering
digunakan untuk aplikasi web dinamis adalah PHP, ASP dan banyak lagi.
[4]
2.2.6.3 Aplikasi Pendukung Perancangan Web
Adapun beberapa program yang dianggap mampu membantu dalam
proses design sebuah web adalah :
a. Macromedia dreamweaver V.8 : Macromedia Dreamweaver V.8
merupakan perangkat lunak yang dikenal sebagai web authoring tool,
yaitu perangkat lunak yang digunakan untuk desain tampilan halaman
web. Macromedia Dreamweaver V.8 mempunyai kemampuan untuk
editing kode pada aplikasi web dengan bahasa pemrograman yang
berbeda-beda, seperti PHP, ASP, Java Server Pages (JSP) dan
lainnya.
b. Wampserver V.2.0 : adalah sebuah aplikasi yang di gunakan untung
meng-compile script PHP dari Macromedia dreamweaver ke browser
sehingga tampil menjadi sebuah web secara offline, wamp server juga
di bekali dengan beberapa aplikasi seperti PHPmyadmin, Apache.
c. Mozilla firefox V.7.0.1: sebuah aplikasi browser yang digunakan
untuk menampilkan hasil compiler dari wampserver sehingga web
yang kita buat sudah seperti web yang sudah ter-upload ke file
hosting.
2.2.7 HTML
HTML atau Hyper Text Markup Language, adalah bahasa yang digunakan
untuk mendesain dan memformat halaman web. Kita mungkin sering
mendengar tentang bahasa program seperti C, C++, Java, dan Visual basic.
17 .Sintak ini yang sering digunakan programmer untuk memanggil kode.
Sangatlah penting mengetahui bagaimana cara menulis kode menggunakan
bahasa yang relevan. Lebih dari itu, harus konvensional dengan aturan
menyangkut bahasa tertentu. Didalam HTML, sintak ini disebut tag. Tag
ditulis dengan tanda-kurung bersudut <sintak>. Ada kelompok tag yang
sudah dikenal didalam HTML, yang mana digunakan untuk berbagai tujuan.
Sebagai contoh, dalam rangka memodifikasi satu baris teks ke dalam bold,
kita menerapkan tag bold dengan suatu tag <b>, kemudian tulis beberapa teks
atau suatu paragraph yang berisi beberapa teks,dan tutup tag menggunakan
tag </b> seperti dalam contoh listing 1. Semua tag didalam HTML harus
ditutup menggunakan sintak </sintak>. Tetapi ada beberapa perkecualian
pada aturan ini. Kita memakai tag ini sebab HTML bukanlah bahasa yang
sensitif seperti C++ dan Java.[4]
2.2.8 CSS
CSS memungkinkan web developer untuk memisahkan HTML dari
aturan-aturan untuk membentuk tampilan sebuah website .CSS (Cascading
StyleSheet) digunakan untuk melengkapi file HTML, dan tugas utamanya
adalah menetapkan aturan tampilan/style yang akan digunakan pada sebuah
website. CSS diperkenalkan untuk pengembangan website pada tahun 1996.
Nama CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat
diletakkan secara berurutan, yang kemudian akan membentuk hubungan
parent-child pada setiap style,Setelah CSS distandarisasikan, Internet
Explorer dan Netscape melepas browser terbaru yang telah sesuai atau paling
tidak hampir mendekati dengan standar CSS. CSS adalah sebuah dokumen
yang berdiri sendiri dan dapat dimasukkan dalam kode HTML atau sekedar
mejadi rujukan oleh HTML dalam pendefinisian style.CSS menggunakan
kode yang tersusun untuk menetapkan style pda elemen HTML atau dapat
juga digunakan membuat style baru yang biasa disebut class.CSS dapat
mengubah besar kecilnya text, mengganti warna background pada sebuah
halaman, atau dapat pula mengubah warna border pada tabel, dan masih
18 untuk mengatur susunan tampilan pada halaman HTML. CSS dapat
digunakan untuk menggantikan <font>, <b>, <u> dan <u>, dikarenakan hal
berikut:sebuahfile css dapat menjadi rujukan banyak halaman HTML. Hanya
dibutuhkan 1 baris kode untuk melakukan hal tersebut. Ini berarti akan
meminimalkan file HTML yang akan dibuat.Jika ingin mengubah tampilan
website yang telah dibuat, maka yang perlu dilakukan hanya mengganti
barisbaris kode pada css nya saja, tanpa perlu mengutak-atik file-file HTML
nya, CSS dapat mengatur banyak atribut pada sebuah halaman secara mudah.
Misalnya: warna background, border, shadow, yang berbeda pada
masing-masing tag yang digunakan. [4]
2.2.9 PHP (PHP Hypertext Preprocessor)
PHP adalah bahasa pemrograman script yang paling banyak dipakai saat
ini. PHP banyak dipakai untuk memrogram situs web dinamis, walaupun
tidak tertutup kemungkinan digunakan untuk pemakaian lain.
2.2.9.1 Sejarah PHP
PHP pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1995.
Pada waktu itu PHP masih bernama FI (Form Interpreted), yang
wujudnya berupa sekumpulan script yang digunakan untuk mengolah
data form dari web. Selanjutnya Rasmus merilis kode sumber tersebut
untuk umum dan menamakannya PHP/FI, kependekan dari Hypertext
Preprocessin'/FormInterpreter. Dengan perilisan kode sumber ini
menjadi open source, maka banyak programmer yang tertarik untuk ikut
mengembangkan PHP.
Pada November 1997, dirilis PHP/FI 2.0.Pada rilis ini interpreter
PHP sudah diimplementasikan dalam program C. Dalam rilis ini
disertakan juga modul-modul ekstensi yang meningkatkan kemampuan
PHP/FI secara signifikan.Pada tahun 1997, sebuah perusahaan bernama
Zend menulis ulang interpreter PHP menjadi lebih bersih, lebih baik, dan
lebih cepat.Kemudian pada Juni 1998, perusahaan tersebut merilis
19 3.0.Pada pertengahan tahun 1999, Zend merilis interpreter PHP baru dan
rilis tersebut dikenal dengan PHP 4.0.PHP 4.0 adalah versi PHP yang
paling banyak dipakai pada awal abad ke-21.Versi ini banyak dipakai
disebabkan kemampuannya untuk membangun aplikasi web kompleks
tetapi tetap memiliki kecepatan dan stabilitas yang tinggi.
Pada Juni 2004, Zend merilis PHP 5.0.Dalam versi ini, inti dari
interpreterPHP mengalami perubahan besar.Versi ini juga memasukkan
model pemrograman berorientasi objek ke dalam PHP untuk menjawab
perkembangan bahasa pemrograman ke arah paradigma berorientasi
objek. [6]
2.2.9.2 Kelebihan PHP
Kelebihan PHP diantaranya :
a. Bahasa pemrograman PHP adalah sebuah bahasa script yang
tidak melakukan sebuah kompilasi dalam penggunaanya.
b. Web Server yang mendukung PHP dapat ditemukan dimana –
mana dari mulai IIS sampai dengan apache, dengan configurasi
yang relatif mudah.
c. Dalam sisi pengembangan lebih mudah, karena banyaknya milis –
milis dan developer yang siap membantu dalam pengembangan.
d. Dalam sisi pemahamanan, PHP adalah bahasa scripting yang
paling mudah karena referensi yang banyak.
e. PHP adalah bahasa open source yang dapat digunakan di berbagai
mesin (linux, unix, windows) dan dapat dijalankan secara runtime
melalui console serta juga dapat menjalankan perintah-perintah
20
2.2.10 ERD (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. Dalam rekayasa perangkat lunak, sebuah Entity-Relationship Model (ERM) merupakan abstrak dan konseptual representasi
data. Entity-Relationship adalah salah satu metode pemodelan basis data yang
digunakan untuk menghasilkan skema konseptual untuk jenis/model data
semantik sistem. Dimana sistem seringkali memiliki basis data relasional,
dan ketentuannya bersifat top-down. Diagram untuk menggambarkan model
Entitiy-Relationship ini disebut Entitiy-Relationship diagram, ER diagram,
atau ERD.
ERD untuk memodelkan struktur data dan hubungan antar data, untuk
menggambarkannya digunakan beberapa notasi dan simbol. Pada dasarnya
ada tiga simbol yang digunakan, yaitu :
a. Entiti ( Entitas )
Entiti merupakan objek yang mewakili sesuatu yang nyata dan
dapat dibedakan dari sesuatu yang lain. Ada dua macam entitas yaitu
entitas kuat dan entitas lemah. Entitas kuat merupakan entitas yang tidak
memiliki ketergantungan dengan entitas lainnya. Contohnya entitas
anggota. Sedangkan entitas lemah (weak entity) adalah suatu Entity
dimana keberadaan dari entity tersebut tergantung dari keberadaan entity
lain. Entity yang merupakan induknya disebut Identifying Owner dan
relationshipnya disebut Identifying Relationship.
b. Atribut
Setiap entitas pasti mempunyai elemen yang disebut atribut yang
berfungsi untuk mendeskripsikan karakteristik dari entitas tersebut. Isi dari
atribut mempunyai sesuatu yang dapat mengidentifikasikan isi elemen satu
dengan yang lain.
Jenis-jenis atribut :
21 Atribut yang digunakan untuk menentukan suatu entity secara unik.
· Atribut Simple
Atribut yang bernilai tunggal.
· Atribut Multivalue
Atribut yang memiliki sekelompok nilai untuk setiap instan entity.
· Atribut Composite
Suatu atribut yang terdiri dari beberapa atribut yang lebih kecil yang
mempunyai arti tertentu.
· Atribut Derivatif
Suatu atribut yang dihasilkan dari atribut yang lain.
c. Hubungan / Relasi
Relasi menunjukkan adanya hubungan diantara sejumlah entitas yang
berasal dari himpunan entitas yang berbeda. Relasi dapat digambarkan
sebagai berikut :
1. Satu ke satu (One to one)
Hubungan relasi satu ke satu yaitu setiap entitas pada himpunan
entitas A berhubungan paling banyak dengan satu entitas pada
himpunan entitas B. atau Setiap anggota entitas A hanya boleh
berhubungan dengan satu anggota entitas B, begitu pula sebaliknya.
2. Satu ke banyak (One to many)
Setiap entitas pada himpunan entitas A dapat berhubungan dengan
banyak entitas pada himpunan entitas B, tetapi setiap entitas pada
entitas B hanya dapat berhubungan dengan satu entitas pada himpunan
entitas A.
3. Banyak ke banyak (Many to many)
Setiap entitas pada himpunan entitas A dapat berhubungan dengan
banyak entitas pada himpunan entitas B dan demikian pula
22
2.2.11 DFD (Data Flow Diagram)
Data Flow Diagram (DFD) adalah representasi grafik dari sebuah sistem.
DFD menggambarkan komponen-komponen sebuah sistem, aliran-aliran data
di mana komponen-komponen tersebut, dan asal, tujuan, dan penyimpanan
dari data tersebut.
Kita dapat menggunakan DFD untuk dua hal utama, yaitu untuk
membuat dokumentasi dari sistem informasi yang ada, atau untuk menyusun
dokumentasi untuk sistem informasi yang baru.
DFD dapat digambarkan dalam Diagram Context dan Level n. Huruf
n dapat menggambarkan level dan proses di setiap lingkaran.
· Diagram Context
· Diagram Level n
DFD Logis
DFD Fisik
1. Context Diagram (CD)
Jenis pertama Context Diagram, adalah data flow diagram tingkat
atas (DFD Top Level), yaitu diagram yang paling tidak detail, dari
sebuah sistem informasi yang menggambarkan aliran-aliran data ke
dalam dan ke luar sistem dan ke dalam dan ke luar entitas-entitas
eksternal. (CD menggambarkan sistem dalam satu lingkaran dan
hubungan dengan entitas luar. Lingkaran tersebut menggambarkan
keseluruhan proses dalam sistem).
Beberapa hal yang harus diperhatikan dalam menggambar CD;
· Terminologi sistem:
23
Lingkungan Sistem adalah segala sesuatu yang berhubungan
atau mempengaruhi sistem tersebut.
Interface adalah aliran yang menghubungkan sebuah sistem dengan linkungan sistem tersebut.
· Menggunakan satu simbol proses,
· Nama/keterangan di simbol proses tersebut sesuai dengan fungsi
sistem tersebut,
· Antara Entitas Eksternal/Terminator tidak diperbolehkan komunikasi
langsung
· Jika terdapat termintor yang mempunyai banyak masukan dan
keluaran, diperbolehkan untuk digambarkan lebih dari satu sehingga
mencegah penggambaran yang terlalu rumit, dengan memberikan
tanda asterik ( * ) atau garis silang ( # ).
· Jika Terminator mewakili individu (personil) sebaiknya diwakili oleh peran yang dipermainkan personil tersebut.
· Aliran data ke proses dan keluar sebagai output keterangan aliran
data berbeda.
2. Diagram Level n / Data Flow Diagram Levelled
Dalam diagram n DFD dapat digunakan untuk menggambarkan
diagram fisik maupun diagram diagram logis. Dimana Diagram Level n
merupakan hasil pengembangan dari Context Diagram ke dalam
komponen yang lebih detail tersebut disebut dengan top-down
partitioning. Jika kita melakukan pengembangan dengan benar, kita akan
mendapatkan DFD-DFD yang seimbang.
24
· Pemberian Nomor pada diagram level n dengan ketentuan sebagai
berikut:
Setiap penurunan ke level yang lebih rendah harus mampu merepresentasikan proses tersebut dalam sepesifikasi proses
yang jelas. Sehingga seandainya belum cukup jelas maka
seharusnya diturunkan ke level yang lebih rendah.
Setiap penurunan harus dilakukan hanya jika perlu.
Tidak semua bagian dari sistem harus diturunkan dengan
jumlah level yang sama karena yang kompleks bisa saja
diturunkan, dan yang sederhana mungkin tidak perlu
diturunkan. Selain itu, karena tidak semua proses dalam level
yang sama punya derajat kompleksitas yang sama juga.
Konfirmasikan DFD yang telah dibuat pada pemakai dengan
cara top-down.
Aliran data yang masuk dan keluar pada suatu proses di level n
harus berhubungan dengan aliran data yang masuk dan keluar
pada level n+1. Dimana level n+1 tersebut mendefinisikan
sub-proses pada level n tersebut.
Penyimpanan yang muncul pada level n harus didefinisikan
kembali pada level n+1, sedangkan penyimpanan yang muncul
pada level n tidak harus muncul pada level n-1 karena
penyimpanan tersebut bersifat lokal.
Ketika mulai menurunkan DFD dari level tertinggi, cobalah
untuk mengidentifikasi external events dimana sistem harus
memberikan respon. External events dalam hal ini berarti suatu
kejadian yang berkaitan dengan pengolahan data di luar sistem,
25
· Jangan menghubungkan langsung antara satu penyimpanan dengan
penyimpanan lainnya (harus melalui proses).
· Jangan menghubungkan langsung dengan tempat penyimpanan
data dengan entitas eksternal / terminator (harus melalui proses),
atau sebaliknya.
· Jangan membuat suatu proses menerima input tetapi tidak pernah
mengeluarkan output yang disebut dengan istilah “black hole”.
· Jangan membuat suatu tempat penyimpanan menerima input tetapi
tidak pernah digunakan untuk proses.
· Jangan membuat suatu hasil proses yang lengkap dengan data yang
terbatas yang disebut dengan istilah “magic process”.
· Jika terdapat terminator yang mempunyai banyak masukan dan
keluaran, diperbolehkan untuk digambarkan lebih dari satu
sehingga mencegah penggambaran yang terlalu rumit, dengan
memberikan tanda asterik ( * ) atau garis silang ( # ), begitu
dengan bentuk penyimpanan.
· Aliran data ke proses dan keluar sebagai output keterangan aliran data berbeda.
3. DFD Fisik
Adalah representasi grafik dari sebuah sistem yang menunjukan
entitas-entitas internal dan eksternal dari sistem tersebut, dan aliran-aliran
data ke dalam dan keluar dari entitas-entitas tersebut. Entitas-entitas
internal adalah personel, tempat (sebuah bagian), atau mesin (misalnya,
sebuah komputer) dalam sistem tersebut yang mentransformasikan data.
Maka DFD fisik tidak menunjukkan apa yang dilakukan, tetapi
menunjukkan dimana, bagaimana, dan oleh siapa proses-proses dalam
26 Perlu diperhatikan didalam memberikan keterangan di
lingkaran-lingkaran (simbol proses) dan aliran-aliran data (simbol aliran data)
dalam DFD fisik menggunakan label/keterangan dari kata benda untuk
menunjukan bagaimana sistem mentransmisikan data antara
lingkaran-lingkaran tersebut.
4. DFD Logis
Adalah representasi grafik dari sebuah sistem yang menunjukkan
proses-proses dalam sistem tersebut dan aliran-aliran data ke dalam dan
ke luar dari proses-proses tersebut. Kita menggunakan DFD logis untuk
membuat dokumentasi sebuah sistem informasi karena DFD logis dapat
mewakili logika tersebut, yaitu apa yang dilakukan oleh sistem tersebut,
tanpa perlu menspesifikasi dimana, bagaimana, dan oleh siapa
proses-proses dalam sistem tersebut dilakukan.
Keuntungan dari DFD logis dibandingkan dengan DFD fisik
adalah dapat memusatkan perhatian pada fungsi-funsi yang dilakukan
sistem.[5]
2.2.12 Flowmap
Flowmap adalah penggambaran secara grafik dari langkah – langkah dan
urutan prosedur dari suatu program. Flowmap berguna untuk membantu
analis dan programer untuk memecahkan masalah kedalam segmen yang
lebih kecil dan menolong dalam menganalisis alternatif pengoperasian.
Biasanya flowmap mempermudah penyelesaian suatu masalah khususnya
masalah yang perlu dipelajari dan dievaluasi lebih lanjut.
Fungsi Flowmap yaitu mendefinisikan hubungan antara bagian (pelaku
proses), proses (manual/berbasis komputer) dan aliran data (dalam bentuk
27 Aturan membuat Flowmap untuk membuat sebuah analisis menggunakan
flowmap seorang analis dan programer memerlukan beberapa tahapan,
diantarnya:
1. Flowmap digambarkan dari halaman atas ke bawah dan dari kiri ke
kanan.
2. Aktivitas yang digambarkan harus didefinisikan secara hati-hati dan
definisi ini harus dapat dimengerti oleh pembacanya.
3. Kapan aktivitas dimulai dan berakhir harus ditentukan secara jelas.
4. Setiap langkah dari aktivitas harus diuraikan dengan menggunakan
deskripsi kata kerja.
5. Setiap langkah dari aktivitas harus berada pada urutan yang benar.
6. Lingkup dan range dari aktifitas yang sedang digambarkan harus
ditelusuri dengan hati-hati. Percabangan-percabangan yang memotong
aktivitas yang sedang digambarkan tidak perlu digambarkan pada
flowchart yang sama. Simbol konektor harus digunakan dan
percabangannya diletakan pada halaman yang terpisah atau hilangkan
seluruhnya bila percabangannya tidak berkaitan dengan sistem.
28
BAB III
PEMBAHASAN
3.1 Analisis dan Perancangan
3.1.1 Analisis Sistem yang sedang Berjalan
Flowmap menunjukan alur dokumen-dokumen serta prosedur-prosedur
yang terjadi yang disajikan dalam Diagram Alir Dokumen. Flowmap dari
sistem yang sedang berjalan di yayasan ini sendiri bisa di lihat pada gambar
3.1 dibawah ini.
Yayasan Siswa Kenalan Siswa
Brosur
Brosur
Brosur Start
End
Gambar 3.1 Flowmap sistem yang sedang berjalan
Uraian dari flowmap diatas adalah :
1. Yayasan membuat brosur yayasan yang berisi tentang informasi
yayasan.
29 3. Brosur yayasan dari siswa diberikan kepada orang lain.
3.1.2 Analisis Kebutuhan Non Fungsional
Analisis aliran data digunakan untuk memahami alur dari informasi dalam
sistem dan pengdokumentasian dalam merancang suatu aplikasi web,
sehingga akan mempermudah tahap pengembangan sistem.
3.1.2.1 Karakteristik Pengguna
Website digunakan oleh berbagai macam orang di seluruh dunia.
Namun website ini hanya memberikan informasi seputar Yayasan
Al-Mukhtariyah saja, sehingga yang dikhususkan dalam penggunaan
website Yayasan Al-Mukhtariyah ini adalah Masyarakat serta Admin
dari website ini sendiri.
Tabel 3.1 Karakteristik Pengguna
Pengguna Hak Akses Tingkat
Keterampilan Kemampuan
Admin Melakukan
update terhadap
isi content website
(tambah, edit dan
hapus artikel)
Pengunjung Mendapatkan
informasi
Berdasarkan analisis karakteristik pengguna yang dilakukan pada
saat kerja praktek, maka dapat disimpulkan bahwa eksistensi pengguna
yang ada di Yayasan Al-Mukhtariyah sudah memenuhi standar
30
3.1.2.2 Analisis Hardware
Spesifikasi hardware minimum yang disarankan untuk mendukung
aplikasi ini dapat digunakan dengan baik, sebagai berikut:
1. Processor : Dengan kecepatan minimum 1.9 GHz
2. Memory/ RAM : Minimum 256 MB
3. VGA : Dengan Kecepatan Minimum 32 MB
4. Harddisk : Minimum Kapasitas 25 GB
5. Network Interface Card
6. Monitor
7. Keyboard dan Mouse.
Berdasarkan analisis perangkat keras yang dilakukan pada saat
kerja praktek, spesifikasi perangkat keras yang dimiliki oleh Yayasan
Al-Mukhtariyah sudah memenuhi standar penerapan aplikasi ini.
3.1.2.3 Analisis Software
Untuk mendukung dalam penyampaian informasi, dibutuhkan suatu
fasilitas yang memadai. Yaitu berupa perangkat lunak (Software) yang
dirancang untuk memudahkan dalam mengelola informasi. Adapun
perangkat lunak (Software) minimun yang digunakan adalah sebagai
berikut:
a. Sistem Operasi : Microsoft Windows XP Profesional SP1
b. Program : - Wamp Server
31 c. Database : MySQL
d. Perangkat tambahan : Web Browser
Berdasarkan analisis perangkat lunak yang dilakukan pada saat kerja
praktek, maka dapat disimpulkan bahwa spesifikasi perangkat lunak
yang dimiliki oleh Yayasan Al-Mukhtariyah sudah memenuhi standar
penerapan aplikasi ini.
3.1.3 Analisis Basis Data
Dalam memodelkan data dan hubungan-hubungan data yang ada di dalam
website dapat digunakan alat bantu yaitu diagram ER. Gambar dibawah ini
menggambarkan bagaimana relasi antar entitas yang saling berhubungan pada
website, yang akan dibangun di YPI Al-Mukhtariyah Rajamandala.
Admin membuat Artikel
Gambar 3.2 Entity Relationship Diagram website
32
Gambar 3.3 Skema Relasi database
3.1.4 Analisis Kebutuhan Fungsional 3.1.4.1 Diagram Konteks
Diagram konteks atau disebut juga dengan model sistem
fundamental merepresentasikan seluruh elemen sistem sebagai sebuah
bubble tunggal dengan data output yang ditunjukan dengan anak panah
masuk dan keluar secara berurutan. Diagram konteks menjelaskan
mengenai sistem secara umum yang terdiri dari dua entitas, yaitu
pengunjung dan admin. Berdasarkan sistem yang dibuat, maka diagram
konteksnya sebagai berikut :
Sistem Website
33
3.1.4.2 Data Flow Diagram (DFD) Level 1
DFD level 1 sistem website Yayasan Al-Mukhtariyah
menggambarkan proses-proses utama yang dilakukan oleh entitas-entitas
yang terdapat dalam sistem. Proses-proses tersebut di antaranya adalah :
1. Login, yaitu proses yang harus dilakukan oleh admin sebelum
melakukan aktivitas dalam program aplikasi ini.
2. Pengolahan data, yaitu proses untuk mengolah data oleh admin
setelah berhasil login.
3. Lihat informasi, yaitu proses pengunjung mendapatkan berita
yang diisikan oleh admin.
4. Beri komentar, yaitu proses pemberian komentar pada suatu
artikel yang bisa dilakukan admin dan pengunjung.
Proses-proses yang terjadi pada level 1 ini dapat dilihat pada diagram
berikut :
Data Artikel Data Komentar
34
Data Login Data Login
Info Login Info Login
Gambar 3.6 DFD Level 2 proses login
3.1.4.4 Data Flow Diagram (DFD) Level 2 Proses 2 (pengolahan data)
Admin
35
Data komentar Data komentar
Info komentar Info komentar
Gambar 3.8 DFD Level 2 proses tambah komentar
3.1.4.6 Spesifikasi Proses
Tabel 3.2 Spesifikasi proses
No.Proses 1.0
Nama Proses Login
Deskripsi Proses login ini dilakukan admin untuk dapat
mengakses halaman menu admin
Input Username dan Password
Output - Info login gagal
- Login berhasil
Logika Proses
Begin data username dan password dimasukan
If Username ada dan Password benar{
Then login valid}
Else{ Login telah gagal}
No.Proses 2.0
Nama Proses Pengolahan data
36 website.
Input - Login valid
Output - update atrikel
- update komentar
Logika Proses
Begin login dimasukan
If(login valid){
Pengolahan data sukses dilakukan
Then tampil}
Else {pengolahan data gagal dilakukan}
No.Proses 3.0
Nama Proses Lihat informasi
Deskripsi Proses ini dilakukan oleh admin atau pengunjung
untuk mendapatkan berita dari yayasan
Input - Lihat data artikel
Output - Info data artikel
Logika Proses
Begin request data artikel dimasukan
If(data artikel ada){
Tampil artikel sukses
Then tampil}
Else {artikel tidak tampil}
No.Proses 4.0
Nama Proses Tambah Komentar
Deskripsi Proses ini digunakan admin/pengunjung untuk
menambah komentar dalam suatu artikel
Input
37
Output - update komentar
Logika Proses
Begin request data komentar dimasukan
If(data komentar ada){
komentar sukses ditambah
Then tambah}
Else {komentar gagal ditambah}
No.Proses 2.1
Nama Proses Tambah Artikel
Deskripsi Proses ini dilakukan oleh admin untuk menambah
artikel
Input - Data artikel
Output - Update data artikel
Logika Proses
Begin data artikel dimasukan
If(data artikel ada){
Tambah data artikel dilakukan
Then data artikel di update}
Else {penambahan data artikel gagal}
No.Proses 2.2
Nama Proses Edit Artikel
Deskripsi Proses ini dilakukan oleh admin untuk mengedit
artikel
Input - Data artikel
Output - Update data artikel
Logika Proses
Begin data artikel dimasukan
If(data artikel ada){
Edit data artikel dilakukan
38 Else {edit data artikel gagal}
No.Proses 2.3
Nama Proses Hapus Artikel
Deskripsi Proses ini dilakukan oleh admin untuk
menghapus artikel
Input - Data artikel
Output - Hapus data artikel
Logika Proses
Begin data artikel dimasukan
If(data artikel ada){
Hapus data artikel dilakukan
Then data artikel di hapus}
Else {hapus data artikel gagal}
3.1.4.7 Kamus Data
Tabel 3.3 Kamus data
No Kamus Keterangan
1 Nama Aliran Data Data Admin
Deskripsi Pengolahan data admin
Struktur Data Id_admin + username+password
Id_admin [0-9]
Username [A-Z | a-z |0-9]
Password [A-Z | a-z |0-9]
2 Nama Aliran Data Data Artikel
Deskripsi Pengolahan data artikel
Struktur Data Id_artikel + judul + gambar + isi artikel +
tanggal
39
Judul [A-Z | a-z |0-9]
Gambar [A-Z | a-z ]
Isi [A-Z | a-z |0-9]
Tanggal [0-9]
3 Nama Aliran Data Data Komentar
Deskripsi Pengolahan data komentar
Struktur Data Id_artikel + nama + email + komentar +
waktu
Id_artikel [0-9]
Nama [A-Z | a-z ]
E-mail [A-Z | a-z |0-9]
Komentar [A-Z | a-z |0-9]
Waktu [0-9]
3.1.4.8 Struktur Tabel
Struktur tabel database dari website ini diantaranya :
Tabel 3.4 Data Admin
No Nama Field Tipe Data` Ukuran Atribut
1 Id_admin integer 11 Primary key (auto
increment)
2 username text
3 password text
Tabel 3.5 Data Artikel
40 Tabel 3.6 Data Komentar
No Nama
Field Tipe Data` Ukuran Atribut
1 Id_artikel integer 11 Foreign key (auto
increment)
2 nama varchar 10
3 email varchar 25
4 komentar text
5 waktu timestamp
3.1.4.9 Perancangan Pengkodean
Pengkodean dalam website ini menggunakan metode auto-increment.
Semua penambahan admin, artikel dan komentar akan bertambah sendiri
secara otomatis.
3.1.5 Rancangan Program Aplikasi 3.1.5.1 Struktur Menu
Perancangan menu dilakukan untuk mempermudah interaksi antara sistem
dengan pengguna. Struktur menu menggambarkan menu-menu yang terdapat
dalam website Yayasan Al-Mukhtariyah dalam bentuk bagan sehingga lebih
mudah dipahami. Perancangan struktur menu website yayasan ini terlihat pada
gambar 3.6 berikut.
Menu Utama
Beranda SMA Sederajat MTs Sederajat MI Sederajat RA Sederajat Profil Galeri
Gambar 3.9 Struktur menu
Adapun penjelasan mengenai struktur menu tersebut adalah sebagai berikut :
1. Beranda, yaitu halaman utama yang menampilkan semua artikel dan menu
41 2. SMA Sederajat, yaitu menu masuk ke halaman profil SMA yayasan.
3. MTs Sederajat, yaitu menu yaitu menu masuk ke halaman profil MTs
yayasan.
4. MI Sederajat, yaitu menu masuk ke halaman profil MI yayasan.
5. RA Sederajat, yaitu menu masuk ke halaman profil RA yayasan.
42
3.1.5.2 Perancangan Antarmuka
Tahap ini adalah tahapan pembuatan rancangan antarmuka untuk
digunakan pada website yayasan.
3.1.5.2.1 Perancangan Halaman Utama
Halaman utama merupakan halaman beranda. Halaman ini berisi tentang
artikel dan info seputar yayasan yang sebelumnya telah admin tambahkan
kedalam konten yayasan. Dalam halaman ini juga terdapat form login untuk
admin mengelola website. Berikut adalah perancangan halaman beranda.
MI
Logo Yayasan Nama Yayasan
Form Login
Alamat Yayasan
Peta Lokasi Yayasan Artikel / Info Yayasan
Footer T01
· Klik menu Beranda akan masuk ke T01
· Klik menu SMA Sederajat akan masuk ke T02
· Klik menu MTs Sederajat akan masuk ke T03 masuk ke A01, jika salah akan masuk T01
· Klik menu Lihat Selengkapnya akan masuk ke S01
· Klik menu Beri Komentar akan masuk ke S01
Lihat Lengkap
Beri Komentar
43
3.1.5.2.2 Perancangan Halaman Baca Artikel
Halaman ini berisi tentang artikel yang admin tambahkan kedalam
website. Baca Artikel merupakan baca selengkapnya dari yang di tampilkan
di beranda.
Logo Yayasan Nama Yayasan
Alamat Yayasan
Peta Lokasi Yayasan Artikel / Info Yayasan
Footer S01
· Klik menu Beranda akan masuk ke T01
· Klik menu SMA Sederajat akan masuk ke T02
· Klik menu MTs Sederajat akan masuk ke T03
44
3.1.5.2.3 Perancangan Halaman SMA / Sederajat
Halaman ini berisi tentang info tentang SMA / Sederajat yang termasuk
kedalam yayasan Al-Mukhtariyah.
MI
Logo Yayasan Nama Yayasan
Alamat Yayasan akan masuk ke T02
· Klik menu MTs Sederajat akan masuk ke T03
45
3.1.5.2.4 Perancangan Halaman MTs / Sederajat
Halaman ini berisi tentang info tentang MTs / Sederajat yang termasuk
kedalam yayasan Al-Mukhtariyah.
MI
Logo Yayasan Nama Yayasan
Alamat Yayasan akan masuk ke T02
· Klik menu MTs Sederajat akan masuk ke T03
46
3.1.5.2.5 Perancangan Halaman MI / Sederajat
Halaman ini berisi tentang info tentang MI / Sederajat yang termasuk
kedalam yayasan Al-Mukhtariyah.
MI
Logo Yayasan Nama Yayasan
Alamat Yayasan akan masuk ke T02
· Klik menu MTs Sederajat akan masuk ke T03
47
3.1.5.2.6 Perancangan Halaman RA Sederajat
Halaman ini berisi tentang info tentang RA / Sederajat yang termasuk
kedalam yayasan Al-Mukhtariyah.
MI
Logo Yayasan Nama Yayasan
Alamat Yayasan akan masuk ke T02
· Klik menu MTs Sederajat akan masuk ke T03
48
3.1.5.2.7 Perancangan Halaman Profil
Halaman ini berisi tentang profil Yayasan.
MI
Logo Yayasan Nama Yayasan
Alamat Yayasan akan masuk ke T02
· Klik menu MTs Sederajat akan masuk ke T03
