13

BAB III

PERANCANGAN SISTEM

3.1 Ruang lingkup aplikasi

Berdasarkan kebutuhan dari pengguna, pembuatan

website ini ditujukan kepada masyarakat yang

membutuhkan informasi studio photo yang dapat dijadikan

rekomendasi bagi mereka sesuai dengan kebutuhan. Penulis

juga menyertakan alamat serta nomor telepon yang dapat

dihubungi apabila masyarakat ingin mendapatkan informasi

lebih lanjut.

3.2 DFD ( Data Flow Diagram )

3.2.1 Data Flow Diagram level 0

Gambar 3.1 Data Flow Diagram Level 0

14

Gambar 3.1 menunjukkan DFD level 0 dimana seorang

Admin yang mengupdate dan mengupload informasi terbaru

yang akan diupdate dan diupload di website yang

selanjutnya website tersebut akan diakses oleh para

pengguna yang akan dijadikan sebagai rekomendasi.

3.2.2 Data Flow Diagram level 1

Gambar 3.2 Data Flow Diagram Level 1

15

Pada gambar 3.2 menunjukkan DFD level 1 dimana

admin masuk ke dalam website, penentuan informasi apa

saja yang diperbahurui yang nantinya setelah semua

informasi telah diperbaharui oleh admin maka akan

ditampilkan pada halaman yang telah disediakan,

kemudian apabila dari user mempunyai informasi –

informasi baru user dapat memberikan komentarnya

pada halaman yang telah disediakan. Admin akan

menampung informasi dari user untuk kemudian website

akan ditambah dengan informasi dari para user.

3.3 Flowchart

3.3.1 FlowChart untuk Admin

Start

Lihat

LogIn Admin

Masukkan

Username dan

Password

Insert dan Update

ArtikelYa

User Vaild Ya

End

tidak

Tidak

Database Artikel

Gambar 3.3 Flow Chart Admin

16

Pada gambar 3.3 menunjukkan Flowchart admin, dimana

admin sebagai aktor utama yang mempunyai hak akses untuk

mengupdate dan mengupload suatu informasi kedalam

website yang nantinya semua pengguna dapat mengetahui

informasi terbaru dari website ini.

3.3.2 Flowchart untuk User

Start

Lihat

KomentarMasukkan

komentarYa

End

Tidak

Database

Komentar

Gambar 3.4 Flow Chart User

Pada gambar 3.4 menunjukkan Flowchart User dimana

aktor yang adalah user itu sendiri. User dapat melihat isi

dari website ini dan user dapat memberikan komentar

kedalam website ini baik berupa saran maupun kritik

17

terhadap website maupun informasi – informasi seputar

dunia fotografi.

3.4 Lembar Kerja Tampilan

Perancangan web ini menggunakan software bantuan

WampServer Version 2.1 yang dikoneksikan secara offline

untuk membuat koneksi dengan cara lokal dan dengan

bahasa pengkodean yang digunakan pada perancangan web

ini adalah menggunakan PHP.

Susunan LKT di bawah ini terdiri dari :

a. Coding pembuatan web.

b. Cara mengkoneksikan ke PhpMyAdmin.

c. Cara pembuatan database pada PhpMyAdmin.

d. Cara Export dan Import database pada PhpMyAdmin

3.4.1 Form Login

Form login, merupakan halaman yang disediakan hanya

untuk admin agar admin dapat mengontrol website yang

ada.

18

Gambar 3.5 LKT Form Login

3.4.2 Form Kelola Data

Form Kelola data merupakan halaman yang disediakan

untuk admin agar dapat menginputkan artikel.

Gambar 3.6 LKT Kelola Data

3.4.3 Form Post Artikel

19

Form Post Artikel merupakan halaman yang disediakan

untuk admin agar dapat menambahkan informasi.

Gambar 3.7 LKT Post Artikel

3.4.4 Form Home

20

Form Home ini berisi tentang garis besar dari website

photography information.

Gambar 3.8 LKT Home

3.4.5 Form News

21

Form news berisi tentang berita – berita terbaru seputar

photography information untuk para pengguna website

ini agar dapat mencari rekomendasi tentang tempat –

tempat fotografi di daerah salatiga dan sekitarnya.

Gambar 3.9 LKT News

3.4.6 Form Galery

22

Form galeri ini berisi hasil – hasil foto yang telah di

ambil oleh fotografer sebagai referensi para pengguna

website ini.

Gambar 3.10 LKT Galery

3.4.7 Form About

23

Form About ini berisi tentang informasi dan data

pembuat website photography information.

Gambar 3.11LKT About

3.4.8 Form Contact

24

Form kontak ini berisi tentang informasi kontak –

kontak dari studio - studio fotografi yang di daerah

sekitar salatiga yang bertujuan untuk memudahkan para

pengguna website photography information.

