BAB III PEMBAHASAN. MAP Studio atau singkatan dari Made In Plered Studio didirikan oleh Pak

(1)

30

PEMBAHASAN

3.1. Tinjauan Perusahaan 3.1.1. Sejarah Perusahaan

MAP Studio atau singkatan dari Made In Plered Studio didirikan oleh Pak Paudja sebagai pemilik studio pada tahun 1997, pada awalnya Map Studio adalah studio musik, sesuai dengan namanya MAP Studio (Made in Plered Studio) berlokasi di Kp. Sindang Palay Rt 06/02, Desa. Sindang Sari, Kec. Plered, Kab. Puwakarta. Lalu pada tahun 2008 MAP studio berubah fungsi dari studio musik menjadi studio fotografi dikarenkan permintaan dan perminatan masyarakat yang tinggi dengan layanan jasa fotografer.

Bisnis fotografi yang semakin maju setiap tahunnya membuat MAP Studio merekrut karyawan pada tahun 2010, sebelumnya karyawan yang dipekerjakan adalah orang-orang yang bekerja di studio musik MAP Studio yang kemudian dilatih terlebih dahulu untuk menguasai dunia fotografi selama 6 (enam) bulan. Studio Foto MAP Studio (Made In Plered Studio) adalah salah satu bisnis fotografi yang bergerak dalam bidang industri kreatif photography dan

videographydiantaranya adalah pembuatan video klip, foto wedding, foto prewedding, dan sebagainya. Nomor: 510/SIPK.00260/BPMPTSP/ I / 2008.

(2)

3.1.2. Struktur Organisasi dan Fungsi

Struktur Organisasi merupakan unsur yang sangat penting dalam menerapkan cara-cara pengawasan yang efektif dan dasar dalam pelimpahan wewenang dan tanggung jawab. Struktur Organisasi MAP Studio berbentuk bagan yang terstruktur dengan tanggung jawab dan wewenang masing-masing dimana dalam organisasi tersebut terdapat pembagian tugas yang jelas dan terkoordinasi.

Pemilik MAP Studio Adminstrasi Kariyawan Editing Photografer Cameramen

Sumber: MAP Studio (2017)

Gambar III.1.

(3)

Fungsi dari tiap-tiap bagian adalah sebagai berikut:

1. Pemilik Studio memiliki tanggung jawab terhadap penentuan arah perusahaan, mengambil keputusan dan kebijakan terhadap situasi-situasi yang dapat memajukan perusahaan.

2. Bagian Administrasi bertanggung jawab terhadap sirkulasi dan pengolahan data pemesanan photo studio yang telah di lakukan oleh pelanggan dan memberikan keterangan dan informasi kepada konsumen tentang proses dan ketentuan pemesanan.

3. Kariyawan bertugas untuk menjalankan segala aktifitas perusahaan dan menyiapkan segala kebutuhan yang diperlukan oleh Photografer atau

cameramen dalam setiap event (acara).

4. Cameramen berfungsi untuk merekam gambar dari acara/peristiwa dan

bertanggung jawab untuk mengambil gambar yang fokus,

mengkomposisikan gambar yang tepat, mengatur tingkat suara agar sesui, untuk menghasilkan video yang terbaik.

5. Photografer bertugas dalam mengambil gambar yang fokus dan menangkap moment-moment dalam suatu event (peristiwa) yang dapat di kenang dalam photo.

6. Editing bertugas untuk mengedit file-file yang telah di berikan oleh cameramen dan photografer untuk menghasilkan video serta photo yang terbaik.

(4)

3.2. Analisa Kebutuhan

A. Analisa Kebutuhan Sistem

Pengunjung tidak login untuk melihat-lihat paket yang tersedia. Ketika

Customer ingin memesan paket yang tersedia di website MAP Studio. customer

terlebih dahulu harus memilih kategori paket, setelah memilih paket yang di inginkan customer diminta untuk mengisi data diri terlebih dahulu setelah memilih, customer diminta memasukan jadwal acara setelah semuanya dilakukan

customer di arahkan untuk melakukan pembayaran. untuk pembayaran di website

ini ada dua kali proses pembayaran, ada DP dan pelunasan. Untuk mengelola data admin harus melalukan login terlebih dahulu menggunakan username dan

password yang sebelumnya telah dibuat. Dalam website ini admin dapat

menginput paket, galeri, kategori, info, dan merubah status pembayaran customer yang telah memesan paket foto yang sudah mereka pilih.

B. Analisa Kebutuhan Pengguna

Berikut ini adalah kebutuhan pengguna dari keseluruhan fungsi situs web MAP Studio, diantaranya :

1. Pengunjung

a. Hanya dapat melihat situs web yang menawarkan jasa photografi dan bisa melihat list paket yang di tawarkan oleh maap studio. b. Pengunjung juga dapat memesan paket tanpa harus login terlebih

dahulu dengan memilih kategori apa yang diinginkan tapi harus mengisi data diri terlebih dahulu sebelum melakukan pemesanan.

(5)

2. Admin

Fungsi Admin pada website MAP Studio sebagai berikut:

a. Admin selalu dapat meng-update ,mengubah dan menghapus data dan memperbaharui informasi yang terdapat pada website sistem informasi studio foto berbasis web.

b. Admin dapat melihat data pelanggan yang sudah memesan. c. Admin dapat mengupdate data pembayaran.

d. Admin dapat melihat pesan dari pelanggan (kritik,saran, dan testimoni).

e. Admin dapat melihat report transaksi pelanggan. 3. Customer

Fungsi Customer pada website MAP Studio sebagai berikut :

Pengunjung dapat melakukan transaksi pembelian setelah mengisi data customer.

a. Customer dapat memesan paket yang ditawarkan oleh website MAP Studio dengan melakukan mengisi data customer.

b. Customer dapat memilih tanggal acara yang mereka inginkan. c. Customer dapat melakukan pembayaran pemesanan.

d. Customer dapat melihat status pembayaran dan dapat mengupload bukti pembayarannya.

e. Customer dapat mengirimkan saran, kritik dan testimoni pada website MAP Studio.

