24

BAB III

ANALISIS DAN PERANCANGAN

3.1. Analisis Sistem

Analisis sistem merupakan suatu kegiatan yang dilakukan seorang peneliti

terhadap permasalahan yang terdapat dikasus yang sedang diteliti. Meliputi

analisis terhadap masalah sistem yang sedang berjalan, analisis hasil

solusinya, analisis kebutuhan terhadap sistem yang diusulkan dan analisis

kelayakan sistem yang di usulkan.

3.1.1. Sistem yang sedang berjalan pada ETI

Gambar 1. Bagan Struktur ETI

24
 25

Dari bagan struktur diatas dijelaskan bahwa pada sistem yang sedang

berjalan ini, semua data yang berhubungan dengan data siswa-siswi, data

guru, data fasilitas, dan data kurikulum. Adapun uraian dari data-data

tersebut diatas adalah sebagai berikut:

a. Data siswa awal mulahnya didaftar di bagian administrasi, bagian

administrasi tersebut dibawah penanggung jawab wakil direktur II,

untuk urusan administrasi dan keuangan,

b. Data guru berada pada bagian administrasi, bagian administrasi

tersebut dibawah penanggung jawab wakil direktur II, untuk urusan

administrasi dan keuangan tetapi karena ETI merupakan sekolah

menengah kejuruan swasta maka untuk urusan keuangan dan

personalia masih terpusat di Yayasan Klibur Mata Dalan Ba

Cooperativa No Fila Liman, setelah direkrut di Yayasan maka akan di

alokasikan ke ETI dan IOB.

c. Data kurikulum berada pada bagian kurikulum sekolah, meskipun di

ETI sudah ada banyak jurusan namun pada bagian kejuruan masih

belum berfungsi, makanya untuk kurikulum masih ditanggani oleh

bagian kurikulum sekolah, bagian ini masih dibawah tanggung jawab

waki direktur I untuk urusan kurikulum dan kesiswaan.

d. Data buku berada pada bagian perpustakaan, bagian ini dibawah

tanggung jawab wakil direktur II, untuk urusan administrasi dan

 26

keungan. Bagian mendapatkan buku-bukunya dari pihak donator-

donator yang ada di Timor-Leste.

e. Data barang berada pada bagian logistik dan perpustakan, bagian ini

dibawah tanggung jawab wakil direktur II, untuk urusan administrasi

dan keuangan.

f. Data kegiatan extra-kurikuler berada pada bagian kesiswaan, bagian

ini bertanggung jawab dibawah wakil direktur I, untuk urusan

kurikulum dan kesiswaan.

g. Data aktivitas kbm siswa berada pada wali kelas masing-masing,

untuk seluruh wali kelas dibawah tanggung jawab wakil direktur I,

untuk urusan kurikulum dan kesiswaan.

h. Data jadwal kegiatan belajar mengajar berada pada bagian kurikulum,

untuk bagian ini bertanggung jawab dibawah wakil direktur I, untuk

urusan kurikulum dan kesiswaan.

Dari semua data-data diatas, belum dipublikasikan melalui media-media

yang ada termasuk jaringan sosial khususnya melalui website. Adapun

flowchart sistem yang berjalan adalah sebagai berikut :

 27

Tata Usaha Admin Pengunjung

Data Profile Sekolah

Star Data Kegiatan kerja
Data KBM
Data Guru
Data Siswa

Data Profile Sekolah

Data Kegiatan kerja
Data KBM Dokumen-
Data Guru
Data Siswa
Input Data dokumen

Proses

End

Stored Data

Proses

Dokumen-
dokumen

Arsip

Gambar 2. Flowchart sistem yang sedang berjalan

3.1.2. Analisis Hasil Solusi

Untuk solusi pada sistem yang sedang berjalan ini, pada sekolah ETI

harus membuat dan implementasikan sebuah sistem yang spesifik untuk

dapat menginformasikan semua akrivitas, fasilitas dan sumber-sumber

pendukung lainnya dalam melaksanakan kegiatan proses belajar dan

mengajar, dengan alasan-alasan yang telah diuraikan di atas, maka

penulis ingin merancang dan membuat sebuah website dengan judul

 28

“Perancangan dan Pembuatan Website Escola Técnica Informática

(ETI) Dengan Menggunakan PHP dan MySQL.”, sehinga dengan

website ini bisa :

a. Menginformasikan seluruh kegiatan dan seluruh sumber-sumber yang

ada di sekolah ETI kepada pihak luar dengan interaktif dan inovatif.

b. Menginformasikan kepada siswa-siswi mengenai jadwal KBM, nilai

dan tugas-tugas dari guru bisa melalui website ini.

c. Untuk menarik para peminat dari dalam dan luar negeri untuk

mensekoakan anaknya pada sekolah tersebut.

3.1.3. Analisis Kebutuhan Sistem Diusulkan

