TUGAS AKHIR - Bina Sarana Informatika · Ibu, Ayah, Kakak, dan keluarga tercinta yang telah...

PERANCANGAN SISTEM INFORMASI

PENJUALAN POMADE ONLINE

BERBASIS WEB

TUGAS AKHIR

Diajukan untuk memenuhi salah satu syarat kelulusan Program Diploma Tiga (D.III)

YOGI SUPRIHADI

NIM : 12141475

Program Studi Manajemen Informatika

AMIK BSI Jakarta

Jakarta

2017

vi

KATA PENGANTAR

Puji syukur Penulis panjatkan kehadirat Allah SWT yang telah

melimpahkan rahmat dan karunia-Nya, sehingga Penulis dapat menyelesaikan

pembuatan Tugas Akhir ini dengan baik. Tugas Akhir ini Penulis sajikan dalam

bentuk yang sederhana. Adapun judul penulisan tugas akhir yang Penulis ambil

adalah sebagai berikut: “Perancangan Sistem Informasi Penjualan Pomade

Online Berbasis Web”

Tujuan penulisan laporan tugas akhir ini adalah sebagai salah satu syarat

kelulusan pada program Diploma Tiga (D. III) AMIK BSI. Sebagai bahan

penulisan diambil berdasarkan hasil penelitian, observasi dan beberapa sumber

literatur yang mendukung penulisan ini. Penulis menyadari bahwa tanpa

bimbingan dan dorongan dari semua pihak, maka penulisan tugas akhir ini tidak

akan berjalan lancar.

Oleh karena itu pada kesempatan ini, izinkanlah Penulis menyampaikan

ucapan terima kasih kepada:

1. Direktur Akademi Manajemen Informatika & Komputer Bina Sarana

Informatika.

2. Ketua Jurusan Manajemen Informatika AMIK BSI.

3. Bapak Frieyadie, M.Kom selaku Dosen Pembimbing Tugas Akhir

4. Ibu Desmulyati, S.T,M.Kom selaku Asisten Pembimbing Tugas Akhir

5. Staff/karyawan/dosen dilingkungan Akademi BSI.

6. Ibu, Ayah, Kakak, dan keluarga tercinta yang telah memberikan dukungan

moral maupun spiritual.

7. Rekan Murdiansyah Pradana, selaku Konsultan Web Programming.

8. Rekan – Rekan Mahasiswa BSI kelas 12.6H.07

9. Rekan – Rekan Mahasiswa BSI kelas 12.6G.07

Serta semua pihak yang tidak bisa disebut satu persatu sehingga

terwujudnya penulisan tugas akhir ini. Penulis menyadari bahwa penulisan Tugas

Akhir ini masih jauh dari sempurna. Oleh karena itu Penulis mengharapkan saran

vii

dan kritik yang bersifat membangun demi kesempurnaan laporan ini di masa yang

akan datang.

Akhir kata semoga Tugas Akhir ini dapat berguna bagi Penulis khususnya

dan bagi para pembaca pada umumnya.

Jakarta, 21 Juli 2017

Penulis,

Yogi Suprihadi

vii

ABSTRAKSI

Yogi Suprihadi (12141475) Perancangan Sistem Informasi Penjualan

Pomade Online Berbasis Web.

Seiring dengan berkembangnya penjualan pomade, maka tidak sedikit

masalah yang timbul dalam pengelolan sistem penjualannya tersebut. Penulis

melihat berbagai macam masalah yang terjadi, dimulai dari pendataan stok

barang, transaksi penjualan, sampai dengan laporan penjualan yang masih

menggunakan pembukuan. Metode yang digunakan pada pengembangan

perangkat lunak ini menggunakan model water fall. Dengan adanya website e-

commerce ini diharapkan dapat mempermudah baik bagi pengelola maupun

pelanggan dalam melakukan penjualan dan pembelian produk. Kesimpulan yang

dapat diambil adalah internet merupakan sebuah media yang dapat membantu dan

mendukung dalam pengembangan bisnis secara online. Pada tugas akhir ini

membahas tentang sistem penjualan berbasis web yaitu bagaimana cara registrasi

untuk menjadi member sampai dengan cara pembayaran produk atau pembelian

produk.

Kata Kunci : Website E-commerce, Pomade Online.

viii

ABSTRACT

Yogi Suprihadi (12141475) , Design of Online Pomade Based Web Sales

Information System.

Along with the development of pomade sales, then not a few problems that

arise in pengelolan sales system. The author sees various problems that occur,

starting from data collection of goods, sales transactions, up to the sales report

that still use bookkeeping. The method used in this software development using

water fall model. With the e-commerce website is expected to facilitate both for

managers and customers in making sales and purchases of products. The

conclusion that can be taken is the internet is a medium that can help and support

in the development of business online. In this final task discusses about web-based

sales system is how to register to become a member up to the way payment of

products or purchases of products.

Keywords: E-commerce Website, Online Pomade.

ix

DAFTAR ISI

Halaman

Lembar Judul Tugas Akhir.................................................................................. i

Lembar Pernyataan Keaslian Tugas Akhir ......................................................... ii

Lembar Pernyataan Persetujuan Publikasi Karya Ilmiah .................................... iii

Lembar Persetujuan dan Pengesahan Tugas Akhir ............................................. iv

Lembar Konsultasi Tugas Akhir ......................................................................... v

Kata Pengantar ................................................................................................... vi

Abstraksi ............................................................................................................ vii

Daftar Isi ............................................................................................................. ix

Daftar Simbol ..................................................................................................... x

Daftar Gambar .................................................................................................... xi

Daftar Tabel. ....................................................................................................... xii

BAB I PENDAHULUAN ............................................................................ 1

1.1. Latar Belakang Masalah ........................................................... 1

1.2. Maksud dan Tujuan ................................................................. 4

1.3. Metode Pengumpulan Data ....................................................... 4

1.4. Ruang Lingkup ......................................................................... 5

1.5. Sistematika Penulisan............................................................. .. 5

BAB II LANDASAN TEORI......................................................................... 7

2.1. Konsep Dasar Web ................................................................... 7

2.2. Teori Pendukung......... .............................................................. 16

BAB III PEMBAHASAN.............................................................................. 23

3.1. Analisa Kebutuhan ................................................................... 23

3.2. Perancangan Perangakat Lunak ............................................... 25

3.2.1. Rancangan Antar Muka ............................................... 25

3.2.2. Rancangan Basis Data .................................................. 44

3.2.3. Rancangan Struktur Navigasi ....................................... 46

3.3. Implementasi dan Pengujian Unit ........................................... 49

3.3.1. Implementasi ................................................................ 49

3.3.2. Pengujian Unit ............................................................. 67

BAB IV PENUTUP ........................................................................................ 72

4.1. ..........................................................................................

Kesimpulan ................................................................................. 72

4.2. ..........................................................................................

Saran ............................................................................................ 73

DAFTAR PUSTAKA ........................................................................................ 74

DAFTAR RIWAYAT HIDUP ......................................................................... 76

x

DAFTAR SIMBOL

A. Simbol Entity Relationship Diagram

EXTERNAL ENTITY

Digunakan untuk menggambarkan suatu sumber

atau tujuan pada arus data.

DATA FLOW

Digunakan untuk menggambarkan suatu arus data.

PROCESS

Digunakan untuk menggambarkan suatu proses

yang sedang berlangsung

.

DATA STORE

Digunakan untuk menggambarkan suatu tempat

untuk menyimpan atau mengambil data yang

diperlukan.

xi

DAFTAR GAMBAR

Halaman

1. Gambar II.1 Model Waterfall .......................................................................... 16

2. Gambar II.2 Struktur Navigasi Linier ............................................................. 17

3. Gambar II.3 Struktur Navigasi Hierarchical model ........................................ 17

4. Gambar II.4 Struktur Navigasi full web model ............................................... 18

5. Gambar III.1 Rancangan Antar Muka Halaman Beranda ............................... 25

6. Gambar III.2 Rancangan Antar Muka Daftar Member ................................... 26

7. Gambar III.3 Rancangan Antar Muka Halaman Katalog Produk ................... 27

8. Gambar III.4 Rancangan Antar Muka Halaman Detail Produk ...................... 28

9. Gambar III.5 Rancangan Antar muka Halaman Cara Belanja ........................ 29

10. Gambar III.6 Rancangan Antar muka Halaman Login Member ..................... 30

11. Gambar III.7 RancanganAntar muka Halaman Keranjang Belanja ................ 31