(6)

3.3. Perancangan Perangkat Lunak 3.3.1. Rancangan Antar Muka

A. Rancangan Antar Muka Admin 1. Rancangan Antar Muka Login Admin

Halaman Login digunakan untuk bisa masuk kehalaman administator web yang kita buat. Berikut bentuk dari halaman login:

Gambar III.2.

Rancangan Halaman Admin Login LOGIN

Password Username

(7)

2. Rancangan Halaman Beranda

Halaman beranda merupakan halaman utama. Berikut bentuk dari halaman beranda pada admin:

TEXT BERJALAN

zzzzzzzzzzzzzzz

MENU ADMIN INPUT DATA INPUT KATEGORI INPUT PAKET KELOLA DATA DATA PAKET DATA CUSTOMER DATA PEMESANAN DATA PEMBAYARAN KELOLA GALERI TAMBAH DATA GALERI KELOLA TESTIMONI KELUAR TEXT BERJALAN

CONTROL PANEL ADMIN

zzzzzzzzzzzzzzz

CONTROL PANEL ADMIN

TEXT

MENU ADMIN INPUT DATA INPUT KATEGORI INPUT PAKET KELOLA DATA DATA PAKET DATA CUSTOMER DATA PEMESANAN DATA PEMBAYARAN KELOLA GALERI TAMBAH DATA GALERI KELOLA TESTIMONI KELUAR HEADER FOOTER LOGO Gambar III.3

Rancangan Halaman Admin Beranda

3. Rancangan Halaman Iput Data Kategori

Rancangan Halaman Input Data Kategori Pada admin ini berfungsi menginput Data kategori. Berikut tampilannya:

(8)

TEXT BERJALAN

zzzzzzzzzzzzzzz

CONTROL PANEL ADMIN

zzzzzzzzzzzzzzz

MENU ADMIN INPUT DATA INPUT KATEGORI INPUT PAKET KELOLA DATA DATA PAKET DATA CUSTOMER DATA PEMESANAN DATA PEMBAYARAN KELOLA GALERI TAMBAH DATA GALERI KELOLA TESTIMONI KELUAR TEXT BERJALAN INPUT KATEGORI MENU ADMIN INPUT DATA INPUT KATEGORI INPUT PAKET KELOLA DATA DATA PAKET DATA CUSTOMER DATA PEMESANAN DATA PEMBAYARAN KELOLA GALERI TAMBAH DATA GALERI KELOLA TESTIMONI KELUAR HEADER FOOTER LOGO XXXXXXXXXXXXXXX KODE KATEGORI NAMA KATEGORI SIMPAN BATAL NAMA KATEGORI XXXXX XXXXX XXXXX EDIT HAPUS XXXXX EDIT HAPUS KODE KATEGORI XXXXXXXXXXXXXXX Gambar III.4.

Rancangan Halaman Admin Input Data Kategori

4. Rancangan Halaman Input Paket

Rancangan halaman Input Paket pada admin ini berfungsi untuk menginput Paket dari MAP Studio. Berikut Tampilannya:

(9)

TEXT BERJALAN

zzzzzzzzzzzzzzz

CONTROL PANEL ADMIN

zzzzzzzzzzzzzzz

MENU ADMIN INPUT DATA INPUT KATEGORI INPUT PAKET KELOLA DATA DATA PAKET DATA CUSTOMER DATA PEMESANAN DATA PEMBAYARAN KELOLA GALERI TAMBAH DATA GALERI KELOLA TESTIMONI KELUAR TEXT BERJALAN INPUT PAKET MENU ADMIN INPUT DATA INPUT KATEGORI INPUT PAKET KELOLA DATA DATA PAKET DATA CUSTOMER DATA PEMESANAN DATA PEMBAYARAN KELOLA GALERI TAMBAH DATA GALERI KELOLA TESTIMONI KELUAR HEADER FOOTER LOGO XXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXX NAMA PAKET DETAIL CHOOSE FILE SIMPAN SILAHKAN PILIH KATEGORI TERLEBIH DAHULU

PILIH KODE KATEGORI

HALAMAN INPUT PAKET NAMA KATEGORI

PILIH HARGA GAMBAR XXXXXXXXXXXXXXXX BATAL Gambar III.5.

Rancangan Halaman Admin Kelola Data Input Paket

5. Rancangan Halaman Kelola Data Paket

Rancangan halaman kelola data paket pada admin ini berfungsi untuk mengelola data paket dari MAP Studio. Berikut Tampilannya:

(10)

TEXT BERJALAN MENU ADMIN INPUT DATA INPUT KATEGORI INPUT PAKET KELOLA DATA DATA PAKET DATA CUSTOMER DATA PEMESANAN DATA PEMBAYARAN KELOLA GALERI TAMBAH DATA GALERI KELOLA TESTIMONI KELUAR TEXT BERJALAN

CONTROL PANEL ADMIN MENU ADMIN INPUT DATA INPUT KATEGORI INPUT PAKET KELOLA DATA DATA PAKET DATA CUSTOMER DATA PEMESANAN DATA PEMBAYARAN KELOLA GALERI TAMBAH DATA GALERI KELOLA TESTIMONI KELUAR TEXT BERJALAN DATA PAKET MENU ADMIN INPUT DATA INPUT KATEGORI INPUT PAKET KELOLA DATA DATA PAKET DATA CUSTOMER DATA PEMESANAN DATA PEMBAYARAN KELOLA GALERI TAMBAH DATA GALERI KELOLA TESTIMONI KELUAR HEADER FOOTER LOGO ID PAKET XXXXXXXXXXXXXX GAMBAR NAMA KATEGORI NAMA KATEGORI HARGA XXXXXXXXXXXXXX XXXXXXXXXXXXXX NAMA PAKET DETAIL XXXXXXXXXXXXXX XXXXXXXXXXXXXX EDIT HAPUS Gambar.III.6.

Rancangan Halaman Admin Kelola Data Paket

6. Rancangan Halaman Kelola Data Custumer

Rancangan halaman kelola data Custumer admin ini berfungsi untuk menampilkan data custumer MAP Studio. Beriku tampilannya:

