Pembuatan Website untuk Studio Foto Eikon.

Menjadi bagian dari perkembangan teknologi informasi merupakan sesuatu hal yang
tidak mungkin terelakkan. Internet sudah hampir menguasai seluruh sistem perdagangan
dunia.
Berbagai jenis website dari berbagai jenis perusahaan muncul untuk mendukung
minat dan keperluan masyarakat serta memperluas jaringan perusahaannya.
Melihat perkembangan yang terjadi pada beberapa situs dan kebutuhan akan
informasi semakin meningkat pesat, maka penulis membuat sebuah aplikasi berupa website
bernama Eikon yang dibuat dengan menggunakan teknologi berbasis ASP.NET dan database
SQL Server 2000.
Website eikon merupakan salah satu website yang menawarkan berbagai paketpaket foto. Tujuan utama dari pembuatan website ini adalah membuat sebuah website yang
userfriendly dengan interface yang menarik dan dinamis. Dalam website tersebut terdapat
banyak fitur diantaranya fitur pemesanan paket, upload foto, rating foto dan gallery foto.
Melalui laporan Tugas Akhir ini akan dijelaskan bagaimana cara membuat
keseluruhan website dan sistem transaksi, mulai dari analisis desain sampai hasil dari
implementasi.

Being a part of Information Technology development is something unavoidable.
Internet almost control the whole world trading
A lot of websites from companies come to support the needs from society and
widen the company’s relation.
Nowadays, the sites development and the need op information has increase, so I

make a website application name Eikon which is made by using the ASP.NET technology and
SQL Server 2000 database.
The Eikon is one of site which offering so many kind of photo packets. The main
reason from the making of this website is to make a user friendly with exciting and dynamic
interface.
In this website, there are so many features, such as packet reservation, photo
upload, photo rating and photo gallery.
Through this final assignment, I will explain how to make a website and transaction
system, start from design analysis up to the result of implementation.

ABSTyAK ..................................................................................................................i
ABSTyACT ................................................................................................................ii
DAFTAy ISI ...............................................................................................................iii
DAFTAy GAMBAy ....................................................................................................vii
DAFTAy TABEL .........................................................................................................x
DAFTAy LAMPIyAN ..................................................................................................xi
BAB I PENDAHULUAN ...............................................................................................1
1.1 Latar Belakang .............................................................................................1
1.2 yumusan Masalah........................................................................................2
1.3 Tujuan .........................................................................................................3

1.4 Karakteristik Pengguna ...............................................................................3
1.5 Batasan Masalah .........................................................................................3
1.6 Sistematika Pembahasan ............................................................................5
BAB II DASAy TEOyI..................................................................................................6
2.1 Internet Information Service ( IIS ) ..............................................................6
2.2 Active Server Pages ( ASP ) ..........................................................................6
2.2.1 Koneksi Ke Database .............................................................................9
2.2.2 Tipe Data Visual Basic ...........................................................................10
2.2.3 Perintah ASP .........................................................................................11
2.3 SQL Server ...................................................................................................12
2.3.1 Operator Aritmatika yang dikenal oleh SQL Server ..............................12
2.3.2 Membuat Database ..............................................................................13
2.3.3 Membuat Tabel .....................................................................................13
2.3.4 Perintah SQL .........................................................................................13
2.4 Data Flow Diagram ......................................................................................15
2.5 Ey Diagram ..................................................................................................17
2.6 Internet .......................................................................................................20
BAB III ANALISA DAN PEMODELAN .........................................................................21
3.1 Deskripsi Umum Perangkat Lunak ..............................................................21
3.2 Arsitektur Aplikasi Atau Sistem ...................................................................21

3.2.1 DFD Level 0 ...........................................................................................21
3.2.2 DFD Level 1 ...........................................................................................22

