BAB I PENDAHULUAN
1. LATAR
BELAKANG
Di
era modern ini, fashion merupakan hal yang penting untuk menunjang penampilan
terutama pada wanita. Fashion terus berkembang sehingga masyarakat ingin
mencari model-model fashion terbaru, namun sebagian masyarakat di tuntut untuk
melakukan kegiatan transaksi serta memenuhi kebutuhannya fashionnya dengan
tidak menganggu aktivitas lain. Masyarakat umumnya kurang memiliki waktu luang
untuk melakukan pemesanan dan pembelian barang di toko.
Emma
Hijab adalah salah satu butik busana muslim yang menjual busana wanita yang
berada di kota depok. Pelanggan selalu menginginkan kemudahan ataupun kecepatan
informasi yang relevan untuk memudahkan segala aktivitasnya, salah satunya
pemesanan ataupun pembelian busana muslim pada Emma Hijab. Maka dibutuhkan
suatu aplikasi yang mempermudah dalam transaksi pemesanan busana khusunya
melalui media perangkat keras sehingga lebih efektif dan efisien. Begitu juga
dalam memenuhi kebutuhan fashion mereka.
Dengan
keunggulan yang dimiliki web maka muncul gagasan untuk membuat aplikasi web
e-commerce penjualan busana muslim pada Emma Hijab guna menyelesaikan masalah.
Maka penulis beriinisiatif untuk merancang dan membuat media yang berguna untuk
melakukan transaksi pemesanan dan penjualan barang serta dapat membantu
memenuhi kebutuhan fashion khususnya bagi pengguna web.
Dengan
menggunakan aplikasi ini diharapkan pelanggan bisa terbantu untuk mendapatkan
informasi yang ada pada Emma Hijab dan dapat berjalan pada perangkat keras
berbasis web.
2. BATASAN
MASALAH
Dalam
penulisan ini penulis membatasi masalah pada Aplikasi Emma Hijab
berbasis web di kota
depok yaitu aplikasi yang
dirancang oleh penulis merupakan aplikasi untuk melakukan pemesanan ataupun
pembelian busana muslim berbasis web. Pada aplikasi ini akan menampilkan halaman
utama, menu, pendaftaran pelanggan, login pelanggan, katalog produk
barang, keranjang belanja, transaksi proses, konfirmasi pembayaran, serta
tampil dan cetak data pemesanan. Penulis menggunakan software macromedia
dreamwaver 8 untuk web desain, PHP, dan MySQL sebagai database untuk membuat
aplikasi tersebut. Dan hasil output aplikasi tersebut akan ditampilkan
menggunakan website.
3.
RUMUSAN MASALAH
·
Masyarakat di tuntut
untuk melakukan kegiatan transaksi serta memenuhi kebutuhannya fashionnya
dengan tidak menganggu aktivitas lain.
·
Pelanggan selalu
menginginkan kemudahan ataupun kecepatan informasi yang relevan untuk
memudahkan segala aktivitasnya.
4. TUJUAN
Tujuan
dari penulisan ini adalah untuk memudahkan pelanggan wanita yang ingin tampil
beda dengan desain yang di buat khusus Emma Hijab yang berumur 20 tahun keatas
sehingga tidak dapat ditemukan di pasaran manapun. Dalam pemesanan dan
pembelian transaksi jual beli tidak harus dilakukan secara tatap muka. Sehingga
penulis berharap pelanggan terbantu menjadi lebih efektif dan efisien dalam
aktifitasnya serta memudahkan juga bagi Emma Hijab dalam hal pemasaran.
5. SASARAN
Pelanggan
wanita yang ingin tampil beda dengan desain yang di buat khusus Emma Hijab yang
berumur 20 tahun keatas.
BAB II PEMAHAMAN
UMUM
1.
ANALISIS MASALAH
·
Dalam pemesanan dan pembelian transaksi jual
beli tidak harus dilakukan secara tatap muka.
·
Pelanggan terbantu menjadi lebih efektif dan
efisien dalam aktifitasnya.
·
Memudahkan juga bagi Emma Hijab dalam hal
pemasaran.
2.
SOLUSI YANG DITAWARKAN
Dengan keunggulan yang
dimiliki web maka muncul gagasan untuk membuat aplikasi web e-commerce
penjualan busana muslim pada Emma Hijab guna menyelesaikan masalah. Maka
penulis beriinisiatif untuk merancang dan membuat media yang berguna untuk
melakukan transaksi pemesanan dan penjualan barang serta dapat membantu
memenuhi kebutuhan fashion khususnya bagi pengguna web.
BAB
III PERENCANAAN DAN PELAKSANAAN
1.
BIAYA PROYEK
·
Web Development
-
Registrasi Domain (1
tahun)
Rp. 500.000,-
-
Web Hosting (Rp.100.000 x 12
bln)
Rp. 1.200.000,-
-
Web Desain Semi News
Rp 5.000.000,-
-
Input Data Awal dan Analisis
Rp 3.500.000,-
Sub
Total Biaya Pembangunan
Web
Rp 10.200.000,-
·
Web Mail
-
Pembuatan Email berbasis
Web
Rp. 3.000.000,-
Total
Anggaran
Rp 13.200.000,-
2.
JADWAL
PROYEK
Estimasi waktu untuk menyelesaikan pembuatan
website sekitar 1-2 bulan terhitung dari tanggal penandatangan kontrak dan
dengan asumsi bahwa seluruh bahan / materi (content) telah tersedia oleh pihak
pemesan website.
Proyek
Pengembangan Aplikasi
|
Target
Mulai
|
Target Selesai
|
Website Butik
Emma Hijab
|
November 2016
|
Januari 2017
|
3.
TIM PELAKSANA
Terdapat anggota dari tim pelaksana pembuatan aplikasi web yang yang
terdiri dari beberapa bagian seperti:
1.
Ketua Pelaksana : Ainun Amaliah
2.
Analisis : Carolina
Irawati
3.
Pengumpulan Data :
Faiz Abdullah
Hojida S. Z.
4.
Web Designer :
Maulana Malik
Galang Dea
Alfarisi
5.
Programmer : Trias Nitis Lazuardi
BAB IV
DESAIN/RANCANGAN
1.
PENGUMPULAN DATA
·
Observasi, yang bertujuan untuk mengetahui lebih
dalam apa saja yang terdapat di setiap Emma Hijab dan berhubungan dengan
kegiatan di Emma Hijab tersebut.
·
Studi pustaka, bertujuan untuk mempelajari dasar
teori dari literatur mengenai pembuatan aplikasi dan cara kerja aplikasi.
Memecahkan masalah dalam aplikasi ini dengan mempelajari dan mengumpulkan
sumber-sumber pustaka dari buku dan internet yang berhubungan dengan Website.
2.
PERANCANGAN APLIKASI/ALUR
SISTEM
Struktur Navigasi User
Struktur navigasi
user
·
Halaman Utama
Berisi tentang tabel kerangka halaman utama
program, fungsinya adalah sebagai kerangka tata letak menu dan tampilan program
yang sedang dijalankan.
·
Menu Utama
(selain menu Kategori dan Login) dari halaman utama
Website diletakkan dibaris atas, yaitu baris ke-3 dari tabel kerangka utama.
Susunan menunya adalah Home, Profile, Barang, Panduan, dan Konfirmasi.
·
Home
Berisi tentang Logo dan Koleksi Barang ketika user
telah melakukan login.
·
Login
Berisi Username dan Password untuk login User.
·
Pendaftaran Baru
Fasilitas untuk user ketika ingin memiliki akun
baru.
·
Isi Form
Pendaftaran
Berisi form sehingga Pelanggan bisa memiliki akun
login yang dapat digunakan untuk bertransaksi memesan produk barang yang dijual
di website.
·
Profile
Berisi Informasi-informasi mengenai Emma Hijab.
·
Barang
Berisi tentang halaman program yang dapat
menampilkan barang secara keseluruhan, berdasarkan kategori dan juga lihat
detil barang yang dapat menampilkan inforrmasi lengkap dari satu nama barang.
Setiap data barang yang ditampilkan akan diberikan deskripsi singkat, harga dan
juga menu atau tombol untuk fasilitas Beli (pemesanan).
·
Keranjang Belanja
Berisikan sebagai penampung data Barang secara
sementara selama proses transaksi yang dilakukan oleh Pelanggan masih belum
diselesaikan. Setiap kali Pelanggan mengklik menu Beli yang ada dibawah gambar
Barang dari katalog, maka datanya akan disimpan ke dalam database dan
informasinya dapat dilihat dari halaman Keranjang Belanja.
·
Katalog Produk
Barang
Pada Katalog Barang akan ditampilkan daftar
Kategori Barang, setiap nama kategori bertindak sebagai menu yang apabila
diklik maka data Barang akan ditampilkan berdasarkan Kategori yang dipilih.
·
Detil
Menampilkan detil Produk barang Emma hijab, melihat
informasi barang lebih lengkap kepada Pelanggan.
·
Beli
Menu Beli untuk memilih barang yang akan dipesan
atau akan dibeli oleh Pelanggan.
·
Isi Form Alamat
Pengiriman
Berisi Form Alamat Pengiriman kemana Barang yang
dipesan akan dikirim.
·
Tampilan Transaksi
Pemesanan yang dilakukan oleh Pelanggan yang sudah
login yang belum menyelesaikan transaksi belanja.
·
Cetak dan
Pemesanan
Berisi tentang program yang akan menampilkan semua
daftar transaksi pemesanan sudah dilakukan pelanggan.
·
Logout
Fasilitas yang digunakan untuk keluar dari halaman
utama user login.
·
Panduan
Menu Panduan ketika user ingin melihat Panduan
Belanja Emma Hijab.
·
Panduan Belanja
Berisi Panduan belanja di Emma Hijab agar para
Pelanggan mendapatkan informasi yang lebih akurat tentang cara bertransaksi.
·
Konfirmasi
Berisi tentang konfirmasi pembayaran yang ada di
website setelah Pelanggan melakukan transfer pembayaran.
·
Isi Konfirmasi
Pembayaran
Berisi form Konfirmasi Pembayaran yang diisi
oleh Pelanggan setelah melakukan transfer ke rekening bank milik Emma Hijab.
Struktur Navigasi Admin
Struktur Navigasi Admin
·
Login
Berisi
Username dan Password yang harus diisi untuk login Admin.
·
Home
Berisi beberapa menu dan kata sambutan kepada
Administrator yang telah berhasil login.
·
Password Admin
Berisi form untuk menambah Pendaftaran Baru Admin.
·
Data
Provinsi, Data Kategori, Data Barang, Konfirmasi Transfer
Berisi data dari masing-masing tabel yang dapat di
Tambah, Ubah dan Hapus.
·
Laporan
Laporan Data Transaksi yang ada di dalam Website
Emma Hijab.
·
Logout
Fasilitas yang digunakan untuk keluar dari halaman
utama Admin login.
Usecase Diagram
Usecase diagram dibawah ini mendeskripsikan tipe
interaksi antara user sebuah sistem dengan sistemnya sendiri melalui sebuah
cerita bagaimana sistem digunakan pada website Emma Hijab. Lihat pada Gambar
3.3.
Gambar Usecase Diagram
Aktor :
Pelanggan, Admin, Pemilik
Deskripsi Pelanggan
1. Pengguna Login Web
2. Pengguna melihat Koleksi
Barang
3. Pengguna memesan di Keranjang Belanja
4. Pengguna melakukan transaksi
5. Pengguna melakukan konfirmasi pembayaran
6. Pengguna Logout Web
Deskripsi Admin
1. Admin Login
2. Admin Mengontrol Koleksi Barang
3. Admin menerima pemesanan di Keranjang Belanja
4. Admin mengirimkan transaksi kepada pelanggan
5. Admin memberikan Laporan kepada pemilik
6. Admin Logout Web
Deskripsi Pemilik
1. Pemilik menerima Laporan dari admin
3.
PERANCANGAN DATABASE
Sebagai website yang membutuhkan database, sehingga
perlu adanya database untuk menyimpan data yang terpisah dengan tampilan desain
database yang digunakan dalam website ini adalah emma_hijabdb. Emma
hijab terdiri dari sembilan tabel yaitu, admin, barang, kategori, konfirmasi,
pelanggan, pemesanan, pemesanan_item, provinsi, tmp_keranjang.
Tabel Admin
Tabel Barang
Tabel Kategori
Tabel Konfirmasi
Tabel Pelanggan
Tabel Pemesanan
Tabel Pemesanan_item
Tabel Provinsi
Tabel tmp_keranjang
1.
PERANCANGAN USER INTERFACE (MOCKUP)
Rancangan
Tampilan Website
Pada bagian ini penulis akan
mencoba membahas tentang rancangan tampilan pada aplikasi ini. Selain itu, juga
disertai dengan penjelasan dari tampilan tersebut.
1.
Rancangan tampilan
halaman utama
Pada saat aplikasi ini pertama dijalankan maka
aplikasi ini akan menampilkan sebuah menu yang menampilkan fasilitas-fasilitas
yang terdapat pada aplikasi ini. Berikut rancangan tampilannya.
Rancangan Tampilan
Halaman Utama
Pada rancangan diatas terdapat menu aplikasi yang
terdiri dari home, profile, barang, panduan, dan konfirmasi. Masing-masing
merupakan tombol yang akan membawa user untuk menuju tampilan
dari masing-masing fasilitas tersebut. Tampilannya
hampir sama dengan Form Pendaftaran
Baru. Perbedaannya terdapat form pengisian
pendaftaran pelanggan yaitu nama pelanggan, kelamin, e-mail, nomor telepon serta
Ddta untuk login yaitu username, password, password (lagi). Setelah mengisi
form dengan lengkap dan benar, user akan dibawa untuk menuju
tampilan dari masing-masing fasilitas tersebut.
2. Rancangan tampilan menu home
Pada menu ini akan menampilkan Home ketika user
telah melakukan Login. Berikut rancangan tampilannya.
Rancangan Tampilan
Menu Home
Pada rancangan diatas terdapat menu aplikasi home
yang berisi logo beserta koleksi barang. Fasilitas login yang telah berubah menjadi
transaksi yang berisi keranjang belanja, tampilkan transaksi, dan logout
website. Tampilannya hampir sama dengan:
- Rancangan tampilan
menu profile, perbedaannya di menu profile terdapat informasi-informasi
mengenai Emma Hijab sehingga memudahkan user dalam berkomunikasi dengan Emma
Hijab.
- Rancangan tampilan
menu barang, perbedaannya pada menu barang memiliki tampilan halaman yang akan
menampilkan koleksi barang yang terdapat di Hijab beserta transaksinya. Pada
rancangan tampilan koleksi barang dengan beberapa foto, detail hingga tombol
beli untuk ke layout pembelian selanjutnya.
- Rancangan tampilan
menu panduan, perbedaannya pada menu panduan terdapat tampilan halaman yang
akan menampilkan Panduan Belanja pada website Emma Hijab. Pada rancangan adalah
tahapan-tahapan panduan belanja dalam melakukan proses login hingga pelanggan
menerima barang yang dipesan.
3. Rancangan Tampilan Fasilitas Keranjang Belanja
Pada tampilan halaman ini akan menampilkan
Fasilitas Keranjang Belanja setelah memilih tombol beli. Berikut rancangan
tampilannya:
Rancangan Tampilan
Fasilitas Keranjang Belanja
Pada rancangan tampilan di atas akan terdapat
informasi dari barang yang telah kita beli yaitu berupa gambar, detail, grand
total, ubah data serta delete barang tersebut. Setelah memilih tombol
lanjutkan, tampilan akan berpindah ke konfirmasi belanja dan form pengisian
alamat pengiriman. Berikut rancangan tampilannya:
Rancangan Tampilan
Konfirmasi Belanja
Pada rancangan tampilan konfirmasi terdapat tombol
simpan dan lanjutkan transaksi sehingga akan dilanjutkan pada fasilitas
transaksi yang telah dilakukan user.
4. Rancangan Tampilan Fasilitas Tampilan Transaksi
Pada tampilan halaman ini akan menampilkan
Fasilitas Tampilan Transaksi setelah memilih tombol beli. Berikut rancangan
tampilannya:
Rancangan Tampilan
Fasilitas Transaksi
Pada rancangan tampilan di atas akan terdapat
informasi daftar Pemesanan yang telah dilakukan oleh user selama melakukan
transaksi pada website. Tampilannya hampir sama dengan Menu form konfirmasi
pembayaran, Perbedanya pada form konfirmasi pembayaran user diharuskan untuk mengisi
form konfirmasi setelah user telah melakukan pembayaran transfer dan status
pemesanan barang akan diset dari status Pesan menjadi lunas, dan pemilik Emma
Hijab siap mengirim barang ke alamat anda.
5. Rancangan Tampilan Login Admin
Pada menu ini akan
menampilkan admin untuk masuk kedalam halaman admin. Berikut rancangan
tampilannya:
Rancangan Tampilan
Login Admin
Pada rancangan di atas admin diharuskan untuk
melakukan login terlebih dahulu sebelum masuk. Untuk mengakses halaman program
Administrator, Data user login untuk login ke halaman ini disimpan dalam tabel
bernama admin, disana menyimpan data uername dan password dari phpMyAdmin,
dengan fasilitas insert data.
6. Rancangan Tampilan Password Admin
Pada menu ini akan
menampilkan ganti password admin
dilakukan dari halaman program administrator. Berikut rancangan
tampilannya:
Rancangan Tampilan
Ganti Password Admin
Pada rancangan di atas admin dapat mengganti
password lama menjadi password baru sesuai yang admin inginkan lalu
menyimpannya agar dapat login kembali dengan password yang baru.
7. Rancangan Tampilan Data Provinsi
Pada menu ini akan
menampilkan data provinsi digunakan untuk membedakan besarnya biaya
kirim barang dari lokasi Emma Hijab. Berikut rancangan tampilannya:
Rancangan Tampilan
Data Provinsi
Pada rancangan di atas menunjukkan besarnya biaya
kirim ini berbeda-beda, tergantung dilihat dari lokasi mana menghitungnya, jasa
Ekspedisi yang digunakan, juga sangat tergantung dengan berat barang yang
dijual. Membuat Program Manajemen Data Provinsi terdapat empat file program
yaitu provinsi_add, provinsi_edit, provinsi_data, dan provinsi_delete.
Tampilannya hampir sama dengan:
-
Rancangan Tampilan Data Kategori, pada
menu ini akan menampilkan data kategori untuk mengelompokkan data barang.
data kategori, data barang dapat dikelompokkan sehingga pencarian barang bagi
pelanggan akan semakin mudah. Untuk membuat program Manajemen Data Kategori,
diperlukan empat file program yaitu kategori_add, kategori_edit, kategori_data,
dan kategori_delete.
-
Rancangan
Tampilan Data Kategori, Pada menu ini akan
menampilkan data kategori untuk mengelompokkan data barang. data
kategori, data barang dapat dikelompokkan sehingga pencarian barang bagi
pelanggan akan semakin mudah. Untuk membuat program Manajemen Data Kategori,
diperlukan empat file program yaitu kategori_add, kategori_edit, kategori_data,
dan kategori_delete.
-
Rancangan
Tampilan Data Kategori, Pada menu ini akan
menampilkan data kategori untuk mengelompokkan data barang. Data
kategori dan data barang dapat dikelompokkan sehingga pencarian barang bagi pelanggan
akan semakin mudah. Untuk membuat program Manajemen Data Kategori, diperlukan
empat file program yaitu kategori_add, kategori_edit, kategori_data, dan
kategori_delete.
8. Rancangan Tampilan Laporan
Pada menu ini akan menampilkan Program Laporan
Master Data dan Laporan Transaksi di Emma Hijab. Berikut rancangan tampilannya:
Rancangan Tampilan
Laporan
Pada rancangan di atas tampilan Laporan data Provinsi,
data Kategori, data Barang dan lengkap dengan laporan data Pemesanan Barang
untuk memudahkan pekerjaan.