Untuk dapat membanggun sistem yang disusulkan ini yaitu

“Perancangan dan Pembuatan Website Escola Técnica Informática

(ETI) Dengan Menggunakan PHP dan MySQL.” ini, haru

membutuhkan beberapa kebutuhan seperti software dan hardware yang

digunakan untuk dapat menggelola sistem ini. Adapun hardware,

software dan alat-alat yang digunakan sebagai kebutuhan akan sistem ini

adalah sebagai berikut:

 29

3.1.3.1. Software

Minimum software yang digunakan akan kebutuhan sistem ini

adalah windows XP2, sebagai sistem operasinya, Microsoft

office word 2007 sebagai pengolah kata atau text, Microsoft

visio 2007 sebagai alat perancangan, Micrososft Photoshop CS3

sebagai pengolah gambar, PHP sebagai pengolah aplikasi untuk

website ini, My SQL sebagai pengolah databasenya.

3.1.3.2. Hardware

Hardware yang digunakan untuk membangun dan implementasi

sistem ini adalah CPU dengan prosecor Core 2 Duo, Hardisk

dengan kapasitas 500 GB, memori RAM 256 MB, Monitor LCD

14 inch, keyboard logitec, mouse logitec, dan printer canon 287.

3.1.3.3. Alat-alat

Alat yang digunakan pada penulisan ini adalah diagram konteks

sebagai :

a. Data Flow Diagram (DFD)

Menurut Andri Kristanto (2003) DFD adalah suatu

model logika data atau proses yang dibuat untuk

menggambarkan dari mana asal data dan kemana tujuan data

yang akan keluar dari sistem, dimana data disimpan, proses

apa yang menghasilkan data tersebut dan interaksi antara data

yang tersimpan dan proses yang dikenalkan pada data

 30

tersebut. Simbol yang digunakan pada DFD antara lain

sebagai berikut :

i. Kesatuan Luar (External Entity)

Kesatuan luar adalah kesatuan di lingkungan luar

sistem yang dapat berupa organisasi atau sistem lainnya

yang akan memberikan input, menerima output dari

sistem. Simbol di gambar dengan persegi panjang.

Gambar 3. Simbol Kesatuan Luar pada DFD

ii. Arus Data

Merupakan data yang mengalir di antara proses,

simpan data, dan kesatuan luar atau terminator yang

menunjukkan arus data yang dapat berupa masukan untuk

sistem atau hasil dari proses sistem yang dapat berbentuk

formulir, dokumen, laporan tercetak yang dihasilkan oleh

sistem. Arus data harus diberi nama (Narasi) yang jelas

dan mempunyai arti, dimana nama dari arus data ditulis

disamping anak panahnya.

Gambar 4. Simbol Arus Data pada DFD

 31

iii. Proses

Proses adalah suatu kegiatan atau pekerjaan yang

dilakukan oleh orang, mesin atau komputer. Proses

berfungsi untuk mengolah arus data yang masuk ke dalam

sistem kemudian dari proses itu juga menghasilkan arus

data yang keluar masuk ke sistem. Suatu proses

digambarkan dengan simbol lingkaran.

Gambar 5. Simbol Proses pada DFD

iv. Simpanan Data (Data Store)

Merupakan komponen yang berfungsi untuk

menyimpan data atau file database pada sistem komputer,

arsip atau catatan manual, kotak tempat data, tabel acuan

manual atau suatu agenda (buku).

Gambar 6. Simbol Simpanan Data pada DFD

 32

Simbol-simbol yang digunakan dalam contoh diatas

adalah simbol DFD yang sering digunakan oleh Yourdan,

De Marco, dan lainnya. Berikut ini adalah perbedaan

simbol yang digunakan oleh beberapa orang ahli

perancangan sistem.

Sombol DFD versi Yourdan, De

Nama Simbol Simbol DFD versi Gane dan Sarson
Marco, dan Lainnya

Arus Data

Identifikasi

Proses Deskripsi Proses

Deskripsi Proses

Penyimpanan Data
Identifikasi

Entitas Luar

Gambar 7. Simbol-simbol dalam DFD

b. Entity Relationship Diagram (ER_D)

Menurut Andri Kristanto (2003) ER_D merupakan

diagram yang menggambarkan hubungan antara file yang

direlasikan agar berfungsi secara optimal. Komponen-

komponen yang ada dalam ER_D antara lain sebagai berikut:

 33

i. Entity (Objek Data)

Merupakan kumpulan objek atau sesuatu yang dapat

dibedakan atau diidentifikasikan secara unik, dilambangkan

dengan simbol persegi panjang.

Gambar 8. simbol Entitas

Aturan-aturan untuk mengambarkan entitas:

1. Entitas dinyatakan dgn simbol persegi panjang

2. Nama entitas ditulis didalam simbol persegi panjang