Gambar 3.12 LKT Contact

3.4.9 Design Database

25

a. Tabel Struktur Database Studio Photo Online

Berikut adalah tabel struktur yang terdapat pada

Aplikasi Studio Photo Online.

Gambar 3.13 Tabel Struktur Home\

Tabel struktur home ini berisi tentang struktur dari

sebuah tabel berikut adalah struktur tabelnya

Field Type Keterangan

Judul Varchar(50) Menyimpan data

judul

Info Text Menyimpan data info

Penulis Varchar(30) Menyimpan data

penul;is

Gambar 3.14 Tabel Struktur News

26

Tabel struktur news ini berisi tentang struktur dari

sebuah tabel berikut adalah struktur tabelnya

Field Type Keterangan

Judul Text Menyimpan data judul

Isi Text Menyimpan data isi

website

Gambar 3.15 Tabel Struktur About Me

Tabel struktur About Me ini berisi tentang struktur

dari sebuah tabel berikut adalah struktur tabelnya

Field Type Keterangan

Judul Varchar(20) Menyimpan data

judul

Isi Text Menyimpan data isi

27

Gambar 3.16 Tabel Struktur Contact

Tabel struktur contact ini berisi tentang struktur

dari sebuah tabel berikut adalah struktur tabelnya

Field Type Keterangan

Judul Varchar(30) Menyimpan data judul

Isi Text Menyimpan data isi

Gambar 3.17 Tabel Struktur Artikel

Tabel struktur Artikel ini berisi tentang struktur

dari sebuah tabel berikut adalah struktur tabelnya

Field Type Keterangan

Id Int(11) Auto_increment

Menyimpan data ID

Judul Varchar(20) Menyimpan data

28

judul

Penulis Varchar(20) Menyimpan data

penulis

Isi Text Menyimpan data isi

Tanggal Date Menyimpan data

tanggal

Gambar 3.18 Tabel Struktur Data

Tabel struktur Data ini berisi tentang struktur dari

sebuah tabel berikut adalah struktur tabelnya

Field Type Keterangan

Intermez1 Text Menyimpan data

intermezo

Gambar 3.19 Tabel Struktur Comment

29

Tabel struktur Comment ini berisi tentang struktur

dari sebuah tabel berikut adalah struktur tabelnya

Field Type Keterangan

ID Int(11) Menyimpan data ID

Nama Varchar(10) Menyimpan data nama

Email Varchar(20) Menyimpan data

Email

Website Varchar(20) Menyimpan data

Website

Komentar Text Menyimpan data

komentar user

Date Date Menyimpan data

tanggal

Art_id Int(11) Menyimpan data Id

secara berurutan

Art_url Int(11) Menyimpan data url

secara urut

b. Isi Tabel Database Aplikasi Studio Photo Online

Berikut adalah tabel – tabel yang digunakan dalam

Aplikasi Studio Photo Online:

30

Gambar 3.20 Tabel Home 1

Gambar 3.21Tabel Home 2

Gambar 3.22 Tabel Home 3

Gambar 3.23 Tabel Home 4

Gambar 3.24 Tabel News 1

Gambar 3.25 Tabel News 2

31

Gambar 3.26 Tabel News 3

Gambar 3.27 Tabel About

Gambar 3.28 Tabel Contact 1

Gambar 3.29 Tabel Contact 2

Gambar 3.30 Tabel Contact 3

32

Gambar 3.31 Tabel Data 1

Gambar 3.32Tabel Data 2

Gambar 3.33Tabel Data 3

Gambar 3.34Tabel Data 4

Gambar 3.35Tabel Artikel

33

Gambar 3.36 Tabel Comment

3.4.10 Eksport dan Import database

a. Proses Import Database

Sebelum melakukan import database, pertama kita

harus membuat blank database terlebih dahulu.

Gambar 3.37 Tampilan membuat database baru

34

Gambar 3.38 Tampilan setelah memilih menu

import

Gambar 3.39 Tampilan dialog box setelah user

memilih tombol browse untuk memilih database

yang akan diimport

Gambar 3.40 Tampilan setelah memilih file rar

database yang akan diimport

35

Setelah semua proses dilakukan maka langsung

tekan tombol Go untuk menyelesaikan proses import

database

Gambar 3.41Tampilan database telah berhasil

di import

36

Gambar 3.42 Tampilan isi keseluruhan

database setelah berhasil di import

b. Proses Eksport Database

Mula – mula pilih database yang akan di eksport

kemudian pilih menu eksport untuk memulai proses

eksport database

Gambar 3.43Tampilan halaman proses eksport

database

37

Tekan tombol Go untuk melanjutkan

Maka akan muncul dialog box

Gambar 3.44 Tampilan dialog box setelah

memilih tombol Go

Kemudian klik ok atau save untuk melakukan

proses eksport database