Perancangan Website E-Commerce Fashion Second Branded Chapter III V

BAB 3
PERANCANGAN SISTEM

3.1. Perancangan Sistem
Perancangan sistem merupakan upaya perusahaan untuk memulai memiliki
sistem baik yang lama maupun yang baru. Perancangan sistem dilakukan setelah
mendapat gambaran dengan jelas apa yang harus dilakukan. Desain sistem secara
umum mengidentifikasikan komponen-komponen sistem e-Commerce yang akan
didesain secara terperinci.
Tujuan perancangan sistem:
a.

Untuk memenuhi kebutuhan pemakaian sistem (user).

b.

Untuk memberikan gambaran yang jelas dan menghasilkan rancangan
bangunan yang lengkap kepada pemrograman komputer dan ahli-ahli teknik
lainnya yang terlibat dalam pengembangan atau pembuatan sistem.

3.2. Perancangan Database

Database merupakan kumpulan dari data yang saling berhubungan satu dengan
lainnya, tersimpan di simpanan luar computer. Database merupakan salah satu
komponen yang penting dalam sistem informasi yang berbasis e-Commerce,
karena berfungsi sebagai basis penyedia informasi bagi para pemakainya. Karena
database merupakan kumpulan dari beberapa file, dalam hal ini file-file tersebut
dikelompokkan secara terstruktur dalam beberapa tabel sesuai dengan informasi

Universitas Sumatera Utara

21

yang terkandung didalamnya. Berikut ini adalah langkah-langkah perancangan
database yang penulis gunakan untuk membangun sistem e-Commerce ini :

3.2.1. Field Name
Tabel 3.1. Tabel Dalam Database
No

Table Name

1

admin

2

filter

3

katalog

4

keranjang

5

konfirmasi

6

order

7

pelanggan

8

produk

9

tb_bobot

10

tb_user

11

user

Universitas Sumatera Utara

22

3.2.2. Field Table
Tabel 3.2. Field Tabel Dalam Database
No
1

Table Name
Admin

Field Name
- id_admin
- username
- password

- nama

2

Filter

- email
- id
- kodebrng
- value

3

Katalog

- token
- id_katalog
- kode_brg
- nama_brg
- size

- warna
- kategori
- motif
- harga
- image

4

Keranjang

- id_keranjang
- kode_brg
- nama_brg
- size
- warna
- quantity
- total_harga

Universitas Sumatera Utara

23

5

Konfirmasi

- id
- no_orderr
- nama_rek
- bank

6

Order

- total
- no_order
- token
- id_pelanggan
- kode_brg

- quantity
- total_harga
- status
- date

7

Pelanggan

- id_pelanggan
- username
- password
- nama
- alamat
- email
- no_hp

8

Produk

- kode_brg
- nama_brg
- warna
- motif
- bahan
- kategori
- harga
- images

Universitas Sumatera Utara

24

9

tb_bobot

- kodebrng
- harga

- warna
- motif

10

tb_order

- bahan
- kode_brg
- id_user

11

User

- id
- id_pelanggan
- nama
- kota
- alamat

- no_hp
- email
- username
- password

3.3. Flowchart
Flowchart ini menjelaskan tentang bagaimana alur dan bentuk dari halaman
utama Perancangan Website E-Commerce Fashion Second Branded. Flowchart
berisi menu-menu dan sub menu yang bisa digunakan pengunjung untuk melihat
produk-produk Website E-Commerce Fashion Second Branded. Flowchart menu
utama adalah sebagai berikut :

Universitas Sumatera Utara

25

Gambar 3.1. Flowchart

Flowchart diatas menjelaskan tentang login pelanggan yang sudah mempunyai
akun member di Website E-Commerce Fashion Second Branded. Untuk masuk
menjadi member harus login terlebih dahulu dengan cara input kombinasi
username dan password . Jika username dan password benar maka user akan login
sebagai member. Jika kombinasinya salah maka user akan diberitahu bahwa
username dan password salah. User terlebih dahulu harus registrasi di halaman
register untuk dapat login sebagai member.

Universitas Sumatera Utara

26

3.3.1. Simbol-Simbol DFD dan Flowchart
Tabel 3.3. Simbol-Simbol DFD dan Flowchart
No
1.

Gambar

Nama

Fungsi

Kesatuan Luar

Merupakan

(External Entity)

kesatuan luar di
lingkungan luar
Sistem yang akan
memberikan input
atau menerima
output dari sistem.

2.

Proses (Process)