3. Nama entitas berupa kata benda tunggal

4. Nama entitas sedapat mungkin menggunakan nama

yang mudah dipahami dan menyatakan maknanya

dengan jelas.

ii. Atribut

Atribut adalah karakteristik dari entity atau

relationship yang menyediakan penjelasan detail tentang

entity atau relationship atau dengan kata lain atribut adalah

kumpulan elemen data yang membantu suatu entity.

Digambar dengan simbol lingkaran.

Gambar 9. Simbol Atribut pada ERD

 34

Aturan-aturan untuk mengambarkan atribut:

1. Atribut menyatakan dengan simbol ellips

2. Nama atribut dituliskan di dalam simbol ellips

3. Nama atribut berupa kata benda tunggal

4. Menggunakan nama yang mudah dipahami dan

mempunyai makna

5. Menggunakan garis lurus untuk menghubungkan

dengan entitas

iii. Relationship

Merupakan hubungan yang terjadi antara satu entity

atau lebih. Dilambangkan dengan simbol layang-layang.

Gambar 10. Simbol Relationship pada ER_D

Aturan-aturan untuk mengambarkan kerelasian:

1. Kerelasian dinyatakan dengan simbol belah ketupat

2. Nama kerelasian dituliskan di dalam simbol belah

ketupat

3. Kerelasian menghubungkan dua entitas

4. Nama relasi berupa : kata kerja aktif (diawali dengan

awalan me), tunggal.

 35

5. Nama kerelasian sedapat mungkin menggunakan

nama yang mudah dipahami dan dapat menyatakan

maknanya dengan jelas.

Jenis-jenis kerelasian:

1. Kerelasian jenis 1-ke-1/satu ke satu (one to one),

kerelasian jenis ini hanya terjadi sebuah transaksi

pada kedua entitas, misalnya : satu mahasiswa

hanya memiliki satu wali mahasiswa. Dan satu wali

mahasiswa hanya di perbolehkan untuk mewakili

satu wali.

2. Kerelasian jenis n-ke-1/ banyak ke satu (one to

many) atau 1-ke-n/ satu ke banyak (one to many) ,

kerelasian jenis ini terjadi jika transakasi diantara

dua entitas yang berhubungan hanya

memungkinkan terjadi satu kali dalam entitas

pertama dan dapat terjadi lebih dari satu kali pada

entitas kedua. Misalnya: Banyaknya Mahasiswa

memilih satu jurusan atau satu jurusan di dari

banyaknya mahasiswa.

3. Kerelasian jenis n-ke-n/ banyak ke banyak (many

to many), kerelasian jenis ini terjadi jika transakasi

diantara dua entitas yang berhubungan

 36

memungkinkan lebih dari satu kali dalam entitas

pertama dan entitas kedua.

c. Hierarchy Input Process Output (HIPO)

HIPO dikembangkan oleh personil IBM (Institute

Business Machine) yang terpercaya bahwa dokumentasi

sistem pemrograman yang dibentuk dengan menekankan pada

sungsi-fungsi sistem akan mempercepat pencarian prosedur

yang akan dimodifikasi, karena HIPO menyediakan fasilitas

lokasi dalam bentuk kode dari tiap prosedur dalam suatu

sistem.

HIPO dapat digunakan untuk memenuhi kebutuhan dari

macam-macam pemakai yang menggunakan dokumentasi

untuk tujuan-tujuan yang berbeda, antara lain sebagai berikut:

i. Seorang manager dapat menggunakan dokumentasi HIPO

untuk memperoleh gambaran umum sistem.

ii. Seorang programmer aplikasi dapat menggunakan

dokumentasi HIPO untuk menentukkan fungsi-fungsi

program.

iii. Seorang programmer pemeliharaan dapat menggunakan

dokumentasi HIPO untuk mencari fungsi-fungsi yang akan

dimodifikasi dengan cepat.

 37

1. Menurut Andri Kristanto (2003) HIPO adalah alat

bantu yang digunakan untuk membuat spesifikasi

program. HIPO terdiri atas 2 bagian yaitu:

2. Hierarchy Chart : Digunakan untuk

menggambarkan struktur program.

3. HIPO (Hierarky Input Process Output) :

Digunakan untuk menjelaskan atau

menjabarkan masukan, keluaran dan proses yang terjadi

pada model yang bersangkutan.

d. Flowchart

Flowchart merupakan bagan-bagan yang mempunyai

arus yang mengambarkan langkah-langkah penyelesaian suatu

mamasalah. Flowchart merupakan cara penyajian suatu

algoritma.

Ada dua macam flowchart yang mengambarkan proses

dengan komputer, yaitu:

i. System Flowchart

Bagan yang memperlihatkan urutan proses dalam

sistem dengan menunjukkan alat media input, output serta

jenis media penyimpanan dalam proses pengolahan data.

