BAB 3 ANALISIS DAN PERANCANGAN
3.1 Sejarah Perusahaan PT. Bina Usaha Mandiri didirikan sejak tahun 2007 oleh Ariza Pasha P sebagai pemilik tunggal perusahaan, PT. Bina Usaha Mandiri merupakan sebuah perusahaan suplier yang bergerak di bidang Meteorologi, Hidrologi, Geofisika dan alat-alat ukur. Untuk saat ini PT. Bina Usaha Mandiri sudah memiliki dua kantor, dimana satu buah kantor yang beralamat di Jl. H. Zaenudin no.47 Radio Dalam merupakan kantor pusat dari perusahaan tersebut dan satu buah kantor lainnya yang beralamat di Jl. H. Mahali I no.43 Radio Dalam sebagai kantor cabang. PT. Bina Usaha Mandiri sendiri sudah banyak mensuplai peralatan Meteorologi, Hidrologi, Geofisika dan alat-alat ukur dibeberapa instansi dalam negri seperti Badan Meteorologi Klimatologi dan Geofisikan di hampir seluruh cabang yang berada di indonesia, PT. Bina Usaha Mandiri juga mensuplai peralatan tersebut ke beberapa perusahaan swasta, khususnya dengan perusahaan-perusahaan yang bidangnya berkaitan dengan iklim tanaman, penerbangan, irigasi, polusi, maupun amdal (analisis dampak lingkungan). Visi dari PT. Bina Usaha Mandiri adalah menjadi suplier terpercaya dengan memberikan pelayanan yang terbaik dan juga selalu memberikan kualitas barang yang terbaik kepada para kostumer. Misi dari PT. Bina Usaha Mandiri ialah: • Memperkenalkan produk, alat-alat yang dijual kepada masyarakat luas melalui ecommerce. 29
30
• Mengembangkan PT. Bina Usaha Mandiri dengan membuka cabang atau joint venture. • Meningkatkan kuantitas dan kualitas produk yang dijual. • Mengembangkan sistem telemetri data, misalnya alat yang terpasang di lapangan tanpa kabel dapat di terima hasil datanya di ruang operator. • Mengadakan presentasi-presentasi tentang guna dari peralatan Meteorologi, Hidrologi, Geofisika dan alat-alat ukur pada kehidupan sehari-hari.
31
3.2 Struktur Organisasi Perusahaan dan Pembagian Tugas dan Tanggung Jawab yang Menyangkut Perusahaan Kerjasama antar anggota dalam suatu perusahaan sangat diperlukan untuk memajukan suatu perusahaan, agar sesama anggota dapat mengetahui dengan benar dan jelas tugasnya masing-masing, maka dibutuhkan struktur organisasi yang baik dan jelas. Berikut ini adalah struktur organisasi PT. Bina Usaha Mandiri yang digambarkan dari divisi yang tertinggi ke divisi yang paling rendah.
Direktur
Wakil Direktur Tata Usaha
Jaringan
Divisi Operasional
Instalasi
Divisi Logistik
Transportasi
Gambar 3.1 Struktur Organisasi PT. Bina Usaha Mandiri
Tugas dan wewenang : -
Direktur Utama: •
Memimpin jalannya perusahaan
•
Menetapkan kebijakan-kebijakan dalam perusahaan
32
-
•
Menjaga stabilitas usaha dan kelangsungan hidup perusahaan
•
Menjalankan perusahaan dengan sebaik-baiknya
Wakil Direktur: •
Mewakilkan tugas direktur, disaat direktur tidak hadir
•
Mengkoordinir seluruh divisi yang ada diperusahaan
•
Menentukan layak atau tidaknya seseorang yang melamar pekerjaan di terima bekerja di perusahaan
-
-
-
Tata Usaha: •
Mengurus keuangan perusahaan
•
Mengurus penggajian karyawan
•
Bertanggung jawab atas ketersediaan alat tulis kantor di perusahaan
Divisi Logistik: •
Mengatur keluar masuknya barang
•
Bertanggung jawab atas seluruh barang yang ada di gudang
•
Mengecek ketersediaan barang
Divisi Operasional: •
Transportasi: ¾ Mengatur semua pengiriman barang agar sampai ke tujuan ¾ Menjaga dan merawat kendaraan inventaris kantor ¾ Bertanggung jawab atas seluruh barang yang ada selama pengiriman
•
Instalasi: ¾ Menginstal seluruh perangkat perusahaan
33
¾ Menginstal seluruh peralatan yang akan dijual ¾ Memperbaiki jika ada kerusakan pada software •
Jaringan: ¾ Membuat jaringan pada perusahaan ¾ Mengatur seluruh jaringan perusahaan agar dapat berjalan baik di perusahaan ¾ Memperbaiki jika ada aliran data yang terputus akibat kerusakan jaringan
3.3 Analisis Kebutuhan Sistem 3.3.1 Sistem yang Sedang Berjalan Sebagian besar sistem yang berjalan masih menggunakan sistem yang konvensional dimana dalam memasarkan peralatan meteorologi, hidrologi, klimatologi, dan geofisika di perusahaan masih menggunakan media fisik berupa brosur atau catalog. Sistem pemasaran yang dilakukan oleh pihak perusahaan dengan sasaran instansi maupun individu yang memerlukan peralatan meteorologi, hidrologi, klimatologi, dan geofisika masih menggunakan sebuah sistem manual yang sederhana dan terstruktur. Di pasaran bebas, bersaing dengan beberapa perusahaan yang bergerak di bidang sama, tanpa membatasi kalangan mana saja yang diperbolehkan bertransaksi dengan perusahaan. Sistem pemesanan dan transaksi pun masih via telfon maupun via email, ada pula instansi yang ingin mengajak kerja sama dalam suatu proyek, di atas kontrak, dengan dp 30% sebelum proyek itu berlangsung, lalu setelahnya dibayar lunas via banking maupun tunai. Dalam masalah pemasangan alatpun
34
kadang banyak instansi yang menginginkan tenaga ahli dari PT. Bina Usaha Mandiri untuk langsung turun ke lapangan. Dengan persaingan yang ketat antar perusahaan yang bergerak di bidang yang sama, PT. Bina Usaha Mandiri butuh nilai jual tinggi dalam pemasaran maupun beberapa kinerja operasional seperti pemesanan dan transaksi yang harus ditingkatkan menuju ke level baru yang berbasis web.
3.3.2 Wawancara Berikut adalah daftar wawancara yang dilakukan terhadap pemilik perusahaan:
Tabel.3.1 Informasi Pelaksanaan Wawancara Tanggal Pelaksanaan
Senin, 14 Maret 2011
Waktu Pelaksanaan
11.00 WIB
Nama
Ariza Pasha P
Jabatan
Direktur
Tempat
Kantor
Topik dan Tujuan
Mengumpulkan informasi untuk mengidentifikasi sistem pemasaran
dan
penjualan
yang
sedang
berjalan
di
perusahaan Daftar Pertanyaan :
1.Bagaimana sejarah singkat perusahaan bapak? • Perusahaan ini berdiri pada tahun 2007,dan merupakan sebuah perusahaan suplier
35
yang bergerak di bidang Meteorologi, Hidrologi, Geofisika dan alat-alat ukur.
2.Bagaimana cara mempromosikan produk anda? • pada saat ini hanya dapat memasarkan produk melalui media brosur, dan koneksi dari BMKG ( Badan Meteorologi Klimatologi dan Geofisika ). 3.Bagaimana cara konsumen melakukan pembelian produk? • Masih memakai cara manual konsumen memilih dan memesan product yang di inginkan lalu melakukan pembayaran 4.Bagaimana cara perusahaan menangani kritik maupun saran dari pelanggan? • Perusahaan belum dapat menampung kritik ataupun saran dari pelanggan dengan baik 5.Apakah perusahaan sudah memiliki situs web? • PT. Bina Usaha Mandiri untuk sementara ini belum memiliki situs web sendiri. Hal ini dikarenakan belum adanya divisi yang khusus menangani masalah ini. 6.Apakah metode pemasaran yang anda harapkan untuk perkembangan selanjutnya? • Adanya website bagi perusahaan ini,sehingga lebih informative dan calon konsumen dapat mengaksesnya 7.Fitur-Fitur apa yang anda harapkan ada untuk situs web ini? • Yang saya harapkan untuk situs web ini adalah situs ini dapat memperkenalkan kepada pelanggan mengenai perusahaan ini dan produk apa saja yang di tawarkan
36
3.4 Gambaran Umum Permasalahan Saat ini cara pengecekan produk masih memakai beberapa berkas manual, diteruskan ke laporan pengeluaran dan pemasukan setiap minggu, lalu dirapatkan antar divisi perusahaan di setiap awal dan tengah bulan untuk menyusun strategi yang lebih baik ke depannya. Akan sangat sulit bagi perusahaan untuk melakukan pengecekan produk secara manual, disamping menguras ketersediaan tenaga kerja, efisiensi waktu yang seharusnya bisa dimanfaatkan oleh perusahaan terbuang siasia. Permasalahan pun disusul dengan kurang efektifnya strategi pemasaran, seperti masih menggunakan media fisik berupa brosur dan katalog yang tidak bisa up-todate kapan saja. Di samping itu, karena banyaknya perusahaan bergerak di bidang yang sama, maka perusahaan ini butuh invovasi baru dalam strategi pemasaran seperti sistem pemasaran berbasis web.
3.5 Usulan Pemecahan Masalah Setelah melakukan serangkaian analisis pada sistem yang ada, masalah-masalah yang dihadapi oleh perusahaan bergerak dibidang peralatan meteorologi, hidrologi, klimatologi dan geofisika dapat diidentifikasikan secara akurat, maka diberikan usulan pemecahan masalah dengan merancang suatu sistem pemasaran dan pemesanan berbasis web yang menyediakan fasilitas-fasilitas untuk memberikan inovasi maupun solusi atas masalah-masalah yang ada sebagai berikut:
37
•
Dengan adanya sistem pemasaran dan pemesanan berbass web yang dirancang sedemikian rupa sehingga informasi tentang produk maupun cara pemesanan dapat ditampilkan dengan tepat dan jelas.
•
Pengaturan dan pengecekan produk dapat tertata dengan jelas.
•
Menampilkan produk dengan detail description yang efektif.
•
Memberikan kemudahan untuk klien yang telah teregistrasi, sehingga perusahaan pun bisa menggunakan data yang teregister tersebut menjadi arsip track record hubungan perusahaan dengan klien.
•
Kemudahan akses terhadap informasi peralatan meteorologi, hidrologi, klimatologi,
dan
geofisika
sehingga
dari
kemudahan
tersebut
pengguna/member/klien/guest dapat mengetahui stok produk yang tersedia dan mempersingkat waktu pencarian maupun pemesanan apalagi dalam keadaan mendesak.
38
3.6 Perancangan Sistem Adapaun perancangan sistem ini berisi 3.6.1 Class Diagram Class Diagram untuk proses dalam perancangan sistem pada web PT. Bina Usaha Mandiri yang akan dibuat ini dapat dilihat pada gambar 3.2
Gambar 3.2 Class Diagram
39
3.6.2 Object Diagram Objek diagram dalam perancangan web pada PT. Bina Usaha Mandiri, menggambarkan objek – objek yang ada pada sistem :
Object3 : Message IDmessage IDuser = 001 IDadmin Messagesubject = ASK Messagedate = June 17th, 2011 Message = can i have a price list for products?
Object4 : Member IDuser = 001 Username = nugi Password = nuginugi Email =
[email protected] Handphone = 085694226410 Name = nugroho arifinto Gender = male Address = Binus University Dateofbirth = 15071989
Object2 : ShoppingCart IDcart IDproduct = 007 IDuser = 001 Quantity = 1
Object1 : Product IDproduct = 007 Product_name = wind sensor Product_category = Meteorology Product_price = $ Product_detail = wind sensor Product_image = windsensor.jpg Product_type = wind
Object6 : Comment IDcomment IDuser = 001 IDproduct = 007 Commentdate = can I have price list?
Gambar 3.3 Object diagram
Object5 : Admin IDadmin = admin Password = admin
40
3.6.3 Use Case Diagram Use Case Diagram digunakan untuk memberikan penjelasan mengenai hal-hal yang dapat dilakukan oleh pengguna terhadap web PT. Bina Usaha Mandiri. Perancangan Use Case Diagram saat ini dapat terlihat dari gambar berikut :
41
Gambar 3.4 Use Case Diagram pada web PT. Bina Usaha Mandiri
42
Gambar 3.5 Use Case Diagram Pemesanan Produk
Gambar 3.6 Use Case Diagram Produk
43
Tabel 3.2 Deskripsi Use Case dengan admin sebagai aktor Aktor
Admin
Pre Condition
Admin telah melakukan Login
Urutan event
1.Admin masuk ke halaman product
yang terjadi
2.Admin memasukkan Product name 3.Admin memasukkan Product price 4.Admin memasukkan Product detail 5.Admin memasukkan Product image 6.Admin memasukkan Product category 7.Admin memasukkan Product quantity 8.Admin memilih tombol save untuk menyimpan data yang dimasukkan ke dalam database 9.Admin masuk ke halaman user 10.Admin melakukkan update daftar user 11.Admin memilih tombol save untuk menyimpan data yang dimasukkan ke dalam database 12.Admin masuk ke halaman transaction
44
13.Admin melakukan update daftar transaction 14.Admin memilih tombol save untuk menyimpan data yang dimasukkan ke dalam database 15.Admin masuk ke halaman messages 16.Admin melakukan update pada halaman messages 17.Admin memilih tombol save untuk menyimpan data yang dimasukkan ke dalam database Post Condition
Admin telah memasukkan product name, product price, product detail, product image, product category, product quantity, update daftar user, update daftar transaction, update messages serta telah menyimpan semua data yang telah dimasukkan ke dalam database
Tabel 3.3 Deskripsi Use Case dengan Member sebagai aktor Aktor
Member
Pre Condition
Member telah melakukan login
Urutan event
1.Member masuk kedalam halaman product
yang terjadi
2.Member melihat detail product 3.Member memilih tombol add to cart pada product yang di inginkan
45
4.Member masuk ke halaman contact 5.Member mengirim messages kepada admin untuk konfirmasi order 6.Member masuk ke halaman shopping cart 7.Member melakukan update pada shopping cart 8.Member memilih tombol save untuk menyimpan data shopping cart pada database 9.Member masuk ke halaman Account 10.Member melakukan update pada Account detail 11.Member memilih tombol save untuk menyimpan data Account pada database
Post Condition
Member telah melihat product, melakukan order, mengirim message untuk konfirmasi order dan melakukan update shopping cart, lalu member pun dapat mengupdate pada account
46
3.6.4 Sequence Diagram Dalam menggambarkan serangkaian messages yang mengalami pertukaran yang dilakukan oleh object (dapat juga berupa actor) yang terdapat pada aplikasi tersebut, maka penulis menggunakan sequence diagram untuk lebih memperjelas kegiatan usecase diagram.
1.
Sequence Diagram Admin Login
Gambar 3.7 Sequence Diagram Admin Login
47
2.
Sequence Diagram Member Login
Gambar 3.8 Sequence Diagram Member Login
3.
Sequnce Diagram Register
Gambar 3.9 Sequence Diagram Register
48
4.
Sequence Diagram Edit Profile
Gambar 3.10 Sequence Diagram edit Profile
5.
Sequence Update Product
Gambar 3.11 Sequence diagram Update Product
49
6.
Sequence Order product
Gambar 3.12 Sequence Diagram Order Product
50
3.6.5 Activity Diagram Untuk memvisualisasikan rangkaian aliran aktivitas proses.berikut adalah activity diagram yang telah dibuat A. Activity Diagram admin login Pada saat admin melakukan login maka sistem akan menampilkan halaman home page yang hanya bisa diakses oleh admin
Admin
System
Input Username dan password
Menekan Tombol Login
Validasi input
Memasukkan Input
Data not Valid Valid
Tampilkan login error
Tampilkan Halaman Home Admin
Else
Gambar 3.13 Activity Diagram admin login
51
B. Activity Diagram member login Pada Saat Member melakukan login dan berhasil maka sistem akan menampilkan halaman home Member
System
Input Username dan password
Menekan Tombol Login
Validasi input
Memasukkan input
Data Not Valid Valid Tampilkan login error
Tampilkan Halaman Home member
Else
Gambar 3.14 Activity Diagram member login
52
C. Activity Diagram edit profile Member dapat melakukan edit profile, Mengubah info atau mengupdate data pada profile. Member pun dapat mengubah email dan password
Gambar 3.15 Activity Diagram edit Profile
53
D. Activity Diagram Pemesanan Member dapat melihat halaman product , meninggalkan komentar pada halaman product dan juga dapat memesan product tersebut
Gambar 3.16 Activity Diagram Pemesanan product
54
3.6.6
Statechart Diagram Statechart diagram menggambarkan transisi yang terjadi dari suatu proses ke proses.
/ Entry username and password
/ Data not valid Check
/ Data Valid / Sign out
/ Product selected
Product
/ entry data of update and delete
Choose
/ Member selected
/ Shopping cart selected / Message selected
Member / entry data of update
update and delete
Message
Shopping Cart
/ press on save
/ entry value of request
update / press on save
Save changes
inbox
request by order / press on save
Feed back
Save order
Gambar 3.17 Statechart Diagram admin
Gambar 3.18 Statechart Diagram admin update product
Save changes
55
Gambar 3.19 Statechart Diagram supply
/ Entry username and password Check
/ Data valid
/ Data not valid
/ Sign out
Main menu
Products
add to cart and send message
Save
Gambar 3.20 Statechart Diagram update dan delete cart pada member
56
3.6.7 Collaboration Diagram Berisi ilustrasi dan interaksi pada sistem dan pengelompokkan pesan pada kumpulan sequence
Gambar 3.21 Collaboration diagram admin gagal login
Gambar 3.22 Collaboration Diagram admin login sukses
Gambar 3.23 Collaboration Diagram admin update product
57
Gambar 3.24 Collaboration Diagram admin update member
3.6.8 Component Diagram Component Diagram berisi component-component pada sistem web ini
Gambar 3.25 Component Diagram
58
3.6.9 Deployment Diagram Deployment diagram berisi penjelasan bagaimana web admin mempermudah user menggunakan sistem yang telah dibuat Apache Web Server
Database
Client PC
-internet
*
Browser
*
Data Access
office PC
-LAN Web Server Software *
Office PC
-LAN *
-WAN *
*
Router
*
Switch 2
office PC
-LAN Router software *
**
*
*
* * *
-LAN
-LAN
office PC
-LAN *
* Computer Server -LAN
Switch 1
-LAN
* *
*
-LAN
office PC
* Printer
*
Gambar 3.26 Deployment Diagram
59
3.7 Perancangan Database Berisi tabel perancangan database pada web PT. Bina usaha mandiri 3.7.1 Entity Relationship Diagram
mscomment PK
IDcomment
FK1 FK2
comment commentdate IDuser IDproduct
mscart PK
IDcart
FK2 FK1
Quantity IDproduct IDuser
msproduk PK
IDproduct
FK1
Productname Productprice Productdetail Productimage IDcategory
msuser PK
IDuser Username Password Email Handphone Name Gender Address Dateofbirth
trheader transaction PK
IDtrheader
FK1
TransactionDate Total Status IDuser
mscategory
trdetail transaction
msmessage PK
IDmessage
FK1
Receiver MessageSubject Message MessageDate IDuser
PK
IDtrdetail
FK1 FK2
Quantity IDtrheader IDproduct
Gambar 3.27 Entity Relationship Diagram
PK
IDcategory
FK1
Categoryname Categorydescription IDparentcategory
60
Nama Tabel : msuser Deskripsi : Berisi informasi tentang seluruh User yang ada di sistem berbasis web ini Primary key : IDuser Tabel 3.4 Tabel User Nama Field
Tipe Data
Panjang
Keterangan
IDuser
int
6
ID setiap User
Username
varchar
50
Username dari setiap User
Password
varchar
50
Password dari setiap User
Email
varchar
100
Email dari setiap User
Handphone
varchar
20
Nomor handphone dari setiap User
Name
varchar
50
Nama lengkap dari setiap User
Gender
varchar
10
Jenis kelamin dari setiap User
Address
varchar
100
Alamat lengkap dari setiap User
Dateofbirth
date
Tanggal lahir dari setiap User
61
Nama Tabel : msproduct Deskripsi : Berisi informasi tentang seluruh produk yang ada di sistem berbasis web ini Primary key : IDproduct Foreign key : IDcategory Tabel 3.5 Tabel Product Nama Field
Tipe Data
Panjang
Keterangan
IDproduct
char
6
ID setiap produk
IDcategory
Int
11
ID setiap kategori
Productname
varchar
50
Nama dari setiap produk
Productprice
varchar
10
Harga dari setiap produk
Productdetail
varchar
500
Keterangan dari setiap produk
Productimage
varchar
50
Gambar dari setiap produk
Nama Tabel : mscart Deskripsi : Berisi data sementara dari produk yang akan dipesan Primary key : IDcart Foreign key : IDuser , IDproduct Tabel 3.6 Tabel Cart Nama Field
Tipe Data
Panjang
Keterangan
IDcart
int
11
ID setiap Cart
IDproduct
Char
6
ID setiap produk
62
IDuser
int
11
ID setiap User
Quantity
Int
11
Jumlah barang yang dipesan oleh User
Nama Tabel : mscomment Deskripsi : Berisi komentar yang diisi oleh User pada setiap produk Primary key : IDcomment Foreign key : IDuser , IDproduct Tabel 3.7 Tabel Comment Nama Field
Tipe Data
Panjang
Keterangan
IDcomment
int
11
ID setiap Comment
IDuser
int
11
ID setiap User
IDproduct
char
6
ID setiap produk
Comment
text
Komentar yang diisi oleh User
CommentDate
datetime
Tanggal dan waktu dimana User mengisi komentar
Nama Tabel : msmessage Deskripsi : Berisi pesan yang dikirim oleh User ke Admin atau sebaliknya Primary key : IDmessage Foreign key : IDuser Tabel 3.8 Tabel Message Nama Field
Tipe Data
Panjang
Keterangan
IDmessage
Int
11
ID setiap pesan
63
IDuser
Int
11
ID setiap User yang mengirim pesan
Receiver
Varchar
50
Username penerima pesan
Messagesubject
Varchar
20
Subject dari pesan yang dikirim
Message
text
Isi dari pesan yang dikirim
MessageDate
DateTime
Tanggal dan waktu dari pesan yang dikirim
Nama Tabel : mscategory Deskripsi : Berisi klasifikasi kategori pada produk Primary key : IDcategory Foreign key : IDparentcategory Tabel 3.9 Tabel category Nama Field
Tipe Data
Panjang
Keterangan
IDcategory
Int
11
ID category
IDparentcategory
Int
11
ID dari parent tempat kategori berada
Categoryname
Varchar
30
Nama Category
Categorydescription
Varchar
50
Keterangan singkat isi Category
64
Nama Tabel : trheadertransaction Deskripsi : berisi Total dan status dari transaksi Primary key : IDtrheader Foreign key : IDuser Tabel 3.10 Tabel Header Transaction Nama Field
Tipe Data
Panjang
Keterangan
IDtrheader
Int
11
ID setiap header transaksi
IDuser
Int
11
ID setiap User yang melakukan transaksi
TransactionDate
datetime
Total
Int
11
Total harga transaksi
Status
Int
2
Status user, sudah melakukan pembayaran atau belum
Tanggal dan waktu proses transaksi
65
Nama Tabel : trdetailtransaction Deskripsi : berisi detail jumlah produkcdari transaksi Primary key : IDtrdetail Foreign key : IDproduct,IDtrheader Tabel 3.11 Tabel Detail Transaction Nama Field
Tipe Data
Panjang
Keterangan
IDtrdetail
Int
11
ID setiap detail transaksi
IDproduct
Varchar
11
ID dari setiap produk pada transaksiq
IDtrheader
Int
11
ID setiap Header transaksi
Quantity
Int
11
Jumlah dari produk pada cart
66
3.8 Perancangan Layar Berisi perancangan layar dari web PT. BinaUsahaMandiri 3.8.1 Rancangan layar user login
Gambar 3.28 Rancangan layar login
Gambar 3.29 Rancangan layar gagal login
67
3.8.2 Rancangan layar halaman register
Gambar 3.30 Rancangan layar halaman register
3.8.3 Rancangan layar halaman utama home
Gambar 3.31 Rancangan layar halaman utama home untuk user yang telah login
68
Gambar 3.32 Rancangan layar halaman utama home untuk guest
3.8.4 Rancangan layar halaman utama products
Gambar 3.33 Rancangan layar utama products untuk guest
69
Gambar 3.34 Rancangan layar halaman utama products untuk user yang telah login
3.8.5 Rancangan halaman user memilih produk
Gambar 3.35 Rancangan layar halaman productdetail untuk guest
70
Gambar 3.36 Rancangan layar halaman productdetail untuk user
3.8.6 Rancangan halaman utama contact
Gambar 3.37 Rancangan layar halaman utama contact untuk guest
71
Gambar 3.38 Rancangan layar halaman utama contact untuk user
3.8.7 Rancangan layar halaman utama shopping cart
Gambar 3.39 Rancangan layar halaman utama shopping cart
72
3.8.8 Rancangan halaman utama Account
Gambar 3.40 Rancangan layar halaman utama account
3.8.9 Rancangan halaman Change detail
Gambar 3.41 Rancangan layar halaman change detail
73
3.8.10 Rancangan halaman Change email / Password
Gambar 3.42 Rancangan layar halaman change email / password
3.8.11 Rancangan halaman Message
Gambar 3.43 Rancangan layar halaman message
74
3.8.12 Rancangan halaman Message detail
Gambar 3.44 Rancangan layar halaman message detail
3.8.13 Rancangan layar halaman utama admin product, categories dan messages Halaman utama admin product, categories, dan messages memiliki tampilan yang sama dalam
menyajikan kontennya, maka untuk
perancangan layar, cukup satu saja.
Gambar 3.45 Rancangan Layar Utama pada admin
75
3.8.14 Rancangan layar halaman utama admin insert update Halaman insert dan update pada admin juga memiliki tampilan yang sama, baik insert dan update pada product maupun pada categories. Maka untuk perancangan layar, cukup membuat satu tampilan saja.
Gambar 3.46 Rancangan Layar Utama pada admin insert update
3.8.15 Rancangan layar halaman utama admin users
Gambar 3.47 Rancangan Layar Utama pada admin user
76
3.8.16 Rancangan layar halaman utama admin transaction
Gambar 3.48 Rancangan Layar Utama pada admin transaction
3.8.17 Rancangan layar halaman utama admin transaction detail
Gambar 3.49 Rancangan Layar Utama pada admin transaction detail
77
3.9 Penjelasan aplikasi Untuk dapat membuka website ini, user harus membuka browser terlebih dahulu, kemudian user mengetikkan url http://www.binausahamandiri.com untuk masuk ke halaman login dari website. User dapat memilih untuk login sebagai admin, user, atau tidak login sama sekali. Jika user memilih untuk login sebagai admin, maka akan mendapat hak akses untuk mengubah database user, product, transaction, dan message. Jika user login sebagai user biasa, maka user dapat melakukan pemesanan, melihat informasi account, dan mengubah data pribadi account, seperti detail account, email dan password. Jika user tidak melakukan login sama sekali, yang bisa dilakukan hanyalah melihat halaman home, product, dan contact us.
3.10 Spesifikasi modul 3.10.1 Pseudocode Register Buka Form Register Masukkan Fullname Masukkan Username Masukkan Password Masukkan Confirm Password Masukkan Email Masukkan Confirm Email Pilih Tanggal lahir Pilih Gender Masukkan Handphone Masukkan Address
78 IF semua atau salah satu field ada yang kosong THEN Tampilkan pesan input kosong ELSE IF Confirm Password tidak sama dengan Password THEN Tampilkan pesan input salah ELSE IF Confirm Email tidak sama dengan Email THEN Tampilkan pesan input salah ELSE IF format Email salah THEN Tampilkan pesan input salah ELSE IF Handphone bukan angka THEN Tampilkan pesan input salah ELSE IF Username sudah terpakai THEN Tampilkan pesan input sudah terpakai ELSE masukkan data ke database msuser kembali ke halaman login dan tampilkan pesan registrasi sukses Selesai Register
3.10.2 Pseudocode Login Buka Form Login Masukkan Username Masukkan Password Tekan tombol Login IF input Username atau Password kosong THEN Tampilkan pesan input kosong
ELSE IF input Username dan Password salah THEN
79 Tampilkan pesan input salah ELSE IF input Username dan Password benar THEN IF Username = admin THEN Masuk ke halaman admin ELSE IF Username != admin THEN Masuk ke halaman home Selesai Login
3.10.3 Pseudocode Layar Utama Admin Masuk melalui Login Tampilkan pilihan Lakukan pilihan Pilih product IF input dari search tidak kosong THEN Tampilkan informasi produk yang dicari ELSE WHILE Tampilkan ID produk Tampilkan nama produk Tampilkan harga produk Tampilkan detail produk Tampilkan gambar produk Tampilkan kategori produk Tampilkan tombol delete Pilih delete Tampilkan pesan konfirmasi IF konfirmasi = yes THEN
80 Hapus dari database msproduct ELSE Batal hapus Pilih update Menuju halaman update product Pilih new product Menuju halaman insert new product Kembali ke pilihan Pilih categories IF input dari search tidak kosong THEN Tampilkan informasi kategori yang dicari ELSE WHILE Tampilkan parent category Tampilkan category name Tampilkan category description Tampilkan tombol delete tampilkan tombol update Pilih delete Tampilkan pesan konfirmasi IF konfirmasi = yes THEN Hapus dari database mscategory ELSE Batal hapus Pilih update Masuk ke halaman update category
81 Tekan tombol insert new category Menuju halaman insert new category Kembali ke menu pilihan Pilih User WHILE Tampilkan ID Tampilkan Username Tampilkan Password Tampilkan Email Tampilkan Handphone Tampilkan Fullname Tampilkan Gender Tampilkan Birthday Tampilkan tombol delete Pilih delete Tampilkan pesan konfirmasi IF konfirmasi sama dengan yes THEN Hapus dari database ELSE Batal hapus Kembali ke menu pilihan Pilih transaction IF input dari search tidak kosong THEN Tampilkan informasi transaksi yang dicari ELSE WHILE Tampilkan Username
82 Tampilkan Transaction Date Tampilkan tombol delete Pilih delete Tampilkan pesan konfirmasi IF konfirmasi = yes THEN Hapus dari database trheadertransaction ELSE Batal hapus Kembali ke menu pilihan Pilih message Tampilkan tombol compose new message Pilih compose new message Buka form kirim pesan Pilih penerima Masukkan subyek pesan Masukkan isi pesan Tekan send IF subyek pesan atau isi pesan kosong THEN Tampilkan pesan input kosong ELSE IF penerima = all THEN Kirim pesan ke semua user ELSE Kirim pesan ke penerima Selesai kirim pesan IF input dari search tidak kosong THEN Tampilkan informasi message yang dicari
83 ELSE WHILE Tampilkan Username pengirim Tampilkan Subyek pesan Tampilkan Tanggal pesan dikirim Tampilkan tombol delete Pilih subyek pesan yang dikirim user Tampilkan isi pesan yang dikirim user Buka form balas pesan Masukkan subyek balasan Masukkan isi balasan Tekan tombol Reply IF subyek balasan atau isi balasan kosong THEN Tampilkan pesan input kosong ELSE Tambahkan pesan ke database msmessage Kembali ke halaman Message pesan balasan terkirim
dan
Selesai balas pesan Pilih tombol delete IF konfirmasi sama dengan yes THEN Hapus dari database msmessage ELSE Batal hapus Kembali ke menu pilihan Pilih Logout untuk keluar dan tampilkan layar Login dan tampilkan pesan berhasil Logout
muncul
84 Selesai Admin
3.10.4 Pseudocode Layar Admin memilih insert new product Buka form insert new product Masukkan Product ID Masukkan Product Name Masukkan Product Price Masukkan Product Detail Pilih Product Type Masukkan Product Quantity Tampilkan pilihan Upload image Pilih Choose file Tampilkan pilihan file dari hard disk Pilih satu file Kembali ke form Tekan tombol Save IF semua atau salah satu field ada yang kosong THEN Muncul pesan input kosong ELSE IF Product ID atau Product name sudah ada di database THEN Muncul pesan input sudah ada ELSE IF Product Price dan Product Quantity bukan angka THEN Muncul pesan input salah ELSE Tambahkan data ke database msproduct Kembali ke halaman admin memilih product dan tampilkan pesan penambahan data berhasil Selesai insert new product
85
3.10.5 Pseudocode Layar Admin memilih update product Buka form update product Pilih Product Category Tampilkan Product ID Masukkan Product ID Tampilkan Product Name Masukkan Product Name Tampilkan Product Price Masukkan Product Price Tampilkan Product Detail Masukkan Product Detail Tampilkan Product Detail Tampilkan pilihan Upload image Pilih Choose file Tampilkan pilihan file dari hard disk Pilih satu file Kembali ke form IF Product ID atau Product name sudah ada di database THEN Muncul pesan input sudah ada ELSE IF Product Price bukan angka THEN Muncul pesan input salah ELSE IF file gambar kosong THEN Muncul pesan input kosong ELSE IF ekstension file gambar tidak sesuai THEN Muncul pesan input salah ELSE
86 Ubah data di database Kembali ke halaman admin memilih product dan pesan update berhasil Selesai update product
3.10.6 Pseudocode Layar Admin memilih new category Buka form insert new category Pilih Category Parent Masukkan Category Name Masukkan Category Description IF semua atau salah satu field ada yang kosong THEN Muncul pesan input kosong ELSE IF Category Name dengan Parent yang sama sudah ada di database mscategory THEN Muncul pesan input sudah ada ELSE Tambahkan data ke database mscategory Kembali ke halaman admin memilih Category dan tampilkan pesan penambahan data berhasil Selesai insert new Category
3.10.7 Pseudocode Layar Admin memilih update category Buka form update product Pilih Category Parent Tampilkan Category Name Masukkan Category Name Masukkan Category Description IF Category Name sudah ada di database mscategory THEN
87 Muncul pesan input sudah ada ELSE Tambahkan data ke database mscategory Kembali ke halaman admin memilih Category dan tampilkan pesan penambahan data berhasil Selesai update Category
3.10.8 Pseudocode Layar Utama Home Masuk melalui Login IF sudah Login THEN IF jam <= 10 THEN Tampilkan pesan Good morning “user” ELSE IF
15 <= jam > 10
Tampilkan pesan Good day “user” ELSE IF
18 <= jam > 15
Tampilkan pesan Good afternoon “user” ELSE Tampilkan pesan Good evening “user” Tampilkan menu Shopping Cart , Account , dan Logout Pilih Logout untuk keluar dan menampilkan layar Login dan menampilkan pesan berhasil Logout ELSE IF belum login THEN IF jam <= 10 THEN Tampilkan pesan Good morning “user” ELSE IF
15 <= jam > 10
Tampilkan pesan Good day “user” ELSE IF
18 <= jam > 15
88 Tampilkan pesan Good afternoon “user” ELSE Tampilkan pesan Good evening “user” Selesai Home
3.10.9 Pseudocode Layar Utama Products Masuk melalui menu navigasi IF sudah Login THEN Tampilkan menu Shopping Cart , Account , dan Logout ELSE IF belum login THEN Tampilkan menu Login END IF WHILE Tampilkan pilihan kategori Lakukan pilihan kategori Tampilkan pilihan daftar produk sesuai dengan kategori Kembali ke pilihan IF input dari search tidak kosong THEN Tampilkan informasi message yang dicari ELSE WHILE Tampilkan Product Name Tampilkan Product image Tampilkan Product price Lakukan pilihan daftar produk Tampilkan Product ID
89 Tampilkan Product Name Tampilkan Product Image Tampilkan Product Price Tampilkan Product Category Tampilkan Product Detail IF sudah Login THEN Tampilkan tombol Add to Cart dan button back Masukkan Quantity Tekan Add to Cart Memasukkan barang ke halaman Shopping Cart Masuk ke halaman Shopping Cart Tampilkan field Write Comment Tampilkan tombol Comment Tampilkan tombol Back Tampilkan Comment dari User Pilih Logout untuk keluar dan menampilkan layar Login dan menampilkan pesan berhasil Logout Selesai Products
3.10.10 Pseudocode Layar Utama Account Masuk melalui menu navigasi Tampilkan pilihan Pilih account Tampilkan User ID Tampilkan Name Tampilkan Email Tampilkan Date of Birth
90 Tampilkan Gender Tampilkan Address Tampilkan Handphone Kembali ke pilihan Pilih Change Detail Tampilkan Name Masukkan Name Tampilkan Date of Birth Masukkan Date of Birth Tampilkan Gender Masukkan Gender Tampilkan Address Masukkan Address Tampilkan Handphone Masukkan Handphone Tekan tombol Save IF semua atau salah satu field kosong THEN Muncul pesan input salah ELSE IF Handphone bukan angka Muncul pesan input salah ELSE Perbaharui database msuser Muncul pesan update berhasil Kembali ke pilihan Pilih Change Email / Password Buka Form Change Password Masukkan Old Password
91 Masukkan New Password Masukkan Confirm New Password Tekan button submit IF Old Password salah THEN muncul pesan input salah ELSE IF New Password tidak Confirm New Password THEN
sama
dengan
muncul pesan input salah ELSE Database akan diperbaharui dan muncul pesan update sukses Selesai Change Password Buka Form Change email Masukkan New Email Masukkan Confirm New Email Tekan button submit IF New Email atau Confirm New Email kosong THEN Muncul pesan input kosong ELSE IF New Email tidak sama dengan Confirm New Email THEN muncul pesan input salah ELSE Database diperbaharui dan muncul update sukses Kembali ke pilihan Pilih Message IF input dari search tidak kosong THEN Tampilkan informasi message yang dicari
pesan
92 ELSE WHILE Tampilkan pengirim Tampilkan subyek pesan Tampilkan tanggal pesan Pilih pesan Tampilkan isi pesan Masukkan subyek balasan Masukkan isi balasan Tekan Reply IF subyek balasan atau isi balasan kosong THEN Tampilkan pesan input kosong ELSE Tambahkan pesan ke database Kembali ke halaman Message pesan balasan terkirim
dan
muncul
Kembali ke pilihan Pilih delete Tampilkan pesan konfirmasi IF konfirmasi sama dengan yes THEN Hapus dari database ELSE Batal hapus Kembali ke pilihan Kembali ke pilihan Pilih Logout untuk keluar dan menampilkan pesan berhasil Logout Selesai Account
menampilkan
layar
Login
dan
93
3.10.11 Pseudocode Layar Utama Shopping Cart Tampilkan keterangan produk yang sudah dipilih Hitung subtotal Hitung total Tampilkan pilihan Tekan Delete Hapus field yang dipilih Kembali ke pilihan Tekan Edit Quantity Tampilkan quantity Masukkan quantity Jumlahkan quantity Kembali ke pilihan Tekan Purchase IF
isi cart kosong THEN Tampilkan pesan cart kosong
ELSE Tambahkan ke database trheadertransaction dan trdetail transaction Hapus database mscart Tampilkan pesan pemesanan berhasil Kembali ke pilihan Pilih Logout untuk keluar dan menampilkan layar Login dan menampilkan pesan berhasil Logout Selesai Shopping Cart
94
3.10.12 Pseudocode Layar Utama Contact Tampilkan informasi contact IF sudah Login THEN Tampilkan menu Shopping Cart , Account , dan Logout Pilih Logout untuk keluar dan menampilkan layar Login dan menampilkan pesan berhasil Logout Tampilkan panel kirim pesan ke admin Masukkan subyek pesan Masukkan isi pesan Tekan send IF subyek pesan atau isi pesan kosong THEN Tampilkan pesan input kosong ELSE Tambahkan ke database Tampilkan pesan berhasil ELSE Tampilkan panel login Tampilkan tulisan “login to send message” Pilih Logout untuk keluar dan menampilkan layar Login dan menampilkan pesan berhasil Logout Selesai Contact
