T0 562010015 BAB III

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 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

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 Artikel Ya

User Vaild Ya

End tidak Tidak

Database Artikel

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 Komentar Masukkan komentar Ya 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

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

Formlogin, merupakan halaman yang disediakan hanya

untuk admin agar admin dapat mengontrol website yang

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

Form Post Artikel merupakan halaman yang disediakan untuk admin agar dapat menambahkan informasi.

Gambar 3.7 LKT Post Artikel

Form Home ini berisi tentang garis besar dari website photography information.

Gambar 3.8 LKT Home

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

Form galeri ini berisi hasil – hasil foto yang telah di ambil oleh fotografer sebagai referensi para pengguna

website ini.

Gambar 3.10 LKT Galery

Form About ini berisi tentang informasi dan data

pembuat website photography information.

Gambar 3.11LKT About

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

a. Tabel Struktur Database Studio PhotoOnline

Berikut adalah tabel struktur yang terdapat pada

Aplikasi StudioPhotoOnline.

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

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

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

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

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

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.26 Tabel News 3

Gambar 3.27 Tabel About

Gambar 3.28 Tabel Contact 1

Gambar 3.29 Tabel Contact 2

Gambar 3.31 Tabel Data 1

Gambar 3.32Tabel Data 2

Gambar 3.33Tabel Data 3

Gambar 3.34Tabel Data 4

Gambar 3.36 Tabel Comment

3.4.10 Eksport dan Import database a. Proses Import Database

Sebelum melakukan importdatabase, pertama kita

harus membuat blankdatabase terlebih dahulu.

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

Setelah semua proses dilakukan maka langsung

tekan tombol Go untuk menyelesaikan proses import

database

Gambar 3.41Tampilan database telah berhasil di import

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

Tekan tombol Go untuk melanjutkan

Maka akan muncul dialogbox

Gambar 3.44 Tampilan dialog box setelah memilih tombol Go

Kemudian klik ok atau save untuk melakukan

32

Gambar 3.31 Tabel Data 1

Gambar 3.32Tabel Data 2

Gambar 3.33Tabel Data 3

Gambar 3.34Tabel Data 4

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.

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

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

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