MAKALAH PERANCANGAN WEB E-COMMERCE (B2C)

PENJUALAN CAKES & COOKIES ONLINE

MAKALAH
PERANCANGAN WEB

Diajukan untuk memenuhi tugas UAS (Ujian Akhir Semester) Semester V

Indah Puji Lestari (12161330)

Novia Nurdianty (12161687)
Renti M Silalahi (12162145)
Tita Lestari (12160708)

Jurusan Sistem Informasi

Fakultas Teknologi Informasi Universitas Bina Sarana Informatika
Jakarta
2018
 KATA PENGANTAR

Dengan mengucap puji dan syukur kehadirat Allah SWT, karena atas rahmat dan hidayah-

Nya kami selaku anggota kelompok dapat menyelesaikan tugas makalah perancangan web ini

untuk memenuhi syarat nilai pengganti UAS mata kuliah perancangan web. Dalam makalah yang

kami buat ini, kami meberikan judul MAKALAH PERANCANGAN WEB E-COMMERCE

PENJUALAN CAKES & COOKIES ONLINE.

Dengan segala kerendahan hati kami sebagai anggota kelompok, menyadari bahwa

penulisan di dalam makalah ini masih jauh dari kesempurnaan dan tidak luput dari kesalahan. Hal

ini mengingat kemampuan dan pengalaman kami serta pengetahuan yang kami miliki sangat

terbatas untuk menghasilkan karya tulis yang baik. Oleh karena itu saran dan kritik yang

membangun dari semua pihak sangat kami harapkan.

Penulisan makalah ini tidak akan terwujud tanpa bantuan dari beberapa pihak, yaitu kepada

kedua orang tua kami tercinta yang telah mengizinkan kami meluangkan waktu kami untuk belajar

kelompok, Dosen kami Ibu Nur Aini yang telah membimbing kami dalam menyelesaikan makalah

ini dengan sempurna. Semoga Allah SWT senantiasa membalas kebaikan atas bantuannya kepada

kami.

Aamiin

WassalamualaikumWr. Wb.

Penulis, Jakarta 2018

PERANCANGAN WEB i
 LEMBAR ABSTRAKSI

Perkembangan internet tidak hanya untuk sarana informasi maupun entertainment namun

saat ini banyak digunakan untuk transaksi secara online. Hal ini sangat menguntungkan karena

bisnis melalui online bisa menjangkau seluruh wilayah di Indonesia, bahkan dunia. Bisnis internet

merupakan suatu bisnis yang dalam prosesnya baik dalam pemesanan maupun pengantaran

barangnya seluruhnya menggunakan media internet. Bisnis ini juga disebut e-commerce. Salah

satu jenis e-commerce yang sedang berkembang pesat di Indonesia adalah Business To

Consumer (B2C). Jenis ini merupakan bentuk jual beli produk atau jasa yang melibatkan

perusahaan penjual dan konsumen akhir yang dilakukan secara elektronis melalui internet. B2C

semakin diminati karena transaksinya mudah dan cepat, serta pembayaran dapat dilakukan

melalui internet banking. Sebagai sebuah toko penjualan cake & cookies, Trins

Store sangat membutuhkan pengembangan sistem penjualan mandiri yang aman dan

nyaman. Trins Store masih menyimpan data penjualan secara manual, mulai dari pencatatan

pembeli yang memesan barang, sampai penyimpanan data-data lainnya yang berhubungan dengan

proses penjualan. Mengunakan website e-commerce sebagai salah satu media penjualan dan

promosi akan memperluas daerah pemasaran dan memudahkan pembeli untuk memilih dan

memesan sehingga dapat meningkatkan omzet penjualan. Perancangan e-commerceini merupakan

solusi yang baik sebagai jalan keluar dari permasalahan yang dialami Trins Store.

Kata Kunci: Perancangan Web E-commerce, Business To Consumer, Penjualan Online

PERANCANGAN WEB ii
 DAFTAR ISI

Halaman
Kata Pengantar ................................................................................................................... i
Lembar Abstraksi ............................................................................................................... ii
Daftar Isi ............................................................................................................................ iii
Daftar Simbol ..................................................................................................................... v
Daftar Gambar ................................................................................................................... vii

BAB I PENDAHULUAN
1.1 Latar Belakang Masalah ...................................................................... 1
1.2 Tujuan dan Manfaat ............................................................................ 3
1.3 Metode Penelitian ................................................................................ 3
1.4 Ruang Lingkup .................................................................................... 4

BAB II LANDASAN TEORI

2.1 Konsep Dasar Sistem .......................................................................... 5
2.2 Teori Pendukung ................................................................................. 6

BAB III ANALISIS SISTEM BERJALAN

3.1 Tinjauan Perusahaan ........................................................................... 9
3.1.1 Sejarah Institusi/Perusahaan ...................................................... 9
3.1.2 Struktur Organisasi dan fungsi .................................................. 10
3.2 Prosedur Sistem Berjalan .................................................................... 11
3.3 Usecase Diagram ................................................................................ 12
3.4 Spesifikasi Dokumen Sistem Berjalan ................................................ 13
3.5 Permasalahan Pokok ........................................................................... 14
3.6 Pemecahan Masalah ............................................................................. 14