ii. Program Flowchart

 38

Bagan yang memperlihatkan urutan instruksi yang

digambarkan dengan symbol tertentu untuk memecahkan

masalah dalam suatu program.

Simbol-simbol yang digunakan untuk menggambarkan

Flowchart adalah sebagai berikut:

Nama Simbol Simbol

Dokumen

Multi Dokumen

Disk Storage

Terminator

Dynamic Connector

On-Page Reference

Decision

Off-Page Reference

Alternative

Data

Gambar 11. Simbol-simbol pada Flowchart

e. Kamus Data

Kamus data merupakan suatu penjelasan yang tertulis

mengenai data yang berada dalam database, yang disimpan

dalam bentuk hard copy dengan mencatat semua penjelasan

data dalam bentuk tercetak, (Kadir, 1999).

 39

3.1.4. Analisis Sistem Diusulkan

Seperti yang telah diuraikan pada analisis hasil solusi diatas, maka

peneliti ingin mengusulkan kepada pihak ETI dengan sebuah sistem baru

yang bernama “Perancangan dan Pembuatan Website Escola Técnica

Informática (ETI) Dengan Menggunakan PHP dan MySQL”, karena

dengan website yang diusulkan ini bisa dapat memberikan manfaat bagi

institusi tersebut, karena dengan website ini, bisa dapat

menginformasikan seluruh aktivitas yang berhubungan dengan data-data

siswa-siswi, guru-guru dan seluruh fasilitas yang digunakan pada sekolah

tersebut dengan teratur, cepat diakses informasinya dan dengan informasi

yang didapatnya, pihak-pihak yang telah mendapatkan infrormasi terse

but bisa membuat keputusan dengan cepat, tepat, dan akurat. Adapun

flowchart sistem yang akan diusulkan pada sistem ini digamabarkan

sebagai berikut:
 40

Tata Usaha Admin Penggunjung

Star

Tidak Proses Cari

Informasi
Cek Dokumen
Dokumen-
dokumen Ya

Tidak
Data- Search Info
Data
Ya

Proses
Upload

Tidak
Upload

Ya

Database
Server

Tidak Tampilan
Cek Data
Informasi
Ya

End

Gambar 13. Flowchart sistem yang diusulkan

3.1.5. Analisis Kelayakan Sistem Diusulkan

Berhubungan dengan Teknologi informasi dan komunikasi yang

sangat maju ini, maka informasi sangat dibutuhkan oleh suatu institusi

baik itu swasta maupun negeri, informasi sebagai sumber hidupnya

 41

sebuah institusi, karena dengan mengakses informasi yang cepat, tepat

dan akurat bisa dapat membantu seseorang untuk mengambil suatu

keputusan dengan cepat, tepat dan bebas dari kesalahan. Website ini juga

tidak membutuhkan hardware dan software sangat trend, tetapi hanya

sekecil spesifikasi sudah mendukung website tersebut. Website ini sangat

dibutuhkan oleh pihak ETI untuk dapat menginformasikan semua

informasinya kepada pihak luar, karena informasi pada suatu institusi

sebagai aliran darah bagi institusi tersebut khususnya ETI, maka untuk itu

informasi yang disampaikan harus cepat, tepat dan akurat.

3.2. Perancangan Sistem

Terdapat beberapa model untuk merancang sistem yang direncanakan.

Dalam pembuatan sistem yang akan dipakai diperlukan beberapa langkah

penyesuaiannya sebagai berikut :

3.2.1. Data Flow Diagram (DFD)

Data Flow Diagram merupakan suatu model logika data atau

proses yang dibuat untuk menggambar dari mana asal data dan kemana

tujuan data yang keluar dari sistem, dimana data itu dapat disimpan dan

proses apa yang akan menghasilkan data tersebut serta interaksi antara

data yang tersimpan dalam proses yang dikenakan pada data tersebut
 42

a. Diagram Konteks

Diagram konteks adalah gambaran yang terdiri dari suatu proses dan

menggambarkan ruang lingkup suatu sistem. Diagram konteks

merupakan level tertinggi dari DFD yang menggambarkan seluruh

input ke sistem atau output dari sistem. Dalam diagram konteks hanya

ada satu proses, tidak boleh ada store dalam diagram konteks.

TU
Data aktivitas extra-kurikuler
Data kbm
Data Profile Sekolah
Berita-Berita

Perancangan dan Informasi aktivitas extra-kurikuler

Informasi aktivitas extra-
kurikuler
Informasi data KBM
Informasi data profile sekolah
Informasi data KBM
Pembuatan Website Escola
Informasi data profile sekolah
Técnica Informática (ETI) Berita-Berita
Dengan Menggunakan
PHP dan MySQL

Cari Informasi aktivitas extra-kurikuler

Cari Informasi KBM
Cari Informasi profile sekolah
Cari Berita
Pengunjung