Kegiatan dari hasil
suatu arus data
yang masuk dalam
proses untuk
dihasilkan arus data
yang akan keluar
atau untuk
mengubah input
menjadi output

3.

Aliran Data

Data mengalir

(Data Flow)

melalui sistem,
dimulai dengan
sebagian input dan
diubah atau
diproses menjadi
input

Universitas Sumatera Utara

27

4.

Penyimpanan Data

Data disimpan

( Data Storage)

untuk keperluan
berikutnya.

5.

6.

Awal Proses

Awal untuk

Program (Start)

memulai suatu
program.

Perintah Dasar

Petunjuk untuk
setiap aplikasi
program.

7.

Proses Data

Proses data dari
aplikasi yang
tersedia.

8.

Aplikasi Program

Aplikasi-aplikasi
yang terdapat pada
website tersebut.

9.

Database

Tempat
penyimpanan
semua data.

Universitas Sumatera Utara

28

3.4. Algoritma Program
Bahasa pemrograman semakin banyak dipelajari oleh banyak orang. Hal ini terkait
dengan kemajuan zaman yang menjadikan teknologi sebagai hal penting untuk
menunjang kemajuan. Bagi pembaca yang ingin mempelajari bahasa pemrograman,
hal dasar yang harus dipahami adalah algoritma pemrograman tersebut. Untuk
mengerti apa itu algoritma pemrograman, silahkan simak pembahasan di bawah ini.
Dalam matematika dan ilmu komputer, algoritma adalah urutan atau langkahlangkah untuk penghitungan atau untuk menyelesaikan suatu masalah yang ditulis
secara berurutan. Sehingga, algoritma pemrograman adalah urutan atau langkahlangkah untuk menyelesaikan masalah pemrograman komputer.
Dalam pemrograman, hal yang penting untuk dipahami adalah logika kita
dalam berpikir bagaimana cara untuk memecahkan masalah pemrograman yang
akan dibuat. Sebagai contoh, banyak permasalahan matematika yang mudah jika
diselesaikan secara tertulis, tetapi cukup sulit jika kita terjemahkan ke dalam
pemrograman. Dalam hal ini, algoritma dan logika pemrograman akan sangat
penting dalam pemecahan masalah. Adapun algoritma yang dibuat penulis dalam
pembuatan Perancangan Website E-Commerce Fashion Second Branded adalah
sebagai berikut:

3.4.1. Algoritma Home
Berfungsi menampilkan halaman utama (Homepage) website Perancangan
Website E-Commerce Fashion Second Branded.
Langkah 1

: Aktifkan server yang digunakan, Apache, Xampp, Wampp
dll. Kemudian aktifkan browser Internet Explorer atau Mozilla

Universitas Sumatera Utara

29

Firefox, ketikkan pada address bar “localhost/chadstore” kemudian
tekan enter atau klik icon “Go” pada sudut kanan address bar.
Langkah 2

: Setelah itu pilih index.php untuk memunculkan halaman utama atau
halaman index.

Langkah 3

: Setelah halaman index muncul, maka terdapat berbagai menu yang
telah disediakan diantaranya,
1. Shop
2. Contact
3. About Us
4. Confirmation Payment

Langkah 4

: Jika ingin keluar dari web browser pilih icon close yang ada di
pojok kanan layar anda.

3.4.2. Algoritma Pemesanan Produk
Berfungsi menampilkan halaman produk yang dijual pada website Perancangan
Website E-Commerce Fashion Second Branded.
Langkah 1

: Klik menu Shop pada halaman utama website, setelah masuk ke
halaman Shop

pengunjung

dapat

memilih

kategori

yang

diinginkan dengan beragam jenis produk dalam setiap kategori. Klik
kategori yang diinginkan, maka produk yang sesuai dengan
kategori yang dipilih akan muncul. Kemudian klik jenis produk
dari kategori kemudian klik nama produk. Akan muncul keterangan
tentang produk yang akan di beli. Pilih add to cart untuk
memasukkan barang ke keranjang belanja.

Universitas Sumatera Utara

30

Langkah 2

: Pembeli masih dapat membatalkan atau menambah produk yang
ingin di beli. Setelah benar-benar produk ingin di beli, pembeli
harus

mengklik

proses

checkout.

Kemudian

sistem

akan

mengarahkan ke dalam halaman login member atau halaman
register.
Langkah 3

: Data diri pembeli dan produk yang dibeli akan masuk ke dalam
database admin untuk di proses, kemudian pembeli akan menerima
konfirmasi detail orderan melalui e-mail/sms.

Langkah 4