12. Gambar III.8 Rancangan Antar Muka Halaman Bukti Pemesanan................. 32

13. Gambar III.9 Rancangan Antar Muka Halaman Struk Pembelian .................. 33

14. Gambar III.10 Rancangan Antar Muka Halaman Konfirmasi Pembayaran ... 34

15. Gambar III.11 Rancangan Antar Muka Halaman Profile................................ 35

16. Gambar III.12 Rancangan Antar Muka Halaman Login Admin ...................... 36

17. Gambar III.13 Rancangan Antar Muka Halaman Utama Admin .................... 37

18. Gambar III.14 Rancangan Antar Muka Halaman User Admin ....................... 38

19. Gambar III.15 Rancangan Antar Muka Halaman Katalog Admin .................. 39

20. Gambar III.16 Rancangan Antar Muka Halaman Kategori Admin ................ 40

21. Gambar III.17 Rancangan Antar Muka Halaman Ongkir ............................... 41

22. Gambar III.18 Rancangan Antar Muka Halaman Order Masuk ..................... 42

23. Gambar III.19 Rancangan Antar Muka Halaman Member ............................. 43

24. Gambar III.20 Entity Relationship Diagram ................................................... 44

25. Gambar III.21 Logical Relational Structure (LRS) ......................................... 45

26. Gambar III.22 Struktur Navigasi Linier dan Hirarki Halaman Pengunjung ... 46

27. Gambar III.23 Struktur Navigasi Linier dan Hirarki Halaman Member ......... 47

28. Gambar III.24 Struktur Navigasi Linier dan Hirarki Halaman Administrator

Sistem .............................................................................................................. 48

29. Gambar III.25 Halaman Menu Utama ............................................................. 49

30. Gambar III.26 Halaman Menu Katalog ........................................................... 50

31. Gambar III.27 Halaman Menu Kategori ......................................................... 51

32. Gambar III.28 Halaman Menu Produk Detail ................................................. 52

33. Gambar III.29 Halaman Menu Cara Belanja .................................................. 53

34. Gambar III.30 Halaman Menu Login Member ............................................... 54

35. Gambar III.31 Halaman Menu Keranjang Belanja ......................................... 55

xii

36. Gambar III.32 Halaman Menu Bukti Pemesanan ........................................... 56

37. Gambar III.33 Halaman Menu Bukti Pembelian ............................................ 57

38. Gambar III.34 Halaman Menu Konfirmasi Pembayaran ................................ 58

39. Gambar III.35 Halaman Menu Profil Member ................................................ 59

40. Gambar III.36 Halaman Menu Login Admin .................................................. 60

41. Gambar III.37 Halaman Menu Menu Katalog ................................................ 61

42. Gambar III.38 Halaman Menu Ongkir ............................................................ 62

43. Gambar III.39 Halaman Menu Order Masuk .................................................. 63

44. Gambar III.40 Halaman Menu Menu Member ............................................... 64

45. Gambar III.41 Halaman Menu User Admin .................................................... 65

xv

DAFTAR TABEL

Tabel Halaman

1. Tabel III.1 Pengujian Terhadap Form Login Member ................................. 67

2. Tabel III.2 Pengujian Terhadap Form Pendaftaran Member ....................... 68

3. Tabel III.3 Pengujian Terhadap Form Konfirmasi Pembayaran .................. 69

4. Tabel III.4 Pengujian Terhadap Form Login Administrator ........................ 70

5. Tabel III.5 Spesifikasi File Order ................................................................ 64

6. Tabel III.6 Spesifikasi File Detail Order ..................................................... 65

7. Tabel III.7 Spesifikasi File Konfirmasi ........................................................ 66

1

BAB I

PENDAHULUAN

1.1. Latar Belakang Masalah

Didalam dunia bisnis penjualan dan pemasaran merupakan bagian yang

sangat penting sehingga banyak cara yang ditempuh oleh perusahaan untuk

memperbaiki sistem penjualan dan pemasaran yang mereka miliki mulai dari cara

tradisional sampai cara yang modern. Seiring dengan berkembangnya teknologi

yang sangat pesat, banyak sekali perusahaan-perusahaan yang memanfaatkan

teknologi untuk memperbaiki sistem penjualan dan pemasaran peusahaan mereka,

melihat banyak sekali hal yang menjanjikan dari pendayagunaan teknologi

khususnya teknologi informasi.

Penjualan elektronik atau yang akrab di sebut e-commerce (electronic

commerce) merupakan suatu konsep yang sangat berkembang dalam dunia

teknologi informasi. Perkembangan e-commerce ini membawa banyak perubahan

terhadap sektor aktivitas bisnis yang selama ini dijalankan di dunia nyata.

Perubahan tersebut ditandai dengan adanya sejumlah upaya dari sektor aktivitas

bisnis yang semula berbasis di dunia nyata (real), kemudian mengembangkan ke

dunia maya (virtual).

Penggunaan sistem ini sebenarnya dapat menguntungkan banyak pihak,

baik pihak konsumen, produsen maupun penjual atau (retail). e-commerce

menyediakan banyak kemudahan dan kelebihan dibandingkan dengan konsep

pemasaran konvensional. Selain bisa menjadi lebih cepat, lewat internet barang

dan jasa yang disediakan biasanya lebih komplit. Selain itu, biasanya informasi

2

tentang barang dan jasa tersedia secara lengkap, sehingga walaupun tidak

membeli secara online, konsumen bisa mendapatkan banyak informasi penting

dan akurat untuk memilih suatu produk atau jasa yang akan diinginkan.

Penjualan pomade sekarang ini memang semakin berkembang terutama di

Indonesia, ini terbukti dengan semakin banyaknya muncul barbershop dan toko

yang menjual berbagai jenis pomade. Seiring dengan perkembangan model

rambut pria ini maka persaingan untuk memperoleh pelanggan dan keuntungan

juga semakin meningkat. Banyak strategi yang dilakukan seperti pendirian cabang

usaha di berbagai daerah agar pelanggan semakin mudah mendapatkan pomade

yang dicari. Solusi seperti ini cenderung memerlukan biaya produksi yang sangat

besar, karena itu untuk menanggulanginya diperlukan sebuah media yang menjadi

fasilitas bagi pelanggan dalam memperoleh informasi yang lengkap mengenai

pomade yang diinginkan dan dapat melakukan transaksi dengan lebih mudah

tanpa terkendala oleh waktu dan jarak. Masalah ini dapat ditanggulangi dengan

pembutan website e-commerce sebagai media yang memudahkan pelanggan

dalam memperoleh informasi tentang pomade yang diinginkan, baik mengenai

harga, gambar dan jenis pomade. Perusahaan pomade juga akan dapat

memperoleh pelanggan yang semakin banyak karena dengan web e-commerce ini

pelanggan dapat melakukan pemesanan terhadap pomade walaupun tempat

penjualannya sangat jauh..

Pada saat ini, masyarakat umum sangat mengutamakan kemudahan dalam

berbelanja online, sehingga munculah toko - toko online yang kehadiranya sangat

membantu bagi masyarakat yang enggan keluar rumah demi membeli sebuah

3

barang. Perkembangan penjualan online saat ini didukung oleh perkembangan

infrastruktur transportasi dan perbankan yang baik (Syilviani, 2010:1).

Penulis memilih judul ini karena pada zaman sekarang ini sudah banyak

penjualan yang hanya menunjukkan (display) produk saja, lalu penjualan

dilakukan secara konvensional atau tradisional atau reguler. Artinya barang

dikirim setelah penjualan dilakukan secara manual (Jap dan Satyadi, 2010:152)

sehingga penulis tertarik untuk membuat dan dikembangkan website pada Toko

pomade online yang bergerak dalam penjualan minyak rambut dan juga untuk

meningkatkan penjualan pada toko itu sendiri.

Oleh karena itu dengan berkembangnya kemajuan teknologi ini, maka

penulis membuat suatu website E-Commerce Pomade Online, yang mana

sebelumnya di toko tersebut belum mempunyai sebuah website. Dengan sebuah

website ini, Pomade Online dapat mempromosikan dalam bidangnya kepada

masyarakat luas dan masyarakat pun dengan mudah mengakses dan mengetahui

segala sesuatu mengenai Pomade Online dengan cepat tanpa memerlukan waktu

yang banyak dan masyarakat pun juga dapat membeli produk - produk yang dijual

pada toko tersebut secara online lewat website ini.

Penulis berharap semoga penulisan tugas akhir ini dapat memberikan