BAB IV PERANCANGAN SISTEM USULAN

4.1 Tahapan Perancangan Sistem ............................................................... 16
4.1.1. Analisis Kebutuhan ................................................................... 16
4.1.2. Rancangan Diagram Use Case .................................................. 18
4.1.3. Rancangan Diagram Aktivitas .................................................. 19
4.1.4. Rancangan Dokumen Sistem Usulan ........................................ 20
4.1.5. Rancangan Prototype ................................................................ 21
4.2 Perancangan Perangkat Lunak ............................................................ 33
4.2.1. Entity Relationship Diagram (ERD) .......................................... 33
4.2.2. Logical Record Structure (LRS) ................................................ 34

PERANCANGAN WEB iii

 4.2.3. Class Model / Class Diagram .................................................... 36
4.2.4. Sequence Diagram ..................................................................... 37
4.2.5. Spesifikasi Hardware dan Software .......................................... 41

BAB V PENUTUP
5.1. Kesimpulan ......................................................................................... 44
5.2. Saran .................................................................................................... 45

DAFTAR PUSTAKA

PERANCANGAN WEB iv
 DAFTAR SIMBOL

Simbol UML

1. Simbol Usecase

2. Simbol Activity Diagram

PERANCANGAN WEB v
PERANCANGAN WEB vi
 DAFTAR GAMBAR
Halaman
1. Gambar III.1. Struktur Organisasi ................................................................................. 10
2. Gambar III.2. Use Case Diagram .................................................................................. 12
3. Gambar IV.1. Rancangan Use Case Diagram ............................................................... 18
4. Gambar IV.2. Rancangan Activity Diagram ................................................................. 19
5. Gambar IV.3. Rancangan Antarmuka Login Admin ..................................................... 22
6. Gambar IV.4. Rancangan Antarmuka Halaman Admin ............................................... 23
7. Gambar IV.5. Rancangan Antarmuka Halaman User ................................................... 24
8. Gambar IV.6. Struktur Navigasi Front End ................................................................... 25
9. Gambar IV.7. Struktur Navigasi Back End ................................................................... 26
10. Gambar IV.8. Halaman Login Admin............................................................................ 28
11. Gambar IV.9. Halaman Admin ..................................................................................... 29
12. Gambar IV.10. Halaman User ....................................................................................... 30
13. Gambar IV.11. ERD (Entity Relationship Diagram) .................................................... 33
14. Gambar IV.12. LRS (Logical Record Sturcture) .......................................................... 35
15. Gambar IV.13. Class Diagram ...................................................................................... 36
16. Gambar IV.14. Sequence Diagram Login ..................................................................... 37
17. Gambar IV.15. Sequence Diagram Insert, Delete, View Data Transaksi ..................... 38
18. Gambar IV.16. Insert Produk ........................................................................................ 39
19. Gambar IV.17. Delete Produk ....................................................................................... 40
20. Gambar IV.18. Update Produk ...................................................................................... 41

PERANCANGAN WEB vii

 BAB I

PENDAHULUAN

1.1. Latar Belakang Masalah

Teknologi informasi yang berkembang begitu pesat menyebabkan terjadinya banyak

perubahan dalam aktivitas sebuah instansi maupun institusi baik dalam skala swasta maupun

negeri. Dengan dukungan teknologi komputer saat ini telah terbukti bahwa, komputer memegang

peranan penting dalam menunjang kelancaran aktivitas pekerjaan di dalam sebuah perusahaan.

Kebutuhan terhadap informasi saat ini begitu penting sehingga informasi harus dapat diakses

kapan saja, dimana saja dan real time sesuai dengan kebutuhan penggunanya. Salah satu media

yang sudah semakin akrab dengan masyarakat saat ini adalah situs web yang banyak digunakan

sebagai media sarana on – line dalam berkomunikasi. Hal ini menyebabkan perubahan paradigma

dalam hal kinerja institusi yang tadinya berbasiskan Manual menjadi berbasis dekstop dan situs

online, sehingga jalannya sebuah aktivitas menjadi lebih mudah dan cepat.

Seperti yang kita sadari, bahwa saat ini internet telah menjadi sesuatu yang integral. Melalui

fasilitas internet yang di kenal dengan World Wide Web (WWW) atau lebih dikenal dengan nama

Web, segala kebutuhan masyarakat terhadap internet seolah terwadahi. Kemudahan yang

ditawarkan aplikasi ini membuat masyarakat mudah mengakses informasi yang beredar. Bagi para

pelajar atau mahasiswa akan mudah update informasi tentang ilmu pengetahuan hanya dengan

meng-klik dari internet. Hasil-hasil penelitian yang termuat dalam jurnal-jurnal pendidikan,

program pendidikan terbaru diberbagai negara, buku-buku terbaru, model kurikulum terbaru,

profil pendidikan dari sd sampai keperguruan tinggi, kebijakan pendidikan, dan pendalaman

pelajaran dapat diperoleh dengan mudah dan cepat. Pemanfaatan internet dalam suatu institusi

PERANCANGAN WEB 1
dapat membuat pekerjaan semakin efektif. Untuk dinas pemerintahan, internet akan sangat

membantu dalam mensukseskan program e-government. Dalam e-government, internet menjadi

