tugas akhir - bina sarana informatika · penjualan kain bahan berbasis web ini dibuat untuk...

PERANCANGAN SISTEM INFORMASI PENJUALAN KAIN

BAHAN BERBASIS WEB

TUGAS AKHIR

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

Muhamad Tito Aminto

NIM : 12145237

Program Studi Manajemen Informatika

AMIK BSI Tangerang

Tangerang

2017

KATA PENGANTAR

Puji Syukur Alhamdulillah, penulis panjatkan pada kehadirat Allah SWT

yang telah melimpahkan rahmad serta karunia-Nya, dan Baginda Muhammad

SAW yang menjadi suri tauladan bagi penulis. Sehingga pada akhirnya penulis

dapat menyelesaikan tugas akhir ini dengan baik. Dimana tugas akhir ini penulis

sajikan dalam bentuk buku yang sederhana. Adapun judul penulisan Tugas Akhir

yang penulis ambil ini sebagai berikut: “Perancangan Sistem Informasi

Penjualan Kain Bahan Berbasis Web”.

Tujuan penulisan Tugas Akhir ini dibuat sebagai salah satu syarat kelulusan

Program Diploma III pada Akademik Manajemen Informatika dan Komputer Bina

Sarana Informatika (AMIK BSI). Terselesaikan penulisan Tugas Akhir ini tidak

lepas dari batuan berbagai pihak, yang mewajibkan penulis untuk menyampaikan

terima kasih yang tulus kepada:

1. Direktur Akademi Manajemen Informatika & Komputer Bina Sarana

Informatika.

2. Ketua Jurusan Manajemen Informatika AMIK BSI.

3. Ibu M. Sinta Nurhayati, M.Kom selaku Dosen Pembimbing Tugas Akhir.

4. Staff / karyawan / dosen dilingkungan Akademi BSI.

5. Orang tua tercinta yang telah memberikan dukungan moral maupun spiritual.

6. Rekan-rekan mahasiswa kelas 6A dan 6B yang telah memberikan saran dan

kritik kepada penulis dalam penulisan tugas akhir ini.

vi

ABSTRAKSI

Muhamad Tito Aminto (12145237), Perancangan Sistem Informasi

Penjualan Kain Bahan Berbasis Web.

Teknologi internet yang ada sekarang, merupakan media yang mempermudah kita

dalam hal berkomunikasi, menyebarkan informasi serta dapat digunakan juga

sebagai sarana untuk memasarkan produk. Perancangan Sistem Informasi

Penjualan Kain Bahan Berbasis Web ini dibuat untuk memudahkan konsumen

dalam hal pembelian produk serta transaksi tanpa harus jauh-jauh datang ke lokasi

penjualan secara langsung. Motodologi yang digunakan dalam mereancang Web

E-Commerce ini adalah metode observasi yang meninjau toko-toko yang ada.

Selain itu, metode kepustakaan juga digunakan untuk mendapatkan referensi dari

buku-buku yang tersedia baik diperpustakaan maupun di internet. Keluhan dari

para penjual yang merasa penjualannya yang selalu menurun dikarenakan

persaingan fashion yang semakin ketat dan sulitnya masalah pemasaran, membuat

saya berfikir untuk mengubah sistem pemasaran yang manual menjadi sistem

terkomputerisasi melalui jaringan internet. Pada penjualan kain bahan ini

merupakan salah satu sistem pemasaran yang dibuat sesuai dengan apa yang

dibutuhkan dalam memasarkan serta meningkatkan penjualan produknya.

Kata Kunci: Perancangan Sistem, E-commerce, Penjualan kain.

viii

ABSTRACT

Muhamad Tito Aminto (12145237), Design of Sales Information Systems Web-

Based Fabrics Material.

Internet technology is now, is a medium that facilitates us in terms of

communicating, disseminating information and can be used also as a means to

market the product. Design of Sales Information Systems Web-Based Fabrics

Material is made to facilitate consumers in terms of purchasing products and

transactions without having all the way to come to the location of direct sales. The

methodology used in designing Web E-Commerce is an observational method that

reviews existing stores. In addition, the literature method is also used to obtain

references from books available both libraries and on the internet. Complaints

from the sellers who feel the sales are always declining due to increasingly fierce

competition and the difficulty of marketing problems, makes me think to change

the manual marketing system into a computerized system through the Internet

network. In the sale of fabrics material is one of the marketing system that is made

in accordance with what is needed in marketing and increase sales of its products.

Keywords: System Design, E-commerce, Sales of fabrics.

ix

DAFTAR ISI

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

Abstrak ................................................................................................................. viii

Daftar Isi ............................................................................................................................ x

Daftar Simbol ........................................................................................................................ xi

Daftar Gambar ....................................................................................................... xii

Daftar Tabel ......................................................................................................... xiii

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

1.1. Latar Belakang Makalah................................................................. 1

1.2. Maksud dan Tujuan ........................................................................ 2

1.3. Metode Penelitian ........................................................................... 3

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 .......................................................................... 15

BAB III PEMBAHASAN ................................................................................ 22

3.1. Analisa Kebutuhan ................................................................... 22

3.2. Perancangan Perangkat Lunak ................................................. 23

3.2.1. Rancangan Antar Muka ................................................... 23

3.2.2. Rancangan Basis Data ..................................................... 39

3.2.3. Rancangan Struktur Navigasi .......................................... 51

3.3. Implementasi dan Pengujian Unit. ......................................... 53

3.3.1. Implementasi ................................................................... 53

3.3.2. Pengujian Unit ................................................................. 60

BAB IV PENUTUP .......................................................................................... 64

4.1. Kesimpulan ................................................................................ 64

4.2. Saran .......................................................................................... 64

DAFTAR PUSTAKA ........................................................................................... 66

DAFTAR RIWAYAT HIDUP ............................................................................ 67

x

DAFTAR SIMBOL

A. Entity Relationship Diagram (ERD)

Entitas atau Obyek Data

Kumpulan obyek atau sesuatu yang dapat dibedakan

maupun dapat diidentifikasi secara unik.

Relationship

Hubungan yang tejadi antara satu entitas atau lebih.

Kumpulan relationship yang sejenis disebut

relationship set.

Atribut atau Elemen Data

Karakteristik dalam entity atau relationship yang

mengerjakan penjelasan detail tentang entity atau

relationship atau dengan kata lain adalah kumpulan

elemen data yang membentuk suatu entitas.

Weak Entity

Suatu entity dimana keberadaan dari entity tersebut

tergantung dari entity lain.

Atribut Multivalue

Atribut yang memiliki nilai lebih dari satu.

Connection

Digunakan sebagai penghubung entitas yang

membedakan entitas tersebut dengan entitas

lainnya.

xi

DAFTAR GAMBAR

Halaman

1. Gambar II.1. Waterfall Model......................................................................... 13

2. Gambar II.2. Struktur Navigasi Linear ........................................................... 15

3. Gambar II.3. Struktur Navigasi Hirarki .......................................................... 16

4. Gambar II.4. Struktur Navigasi Non Linear ................................................... 16

5. Gambar II.5. Struktur Navigasi Composite ..................................................... 17

6. Gambar III.1. Rancangan Halaman Member Index ........................................ 24

7. Gambar III.2. Rancangan Halaman Member Produk ...................................... 25

8. Gambar III.3. Rancangan Halaman Member Cara Pembelian ........................ 26

9. Gambar III.4. Rancangan Halaman Member Cara Pembayaran ..................... 27

10. Gambar III.5. Rancangan Halaman Member Kontak Kami............................ 28

11. Gambar III.6. Rancangan Halaman Daftar Pengunjung ................................. 29

12. Gambar III.7. Rancangan Halaman Login Admin .......................................... 30

13. Gambar III.8. Rancangan Halaman Admin Beranda ..................................... 31

14. Gambar III.9. Rancangan Halaman Admin Produk ........................................ 32

15. Gambar III.10. Rancangan Halaman Admin Kategori .................................. 33

16. Gambar III.11. Rancangan Halaman Admin Member ................................... 34

17. Gambar III.12. Rancangan Halaman Admin Testimoni ................................ 35

18. Gambar III.13. Rancangan Halaman Admin Pesanan ................................... 36

19. Gambar III.14. Rancangan Halaman Admin Konfirmasi ............................... 37

20. Gambar III.15. Rancangan Halaman Admin Detail Konfirmasi .................... 37

21. Gambar III.16. Rancangan Halaman Admin Laporan .................................... 38

22. Gambar III.17. Rancangan Halaman Keranjang Belanja ................................ 39