Gambar 14. Diagram Konteks

 43

b. Diagram Over View

Data Kurikulum
Data Kurikulum

Data Kurikulum

Data Extra-Kurikuler
Tata Usaha Data Profile Sekolah

Data Extra Kurikuler

Data Profile
Data Extra-Kurikuler 1.0
Upload Data
Berita-berita
Data Profile Sekolah
Berita
Data Profile Sekolah

Data Extra-Kurikuler

Berita
Data Berita Data Kurikulum
2.0
Informasi Profile Sekolah
Menampilkan
Informasi Informasi Kegiatan Extra-Kurikuler

Informasi kurikulum

Berita-Berita

Pengunjung

Gambar 15. Diagram 0 / Level 1/ Proses 1.0-2.0

3.2.2. Diagram Berjenjang (HIPO)

Diagram berjenjang dapat digunakan untuk mempersiapkan

pengambaran Diagram Arus Data ke level-level lebih bawah. Diagram

berjenjang dapat digambarkan dengan menggunakan notasi yang

digunakan di Diagram Arus Data. Sehingga pembuatan website ETI dapat

digambarkan sesuai dengan jenjangnya, seperti pada gambar berikut :

 44

a. Diagram berjenjang halaman penggunjung

Perancangan dan Pembuatan Website

Escola Técnica Informática (ETI)

1.0 2.0 3.0 4.0 5.0 6.0 7.0 8.0

Home Profile Aktivitas Berita Kurikulum Video Gallery Promosi

2.1 3.1 5.1

Kurikulum
Sejarah Kurikuler Software
5.2
2.2 3.2
Extra- Kurikulum
Visi Hardware
Kurikuler
2.3 5.3
Kurikulum
Misi Multimedia
2.4

Fasilitas

2.5
Tenaga
Pengajar
2.6
Siswa/
Siswi

Gambar 16. Diagram Berjenjang

3.2.4 Entity Relationship Diagram (ER-D)

Model entity relationship yang berisi komponen-komponen

himpunan entitas dan himpunan relasi yang masing-masing dilengkapi

dengan atribut-atribut yang mempresentasikan seluruh fakta dari dunia

nyata yang ditinjau, sehingga dapat digambarkan dengan lebih sistematis

dengan menggunakan ER-Diagram. Ada dua perancangan ER_D pada

 45

sistem ini, yaitu ER_D untuk penggunjung dan admin seperti tampak

pada gambar dibawah ini:

a. Entity Relatioship Diagram (ER_D) Penggunjung

Album Galery Tag

* Id_album * Id_galery * id_tag
Jdl_album **id_album nm_tag
Album_seo jdl_galery tag_seo
Gbr_album galery_seo count
aktif Gbr_galery
Berita
Tipe_Lider Lider * id_berita
** id_tag
* id_tlider * id_lider
username
tipe_lider ** id_tipe_lider
jdl_berita
aktif nm_lider
judul_seo
Jabatan
isi_berita
kategori Foto
Hari
data
* id_kategori Judul
nm_kategori Gambar
kategori_seo ** id_kategori
aktif
status

Gambar 17. ER- Diagram Penggunjung

a. Entity Relatioship Diagram (ER_D) Admin

Submenu
Menu Modul
* id_submenu
** id_menu * id_menu * id_modul
Nm_submenu main_menu ** link
** id_modul id_modul nm_modul
aktif gambar
publish
User
status
* username Admin aktif
* password urutun
nm_lengkap * username ** link_seo
email * password
no_telp aktif
level
blokir

Gambar 18. ER- Diagram Admin

 46

3.2.5 Kamus Data Tabel

a. Kamus Data User

Kamus Data Tabel Album

Nomor Tabel Kode Tabel Nama Tabel

Di Sistem Di Program
1 D1
Tabel Album t_album
Kunci Primer Id_album
Kunci Sekunder
Nama Field
No Type Field Lebar Field
Di Sistem Di Program
1 ID Album Id_album int 5
2 Judul Album Jdl_album Varchar 100
3 Album Seo Nm_album Varchar 100
4 Gambar Album Gbr_album Varchar 100
5 Status status enum Y,N
Tabel 1. Kamus data Tabel Album

Kamus Data Tabel Gallery

Nomor Tabel Kode Tabel Nama Tabel

Di Sistem Di Program
2 D2
Tabel Gallery Gallery
Kunci Primer Id_ Gallery
Kunci Sekunder Id_album
Nama Field
No Type Field Lebar Field
Di Sistem Di Program
1 ID Gallery Id_galeri Int 5
2 ID Album id_album Int 5
3 Judul Gallery Jdl_galeri Varchar 100
4 Gallery Seo Galleri_seo Varchar 100
5 Keterangan keterangan Text
6 Gambar Gallery Gbr_gallery Varchar 100
Tabel 2. Kamus data Tabel Foto
 47