teknologi yang berperan dalam proses penyediaan dan transfer informasi dari pemerintah kepada

pihak lain, misalnya warga masyarakat, ataupun sebaliknya.

Sedangkan bagi para pelaku bisnis, kemudahan yang di tawarkan internet dan

kecenderungan masyarakat terhadap internet saat ini mereka jadikan sebagai peluang bisnis.

Penggunaan internet untuk keperluan bisnis sering disebut dengan istilah E-Commerce. Dengan

E-Commerce memungkinkan kita bertransaksi dengan cepat dan biaya yang murah tanpa melalui

proses yang sulit, dimana pihak pembeli (buyer) cukup mengakses internet ke website perusahaan

yang mengiklankan poduknya di internet, yang kemudian pihak pembeli (buyer) cukup

mempelajari term of condition (ketentuan-ketentuan yang di syaratkan) oleh pihak penjual.

Mengingat pengamatan yang dapat diperoleh dari penerapan aplikasi web dan dunia bisnis maka

tidak ada salahnya untuk mencoba menerapkan teknologi ini dilingkungan penjualan, khususnya

di TRINS CAKES & COOKIES, misalnya aplikasi berbasis web diterapkan dalam sistem

informasi website yang menyediakan data data yang tersedia di toko tersebut.

TRINS CAKES & COOKIES adalah sebuah toko online yang menyediakan berbagai macam

aneka kue basah dan kue kering. Bila dilihat dari kelengkapan produk yang dijual, TRINS CAKES

& COOKIES diantaranya menjual aneka kue kering dan berbagai kue basah lainnya seperti kue

tart ulang tahun dan sebagainya. Dalam proses penjualannya, TRINS CAKES & COOKIES sudah

menerapkan sistem online keseluruhan dan sudah tidak memakai sistem offline seperti beli di toko

atau bayar ditempat. Pengembangan aplikasi berbasis web ini akan penulis sajikan dalam bentuk

makalah dengan judul “MAKALAH PERANCANGAN WEB E-COMMERCE PENJUALAN

CAKES & COOKIES ONLINE”.

PERANCANGAN WEB 2
1.2. Tujuan dan Manfaat

Tujuan dari perancangan web ini adalah untuk adalah mengembangkan sistem pemasaran di

era global dengan menggunakan website sebagai salah satu cara memperluas dan mempermudah

konsumen.

Tujuan dan manfaat dari perancangan web ini antara lain :

a. Mempermudah proses penjualan dan pemasaran

b. Mengontrol pengeolaan transaksi penjualan dan pemasaran

c. Mempermudah konsumen dalam proses membeli

d. Menganalisa dan merancang e-commerce untuk memudahkan owner dalam proses

pemasaran produk dan update produk secara online.

e. Menyajikan informasi produk secara rinci dan up todate.

f. Mempermudah pendataan Data Pelanggan dan Data Pemesanan.

1.3. Metode Penelitian

Dalam rangka pengumpulan data yang diperlukan dalam penulisan makalah ini penulis

menggunakan beberapa metode, diantaranya adalah :

1. Metode Analisis terdiri atas :

a. Penelitian

b. Analisis terhadap temuan dari penelitian

c. Studi Pustaka

d. Identifikasi persyaratan sistem

PERANCANGAN WEB 3
2. Metode perancangan terdiri atas :

a. Rancangan database

b. Pembuatan struktur menu

c. Pembuatan spesifikasi database

d. Pembuatan tampilan layar

1.4. Ruang Lingkup

Berdasarkan uraian diaatas, maka ruang lingkup penulis di batasi pada :

1. Pengelolaan transaksi penjualan

a. Katalog produk

b. New produk

2. Pemesanan.

a. Cara pemesanan.

3. Pembayaran.

a. Transfer melalui bank

b. Konfirmasi pembayaran

c. History pembayaran

d. Status barang / status pengiriman

e. History pemesanan

PERANCANGAN WEB 4
 BAB II

LANDASAN TEORI

2.1. Konsep Dasar Sistem

Web merupakan kumpulan informasi pada server komputer yang terhubung satu sama

lain dalam jaringan internet maupun intranet. Sedangkan aplikasi berbasis web (web based)

secara prinsip menyerupai aplikasi dalam komputer biasa. Yang membedakan adalah dalam

aplikasi web based menggunakan tag-tag html sebagai dasar tampilan, sedangkan aplikasi

program komputer menggunakan berbagai platform bahasa pemrograman. Aplikasi web terdiri

dari beberapa golongan, diantaranya adalah :

1. Inisialisasi Data Master

Proses yang dilakukan adalah pengisian satu atau beberapa tabel yang akan digunakan sebagai

referensi program aplikasi. Pengisian data master secara umum terdiri dari input data, verifikasi

data, proses insert data jika data belum terdaftar sebelumnya, atau update data jika data telah

ada sebelumnya, serta delete data jika data hendak dihapus dari tabel master.

2. Operasi Reporting

Operasi mendapatkan data hasil query yang telah diolah sehuingga didapat informasi yang

digunakan untuk kepentingan manajerial dan rekapitulsi beberapa transaksi. Selain beberapa

golongan tersebut juga terdapat operasi verifikasi, penampilan profil, penyampaian pesan,

pengisian pesan khusus serta kombinasi dari beberap golongan tersebut.