(11)

CONTROL PANEL ADMIN

MENU ADMIN INPUT DATA INPUT KATEGORI INPUT PAKET KELOLA DATA DATA PAKET DATA CUSTOMER DATA PEMESANAN DATA PEMBAYARAN KELOLA GALERI TAMBAH DATA GALERI KELOLA TESTIMONI KELUAR TEXT BERJALAN Data Customer MENU ADMIN INPUT DATA INPUT KATEGORI INPUT PAKET KELOLA DATA DATA PAKET DATA CUSTOMER DATA PEMESANAN DATA PEMBAYARAN KELOLA GALERI TAMBAH DATA GALERI KELOLA TESTIMONI KELUAR HEADER FOOTER LOGO

Cari Data Customer

Masukan Nama Customer Cari

Data Customer MAP Studio

ID Customer Nama Alamat No.HP Email

XXXXXX XXXXXX XXXXXX XXXXX XXXXXX

Gambar III.7.

Rancangan Halaman Admin Kelola Data Custumer

7. Halaman Kelola Data Pemesanan

Rancangan halaman Kelola Data Pemesanan pada admin ini berfungsi untuk menampilkan data pemesanan. Berikut Tampilnnya:

(12)

CONTROL PANEL ADMIN

MENU ADMIN INPUT DATA INPUT KATEGORI INPUT PAKET KELOLA DATA DATA PAKET DATA CUSTOMER DATA PEMESANAN DATA PEMBAYARAN KELOLA GALERI TAMBAH DATA GALERI KELOLA TESTIMONI KELUAR TEXT BERJALAN Data Pemesanan MENU ADMIN INPUT DATA INPUT KATEGORI INPUT PAKET KELOLA DATA DATA PAKET DATA CUSTOMER DATA PEMESANAN DATA PEMBAYARAN KELOLA GALERI TAMBAH DATA GALERI KELOLA TESTIMONI KELUAR HEADER FOOTER LOGO

Cari Data Customer

Masukan Nama Customer Cari

Data Customer MAP Studio

Kode Pemesanan Tanggal Pesan ID Customer Nama Paket Harga

XXXXXX XXXXXX XXXXXX XXXXX XXXXXX Tanggal Acara XXXXXX Status Bayar XXXXXX Gambar III.8.

Rancangan Halaman Admin Kelola Data Pemesanan

8. Halaman Pembayaran

Rancangan halaman pembayaran pada admin ini berfungsi untuk mengupdate status pembayaran. Berikut Tampilnnya:

(13)

Gambar III.9. Gambar III.9.

Rancangan Halaman Admin Pembayaran

9. Rancangan Halaman Kelola Galeri Tambah

Rancangan halaman Kelola Galeri Tambah pada admin ini berfungsi untuk menginput Gambar . Berikut tampilannya:

CONTROL PANEL ADMIN

MENU ADMIN INPUT DATA INPUT KATEGORI INPUT PAKET KELOLA DATA DATA PAKET DATA CUSTOMER DATA PEMESANAN DATA PEMBAYARAN KELOLA GALERI TAMBAH DATA GALERI KELOLA TESTIMONI KELUAR TEXT BERJALAN DATA PEMBAYARAN MENU ADMIN INPUT DATA INPUT KATEGORI INPUT PAKET KELOLA DATA DATA PAKET DATA CUSTOMER DATA PEMESANAN DATA PEMBAYARAN KELOLA GALERI TAMBAH DATA GALERI KELOLA TESTIMONI KELUAR HEADER FOOTER LOGO

Cari Data Pembayaran

Masukan Kode Pemesanan Cari

Data Pembayaran

Kode Bayar Tanggal Bayar Kode Pemesanan Harga Bayar DP

XXXXXX XXXXXX XXXXXX XXXXX XXXXXX

Bayar Lunas XXXXXX

Status XXXXXX

(14)

CONTROL PANEL ADMIN

MENU ADMIN INPUT DATA INPUT KATEGORI INPUT PAKET KELOLA DATA DATA PAKET DATA CUSTOMER DATA PEMESANAN DATA PEMBAYARAN KELOLA GALERI TAMBAH DATA GALERI KELOLA TESTIMONI KELUAR HEADER FOOTER LOGO XXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXX NAMA GALERI KETERANGAN CHOOSE FILE SIMPAN GAMBAR BATAL Gambar III.10.

Rancangan Halaman Admin Kelola Galeri Tambah

10. Rancangan Halaman Kelola Galeri Data Galeri

Rancangan halama Data Galeri pada admin ini berfungsi untuk

menampilkan data galeri yg sudah di tambah di halaman sebelumnya. Berikut tampilannya:

(15)

CONTROL PANEL ADMIN

MENU ADMIN INPUT DATA INPUT KATEGORI INPUT PAKET KELOLA DATA DATA PAKET DATA CUSTOMER DATA PEMESANAN DATA PEMBAYARAN KELOLA GALERI TAMBAH DATA GALERI KELOLA TESTIMONI KELUAR HEADER FOOTER LOGO XXXXXXXXXXXXXXXXX 1

ID GALERI NAMA GALERI KETERANGAN

XXXXXXXXXXXXXXXXXX

NAMA GALERI

HAPUS

Gambar III.11.

Rancangan Halaman Admin Kelola Galeri Data Galeri

11. Rancangan Halaman Kelola Testimoni

Rancangan halaman Kelola Testimoni pada admin ini berfungsi untuk menampilkan Testimoni dari pelanggan. Berikut Taampilannya:

(16)

CONTROL PANEL ADMIN

MENU ADMIN INPUT DATA INPUT KATEGORI INPUT PAKET KELOLA DATA DATA PAKET DATA CUSTOMER DATA PEMESANAN DATA PEMBAYARAN KELOLA GALERI TAMBAH DATA GALERI KELOLA TESTIMONI KELUAR TEXT BERJALAN KELOLA TESTIMONI MENU ADMIN INPUT DATA INPUT KATEGORI INPUT PAKET KELOLA DATA DATA PAKET DATA CUSTOMER DATA PEMESANAN DATA PEMBAYARAN KELOLA GALERI TAMBAH DATA GALERI KELOLA TESTIMONI KELUAR HEADER FOOTER LOGO