Kamus Data Tabel Kategori

Nomor Tabel Kode Tabel Nama Tabel

Di Sistem Di Program
3 D3
Tabel Kategori t_kategori
Kunci Primer Kode_kat
Kunci Sekunder
Nama Field
No Type Field Lebar Field
Di Sistem Di Program
1 ID Kategori Id_kategori Int 5
2 Nama Kategori Nama_kategori Varchar 50
3 Kategori Seo Kat_seo Varchar 100
4 Aktif aktif Enum Y,N
5 Posisi posisi int 2
Tabel 3. Kamus data Tabel Kategori

Kamus Data Tabel Tag

Nomor Tabel Kode Tabel Nama Tabel

Di Sistem Di Program
4 D4
Tabel Tag t_tag
Kunci Primer Id_tag
Kunci
Sekunder
Nama Field
No Type Field Lebar Field
Di Sistem Di Program
1 ID Tag Kode_gol Char 5
2 Nama Tag Nama_gol Varchar 100
3 Tag Seo Tag_seo Varchar 100
4 Count count Int 5
Tabel 4. Kamus data Tabel Tag
 48

Kamus Data Tabel Tipe Lider

Nomor Tabel Kode Tabel Nama Tabel

Di Sistem Di Program
5 D5
Tabel Jenis Lider t_jns_lider
Kunci Primer Id_tlider
Kunci Sekunder
Nama Field
No Type Field Lebar Field
Di Sistem Di Program
1 ID Tipe Lider Id_tlider Char 4
2 Nama Type Nm_tlider char 30
3 Aktif aktif Enum Y,N
Tabel 5. Kamus data Tabel Tag

Kamus Data Tabel Lider

Nomor Tabel Kode Tabel Nama Tabel

Di Sistem Di Program
6 D6
Tabel Lider t_ lider
Kunci Primer Id_lider
Kunci Sekunder Id_tlider
Nama Field
No Type Field Lebar Field
Di Sistem Di Program
1 ID Lider Id_lider Char 4
2 Nama Lider Nm_lider Char 30
3 ID Tipe Lider Id_tlider Char 4
4 Jabatan jabatan Char 15
5 Foto foto Varchar 200
6 Data data text -
Tabel 6. Kamus data Tabel Lider

Kamus Data Tabel Berita

Nomor Tabel Kode Tabel Nama Tabel

Di Sistem Di Program
7 D7
Tabel Berita Tberita
Kunci Primer Id_berita
Kunci Id_id_kategori, id_tag
Sekunder
Nama Field
No Type Field Lebar Field
Di Sistem Di Program
1 ID Berita Id_berita Int 5
2 Isi Berita Isi_berita text
3 Username username Varchar 30
4 Judul Berita judul varchar 100
 49

5 Judul Seo Judul_seo varchar 100

6 Hari hari varchar 10
7 Tanggal Tgl date
8 Jam jam time
9 Komentar komentar text
10 Gambar gambar Varchar 5000
11 Oleh oleh varchar 50
12 Dibaca dibaca int 5
13 Tag tag varchar 100
Tabel 7. Kamus data Tabel Berita

b. Kamus Data Tabel Level Admin

Kamus Data Tabel User

Nomor Tabel Kode Tabel Nama Tabel

Di Sistem Di Program
8 D8
Tabel Users Users
Kunci Primer Username, Password
Kunci Sekunder
Nama Field
No Type Field Lebar Field
Di Sistem Di Program
1 User Name Username varchar 30
2 Password password varchar 30
3 Nama Lengkap Nm_lengkap varchar 50
4 Email email varchar 50
5 No. Telp No_telp varchar 15
6 Level level varchar 10
7 Status Status Enum Y,N
Tabel 8. Kamus data Tabel User

Kamus Data Tabel Admin

Nomor Tabel Kode Tabel Nama Tabel

Di Sistem Di Program
9 D9
Tabel Admin t_admin
Kunci Primer Id_admin
Kunci Sekunder
Nama Field
No Type Field Lebar Field
Di Sistem Di Program
1 User Name Username varchar 30
2 Password password varchar 30
3 Nama Lengkap Nm_lengkap varchar 50
 50

4 Email email varchar 50

5 No. Telp No_telp varchar 15
6 Level level varchar 10
7 Status Status Enum Y,N
Tabel 8. Kamus data Tabel Admin

Kamus Data Tabel Menu

Nomor Tabel Kode Tabel Nama Tabel

Di Sistem Di Program
10 D10
Tabel Menu Menu
Kunci Primer Id_menu
Kunci Sekunder Link_menu
Nama Field
No Type Field Lebar Field
Di Sistem Di Program
1 ID Menu Id_menu Int 5
2 Nama Menu Nm_menu Varchar 50
3 Link link Varchar 100
4 Aktif aktif Enum Y,N
Tabel 9. Kamus data Tabel Menu