PERANCANGAN WEB 5
2.2. Teori Pendukung

A. Definisi Sistem

Sistem adalah kumpulan dari user/lemen-elemen yang saling berkaitan/berinteraksi dan saling

mempengaruhi dalam melakukan kegiatan bersamauntuk mencapai suatu tujuan tertentu.

(Jogianto,2001:2)

1. Karakteristik sistem

a. Komponen (Component)

Suatu sistem terdiri dari jumlah komponen yang saling berinteraksi, bekerja sama

membentuk satu kesatuan.

b. Batasan sistem (boundary)

Batas sistem merupakan daerah yang membatasi antara satu sistem dengan sistem yang

lainnya atau dengan lingkungan luar.

c. Lingkungan luar sistem (Envroment)

Segala sesuatu diluar dari batas sistem yang mempengaruhi oprasi dari suatu sistem.

d. Penghubung sistem (Interface)

Merupakan media penghubung antara satu subsistem dengan subsistem yang lainnya.

e. Masukan sistem (Input)

Merupakan energi yang dimasukan kedalam sistem.

f. Keluaran sistem (Output)

Merupakan hasil dari energi yang diolah oleh sistem.

g. Pengolahan sistem (Proces)

Merupakan bagian yang memproses masukan untuk menjadi keluaran yang diinginkan.

h. Tujuan sistem (goal)

PERANCANGAN WEB 6
 Setiap sistem pasti mempunyai tujuan ataupun sasaran yang mempengaruhi input yang

dibutuhkan dan output yang dihasilkan. Dengan kata lain suatu sistem akan dikatakan

berhasil kalau pengoperasian sistem itu mengenai sasaran atau tujuan.

B. Definisi E-Commerce

Menurut David Baum, pengertian e-commerce adalah: “E-Commerce is a dynamic set of

technologies, applications, and business process that link enterprise, consumers, and communities

through electronic transactions and the electronic exchange of goods, services, and information”.

E-Commerce merupakan satu set dinamis teknologi, aplikasi, dan proses bisnis yang

menghubungkan perusahaan, konsumen, dan komunitas tertentu melalui transaksi elektronik dan

perdagangan barang, pelayanan, dan informasi yang dilakukan secara elektronik (Purbo,2000:2).

1. E-Commerce memiliki lima konsep dasar :

a. Automation

Otomasi bisnis proses sebagaipengganti proses manual (konsep“enterprise resource

planning“).

b. Streamlining / Integration

Proses yang terintegrasi untuk mencapai hasil yang efesien dan efektif (konsep “just in

time“).

c. Publishing

Kemudahan berkomunikasi dan berpromosi untuk produk dan jasa yang diperdagangkan

(konsep “electronic cataloging“).

d. Interaction

Pertukaran informasi/data antar pelaku bisnis dengan meminimalisasikan human error

(konsep “electronic data interchange“).

PERANCANGAN WEB 7
e. Transaction

Kesepakatan dua pelaku bisnis dengan bertransaksi dengan melibatkan institusi lain

sebagai fungsi pembayar (konsep “electronic payment“).

PERANCANGAN WEB 8
 BAB III

ANALISIS SISTEM BERJALAN

3.1. Tinjauan Perusahaan

3.1.1. Sejarah Institusi/Perusahaan

Didirikan pada tahun 2018, Trin’s Store (Cakes & Cookies) adalah toko

penjualan cake & cookies online yang menyajikan berbagai pilihan kue dan inovasi

yang dibuat dengan bahan-bahan berkualitas baik.

Trin’s Store (Cakes & Cookies) memberikan peningkatan yang signifikan dalam

produksi kue dengan waktu, pengalaman dan peningkatan teknologi makanan dan

berkembang ke pasar mainstream lainnya.

Trin’s Store (Cakes & Cookies) melayani berbagai produk kue tradisional, kue ulang

tahun, kue, cokelat praline, dan kue keri ng. Melalui produk dan layanan internet ini,

Trin’s Store (Cakes & Cookies) terus berkembang dalam layanan cake & cookies di

industri domestik Indonesia.;’/

 VISI

Menyenangkan konsumen dengan produk-produk kami dan menjadikannya

penggemar Trin’s Store (Cakes & Cookies).

 MISI

Menyediakan aneka ragam produk yang sehat untuk dikonsumsi masyarakat dan

memberikan pelayanan yang terbaik kepada konsumen.

PERANCANGAN WEB 9
3.1.2. Struktur Organisasi dan Fungsi

Gambar III.1

Struktur Organisasi

Fungsi masing masing bagian adalah sebagai berikut:

1. Pemilik (Owner)

Sebagai pemilik bisnis online Trins Store (Cakes & Cookies)

2. Pengelola Toko

Yang berwenang sebagai pengelola toko

3. Bagian Produksi

Yang bertanggung jawab dalam segala hal yang berhubungan dengan produksi

4. Bagian Gudang

PERANCANGAN WEB 10
 Bertanggung jawab ketersediaan barang masuk dan keluar barang danmelakukan stok

opname tiap minggunya

5. Bagian Pemasaran

Yang bertugas memasarkan atau mempromosikan produk

6. Karyawan

Bertugas sebagai kurir pribadi dari Toko online Trin’s Store, yang mengantarkan barang