Data Testimoni Pengunjung Website

No testi Nama Email Tanggal

XXXXXX XXXXXX XXXXXX XXXXX Hapus

Gambar III.12.

Rancangan Halaman Admin Kelola Testimoni

B. Rancangan Atar Muka User

1. Rancangan Halaman Beranda

(17)

beranda pada user . HEADER LOGO TEXT BERJALAN DAFTAR PAKET GALERI HUBUNGI KAMI LOKASI KAMI DAFTAR BOOKING GAMBAR BERJALAN

BERANDA PROFIL PETUNJUK LAYANAN TESTIMONI

GAMBAR BERJALAN

FOOTER

Gambar III.13.

Rancangan Halaman Beranda

2. Rancangan Halaman Profil Sejarah

Halaman Profil Sejarah merupakan halaman Sejarah Perusahaan dari Studio MAP. Berikut dari halaman Profil Sejarah pada user .

(18)

HEADER LOGO TEXT BERJALAN DAFTAR PAKET GALERI HUBUNGI KAMI LOKASI KAMI DAFTAR BOOKING GAMBAR BERJALAN

TEXT SEJARAH MAP STUDIO

FOOTER

SEJARAH

STRUKTUR

Gambar III.14.

Rancangan Halaman Profil Sejarah

3. Rancangan Halaman Profil Struktur

Rancangan halaman Profil Struktur berfungsi untuk informasi Struktur Perusahaan. Berikut tampilannya.

(19)

GAMBAR STRUKTUR MAP STUDIO

FOOTER

SEJARAH STRUKTUR

Gambar III.15.

Rancangan Halaman Profil Struktur

4. Rancangan Halaman Petunjuk Cara Pemesanan

Rancangan halaman petunjuk cara pemesanan untuk informasi cara pemesanan di MAP Studio. Berikut tampilannya.

(20)

FOOTER

CARA PEMESANAN CARA PEMBAYARAN

CARA PEMBAYARAN

GAMBAR GAMBAR GAMBAR GAMBAR GAMBAR

xxxxx xxxxx xxxxx xxxxxx xxxxx

Gambar III.16.

Rancangan Halaman Petunjuk Cara Pemesanan

5. Rancangan Halaman Petunjuk Cara Pembayaran

Rancangan halaman petunjuk cara pembayaran untuk informasi cara pembayaran di MAP Studio. Berikut tampilannya.

(21)

FOOTER

CARA PEMESANAN CARA PEMBAYARAN

CARA PEMBAYARAN

GAMBAR GAMBAR GAMBAR GAMBAR GAMBAR

xxxxx xxxxx xxxxx xxxxxx xxxxx

Gambar III.17.

Rancangan Halaman Petunjuk Cara Pembayaran

6. Rancangan Halaman Layanan Cek Pemesanan

Rancangan halaman layanan Cek Pemesanan untuk informasi bahwa sudah melakukan pembayaran. Berikut tampilannya.

(22)

Gambar III.18.

Rancangan Halaman Layanan Cek Pemesanan

7. Rancangan Halaman Layanan Pembayaran

Rancangan halaman layanan Pembayaran untuk informasi bahwa sudah melakukan pembayaran dan mengupload bukti pembayarannya. Berikut tampilannya. HEADER LOGO TEXT BERJALAN DAFTAR PAKET GALERI HUBUNGI KAMI LOKASI KAMI DAFTAR BOOKING GAMBAR BERJALAN

FOOTER Cek Pemesanan (Booking) Anda

CEK PEMESANAN PEMBAYARAN

(23)

Gambar III.19.

Rancangan Halaman Layanan Pembayaran

8. Rancangan Halaman Testimoni

Halaman testimoni ini merupakan halaman untuk mengisi beragam komentar para custumer. Berikut gambarnya .

FOOTER

Cek Pemesanan (Booking) Anda

CEK PEMESANAN PEMBAYARAN

Masukan Kode Pemesanan Anda XXXXXXXX CARI

Data Pemesanan Anda

Data Pemesanan Customer

Kode bayar Jumlah bayar Pembayaran Bukti xxxxx xxxxx Cose File Pembayaran DP Batal Proses . PEMBAYARAN ( DP)

(24)

Gambar III.15.

Gambar III.20.

Rancangan Halaman Testimoni

9. Rancangan Halaman Daftar Paket

Halaman daftar paket ini berfungsi untuk transaksi para custumer. Berikut gambarnya . HEADER LOGO TEXT BERJALAN DAFTAR PAKET GALERI HUBUNGI KAMI LOKASI KAMI DAFTAR BOOKING GAMBAR BERJALAN

FOOTER Masukan Testimoni Anda

Nama XXXXXXXX

Batal

Testimoni Anda

Hasil Testimoni Anda

SILAHKAN ISI TESTIMONI ANDA

Email _XXXXXXXX

XXXXXXXX

(25)

FOOTER

DAFTAR PAKET MAP STUDIO

ID PAKET NAMA PAKET DETAIL XXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXX KODE KATEGORI NAMA KATEGORI HARGA XXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXX GAMBAR PILIH PAKET Gambar III.21.

Rancangan Halaman Daftar Paket

10. Rancangan Halaman Galeri

Halaman galeri ini berfungsi untuk menampilkan semua gambar berbagi kategori foto. Berikut gambarnya .

(26)

Gambar III.22. Rancangan Halaman Galeri

11. Rancangan Halaman Hubungi Kami

Halaman hubungi kami ini berfungsi untuk menampilkan kontak pemilik MAP Studio. Berikut gambarnya .

FOOTER

GALERI MAP STUDIO

PHOTO

Hasil Photo Studio Keterangan GAMBAR

Video VIDEO

(27)

FOOTER

HUBUNGI KAMI

Untuk Keluhan Atau Informasi Lebih Lanjut Hubungi: Tlpn Email GAMBAR XXXXXXXXX XXXXXXXXX GAMBAR Gambar III.23.