23. Gambar III.18. Entity Relationship Diagram .................................................. 40

24. Gambar III.19. Logical Relational Structure .................................................. 41

25. Gambar III.20. Struktur Navigasi Halaman Admin ........................................ 52

26. Gambar III.21. Struktur Navigasi Halaman Member ..................................... 53

27. Gambar III.22. Implementasi Halaman Depan Log In Admin ....................... 54

28. Gambar III.23. Implementasi Halaman Depan Admin Home ........................ 54

29. Gambar III.24. Implementasi Halaman Depan Admin Data Pesan ................ 55

30. Gambar III.25. Implementasi Halaman Admin Penjualan Keseluruhan ....... 55

31. Gambar III.26. Implementasi Halaman Depan Data Admin .......................... 56

32. Gambar III.27. Implementasi Halaman Depan Admin Data Kategori ........... 56

33. Gambar III.28. Implementasi Halaman Depan Admin Data Produk .............. 57

34. Gambar III.29. Implementasi Halaman Admin Data Member ....................... 57

35. Gambar III.30. Implementasi Halaman Depan Admin Data Testimoni ......... 58

36. Gambar III.31. Implementasi Halaman Depan Admin Data Kota .................. 58

37. Gambar III.32. Implementasi Halaman Depan Index User ............................ 59

xii

DAFTAR TABEL

Halaman

1. Tabel III.1. Spesifikasi File Admin ................................................................ 42

2. Tabel III.2. Spesifikasi File Pesanan .............................................................. 43

3. Tabel III.3. Spesifikasi File Kategori.............................................................. 44

4. Tabel III.4. Spesifikasi File Keranjang ........................................................... 45

5. Tabel III.5. Spesifikasi File Konfirmasi ......................................................... 46

6. Tabel III.6. Spesifikasi File Kota .................................................................... 47

7. Tabel III.7. Spesifikasi File Member .............................................................. 48

8. Tabel III.8. Spesifikasi File Pesanan .............................................................. 49

9. Tabel III.9. Spesifikasi File Produk ................................................................ 50

10. Tabel III.10. Spesifikasi File Testimoni ......................................................... 51

11. Tabel III.11. Hasil Pengujian Black Box Testing Login Admin...................... 61

12. Tabel III.12. Hasil Pengujian Black Box Testing Login Member ................... 62

xiii

BAB I

PENDAHULUAN

1.1. Latar Belakang Masalah

Pada saat ini hanya melalui sebuah media digital banyak informasi yang

diinginkan dapat diperoleh dengan mudah, baik dari informasi trend masa kini,

lalu informasi berita publik, dan bahkan informasi tentang sejarah pun dapat

dengan mudah didapatkan, kemudahan dan biaya akses yang relatif murah

menjadikan internet sebagai media informasi baru. Karena internet mempunyai

kelebihan sebagai sumber informasi yang cepat dan efisien, jika dapat

menerapkan internet pada sebuah sistem pasti akan dapat membantu

memaksimalkan kinerja pada sistem tersebut.

Aktivitas penjualan merupakan pendapatan utama perusahaan karena jika

aktivitas penjualan produk maupun jasa tidak dikelola dengan baik maka secara

langsung dapat merugikan perusahaan. Kini banyak terdapat berbagai bidang

usaha yang melakukan aktifitasnya dengan bantuan internet sebagai alat bantu

berbagai sumber informasi mengenai perusahaan dan produk yang dijual. Bagi

perusahaan, instansi maupun suatu organisasi, internet bisa dibilang sarana media

promosi atau informasi yang sangat murah.

Akibat perkembangan jaringan komputer dan internet, jelas telah

mengubah kebiasaan berbelanja masyarakat modern hal tersebut menjadi faktor

utama penyebab munculnya e-commerce dan dengan pesat mulai menjadi trend.

Dengan media ini mereka tak lagi memerlukan banyak waktu keluar-masuk toko

1

2

mencari kebutuhan karena semua telah tersedia secara online. Dan customer dapat

memperoleh informasi tentang produk secara lengkap dan informasi tersebut

dapat diakses setiap waktu selain itu dalam hal pembelian juga dapat dilakukan

setiap waktu bahkan konsumen dapat memilih sendiri produk yang dia inginkan.

Berdasarkan pertimbangan di atas,melalui tugas akhir ini penulis ingin

mengimplementasikan ilmu yang telah penulis dapatkan selama belajar di Bina

Sarana Informatika (BSI) sekaligus mengembangkan minat yang penulis miliki.

Salah satu fokus penelitian ini adalah bagian kegiatan “Penjualan Kain

Bahan” proses tersebut mempunyai nilai strategis guna mempermudah konsumen

dalam membeli model kain bahan yang mereka inginkan hanya dengan

menggunakan Rekening Bank yg terdapat di indonesia, sehingga konsumen tidak

perlu bersusah payah untuk mendapatkan kain bahan tersebut.

Berdasarkan keadaan dan permasalahan tersebut maka dari itu penulis

membuat tugas akhir (TA) berjudul ”Perancangan Sistem Informasi Penjualan

Kain Bahan Berbasis Web”

1.2. Maksud dan Tujuan

Maksud dari penulisan tugas akhir ini adalah:

1. Untuk membangun website e-commerce penjualan kain bahan yang

menyediakan fasilitas agar mempermudah para pembeli untuk mendapatkan

model kain bahan yang mereka inginkan.

2. Untuk mengeliminasi waktu dan biaya perjalanan untuk mengunjungi toko

yang sama secara virtual, hanya dengan beberapa klik.

3

3. Sebagai tempat promosi barang penjualan yang mengenalkan tentang produk

kain bahan.

4. Membantu memberikan kemudahan dalam hal manajemen data penjualan.

5. Untuk mengimplementasikan kemampuan penulis dan menerapkan ilmu web

programming yang didapat dari perkuliahan dalam pembuatan Website.

Sedangkan tujuan dari penulis Tugas Akhir ini sebagai salah satu syarat

untuk memenuhi kelulusan program Diploma Tiga (D.III) pada jurusan

Manajemen Informatika di Akademi Manajemen Informatika dan Komputer Bina

Sarana Informatika (AMIK BSI).

1.3. Metode Penelitian

A. Metode Pengembangan Perangkat Lunak

Metode yang digunakan pada pengembangan perangkat Lunak ini

menggunakan metode water fall sommervile(2007:66) yang menjadi tiga tahapan

yaitu:

1. Analisis Kebutuhan

Dilakukan dengan cara mengalisa kebutuhan akan fungsi-fungsi perangkat

lunak yang dibutuhkan, adapun fungsi-fungsi tersebut meliputi fungsi

masukan, fungsi proses, dan fungsi keluaran.

2. Perancangan Sistem dan Perangkat Lunak

Perancangan perangkat lunak (Software Design), merupakan perancangan

perangkat lunak yang dilakukan berdasarkan data – data yang telah

dikumpulkan pada tahap sebelumnya. Perancangan tersebut meliputi

4

perancangan struktur file, struktur menu, struktur program, format masukan

(input), dan format keluaran (output).

3. Implementasi dan pengujian unit

Implementasi perangkat lunak (Coding),yaitu kegiatan yang

mengimplementasikan hasil dari perancangan perangkat lunak kedalam kode

program yang dimengerti oleh bahasa mesin. Pengujian perangkat lunak

(Testing), memfokuskan pada logika internal dari perangkat lunak, fungsi

eksternal, dan mencari segala kemungkinan kesalahan, memeriksa apakah

input sesuai dengan hasil yang diinginkan setelah proses.

B. Teknik Pengumpulan data

Untuk memenuhi penyusunan tugas akhir ini, penulis melakukan beberapa

penelitian, diantaranya:

1. Pengamatan Langsung (Observation)

Pengumpulan data dengan melihat objek penelitian, mengamati secara

langsung terhadap kegiatan – kegiatan yang terjadi di lapangan. Dan Penulis

juga sudah melakukan beberapa pengamatan pada web penjualan situs toko

online sebagai sarana penambah dalam membangun website penjualan.

2. Studi Pustaka (Literatur)

Pengumpulan data dengan cara membaca dan mempelajari literatur,

melakukan pencarian data dengan studi pustaka sebagai pedoman

pengumpulan dan mengkaji data yang ada. Dengan membaca literature,

catatan – catatan atau predikat yang baik di peroleh selama kuliah maupun dari

perpustakaan yang berhubungan dengan materi perancangan website.

5

1.4. Ruang Lingkup

Ruang lingkup masalah yang dibahas mencakup proses penyampaian

informasi penjualan dan pemesanan melalui sebuah website. Karena luasnya