ke konsumen.

3.2. Prosedur Sistem Berjalan

Customer mengunjungi website Trins Store, lalu memilih produk yang hendak di pesan.

Setelah itu customer melakukan pendaftaran member atau jika sudah mendaftar customer bisa

langsung login. Setelah login, customer melakukan pemesanan. Kemudian, melakukan transaksi

sesuai harga yang telah ditentukan dengan cara mentransfer melalui bank. Setelah customer

melakukan transfer via bank, admin menerima order pembelian. Admin mengirim barang pesanan

ke tempat tujuan pengiriman.

PERANCANGAN WEB 11
3.3. Use case Diagram

Gambar III.2

Usecase Diagram

PERANCANGAN WEB 12
3.4. Spesifikasi Dokumen Sistem Berjalan

1. Spesifikasi Dokumen Masukan

a. Data Barang

Sumber : Bagian Gudang

Tujuan : Bagian Pemasaran

Fungsi : Mencatat data barang yang terjual

Isi : Kode_barang, Nama_barang, Tipe_barang, Stock_barang, Harga_barang

Copy : 1 rangkap

2. Spesifikasi Dokumen Keluaran

a. Faktur Penjualan

Sumber : Bagian Pemasaran

Tujuan : Pengelola Toko

Fungsi : Bukti / Nota Penjualan barang

Isi : No_faktur, Nama_pembeli, Alamat_pembeli, Kode_barang,

Nama_barang, Tanggal_pembelian, Jumlaha_barang, Harga_total.

Copy : 2 rangkap

b. Laporan Penjualan

Sumber : Pengelola Toko

Tujuan : Pemilik (Owner)

Fungsi : Memeriksa semua transaksi penjualan yang telah dilakukan untuk

dijadikan bahan pembuat keputusan manajer.

PERANCANGAN WEB 13
 Isi : No_faktur, Nama_pembeli, Alamat_pembeli, Kode_barang,

Nama_barang, tanggal_pembelian, jumlah_barang, Harga_satuan,

Harga_total.

Copy : 2 rangkap

3.5. Permasalahan Pokok

Masih manualnya sistem berjalan yang digunakan di Trins Store menimbulkan berbagai

masalah diantaranya adalah :

1. Sistem penjualan yang masih menggunakan cara manual membuat proses penjualan tidak

efektif dan efisien.

2. Kurangnya sumber daya manusia di bidang teknologi informasi.

3. Sistem penjualan cara manual yang cukup rumit.

Sistem manual membuat data-data khususnya data penjualan menjadi sulit jika ingin dilihat

kembali dan rentan terhadap berbagai resiko.

3.6. Pemecahan Masalah

Pemecahan permasalahan yang dihadapkan pada di Trins Store lebih mendasar dan terletak

pada sumber daya manusia serta sistem yang dijalankan di toko online tersebut, sehingga pihak

manajemen harus melakukan tindakan efektif dan juga efisien terhadap permasalahan yang

timbulserta dapat mengambil langkah-langkah yang sesuai dengan manajemen agar ke depan Toko

online ini dapat lebih maju. Adapun alternatif pemecahan masalah adalah sbagai berikut :

PERANCANGAN WEB 14
1. Mulai memperbaiki kualitas dari sumber daya manusia di dalam toko online ini dengan banyak

mengirimkan karyawan untuk melakukan kegiatan workshop atau seminar khususnya yang

berhubungan dengan teknologi informasi agar pengetahuan para karyawan dapat berkembang.

2. Membenahi sistem manajemen maupun sistem yang digunakan khususnya dalam sistem

penggajian.

3. Beralih dari ke sistem manual ke sistem komputerisasi khususnya pada sistem penjualann agar

lebih efektif dan efisien serta meminimalisir dari berbagai resiko.

PERANCANGAN WEB 15
 BAB IV

PERANCANGAN SISTEM USULAN

4.1. Tahapan Perancangan Sistem

4.1.1. Analisa Kebutuhan

Kebutuhan fungsional pada perancangan web e-commerce Trins Store, antara lain:

1. Login

Halaman login diperlukan untuk menentukan pengguna yang berhak mengakses web.

Untuk dapat memiliki akses login tersebut, maka pengguna harus melakukan

daftar/registrasi terlebih dahulu.

2. Daftar

Halaman untuk mendaftar bagi pengguna yang belum memiliki akun di website Trins

Store.

3. Deskripsi Produk

Halaman produk diperlukan untuk menampilkan produk yang dijual, tiap produk memiliki

halaman masing-masing dengan detail sesuai produk masing-masing.

4. Beranda/Halaman Kategori Produk

Sebagai alaman awal yang dituju oleh pengunjung ketika mengakses website Trins Store

yang berisi kategori produk.

5. Halaman Edit Member

Halaman yang akan digunakan untuk mengedit pengguna yang sudah mendaftar atau sudah

menjadi member, dimana halaman ini berisi tentang member yang dapat dicari

menggunakan kolom pencarian dan member terdaftar dapa dihapus dari daftar.

PERANCANGAN WEB 16
6. Halaman Pemesanan

Sebagai halaman yang berfungsi untuk memesan barang yang ingin dibeli.

7. Halaman Status Pembelian