kemudahan bagi seluruh masyarakat terutama yang mencari informasi tentang

Pomade Online melalui sebuah website ini dan penulis berharap menjadikan

website Pomade Online sebagai media promosi yang dapat di terima oleh

masyarakat.

4

1.2. Maksud dan Tujuan

Dengan semakin berkembangnya perangkat komputer baik hardware

maupun software membuat seluruh aspek kehidupan menuntut suatu manajemen

yang baik dalam meningkatkan efisiensi dan efektivitas kerja. Salah satu cara

penerapannya adalah dengan membuat website Pomade Online.

Adapun maksud dari penulisan ini adalah :

1. Untuk merancang suatu aplikasi web e-commerce yang dinamis yang

dimanfaatkan untuk menyebarkan informasi yang baik dengan cepat dan

mudah.

2. Mengimplementasikan aplikasi e-commerce pada toko penjualan minyak

rambut sehingga transaksi penjualan tidak hanya di toko, melainkan bisa

juga melalui website.

Tujuan dari penulisan ini adalah untuk memenuhi salah satu syarat

kelulusan Diploma III (D.III) Akademi Manajemen Informatika dan Komputer

Bina Sarana Informatika.

1.3. Metode Pengumpulan Data

Untuk menyelesaikan Tugas Akhir ini penulis melakukan beberapa

metode dalam pengumpulan data referensi diantaranya yaitu :

1. Metode pengamatan langsung (Observation)

Penulis melakukan pengamatan langsung di Pomade Online.

5

2. Metode Wawancara (Interview)

Penulis melakukan tanya jawab kepada pemilik toko dan pihak terkait,

mengenai hal-hal yang dibutuhkan dalam pembuatan website.

3. Studi Pustaka (Library Research)

Penulis mengumpulkan data-data dari buku yang berisi teori-teori sebagai

referensi yang berkaitan dengan perancangan desain web.

1.4. Ruang Lingkup

Dalam penulisan tugas akhir ini penulis hanya membatasi pokok

permasalahan yang akan dikaji adalah perancangan website pada Pomade adalah

menghasilkan website yang memberikan informasi tentang Pomade Online,

pengolahan master data seperti (data admin, data produk, dan data user). Dan

pengolahan master data transaksi seperti (data keranjang belanja, dan lain–lain).

Serta bukti pemesanan barang yang di buat menggunakan php (Hypertext

Preprocessor).

1.5. Sistematika Penulisan

Dalam pembuatan tugas akhir ini penulis membagi menjadi beberapa bab

untuk memudahkan penulis dalam menyusun serta mempermudah bagi para

pembaca untuk memahaminya yang mana tiap-tiap bab terdiri dari sub-sub bab

yang merupakan penjelasan dari bab-bab sebelumnya. Berikut pembagian bab-bab

dalam makalah ini.

6

BAB I PENDAHULUAN

Bab ini merupakan bab pendahuluan, yang didalamnya akan

membahas latar belakang permasalahan, rumusan masalah, batasan

masalah, tujuan dan manfaat penelitian serta sistematika penulisan.

BAB II LANDASAN TEORI

Bab ini menjelaskan tentang hal-hal yang berkaitan dengan konsep

dasar web dan teori pendukung.

BAB III PEMBAHASAN

Bab ini berisikan tentang analisa kebutuhan, ERD, LRS, Rancangan

Struktur Navigasi, Implementasi Aplikasi Website Penjualan dan

Cara Pengoperasian.

BAB IV PENUTUP

Bab terakhir ini merupakan bab yang berisikan kesimpulan dan saran

dari hasil penulisan dan penelitian yang telah dilakukan oleh penulis.

7

BAB II

LANDASAN TEORI

2.1. Konsep Dasar Web

Teknologi informasi saat ini sangat berpengaruh dalam bidang internet

bagai sebuah kebutuhan karena di dalamnya kita bisa mendapatkan informasi

dari seluruh dunia.Website cepat sekali popular di lingkungan pengguna

internet, Karena kemudahan yang diberikan kepada pengguna internet untuk

melakukan penelusuran, penjelajahan dan pencarian informasi.

A. Website

Menurut Suhartanto (Suhartanto M. , 2012) “Website adalah salah satu aplikasi

yang berisikan dokumen-dokumen multimedia (teks, gambar, suara, animasi,

video) didalamnya yang menggunakan protokol HTTP (hyper text transfer

protocol ) dan untuk mengaksesnya mengunakan internet”.

Dapat disimpulkan Website adalah sebuah tempat di Internet,yang

menyajikan halaman informasi dengan berbagai macam format data seperti text,

image, bahkan video dan dapat diakses menggunakan berbagai aplikasi client

sehingga memungkinkan penyajian informasi yang lebih menarik dan dinamis

dengan pengelolaan yang terorganisasi.

8

1. Internet

Menurut Sibero (2013:10) Internet (Interconnected Network) adalah

jaringan komputer yang menghubungkan antar jaringan secara global, internet

dapat juga disebut jaringan komputer area.

Internet berasal dari kata interconnection networking. Inter kependekan dari

Internasional, Connection berarti hubungan dan Netwroking adalah

jaringan.Sehingga Internet dapat juga didefinisikan sebagai jaringan yang terdiri

dari berbagai macam dan jenis komputer diseluruh dunia yang saling

berkomunikasi dengan berbasiskan suatu protocol yang dinamakan TCP/IP

(Transmission Control Protocol/Internet Protocol). Setiap pemakai yang

komputernya terhubung ke Internet dapat saling mengakses Buku Tamu yang

disediakan oleh komputer lain dalam bentuk pertukaran data lateral, melalui jalur

telekomunikasi seperti telepon, wireless.

Untuk beberapa perusahaan keuntungan yang diperoleh dari internet

ditimbulkan dari kemampuan menjaga loyalitas konsumen, mengantisipasi

kebutuhan konsumen mendatang dan memperbaiki pelayanan konsumen.

Persaingan yang semakin hebat antara instusi penyedia produk belakangan ini

bukan hanya disebabkan globalisasi. Tetapi disebabkan karena pelanggan semakin

cerdas dan didekati oleh banyak produk. Kemajuan teknologi komunikasi juga

ikut berperan akses informasi yang lebih banyak tentang berbagai macam produk

yang ditawarkan.

9

2. Web Server

Menurut Sutisna (2007:5) “Web Server adalah halaman-halaman website

yang diakses oleh user melalui browser disimpan pada web server”. Untuk itu,

diperlukan program khusus agar website yang kita buat dapat diterima dengan

baik oleh client. Ada beberapa software yang bisa digunakan baik gratis (Open

Source) maupun yang komersial, diantaranya: Netscape Server, Microsoft IIS,

Xitami, Webstar dan lain-lain. Contoh dari web server adalah Apache.

Menurut Kadir (2009:360) “Apache adalah otak dari web server anda.

Aplikasi web server ini bertugas untuk mengkordinasikan server anda dan

akan menangani semuanya”. Server HTTP Apache atau Server Web/WWW

Apache adalah server web yang dapat dijalankan di banyak sistem operasi

(Unix, BSD, Linux, Microsoft Windows dan Novell Netware serta platform

lainnya) yang berguna untuk melayani dan memfungsikan situs web.

Protokol yang digunakan untuk melayani fasilitas web atau www ini

mengunakan HTTP.

Apache memiliki fitur-fitur canggih seperti pesan kesalahan yang dapat

dikonfigur, autentikasi berbasis basis data dan lain-lain. Apache juga didukung

oleh sejumlah antarmuka pengguna berbasis grafik (GUI) yang memungkinkan

penanganan server menjadi mudah.

Apache adalah perangkat lunak web server yang paling populer, hal ini

memungkinkan komputer untuk menjadi satu Host atau lebih, situs yang dapat

diakses melalui internet menggunakan web browser. Versi pertama Apache dirilis

pada 1995 oleh Grup Apache. Pada tahun 1999 Grup Apache menjadi Apache

Software Foundation sebuah organisasi nirlaba yang saat ini mempertahankan

pengembangan perangkat lunak Web server Apache.

10

3. Web Browser

Merut Sidik dan Husni (2009:5) ”Browser web adalah software yang

digunakan untuk menampilkan informasi dari server web. Software ini kini telah

dikembangkan dengan menggunakan user interface grafis, sehingga pemakai

dapat dengan melakukan ‘point dan clik’ untuk pindah antar dokumen”.

Dapat dikatakan saat ini hanya ada beberapa web browser GUI yang