Rancangan Halaman Hubungi Kami

12. Rancangan Halaman Lokasi Kami

Halaman lokasi kami ini berfungsi untuk menampilkan lokasi MAP Studio. Berikut gambarnya .

(28)

FOOTER LOKASI KAMI GOOGLE MAPS GAMBAR PETA Gambar III.24.

(29)

3.3.2.Rancangan Basis Data 1. Entity Relation Diagram (ERD)

customer id_customer nama tempat_lhr ttl jk alamat email no_tlpn melakukan pemesanan kd_pemesanan tgl_pesan id_customer id_paket tgl_acara bln_acara thn_acara jenis_bayar jml_dp sisa_bayar memilih paket id_paket nm_paket detail harga gambar kategori memiliki melakukan pembayaran kd_kategori nm_kategori bayar_lunas status bukti sisa_harga kd_bayar tgl_bayar bayar_dp id_customer kd_kategori id_paket 1 1 1 1 1 M kd_pemesanan 1 1 kd_pemesanan stts_bayar kd_kategori Gambar III.25.

(30)

2. Logical Record Structur (LRS) id_customer (PK) nama tempat_lhr tgl_lhr bln thn jk alamat email no_tlpn customer kd_pemesanan (PK) id_customer (FK) id_paket (FK) tgl_pesan tgl_acara bln_acara thn_acara jns_bayar jml_dp sisa_bayar stts_bayar pemesanan id_paket (PK) kd_kategori (FK) nm_paket detail harga gambar paket kd_kategori (PK) nm_kategori kategori kd_bayar (PK) kd_pemesanan (FK) id_customer tgl_bayar bayar_dp bayar_lunas sisa_harga Status bukti pembayaran 1 1 1 1 M 1 1 1 Gambar III.26.

(31)

3. Spesifikasi File

Spesifikasi file yang digunakan pada web Studio Foto MAP Studio yang penulis buat terdiri dari satu database dan 6 tabel. Berikut penjelasan selengkapnya.

A. Spesifikasi file Admin

Nama File : Admin

Akronim : admin

Fungsi : Untuk menyimpan data username dan password

admin

Tipe File : File Master

Organisasi File :Indexed Sequential

Akses File : Random

Media : Harddisk

Panjang Record :71 character

Kunci File : id_admin

Sofware : MySQL

Tabel III.1. Spesifikasi File Admin

No Elemen Data Akronim Tipe Size keterangan

1 Id Admin id_admin int 11 Primary_key

2 Nama Admin nm_admin Varchar 30

3 usernamen username Varchar 15

(32)

B. Spesifikasi file Customer

Nama File : Customer

Akronim : customer

Fungsi : Untuk menyimpan data customer

Tipe File :File Master

Organisasi File : Indexed Sequential

Media : Harddisk

Panjang Record :263 character

Kunci File : id_customer

Sofware : MySQL

Tabel III.2.

Spesifikasi File Customer

No Elemen data Akronim Tipe Size Ket 1 Id Customer id_customer varchar 20 Primary_key

2 Nama nama Varchar 30 3 Tempat Tanggal

Lahir

ttl Datetime

7 Jenis Kelamin jk Va rchar 15 8 Alamat alamat Varchar 100 9 No Hp no_hp Varchar 13 10 Email email Varchar 30

(33)

C. Spesifikasi file Pemesanan

Nama File : Pemesanan

Akronim : pemesanan

Fungsi : Untuk menyimpan data pemesanan

Tipe File : File Transaksi

Media : Harddisk

Panjang Record : 126 character

Kunci File : id_pemesanan

Sofware : MySQL

Tabel III.3. Spesifikasi File Pemesanan

No Elemen data Akronim Tipe Size Ket 1 Kode Pemesanan kd_pemesanan Varchar 20 Primary_key

2 Id Customer id_customer Varchar 20 Foreign_key

3 Id Paket id_paket int 11 Foreign_key

5 Tanggal Pesan