bahasan proses suatu penjualan maka penulis membuat batasan terhadap

pembahasan pada penjualan kain bahan yang dimulai dari menampilkan beranda,

pembelian kain bahan, konfirmasi pembayaran, pengiriman, tentang kami dan

bahasa pemograman yang dipakai adalah PHP dengan menggunakan XAMPP dan

MySQL sebagai databasenya.

1.5. Sistematika Penulisan

Untuk dapat mengetahui secara singkat permasalahan dalam penulisan

laporan tugas akhir ini maka digunakan sistematika penulisan yang bertujuan

untuk mempermudah pembaca menulusuri dan memahami isi laporan tugas akhir

berikut.

BAB I PENDAHULUAN

Pada bab ini menguraikan latar belakang secara umum, maksud dan

tujuan, metode penelitian, ruang lingkup yang membatasi

permasalahan dan sistematika penulisan yang merupakan gambaran

keseluruhan dari keseluruhan bab.

BAB II LANDASAN TEORI

Bab ini menjelaskan tentang konsep dasar web yang dibahas dalam

ruang lingkup E-commerce, menjelaskan tentang pengertian bahasa

pemrograman meliputi CSS, PHP, HTML.menjelaskan tentang

6

pengertian dari basis data, serta program aplikasi yang digunakan

dalam menunjang website yang akan dibuat meliputi Adobe

Dreamweaver CS5, Adobe Photoshop CS dan memberikan penjelasan

secara teroritis tentang peralatan rancangan sistem meliputi Entity

Relantionship Diagram (ERD), Struktur Navigasi, Logical Relational

Structure (LRS) yang digunakan dalam penulisan tugas akhir.

BAB III PEMBAHASAN

Bab ini menjelaskan mengenai tinjauan khusus, spesifikasi rancangan

web, rancangan struktur navigasi, spesifikasi file, spesifikasi sistem

komputer berupa perangkat keras dan perangkat lunak komputer.

BAB IV PENUTUP

Pada bab ini penulis mengemukakan beberapa kesimpulan dan saran

yang berkaitan dengan perancangan web.

BAB II

LANDASAN TEORI

2.1. Konsep Dasar Web

Konsep dasar tersturktur memegang peran penting dalam merancang,

menuyusun, memelihara dan mengembangkan suatu program, khususnya program

aplikasi yang besar dan kompleks. Proses pemograman komputer bukan hanya

sekedar menulis suatu urutan intruksi yang harus dikerjakan komputer, akan tetapi

bertujuan untuk memecahkan suatu masalah serta membuat mudah pekerjaan

yang diinginkan oleh pemakai (user) yang menjadi alasan utama mengapa kita

belajar bahasa pemograman komputer adalah karena kita ingin memanfaatkan

komputer sebagai alat bantu untuk menyelesaikan masalah.

A. Website

Menurut Ardhana (2012:3) “website adalah suatu layanan sajian informasi

yang menggunakan konsep hyperlink (tautan), yang memudahkan user yang

melakukan browsing atau penelusuran informasi melalui internet”.

Web mengizinkan pemberian highlight (penyorotan/penggaris bawahan) pada

kata-kata atau gambar dalam sebuah dokumen untuk menghubungkan atau

menunjuk ke media lain seperti dokumen, frase, movie, clip, atau file suara. Web

dapat menghubungkan dari sembarang tempat dalam sebuah dokumen atau

gambar kesembarang tempat di dokumen lain. Dengan sebuah browser yang

memiliki Graphical User Interface (GUI), link-link dapat dihubungkan ke

tujuannya menunjuk link tersebut.

7

8

1. Internet

Menurut Sibero (2011:10) menjelaskan bahwa “internet (Interconnected

Network) adalah jaringan komputer yang menghubungkan antara jaringan secara

global, internet dapat juga disebut jaringan alam yang luas”. Seperti halnya

jaringan komputer lokal maupun jaringan komputer area, internet juga

menggunakan protokol komunikasi yang sama yaitu TCP/IP (Tranmission

Control Protocol/ Internet Protocol).

2. Web Server

Menurut Anhar (2010:4) menjelaskan bahwa :

“Aplikasi yang berfungsi untuk melayani permintaan pemanggilan alamat

dari pengguna melalui web browser, dimana web server mengirim kembali

informasi yang diminta tersebut melalui HTTP (Hypertext Transfer Protocol)

untuk ditampilkan dilayar monitor komputer kita”.

3. Web Browser

Menurut Anhar (2010:6) menyatakan bahwa “browser merupakan software

yang diinstall dimesin client, berfungsi untuk menterjemahkan tag HTML

menjadi halaman web.”

B. Bahasa Pemrograman

Menurut Indrajani (2007:22) menjelaskan bahwa “bahasa pemrograman

adalah perangkat lunak atau software yang dapat digunakan dalam proses

pembuatan program yang melalui beberapa tahapan-tahapan penyelesaian

masalah”.

9

1. PHP (Hypertext Preprocessor)

Menurut Anhar (2010c:3) menjelaskan bahwa “PHP singakatan dari PHP:

Hypertext Preprocessor yaitu bahasa pemrogaman web server-side yang

bersifat open source.”

2. HTML (Hypertext Markup Language)

Menurut Ardhana (2012:42) menjelaskan bahwa “Hypertext Markup

Language atau HTML suatu bahasa yang dikenali oleh web browser untuk

menampilkan informasi seperti teks, gambar, suara, animasi, bahkan video”.

Untuk dapat membuat website dengan baik maka langkah awal yang harus

dilakukan yaitu mengenal kode-kode dasar HTML yang sering digunakan

oleh programmer web profesional. Kode HTML memiliki aturan dan struktur

penulisan tersendiri yang disebut tag HTML. Tag adalah kode yang

digunakan untuk memoles (mark-up) teks ASCII (American Standard Code

For Information Interchange) menjadi file HTML. Setiap tag diapit dengan

tanda kurung runcing. Ada tag pembukan yaitu <HTML> dan ada tag penutup

yaitu </HTML> yang ditanda garis miring (slash) didepan awal tulisannya.

3. CSS (Cascading Style Sheet)

Menurut Saleh (2008:28) menjelaskan bahwa :

“CSS merupakan suatu bahasa stylesheet yang mengatur tampilan suatu

dokumen. Pada umumnya CSS digunakan untuk memformat halaman web

yang ditulis dengan HTML dan XHTML. Dengan CSS, tampilan website akan

lebih cantik dan konsisten”.

10

Ada dua cara menuliskan kode CSS, yaitu :

a. Internal dengan cara menuliskan langsung diantara tag HTML/XHTML.

b. Eksternal dengan cara menyimpan CSS kedalam file yang terpisah,

kemudian dipanggil didalam web saat dibuka.

4. Javascript

Menurut Sibero (2011:150) menjelaskan bahwa “Javascript bahasa

pemrograman yang dikembangkan untuk dapat berjalan pada web browser”.

Sebagai bahasa skrip yang berjalan pada web browser atau sisi klien (client

side), javascript tidak memiliki fungsi untuk menjalankan suatu perintah pada

server atau sisi server (server side). Dengan keterbatasan itu para

pengembang javascript kemudian menambahkan suatu mekanisme agar

javascript dapat berinteraksi dengan server.

Mekanisme tersebut adalah AJAX (asynchronous javasript and XML) yaitu

mekanisme komunikasi antara javascript yang berbeda disisi klien dengan

bahasa disisi server seperti PHP dan lainnya. Prinsip kerja AJAX adalah

menjalankan suatu alamat perintah pada server dan menerima data yang

dikembalikan oleh server.

5. JQuery

Menurut Sibero (2011:218) menjelaskan bahwa :

Jquery salah satu javascript framework terbaik saat ini. JQuery

dikembangkan oleh John Resig pada tahun 2006 di BarCamp NYC. Pada

awal perkembangannya, Jquery pertama dibuat untuk meringkas penggunaan

CSS Selector dalam suatu pustaka fungsi. JQuery memiliki ciri khas pada

11

penggunaan perintahnya, Prefix untuk JQuery dengan tanda $ kemudian

dilanjutkan dengan fungsi atau perintah.

Beberapa fitur yang ada di JQuery adalah sebagai berikut :

a. Dalam pemakaian menggunakan seleksi elemen DOM, sehingga website

lebih dinamis dan interaktif.

b. JQuery bisa memanipulasi Class pada CSS dan Support CSS3.

c. Event.

d. AJAX.

e. Efek-efek dan animasi.

f. Ekstensi dan Plug-ins.

g. Kompatibilitas dengan hampir semua browser modern.