populer: Internet Exploler, Opera dan Mozilla firefox. Beberapa browser ini

bersaing untuk merebut pemakainya dengan berusaha untuk mendekati standar

spesifikasi dokumen HTML yang direkomendasikan oleh W3C (Word Wide Web

Consortium).

4. TCP dan IP

TCP (Transmision Control Protocol) yang memastikan bahwa semua

hubungan bekerja dengan benar, sedangkan IP (Internet Protocol) yang

mentransmisikan dari data suatu kompute ke komputer lain, TCP dan IP

secara umum paspor digital yang memungkinkan perpindahan file-file

dengan mudah di internet, sedikit mirip dengan perbedaan antara jalan

biasa dengan jalan tol khusus. TCP dan IP terbuka bagi semua pengguna

jalan, akhirnya dipilih sebagai standar resmi untuk internet pada tahun

1983 (Sunarto 2009:41).

5. Domain Name Server (DNS)

Menurut Ahmadi (2013:55) “Nama domain adalah nama unik yang

diberikan untuk mengidentifikasikan nama server komputer seperti web server

atau email server dijaringan komputer ataupun internet”. Nama domain berfungsi

untuk mempermudah pengguna internet pada saat melakukan akses ke server,

selain itu juga dipakai untuk mengingat nama server yang dikunjungi tanpa harus

mengenal deretan angka yang rumit yang dikenal sebagai alamat IP. Nama

domain ini juga terkenal sebagai sebuah kesatuan dari sebuah situs web.

11

Dalam membeli domain untuk website harus membuat pertimbangan

terlebih dahulu karena domain akan mewakili brand website dan atau perusahaan

yang diusung. Memang tidak ada ukuran resmi mengenai domain yang bagus dan

baik untuk membuat nama domain sesuai keinginan.

Nama domain sendir mempunyai identifikasi ekstensi atau akhiran sesuai

dengan kepentingan dan lokasi keberadaan website tersebut. Contoh nama domain

berekstensi internasional adalah com, net, org, info, biz, name,ws. Contoh nama

domain berekstensi lokal negara indonesia adalah:

a. Korporasi (.co.id): Untuk badan usaha yang mempunyai badan hukum yang

sah.

b. Pendidikan (.ac.id): Untuk lembaga pendidikan.

c. Pemerintahan (.go.id): Khusus untuk lembaga pemerintahan republik

Indonesia.

d. Militer (.mil.id): Khusus untuk lembga militer republik Indonesia

6. HTTP (Hyper Text Transfer Protocol)

Menurut Ahmadi (2013:56) “Hyper Text Transfer Protocol (HTTP) adalah

sebuah protokol untuk meminta dan menjawab antara client dan server”. Sebuah

client HTTP seperti web browser, biasanya memulai permintaan dengan membuat

hubungan TCP atau IP ke port tertentu ditempat yang jauh (biasanya port 80).

Subuah server HTTP yang mendengarkan di port tersebut menunggu client

mengirim kode permintaan (request) yang akan meminta halaman yang sudah

ditentukan, diikuti dengan pesan Multipurpose Intenet Mail Extension (MIME)

yang memiliki beberapa informasi kode kepala yang menjelaskan aspek

permintaan tersebut diikuti dengan badan dari data tertentu.

12

HTTP berkomunikasi melalui TCP atau IP. Client HTTP terhubung ke

server HTTP menggunakan TCP.Setelah membuat sambungan, client dapat

mengirim pesan permintaan HTTP ke server. HTTP digunakan untuk

mengirimkan permintaan dari client web (browser) ke web server, dikembalikan

ke konten web (halaman web) dari server ke client.

B. Bahasa Pemrograman

Bahasa Pemograman adalah instruksi standar untuk memerintah komputer

melakukan suatu tindakan tertentu yang merupakan suatu himpunan dari aturan

sintaks dan simatik yang dipakai untuk mendefinisikan program komputer.

Bahasa ini memungkinkan seorang programmer dapat menentukan mana yang

data yang akan diproses oleh komputer, bagaimana data ini akan disimpan atau

diteruskan, dan langkah-langkah apa yang persis jenis yang akan diambil dalam

berbagai situasi.

1. Hypertext Preprocessor (PHP)

Menurut Sadeli (2013:10) “PhpMyAdmin adalah Sebuah software yang

berbentuk seperti halaman situs yang terdapat pada web server”.

Fungsi dari halaman ini adalah sebagai pengendali database MySQL

sehingga pengguna MySQL tidak perlu repot untuk menggunakan perintah-

perintah SQL. Karena dengan adanya halaman ini semua hal tersebut dapat

dilakukan hanya dengan meng-klik menu fungsi yang ada pada halaman

phpMyAdmin.

13

2. Hyper Text Makrup Language (HTML)

Menurut Kustiyahningsih (2011:13) “Hyper Text Makrup Language

(HTML) adalah file text murni yang dapat dibuat dengan editor text sembarang,

dokumen ini dikenal sebagai web page”.

Hyper Text Makrup Language (HTML) suatu sistem penilisan perintah dan

formating hypertext sederhana yang ditulis kedalam dokumen teks ASCII agar

dapat menghasilkan tampilan visual yang terintegrasi. Dengan kata lain, dokumen

yang dibuat dalam aplikasi pengolahan kata dan disimpan kedalam format ASCII

sehingga menjadi homepage dengan tambahan perintah-perintah HTML.

Dokumen HTML disebut makrup language karena mengandung tanda-tanda

tertentu yang digunakan untuk menentukan tampilan suatu teks dan tingkat

kepentingan dari teks tersebut dalam suatu dokumen.

3. Adobe Dreamweaver CS5

Macromedia Dreamweaver CS5 adalah sebuah HTML editor profesional

untuk mendesain web secara visual dan mengelola situs atau halaman

web. Saat ini terdapat software dari kelompok Adobe yang belakangan

banyak digunakan untuk mendesain suatu web. Versi terbaru dari Adobe

Dreamwever CS5 memiliki beberapa kemampuan bukan hanya

sebagai software untuk desain web saja, tetapi juga menyunting kode

serta pembuatan aplikasi web. Antara lain: JSP, PHP, ASP, XML, dan

ColdFusion. (Sigit,2010:1)

Dreamweaver merupakan software utama yang digunakan oleh Web

Designer dan Web Programmer dalam mengembangkan suatu situs web. Hal ini

disebabkan oleh ruang kerja, fasilitas, dan kemampuan Dreamwever yang mampu

meningkatkan produktivitas dan efektifitas, baik dalam desain maupun

membangun suatu situs web.

14

Dalam perkembangannya, Adobe Dreamweaver telah mencapai versinya yang

terbaru atau lebih dikenal dengan Adobe Dreamweaver CS5. Fitur-fitur yang

dimiliki semakin lengkap dan handal, untuk membuat pengguna Dreamwever CS5

semakin dapat berkreasi dan berinovasi dengan bebas dalam mendesain web.

Fitur baru yang semakin handal untuk versi terbaru ini dimunculkan,

diantaranya adalah Integrated CMS Support, CSS Inspection, PHP Custom Class

Code Hinting, dan Site-Specific Code Hinting. Semua fitur baru tersebut semakin

memantapkan pengguna Adobe Dreamwever CS5 untuk semakin mengeksplorasi

dan mengeksploitasi ide kreasi pengolahan website.

C. Basis Data (Database)

Menurut Fathansyah (2007:2) mengemukakan bahwa “Basis data

terdiri atas 2 kata, yaitu Basis dan data. Basis kurang lebih dapat

diartikan sebagai markas atau gudang, tempat bersarang atau

berkumpul. Sedangan Data adalah representasi fakta dunia nyata yang

mewakili suatu objek seperti manusia (pegawai, siswa, pembeli,

pelanggan), barang, hewan, peristiwa, konsep, keadaan, dan

sebagainya yang terekam dalam bentuk angka, huruf, simbol, teks,

gambar, bunyi, atau kombinasi lainnya”.

Basis data atau Database adalah kumpulan data yang disimpan secara

sistematis didalam komputer dan dapat diolah atau dimanupulasi menggunakan

perangkat lunak (program aplikasi) untuk menghasilkan informasi.

1. SQL (Structured Query Language)

SQL adalah kumpulan perintah khusus yang digunakan untuk mengakses

data dalam database rasional, yang merupakan bahasa komputer yang mematuhi

standar ANSI (American Nasional Standard Insistute).

15

Menurut raharjo (2011:55), SQL yaitu kependekan dari Structured Query