3.2.3 DFD Level 2 Dari 1 .................................................................................23
3.2.4 DFD Level 2 Dari 3 .................................................................................23
3.2.5 DFD Level 3 Dari 1.2 ..............................................................................24
3.2.6 DFD Level 3 Dari 1.3 ..............................................................................25
3.2.7 DFD Level 3 Dari 1.4 ..............................................................................25
3.2.8 DFD Level 3 Dari 3.1 ..............................................................................26
3.2.9 DFD Level 3 Dari 3.2 ..............................................................................27
3.2.10 DFD Level 3 Dari 3.3 ............................................................................27
3.2.11 DFD Level 3 Dari 3.4 ............................................................................28
3.3 Struktur Data Perangkat Lunak ...................................................................29
3.3.1 Kamus Data ...........................................................................................29
3.3.2 Spesifikasi Proses ..................................................................................41
3.4 Tabel Atau Ey Diagram ................................................................................49
3.5 Storyboard ..................................................................................................51
3.5.1 Sitemap .................................................................................................51
3.5.2 Layout Aplikasi ......................................................................................52
3.5.2.1 Layout Aplikasi Untuk Anggota .......................................................52

3.5.2.1.1 Desain Pada Fitur Login .............................................................52
3.5.2.1.2 Desain Pada Fitur Daftar Anggota .............................................52
3.5.2.1.3 Desain Pada Fitur Upload Foto ..................................................53
3.5.2.1.4 Desain Pada Fitur Pemesanan Paket Foto .................................53
3.5.2.1.5 Desain Pada Fitur yating Foto ...................................................54
3.5.2.1.6 Desain Pada Fitur Gallery Foto ..................................................54
3.5.2.2 Layout Aplikasi Untuk Admin ..........................................................54
3.5.2.2.1 Desain Pada Fitur Login .............................................................54
3.5.2.2.2 Desain Pada Fitur Daftar Anggota .............................................55
3.5.2.2.3 Desain Pada Fitur Tambah Paket Foto ......................................55
3.5.2.2.4 Desain Pada Fitur Pemesanan Paket Foto .................................56
3.5.2.2.5 Desain Pada Fitur Upload Foto ..................................................56
3.5.2.2.6 Desain Pada Fitur Konfirmasi Order Pemesanan ......................57
BAB IV PEyANCANGAN DAN IMPLEMENTASI ..........................................................58
4.1 Modul Login Admin .....................................................................................58
4.2 Modul Home Admin ....................................................................................58
4.3 Modul Admin – Paket Foto .........................................................................59

4.4 Modul Admin – Anggota .............................................................................61
4.5 Modul Admin – Pemesanan ........................................................................62

4.6 Modul Admin – Upload Foto .......................................................................64
4.7 Modul Home – Login Anggota ....................................................................65
4.8 Modul Daftar Anggota ................................................................................65
4.9 Modul Paket Foto ........................................................................................66
4.10 Modul Gallery Foto ...................................................................................66
4.11 Modul Kontak ............................................................................................67
4.12 Modul Home Anggota ...............................................................................67
4.13Modul Anggota – Paket Foto .....................................................................68
4.14 Modul Anggota – Pemesanan ...................................................................69
4.15 Modul Anggota – Upload Foto ..................................................................70
4.16 Modul Anggota – yating Foto ...................................................................70
4.17 Modul Anggota – Gallery Foto ..................................................................71
4.18 Modul Anggota – Ubah Password .............................................................71
4.19 Modul Anggota – Lupa Password ..............................................................72
4.20 Modul Anggota – Simulasi Paket Foto ......................................................73
BAB V TESTING DAN EVALUASI ................................................................................74
5.1 Pendahuluan ...............................................................................................74
5.1.1 Evaluasi Keseluruhan Sistem ................................................................74
5.1.1.1 Testing Login Admin dan Anggota ..................................................74
5.1.1.1.1 Form Login Admin .....................................................................74

5.1.1.1.2 Form Login Anggota ..................................................................75
5.1.1.2 Testing Form Daftar Anggota ..........................................................76
5.1.1.2.1 Daftar Anggota Oleh Admin ......................................................76
5.1.1.2.2 Daftar Anggota Oleh Anggota ...................................................76
5.1.1.3 Testing Form Ubah Data Anggota ...................................................77
5.1.1.4 Testing Form Tambah Data Paket Foto ...........................................77
5.1.1.5 Testing Form Ubah Data Paket Foto ...............................................78
5.1.1.6 Testing Form Hapus Data Paket Foto ..............................................78
5.1.1.7 Testing Form Pemesanan Paket Foto .............................................78
5.1.1.7.1 Pemesanan Paket Foto Oleh Admin ..........................................79
5.1.1.7.2 Pemesanan Paket Foto Oleh Anggota .......................................79
5.1.1.8 Testing Form Ubah Pemesanan Paket Foto Oleh Admin.................80