h. Keperluan lain seperti: User Agent, feature detection dan lainnya.

6. Bootstrap

Menurut Abdulloh (2015:139) menjelaskan bahwa :

“Bootsrtap merupakan salah satu framework CS5 yang sangat popular

dikalangan pecinta pemrograman website. Dengan Bootsrtap, proses desain

website tidak dibuat dari nol, sehingga proses desain website lebih cepat dan

mudah”. Bahkan tanpa kita membuat skrip CS5 sedikit pun kita sudah dapat

membuat desain website yang bagus.

Sejak bootsrtap dilengkapi dengah fitur responsive pada tahun 2012,

bootstrap semakin banyak digemari dan semakin banyak website yang

menggunakan bootstrap dalam desainnya. Dengan fitur responsive yang

disediakan bootstrap ini, website dapat dilihat dalam berbagai ukuran layar

12

seperti smartphone atau tablet dengan desain tetap teratur dan mengikuti

ukuran layar.

C. Basis Data

Menurut Connolly (2010:65) menjelaskan bahwa “Basis Data adalah

kumpulan relasi-relasi logis dari data dan (deskripsi data) yang dapat digunakan

bersama dan dibuat untuk memperoleh informasi yang dibutuhkan oleh

perusahaan”.

1. MySQL

Menurut Anhar (2010:21) menjelaskan bahwa :

MySQL (My Structure Query Language) 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 Multitread, Multi-User yang

bersifat gratis dibawah lisensi GNU General Public License (GPL).

2. PhpMyAdmin

Menurut Sibero (2011:376) menjelaskan bahwa “PhpMyAdmin adalah

aplikasi web yang dibuat oleh PhpMyAdmin.net. PhpMyAdmin digunakan

untuk administrasi database Mysql”. Program ini digunakan untuk mengakses

database MySql. Perintah untuk membuat tabel dapat menggunakan form

yang sudah tersedia pada PhpMyAdmin atau dapat langsung menuliskan

script pada menu SQL. PhpMyAdmin dijalankan dengan cara mengetik

http://localhost/phpmyadmin pada web browser.

http://localhost/phpmyadmin

13

3. Xampp

Menurut wicaksono (2008:7) menjelaskan bahwa “XAMPP adalah sebuah

software yang berfungsi untuk menjalankan website berbasis PHP dan

menggunakan pengolah data MySQL dikomputer local”. XAMPP berperan

sebagai server web pada komputer anda. XAMPP juga dapat disebut sebuah

CPanel server virtual, yang dapat membantu anda melakukan preview

sehingga dapat memodifikasi website tanpa harus online atau terakses dengan

internet.

D. Model Pengembangan Perangkat Lunak

Model ini merupakan model yang paling pertama dipublikasikan. Model ini

berasal dari proses sistem engineering yang lebih umum, karena proses dari tahap

satu ke tahap selanjutnya mengalir kebawah, model ini dikenal sebagai waterfall

model atau siklus hidup software Sommerville (2007:66).

Beberapa tahapan dalam waterfall :

Sumber : Sommerville (2007:66)

Gambar II.1.Waterfall Model

14

Tahap utama model ini dibagi kedalam 5 (lima) bagian berdasarkan

pengembangan kegiatannya :

1. Analisis dan defenisi kebutuhan

Layanan, batasan dan tujuan dari sistem ditetapkan melalui konsultasi dengan

pengguna sistem. Semua itu didefenisikan secara detail dan bertindak sebagai

spesifikasi sistem.

2. Desain sistem dan software

Proses desain sistem membagi kebutuhan menjadi hardware atau software.

Ini menetapkan hampir seluruh perancangan sistem. Desain software

melibatkan pengidentifikasian dan penggambaran mengenai pemisahan dasar

sistem software dan hubungannya.

3. Implementasi dan unittesting

Dalam tahap ini, desain software adalah menyadari sebagai kumpulan

program. Unittesting melibatkan verifikasi bahwa setiap unittelah mencapai

spesifikasinya.

4. Integration and system testing

Satuan program atau kumpulan program diintegrasikan dan di uji sebagai

sistem yang telah selesai, untuk menjamin bahwa kebutuhan software dikirim

kepada pelanggan.

5. Operation and maintenance

Umumnya bagian ini merupakan siklus software yang paling lama. Sistem di-

install dan dimasukkan kedalam penggunaan. Pemeliharaan melibatkan

pembenaran kesalahan yang tidak ditemui dalam tahap awal siklus,

15

meningkatkan implementasi satuan sistem, dan meningkatkan layanan sistem

sehubungan ditemukannya kebutuhan baru.

2.2. Teori Pendukung

A. Struktur Navigasi

Menurut Binanto (2010:268) menjelaskan bahwa “Struktur navigasi adalah

struktur referensi informasi situs web dan mekanisme link yang mendukung

pengunjung untuk melakukan penjelajahan situs”.

Menurut Binanto (2010:269-270) ada empat macam bentuk dasar dari

struktur navigasi yang biasa digunakan dalam proses pembuatan aplikasi,

yaitu :

1. Struktur Navigasi Berurut (Linier)

Pemakai menelusuri program secara berurutan. Struktur ini merupakan

rangkaian berurutan yang menghubungkan halaman satu dengan halaman

berikutnya secara berurutan.

Sumber : Binanto (2010:269)

Gambar II.2.Struktur Navigasi Linier

2. Struktur Navigasi Hirarki

Struktur dasar ini disebut juga struktur “linear dengan percabangan” karena

pengguna melakukan navigasi di sepanjang cabang pohon struktur yang

terbentuk oleh logika isi.

16


Gambar II.3.Struktur Navigasi Hirarki

3. Struktur Navigasi Tidak Berurut (Non Linier)

Pemakai bebas menelusuri program tanpa dibatasi oleh suatu

rute. Struktur ini merupakan perpanjangan dari sruktur navigasi linier.

Namun pada struktur ini diperkenankan adanya percabangan saja

sehingga percabangan ini tidak sama struktur hirarkinya.


Gambar II.4.Struktur Navigasi Non Linear

4. Struktur Navigasi Campuran (Composite)

Pemakai dapat dengan bebas menelusuri program, tetapi pada bagian tertentu

gerakan dibatasi secara hirarki ataupun linier.

17


Gambar II.5.Struktur Navigasi Composite

B. Entity Relationship Diagram

Menurut Yakub (2008:25) menyatakan bahwa “ERD suatu model jaringan

yang menggunakan susunan data yang disimpan pada sistem secara abstrak”. ERD

juga menggambarkan hubungan antara satu entitas yang memiliki sejumlah atribut

dengan entitas yang lain dalam suatu sistem yang terintegrasi. ERD digunakan

oleh perancang sistem untuk memodelkan data yang nantinya akan dikembangkan

menjadi basis data (database). ERD ini juga merupakan model konseptual yang

dapat mendeskripsikan hubungan antara file yang digunakan untuk memodelkan

struktur data serta hubungan antar data.

1. Komponen ERD

ERD terbagi atas empat komponen, yaitu entitas (entity), atribut (attribute),

relasi atau hubungan (relation), dan koneksi (connection). Secara garis besar

entitas merupakan dasar yang terlibat dalam sistem. Atribut atau field berperan

sebagai penjelas dari entitas, dan relasi atau hubungan menunjukan hubungan

yang terjadi antara dua entitas.

18

a. Entitas (Entity)

Entitas (entity) adalah kumpulan dari obyek yang dapat

diidentifikasikansecara unik. Obyek dasar dapat berupa orang, benda atau

hal lain yang keterangannya perlu disimpan dalam basis data. Untuk

menggambarkan entitas dilakukan dengan mengikuti aturan-aturan sebagai

berikut :

1) Entitas dinyatakan dengan simbol persegi panjang.

2) Nama entitas berupa kata benda tunggal.

3) Nama entitas sedapat mungkin menggunakan nama yang mudah

dipahami dan menyatakan maknanya dengan jelas.

b. Atribut (Attribute)

Atribut sering juga disebut sebagai properti (property), merupakan

keterangan-keterangan yang terkait pada sebuah entitas yang perlu

disimpan sebagai basis data. Atribut berfungsi sebagai penjelas sebuah

entitas untuk menggambarkan atribut yang dilakukan mengikuti aturan

sebagai berikut:

1) Atribut dinyatakan dengan simbol elipps.

2) Nama atribut dituliskan dalam simbol elipps.

3) Nama atribut berupa kata benda tunggal.

4) Nama atribut sedapat mungkin menggunakan nama yang mudah

dipahami dan dapat menyatakan maknanya dengan jelas.