: Jika sudah mendapatkan konfirmasi nomor orderan, selanjutnya
pembeli harus melakukan transfer (1x24 jam) ke nomor rekening
yang sudah tertera pada website.

Langkah 5

: Setelah melakukan transfer, pembeli harus login ke website dan
mengisi data form confirmation payment yang ada di menu halaman
utama.

Langkah 6

: Admin akan mengecek apakah konfirmasi sudah sesuai dengan
orderan, jika sudah maka akan dilanjutkan ke proses pengiriman
produk ke alamat pembeli yang diberikan pada saat daftar sebagai
member.

3.4.3. Algoritma Member
Berfungsi menampilkan halaman login bagi member dan register bagi yang ingin
menjadi member pada website Perancangan Website E-Commerce Fashion Second
Branded.

Universitas Sumatera Utara

31

Langkah 1

: Klik Login pada menu home atau Index maka akan muncul
menu login, kemudian masukkan

username dan password.

Sekarang pembeli masuk sebagai member.
Langkah 2

: Bagi yang belum menjadi member, pembeli bisa melakukan
register dengan mengklik menu sign up pada halaman utama.

Langkah 3

: Kemudian pembeli diminta untuk menginput data-data pada form
register, jika sudah klik Daftar. Pembeli akan otomatis login sebagai
member.

Langkah 4

: Klik menu Log Out jika ingin keluar sebagai member.

3.4.4. Algoritma Search
Berfungsi untuk mempermudah pembeli dalam memilih barang yang akan dibeli
pada website Perancangan Website E-Commerce Fashion Second Branded.
Langkah 1

: Pada halaman Index terdapat kotak Search yang berfungsi untuk
membantu pengunjung dan pembeli mencari data produk yang
diinginkan tanpa melihat dari kategori.

Langkah 2

: Masukkan nama produk yang ingin di cari misalnya “macbeth
shirt”. Maka akan tampil produk dengan nama yang dicari.

3.4.5. Algoritma Admin
Berfungsi untuk login sebagai administrator pada website Perancangan Website ECommerce Fashion Second Branded.

Universitas Sumatera Utara

32

Langkah 1

: Aktifkan server yang digunakan, Apache, Xampp, Wampp
dll. Kemudian aktifkan browser Internet Explorer atau Mozilla
Firefox, ketikkan pada address bar “localhost/chadstore/admin”
kemudian tekan enter atau klik icon “Go” pada sudut kanan
address bar.

Langkah 2

: Isi username dan password sebagai admin pada form login admin.

Langkah 3

: Jika username dan password benar, user akan dialihkan ke halaman
khusus admin.

3.4.6. Algoritma Tambah Produk
Berfungsi untuk administrator dalam menambahkan produk-produk yang akan
dijual pada website Perancangan Website E-Commerce Fashion Second Branded.
Langkah 1

: Setelah login sebagai admin, akan ada menu-menu pada halaman
admin. Pilih menu product kemudian klik tambah produk.

Langkah 2

: Pada halaman tambah product, admin akan diminta untuk mengisi
data-data produk dan mengupload gambar produk.

Langkah 3

: Setelah data-data terisi klik save.

Universitas Sumatera Utara

BAB 4
IMPLEMENTASI SISTEM

4.1. Pengertian Implementasi Sistem
Implementasi sistem adalah prosedur yang dilakukan untuk menyelesaikan desain
yang ada dalam dokumen desain sistem yang disetujui dan menguji, menginstal,
memulai, serta menggunakan sistem yang baru atau sistem yang diperbaiki.
Penggunaan suatu komputer untuk pemecahan masalah membutuhkan suatu
sistem yang baik, sehingga memungkinkan berhasilnya komputer dalam
melaksanakan tugasnya, yaitu mengolah data menjadi informasi. Langkah
implementasi yang dilakukan dalam menyelesaikan Perancangan Website ECommerce Fashion Second Branded sebagai berikut:
1.

Mendapatkan software dan hardware yang tepat serta sesuai untuk merancang
website.

2.

Menyelesaikan rancangan sistem.

3.

Menulis, menguji, mengontrol dan mendokumentasikan website.

4.

Mendapatkan persetujuan.

4.2. Tujuan Implementasi Sistem
Adapun tujuan-tujuan dari implementasi sistem, yaitu:
1.

Mengkaji rangkaian sistem baik dari segi software maupun hardware sebagai
sarana pengolah data penyaji informasi.

2.

Menyelesaikan rancangan sistem.

Universitas Sumatera Utara

34

3.