5.1.1.9Testing Form Hapus Pemesanan Paket Foto Oleh Admin ................80
5.1.1.10 Testing Form Upload Foto .............................................................81
5.1.1.10.1 Upload Foto Oleh Admin .........................................................81
5.1.1.10.2 Upload Foto Oleh Anggota ......................................................81
5.1.1.11 Testing Form yating Foto Oleh Anggota .......................................82
5.1.1.12 Testing Form Simulasi Paket Foto Oleh Anggota...........................82
5.1.1.13 Testing Form Ubah Konfirmasi Pemesanan ..................................83

5.2 Whitebox .....................................................................................................84
5.3 Blackbox ......................................................................................................89
BAB VI KESIMPULAN DAN SAyAN ............................................................................92
6.1 Pendahuluan ...............................................................................................92
6.1.1 Kesimpulan ...........................................................................................92
6.1.2 Saran .....................................................................................................92
DAFTAy PUSTAKA ....................................................................................................y-1

Gambar 2.1 Data Flow Diagram (DFD) ....................................................................15
Gambar 2.2 Proses ...................................................................................................16
Gambar 2.3 Store .....................................................................................................17
Gambar 2.4 Model Entity yelationship ...................................................................18
Gambar 2.5 Kardinalitas yelasi ................................................................................20
Gambar 3.1 DFD Level 0 ..........................................................................................22
Gambar 3.2 DFD Level 1 ..........................................................................................22
Gambar 3.3 DFD Level 2 dari 1 ................................................................................23
Gambar 3.4 DFD Level 2 dari 3 ................................................................................24
Gambar 3.5 DFD Level 3 dari 1.2 .............................................................................25
Gambar 3.6 DFD Level 3 dari 1.3 .............................................................................25
Gambar 3.7 DFD Level 3 dari 1.4 .............................................................................26

Gambar 3.8 DFD Level 3 dari 3.1 .............................................................................26
Gambar 3.9 DFD Level 3 dari 3.2 .............................................................................27
Gambar 3.10 DFD Level 3 dari 3.3 ...........................................................................28
Gambar 3.11 DFD Level 3 dari 3.4 ...........................................................................28
Gambar 3.12 Database Diagram .............................................................................49
Gambar 3.13 Ey Diagram ........................................................................................50
Gambar 3.14 Sitemap Admin ..................................................................................51
Gambar 3.15 Sitemap Anggota ...............................................................................51
Gambar 3.16 Desain Fitur Anggota - Login ..............................................................52
Gambar 3.17 Desain Fitur Anggota - Daftar Anggota ..............................................52
Gambar 3.18 Desain Fitur Anggota - Upload Foto ..................................................53
Gambar 3.19 Desain Fitur Anggota - Pemesanan Paket ..........................................53
Gambar 3.20 Desain Fitur Anggota - yating Foto ....................................................54
Gambar 3.21 Desain Fitur Anggota - Gallery ...........................................................54
Gambar 3.22 Desain Fitur Admin - Login .................................................................54
Gambar 3.23 Desain Fitur Admin – Daftar Anggota ................................................55
Gambar 3.24 Desain Fitur Admin – Tambah Paket .................................................55
Gambar 3.25 Desain Fitur Admin – Pemesanan Paket ............................................56
Gambar 3.26 Desain Fitur Admin – Upload Foto .....................................................56