5) Atribut dihubungkan dengan entitas yang bersesuian dengan

menggunakan garis.

19

c. Relasi (Relation)

Relasi atau hubungan adalah kejadian atau transaksi yang terjadi di

antara dua entitas yang keterangannya perlu disimpan dalam basis data.

Aturan penggambaran relasi antar entity adalah:

1) Relasi dinyatakan dengan simbol belah ketupat.

2) Nama relasi dituliskan di dalam simbol belah ketupat.

3) Relasi menghubungkan dua entitas.

4) Nama relasi menggunakan kata kerja aktif (diawali awalan me)

tunggal.

5) Nama relasi sedapat mungkin menggunakan nama yang mudah

dipahami dan dapat menyatakan maknanya dengan jelas.

d. Koneksi (Connection)

Koneksi adalah hubungan antara entity dengan atributnya dan himpunan

entitas dengan himpunan relasinya.

2. Derajat Relasi (Kardinalitas)

a. Satu ke Satu (One to One)

Berarti setiap entitas pada himpunan entitas A berhubungan dengan paling

banyak dengan satu entitas pada himpunan entitas B, dan begitu juga

sebaliknya setiap entitas pada himpunan entitas B berhubungan dengan

paling banyak dengan satu entitas himpunan entitas B.

b. Satu ke Banyak (One to Many)

Berarti setiap entitas pada himpunan entitas A dan dapat berhubungan

dengan banyak entitas pada himpunan entitas B, tetapi tidak sebaliknya,

20

dimana setiap entitas pada himpunan entitas berhubungan dengan paling

banyak dengan satu entitas pada himpunan entitas A.

c. Banyak ke Satu (Many to One)

Berarti setiap entitas pada himpunan entitas A berhubungan dengan paling

banyak dengan satu entitas pada himpunan B, tetapi tidak sebaliknya, di

mana setiap entitas pada himpunan entitas A berhubungan dengan paling

banyak satu entitas pada himpunan entitas B.

d. Banyak ke Banyak (Many to Many)

Berarti setiap entitas pada himpunan entitas A dapat berhubungan dengan

banyak entitas pada himpunan entitas B, demikian juga sebaliknya, di

mana setiap entitas pada himpunan entitas B dapat berhubungan dengan

banyak entitas pada himpunan entitas A.

3. LRS (Logical Record Structured)

Menurut Simarmata (2006:37) menyatakan bahwa “LRS atau Skema basis

data adalah sekumpulan objek yang dihubungkan memiliki relasi satu sama

lain”. Ada satu pemilik skema, yaitu yang memiliki akses memanipulasi

struktur semua objek dalam skema. Sebuah skema tidak mewakili satu orang

meskipun skema berhubungan dengan user account yang terletak pada basis

data.

Adapun tiga model yang berhubungan dengan skema basis data :

a. Model Konseptual, disebut dengan pola model logis, adalah model data

dasar yang berurusan dengan struktur organisasional yang digunakan

untuk menentukan struktur basis data seperti tabel dan batasan.

21

b. Model Internal, disebut pula model fisik, berurusan dengan penyimpanan

data dalam tabel dan penggunaan indeks untuk mempercepat akses data.

Model internal memisahkan kebutuhan fisik hardware dan sistem operasi

dari model data.

c. Model Eksternal, atau antarmuka aplikasi, berurusan dengan metode yang

digunakan pengguna agar dapat mengakses skema seperti melalui

penggunaan formulir input data. Model eksternal memungkinkan relasi

dibuat antara aplikasi pengguna dan model data.

C. Pengujian Web

Menurut Sukamto (2013:275) menyatakan bahwa “Black-Box testing

(pengujian kotak hitam) menguji perangkat lunak dari segi spesifikasi fungsional

tanpa menguji desain dan kode program”. Pengujian dimaksudkan untuk

mengetahui 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 dengan memakai

perangkat lunak apakah sesuai dengan spesifikasi yang dibutuhkan.

Kasus uji yang dibuat untuk melakukan pengujian kotak hitam harus dibuat

dengan kasus benar dan kasus salah, misalkan untuk kasus proses login maka

kasus uji yang dibuat adalah :

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

yang benar.

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

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

BAB III

PEMBAHASAN

3.1 Analisa Kebutuhan

Salah satu tahapan pengembangan perangkat lunak adalah dengan menanalisa

kebutuhan sebagai berikut :

A. Member

Dalam sistem ini member dapat melakukan kegiatan sebagai berikut:

1. Member dapat melihat-lihat produk di halaman dengan website

2. Pengunjung dapat melakukan pendaftaran sebagai Member

3. Member dapat melihat detail produk

4. Member dapat login dan membeli produk

5. Member bisa menghapus item produk pada keranjang belanja.

6. Member dapat melakukan checkout dan melanjutkan ke proses

pembayaran

7. Member dapat mengisi komentar di halaman testimoni.

B. Admin

Dalam sistem ini admin dapat melakukan kegiatan sebagai berikut:

1. Admin dapat menambah, mengedit atau menghapus produk yang

dijual

2. Admin dapat mengedit dan menambahkan admin baru

3. Admin dapat mengedit, menghapus dan menambahkan kategori

22

23

4. Admin dapat mengubah nama dan password member

5. Admin dapat mengedit dan menghapus testimoni

C. Sistem

1. Sistem dapat memberikan layanan transaksi secara online

2. Sistem dapat memberikan keamanan dengan login terlebih dahulu sebelum

mengakses menu beranda

3. Sistem memberikan fasilitas bisa mencari produk sebelum menjadi pelanggan

4. Sistem dapat melakukan konfirmasi dan jika belum menjadi pelanggan tidak

bisa membeli produk yang diinginkan

5. Sistem tidak dapat memproses pembelian sebelum pengunjung melakukan

pendaftaran

3.2 Perancangan Perangkat Lunak

3.2.1 Rancangan Antar Muka

Rancangan antar muka website merupakan penjelasan secara terperinci yang

harus dibuat untuk mendefinisikan bagian dari tampilan dalam mendesign tampilan

web tersebu. Rancangan harus sesuai dengan struktur navigasi yang telah dibuat

sehingga design penjualan lukisan sebagai berikut.

1. Rancangan Halaman Member(Index)

Beranda adalah halaman depan dari semua halaman yang ada pada website.

Halaman ini juga disebut sebagai halaman pembuka karena pada saat pertama

website dibuka maka halaman inilah yang akan tampil sebelum halaman yang

24

lainnya. Pada halaman Beranda akan dirancang cukup kompleks karena akan

ada link untuk kesemua halaman. Rancangan tampilan sebagai berikut.

Gambar III.1.

Rancangan Halaman Member (Index)

2. Rancangan Halaman Member(Produk)

Merupakan halaman yang menjelaskan tentang data produk yang terdapat

pada website ini. Rancangannya adalah sebagai berikut.

0

……… +

Total : 0

Footer

Konfirmasi Pembayaran

Daftar Baru

Masuk Ke Tokokain

Password

Username

Login

Cari XX99 Testimoni Kontak Kami Cara Pembayaran Cara Pembelian Produk Beranda

Header

XXXX

Z XXXX

kategori

Logo

Selamat Datang

Logo

Logo Logo

Keranjang

Banner

25

Gambar III.2

Rancangan Halaman Member (Produk)

3. Rancangan Halaman Member (Cara Pembelian)

Halaman cara belanja adalah halaman bagi pengunjung baru yang belum

mengetahui prosedur pembelian pada website ini. Rancangan adalah sebagai

berikut.

0

……… +

Total : 0

Footer


Daftar Baru

Masuk Ke Tokokain

Password

Username

Login


Header

XXXX

Z XXXX

kategori

Logo

Logo

Logo Logo

Keranjang

Nama Produk

Kategori

26

Gambar III.3

Rancangan Halaman Member (Cara Pembelian)

4. Rancangan Halaman Member (Cara Pembayaran)

Halaman ini berisi tata cara membayar di web tersebut dari mulai

pemberitahuan cara transfer dan no rekening.

0

……… +

Total : 0

Footer


Daftar Baru

Masuk Ke Tokokain

Password

Username

Login


Header

XXXX

Z XXXX

kategori

Logo

Logo

Logo Logo

Keranjang

Tampilan Cara Pembelian

27

Gambar III.4

Rancangan Halaman Member (Cara Pembayaran)

5. Rancangan Halaman Member (kontak Kami)

Halaman tentang kami adalah penjelasan singkat tentang website tersebut,

Rancangannya adalah sebagai berikut

0

……… +

Total : 0

Footer


Daftar Baru