Kamus Data Tabel Sub-Manu

Nomor Tabel Kode Tabel Nama Tabel

Di Sistem Di Program
11 D11
Tabel SubMenu Submenu
Kunci Primer Id_sub+menu
Kunci Sekunder Link, id_menu
Nama Field
No Type Field Lebar Field
Di Sistem Di Program
1 ID Sub-Menu Id_sub-menu int 5
2 Nama SubMenu Nm_submenu varchar 50
3 Link link varchar 100
4 ID Main Id_main int 5
Tabel 10. Kamus data Tabel Submenu

Kamus Data Tabel Modul

Nomor Tabel Kode Tabel Nama Tabel

Di Sistem Di Program
12 D12
Tabel Modul Modul
Kunci Primer Id_modul
Kunci Link, link_seo
Sekunder
 51

Nama Field
No Type Field Lebar Field
Di Sistem Di Program
1 ID Modul Id_modul Int 5
2 Nama Modul Nm_modul text
3 Link link Varchar 100
4 Static Comment St_comment text
5 Gambar gambar varchar 100
6 Publish publish Enum Y,N
7 Status status Enum User, Admin
8 Aktif aktif Enum
9 Urutan urutan int
10 Link Seo Link_seo
Tabel 11. Kamus data Tabel Modul

3.2.6 Perancangan Interface

Perancangan interface merupakan sebuah alat yang digunakan

untuk yang digunakan oleh seorang perancang untuk menjelaskan

mengenai interface yang akan diggunakan oleh para pengguna informasi

tersebut, maka untuk itu diperlukan sebuah kraativitas dari seorang

perancang untuk dapat merancang interface yang menarik dan inovasi,

sehingga para penggunjung dengan sangat senang untuk dapat

berinteraksi dan berkomunikasi dengan informasi yang diperlukan.

Adapun perancangan interface dari penggunjung dan admin untuk

website ini adaah sebagai berikut:

 52

a. Perancangan Interface Penggunjung

Header

Main Menu

Side Bar
Content
Menu

Footer

Gambar 19. Interface Penggunjung

b. Perancangan Interface Admin

Header

Main Main
Content
Menu Menu

Footer

Gambar 20. Interface Admin

 53

c. Perancangan interface upload data pada admin

Perancangan interface admin untuk melakukan upload data ke

website ini, dan kemudian akan menjadi informasi bagi para

penggunjung. Adapun perancangannya adalah sebagai berikut:

i. Halaman Home

Gambar

Pilih Gambar

Fasilitas Formating Text

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Update

Gambar 21. Perancangan Upload Data Halaman Utama

ii. Halaman Input Data User

Edit User

Username
Password
Nama Lengkap
E-Mail
No. Kontak

Blokir Y N

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Update Batal

Gambar 22. Perancangan Upload Data User

 54

Tambah User

No Username Nama Lengkap E-Mail No.Telp/Hp Blokir Aksi

1 xxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxx xxxxxxxx@gmail.co xxxxxxxxxxxx x xxx

2 xxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxx xxxxxxxx@gmail.co xxxxxxxxxxxx x xxx

Gambar 23. Perancangan Hasil Upload Data user

iii. Halaman Input Data Album

Edit Album

Judul Album

Gambar

Ganti Gambar Pilih Gambar

Aktif Y N

Update Batal

No Judul Album Aksi

1 xxxxxxxxxxxx xxx

2 xxxxxxxxxxxx xxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Gambar 24. Perancangan Upload Data album

iv. Perancangan Halaman Input Data Galeri

Edit Album

Judul Foto

Keterangan

Ganti Gambar Pilih Gambar

Tipe gambar harus Jpg/Jpeg

Simpan Batal

Tambah Galeri Foto

No Judul Foto Album Aksi

1 xxxxxxxxxxxx xxxxxxxxxxxx xxx

2 xxxxxxxxxxxx xxxxxxxxxxxx xxx

3 xxxxxxxxxxxx xxxxxxxxxxxx xxx

4 xxxxxxxxxxxx xxxxxxxxxxxx xxx

Gambar 25. Perancangan Upload Data Galeri Foto

 55

v. Perancangan Halaman Input Data Kategori

Tambah Kategori

Nama Kategori
Posisi

Simpan Batal

Tambah Kategori

No Nama Kategori Posisi Aksi

1 xxxxxxxxxxxx xx xxx

2 xxxxxxxxxxxx xx xxx

3 xxxxxxxxxxxx xx xxx

4 xxxxxxxxxxxx xx xxx

Gambar 26. Perancangan Upload Data Kategori

vi. Perancangan Halaman Input Data Tipe Lider

Tambah Tipe Lider

Lider Untuk

Aktif Y N

Update Batal

Tambah Lider

No Tipe Lider Status Aksi

1 xxxxxxxxxxxx x xxx