Gambar 3.27 Desain Fitur Admin – Konfirmasi Order .............................................57
Gambar 4.1 Login Admin .........................................................................................58
Gambar 4.2 Home Admin ........................................................................................59
Gambar 4.3 Admin – Lihat - Hapus - Paket Foto .....................................................59
Gambar 4.4 Admin - Tambah Paket Foto ................................................................60
Gambar 4.5 Admin - Ubah Data Paket Foto ............................................................60
Gambar 4.6 Admin – Lihat - Hapus - Data Anggota .................................................61
Gambar 4.7 Admin - Tambah Data Anggota ...........................................................61
Gambar 4.8 Admin - Ubah Data Anggota ................................................................62
Gambar 4.9 Admin – Lihat - Hapus - Data Pemesanan ...........................................63
Gambar 4.10 Admin - Tambah Data Pemesanan ....................................................63
Gambar 4.11 Admin - Ubah Status Pemesanan ......................................................64
Gambar 4.12 Admin – Lihat Data Foto ....................................................................64
Gambar 4.13 Admin – Upload Foto .........................................................................65
Gambar 4.14 Home dan Login Anggota ..................................................................65
Gambar 4.15 Daftar Anggota ...................................................................................66
Gambar 4.16 Lihat Paket Foto .................................................................................66
Gambar 4.17 Gallery Foto .......................................................................................67
Gambar 4.18 Kontak ...............................................................................................67
Gambar 4.19 Home Anggota ..................................................................................68

Gambar 4.20 Anggota – Lihat paket Foto ................................................................68
Gambar 4.21 Anggota – Pemesanan Paket Foto .....................................................69
Gambar 4.22 Anggota – Lihat Pemesanan Paket Foto ............................................69
Gambar 4.23 Anggota – Upload Foto ......................................................................70
Gambar 4.24 Anggota – yating Foto .......................................................................70
Gambar 4.25 Anggota – Gallery Foto ......................................................................71
Gambar 4.26 Anggota – Gallery Foto ......................................................................72
Gambar 4.27 Anggota – Gallery Foto ......................................................................72
Gambar 4.28 Anggota – Gallery Foto ......................................................................73
Gambar 5.1 Form Login Admin ................................................................................74
Gambar 5.2 Testing Form Login Admin ...................................................................74
Gambar 5.3 Form Login Admin ................................................................................75
Gambar 5.4 Testing Form Login Anggota ................................................................75
Gambar 5.5 Testing Form Daftar Anggota Oleh Admin ...........................................76

Gambar 5.6 Testing Form Daftar Anggota Oleh Anggota ........................................76
Gambar 5.7 Testing Form Ubah Data Anggota ........................................................77
Gambar 5.8 Testing Form Tambah Data Paket .......................................................77
Gambar 5.9 Testing Form Ubah Data Paket ............................................................78
Gambar 5.10 Testing Form Hapus Data Paket ........................................................78

Gambar 5.11 Testing Form Pemesanan Paket Foto Oleh Admin.............................79
Gambar 5.12 Testing Form Pemesanan Paket Foto Oleh Anggota .........................80
Gambar 5.13 Testing Form Ubah Pemesanan Paket Foto .......................................80
Gambar 5.14 Testing Form Hapus Pemesanan Paket Foto .....................................81
Gambar 5.15 Testing Form Upload Foto Oleh Admin .............................................81
Gambar 5.16 Testing Form Upload Foto Oleh Anggota ..........................................82
Gambar 5.17 Testing Form yating Foto ...................................................................82
Gambar 5.18 Testing Form Simulasi Paket Foto ......................................................83
Gambar 5.19 Testing Form Ubah Konfirmasi Pemesanan .......................................84
Gambar 5.20 Grafik Hasil Kuisioner .........................................................................91

Tabel 2.1 Tipe Data Visual Basic ..............................................................................10
Tabel 3.1 Kamus Data ..............................................................................................29
Tabel 3.2 Spesifikasi Proses ....................................................................................41
Tabel 5.1 Test Case Proses Login .............................................................................84
Tabel 5.2 Test Case Proses Daftar User ...................................................................85
Tabel 5.3 Test Case Proses Daftar Paket Foto .........................................................86
Tabel 5.4 Test Case Proses Pemesanan Paket Foto .................................................87
Tabel 5.5 Test Case Proses Admin Upload Foto ......................................................88
Tabel 5.6 Test Case Proses Anggota Upload Foto ...................................................88
Tabel 5.7 Test Case Proses yating Foto ...................................................................89
Tabel 5.8 Kuisioner ..................................................................................................89

Lampiran Kuisioner ..................................................................................................L-1
Lampiran Kode Program ..........................................................................................L-21
Lampiran Data Penulis .............................................................................................L-166