Masuk Ke Tokokain

Password

Username

Login


Header

XXXX

Z XXXX

kategori

Logo

Logo

Logo Logo

Keranjang

Tampilan Cara Pembayaran

28

Gambar III.5

Rancangan Halaman Member (Kontak Kami)

6. Rancangan Halaman Pengunjung ( Daftar Member )

Halaman daftar Member adalah halaman pendaftaran untuk pengunjung baru

yang ingin menjadi Member agar mendapatkan akses untuk masuk dan

membeli produk yang tersedia. Rancangannya adalah sebagai berikut.

0

……… +

Total : 0

Footer


Daftar Baru

Masuk Ke Tokokain

Password

Username

Login


Header

XXXX

Z XXXX

kategori

Logo

Logo

Logo Logo

Keranjang

Tampilan Kontak Kami

29

Gambar III.6

Rancangan Halaman Pengunjung (Daftar Member)

7. Rancangan Halaman Admin

Merupakan halaman untuk admin yang ingin mengelola Data Produk , yaitu

melakukan input data, edit dan hapus data pada website sehingga data bisa

ter-update,Rancangannya adalah sebagai berikut.

Nama Pelanggan

Username XX99

Password XX99

Alamat

XX99 0

……… +

Total : 0

kota XXXX V

Kode Pos

No telp/hp :

Email

Footer


Daftar Baru

Masuk Ke Tokokain

Password

Username

Login


Header

XXXX

Z XXXX

Kategori

batal simpan

XX99

9999

Logo

9999

Logo

Logo Logo

Keranjang

XX99

Form Data Member

30

Login

XXXX

XXXX

GAMBAR

Gambar III.7

Rancangan Halaman Log in Admin

8. Rancangan Halaman Admin Beranda

Merupakan halaman awal pada halaman admin. Rancangannya adalah sebagai

berikut.

Login Administrator

Username

Password

31

Header

Footer

XXXX Tanggal

XXXX Hari

kalender

Waktu & Kalender

Laporan

Penjualan

Keseluruhan

Menu Admin Home Master Logout

transaksi

Data Pesanan

Data Konfirmasi

Laporan

Gambar III.8

Rancangan Halaman Admin Beranda

9. Rancangan Halaman Admin Produk

Halaman produk admin adalah halaman untuk menambah produk, mengedit

produk, dan menghapus produk. Rancangannya adalah sebagai berikut.

32

XXXX XXXX

9999 9999

Header

Footer

kalender

Waktu & Kalender

Laporan

Penjualan

Keseluruhan


Gambar III.9

Rancangan Halaman Admin Produk

10. Rancangan Halaman Admin Kategori

Halaman kategori admin adalah halaman untuk menambah kategori, mengedit

kategori, dan menghapus kategori. Rancangannya adalah sebagai berikut.

transaksi

Data Pesanan

Data Konfirmasi

Laporan

Data Barang dd-mm-yy

Kode Nama Kategori Detail Harga Gambar Kelola

9999

XXXX

XXXX

9999 Z Z

33

XXXX XXXX

9999 9999

Header

Footer

kalender

Waktu & Kalender

Laporan

Penjualan

Keseluruhan


Gambar III.10

Rancangan Halaman Admin Kategori

11. Rancangan Halaman Admin(Member)

Halaman pelanggan admin adalah halaman untuk menambah pelanggan,

mengedit pelanggan, dan menghapus pelanggan. Rancangannya adalah

sebagai berikut.

transaksi

Data Pesanan

Data Konfirmasi

Laporan

Data Kategori dd-mm-yy

Kode Nama Kategori Gambar Kelola

9999

XXXX

9999

XXXX

Z 9999

34

Footer

Header

kalender

Waktu & Kalender

Laporan

Penjualan

Keseluruhan


Gambar III.11

Rancangan Halaman Admin Member

12. Rancangan Halaman Testimoni

Halaman testimoni admin adalah halaman untuk menghapus testimoni yang

tidak pantas. Rancangannya adalah sebagai berikut.

transaksi

Data Pesanan

Data Konfirmasi

Laporan

Data Member dd-mm-yy

Id member

Nama Member Username Alamat kota Kode Pos telp Email Kelola

9999

XXXX

XXXX

XXXX

XXXX

9999

9999

XX99

XXXX

Z 9999

35

Footer

Header

kalender

Waktu & Kalender

Laporan

Penjualan

Keseluruhan


Gambar III.12

Rancangan Halaman Admin (Testimoni)

13. Rancangan Halaman admin(Pesanan)

Halaman data pesan admin adalah halaman untuk melihat status pesanan

yang di pesan dan dapat menghapus pesanan. Rancangannya adalah sebagai

berikut.

transaksi

Data Pesanan

Data Konfirmasi

Laporan

Data Komentar dd-mm-yy

No Nama

pengirim Email Komentar tampil kelola

9999

XXXX

XX99

XXXX

XXXX

XXXX

Z 9999

36

Footer

Header


Data Pesanan dd-mm-yy

No Id

Pesan Id

member jumbar total Tanggal

pesan Tanggal Kirim Id kota

Status pesan Kelola

xxxx

Z xxxx

Laporan

Penjualan

Keseluruhan

9999 XX99 9999 9999 9999 9999 XXXX 99 99 xxxx

Waktu & Kalender

kalender

Gambar III.13

Rancangan Halaman Admin (Pesanan)

14. Rancangan Halaman Admin(konfirmasi)

Halaman konfirmasi admin adalah halaman untuk merubah status pesanan

yang di pesan dan dapat menghapus pesanan. Rancangannya adalah sebagai

berikut.

transaksi

Data Pesanan

Data Konfirmasi

Laporan

37

Footer

Header

kalender

Waktu & Kalender

Laporan

Penjualan

Keseluruhan

Header

Footer

kalender

Waktu & Kalender

Laporan

Penjualan

Keseluruhan


Gambar III.14

Rancangan Halaman Admin (Konfirmasi)


Gambar III.15

Rancangan Halaman Admin (Detail Konfirmasi)

15. Rancangan Halaman Admin (Laporan)

transaksi

Data Pesanan

Data Konfirmasi

Laporan

Data Konfirmasi dd-mm-yy

No Id_pemesan Nama_pemesan Rek_atas

nama bank kelola

9999

XXXX

XX99

XXXX

XXXX

XXXX

Z 9999

transaksi

Data Pesanan

Data Konfirmasi

Laporan

Detail Konfirmasi dd-mm-yy

Id Pesan Jumlah bayar Tanggal transfer

Bukti transfer kelola

9999

XXXX

XX99

XXXX

XXXX

Z 9999

38

Footer

Header

kalender

Waktu & Kalender

Laporan

Penjualan

Keseluruhan

Halaman ini terdapat data pesanan yang telah berlangsung dari sini kita dapat

mengetahui jumlah subtotal keseluruhan produk yang telah terjual.

Rancangannya adalah sebagai berikut.


Gambar III.16

Rancangan Halaman Admin(Laporan)

16. Rancangan Antar Muka Keranjang Belanja

Halaman ini terdapat data pesanan yang telah dipilih dari sini kita dapat

menghapus produk yang dipilih Rancangannya adalah sebagai berikut

transaksi

Data Pesanan

Data Konfirmasi

Laporan

LAPORAN PENJUALAN KESELURUHAN

TANGGAL TRANSAKSI

NAMA PRODUK JUMLAH TERJUAL SUBTOTAL

9999

XXXX

9999

9999

39

Masuk Ke Tokokain

0

……… +

Total : 0

Footer


Daftar Baru

Password

Username

Login


Header

XXXX

Z XXXX

kategori

Logo

Logo

>>Lanjutkan Transaksi>> << Beli Lagi<<

Logo Logo

Keranjang

Keranjang Belanja

No Nama Barang harga Jumlah Beli Subtotal kelola

9999

XXXX

9999

9999

9999

XXXX

Z Z Z Z Z Z 9999 XXXX 9999 9999 9999 XXXX

Gambar III.17

Rancangan Antarmuka Keranjang Belanja

3.2.2 Rancangan Basis Data

Basis data bertujuan untuk menemukan rancangan website. Rancangan sistem

dimulai dengan perancangan Entity Relationship Diagram (ERD), Logical Relational

Diagram (LRS), Spesifikasi file, Prancangan dan definisi website dimulai dengan

perancangan detail dari halaman yang akan ditampilkan dalam website

40

1. Entity Relationship Diagram (ERD)

Gambar III.18

Entity Relationship Diagram (ERD)

2. Logical Relational Diagram (LRS)

41

Gambar III.19