2 xxxxxxxxxxxx x xxx

3 xxxxxxxxxxxx x xxx

4 xxxxxxxxxxxx x xxx

Gambar 27. Perancangan Upload Data Tipe Lider

 56

vii. Perancangan Halaman Input Data Lider

Tambah Data Lider

Nama Lider

Tipe Lider

Foto Pilih Foto

Keterangan

Simpan Keluar

Tambah Data Lider

No ID Lider Nama Lider Keterangan Lider Foto Aksi

1 x xxxxxxxxxxxxxxxxxxxxx x xxx xxxx | xxxx

2 x xxxxxxxxxxxxxxxxxxxxx x xxx xxxx | xxxx

3 x xxxxxxxxxxxxxxxxxxxxx x xxx xxxx | xxxx

4 x xxxxxxxxxxxxxxxxxxxxx x xxx xxxx | xxxx

Gambar 28. Perancangan Upload Data Lider

viii. Perancangan Halaman Input Data Berita

Tambah Berita Masukan Judul Berita Cari

Judul Berita

Kategori

Isi Berita

Foto Pilih Foto

Simpan Keluar

Tambah Berita

No Judul Tgl Posting Aksi

1 xxxxxxxxxxxxxxxxxxxxx x xxxx | xxxx

2 xxxxxxxxxxxxxxxxxxxxx x xxxx | xxxx

Gambar 29. Perancangan Upload Data Berita

 57

ix. Perancangan Halaman Input Data Informasi

Tambah Berita Masukan Judul Berita Cari

Judul Berita

Kategori

Isi Berita

Foto Pilih Foto

Simpan Keluar

Tambah Berita

No Judul Tgl Posting Aksi

1 xxxxxxxxxxxxxxxxxxxxx x xxxx | xxxx

2 xxxxxxxxxxxxxxxxxxxxx x xxxx | xxxx

` Gambar 30. Perancangan Upload Data Berita

x. Perancangan Halaman Input Data User

Tambah User

Username

Password

Nama Lengkap

No. Telp/Hp

Simpan Batal

Tambah User

No Username Nama Lengkap E-Mail Blokir Aksi

1 xxxxxxxxxxxx xxxxxxxxxxxx xxxxxxxxxxxx x xxxx

2 xxxxxxxxxxxx xxxxxxxxxxxx xxxxxxxxxxxx x xxxx

3 xxxxxxxxxxxx xxxxxxxxxxxx xxxxxxxxxxxx x xxxx

4 xxxxxxxxxxxx xxxxxxxxxxxx xxxxxxxxxxxx x xxxx

Gambar 31. Perancangan Input Data User

 58

xi. Perancangan Halaman Input Menu Utama

Tambah Menu Utama

Nama Menu

Link

Simpan Batal

Tambah Menu Utama

No Menu Utama Link Modul Aktif Aksi

1 xxxxxxxxxxxx Xxxxxxxxxxxxx.xxxx x xxxx

2 xxxxxxxxxxxx Xxxxxxxxxxxxx.xxxx x xxxx

3 xxxxxxxxxxxx Xxxxxxxxxxxxx.xxxx x xxxx

4 xxxxxxxxxxxx Xxxxxxxxxxxxx.xxxx x xxxx

Gambar 32. Perancangan Input Menu Utama

xii. Perancangan Halaman Input Sub-Menu

Tambah Menu Utama

Nama Sub-Menu

Menu Utama

Link Modul

Simpan Batal

Tambah Sub-Menu

No Sub-Menu Menu Utama Link Modul Aksi

1 xxxxxxxxxxxx Xxxxxxxxxxxxx.xxxx xxxxxx.xxxx xxxx | xxxx

2 xxxxxxxxxxxx Xxxxxxxxxxxxx.xxxx xxxxxx.xxxx xxxx | xxxx

3 xxxxxxxxxxxx Xxxxxxxxxxxxx.xxxx xxxxxx.xxxx xxxx | xxxx

4 xxxxxxxxxxxx Xxxxxxxxxxxxx.xxxx xxxxxx.xxxx xxxx | xxxx

Gambar 33. Perancangan Input Sub-Menu

 59

xiii. Perancangan Halaman Input Data Modul

Tambah Modul

Nama Modul

Link

Status User Admin

Simpan Batal

Tambah Modul

No Nama Modul Link Publish Aktif Status Aksi

1 xxxxxxxxxxxx xxxxxx.xxxx x x xxxxx xxxx | xxxx

2 xxxxxxxxxxxx xxxxxx.xxxx x x xxxxx xxxx | xxxx

3 xxxxxxxxxxxx xxxxxx.xxxx x x xxxxx xxxx | xxxx

4 xxxxxxxxxxxx xxxxxx.xxxx x x xxxxx xxxx | xxxx

Gambar 34. Perancangan Input Data Modul