Language, yang merupakan bahasa atau kumpulan perintah standar yang

digunakan untuk berkomunikasi dengan database”.

2. MYSQL

Menurut Anhar (2010:21) “MYSQL adalah sebuah perangkat lunak sistem

manajemen basis data SQL (database management system) atau DBMS dari

sekian banyak DBMS, seperti Oracle, MS SQL, Postagre SQL dan lain-lain”. MYSQL merupakan DBMS yang multithread, multi – user yang bersifat

gratis dibawah lisensi GNU General Public License (GPL).

3. Php MyAdmin

Menurut Sadeli (2013:10) “PhpMyAdmin adalah Sebuah software yang

berbentuk seperti halaman situs yang terdapat pada web server”.

Fungsi dari halaman ini adalah sebagai pengendali database MySQL sehingga

pengguna MySQL tidak perlu repot untuk menggunakan perintah-perintah SQL.

Karena dengan adanya halaman ini semua hal tersebut dapat dilakukan hanya

dengan meng-klik menu fungsi yang ada pada halaman phpMyAdmin.

D. Model Pengembangan Perangkat Lunak

Dalam penelitian ini menggunakan metode Waterfall yang dikemukakan oleh

Shalahuddin dan Rosa tahun 2013 (Mubarok & Hadianti, 2016) yang terdapat 4

tahapan untuk dilakukan yaitu: analisis kebutuhan perangkat lunak, desain,

pembuatan kode program, pengujian.

Dalam pembangunan aplikasi ini dilakukan tahapan sesuai dengan yang

dikemukakan oleh Shalahuddin dan Rosa mulai dari analisis kebutuhan, desain,

pembuatan kode program, dan pengujian.

16

Berikut adalah fase waterfall:

E.

F.

(Sumber: Shalahuddin dan Rosa 2013)

Gambar II.1.

Model Waterfall

2.2 Teori Pendukung

Teori pendukung atau landasan teori dalam penyusunan tugas akhir ini

sangat diperkukan karena sebagai referensi untuk menunjang atau memperdalam

pemahaman terhadap informasi-informasi yang disajikan, teori pendukung yang

berisi Struktur Navigasi, ERD dan LRS.

A. Struktur Navigasi

Menurut Sutopo (2007:245) “Struktur Navigasi adalah struktur bagaimana

halaman web dihubungkan dengan halaman lain”.

Menentukan struktur navigasi merupakan hal yang sebaiknya dilakukan

sebelum membuat website. Ada empat macam bentuk dasar struktur navigasi

yaitu:

Sistem/ Rekayasa

Informasi

Analisis

Desain

Pengkodean

Pengujian

17

1. Linear navigation model

Digunakan oleh sebagian besar website. Informasi diberikan secara

sekuensial dimulai dari satu halaman. Beberapa desainer web menggunakan satu

halaman untuk masuk atau keluar dari website.

Sumber :Sutopo (2007:6)

Gambar II.2

Struktur Navigasi Linear

2. Hierarchical model

Diadaptasi dari top-down design. Konsep navigasi ini dimulai dari satu node

yang menjadi homepage. Dari homepage dapat dibuat beberapa cabang ke

halaman-halaman utama. Apabila diperlukan, dari tiap halaman utama dapat

dikembangkan menjadi beberapa cabang lagi. Hal ini seperti struktur organisasi

dalam perusahaan.


Gambar II.3

Struktur Navigasi Hierarchical model

Homepage Halaman 2 Halaman 1 Halaman 3

Homepa

Topik B Topik C Topik A

Subtopi

k A2

Subtopi

k A1

Subtopi

k C2

Subtopi

k C3

Subtop

ik C1

18

Homepage Topik A Topik B

Topik C Topik D Topik E

Subtopik

Topik G Topik F

3. Full web model

Memberikan kemampuan hyperlink yang banyak. Full web model banyak

digunakan karena user dapat mengakses semua topik dengan subtopik dengan

cepat. Namun kelemahan dari model ini, yaitu dapat berakibat user kehilangan

cara untuk kembali ke topik sebelumnya.


Gambar II.4

Struktur Navigasi full web model

B. Entity Relationship Diagram (ERD)

Menurut Utami (2012:18) “ERD (Entity Relationship Diagram) adalah

suatu diagram untuk menggambarkan desain konseptual dari model konseptual

suatu basis data relasional”. Proses memungkinkan analis menghasilkan struktur

basis data yang baik sehingga data dapat disimpan dan diambil secara

efesien.Relationship Diagram sebagai berikut:

19

a. Entity (Entitas)

Entitas adalah suatu data yang dapat disimpan dan berguna bagi badan

atau perusahaan, dengan kata lain suatu objek yang dapat dibedakan

dengan objek lainnya. Entitas digambarkan dengan kotak persegi

panjang.

Terdapat juga Entitas Lemah (weak Entity), yaitu suatu entitas sangat

bergantung dengan entitas biasa, dengan kata lain, entitas lemah tidak

akan ada apabila tidak ada entitas biasa. Entitas lemah digambarkan

dengan kotak persegi panjang dengan garis ganda.

b. Atribut

Atribut menunjukkan karakteristik dari tiap-tiap entitas. Atribut

digambarkan dengan bentuk oval.

c. Relasi

Relasi menunjukkan hubungan yang terjadi antarentitas. Relasi

digambarkan dengan bentuk belah ketupat atau diamond.

d. Line Connector

Line Connector digambarkan dengan bentuk garis tunggal.

e. Atribut Utama

Atribut utama digambarkan dengan bentuk oval, dengan keterangan

diberi garis bawah absolut.

f. Atribut Pilihan.

Atribut digambarkan dengan bentuk oval dengan keterangan diberi garis

bawah putus-putus.

20

Menurut Frieyadie (Amin, 2017) Kardinalitas merupakan tingkat

hubungan yang terjadi antar entitas di dalam sebuah sistem. Terdapat tiga

tingkat hubungan yang terjadi, yaitu :

1. Hubungan Satu pada Satu (One to One atau 1:1)

Tingkat hubungan dinyatakan satu pada satu, jika satu kejadian pada

entitas pertama hanya mempunyai satu hubungan dengan suatu kejadian

pada entitas kedua. Demikian juga sebaliknya, satu kejadian pada entitas

kedua hanya bisa mempunyai satu hubungan dengan satu kejadian pada

entitas yang pertama.

2. Hubungan Satu pada Banyak (One to Many atau 1:M)

Tingkat hubungan satu pada banyak (1:M) adalah sama dengan banyak

pada sati (M:1), tergantung dari arah mana hubungan tersebut dilihat. Untuk

satu kejadian pada entitas yang pertama dapat mempunyai banyak hubungan

dengan kejadian pada entitas yang kedua.

3. Hubungan Banyak pada Banyak (Many to Many atau M:N)

Tingkat hubungan banyak pada banyak (M:N) terjadi jika tiap kejadian

pada sebuah entitas akan mempunyai banyak hubungan dengan kejadian

pada entitas lainnya, baik dilihat dari sisi entitas yang pertama maupun

dilihat dari sisi entitas yang kedua.

21

C. LRS (Logical Relationship Structure)

Menurut Frieyadie (Amin, 2017) mengemukakan bahwa, “LRS merupakan

hasil dari pemodelan Entity Relationship (ER) beserta atributnya sehingga bisa

terlihat hubungan-hubungan antar entitas”.

D. Pengujian Web

Menurut Simarmata (2010:316) “Pengujian adalah sebuah proses

terhadap aplikasi atau program untuk menemukan segala kesalahan dan

segala kemungkinan yang akan menimbulkan kesalahan sesuai dengan

spesifikasi perangkat lunak yang telah ditentukan sebelum aplikasi tersebut

diserahkan kepada pelanggan”.

1. Blackbox Testing

Menurut Salahuddin dan Rosa (Suparni, 2016) “metode tode black box adalah

menguji perangkat lunak dari segi spesifik fungsional tanpa menguji desain dan

kode program. Pengujian dimaksudkan untuk menguji apakah fungsi – fungsi,

masukan dan keluaran dari perangkat lunak sesuai dengan spesifikasi yang

dibutuhkan. Pengujian kotak hitam dilakukan dengan membuat kasus uji yang

bersifat mencoba semua fungsi dengan memakai perangkat lunak apakah sesuai

dengan spesifikasi yang dibutuhkan”.

Pengujian black box dilakukan dengan membuat kasus uji yang bersifat

mencoba semua fungsi dengan memakai perangkat lunak apakah sesuai dengan