Memastikan bahwa pengunjung dapat mengoperasikan dengan mudah
terhadap sistem yang baru dan mendapat informasi yang baik dan jelas.

4.

Memperhitungkan bahwa sistem telah memenuhi permintaan pemakai yaitu
dengan menguji sistem secara menyeluruh.

5.

Memastikan bahwa sistem yang telah berjalan dengan lancar dengan
mengontrol dan melakukan instalasi secara benar.

4.3. Komponen-Komponen Kebutuhan Sistem
Komponen-komponen yang sangat berperan dalam menunjang penerapan sistem
yang dirancang pengolahan data. Beberapa komponen yang dibutuhkan sistem
untuk dapat beroperasi dengan baik antara lain:

4.3.1. Hardware
Hardware merupakan komponen yang sangat dibutuhkan dalam mewujudkan
sistem yang diusulkan. Dalam hal ini penulis dapat merincikan spesifikasi
komponen hardware yaitu:
1.

Harddisk minimal 500GB

2.

RAM minimal 512MB

3.

Monitor

4.

Keyboard

Universitas Sumatera Utara

35

4.3.2. Software
Hardware tidak dapat memecahkan suatu masalah tanpa adanya komponen
software. Adapun software yang digunakan dalam Perancangan Website ECommerce Fashion Second Branded ini adalah:
1.

Sistem Operasi Windows

2.

Sublime Text 2

3.

XAMPP

4.

Browser

4.3.3. Brainware
Brainware adalah sumber daya manusia yang akan berperan sebagai user ataupun
administrator. Administrator harus mengerti tentang bahasa pemrograman PHP
dan MySQL serta mengerti akan jalannya sistem. Sedangkan user tidak harus
memiliki kemampuan khusus hanya mengerti mengoperasikan internet system.

4.4. Uji Program
Dari hasil uji program yang telah dilakukan, maka dapat dilihat tampilan hasil
desain dan tampilan website dinamis dari Perancangan Website E-Commerce
Fashion Second Branded, sebagai berikut:

Universitas Sumatera Utara

36

Halaman utama/index

Gambar 4.1. Halaman utama/index

Halaman shop

Gambar 4.2. Halaman shop

Universitas Sumatera Utara

37

Halaman confirmation payment

Gambar 4.3. Halaman confirmation payment

Halaman login member

Gambar 4.4. Halaman login member

Universitas Sumatera Utara

38

Halaman registrasi member

Gambar 4.5. Halaman registrasi member

Halaman login admin

Gambar 4.6. Halaman login admin

Universitas Sumatera Utara

39

Halaman utama admin

Gambar 4.7. Halaman utama admin

Halaman tambah produk

Gambar 4.8. Halaman tambah produk

Universitas Sumatera Utara

40

Halaman order admin

Gambar 4.9. Halaman order admin

Halaman konfirmasi admin

Gambar 4.10. Halaman konfirmasi admin

Universitas Sumatera Utara

BAB 5
KESIMPULAN

5.1. Kesimpulan
Webstie e-Commerce fashion second branded ini dirancang dan direalisasikan
dengan menggunakan sistem operasi Windows, XAMPP sebagai server, MySQL
sebagai database manajemen sistem, PHP sebagai bahasa scripting yang menyatu
dengan HTML (sintaks dan perintah yang diberikan sepenuhnya dijalankan di web
server), dan Sublime Text 2 sebagai web editornya. Dari realisasi tersebut dapat
diambil kesimpulan yaitu:
1.

Penggunaan sistem layanan e-Commerce ini akan memberikan kemudahan
dalam pembelian suatu barang dengan user interface yang sederhana, dimana
konsumen tidak perlu datang ke toko tersebut secara langsung. Karena
pemesanan barang dapat dilakukan melalui teknologi internet.

2.

Perancangan e-Commerce harus dilakukan sebaik mungkin untuk menarik
perhatian konsumen, dan menumbuhkan rasa percaya konsumen terhadap
sistem e-Commerce yang dimiliki oleh suatu toko.

5.2. Saran
1.

Penulis menyadari bahwa apa yang telah dibuat penulis masih banyak
kekurangannya. Oleh karena itu masih diperlukan lagi pengembangan lebih
lanjut untuk perbaikan kedepan.

Universitas Sumatera Utara

42

2.

Poses pembelajaran akan berkembang jika tidak fanatik terhadap satu sistem
saja. Karena itu sebagai alat bantu pemecahan masalah.

3.

Aplikasi yang digunakan masih sederhana dan masih membutuhkan
pengembangan dan pembelajaran yang lebih baik.

Universitas Sumatera Utara