ANALISIS DAN PERANCANGAN SISTEM
2. Perancangan Antar Muka Admin
Antar muka home (A01) yang dijelaskan pada gambar 3.47
A01
Administrator
Halaman ini hanya dipergunakan oleh administratoruntuk mengolah situs ini ID admin Password Login Login Footer Navigasi :
Klik Home menuju ke A01
Gambar 3. 47 Perancangan antarmuka home Admin
Antar muka menu data master (A02) yang dijelaskan pada gambar 3.48. A02
Administrator
Halaman ini hanya dipergunakan oleh administratoruntuk mengolah situs ini Data Kategori
Footer Data Ukuran
Data provinsi Data Kota Data Jasa Pengiriman
Data Ongkir Data Gambar Data Produk
Data master Transaksi Laporan Testimonial Retur Logout
Data Member Backup Data
Navigasi :
Klik Home menuju ke A01 Klik Data Master menuju ke A02 Klik Menu transaksi menuju ke A03
Klik Laporan menuju ke A04 Klik Kategori menuju ke A05 Klik Ukuran menuju ke A06 Klik Produk Menuju A07 Klik provinsi Menuju A08 Klik kota Menuju A09
Klik Detail produk menuju A10 Klik Shipping menuju A11
Antar muka Menu transaksi (A03) yang dijelaskan pada gambar 3.49. A03 Administrator Footer No Data Transaksi Detail Action Data master Transaksi Laporan Testimonial Logout
Filter
Retur
Navigasi :
Klik Home menuju ke A01 Klik Data Master menuju ke A02 Klik Menu transaksi menuju ke A03
Klik Laporan menuju ke A04
Gambar 3. 49 Perancangan antarmuka Menu transaksi
Antar muka laporan (A04) yang dijelaskan pada gambar 3.50. A04
Administrator Laporan Harian
Footer Laporan Bulanan
Data master Transaksi Laporan Testimonial Retur Logout
Navigasi :
Klik Home menuju ke A01 Klik Data Master menuju ke A02
Klik Menu transaksi menuju ke A03
Klik Laporan menuju ke A04 Klik Laporan harian menuju ke A12
Klik Laporan bulanan menuju ke A13
129
Antar muka kategori (A05) yang dijelaskan pada gambar 3.50.
A05 Administrator Data Kategori Footer * Tambah * Lihat Kategori * Pencarian
ID Kategori KategoriNama Dihapus Action Data master Transaksi Laporan Testimonial Retur Logout
Navigasi :
Klik Home menuju ke A01 Klik Data Master menuju ke A02
Klik Menu transaksi menuju ke A03
Klik Laporan menuju ke A04 Klik Kategori menuju ke A05 Klik tambah kategori menuju A14
Klik edit kategori menuju A35 Klik hapus kategori menuju A36
Gambar 3. 51 Perancangan antarmuka Menu Kategori
Antar muka ukuran (A06) yang dijelaskan pada gambar 3.52.
A06 Administrator Data Ukuran Footer * Tambah * Lihat Ukuran * Pencarian
Kode ukuran ukuranNama Dihapus Action Data master Transaksi Laporan Testimonial Retur Logout
Navigasi :
Klik Home menuju ke A01
Klik Data Master menuju ke A02
Klik Menu transaksi menuju ke
A03
Klik Laporan menuju ke A04
Klik Ukuran menuju ke A06
Klik tambah ukuran menuju A16
Klik edit ukuran menuju A23
Klik hapus ukuran menuju A24
Antar muka produk (A07) yang dijelaskan pada gambar 3.53. A07 Administrator Data Ukuran Footer * Tambah * Lihat Produk * Pencarian Produk Harga Produk
ID KategoriNama Nama Produk Deskripsi Berat Dihapus Action Data master Transaksi Laporan Testimonial Retur Logout
Navigasi :
Klik Home menuju ke A01 Klik Data Master menuju ke A02
Klik Menu transaksi menuju ke A03
Klik Laporan menuju ke A04 Klik Produk Menuju A07 Klik tambah produk menuju A15
Klik edit produk menuju A27 Klik hapus produk menuju A28
Gambar 3. 53 Perancangan antarmuka pengolahan data produk
Antar muka provinsi (A08) yang dijelaskan pada gambar 3.54. A08 Administrator Data Provinsi Footer * Tambah * Lihat Provinsi
* Pencarian ProvinsiKode Kode provinsiNama Dihapus Action provinsi
Data master Transaksi Laporan Testimonial Retur Logout
Navigasi :
Klik Home menuju ke A01
Klik Data Master menuju ke A02
Klik Menu transaksi menuju ke
A03
Klik Laporan menuju ke A04
Klik provinsi Menuju A08
Klik tambah provinsi menuju A19
Klik edit provinsi menuju A25
Klik hapus provinsi menuju A26
131
Antar muka kota (A09) yang dijelaskan pada gambar 3.55.
A09 Administrator Data Kota Footer * Tambah * Lihat Kota
* Pencarian Kode Kota Nama kota Dihapus Action
Data master Transaksi Laporan Testimonial Retur Logout
Navigasi :
Klik Home menuju ke A01
Klik Data Master menuju ke A02
Klik Menu transaksi menuju ke A03
Klik Laporan menuju ke A04
Klik kota Menuju A09
Klik tambah kota menuju A20
Klik edit kota menuju A29
Klik hapus kota menuju A30
Gambar 3. 55 Perancangan antarmuka pengolahan data Kota
Antar muka detail produk (A10) yang dijelaskan pada gambar 3.56.
A10
Administrator Data Detail Produk
Footer * Tambah
* Lihat Detail produk * Pencarian
Ukuran
Tgl detail_IDProduk Produk Dihapus Action ID Diskon Stok
Data master Transaksi Laporan Testimonial Retur Logout
Navigasi :
Klik Home menuju ke A01 Klik Data Master menuju ke A02
Klik Menu transaksi menuju ke A03
Klik Laporan menuju ke A04 Klik Detail produk menuju A10 Klik tambah detail produk menuju A18
Klik edit detail produk menuju A31
Klik hapus detail produk menuju A32
Antar muka Shipping (A11) yang dijelaskan pada gambar 3.57. A11 Administrator Data shipping Footer * Tambah * Lihat shipping * Pencarian Ongkir ID
NO. Jasa ID Kota ID Ongkos kirim Stok Dihapus Action Data master Transaksi Laporan Testimonial Retur Logout
Navigasi :
Klik Home menuju ke A01 Klik Data Master menuju ke A02
Klik Menu transaksi menuju ke A03
Klik Laporan menuju ke A04 Klik Shipping menuju A11 Klik tambah shipping menuju A22
Klik edit shipping menuju A33 Klik hapus shipping menuju A34
Gambar 3. 57 Perancangan antarmuka pengolahan data Shipping
Antar muka pengolahan laporan harian (A12) yang dijelaskan pada gambar 3.58.
A12 Administrator Laporan harian Footer Tgl Proses Laporan bulanan Bln Thn Batal
Data master Transaksi Laporan Testimonial Retur Logout
Navigasi :
Klik Home menuju ke A01 Klik Data Master menuju ke A02
Klik Menu transaksi menuju ke A03
Klik Laporan menuju ke A04 Klik Laporan harian menuju ke A12
Klik Laporan bulanan menuju ke A13
133
Antar muka pengolahan laporan bulanan (A13) yang dijelaskan pada gambar 3.59.
A12 Administrator Footer Laporan harian Bln Proses Laporan bulanan Thn Batal
Data master Transaksi Laporan Testimonial Retur Logout
Navigasi :
Klik Home menuju ke A01 Klik Data Master menuju ke A02 Klik Menu transaksi menuju ke A03 Klik Laporan menuju ke A04 Klik Laporan harian menuju ke A12 Klik Laporan bulanan menuju ke A13
Gambar 3. 59 Perancangan antarmuka pengolahan laporan bulanan
Antar muka Tambah kategori (A14) yang dijelaskan pada gambar 3.60.
A14 Administrator Data kategori Footer * Tambah * Lihat kategori * Pencarian batal simpan Nama kategori
Data master Transaksi Laporan Testimonial Retur Logout
Navigasi :
Klik Home menuju ke A01 Klik Data Master menuju ke A02
Klik Menu transaksi menuju ke A03
Klik Laporan menuju ke A04 Klik Kategori menuju ke A05 Klik tambah kategori menuju A14
Antar muka Tambah produk(A15) yang dijelaskan pada gambar 3.61 A15 Administrator Data produk Footer * Tambah * Edit Produk * Pencarian batal simpan Nama kategori Nama produk Harga Berat Deskripsi
Data master Transaksi Laporan Testimonial Retur Logout
Navigasi :
Klik Home menuju ke A01 Klik Data Master menuju ke A02 Klik Menu transaksi menuju ke A03
Klik Laporan menuju ke A04 Klik Produk Menuju A07 Klik tambah produk menuju A15
Gambar 3. 61 Perancangan antarmuka tambah produk
Antar muka Tambah ukuran(A16) yang dijelaskan pada gambar 3.62.
A16 Administrator Data ukuran Footer * Tambah * Lihat ukuran * Pencarian batal simpan Nama ukuran Kode ukuran
Data master Transaksi Laporan Testimonial Retur Logout
Navigasi :
Klik Home menuju ke A01 Klik Data Master menuju ke A02
Klik Menu transaksi menuju ke A03
Klik Laporan menuju ke A04 Klik Ukuran menuju ke A06 Klik tambah ukuran menuju A16
135
Antar muka Tambah gambar(A17) yang dijelaskan pada gambar 3.63.
A17 Administrator Data gambar Footer * Tambah * Lihat gambar * Pencarian batal simpan Nama gambar Nama produk
File gambar Browse Data master Transaksi Laporan Testimonial Retur Logout
Navigasi :
Klik Home menuju ke A01 Klik Data Master menuju ke A02
Klik Menu transaksi menuju ke A03
Klik Laporan menuju ke A04 Klik tambah gambar menuju A17
Gambar 3. 63 Perancangan antarmuka tambah gambar
Antar muka Tambah Detail produk(A18) yang dijelaskan pada gambar 3.64.
A18
Administrator Data detail produk
Footer * Tambah
* Lihat detail produk * Pencarian batal simpan Ukuran Nama produk Diskon Stok
Data master Transaksi Laporan Testimonial Retur Logout
Navigasi :
Klik Home menuju ke A01
Klik Data Master menuju ke A02
Klik Menu transaksi menuju ke A03
Klik Laporan menuju ke A04
Klik Detail produk menuju A10
Klik tambah detail produk menuju A18
Antar muka Tambah provinsi(A19) yang dijelaskan pada gambar 3.65. A19 Administrator Data provinsi Footer * Tambah * Lihat provinsi * Pencarian batal simpan Nama provinsi
Data master Transaksi Laporan Testimonial Retur Logout
Navigasi :
Klik Home menuju ke A01
Klik Data Master menuju ke A02
Klik Menu transaksi menuju ke A03
Klik Laporan menuju ke A04
Klik provinsi Menuju A08
Klik tambah provinsi menuju A19
Gambar 3. 65 Perancangan antarmuka tambah provinsi
Antar muka Tambah Kota(A20) yang dijelaskan pada gambar 3.66.
A20 Administrator Data kota Footer * Tambah * Lihat kota * Pencarian batal simpan Nama kota Nama provinsi
Data master Transaksi Laporan Testimonial Retur Logout
Navigasi :
Klik Home menuju ke A01
Klik Data Master menuju ke A02
Klik Menu transaksi menuju ke A03 Klik Laporan menuju ke A04
Klik kota Menuju A09 Klik tambah kota menuju A20
137
Antar muka Tambah jasa pengiriman(A21) yang dijelaskan pada gambar 3.67.
A21
Administrator Data Jasa Pengiriman
Footer * Tambah * Lihat jasa * Pencarian batal simpan Nama jasa Kode jasa
Data master Transaksi Laporan Testimonial Retur Logout
Navigasi :
Klik Home menuju ke A01
Klik Data Master menuju ke A02
Klik Menu transaksi menuju ke A03 Klik Laporan menuju ke A04
Klik tambah jasa pengiriman menuju A21
Gambar 3. 67 Perancangan antarmuka tambah jasa pengiriman
Antar muka Tambah shipping(A22) yang dijelaskan pada gambar 3.68.
A22 Administrator Data shipping Footer * Tambah * Lihat shipping * Pencarian batal simpan Provinsi Jasa Pengiriman Ongkir ID Ongkos kirim Kota
Data master Transaksi Laporan Testimonial Retur Logout
Navigasi :
Klik Home menuju ke A01
Klik Data Master menuju ke A02 Klik Menu transaksi menuju ke A03 Klik Laporan menuju ke A04
Klik Shipping menuju A11 Klik tambah shipping menuju A22
3.2.3 Perancangan Pesan
Pada gambar yang merupakan perancangan pesan yang terdapat pada aplikasi e-commerce Moist Clothing. Adapun tampilan pesan yang dijelaskan pada gambar 3.69.
M01
Username dan password salah
M02
Nama harus diisi
M03
Alamat harus diisi
M04
Provinsi harus diisi
M05
Kota harus diisi
M06
Kodepos harus diisi
M07
Password harus diisi
M08
Maaf, email yang anda masukan telah terdaftar M09
Anda telah berhasil melakukan Registrasi. Silahkan melakukan aktivasi
M10
Kategori produk belum dipilih M11
Ukuran produk belum dipilih M12
Stok tidak mencukupi M13
Data berhasil ditambah
M14
Data berhasil diubah
M15
Data berhasil dihapus
M16
Apakah anda yakin? YA TIDAK M17
Data gagal disimpan
M18
Maaf, email yang anda masukan salah
M19
Maaf, password yang anda masukan salah
M20
Terima kasih sudah berkunjung
Gambar 3. 69 Perancangan Pesan
3.2.4 Jaringan Semantik
Setelah melakukan perancangan antarmuka dan perancangan pesan maka dilakukanlah perancangan terhadap aliran dari menu-menu yang ada di program akan digambarkan dalam sebuah jaringan semantik.
139