BAB IV

PERANCANGAN DAN IMPLEMENTASI SISTEM

4.1. Analisa Permasalahan

Selama ini di SMA Muhammadiyah 2 Pemalang belum memiliki profil

sekolah berupa website. Sebagai contoh ketika siswa siswi atau alumni untuk

memperoleh informasi seputar SMA Muhammadiyah 2 Pemalang masih bersifat

manual yaitu dengan cara datang langsung ke sekolah. Maka dirancanglah sebuah

sistem informasi berbasis web ini agar , untuk memenuhi kebutuhan SMA

Muhammadiyahnserta mewadahi komunikasi secara interaktif dalam

menyebarluaskan informasi ke siswa siswi, alumni, masyarakat, dan lain

sebagainya. Dan diharapkan dapat mempermudah semua pihak yang terkait.

4.2. Analisa Kebutuhan Sistem

4.2.1. Hardware / Perangkat Keras yang dibutuhkan

Hardware atau Perangkat Keras adalah komponen pada komputer

yang dapat terlihat dan disentuh secara fisik. Jadi, berupa secara fisik dari

komputer dapat kita sebut sebagai Hardware atau Perangkat Keras.

Spesifikasi perangkat keras yang digunakan dalam pembuatan Website

SMA MUHAMMADIYAH 2 PEMALANG Adalah :

1. Processor : Intel B815

2. Harddisk : 320 GB HDD

36
 37

3. Memory : 2 GB DDR3 Memory

4. Monitor : 14,0

5. Modem

6. Keyboard dan Mouse

4.2.2. Software / Perangkat Lunak yang dibutuhkan

Software atau Perangkat Lunak adalah data - data yang terdapat pada

sebuah komputer yang diformat kemudian disimpan secara digital. Bisa

dibilang bahwa Software merupakan komponen yang tidak terlihat secara

fisik, tetapi terdapat dalam sebuah komputer.

Spesifikasi perangkat lunak yang digunakan dalam pembuatan Website

Profile SMA MUHAMMADIYAH 2 PEMALANG Adalah :

1. Adobe Dreamweaver Cs6

2. XAMPP ( Apache, PHP, MySQL )

3. Browser ( Mozzila Firefox ,Google chrome dll )

4. Adobe Photoshop Cs6

5. Sistem Operasi ( Windows )

 38

4.3. Perancangan DFD

4.3.1 Pra Context Diagram

Mengidentifikasikan semua entitas yang terlibat ke dalam sistem dan

input/output yang terlibat dengan entitas.

Table 4.1 Tabel Identifikasi

Entitas Input Output

User - Buku tamu - Info galeri

- Info Struktur

Admin - Galeri - Laporan buku

- Struktur tamu

4.3.2 Context Diagram

Context Diagram merupakan gambaran umum dari sistem yang

diusulkan, di mana pada diagram ini menggambarkan hubungan input dan

output antar sistem dengan kesatuan luarnya.

Buku_tamu Buku Tamu

User Galeri Galeri Admin

Web
Struktur Struktur
Website

Gambar 4.1 Context Diagram Website Profil

 39

4.3.3 Hirarchy Chart

Hirarchy Chart berfungsi untuk memperlihatkan jenjang atau hirarki dari

program yang akan dikembangkan. Dengan demikian dapat dijabarkan urutan

kerja dari tiap program.

0
Sistem Info
Website

1 3
Input Data Output

3.1 3.2 3.3

1.1 1.2 1.3
Galeri Struktur Buku
Struktur Galeri Buku Tamu
k Tamu

e
a
Gambar 4.2 Hirerarchy chart website Profil
n
g

4.3.4 DFD Level 0 g

o
Pada proses Data Flow Diagram level 0 merupakan penjelasan umum
t
a data yang menghubungkan proses -proses yang terjadi.
sebuah gambaran aliran
a
n
 40

Struktur Struktur Struktur

1 D1 Struktur 3

Admin Input
Galeri Data Galeri Galeri Output
D2 Galeri

Galeri

Data Buku tamu User

Struktur

2 Data Buku Tamu

D3 Data Buku Tanmu
Buku Tamu

Gambar 4.3 DFD level 0

4.3.5 DFD Level 1 Bagian Input Data

Sketsa DFD untuk over view dengan (level 1) berdasarkan proses di bagan

berjenjang.

Data Struktur
Data Struktur 1.1
Struktur
D2 struktur
Admin
1.2
Data Galeri Data Galeri
Galeri D3 Galeri

User Data Buku tamu 2 Databuku tamu

Buku Tamu t D4 Buku Tamu
a
m
Gambar 4.4 DFD level 1 BagianuInput
 41

4.3.6 DFD Level 1 Bagian Output

Struktur Struktur
3.2
D1 Struktur
Struktur

User
Galeri Galeri
D2 Galeri 3.3
Galeri

Buku
D4 Buku Tamu 3.1
T Buku tamu
Buku Tamu Admin
a
m
u
Gambar 4.5 DFD level 1 Bagian Output
 42

4.4. Flowchart

Alur diagram program yang akan dibuat adalah sebagai berikut :

4.4.1. Flowchart halaman pengunjung

Start

Menu=0

Menu

Menu

Buku Tamu Struktur Galeri

Lagi? A

End

Gambar 4.6 Flowchart pengunjung

 43