Perkembangan teknologi menyebabkan bertambahnya kebutuhan
manusia akan informasi. Saat ini teknologi informasi memegang peranan
penting dan telah banyak di pakai untuk segala aktivitas. Berbagai macam
teknologi informasi telah dikembangkan melalui internet, teknologi internet
yang dapat digunakan sebagai alat untuk memberikan sebuah informasi
salah satunya adalah website.
Saat ini sudah banyak sekali perusahaan-perusahaan yang telah memiliki
website sendiri untuk memperluas jangkauan bisnis mereka, karena dengan
website mereka dapat melakukan berbagai promosi ke wilayah yang lebih
luas dan berbagai belahan dunia di bandingkan menggunakan media
lainnya, juga dapat dengan mudah berhubungan dengan konsumen mereka,
dengan menggunakan website, mereka pun dapat melakukan transaksi jual
beli, mereka juga dapat membuat katalog untuk produk-produk mereka.
Melalui website, segala kegiatan dan transaksi dapat dilakukan selama 24
jam sehari dan dimana saja dengan akses melalui internet.
Foto adalah salah satu media yang banyak diminati karena dapat
mengabadikan kejadian - kejadian penting dalam hidup manusia, tetapi di
jaman yang sudah berkembang ini, manusia sudah terbiasa dengan
penggunaan teknologi internet maka dari itu dibuat sebuah sistem informasi
yang dapat di akses melalui internet selama 24 jam setiap hari, sistem
tersebut dapat digunakan untuk menampilkan paket foto tersedia di studio
foto tersebut, menyediakan fasilitas pemesanan paket foto serta dapat
menampilkan hasil-hasil fotonya.

Beberapa permasalahan yang terdapat pada aplikasi tersebut:
1. Bagaimana sistem mengklarifikasi pengguna yaitu admin dan
anggota.
2. Bagaimana membuat sistem agar seorang anggota dan admin dapat
melakukan upload foto.
3. Bagaimana membuat sistem agar seorang anggota dapat melakukan
rating terhadap foto yang telah di upload.
4. Bagaimana membuat simulasi paket foto agar seorang anggota
dapat mengetahui paket apa saja yang dapat dipesan dengan
memilih

jumlah

pengambilan

gambar,

kualitas

foto

dan

memasukkan jumlah uang yang mereka miliki.
5. Bagaimana membuat sistem untuk seorang admin agar dapat
menambah, mengubah serta menghapus paket foto.
6. Bagaimana membuat sistem untuk seorang admin agar dapat
menambah dan mengubah data anggota.
7. Bagaimana membuat gallery agar seorang anggota dapat melihat
hasil foto yang telah di upload dan hasil dari pemotretan yang sudah
dilakukan.
8. Bagaimana membuat suatu sistem informasi berupa website yang
dapat melakukan transaksi pemesanan secara online selama 24 jam
tanpa harus datang ke studio foto tersebut.

Tujuan dari pembuatan sistem berbasis web ini adalah membuat
website studio foto yang dapat mengelola data sesuai dengan kebutuhan
pengguna dan dapat melayani transaksi pemesanan paket foto secara online
selama 24 jam dengan tampilan yang mudah digunakan.

!

""

Pengguna aplikasi ini ialah admin dan anggota. Admin dapat menambah,
mengubah data paket dan data member, menghapus data paket foto dan
pemesanan, melakukan konfirmasi untuk pemesanan paket dan upload foto
sedangkan anggota dapat melihat foto, memesan paket foto, melakukan
simulasi paket foto, rating foto dan upload foto.

#
Pembuatan aplikasi ini memiliki batasan-batasan sebagai berikut :
1. Semua orang dapat mendaftar menjadi anggota, pelanggan
harus memasukkan nomer telepon supaya admin dapat
melakukan konfirmasi.
2. Data - data saat mendaftar harus sesuai dengan KTP, KTP
digunakan sebagai bukti data diri untuk melakukan
pemotretan.
3. Transaksi pemesanan paket dapat dilakukan bila sudah
menjadi member.
4. Anggota studio foto tersebut dapat menggunakan simulasi
paket foto, memesan paket foto, menghapus pemesanan
yang belum dikonfirmasi, merating foto dan meng-upload
foto yang akan ditampilkan pada menu gallery foto.