Halaman yang digunakan untuk melihat status barang yang akan dibeli.

8. Halaman Isi Data Produk

Halaman untuk memasukkan data produk atau barang yang akan dijual.

PERANCANGAN WEB 17
4.1.2. Rancangan Diagram Use case

Gambar IV.1

Rancangan Usecase Diagram

PERANCANGAN WEB 18
4.1.3. Rancangan Diagram Activitas

Gambar IV.2

Rancangan Activity Diagram

PERANCANGAN WEB 19
4.1.4. Rancangan Dokumen Sistem Usulan

1. Rancangan dokumen masukan :

a. Data Pelanggan

Sumber : Bagian Pemasaran

Tujuan : Bagian Pengelola Toko

Fungsi : Mencatat transaksi penjualan

Isi : No_faktur, Nama, Alamat, Telp, Tanggal, kode_barang, Nama_barang,

Jumlah, Harga_satuan, Total.

Copy : 1 rangkap

b. Data Barang

Sumber : Bagian Gudang

Tujuan : Bagian Pemasaran

Fungsi : Mencatat data barang yang terjual

Isi : Kode_barang, Nama_barang, Tipe_barang, Stock_barang, Harga_barang

Copy : 1 rangkap

2. Spesifikasi Dokumen Keluaran

a. Faktur Penjualan

Sumber : Bagian Pemasaran

Tujuan : Pengelola Toko

Fungsi : Bukti / Nota Penjualan barang

Isi : No_faktur, Nama_pembeli, Alamat_pembeli, Kode_barang,

Nama_barang, Tanggal_pembelian, Jumlaha_barang, Harga_total.

Copy : 2 rangkap

PERANCANGAN WEB 20
 b. Laporan Penjualan

Sumber : Pengelola Toko

Tujuan : Pemilik (Owner)

Fungsi : Memeriksa semua transaksi penjualan yang telah dilakukan untuk

dijadikan bahan pembuat keputusan manajer.

Isi : No_faktur, Nama_pembeli, Alamat_pembeli, Kode_barang,

Nama_barang, tanggal_pembelian, jumlah_barang, Harga_satuan,

Harga_total.

Copy : 2 rangkap

4.1.5. Rancangan Prototype

A. Rancangan Antar Muka

Menjelaskan rancangan antar muka (interface) yang terdapat pada web e-commerce

pada Trins Store.

PERANCANGAN WEB 21
1. Rancangan Antarmuka Login Admin

Gambar IV.3

Rancangan Antarmuka Login Admin

PERANCANGAN WEB 22
2. Rancangan Antarmuka Halaman Admin

Gambar IV.4

Rancangan Antarmuka Halaman Admin

a. Berisikan Menu pada halaman admin setelah melakukan login.

b. Main Content, disinilah nantinya semua halaman yang ada pada interface admin

ditampilkan berdasarkan menu yang dipilih.

PERANCANGAN WEB 23
3. Rancangan Antarmuka Halaman User

Gambar IV.5

Rancangan Antarmuka Halaman User

PERANCANGAN WEB 24
B. Struktur Navigasi

Berikut ini diuraikan struktur navigasi pada web e-commerce Trins Store.

1. Struktur Navigasi Front End

Gambar IV.6

Struktur Navigasi Front End

Keterangan:

a. Home

Navigasi untuk menuju Halaman Utama atau Beranda

b. Cakes

Navigasi untuk menuju Halaman Daftar Produk kue dari Trins Store ini.

c. Cookies

Navigasi untuk menuju halaman daftar produk kue kering dari Trins Store

d. Recipes

Navigasi untuk menuju halaman resep, yang di share oleh admin Trins store

PERANCANGAN WEB 25
2. Struktur Navigasi Back End

Gambar IV.7

Struktur Navigasi Back End

Keterangan :

a. Login

Navigasi untuk masuk sebagai Admin

b. Ganti Password

Navigasi untuk mengubah password

c. Add Module

Navigasi untuk menuju halaman untuk menginstall atau menambahkan modul

d. Add Produk

Navigasi untuk menuju halaman untuk dapat menambahkan, mengubah atau

pun menghapus produk.

e. Cek order

Navigasi untuk menuju halaman untuk melihat order atau pesanan yang telah

terkirim oleh customer

f. Ongkos Kirim

Navigasi untuk melihat ongkos kirim

PERANCANGAN WEB 26
 g. Add Profile

Navigasi untuk menambahkan profil

h. Cara Pembelian

Navigasi untuk menuju halaman tentang cara pembelian

i. Hubungi Kami

Navigasi untuk menuju halaman yang berisi tentang kontak yang dapat

dihubungi.

C. Implementasi

Implementasi rancangan antar muka web e-commerce pada Trins Store berdasarkan

hasil rancangan antar muka.

1. Halaman Login Admin

Administrator Trins Store harus melakukan login terlebih dahulu untuk dapat

menggunakan modul-modul yang tersedia. Jika login berhasil, maka menu-menu yang

sesuai dengan katagori user tersebut akan ditampilkan.

PERANCANGAN WEB 27
 Gambar IV.8

Halaman Login Admin

PERANCANGAN WEB 28
2. Halaman Admin

Halaman admin berisi modul-modul yang digunakan oleh admin untuk mengelola