spesifikasi yang dibutuhkan. Kasus uji yang dibuat untuk melakukan pengujian

black box harus dibuat dengan kasus benar dan kasus salah, misalnya untuk kasus

proses login maka kasus uji yang dibuat adalah:

22

1. Jika user memasukkan nama pemakai (username) dan kata sandi (password)

yang benar.

2. Jika user memasukkan nama pemakai (password) yang salah, misalnya nama

pemakai benar tapi kata sandi (password) yang salah, misalnya nama pemakai

benar tapi kata sandi salah, atau sebaliknya, atau keduanya salah.

23

BAB III

PEMBAHASAN

3.1. Analisis Kebutuhan

Pada sistem penjualan secara online ini, customer dapat melakukan

transaksi dengam mudah tanpa perlu datang langsung untuk memesan sepatu

tetapi bisa dilakukan dengan menggunakan media internet. Berikut ini spesifikasi

kebutuhan dari sistem e-commerce.

A. Halaman Pengunjung :

1. Pengunjung dapat melihat Home .

2. Pengunjung dapat melakukan Daftar Member dengan mengisi data dengan

benar dan lengkap.

3. Pengunjung dapat melihat Katalog Produk.

4. Pengunjung dapat melihat Detail Produk.

5. Pengunjung dapat melihat Halaman Cara Belanja.

6. Pengunjung dapat melihat Halaman Kontak Kami.

B. Halaman Member :

1. Member dapat melakukan login dan memilih produk yang akan dibeli

2. Member dapat melihat, menambahkan, mengurangi, dan menghapus produk

yang telah ditambahkan kekeranjang belanja.

3. Member dapat melihat Bukti pemesanan yang berisi detail transaksi dan ongkos

kirim yang harus dibayarkan.

4. Member dapat melakukan cetak Struk Pembelian.

24

5. Member dapat melakukan Konfirmasi Pembayaran.

6. Member dapat melihat Profile member

C. Halaman Administrator Sistem:

1. Administrator dapat melakukan Login.

2. Administrator dapat melihat Halaman Utama Admin

3. Administrator dapat mengelola data user Admin.

4. Administrator dapat mengelola menu katalog

5. Administrator dapat mengelola menu kategori.

6. Administrator dapat mengelola menu ongkos kirim

7. Administrator dapat mengelola menu content Halaman Depan

8. Administrator dapat mengelola menu Order Masuk

9. Administrator dapat mengelola menu Testimoni Admin.

10. Administrator dapat mengelola menu Halaman Member.

25

3.2. Perancangan Perangkat Lunak

3.2.1 Perancangan Antar Muka

A. Halaman Pengunjung

1. Rancangan Antar Muka Halaman Utama

HEADER LOGIN REGISTER

Tentang Kami PomadeHome Cara Belanja Kontak Kami

GAMBAR

Produk Terbaru Katalog

GambarGambar Gambar

Gambar Gambar Gambar

Gambar

Teks Teks Teks

Teks Teks Teks

FOOTER

Gambar

Gambar

Gambar

Kategori

Gambar III.1

Rancangan Antar Muka Halaman Utama

26

2. Rancangan Antar Muka Halaman Daftar Member

HEADER LOGIN REGISTER


FOOTER

Register Member

Nama Lengkap :

Username :

Email :

Password :

Telepon / HP :

Asal Kota :

Alamat Lengkap :

Daftar Batal

Gambar III.2

Rancangan Antar Muka Daftar Member

27

3. Rancangan Antar Muka Halaman Katalog Produk

HEADER Login Register


FOOTER

Teks

Detai Beli

Gambar Gambar Gambar Gambar

Detai Detai DetaiBeli Beli Beli

Gambar Gambar Gambar Gambar

Detai Detai Detai DetaiBeli Beli Beli Beli

Gambar III.3

Rancangan Antar Muka Halaman Katalog Produk

28

4. Rancangan Antar Muka Halaman Detai Produk

HEADER Login Register


FOOTER

Nama Produk

Gambar

Harga Produk

Keterangan Produk

Deskripsi

Gambar III.4

Rancangan Antar Muka Halaman Detail Produk

29

5. Rancangan Antar Muka Halaman Cara Belanja

HEADER Checkout Logout


FOOTER

Cara Order

Detail Cara Order

Gambar III.5

Rancangan Antar Muka Halaman Cara Belanja

30

B. Halaman Member

1. Rancangan Antar Muka Halaman Login member



GAMBAR

Produk Terbaru Katalog

GambarGambar Gambar

Gambar Gambar Gambar

Gambar

Teks Teks Teks

Teks Teks Teks

FOOTER

Gambar

Gambar

Gambar

Kategori

Gambar III.6.

Rancangan Antar Muka Halaman Login Member

31

2. Rancangan Antar Muka Halaman Keranjang Belanja



FOOTER

Keranjang Belanja

No Nama Barang Jumlah Berat Harga Satuan Sub Total Opsi

Teks

Lanjut Belanja Checkout

Gambar III.7.

Rancangan Antar Muka Halaman Keranjang belanja

32

3. Rancangan Antar Muka Halaman Bukti Pemesanan



FOOTER

Bukti Pemesanan

Teks ………………..

Teks ………………..

Teks ………………..

Teks Teks Teks Teks Teks Teks

Teks

Teks

Ceta Struk

Gambar III.8.

Rancangan Antar Muka Halaman Bukti Pemesanan

33

4. Rancangan Antar Muka Halaman Struk Pembelian

Kode Order :

Nama Produk Berat Jumlah Berat Total Harga Satuan Sub total

xxxx xxx xx xxx xxxx xxxx

Kota Tujuan xxxTotal

Beratxxx

Total Biaya

Pengirimanxxxx

Total Bayar xxxx

Struk Pembelian

Gambar III.9.

Rancangan Antar Muka Halaman Struk Pembelian

34

5. Rancangan Antar Muka Halaman Konfirmasi Pembayaran



FOOTER

Konfirmasi Pesanan

Nama Lengkap :

Email :

Telepon/Hp :

Kota :

Alamat Lengkap :

Selesai

Gambar III.10.

Rancangan Antar Muka Halaman Konfirmasi Pembayaran

35

6. Rancangan Antar Muka Halaman Profile



FOOTER

Profile Member

Id Member : Teks

Nama : Teks

Email : Teks

Alamat : Teks

Telepon/Hp : Teks

Detail Pemesanan

No No.pesanan Tanggal Jam Status Aksi Pembayaran

1 Teks Teks Teks Teks Teks Teks

Detail Pembayaran

No No.pesananTanggal

Pembayaran

Jumlah

Transfer

Bank

Penerima

Bank

PengirimAkun Pengirim

1 Teks Teks Teks Teks Teks Teks

Gambar III.11.

Rancangan Antar Muka Halaman Profile

36

C. Halaman Administrator Sistem

1. Rancangan Antar Muka Halaman Login Admin



FOOTER

Gambar

Username

Password

Login

Gambar III.12.

Rancangan Antar Muka Halaman Login Administrator

37

2. Rancangan Antar Muka Halaman Utama Admin

HEADER

Dash Board

TEXT

Status Web Saat Ini

TEXT

TEXT

: TEXT

: TEXT

FOOTER

Menu

Katalog

Kategori

Ongkir

Order Masuk

Member

Dashboard

User Admin

Logout

Gambar III.13.

Rancangan Antar Muka Halaman Utama Admin

38

3. Rancangan Antar Muka Halaman User Admin

HEADER

User Manager

Id Username Aksi

FOOTER

Gambar

Id Text Text

Menu

Katalog

Kategori

Ongkir

Order Masuk

Member

Dashboard

User Admin

Logout

Gambar III.14.

Rancangan Antar Muka Halaman User Admin

39

4. Rancangan Antar Muka Halaman Katalog Admin

HEADER

FOOTER

Menu

Katalog

Kategori

Ongkir

Order Masuk

Member

Dashboard

User Admin

Logout

Home Katalog

Gambar

Nama Kategori Gambar Harga Berat Stok Aksi

Text Text Text Text Text Text Text

Gambar III.15.

Rancangan Antar Muka Halaman Katalog Admin

40

5. Rancangan Antar Muka Halaman Kategori Admin

HEADER

FOOTER

Menu

Katalog

Kategori

Ongkir

Order Masuk

Member

Dashboard

User admin

Logout

Home Kategori

Gambar

ID Kategori Nama Aksi

Text Text Text

Gambar III.16.

Rancangan Antar Muka Halaman Kategori Admin