4.4.2 Flowchart halaman admin

Start

username =
password=

Username
Password

Username=MU T Error
Password=12345

Struktur Galeri

Lagi?
Y
A T

End

Gambar 4.7 Flowchart halaman admin

 44

4.4.2. Flowchart buku tamu

Start

Nama=,,
Email=,,
Pesan=,,

Nama, Email, Pesan

Y
Tambah A

Nama, Email, Pesan

Nama, Email, Pesan

Y
Lagi? A

End

Gambar 4.8 Flowchart buku tamu

 45

4.4.3. Flowchart struktur organisasi

Start

Nama=
Foto=
Jabatan=

Nama, Foto, Jabatan

Y
Simpan A

Nsma, foto, jabatan

Y
Lagi ? A

End

Gambar 4.9 Flowchart struktur organisasi

 46

4.4.4. Flowchart galeri

Start

nama=
Foto=
Keterangan=

Simpan

Nama, Foto, Keterangan

Nama, Foto, Keterangan

Y
Lagi ? A

End

Gambar 4.10 Flowchart galeri

 47

4.5. ERD

Entity Relationship Diagram (ERD) adalah model konseptual yang

mendeskripsikan hubungan antara penyimpanan. ERD digunakan untuk

memodelkan struktur data dan hubungan antar data.

nama ID galeri
foto
password

keteranga
username
Galeri n
nama gambar

Admin Input Struktur Organisasi

ID admin
ID strukur
jabatan

ID tamu
dilihat
nama

Buku tamu Input User

email
pesan

Gambar 4.11 ERD Website

 48

4.6. Perancangan Database

Dalam pembuatan website SMA Muhammadiyah 2 Pemalang dibutuhkan

sebuah database yang berguna untuk menyimpan informasi. Berikut adalah

rancangan database untuk website SMA Muhammadiyah 2 Pemalang.

4.5.1 Tabel Admin

Tabel Admin digunakan untuk menyimpan database administrator atau

orang yang berhak mengelola website.

Tabel 4.2 Tabel Admin

Field Tipe Ukuran Keterangan

Id_admin Int 15 Auto increment, primary key

Username Varchar 25

Password Varchar 25

4.5.2 Tabel Galeri

Tabel galeri digunakan untuk menyimpan data foto.

Tabel 4.3 Tabel Galeri

Field Tipe Ukuran Keterangan

Id_galeri Int 3 Auto increment, primary key

Foto Varchart 50

Nama Varchart 25

Keterangan Text 50
 49

4.5.3 Buku Tamu

Tabel buku tamu digunakan untuk menyimpan pesan yang dikirimkan oleh

pengunjung website.

Tabel 4.4 Tabel Buku Tamu

Field Tipe Ukuran keterangan

Id_tamu Int 5 Auto increment, primary key

Nama Varchart 25

Email Varchart 25
W
Pesan Text
e

4.5.4 Tabel Struktur Organisasi

Tabel struktur organisasi digunakan untuk menyimpan data struktur

organisasi.

Tabel 4.5 Tabel Struktur Organisasi

Field Tipe ukuran keterangan

Id_struktur Int 10 Auto increment, primary key

Gambar Varchart 50

Nama Varchart 50

Jabatan Varchart 25
 50

4.7. Perancangan Tampilan Website

Perancangan website SMA Muhammadiyah 2 Pemalang ini terbagi menjadi

rancangan tampilan website yaitu rancangan tampilan untuk halaman pengunjung

dan rancangan tampilan untuk halaman administrator.

4.7.1 Perancangan Halaman Pengunjung

Tampilan front-end harus dirancang semenarik mungkin karena halaman

inilah yang akan dilihat oleh pengunjung ketika pertama kali membuka

website.

Header

Menu

Footer

Gambar 4.12 Layout halaman pengunjung

Tampilan halaman pengunjung tersusun dari beberapa elemen yaitu :

1. Header

Bagian paling atas yang berisi identitas SMA Muhammadiyah 2 Pemalang.

 51

2. Menu

Berisi link yang menuju ke halaman lain. Bagian menu terdiri dari beberapa

menu yaitu : Home, Profil, Kejuruan, Galeri, Buku Tamu.

3. Footer

Berisi nama sekolah dan pembuat website.

4.7.2 Perancangan halaman admin

Untuk bisa mengakses tampilan admin, maka pengguna harus

memasukan username dan password terlebih dahulu agar hanya orang

orang tertentu saja yang bisa mengakses halaman ini.

1. Tampilan Login

n Username

Password

Masuk

Gambar 4.13 Tampilan Login admin

Keterangan :

a. Username : textfield untuk memasukan username

b. Password : textfield untuk memasukan password

c. Masuk : tombol untuk mengeksekusi perintah login

 52

4.7.3 Tampilan Halaman Admin

Header

Menu

Footer

Gambar 4.14 Tampilan admin

Keterangan :

a. Header : Bagian atas berupa identitas sekolah

b. Navigasi : menu navigasi terdiri dari

1. Buku Tamu : Menuju ke halaman untuk mengelola buku tamu.

2. Struktur : Menuju ke halaman untuk memasukan Organisasi.

3. Galeri : Menuju ke halaman untuk memasukan Galeri

c. Konten : Bagian yang menampilkan isi dari menu navigasi.

d. Footer : Berisi nama sekolah dan pembuat website.