konten pada website Trins Store, halaman ini akan tampil setelah admin melakukan

proses login pada halaman login admin.

Gambar IV.9

Halaman Admin

PERANCANGAN WEB 29
3. Halaman User

Halaman user berisi tentang semua informasi mengenai perusahaan termaksud juga

informasi tentang produk yang dijual di Trins Store. Proses pemesanan produk

dilakukan pada halaman user.

Gambar IV.10

Halaman User

PERANCANGAN WEB 30
D. Pengujian

Pengujian terhadap halaman yang dibuat menggunakan blackbox testing yang

fokus terhadap proses masukan dan keluaran.

a. Pengujian terhadap halaman login

Tabel hasil pengujian blackbox testing halaman login

Tabel III.1

Hasil Pengujian Black Box Testing Halaman Login

No Skenario Text case Hasil yang Hasil Kesimpulan

Pengujian diharapkan pengujian

1. Email dan Email : (kosong) Sistem akan Sesuai Valid

Password tidak Password : menolak harapan

diisi kemudian (kosong) akses user

klik tombol login

2. Mengetikkan Email : Sistem akan Sesuai Valid

Email dan admin@trins.store menolak harapan

Password tidak Password : akses user

diisi atau kosong (kosong)

kemudian klik

tombol login

3. Email tidak diisi Email : Sistem akan Sesuai Valid

(kosong) dan (kosong) menolak harapan

Password diisi Password : akses user

PERANCANGAN WEB 31
 kemudian klik (**********)

tombol login

4. Mengetikkan Email : Sistem akan Sesuai Valid

salah satu kondisi admin@trins.store menolak harapan

salah pada Email Password : akses user

atau Password (**********)

kemudian klik -salah

tombol login

5. Mengetikkan Email : Sistem Sesuai Valid

Email dan admin@trins.store menerima harapan

Password dengan Password : akses login

data yang benar (**********) dan

kemudian klik -benar kemudian

tombol login langsung

menampilkan

menu utama

PERANCANGAN WEB 32
4.2. Perancangann Perangkat Lunak

4.2.1. Entity Relationship Diagram (ERD)

Perancangan basis data menghasilkan pemetaan tabel-tabel yang digambarkan dengan

Entity Relationship Diagram (ERD).

Gambar IV.11

ERD (Entity Relationship Diagram)

PERANCANGAN WEB 33
4.2.2. Logical Record Structure (LRS)

LRS (Logical Record Structure) Adalah representasi dari struktur record-record pada tebel-

tabel yang terbentuk dari hasil antar himpunan entitas. Menentukan kardinalitas, jumlah table

dan Foreign Key (FK) sebagai berikut :

1. One-to-one

Satu entitas berhubungan dengan paling banyak satu entitas lain.

2. One-to-many

Satu entitas dapat berhubungan dengan lebih dari satu entitas lain.

3. Many-to-many

Beberapa entitas dapat berhubungan dengan beberapa entitas lain.

PERANCANGAN WEB 34
 Gambar IV.12

LRS (Logical Record Sturcture)

PERANCANGAN WEB 35
4.2.3. Class Diagram

Gambar IV.13

Class Diagram

PERANCANGAN WEB 36
4.2.4. Sequence Diagram

1. Sequence Diagram Login.

Gambar IV.14

Sequence Diagram Login

Admin dan Customer harus selalu melakukan login untuk mengakses menu yang

ngin ditampilkan.

2. Sequence Diagram Insert, Delete, View Data Transaksi

Customer dan Admin masuk ke halaman login untuk mengisi username dan

password, jika username dan password benar maka kasir akan masuk ke form menu lalu

form menu akan menampilkan form transaksi, Customer dan Admin selanjutnya dapat

memasukkan data transaksi, menghaspus data transkasi dan melihat data transaksi

PERANCANGAN WEB 37
 Gambar IV.15

Sequence Diagram Insert, Delete, View Data Transaksi

3. Sequence Diagram Insert, Delete, Update Produk

Admin masuk kedalam halaman login dengan mengisi username dan password. jika

username dan password benar maka admin akan masuk kehalaman data produk. admin

selanjutnya dapat memasukkan data produk, menghapus data produk, mengupdate data

produk dan melihat data produk.

a. Insert produk

Sequence insert produk terjadi jika admin menginputkan username dan password,

sehingga di proses di database. Kemudian admin melakukan insert produk dan di proses di

database kemudian ditampilkan di pada Menu Utama pada GUI.

PERANCANGAN WEB 38
 Gambar IV.16

Insert Produk

b. Delete Produk

Sama halnya dengan Insert Produk sequence delete produk terjadi jika admin

menginputkan username dan password, sehingga di proses di database. Kemudian admin

melakukan delete produk dan di proses di database kemudian ditampilkan di pada Menu

Utama pada GUI.

PERANCANGAN WEB 39
 Gambar IV.17

Delete Produk

a. Update Produk

Sequence insert produk terjadi jika admin menginputkan username dan password,

sehingga di proses di database. Kemudian admin melakukan update produk dan di

proses di database kemudian ditampilkan di pada Menu Utama pada GUI.

PERANCANGAN WEB 40
 Gambar IV.18

Update Produk

4.2.5. Spesifikasi Hardware dan Software