41

6. Rancangan Antar Muka Halaman Ongkir

HEADER

FOOTER

Menu

Katalog

Kategori

Ongkir

Order Masuk

Member

Dashboard

User Admin

Logout

Ongkir

Gambar

ID Kota Tujuan Harga Aksi

Text Text Text Text

Gambar III.17.

Rancangan Antar Muka Halaman Ongkir

42

7. Rancangan Antar Muka Halaman Order Masuk

HEADER

FOOTER

Menu

Katalog

Kategori

Ongkir

Order Masuk

Member

Dashboard

User Admin

Logout

Halaman

No

OrderNama Customer Tanggal Jam

Text Text Text Text

Status Aksi

Text Text

Gambar III.18.

Rancangan Antar Muka Halaman Orderan Masuk

43

8. Rancangan Antar Muka Halaman Member

HEADER

FOOTER

Menu

Katalog

Kategori

Ongkir

Order Masuk

Member

Dashboard

User Admin

Logout

Member

ID Nama Email Tlp

Text Text Text Text

Kota Aksi

Text Text

Alamat

Text

Gambar III.19.

Rancangan Antar Muka Halaman Member

44

3.2.2. Rancangan Basis Data

A. Entity Relationship Diagram (ERD)

Member Order

Konfirmasi

Melakukan

Katalog

Mempunyai

Kategori

MempunyaiOngkos Kirim

Melakukan

Mempunyai

Id_onkgir

Tujuan_kirim

Ongkos

Id_Order

Tgl_Order

Jam_Order

Id_Member

Id_Ongkir

nama Alamat

Password Id_Member

TeleponE-mail

Bank_Pengirim Id_Member

Jumlah_bayar

Bank_Penerima

Tgl_KonfirmasiId_Konfirmasi

Akun_Bank

Id_Order

Bisa Melihat

Id_Katalog Id_Kategori

Id_KatalogId_Kategori

1

1

1 M

1

1

1

1 M

M

1

1

Gambar III.20. Entity Relationship Diagram

45

B. Logical Relational Structure (LRS)

Member

id_member

nama

email

alamat

password

id_kota

Order

id_order

tangal_order

jam_order

id_member

id_ongkir

Konfirmasi

id_konfirmasi

tanggal_konfimasi

jumlah_bayar

bank_pengirim

bank_penerima

akun_bank

id_member

id_order

Isi Order

jumlah

sub_jumlah

id_order

id_katalog

Katalog

id_katalog

id_kategori

Kategori

id_kategori

nama_kategori

Ongkir

id_ongkir

tujuan_kirim

ongkos_kirim

M

M

M

M

M

1

1

1 1

1

1

1

1

1

Gambar III.21. Logical Relational Structure

46

3.2.3. Rancangan Struktur Navigasi

1. Struktur Navigasi Linier dan Hirarki Halaman Pengunjung

Home

HomeTentang

Kami

Cara

BelanjaPomade

Kontak

Kami

Daftar

Member

Detail

Produk

Gambar III.22.

Struktur Navigasi Linier dan Hiraki Pengunjung

47

2. Struktur Navigasi Linier dan Hirarki Halaman Member

Login

Home

HomeTentang

kamiKategori Pomade

Cara

Belanja

Kontak

KamiLogout

Halaman

Kategori

Produk

DetailBeli

Halaman

Pomade

Produk

Detail Beli

Halaman

Cara

Belanja

Halaman

Kontak

Kami

Gambar III.23.

Struktur Navigasi Linier dan Hirarki Halaman Member

48

3. Struktur Navigasi Linier dan Hirarki Halaman Administrator Sistem

Login

Home

Logout Katalog Kategori OngkirOrder

MasukMember User

Tambah Tampil Edit Hapus

Tambah Edit Hapus

Tambah Edit Hapus Tampil Hapus Tampil Hapus Tambah Edit Hapus

Gambar III.24.

Struktur Navigasi Linier dan Hirarki Halaman Administrator Sistem

49

3.3. Implementasi dan Pengujian Unit

3.3.1. Implementasi

A. Implementasi Rancangan Antar Muka

Implementasi rancangan antar muka pada aplikasi e-commerce berdasarkan

hasil rancangan antar muka.

1. Implementasi Rancangan Antar Muka Pengunjung

a. Halaman Utama

Gambar III.25.

Halaman Menu Utama

50

b. Halaman Katalog

Gambar III.26.

Halaman Menu Katalog

51

c. Halaman Kategori

Gambar III.27.

Halaman Menu Kategori

52

d. Halaman Produk Detail

Gambar III.28.

Halaman Menu Produk Detail

53

e. Halaman Cara Belanja

Gambar III.29.

Halaman Menu Cara Belanja

54

2. Implementasi Rancangan Antar Muka Member

a. Halaman Login Member

Gambar III.30.

Halaman Menu Login Member

55

b. Halaman Keranjang Belanja

Gambar III.31.

Halaman Menu Keranjang Belanja

56

c. Halaman Bukti Pemesanan

Gambar III.32.

Halaman Menu Bukti Pemesanan

57

d. Halaman Struk Bukti Pembelian

Gambar III.33.

Halaman Menu Struk Bukti Pembelian

58

e. Halaman Konfirmasi Pembayaran

Gambar III.34.

Halaman Menu Konfirmasi Pembayaran

59

f. Halaman Profile Member

Gambar III.35.

Halaman Menu Profile Member

60

3. Implementasi Rancangan Antar Muka Administrator

a. Halaman Login Admin

Gambar III.36.

Halaman Menu Login Admin

61

b. Halaman Katalog

Gambar III.37.

Halaman Menu Katalog

62

c. Halaman Kategori

Gambar III.38.

Halaman Menu Kategori

63

d. Halaman Ongkir

Gambar III.39.

Halaman Menu Ongkir

64

e. Halaman Menu Order Masuk

Gambar III.40.

Halaman Menu Order Masuk

65

f. Halaman Menu Member

Gambar III.41.

Halaman Menu Member

66

g. Halaman Menu User Admin

Gambar III.42.

Halaman Menu User Admin

67

3.3.2 Pengujian Unit

A. Pengujian Terhadap Form Login Member

Tabel III.1.

Pengujian Terhadap Form Login Member

No Skenario

pengujian Test Case

Hasil yang

diharapkan

Hasil

Pengujian Kesimpulan

1

Username

dan

Password

tidak di isi

kemudian

klik tombol

login

Username:

(kosong)

Password:

(kosong)

Sistem akan

menolak akses

user dan

menampilkan

“username atau

password anda

salah”

Sesuai

harapan Valid

2

Mengetikan

salah satu

form dan

salah satu

form kosong

Username:

bayu

Password:

(kosong)

Sistem akan

menolak akses

user dan

menampilkan

“username atau

password anda

salah”

Sesuai

harapan Valid

3

Mengetikan

salah satu

form dan

salah satu

form kosong

Username:

(kosong)

Password:

(123456)

Sistem akan

menolak akses

user dan

menampilkan

“username atau

password anda

salah”

Sesuai

harapan Valid

4

Mengetikan

username

dan

password

dengan data

yang benar

kemudian

klik tombol

login

Username:

yogi

Password:

(123456)

sistem

menerima

akses login,

kemudian

langsung

menampilkan

"Berhasil

Login, Selamat

berbelanja..

Redi

Sesuai

harapan Valid

68

B. Pengujian Terhadap Form Pendaftaran Member

Tabel III.2.

Pengujian Terhadap Form Pendaftaran Member

No Skenario

pengujian Test Case

Hasil yang

diharapkan

Hasil


1

Nama

lengkap,

email,

password,

telepon,

kota, alamat

lengkap

tidak diisi

kemudian

klik daftar

Nama lengkap:

(kosong)

email:

(kosong)

password:

(kosong)

telepon:

(kosong)

kota: (kosong)

alamat

lengkap:

(kosong)

Sistem akan

menolak akses

user dan

menampilkan

"Harap isi

bidang ini"

pada awal

form yang

kosong

Sesuai

harapan Valid

2

Mengisi

salah satu

form

mengosong

kan form

yang lain

kemudian

klik daftar

Nama lengkap:

bayu

email:

(kosong)

password:

(kosong)

telepon:

(kosong)

kota: (kosong)

alamat

lengkap:

(kosong)

Sistem akan

menolak akses

user dan

menampilkan

"Harap isi

bidang ini"

pada awal

form yang

kosong

Sesuai

harapan Valid

3

Mengisi

beberapa