Logical Relational Diagram (LRS)

3. Spesifikasi file

1 1

1

pesanan

idpesan id_member

jumbar total

tglpesan id_kota

statuspesan tgl_kirim

1 1

detail_pesanan

idpesan id_produk

nama_produk harga jumbel

subtotal

1

1

1

kota

id_kota

nama_kota ongkos_kirim

1 konfirmasi

idpesan nama_pemesan

pemilik_rekening bank

jumlah_bayar tanggal_transfer bukti_transfer

member

id_member nama_member

username password

email alamat

kota kode_pos no_telepon

1

1

Keranjang

1 m

produk

idkeranjang id_member id_produk

nama_produk harga

jumbel subtotal

id_produk id_kategori

nama_produk detail_produk

harga stok

gambar

m

m

1

kategori

id_kategori nama_kategori

gambar

42

Dalam program ini menggunakan satu buah file database dengan nama

pancingku, didalam database tersebut terdapat beberapa tabel yaitu:

1. Nama file : file admin

Akronim : admin

Fungsi : Sebagai tempat penyimpanan data admin

Tipe : file master

Organisasi file : indexed Sequential

Akses file : Random

Media : Hardisk

Panjang Record : 142 karakter

Kunci field : id_admin

Software : Mysql

Tabel III.1

Spesifikasi file admin

No Element Data Akronim type size Keterangan

1 Id_admin Id_admin integer 2 Primary key

2 Nama_admin Nama_admin varchar 40

3 Username_admin Username_admin varchar 50

4 Password Password_admin varchar 50

2. Nama file : file detail pesanan

43

Akronim : detail_pesanan

Fungsi : Sebagai tempat penyimpanan data pesanan

Tipe : file pesanan


Akses file : Random

Media : Hardisk


Software : Mysql

Tabel III.2

Spesifikasi file detail pesanan

No Element Data Akronim Type size Keterangan

1 Idpesan Idpesan varchar 5

2 Id_produk Id_produk varchar 3

3 Nama_produk Nama_produk varchar 50

4 harga Harga integer 11

5 jumbel Jumbel integer 11

6 Subtotal Subtotal Double

3. Nama file : file kategori

Akronim : kategori

44

Fungsi : Sebagai tempat penyimpanan, mengubah dan

menghapus kategori

Tipe : file master


Akses file : Random

Media : Hardisk


Kunci field : id_kategori

Software : Mysql

Tabel III.3

Spesifikasi file kategori


1 Id_kategori Id_kategori Integer 2 Primary key

2 Nama_kategori Nama_kategori Varchar 50

3 gambar Gambar Text

4. Nama file : file keranjang

Akronim : keranjang

Fungsi : Sebagai tempat penyimpanan data barang

member sementara

Tipe : file master


45

Akses file : Random

Media : Hardisk


Kunci field : idkeranjang

Software : Mysql

Tabel III.4

Spesifikasi file keranjang


1 Idkeranjang Idkeranjang Integer 4 Primary key

2 Id_member Id_member varchar 4

3 id_produk Id_produk varchar 4

4 Nama_produk Nama_produk varchar 50

5 harga Harga Integer 11

6 jumbel Jumbel Double 11

7 subtotal Subtotal Double

5. Nama file : file konfirmasi

Akronim : konfirmasi

Fungsi : Sebagai tempat penyimpanan data bukti

pembayaran

Tipe : file master


Akses file : Random

46

Media : Hardisk


Kunci field : id_pesan

Software : Mysql

Tabel III.5

Spesifikasi file konfirmasi


1 Idpesan Idpesan Varchar 5 Primary key

2 Nama_pemesan nama_pemesan Varchar 50

3 Pemilik_rekening Pemilik_rekening Varchar 30

4 bank Bank Varchar 30

5 Jumlah_bayar Jumlah_bayar integer 11

6 Tanggal_transfer Tanggal_transfer Date

7 Bukti_transfer Bukti_transfer Text

6. Nama file : file kota

Akronim : kota

Fungsi : Sebagai tempat penyimpanan data kota

Tipe : file master


Akses file : Random

Media : Hardisk

47


Kunci field : id_kota

Software : Mysql

Tabel III.6

Spesifikasi file kota

No Element Data Akronim Type Size Keterangan

1 Id_kota Id_kota Integer 5 Primary key

2 Nama_kota Nama_kota Varchar 30

3 Ongkos_kirim Ongkos_kirim Integer 6

7. Nama file : file member

Akronim : member

Fungsi : Sebagai tempat penyimpanan data member

Tipe : file master


Akses file : Random

Media : Hardisk


Kunci field : id_member

Software : Mysql

48

Tabel III.7

Spesifikasi file member


1 Id_member Id_member Integer 4 Primary key

2 Nama_member Nama_member Varchar 50

3 Username Username Varchar 50

4 Password Password Varchar 50

5 Email Email Varchar 50

6 Alamat Alamat Text

7 Kota Kota Varchar 30

8 Kode_pos Kode_pos Integer 5

9 No_telpon No_telpon Integer 12

8. Nama file : file pesanan

Akronim : pesanan

Fungsi : Sebagai tempat penyimpanan data pesanan

Tipe : file pesanan


Akses file : Random

Media : Hardisk


Kunci field : idpesanan

Software : Mysql

49

Tabel III.8

Spesifikasi file pesanan


1 Idpesanan Idpesan Varchar 5 Primary key

2 id_member id_member Integer 4

3 Jumbar Jumbar Integer 11

4 Total Total Double

5 tglpesan Tglpesan Varchar 30

6 Id_kota Id_kota Int 5

7 Statuspesan Statuspesan Varchar 50

8 Tgl_kirim Tgl_kirim Date

9. Nama file : file produk

Akronim : produk

Fungsi : Sebagai tempat penyimpanan data produk

Tipe : file master


Akses file : Random

Media : Hardisk


Kunci field : id_produk

Software : Mysql

50

Tabel III.9

Spesifikasi file produk


1 Id_produk Id_produk Integer 4 Primary key

2 id_kategori id_kategori Integer 2

3 Nama_produk Nama_produk Varchar 50

4 Detail_produk Detail_produk Text

5 Harga Harga Integer 11

6 Stok Stok Integer 3

7 Gambar Gambar Text

10. Nama file : file testimoni

Akronim : testimoni

Fungsi : Sebagai tempat penyimpanan data testimoni

Tipe : file master


Akses file : Random

Media : Hardisk


Kunci field : id_testimoni

Software : Mysql

51

Tabel III.9

Spesifikasi file testimoni


1 Id_testimoni Id_testimoni Integer 3 Primary key

2 Nama Nama Varchar 50

3 Email Email Varchar 50

4 Komentar Komentar Text

5 Tampil Tampil Enum(‘Y’,’N’)

3.2.3. Rancangan Struktur Navigasi

Struktur navigasi merupakan susunan menu atau hirarki dari situs yang

menggambarkan isi dari setiap halaman dan link atau navigasi tiap halaman

pada suatu situs web. Struktur navigasi pada situs web sangat dipengaruhi

oleh tujuan dari situs web yang akan dibuat. Struktur navigasi yang

digunakan dalam pembuatan website penjualan ini menggunakan struktur

navigasi campuran. Perancangan website akademik ini mempunyai struktur

navigasi sebagai berikut:

52

A. Struktur Navigasi Halaman Admin

Gambar III.20

Struktur Navigasi Halaman Admin

laporan

data member

Laporan penjualan

keseluruhan

data testimoni data kota

data konfirmasi data

pesanan

home

logout login

data produk

data kategori

data admin

master transaksi

Index

53

Cara Pembelian

Cara Pembayaran

Kontak kami


Lanjut transaksi

Detail

Kembali

Beranda

Beli Keranjang

Kembali Pilih Kategori

Kategori

Testimoni Produk

B. Struktur Navigasi Halaman Member

daftar logout

Gambar III.21

Struktur Navigasi Halaman Member

3.3. Implementasi dan Pengujian Unit

3.3.1. Implementasi

Implementasi dalam pembuatan toko kain bahan berbasis web ini terbagi

menjadi dua diantaranya adalah implementasi antar muka dan

implementasi spesifikasi sistem komputer.

A. Implementasi rancangan antar muka

login

Index_umum

54

a

l

a

m

a

n

d

e

Pada implementasi rancangan antar muka memiliki banyak halaman,

diantaranya adalah sebagai berikut.

1. Halaman login Admin

Gambar III.22

Implementasi Halaman Depan Login Admin

2. H

pan admin home

55

Gambar III.23

Implementasi Halaman Depan Admin Home

3. Halaman depan admin data pesan