1. Spesifikasi Hardware

Perangkat keras yang dimaksud disini adalah seperangkat alat atau elemen

elektronik yang dapat membantu sistem yang diusulkan sehingga program yang

diusulkan oleh penulis dapat bekerja dengan baik. Perangkat keras yang dibutuhkan

dibagi atas dua bagian, yaitu perangkat keras untuk web server dan perangkat keras

client.

Adapun perangkat keras standar yang diperlukan oleh server adalah sebagai berikut:

1. Processor : Pentium Dual Core 2.0 Ghz

2. Memory Size (RAM) : 1 GB (DDRAM)

PERANCANGAN WEB 41
 3. Monitor : SVGA Color 15”

4. Harddisk : 80 GB

5. CD – ROM : 52x

6. Keyboard :107 Keys

7. Mouse : Standard Mouse

8. Printer : Deskjet

Adapun perangkat keras standar yang diperlukan oleh client adalah sebagai berikut :

1. Processor : Pentium IV 2.8 Ghz

2. Memory Size (RAM) : 512 MB (DDRAM)

3. Monitor : SVGA Color 15”

4. Harddisk : 20 GB

5. Keyboard :107 Keys

6. Mouse : Standard Mouse

7. Printer : Deskjet

2. Spesifikasi Software

Perangkat lunak adalah suatu rangkaian atau susunan instruksi yang harus benar

dengan urutan-urutan yang benar pula. Keberadaan perangkat lunak selalu menyertai

perangkat keras yang ada. Perangkat lunak yang dibutuhkan dibagi atas dua bagian,

yaitu perangkat lunak untuk web server dan perangkat lunak untuk client.

Adapun perangkat lunak standar yang diperlukan untuk web server adalah sebagai

berikut:

PERANCANGAN WEB 42
1. Sistem Operasi : Windows Server 2003 x86

2. Bahasa Pemrograman : PHP

3. Interpreter : PHP5 Engine Versi 5.0

4. Database Server : MySQL Server Versi 5.0

5. Web Server : Apache Versi 1.6

6. Database Tools : PhpMyAdmin Versi 2.6.2-pl4

Adapun perangkat lunak standar yang diperlukan untuk client sebagai berikut :

1. Sistem Operasi : Windows XP Profesional SP2

2. Browser : Mozila Firefox veersi 12.0

3. Office Application : Microsoft Office 2003

PERANCANGAN WEB 43
 BAB V

PENUTUP

5.1 Kesimpulan

Dari pembahasan makalah yang telah kami susun, penulis mencoba menyimpulkan pokok

bahasan yang ada, adapun kesimpulannya adalah sebagai berikut:

1. Web e-commerce Trins Store ini dirancang untuk 2 user, yakni customer dan admin.

2. Pada halaman admin, admin dapat mengolah data member, daftar produk, produk yang

sudah dipesan, dsb.

3. Pada halaman untuk produk, customer dapat mencari, melihat dan membeli produk

yang tersedia.

4. Web e-commerce Trins Store dibuat dengan menggunakan CMS Prestashop.

5. Setelah dilakukan pengujian dan testing program, sistem yang terdapat didalam web e-

commerce Trins Store dapat berjalan dengan baik tanpa terjadi error.

6. Dengan menggunakan sarana sistem informasi online, bisnis dapat berjalan dengan

mudah dan perkembangan bisnisdapat berkembang lebih cepat.

7. Dengan web e-commerce Trins Store ini, customer dapat dengan mudah melakukan

pemesanan produk secara online.

PERANCANGAN WEB 44
5.2 Saran

Dari pembahasan diatas, penulis mencoba memberikan beberapa saran sebagai alternatif

pemikiran dengan harapan agar lenih dapat meningkatkan kualitas dalam penggunaan program

ini. Adapun saran-saran tersebut adalah:

1. Selalu update software dan server terbaru, tentang informasi security terbaru, celah

keamanan website, serta ancaman virus atau spyware yang ada di internet.

2. Validasi setiap input dari user yang langsung berhubungan dengan database.

3. Adanya backup data untuk mencegah terjadinya kehilangan data baik akibat kelalaian

manusia, mesin, atau bencana alam.

PERANCANGAN WEB 45
 DAFTAR PUSTAKA

Jogiyanto,HM. 2005.Analisa dan Disain Sistem Informasi Terstruktur.Yogyakarta: Penerbit

Andi.

Winarno. Wahyu Wing.2006.Sistem Informasi Manajemen.Edisi ke-6. Yogyakarta:UPP

STIM YKPN

Roney, Marshall B.2006. Sistem Informasi Management. Edisi Ke-9 Buku 1.Jakarta:
Salemba Empat

Widodo, Prabowo.P, DKK, 2011, Pemodelan Sisyem Berorientasi Obyek Dengan UML,
Graha Ilmu, Yogyakarta.

Henderi. 2008. Unified Modeling Language(UML): Konsep Dan Implementasinya Pada

Pemodelan Sistem Berorientasi Objek Dan Visual (Buku I). STMIK Raharja. Tangerang.

Nugroho, Adi. 2010, Rekayasa Perangkat Lunak Menggunakan UML Dan Java, Andi
Publisher, Jakarta.

PERANCANGAN WEB 46