tgl_pesan Timestamp 6 Tanggal Acara tgl_acara Varchar 5 7 Bulan Acara bln_acara Varchar 15 8 Tahun thn_acara Varchar 5 `9 Jenis Bayar jns_bayar Varchar 15 10 Jumlah DP jml_dp Double

11 Sisa Bayar sisa_bayar varchar 15 12 Status Bayar stts_bayar Varcar 15

(34)

D. Spesifikasi file Paket

Nama File : Paket

Akronim : paket

Fungsi : Untuk menyimpan data informasi paket

Media : Harddisk

Kunci File : id_paket

Sofware : MySQL

Tabel III.4. Spesifikasi File Paket

No Elemen data Akronim Tipe Size Ket 1 Id Paket id_paket Int 11 Primary_key

2 Kode_kategori kd_kategori Varchar 5 Foreign_key

3 Nama Paket nm_paket Varchar 20 5 Detail Detail Varchar 100 6 harga Harga Double

(35)

E. Spesifikasi file Kategori

Nama File : Kategori

Akronim : kategori

Fungsi : Untuk menyimpan data kategori paket

Media : Harddisk

Kunci File : id_kategori

Sofware : MySQL

Tabel III.5.

Spesifikasi File Kategori

No Elemen data Akronim Tipe Size Ket 1 Id Kategori id_kategori Int 11 _{Primary_key} 2 Kode Kategori kd_kategori Varchar 10 _{Primary_key} 3 Nama Kategori nm_kategori Varchar 30

F. Spesifikasi file Pembayaran

Nama File : Pembayaran

(36)

Fungsi : Untuk menyimpan data pembayaran pemesanan paket foto

Tipe File : File Transaksi

Media : Harddisk

Kunci File : id_bayar

Sofware : MySQL

Tabel III.6.

Spesifikasi File Pembayaran

No Elemen data Akronim Tipe Size Ket 1 Kode Bayar Kd_bayar Varchar 20 Primary_key

2 Kode Pemesanan kd_pemesanan Varchar 20 Foreign_key

3 Id Customer Id_customer Varchar 20 4 Tanggal Bayar tgl_bayar Timestamp 5 Bayar Dp bayar_dp Double 5 Bayar Lunas bayar_lunas Double 5 Sisa harga sisa_harga Double 3. 5 Status Status text

5 Bukti Bukti Varchar 30

3.3.3. Rancangan Struktur Navigasi

Struktur navigasi yang digunakan pada web ini adalah navigasi Campuran(composite). Web ini memiliki struktur navigasi untuk user dan struktur navigasi untuk Admin, sehingga struktur navigasinya berbeda. Adapun gambaran mengenai struktur navigasi web ini adalah sebagai berikut :

(37)

1. Struktur Navigasi User

Gambar III.27. Struktur Navigasi User

Index

Daftar Paket Beranda Profil Petunjuk Layanan Testimoni

Galeri Hubungi Kami Lokasi Kami Sejarah Struktur Cara Pesanan Cara Pembayaran Cek Pemesanan Pembayaran Bayar Dp Pelunansan

(38)

2. Struktur Navigasi Admin

Index

Menu Admin Input Data Kelola Data Kelola Galeri Kelola Testimoni Keluar

Data Paket Data Customer Data Pemesanan Tambah Data Galeri Login Edit Edit Edit Data Pembayaran Edit Input Kategori Input Edit Input Paket Edit Edit Edit Input Edit Gambar III.28. Struktur Navigasi Admin

3.4. Implementasi dan Pengujian Unit 3.4.1. Implementasi.

A. Implementasi Rancangan Antar Muka

Implementasi rancangan antar muka pada web foto studio berdasarkan hasil rancangan antarmuka.

(39)

Administator harus melakukan login terlebi dahulu untuk dapat menggunakan mdul-modul yang tersedia jika login berhasil, maka menu-menu yang sesui dengan kategori user tersebut akan ditampilkan.

Gambar III.29. Halaman Login Admin

2. Halaman Beranda Admin

Gambar III.30. Halaman Beranda Admin

(40)

3. Halaman Input Data Kategori

Gambar III.31.

Halaman Input Data Kategori

4. Halaman Input Data Paket

Gambar III.32. Halaman Input Data Paket

(41)

5. Halaman Kelola Data Paket

Gambar III.33. Halaman Kelola Data Paket

6. Halaman Kelola Data Custome

Gambar III.34.

(42)

7. Halaman Kelola Data Pemesanan

Gambar III.35.

Halaman Kelola Data Pemesanan

8. Halaman Kelola Data Pembayaran

Gambar III.36.

(43)

9. Halaman Kelola Galeri Tambah

Gambar III.37.

Halaman Kelola Galeri Tambah

10. Halaman Kelola Data Galeri

Gambar III.38.

(44)

11. Halaman Kelola Testimoni

Gambar III.39. Halaman Kelola Testimoni

12. Halaman Beranda User

Gambar III.40. Halaman Beranda User

(45)

13. Halaman Profil Sejarah User.

Gambar III.41.

Halaman Profil Sejarah User

14. Halaman Profil Struktur.

Gambar III.42. Halaman Profil Struktur

(46)

15. Halaman Petunjuk Cara Pemesanan

Gambar III.43.

Halaman Petunjuk Cara Pemesanan

16. Halaman Petunjuk Cara Pembayaran

Gambar III.44.

(47)

17. Halaman Layanan Cek Pemesanan User.

Gambar III.45.

Halaman Layanan Cek Pemesanan User.

18. Halaman Layanan Pembayaran Bayar DP

00000000000000000

Gambar III.46.

(48)

19. Halaman Layanan Pembayaran Bayar Pelunasan.

Gambar .III.47.

Halaman Layanan Pembayaran Bayar Pelunasan

20. Halaman Daftar Paket User.

Gambar III.48. Halaman Daftar Paket User.

(49)

21. Halaman Isi Data Customer user.

Gambar III.49.

(50)

B. Spesifikasi Sistem Komputer

Berikut ini adalah spesifikasi perangkat keras dan perangkat lunak minimum yang dibutuhkan untuk mengimplementasikan aplikasi untuk pemesanan paket photo.

1. Spesifikasi Perangkat Keras

Adapun spesifikasi hardware (perangkat keras) yang diterapkan pada admin sebagai pengelola Sistem Informasi Foto Studio Berbasis Web ini adalah:

Mikroprosessor : Intel(R) Core(TM) i3-6006u

RAM : 4.00 GB (3.88 GB usable)

Media Penyimpanan : Harddisk 500 GB

Monitor : 16,5 inch

Mouse dan Keyboard: Logitech

Internet : 2.3 Mbps

2. Spesifikasi Perangkat Lunak

Spesifikasi yang digunakan dalam perancangan Sistem Informasi Foto Studio Berbasis Web adalah sebagai berikut :

Sistem Operasi : Microsoft Word 2010

Program : Xampp

Database : MySQL

Browser : Media Ferefox & Google Crome

Editor : Adobe Dreamweaver CS6

(51)

3.4.2. Pengujian Unit.

Pengujian terhadap program yang dibuat menggunakan blacbox testing yang focus terhadap proses masukan dan keluaran program.

1. Pengujian Terhadap Halaman Login Admin

Tabel III.7.

Hasil Pengujian Black Box Testing Halaman Login Admin

No Skenario

pengujian

Test case Hasil yang diharapkan Hasil pengujian kesimpulan

1 Username dan password tidak di isikemudian klik tombol login Username: (kosong) password: (kosong

Sistem akan menolak

akses user dan

menampilkan “password salah!!!”

Sesuai harapan Valid

2 Mengetikkan username dan password tidakdiisiatauko songkemudiankl iktombol login Username: admin password: (kosong Sistemakanmenolak akses user danmenampilkan”passwor dsalah!!!”

3 Username tidakdiisi(koson g) dan password diisi kemudian klik tombol login Username: (kosong) password: admin Sistemakanmenolak

akses user dan

menampilkan”passwordsa lah!!!”

4 Mengetikan salah satu kondisi salah pada username atau password kemudian klik tombol login Username: admin(benar ) password: 123(salah) Sistemakanmenolak akses user dan menampilkan”passwordsa lah!!!”

5 Mengetikkan username dan password dengan data yang benar kemudian klik tombol login Username : admin (benar) password : admin (benar)

Sistem menerima akses

login dan kemudian

langsung menampilkan

menu utama.

(52)

2. Pengujian Terhadap Halaman Admin

Tabel III.8.

Hasil Pengujian Black Box Halaman Admin

No Skenario

pengujian

Test case Hasil yang diharapkan Hasil pengujian kesimpulan

1 Username,

nama admin,

password, dan

foto tidak diisi (kosong) kemudian klik simpan Username: (kosong) nama admin : ((kosong) password: (kosong) foto: (kosong)

Sistem akan menolak

menyimpan data dan

menampilkan validasi

pada text field” data tidak boleh kosong”

2 Mengetikan

Username diisi,

nama admin,

password, dan

foto tidak diisi (kosong) kemudian klik simpan Username: (mpm321) nama admin : ((kosong) password: (kosong) foto: (kosong)

Sistem akan menolak

menyimpan data dan

pada text field nama admin, password foto” tidak boleh kosong”

3 Mengetikan

Username diisi, nama admin di

isi, password,

dan foto tidak

diisi (kosong) kemudian klik simpan Username: (mpm321) nama admin : amir ((kosong) password: (kosong) foto: (kosong

Sistem akan menolak

menyimpan data dan

pada text field password, foto” tidak boleh kosong”

4 Mengetikan

Username diisi, nama admin di isi, password di

isi, dan foto

tidak diisi (kosong) kemudian klik simpan Username: (mpm321) nama admin : amir password: (123 ) foto: (kosong)

Sistem akan menolak

menyimpan data dan

pada text field password, foto” tidak boleh kosong

5 Mengetikan Username, nama admin, password, dan foto diisi kemudian klik simpan Username: (mpm321) nama admin : amir password: (123 ) foto: gambar

Sistem akan menyimpan data dan menampilkan validasi teks pada text field

(53)

3. Pengujian Terhadap Input Data Kategori

Tabel III.9.

Hasil Pengujian Black Box Halaman Input Data Kategori

No Skenario pengujian

Test case Hasil yang diharapkan Hasil pengujian kesimpulan 1 Kode kategori, dan nama kategori tidak diisi (kosong) kemudian klik simpan Kode kategori: (kosong) nama kategori : (Kosong)

Sistem akan menolak menyimpan data dan menampilkan validasi pada text field”Ada Kesalaan Dalam Pengisian Data

-kd_kategori harus diisi -nm_kategori harus diisi” Sesuai harapan Valid 2 Memilih Kode kategori (diisi), dan nama kategori tidak diisi (kosong) kemudian klik simpan Kode kategori: Fto nama kategori : (Kosong))

Sistem akan menolak menyimpan data dan menampilkan validasi pada text field”Ada Kesalaan Dalam Pengisian Data -nm_kategori harus diisi” Sesuai harapan Valid 3 Memilih Kode kategori (diisi), dan nama kategori (diisi)kemudia n klik simpan Kode kategori: Fto nama kategori : foto Sistem akan menyimpan data dan menampilkan validasi teks pada text field

Sesuai harapan

(54)

4. Pengujian Terhadap Input Data Paket

Tabel III.10.

Hasil Pengujian Black Box Halaman Input Data Paket

Test case Hasil yang diharapkan Hasil pengujian kesimpulan 1 Pilih kode kode kategori, Nama Paket, Detail, Harga,Gambar Tidak diisi (kosong) Kemudian klik simpan Pilih kode kode kategori: (kosong) Nama Paket : (kosong) Detail : (kosong) Harga : (kosong) Gambar : (kosong) Sistem akan menolak menyimpan data dan menampilkan validasi pada text field”Ada Kesalaan Dalam Pengisian Data -nm_paket harus diisi

-harga harus diisi -detail harus diisi”

Sesuai harapan Valid 2 Mengetikan Pilih kode kode kategori( diisi), Nama Paket, Detail, Harga,Gambar Tidak diisi (kosong) Kemudian klik simpan Pilih kode kode kategori: (fto) Nama Paket : (kosong) Detail : (kosong) Harga : (kosong) Gambar : (kosong) Sistem akan menolak menyimpan data dan menampilkan validasi pada text field”Ada Kesalaan Dalam Pengisian Data -nm_paket harus diisi

-harga harus diisi -detail harus diisi”

Sesuai harapan Valid 3 Mengetikan Pilih kode kode kategori( diisi), Nama Paket( diiisi), Detail, Harga,Gambar Tidak diisi (kosong) Kemudian klik simpan Pilih kode kode kategori: (fto) Nama Paket : (foto) Detail : (kosong) Harga : (kosong) Gambar : (kosong) Sistem akan menolak menyimpan data dan menampilkan validasi pada text field”Ada Kesalaan Dalam Pengisian Data -harga harus diisi -detail harus diisi

Sesuai harapan Valid 4 Mengetikan Pilih kode kode kategori( diisi), Nama Paket( diiisi), Detail (diisi) Harga,Gambar Tidak diisi Pilih kode kode kategori: (fto) Nama Paket : (foto) Detail : (admin) Harga : (kosong) Sistem akan menolak menyimpan data dan menampilkan validasi pada text field”Ada

Kesalaan Dalam Pengisian Data -harga harus diisi

Sesuai harapan

(55)

(kosong) Kemudian klik simpan (kosong) kemudian klik simpan Gambar : (kosong)Foto : (kosong)

-detail harus diisi

5 Mengetikan Pilih kode kode kategori( diisi) Nama Paket( diiisi) Detail (diisi) Harga (diisi) Gambar Tidak diisi (kosong) Kemudian klik simpan (kosong) kemudian klik simpan Pilih kode kode kategori: (fto) Nama Paket : (foto) Detail : (admin) Harga : (10000) Gambar : (kosong)Foto : (kosong) Sistem akan menolak menyimpan data dan menampilkan validasi pada text field”Ada

Kesalaan Dalam Pengisian Data -harga harus diisi -detail harus diisi

Sesuai harapan Valid 6 Mengetikan Pilih kode kode kategori( diisi) Nama Paket( diiisi) Detail (diisi) Harga (diisi) Gambar (diisi) Kemudian klik simpan (kosong) kemudian klik simpan Pilih kode kode kategori: (fto) Nama Paket : (foto) Detail : (admin) Harga : (10000) Gambar : (kosong)Foto : (kosong Sistem akan menyimpan data dan menampilkan validasi teks pada text field

Sesuai harapan

(56)

5. Pengujian Terhadap Halaman Kelola Galeri Tambah

Tabel III.11.

Hasil Pengujian Black Box Halaman Kelola Galeri Tambah

Test case Hasil yang diharapkan Hasil pengujian kesimpulan 1 Nama galeri , kererangan , foto galeri tidak diisi (kosong) kemudian klik simpan Nama galeri : (kosong) kererangan : (kosong) foto galeri : (kosong) Sistem akan menolak menyimpan data dan menampilkan validasi pada text field”Ada Kesalaan Dalam Pengisian Data “nm_galeri harus diiisi - keterangan Harus di isi Sesuai harapan Valid 2 Mengetikan Nama galeri ( diisi) kererangan , foto galeri tidak diisi (kosong) kemudian klik simpan Nama galeri : (wedding) kererangan : (kosong) foto galeri : (kosong Sistem akan menolak menyimpan data dan menampilkan validasi pada text field”Ada Kesalaan Dalam Pengisian Data “ - keterangan Harus di isi Sesuai harapan Valid 3 Mengetikan Nama galeri kererangan , foto galeri diisi kemudian klik simpan Nama galeri : (wedding) kererangan : (test) foto galeri : (wedding) Sistem akan menyimpan data dan menampilkan validasi teks pada text field

Sesuai harapan

(57)

6. Pengujian Terhadap Halaman Daftar Paket Pengisian Biodata Customer

Tabel III.12.

Hasil Pengujian Black Box Halaman Daftar Paket Pengisian Biodata Customer User

No Skenario pengujian Test case Hasil yang diharapkan

Hasil pengujia

n

kesimpulan

1 Nama, tempat lahir, tanggal lahir,jenis kelmanin,alamat, no.hp, email, kemudian klik simpan Nama: (kosong) tempat lahir( Kosong) tanggal lahir (kosong) jenis kelmanin (kosong) alamat (kosong) no.hp (kosong) email(kosong) Sistem akan menolak menyimpan data dan menampilkan validasi pada text field”Ada Kesalaan Dalam Pengisian Data “ -nama harus diisi – no_hp Harus di isi -email harus diisi, -alamat harus diisi ” Sesuai harapan Valid 2 Mengetikan Nama( diisi) tempat lahir, tanggal lahir,jenis kelmanin,alamat, no.hp, email, tidak diisi (kosong)kemudian klik simpan Nama: (sari) tempat lahir( Kosong) tanggal lahir (kosong) jenis kelmanin (kosong) alamat (kosong) no.hp (kosong) email(kosong Sistem akan menolak menyimpan data dan menampilkan validasi pada text field”Ada Kesalaan Dalam Pengisian Data “ – no_hp Harus di isi -email harus diisi, -alamat harus diisi ” Sesuai harapan Valid 3 Mengetikan Nama( diisi) tempat lahir,(diiisi) tanggal lahir,jenis kelmanin,alamat, no.hp, email, Nama: (sari) tempat lahir( karawang) tanggal lahir (13) jenis kelmanin Sistem akan menolak menyimpan data dan menampilkan validasi pada Sesuai harapan Valid

(58)

Tidak diisi (kosong) kemudian klik simpan (kosong) alamat (kosong) no.hp (kosong) email(kosong text field”Ada Kesalaan Dalam Pengisian Data “ – no_hp Harus di isi -email harus diisi, -alamat harus diisi ” 4 Mengetikan Nama( diisi) tempat lahir,(diiisi) tanggal lahir (diisi),jenis kelmanin (diiisi) alamat, no.hp, email, tidak diisi (kosong)kemudian klik simpan Nama: (sari) tempat lahir( karawang) tanggal lahir (13) jenis kelmanin (perempuan) alamat (kosong) no.hp (kosong) email(kosong Sistem akan menolak menyimpan data dan menampilkan validasi pada text field”Ada Kesalaan Dalam Pengisian Data “ – no_hp Harus di isi -email harus diisi, -alamat harus diisi ” Sesuai harapan Valid 5 Mengetikan Nama( diisi) tempat lahir,(diiisi) tanggal lahir (diisi),jenis kelmanin (diiisi) alamat ( diisi) no.hp, email, tidak diiisi ( kosong)kemudian klik simpan Nama: (sari) tempat lahir( karawang) tanggal lahir (13) jenis kelmanin (perempuan) alamat (cikampek) no.hp (kosong) email(kosong Sistem akan menolak menyimpan data dan menampilkan validasi pada text field”Ada Kesalaan Dalam Pengisian Data “ – no_hp Harus di isi -email harus diisi, Sesuai harapan Valid 6 Mengetikan Nama( diisi) tempat lahir,(diiisi) tanggal lahir (diisi),jenis kelmanin (diiisi) alamat ( diisi) no.hp, email, kemudian klik simpan Nama: (sari) tempat lahir( karawang) tanggal lahir (13) jenis kelmanin (perempuan) alamat (cikampek) no.hp (0987654321) email(kosong Sistem akan menolak menyimpan data dan menampilkan validasi pada text field”Ada Kesalaan Dalam Pengisian Data “ -email harus diisi” Sesuai harapan Valid

(59)

7 Mengetikan Nama( diisi) tempat lahir,(diiisi) tanggal lahir (diisi),jenis kelmanin (diiisi) alamat ( diisi) no.hp( diiisi) email, kemudian klik simpan Nama: (sari) tempat lahir( karawang) tanggal lahir (13) jenis kelmanin (perempuan) alamat (cikampek) no.hp (0987654321) email(sari@gma il.com) Sistem akan menyimpan data dan menampilkan validasi teks pada text field

Sesuai harapan