Gambar III.24

Implementasi Halaman Depan Admin Data Pesan

4. Halaman depan admin penjualan keseluruhan

56

Gambar III.25

Implementasi Halaman Depan Admin Penjualan Keseluruhan

5. Halaman depan admin data admin

Gambar III.26

Implementasi Halaman Depan Admin Data Admin

6. Halaman depan admin data kategori

57

Gambar III.27

Implementasi Halaman Depan Admin Data Kategori

7. Halaman depan admin data produk

Gambar III.28

Implementasi Halaman Depan Admin Data Produk

8. Halaman depan admin data member

58

Gambar III.29

Implementasi Halaman Depan Admin Data Member

9. Hlaaman depan admin data testimoni

Gambar III.30

Implementasi Halaman Depan Admin Data Testimoni

10. Halaman depan admin data kota

59

Gambar III.31

Implementasi Halaman Depan Admin Data Kota

11. Halaman depan admin data kota

Gambar III.32

60

Implementasi Halaman Depan Index User

B. Implementasi Spesifikasi Sistem Komputer

Berikut ini adalah spesifikasi perangkat keras dan perangkat lunak minimum

yang dibutuhkan untuk mengimplementasikan website pancingku ini.

1. Spesifikasi Perangkat Keras

a. Server

1) Intel(R) Core(TM) i3-2350M CPU @2.30GHz (4 CPUs), ~2,3GHz

2) RAM 4 GB

3) Hard Disk 500 GB

4) Mouse Logitech

5) Keybord Asus

6) Monitor Asus 1366x768 Screen

7) Koneksi internet dengan kecepatan 6Mbps.

b. Server

1) Intel(R) Core(TM) i3-2350M CPU @2.30GHz (4 CPUs), ~2,3GHz

2) RAM 4 GB

3) Hard Disk 500 GB

4) Mouse Logitech

5) Keybord Asus

6) Monitor Asus 1366x768 Screen

7) Koneksi internet dengan kecepatan 6Mbps.

2. Spesifikasi Perangkat Lunak

61

1) Operating Sistem : Windows 7 Ultimate 64-bit (6.1, Build 7601)

2) Web Editor : Adobe Dreamweaver CS 5.5

3) Bahasa Script : PHP,CSS

4) Web Server : Xampp 1.7.7

5) Web Browser : Mozilla Firefox 54.0.1 (32-bit)

6) Database server : Mysql 5.5.16

7) Database Tools : phpMyAdmin 5.3.8

3.3.2. Pengujian Unit

Pengujian terhadap program yang dibuat menggunakan blackbox testing yang

fokus terhadap proses masukan dan keluaran program.

Tabel III.10

Pengujian Terhadap Login Admin

No. Skenario

Pengujian

Test Case Hasil yang

diharapkan

Hasil Kesimpulan

1 Username Username: Sistem akan

Sesuai

harapan

dan (kosong) menolak user

password Password: dan

tidak diisi (kosong) menampilkan Valid kemudian “username

klik tombol harus di isi”

login

62


diisi dan admin menolak user

password

tidak diisi

Password:

(kosong)

dan

menampilkan

Sesuai

harapan Valid

kemudian “Password

klik login harus di isi”


tidak diisi (kosong) menolak user

dan Password: dan

password

diisi

tito menampilkan

“username

Sesuai

harapan Valid

kemudian harus di isi”

klik tombol

login

Username Username: Sistem akan

atau admin menolak user

password Password: dan

salah

kemudian

klik tombol

(salah) menampilkan

“Username

atau Password

Sesuai

harapan

Valid

login salah,

Silahkan coba

lagi”


dan admin menerima

password Password: akses login

diisi

kemudian

tito dan kemudian

menampilkan

Sesuai

harapan Valid

klik tombol halaman

login admin (Home

Admin)

Tabel III.11

Pengujian terhadap login Member

63

No. Skenario

Pengujian

Test Case Hasil yang

diharapkan

Hasil Kesimpulan

1 Username

dan

password

tidak diisi

kemudian

klik tombol

login

Username:

(kosong)

Password:

(kosong)

Sistem akan

menolak user

dan

menampilkan

“Isi isian ini”

pada kolom

username

Sesuai

harapan

Valid

2 Username

diisi dan

password

tidak diisi

kemudian

klik login

Username:

tito

Password:

(kosong)

Sistem akan

menolak user

dan

menampilkan

“Isi isian ini”

pada kolom

password

Sesuai

harapan

Valid

3 Username

tidak diisi

dan

password

diisi

kemudian

klik tombol

login

Username:

(kosong)

Password:

tito

Sistem akan

menolak user

dan

menampilkan

“Isi isian ini”

pada kolom

username

Sesuai

harapan

Valid

4 Username

dan

password

diisi

kemudian

klik tombol

login

Username:

tito

Password:

tito

Sistem akan

menerima

akses login

dan kemudian

menampilkan

pesan”

Selamat

Datang...!!!

Sesuai

harapan

Valid

BAB IV

PENUTUP

4.1 Kesimpulan

Berdasarkan dari pembahasan pada bab-bab sebelumnya, dapat di simpulkan

bahwa tujuan dari pembuatan website ini adalah:

1. Menjual Produk kain bahan etnik untuk wilayah jabodetabek secara online.

2. Memberikan kemudahan pada setiap member untuk berbelanja tanpa harus

menggunakan kartu kredit dan membeli secara langsung melalui toko.

3. Pihak perusahaan dapat lebih mudah dalam menyajikan informasi tentang

penjualan.

4. Mempermudah dalam pencarian data-data.

5. Memberikan kemudahan dalam pembuatan laporan penjualan.

4.2 Saran

Dikarenakan dalam perancangannya penulis merasa masih banyak

kekurangan, dan demi terciptanya sebuah website yang sempurna dan berjalan

sesuai dengan apa yang diharapkan, maka ada beberapa hal yang akan diajukan

oleh penulis untuk menjadi saran bagi pengembangan website untuk kedapannya.

1. Menambahkan fitur tampilan seperti penggunaan flash object agar tampilan

website lebih menarik dan interaktif

2. Pengamanan terhadap data-data pada server agar selalu dijaga dan

diperhatikan, supaya tidak bisa diakses oleh orang-orang yang tidak

bertanggung jawab.

64

65

3. Memberikan kemudahan bagi konsumen untuk menghubungi admin secara

online (langsung) dengan menggunakan aplikasi costumer service online,

yang bisa berhubungan langsung dengan admin tanpa perlu menunggu

balasan email dari admin.

4. Admin juga harus selalu melakukan back up data-data yang sangat penting

agar data tersebut terhindar dari kerusakan maupun kehilangan.

5. Memberikan kemudahan bagi member dalam proses pemilihan pembayaran

yang lebih variatif.

DAFTAR PUSTAKA

Abdulloh, Rohi. 2015. Web Progamming is Easy. Jakarta: PT. Elex Media

Komputindo.

Anhar. 2010. Panduan Mengusai Php & MySql. Jakarta: Media Kita.

Ardhana, YM Kusuma. 2012. Menyelesaikan Website 30 Juta. Jakarta: Jasakom.

Binanto, Iwan. 2010. Multimedia Digital Dasar Teori dan Pengembangannya.

Yogyakarta. Andi.

Connolly, Thomas and Begg Carolyn. 2010. Database Systems: A Practical

Approach to Design, Implementation, and Management. Boston: Fifth

Edition. Pearson Education.

Indrajani. 2007. Pemrogaman Berbasis Objek dengan Bahasa Java. Jakarta: PT.

Elex Media Komputindo.

Saleh, Sulistyawan dan Rubianto Rahmad. 2008. Modifikasi Blog Mutiply dengan

CSS. Jakarta: PT.Media Elex Komputindo.

Sibero, FK Alexander. 2011. Kitab Suci Web Programing. Yogyakarta:

Mediakom.

Simarmata, Janner dan Iman Prayudi. Basis Data. Yogyakarta: CV Andi Offset.

Sommerville, Ian. 2007. Software Engineneering, Eight Edition. Harlow: Pearson

Education Limited.

Sukamto, Rosa A dan M Shalahuddin. 2013. Rekayasa Perangkat Lunak.

Bandung: Informatika.

Wicaksono, Yogi. 2008. Membangun Bisnis Online dengan Mambo. Jakarta: PT.

Elex Media Komputindo.

Yakub. 2008. Sistem Basis Data Tutorial Konseptual. Yogyakarta: Graha Ilmu.

66

tugas akhir - bina sarana informatika · penjualan kain bahan berbasis web ini dibuat untuk...

Documents