5. Admin dapat menambah dan mengubah data anggota, data
paket foto dan pemesanan serta menghapus data paket foto
dan pemesanan paket foto.
6. Admin dapat melakukan upload foto untuk anggota.
7. Studio foto tersebut tidak memiliki cabang.
8. Pembayaran dapat dikirim ke rekening bank studio foto
eikon dan bukti transfer dikirim melalui fax.
9. Penggunaan aplikasi ini membutuhkan perangkat komputer
dengan spesifikasi optimal sebagai berikut :
Processor

: Intel P4

Memory

: 512 MB

Harddisk

: 40 Gb

10. Pembuatan situs ini menggunakan software :
Programming language : ASP.Net
Database Sistem

: Microsoft SQL Server

Programming Editor

:

Dreamweaver MX

Macromedia

$ %"

"

&

Sistematika penulisan dalam laporan Tugas Akhir ini adalah :
Bab 1 Pendahuluan
Bab ini berisi tentang latar belakang masalah, rumusan masalah,
tujuan, batasan-batasan dalam membuat situs tersebut dan
sistematika pembahasan.
Bab 2 Dasar Teori
Dalam bab ini akan dibahas materi-materi apa saja yang
digunakan dalam membuat aplikasi tersebut .
Bab 3 Analisa dan Pemodelan
Bab ini berisi analisis kebutuhan seperti ER Diagram, Tabel
Diagram, DFD serta Layout rancangan aplikasi yang akan dibuat.
Bab 4 Perancangan dan Implementasi
Dalam bab ini akan dijabarkan aplikasi yang dibuat berupa
screenshot beserta penjelasannya.
Bab 5 Pengujian
Bab ini berisi pengujian berupa whitebox testing, blackbox
testing dan kuisioner beserta laporan hasil dan ringkasan dari
kuisioner.
Bab 6 Kesimpulan dan Saran
Pada bab 6 berisi mengenai beberapa kesimpulan dalam
menyanggupi tujuan yang dirancang serta saran untuk situs
tersebut yang dapat digunakan untuk mengembangkan aplikasi
tersebut di masa yang akan datang.

Bab terakhir ini berisi kesimpulan dan saran berdasarkan keseluruhan
pembuatan dan penguhian serta evaluasi dari aplikasi yang telah dibuat.

Kesimpulan setelah aplikasi ini selesai dibuat dan dilakukan penguhian
serta evaluasi adalah :
1. Pemesanan paket foto separa online dapat dengan mudah
dilakukan selama 24 ham setiap harinya.
2. Untuk membuat sebuah website dapat menggunakan
bahasa pemrograman ASP.Net, database Miprosoft SQL
Server dan Mapromedia Dreamweaver.
3. Dari hasil penguhian, aplikasi berbasis website ini memiliki
alur transaksi yang sederhana dan tampilan yang pukup baik
dan mudah digunakan.

Berikut ini beberapa saran yang dapat mengembangkan aplikasi ini
menhadi lebih baik dan lebih kompleks lagi yaitu :
1. Penambahan menu untuk dapat menpetak pemesanan, agar
pelanggan memiliki bukti petak order.
2. Penambahan

fitur

untuk

admin

agar

dapat

menginformasikan paket baru melalui email pada setiap
pelanggan.

Constantianus, Frederick; Modul Praktikum Pemrograman Web Lanjut; Universitas
Kristen Maranatha, 2006.
Dean,Elisa; Modul Praktikum kasis tata; Universitas Kristen Maranatha, 2005.
Kauffman, John; Ferracchiati, Fabio; Matsik, Bian; Mintz, Eric; Narkiewicz, jan; kegels,
Kent; Xie, Donald; West, John; Chinnathampi, Jesudas; Greenwood, James; Beginning
ASP.NET Databases Using VB.net v1.0, Wrox press Ltd, 2002.
Kauffman, John; khangarathinam, khiru; Beginning ASP.NET 2.0 Databases Beta
Preview, Wiley Publising, inc. 2005.
http://www.freecsstemplates.org
http://www.bamboomedia.net
http://www.sony-ak.com