form nama

lengkap,

email,

password,

telepon

kemudian

klik daftar

Nama lengkap:

yogi

email:

suprihadiyogi

@gmail.com

password:

123456

telepon:

082213766696

kota: (kosong)

alamat

lengkap:

(kosong)

Sistem akan

menolak akses

user dan

menampilkan

"Harap isi

bidang ini"

pada awal

form yang

kosong

Sesuai

harapan Valid

69

No Skenario

pengujian Test Case

Hasil yang

diharapkan

Hasil


4

Mengisi

semua

form

dengan

data yang

benar

kemudian

klik tombol

daftar

Nama lengkap:

yogi

email:

suprihadiyogi

@gmail.com

password:

123456

telepon:

082213766696

kota:

jakarta

alamat

lengkap:

kemayoran

Sistem akan

menerima

akses user dan

menampilkan

"anda telah

menjadi

member,

silahkan

Login untuk

berbelanja"

Sesuai

harapan Valid

C. Pengujian Terhadap Form Konfirmasi Pembayaran

Tabel III.3.

Pengujian Terhadap Form Konfirmasi Pembayaran

No Skenario

Pengujian Test Case

Hasil yang

diharapkan

Hasil

pengujian Kesimpulan

1

Mengosong

kan salah

satu form

kemudian

klik simpan

Tanggal:

(kosong)

Jumlah kirim:

500000

Bank

pengirim:

(kosong) Dari

Bank: BCA

Type

transaksi:

Bank transfer

Nama Akun:

(kosong)

Sistem akan

menolak akses

user dan

menampilkan

"Harap isi

bidang ini"

pada awal

form yang

kosong

Sesuai

harapan Valid

70

No Skenario

Pengujian Test Case

Hasil yang

diharapkan

Hasil


2

Mengisikan

seluruh form

dengan data

lengkap dan

benar

Tanggal:

06/27/17

Jumlah

kirim:

500000 Bank

pengirim:

Mandiri Dari

Bank: BCA

Type

transaksi:

Bank transfer

Nama Akun:

yogi

Sistem akan

menerima

data dan

menampilkan

"Konfirmasi

pembayaran

anda akan

kami proses,

terima

kasih."

Sesuai

harapan Valid

D. Pengujian Terhadap Form Login Administrator

Tabel III.4.

Pengujian Terhadap Form Login Administrator

No Skenario

Pengujian Test Case

Hasil yang

diharapkan

Hasil


1

Username dan

Password tidak

diisi kemudian

klik tombol

Login

Username:

(kosong)

Password:

(kosong)

Sistem akan

menolak akses

user dan

menampilkan

"Harap isi

bidang ini"

pada awal

form yang

kosong

Sesuai

harapan Valid

71

No Skenario

Pengujian Test Case

Hasil yang

diharapkan

Hasil


2

Mengosongkan

salah satu form

kemudian klik

tombol Login

Username:

yogi

Password:

(kosong)

Sistem akan

menolak akses

user dan

menampilkan

"Harap isi

bidang ini"

pada awal

form yang

kosong

Sesuai

harapan Valid

3

Mengetikan

salah satu

kondisi salah

pada username

atau password

kemudian klik

tombol login

Username:

yogi

Password:

654321

Sistem akan

menolak akses

user dan

menampilkan

"username

atau password

salah"

Sesuai

harapan Valid

4

Mengetikan

username dan

password

dengan data

yang benar

kemudian klik

tombol login

Username:

admin

Password:

123456

Sistem

menerima

akses login,

kemudian

menampilkan

"Selamat

datang rendi"

di halaman

administrator

Sesuai

harapan Valid

72

BAB IV

PENUTUP

4.1. Kesimpulan

Setelah mengamati dan mempelajari, penulis mengambil kesimpulan mengenai

Perancangan Sistem Informasi Penjualan Pomade Online Berbasis Web, kesimpulan

tersebut antara lain :

1. Website Pomade Online ini menggunakan bahasa pemrograman seperti PHP

(Personal Home Page), HTML (Hyper Text Markup Language), dan Adobe

Dreamweaver CS5.

2. Database atau basis data yang digunakan pada website ini adalah MySQL (My

Structure Query Language).

3. Penyampaian informasi melalui website mampu menyediakan informasi dalam

bentuk teks dan gambar yang membantu website tersebut lebih menarik untuk

dilihat.

4. Website ini dibuat bertujuan untuk memudahkan para customer untuk membeli

produk yang ditawarkan.

73

4.2. Saran

Dari kesimpulan yang telah dibuat berdasarkan proses perancangan website,

maka penulis mencoba mengajukan saran-saran agar lebih dapat meningkatkan

kualitas dalam penggunaan program ini. Adapun saran-saran tersebut yaitu :

1. Disarankan agar kedepannya website ini ditambahkan fitur lupa password dan

ubah password sehingga bila terjadi lupa password baik pengelola maupun

pelanggan tidak harus membuat akun baru.

2. Disarankan agar website ini memberikan diskon kepada member sehingga dapat

membedakan apa keuntungan dan tidaknya menjadi member pada toko online

ini.

3. Sebaiknya kedepannya harus memiliki Backup atau cadangan database dan file

lainnya agar lebih mudah mencari solusi jika terjadi hal yang tidak diinginkan.

4. Disarankan agar kedepannya pada website Pomade Online ini terdapat fitur e-

payment atau e-banking sehingga customer tidak harus melakukan transfer

secara manual dan tidak perlu melakukan konfirmasi pembayaran melalui sms

atau e-mail.

74

DAFTAR PUSTAKA

Ahmadi, Candra. dan Dadang Hermawan. 2013. E-Business & E-Commerce.

Yogyakarta : Andi.

Anhar. 2010. Panduan Menguasai PHP dan MYSQL secara otodidak. Jakarta :

PT. Trans Media.

Fathansyah. 2007. Buku teks Komputer Basis Data. Bandung: Informatika

Bandung.

Frieyadie. 2007. Belajar sendiri Pemograman Database Menggunakan Foxpro

9.0. Jakarta: PT. Elex Media Komputindo.

Kadir,Abdul. 2009. Pengenalan Sistem Informasi. Yogyakarta: Penerbit Andi.

Kustiyahningsih, Y & Anamisa, Devie R. (2011) Pemrograman Basis Data

Berbasis Web Menggunakan PHP & MySql. Yogyakarta: Graha Ilmu.

Raharjo, Budi. 2011. Membuat Database Menggunakan MySql. Bandung :

Informatika Oneto, Erima dan Yosep Sugiarto. 2009. Antigaptek

Internet. Jakarta: Kawan Pustaka.

Sadeli, Muhammad. 2013. Toko Baju Online dengan PHP dan MYSQL.

Palembang : Maxikom.

Shalahuddin, M. dan Rosa A.S. 2013. Rekayasa Perangkat Lunak Terstruktur

dan Berorientasi Objek. Bandung: Informatika Bandung

Sibero, Alexander F.K. 2013. Web Programming Power Pack. Yogyakarta :

Mediakom.

Sidik, Betha & Pohan I Husni. 2009. Pemograman Web Dengan HTML.

Bandung : Informatika.

Sigit, Christianus. 2010, Mudah Membuat Toko Online Dengan OsCommerce.

Yogyakarta : Andi.

Simarmata, Janner. 2010. Rekayasa Perangkat Lunak. Yogyakarta : Andi Offset.

Sunarto, Andi. 2009. Seluk Beluk E-Commerce Panduan Bagi Pemula Untuk

Menjual Produknya Melalui Internet. Yogyakarta : Garailmu.

Suhartanto, M. 2012. Pembuatan website sekolah menengah pertama negeri 3

delanggu dengan menggunakan php dam mysql. Jakarta : PT. Trans

Media.

75

Sutisna, Dadan. 2007. 7 Langkah Mudah Menjadi Webmaster. Jakarta : PT.

Trans Media.

Sutopo, Ariesto Hadi. 2007. Pemrograman Flash dengan PHP dan MySQL.

Yogyakarta : Graha ilmu.

Utami, Ema. dan Anggit Dwi Hartanto. 2012. Sistem Basis Data Menggunakan

Microsoft SQL Server 2005. Yogyakarta : Andi.

TUGAS AKHIR - Bina Sarana Informatika · Ibu, Ayah, Kakak, dan keluarga tercinta yang telah...

Documents

Transcript of TUGAS AKHIR - Bina Sarana Informatika · Ibu, Ayah, Kakak, dan keluarga tercinta yang telah...