PERANCANGAN DAN IMPLEMENTASI E-COMMERCE BERBASIS WEB (STUDI KASUS: HORN MUSIC MERCH DISTRO)

Skripsi

untuk memenuhi sebagian persyaratan mencapai derajat Sarjana S-1

Diajukan oleh Hilman Yuliansyah NIM: 20120140034

PROGRAM STUDI TEKNOLOGI INFORMASI FAKULTAS TEKNIK

UNIVERSITAS MUHAMMADIYAH YOGYAKARTA 2016

v

barokahnya sehingga penulis dapat menyelesaikan skripsi dengan judul “ Perancangan dan Implemtasi E-commerce Berbasis Web (Studi Kasus : Horn Music Merch Distro)”. Laporan skripsi disusun untuk memenuhi salah satu syarat dalam memperoleh gelar Sarjana Teknik (S.T) pada Program Studi S1 Teknologi Informasi Universitas Muhammadiyah Yogyakarta.

Dalam melakukan penelitian dan penyusunan laporan skripsi penulis telah mendapatkan banyak dukungan dan bantuan dari berbagai pihak. Penulis mengucapkan terima kasih yang tak terhingga kepada:

1. Haris Setyawan, S.T.,M.Eng. selaku pembimbing utama yang telah membimbing penulis dengan kesabaran dan ketulusan dalam pengembangan sistem.

2. Aprilia Kurnianti, S.T., M.Eng. selaku pembimbing pendamping yang telah meluangkan waktu dan sangat sabar membimbing penulis dalam pembuatan skripsi.

3. Dr. Ir. Dwijoko Purbohadi, S.T., M.T. selaku dosen penguji yang telah memberikan masukan yang berarti pada saat pendadaran atau sidang skripsi. 4. Muhammad Helmi Zain Nuri, S.T., M.T. selaku ketua Program Studi S1

Teknologi Informasi yang memberikan izin kepada penulis untuk belajar. 5. Para dosen Jurusan Teknologi Informasi Universitas Muhammadiyah

Yogyakarta, Bapak Asroni, Bapak Eko, Bapak Giga, Bapak Slamet, dan Bapak Okto yang telah memberikan tambahan pengetahuan dan mengajarakan ilmunya kepada penulis selama perkuliahan.

6. Ayah dan Ibu yang dari lahir sampai sekarang selalu memberikan kasih sayang, cinta kasihnya, memberikan dukungan, doa, dan selalu memberikan perhatian tiada hentinya kepada penulis sehingga penulis dapat mencapai ke tahap sekarang.

vi

cita, suka duka, dan pengalaman selama kuliah di Fakultas Teknik.

8. Terima kasih buat sahabat-sahabat penulis Geri, Reza, Haris, Retno, Maulana, Thoriq, lutfi, dan adik Weni yang telah mendukung dan memberi semangat kepada penulis.

9. Terima kasih buat kakak dan abangku Rahmat, Rohmana, Rizki, Luthfia, dan Fizela yang telah memberi semangat kepada penulis.

vii

Usaha Penjualan Horn Music Merch merupakan salah satu toko penjualan baju, tas, dan topi yang memiliki kesulitan untuk mempromosikan produk-produknya, dan mempermudah pembeli untuk tidak berbelanja langsung ketoko penjualan. Toko ini membutuhkan sebuah web untuk mempermudah penjualan. Dalam skripsi dirancang sebuah website penjualan dengan spesifikasi dapat menampilkan produk, harga, biaya pengiriman, total biaya, dan laporan penjualan. Sistem informasi penjualan ini diharapkan menjadi metode alternatif dalam melakukan promosi dan transaksi pembelian yang lebih mudah, efektif dan efisien. Sistem ini terfokus pada member (pelanggan) dan admin. Fitur yang dapat diakses oleh pelanggan setelah melakukan pendaftaran dan login yaitu melakukan proses pemesanan. Perancangan dilakukan menggunakan tool software Xampp. Pembuatam sistem penjualan ini memudahkan pelanggan dalam melakukan proses pembelian serta memudahkan pemilik toko dalam melakukan promosi produknya lebih efektif dan efisien.

ix

HALAMAN PENGESAHAN II ... iii

PERNYATAAN ... iv

PRAKATA ... v

INTISARI ... vii

ABSTRAK ... viii

DAFTAR ISI ... ix

DAFTAR GAMBAR ... xii

DAFTAR TABEL ... xiv

BAB I PENDAHULUAN ... 1

1.1 Latar Belakang ... 1

1.2 Rumusan Masalah ... 2

1.3 Tujuan Penelitian ... 2

1.4 Manfaat Penelitian ... 2

1.5 Sistematika Penulisan ... 3

BAB II TINJAUAN PUSTAKA ... 4

2.1 Tinjauan Pustaka ... 4

2.2 Landasan Teori... 5

2.2.1 Sistem ... 5

2.2.2 Website ... 5

2.2.3 E-commerce ... 6

2.2.4 Internet ... 6

2.2.5 PHP ... 7

2.2.6 PhpMyAdmin ... 7

2.2.7 Web Server ... 7

2.2.8 UML ... 8

a. Use Case Diagram ... 8

b. Activity Diagram ... 10

c. Class Diagram ... 12

x

2.6 Pengujian Black Box ... 15

BAB III METODOLOGI PENELITIAN... 16

3.1 Peralatan Pendukung ... 16

3.2 Perangkat Keras ... 16

3.3 Perangkat Lunak ... 16

3.4 Bahan Penelitian ... 16

3.4.1 Studi Literatur ... 16

3.4.2 Wawancara ... 16

3.4.3 Observasi ... 17

3.5 Langkah Penelitian... 17

3.6 Sistem Sedang Berjalan di DISTRO ... 18

3.6.1 Analisis Pembelian ... 18

3.6.2 Analisis Proses Laporan ... 19

3.7 Analisis Kebutuhan Fungsional dan Non Fungsional ... 19

3.7.1 Kebutuhan Fungsional ... 19

3.7.2 Kebutuhan Non Fungsional ... 19

3.8 Perancangan Sistem ... 19

3.9 Perancangan Proses ... 21

3.9.1 Use Case Diagram ... 21

3.9.2 Activity Diagram ... 23

3.10 Perancangan Basis Data ... 23

3.10.1 Entity Relationship Diagram (ERD) ... 23

3.10.2 Class Diagram ... 27

3.11 Perancangan Interface ... 29

3.11.1 Rancangan Antar Muka Halaman Utama ... 30

3.11.2 Rancangan Antarmuka Halaman Produk ... 30

3.11.3 Rancangan Antarmuka Halaman Member Baru ... 32

3.11.4 Rancangan Antarmuka Halaman Registrasi Aktifasi ... 33

3.11.5 Rancangan Antarmuka Halaman Login Member ... 34

3.11.6 Rancangan Antarmuka Akun Member ... 35

3.11.7 Rancangan Antarmuka Halaman Barang ... 36

xi

3.11.11 Rancangan Antarmuka Halaman Detail Pesanan Berhasil ... 40

3.11.12 Rancangan Antarmuka Halaman Riwayat Pemesanan... 41

3.11.13 Rancangan Antarmuka Halaman Kontak ... 42

3.11.14 Rancangan Antarmuka Halaman Login admin... 43

3.11.15 Rancangan Antarmuka Halaman Utama Admin ... 44

3.11.16 Rancangan Antarmuka Halaman Laporan Penjualan ... 45

BAB IV HASIL DAN PEMBAHASAN ... 46

4.1 Pembangunan Sistem ... 46

4.1.1 Instalasi Aplikasi Server ... 46

4.1.2 Pembuatan Database ... 47

4.2 Antarmuka... 48

4.2.1 Halaman Utama ... 48

4.2.2 Halaman Registrasi Member ... 48

4.2.3 Halaman Akun Member ... 49

4.2.4 Halaman Login ... 50

4.2.5 Halaman Daftar Member ... 50

4.2.6 Halaman Kategori Barang ... 51

4.2.7 Halaman List Barang ... 51

4.2.8 Halaman Data Pesanan ... 52

4.2.9 Halaman Detail Pesanan ... 52

4.2.10 Halaman Data Member ... 53

4.2.11 Halaman Data Member ... 53

4.2.12 Halaman Laporan Penjualan ... 54

4.3 Pengujian Sistem ... 54

4.4 Pembahasan... 61

BAB V KESIMPULAN DAN SARAN ... 63

5.1 Peralatan Pendukung ... 63

5.2 Saran ... 63

DAFTAR PUSTAKA ... 64

xii

Gambar 2.1. Simbol-simbol ERD ... 14

Gambar 2.2. Metode Waterfall ... 14

Gambar 3.1. Metode Waterfall ... 17

Gambar 3.2. Arsitektur Sistem yang Diusulkan ... 20

Gambar 3.3. Use Case Diagram ... 22

Gambar 3.4. Activity diagram Aplikasi ... 23

Gambar 3.5. Entity Relationship Diagram (ERD) ... 24

Gambar 3.6. Class Diagram Aplikasi ... 29

Gambar 3.7. Rancangan Halam Utama ... 30

Gambar 3.8. Halaman Utama ... 31

Gambar 3.9. Rancangan Antarmuka Halaman Member Baru ... 32

Gambar 3.10. Rancangan Antarmuka Halaman Registrasi aktifasi ... 33

Gambar 3.11. Rancangan Antarmuka Halaman Login Member ... 34

Gambar 3.12. Rancangan Antarmuka akun member ... 35

Gambar 3.13. Rancangan Antarmuka Halaman Barang ... 36

Gambar 3.14. Rancangan Antarmuka Halaman Keranjang pembelian ... 37

Gambar 3.15. Rancangan Antarmuka Halaman Jasa Pengiriman ... 38

Gambar 3.16. Rancangan Antarmuka Halaman Detail Pesanan ... 39

Gambar 3.17. Rancangan Antarmuka Halaman Detail Pesanan Berhasil ... 40

Gambar 3.18. Rancangan Antarmuka Halaman Riwayat Pemesanan ... 41

Gambar 3.19. Rancangan Antarmuka Halaman Kontak ... 42

Gambar 3.20. Rancangan Antarmuka Halaman Login Admin ... 43

Gambar 3.21. Rancangan Antarmuka Halaman Utama Admin ... 44

Gambar 3.22. Rancangan Antarmuka Halaman Laporan Penjualan ... 45

Gambar 4.1. Running Apache dan MySQL ... 46

Gambar 4.2. Pembuatan Database dengan phpMyAdmin ... 47

Gambar 4.3. Halaman Utama Website ... 48

Gambar 4.4. Halaman Registrasi Member ... 49

Gambar 4.5. Halaman Akun Member ... 49

Gambar 4.6. Halaman Login Admin ... 50

Gambar 4.7. Halaman Daftar Member ... 50

xiii

Gambar 4.11. Halaman Detail Pesanan ... 52

Gambar 4.12. Halaman Data Member ... 53

Gambar 4.13. Halaman Data Member ... 54

xiv

Tabel 2.1. Keterangan simbolis usecase. ... 9

Tabel 2.1. Keterangan simbolis usecase. ... 10

Tabel 2.2. Tabel keterangan simbolis activity diagram ... 10

Tabel 2.2. Tabel keterangan simbolis activity diagram ... 11

Tabel 2.3. Tabel keterangn simbolis class diagram ... 12

Table 2.3. Tabel keterangn simbolis class diagram ... 13

Tabel 3.1. Keterangan komponen Arsitektur. ... 20

Tabel 3.1. Keterangan Komponen Arsitektur. ... 21

Tabel 3.2. Struktur Tabel Admin ... 25

Tabel 3.3. Struktur Tabel Member ... 25

Tabel 3.4. Struktur TabelBarang ... 26

Tabel 3.5. Struktur TabelKategori... 26

Tabel 3.6. Struktur TabelSatuan ... 26

Tabel 3.7. Struktur Tabel Order ... 26

Tabel 3.8. Struktur TabelPengiriman ... 27

Tabel 3.9. Struktur TabelGambar ... 27

viii

bags, and hats that have difficulties to promote its products, and easier for buyers to not shop immediately to the store sales. This shop need a web for facilitate sales. In this thesis designing a sales website with specification can display some product, price, delivery cost, total cost, and sales report. This sales information system is expected to become an alternative method in promotion and easier for purchase transactions, effective and efficient. This system focuses on the member (customer) and admin. Features that can be accessed by customers after registration and login namely the process of booking. The design is done using tool software Xampp. Making this sales system facilitate costumers in the process of purchasing and facilitate the shop owner in promoting their product more effectively and efficiently.

1

hal penting pada sebuah institusi atau universitas, karena dengan adanya penyampaian aspirasi tersebut sebuah universitas dapat dengan mudah memperbaiki dan meningkatkan kualitasnya.

Pengaduan mahasiswa merupakan suatu bentuk partisipasi mahasiswa agar penyedia layanan universitas yang dapat menampung keluhan dari mahasiswa. Hal tersebut dilakukan dengan tujuan agar pihak terkait dapat memperhatikan apa yang menjadi kebutuhan mahasiswa sehingga tercipta pelayanan yang lebih baik.

Fakultas Teknik Universitas Muhammadiyah Yogyakarta merupakan salah satu fakultas yang terdiri dari ribuan mahasiswa, sehingga wajar saja jika Fakultas Teknik Muhammadiyah Yogyakarta mendapatkan banyak aspirasi atau keluhan tentang sarana atau prasarana yang ada. Saat ini, FT UMY menerima keluhan melalui forum diskusi atau mendengar dari mahasiswa secara langsung. Forum diskusi tersebut dinamakan acarapublic hearing.Acara ini diselenggarakan secara berkala oleh himpunan mahasiswa. Dalam acara tersebut, mahasiswa dapat menyampaikan aspirasi, keluhan, masukan atau kritikan kepada pimpinan program studi atau fakultas. Acara tersebut bersifat terbuka seluruh mahasiswa dan dosen diharapkan hadir.

Acara public hearingtersebut sudah cukup baik, karena secara psikologis mahasiswa merasa diperhatikan. Keluhan mahasiswa bisa langsung ditanggapi, sehingga dapat mengurangi salah paham. Pimpinan segera tahu masalah-masalah yang dialami oleh mahasiswa. Meskipun demikian, acara tersebut memiliki keterbatasan, antara lain:

1. Waktunya terbatas, sehingga kemungkinan besar banyak mahasiswa yang ingin menyampaikan tidak diberi kesempatan untuk menyampaikan.

2. Ada sebagian mahasiswa yang merasa kurang nyaman jika berbicara di depan forum sehingga rasa penasaran mereka tidak tersampaikan. Hal ini dapat memicu persoalan baru di kalangan mahasiswa karena mahasiswa tersebut mengambil cara-cara yang kurang bijaksana atau tidak wajar.

3. Catatan kurang sempurna karena orang yang mencatat memiliki keterbatasan mengingat dan mencatat, sehingga keluhan yang disampaikan dan tanggapan yang diberikan tidak tercatat dengan sempurna. Ada kemungkinan beberapa informasi penting yang tidak tercatat.

Kritikan, keluhan, masukan, atau saran yang disampaikan bisa ditanggapi dengan penjelasan atau ditampung karena membutuhkan banyak langkah untuk menyelesaikan. Jika hal-hal yang disampaikan mahasiswa harus ditampung terlebih dahulu perlu adanya sistem yang sesuai. Sistem ini harus mampu menampung kritikan, keluhan, masukan, atau saran dari mahasiswa secara mudah. Selain itu, sistem ini harus mudah digunakan, mampu mencatat keluhan, mampu menampilkan kemajuan atau tindakan apa yang telah dilakukan oleh program studi. Sistem juga harus dapat menyampaikan informasi dalam bentuk laporan untuk pengelola program studi.

1.1.1 Rumusan Masalah

Meninjau pokok permasalahan yang telah diuraikan pada latar belakang di atas maka dapat diambil rumusan masalah sebagai berikut:

1. Pengaduan melaluipublic hearingwaktunya terbatas. 2. Belum semua pengaduan tertampung dengan baik.

3. Pencatatan pengaduan atau aspirasi mahasiswa masih manual, sehingga kemungkinan besar ada informasi yang hilang.

1.2 Tujuan Penelitian

Tujuan penelitian diantaranya adalah sebagai berikut:

1. Membuat sebuah program aplikasi yang mampu menampung pengaduan secara online, mencatat kemajuan penanganan, mencatat dan menampilkan tanggapan, serta memudahkan administrator dalam membuat laporan.

1.3 Manfaat Penelitian

Jika sistem mampu memperbaiki cara-cara penyampaian keluhan, kritikan, masukan, dan saran dari mahasiswa maka manfaat bagi program studi FT UMY adalah:

1. Mahasiswa merasa diperhatikan sehingga masalah-masalah yang tidak ada hubungannya dengan kegiatan akademik dapat ditekan. 2. Hubungan harmonis antara mahasiswa dengan sesama

mahasiswa, dosen, karyawan dan pimpinan dapat ditingkatkan. 3. Kehidupan akademik lebih kondusif sehingga motivasi belajar

mahasiswa semakin meningkat. 1.4 Sistematika Penulisan

Sistematika laporan penelitian disusun dalam lima bab yang membahas beberapa hal sebagai berikut:

BAB I: PENDAHULUAN

Bab pendahuluan berisi penjelasan mengenai pendahuluan dari penelitian yang meliputi latar belakang permasalahan, rumusan masalah, tujuan, maksud dan sistematika penulisan yang dgunakan pembutan tugas akhir.

BAB II: TINJAUAN PUSTAKA DAN LANDASAN TEORI

Bab tinjauan pustaka dan landasan teori berisi penjelasan tentang kajian pustaka dan teori-teori penunjang yang digunakan sabagai dalam penelitian, yaitu konsep dan teknologi dalam pangkalan data dan segala sesuatu yang berhubungan dengan topik penelitian ini seperti hal-hal yang

berkaitan dengan metadata dalam pangkalan data. BAB III: METODOLOGI PENELITIAN

Bab metodologi penelitian berisi penjelasan metode dan tools yang digunakan untuk merancang sistem dapat diimplementasikan dalam sistem yang sesuai harapan, mengacu pada teori-teori penunjang yang sudah dijelaskan pada bab II.

BAB IV: HASIL DAN PEMBAHASAN

Bab hasil dan pembahasan berisi penjelasan mengenai hasil yang diperoleh dari seluruh penelitian dan dilakukan pengujian terhadap hasil implementasi sistem kemudian menganalisa kedalam sistem sesuai dengan penrancangan pada bab-bab sebelumnya.

BAB V: KESIMPULAN DAN SARAN

Bab kesimpulan dan saran merupakan penutup yang berisi kesimpulan dan saran yang diambil dari penelitian dan saran untuk pengembangan lebih lanjut.

4

penelitian-penelitian terdahulu menjadi bahan acuan dan kajian terhadap penelitian yang dilakukan saat ini. Kajian yang diperoleh dapat dijadikan acuan perbandingan yang sesuai dengan topik penelitian, yaitu mengenai sistem perancangan dan implementasie-commerceberbasiswebsite yang digunakan sebagai media promosi bisnis di suatu organisasi atau perusahaan.

Untuk meningkatkan kinerja bisnis pada suatu perusahaan, dibutuhkan

website e-commerce yang bertujuan untuk mempermudah dan mempercepat

transaksi pembelian dan mempermudah konsumen dalam bertransaksi tanpa perlu datang langsung ke toko yang dituju (Djamal Bachmid, 2011). Penelitian yang dilakukan oleh Djamal Bachmid ini berjudul “Pembuatan Website E-Commerce

pada toko Jawa Tren Menggunakan PHP dan MySQL”.

“Pengembangan Sistem Informasi Manajemen Order Satoedjari Merch

Menggunakan Model eXtreme Programing” (Iqbal, 2015). Penelitian tersebut bertujuan untuk memudahkan Satoedjari Merch dalam mengelola order yang sebelumnya masih dilakukan dengan cara manual dengan mengembangkan sistem informasi manajemen order yang dapat mengelola order, harga jual produk, pengeluaran dan laporan keuangan berupa laporan pendapatan, pengeluaran dan profit. Sistem ini dibangun mengunakan metode eXtreme programming, bahasa pemrograman PHP dan databaseMySQL.

Deffi Rosdiana Sari (2014) juga melakukan penelitian dengan judul “Membangun Aplikasi Sistem Pemesanan dan Pembayaran Sewa Mobil Online

Berbasis Web pada Studi Kasus di Rental Daras Corporation” mengenai Web

Company profilebeserta sistem pemesanan dan pembayarannya. Persamaan yang

ada pada penelitian kali ini dan yang sebelumnya adalah sama-sama mengembangkanwebmenggunakanapache, PHP dan MySQL untuk implementasi

penelitian yang sekarang menggunakan XAMPP sedangkan pada penelitian sebelumnya menggunakan WAMP sebagai web server nya. Sedangkan pada penelitian David Setyawan (2015) dengan judul “PerancanganWeb Mobilesebagai Media Pemasaran pada I-CLUBMadiun menggunakan JQuerymobile” penelitian yang dikembangkan adalah pembuatanwebsitesebagai media pemasaran berbasis

web mobile. Persamaan penelitian yang terdahulu dan sekarang adalah sama-sama

membuat website sebagai media pemasaran atau e-marketing untuk memperluas jangkauan pemasaran. Perbedaan penelitan yang terdahulu dengan yang sekarang terletak pada sistem yang dikembangkan. Pada website yang ada pada penelitian terdahulu hanya untukweb mobilepadasmartphonedan belum bisa menjadi sistem

websitepadadesktop.

Setelah membandingkan penelitian-penelitian terdahulu dapat disimpulkan bahwa persamaannya adalah sama-sama membuat aplikasi berbasis web sebagai media pemasaran atau promosi online yang memudahkan konsumen untuk mendapatkan informasi terbaru. Sedangkan perbedaannya adalah aplikasi berbasis

web ini dibangun dengan konsep bahasa pemrograman PHP dan database

menggunakan MySQL serta XAMPP sebagai web servernya selain itu untuk mengembangkan desainwebyang lebihuser friendlydan menarik maka digunakan HTML5 Responsive dan css sebagai pelengkap desain web yang dapat dibuka melalui berbagaideviceatau perangkat.

1.2 Landasan Teori 1.2.1 Sistem

Sistem menurut Abdul Kadir (2002: 54)“Sistem adalah sekumpulan elemen yang saling berkaitan atau terpadu yang dimaksudkan untuk mencapai suatu tujuan”.Sebagai gambaran, jika dalam sebuah sistem terdapat elemen yang tidak memberikan manfaat dalam mencapai tujuan yang sama, maka elemen tersebut dapat dipastikan bukanlah bagian dari sistem.

1.2.2 Website

Menurut Abdul Kadir (2009:10). Website atau situs juga dapat diartikan sebagai kumpulan halaman yang menampilkan informasi data teks, data gambar

diam atau gerak, dataanimasi, suara,videodan atau gabungan dari semuanya, baik yang bersifat statis maupun dinamis yang membentuk satu rangkaian bangunan yang saling terkait dimanamasing-masing dihubungkan dengan jaringan-jaringan halaman (hyperlink). Bersifat statis apabila isi informasi website tetap, jarang berubah, dan isi informasinya searah hanya dari pemilikwebsite. Bersifat dinamis apabila isi informasi website selalu berubah-ubah, dan isi informasinya interaktif dua arah berasal dari pemilik serta penggunawebsite. Contohwebsitestatis adalah berisi profil perusahaan, sedangkan website dinamis adalah seperti Friendster,

Multiply, dll. Dalam sisi pengembangannya,websitestatis hanya bisa diupdateoleh

pemiliknya saja, sedangkanwebsitedinamis bisa diupdateoleh pengguna maupun pemilik.

1.2.3 E-commerce

E-Commerce merupakan suatu sistem atau paradigma baru dalam dunia

bisnis, yang menggeser paradigma perdagangan tradisional menjadi electronic

commerce yaitudengan memanfaatkan teknologi ICT (Information and

Communication Technology), atau dengan kata lain teknologiinternet. Definisi

e-commerce secara umum: “ Proses membeli, menjual, baik dalam bentuk barang,

jasa ataupun informasi, yang dilakukan melalui media internet”. Menurut Stefan Probst (Opticom), definisi e-commerce adalah “Bisnis yang dilakukan secara

electronic yang melibatkan aktivitas-aktivitas bisnis berupa business to business

ataupun business to consumen melalui teknologi internet.” E-business adalah transaksi yang menggunakan media elektronik yang dipergunakan untuk berjualan atau proses pembelian atau proses pembelian suatu atau beberapa produk menggunakan teknologi ICT. Secara umum, interaksi dan transaksi antara pelaku bisnis yang akan menggunakan teknologi ecommerce dapat dikategorikan dalam jenis B2B ( business to business ),B2C (business to consumen),C2B (consumen

to business), dan C2C (consumen to consumen).Andi (2008)

1.2.4 Internet

Menurut Wibowo Turnady (Turnady Weblog:2009 06 Mei 2010)

ukuran jaringan komputer di seluruh dunia mulai dari sebuah PC, jaringan-jaringan lokal berskala kecil, jaringan-jaringan kelas menegah, hingga jaringan-jaringan utama yang menjadi tulang punggung internet seperti NSFnet, NEARnet,

SURAnet, dan lain-lain.

1.2.5 PHP

Menurut Arif (2011c:43) PHP adalah bahasa server-side–scripting yang menyatu denganHTML untuk membuat halamanwebyang dinamis. Karena PHP

menurut sever-side-scripting maka sintaks dan perintah-perintah PHP akan dieksekusi diserverkemudian hasilnya akan dikirimkan kebrowserdengan format

HTML. Dengan demikian kode program yang ditulis dalamPHPtidak terlihat oleh

user sehingga keamanan halaman web lebih terjamin. PHP dirancang untuk membuat halaman web yang dinamis, yaitu halaman webyang dapat membentuk suatu tampilan berdasarkan permintaan terkini, seperti menampilkan isi basis data ke halamanweb.

1.2.6 PhpMyAdmin

Menurut Sibero (2011e:376) “phpMyAdminadalah aplikasiwebyang dibuat

oleh phpMyAdmin. Net phpMyAdmin digunakan untuk administrasi database

MySQL”. Program ini digunakan untuk mengakses database MySQL. Perintah

untuk membuat table dapat menggunakan form yang sudah tersedia pada

phpMyAdmin atau dapat langsung menulis script pada menu sql. PhpMyAdmin

dijalankan dengan cara mengetikhttp://localhost/phpmyadminpadaweb browser.

1.2.7 Web Server

Menurut Kadir, Abdul (2009), Web server merupakan sebuah aplikasi perangkat lunak. Aplikasi web server ini dijalankan pada sebuah komputer yang disebut dengan server. Web server adalah salah satu jenis perangkat lunak yang menyediakan layanan halaman (dokumen)webyang dapat diakses di seluruh dunia melaluiinternet.

Web server akan melayani permintaan akses halaman web dengan bantuan

Salah satu contoh platform tersebut adalah apache.Apache adalah aplikasi

web serveryang tersedia secara gratis dan disebarkan dengan lisensiopen source.

1.2.8 UML

Berikut ini definisiUnified Modeling Language(UML) menurut para ahli: 1. Menurut (Adi Nugroho: 2005). “Unified Modeling Language(UML) adalah

alat bantu analisis serta perancangan perangkat lunak berbasis objek”. 2. Menurut (Joomla dari http://soetrasoft.com:2007),“Unified Modeling

Language (UML)merupakan standar modeling language yang terdiri dari

kumpulan-kumpulan diagram, dikembangkan untuk membantu para pengembang sistem dan software agar bisa menyelesaikan tugas-tugas seperti: Spesifikasi, Visualisasi, Desain Arsitektur, Konstruksi, Simulasi dan testing serta Dokumentasi”.

Berdasarkan beberapa pendapat yang dikemukakan diatas dapat ditarik kesimpulan bahwa “Unified Modeling Language (UML)adalah sebuah bahasa yang berdasarkan grafik atau gambar untuk menvisualisasikan, menspesifikasikan, membangun dan pendokumentasian dari sebuah sistem pengembangan perangkat lunak berbasis OO (Object Oriented)”.

a. Use CaseDiagram

Menurut Abdul Kadir (2003:54). Use case menggambarkan suatu urutan interaksi antara satu atau lebih aktor dan sistem. Dalam fase

requirements, model use case mengambarkan sistem sebagai sebuah

kotak hitam dan interaksi antara aktor dan sistem dalam suatu bentuk naratif, yang terdiri dari inputuserdan respon-respon sistem. Setiapuse case 19 menggambarkan perilaku sejumlah aspek sistem, tanpa mengurangi struktur internalnya. Selama pembuatan modeluse case

secara pararel juga harus ditetapkan objek-objek yang terlibat dalam setiap use case. Use case diagram dapat sangat membantu bila kita sedang menyusun requirement sebuah sistem, mengkomunikasikan rancangan dengan klien, dan merancangtest caseuntuk semuafeature

fungsionalitas usecase lain sebagai bagian dari proses dalam dirinya. Secara umum diasumsikan bahwa usecase yang di include akan dipanggil setiap kali usecase yang meng-include di eksekusi secara normal.

Keterangan simbolisusecase.

Simbol Deskripsi

Use case Fungsional yang disediakan sistem sebagai

unit-unit yang saling bertukar pesan antar unit atau aktor; biasanya dinyatakan dengan menggunakan kata kerja diawal frase nama

use case.

Aktor atauactor Orang proses atau sistem lain yang berinteraksi dengan sistem informasi yang akan dibuat itu sendiri, jadi walaupun symbol aktor adalah gambar orang, tapi aktor belum tentu merupakan orang; biasanya menggunakan benda di awal frase nama aktor.

Asosiasi atauassociation Komunikasi antar aktor dan use case yang berpartisipasi pada use case atau use case

memiliki interaksi dengan aktor. Ekstensi atauextend

<<extend>>

Relasi use case tambahan ke sebuah use case dimana use case yang Di tambahkan dapat berdiri sendiri walaupun tanpa use case tambahan itu; biasanya use case

tambahan memiliki nama depan yang sama denganuse caseyang ditambahkan.

Simbol Deskripsi

Generalisasi ataugeneralization Hubungan generalisasi dan sepesialis (umum - khusus) antara dua buahuse case

dimana fungsi yang umum dari lainya. Menggunakan atauinclude

<<include>>

Relasi use case tambahan ke sebuah use case yang ditambahkan memerlukan use caseini untuk menjalankan fungsinya atau sebagai syarat dijalankanuse caseini.

b. ActivityDiagram

Activitydiagram menurut Martin fowler (2005: h, 163) adalah “teknik untuk

menggambarkan logika procedural, proses bisnis, dan jalur kerja”. Dalam beberapa

hal,activitydiagram memainkan peran mirip diagram alir, tetapi perbedaan prinsip

antara notasi diagram alir adalah activity diagram mendukung behavior parallel. Node pada sebuah activity diagram disebut sebagai action, sehingga diagram tersebut menampilkan sebuahactivityyang tersusunaction.

Tabel keterangan simbolisactivitydiagram

Simbol Deskripsi

Start state Menggambarkan awal dari suatu

aktivitas yang berjalan pada sistem.

End State Menggambarkan akhir dari suatu

aktivitas yang berjalan pada sistem.

Activity Menggambarkan aktivitas yang

dilakukan pada sistem.

Simbol Deskripsi

Transition to self Menggambarkan hubungan antara

state atau activity yang kembali

kepadastateatauactivityitu sendiri.

Transition state Mengambarkan hubungan antara dua

state, dua activity atau antara state

danactivity.

Decition Mengambarkan kondisi dari sebuah

aktivitas yang bernilai benar atau salah.

Swimlane

Title Function

Ph

ase

Mengambarkan pembagian atau pengelompokan berdasarkan tugas dan fungsi tersendiri.

State Menggambarkan kondisi, situasi

atau tempat untuk beberapa aktivitas.

Fork Menggambarkan aktivitas yang

dimulai dengan sebuah aktivitas dan diikuti oleh dua atau lebih aktivitas yang harus dikerjakan.

Join Mengambarkan aktivitas yang

dimulai dengan dua atau lebih aktivitas yang sudah dilakukan dan menghasilkan sebuah aktivitas.

c. ClassDiagram

Classdiagram adalah diagram yang menunjukanclassyang ada dari sebuah

sistem dan hubungannya secara logika (Henderi, 2008 dalam buku Martin Fowle, UML Distilled, 2005). Class diagram menggambarkan struktur statis dari sebuah sistem. Sementara menurut (Whitten L. Jeffery et al 2004:432), class diagram adalah gambar grafis mengenai struktur objek statis dari suatu sistem, menunjukan

class objek yang menyusun sebuah sistem dan juga hubungan antar class objek

tersebut.

Tabel 2.3.Keterangn simbolisclassdiagram

Simbol Deskripsi

Class

ClassName

-memberName -memberName

Class blok-blok pembangunan pada

pemrograman berorientasi Obyek, Sebuah

class digambarkan sebagai sebuah kontak

yang terbagi atas tiga bagian. Baian atas adalah bagian nama dari class, bagian tengah mendefinisikanpropertyatau atribut

class, bagian akhir mendefinisikan method

dari sebuahclass

Association Sebuah asosiasi merupakan sebuah

relationship paling umum antara dua class

dan dilambangkan oleh sebuah garis yang menghubungkan antara duaclass.

Compotion Jika sebuah class tidak bisa berdiri sendiri

dan harus merupakan bagian dariclassyang lain, maka class tersebut memiliki relasi

composition terhadap tempat dia

Table 2.3. Tabel keterangn simbolisclassdiagram (Lanjutan)

Simbol Deskripsi

Dependency Kadangkala sebuah class menggunakan

class lain, hal ini disebut dependency.

Umumnya penggunaan dependency

digunakan untuk menunjukkan operasi pada Sebuah class yang menggunkan

classyang lain

Aggregation Aggregation mengindikasikan keseluruh

bagian relationship dan biasanya disebut sebagai relasi.

1.3 Entity Relationship Diagram(ERD)

ERDmerupakan suatu model untuk menjelaskan hubungan antar data dalam basis data berdasarkan objek-objek dasar data yang mempunyai hubungan antar relasi. ERD untuk memodelkan struktur data dan hubungan antar data, untuk menggambarkannya digunakan beberapa notasi dan simbol.

Menurut Brady dan Loonam (2010), ERD merupakan teknik yang digunakan untuk memodelkan kebutuhan data dari suatu organisasi, biasanya oleh sistem analis dalam tahap analisis persyaratan proyek pengembangan sistem. Sementara seolah-olah teknik diagram atau alat peraga memberikan dasar untuk desain databaserelasional yang mendasari sistem informasi yang dikembangkan.

ERD bersama-sama dengan detail pendukung merupakan model data yang pada gilirannya digunakan sebagai spesifikasi untukdatabase.

Gambar 2.1. Simbol-simbolERD

1.4 MetodelogiWaterfall

Metode Waterfall adalah suatu proses pengembangan perangkat lunak berurutan, dimana kemajuan dipandang sebagai terus mengalir ke bawah melewati fase-fase perencanaan, pemodelan, implementasi dan pengujian. Berikut adalah gambaran pengembangan perangkat lunak berurutan.

Gambar 2.2. MetodeWaterfall

1.5 Metode Pengujian Sistem

Pengujian sistem menyajikan anomali yang menarik bagi perekayasa perangkat lunak. Pada proses perangkat lunak, perekayasa berusaha membangun perangkat lunak dari konsep abstrak ke implementasi yang dapat di lihat, baru kemudian di lakukan pengujian.

1.6 PengujianBlack Box

Menurut Hanif (2007). Dalam pengujian perangkat lunak ada dua yaitu white box testing dan black box testing. Dari kedua metode itu, pada skripsi dipilih menggunakan black box testing karena dianggap lebih tepat dibanding white box testing. Perangkat lunak memerlukan seperangkat tes untuk pencarian kesalahan fungsi-fungsi dalam aplikasi sehingga dalam hal

iniblack box testinglebih sesuai. Pengujian ini digunakan untuk mengetahui

apakah fungsi-fungsi dalam perangkat lunak sudah sesuai dengan yang diharapkan.

Menurut Roger S. Pressman (2010),black box testingberfokus pada persyaratan fungsional perangkat lunak yang memungkinkanengineeruntuk memperoleh input yang sepenuhnya akan melaksanakan persyaratan fungsional untuk sebuah program. Black box testing berusaha untuk menemukan kesalahan dalam kategori berikut:

1. Fungsi yang tidak benar atau fungsi yang hilang. 2. Kesalahan antarmuka.

3. Kesalaham dalam struktur data atau aksesdatabaseeksternal. 4. Kesalahan kinerja.

16

keras (hardware) dan perangkat lunak (software). Perangkat yang digunakan dalam penelitian ini adalah sebagai berikut:

3.2 Perangkat Keras

Perangkat keras yang digunakan dalam mengembangkan sistem ini antara lain:

1. Laptop 2. Mouse

3.3 Perangkat Lunak

Adapun perangkat lunak yang dibutuhkan dalam membangun website

penjualan Horn Music Merch adalah:

1. Operating System Windows 8 2. MySQL5.6.21

3. Text Editor Sublime Text 2 4. Microsoft Visio 2013

3.4 Bahan Penelitian 3.4.1 Studi Literatur

Mempelajari buku, teori dan referensi yang berhubungan dengan manajemen berbasiswebantara lain prinsip dan prosedur DBMS, pemodelan data meliputi Flowchart, DFD pemrograman dengan PHP dan database MySQL.

Internet juga diperlukan untuk menunjang pencarian informasi yang berkaitan

dengan objek penelitian. 3.4.2 Wawancara

Wawancara dilakukan dengan mewawancarai secara langsung pihak terkait, yang berguna untuk mendapatkan informasi maupun data-data yang dibutuhkan untuk perancangan dan pembangunan yang akan dibuat. Wawancara terhadap pihak

pemesanan yang berguna untuk mendapatka data maupun informasi. 3.4.3 Observasi

Pada metode pengamatan (observasi), dilakukan peninjauan dan penelitian langsung di lapangan untuk memperoleh dan mengumpulkan data yang dibutuhkan. Pengamatan di HORN MUSIC MERCH DISTRO yang berlokasi di Yogyakrta. Adapun penelitian ini dilaksana tanggal 30 April 2016 sampai dengan 1 May 2016.

3.5 Langkah Penelitian

Planning

Analysis

Design

Cooding

Testing

Implementasi

Gambar 3.1. MetodeWaterfall

a. Planning

Tahap perancangan menyangkut studi tentang kebutuhan penguna, kelayakan baik secara teknik maupun teknologi. Tahap ini dilakukan perancangan tentang sistem yang akan dibangun.

b. Analysis

Tahap analisis, merupakan proses pendalaman mengenai segala permasalahan dan resiko pada pengguna.

akan memberikan solusi dari masalah yang muncul pada tahap analisis.

d. Cooding

Tahap implementasi, adalah dimana perancangan sistem implementasikan ke situasi nyata dengan pemilihan perangkat keras dan penyusunan desain (cooding). Untuk implementasi yaitu dengan memasukkan desain yang sudah dibuat ke dalam bootstrap yang diinstal

padaserveryang disediakan oleh pihak Horn Music Merh Distro.

e. Testing

Testing adalah tahap yang menentukan apakah desain yang sudah

dibuat sudah sesuai dengan kebutuhan pengguna atau belum. Tujuantesting

ini adalah untuk meminimalisir cacat desain websitesehingga sistem yang dikembangkan benar-benar dapat berjalan dengan sebaik mungkin.

f. Implementasi

Implemtasi adalah tahap dimana dilakukannya perawatan dan

pemeliharaan website. Jika diperlukan akan dilakukan perbaikan kecil kemudian jika periode sistem sudah habis akan masuk lagi pada tahap perancangan.

3.6 Sistem Sedang Berjalan di DISTRO 3.6.1 Analisis Pembelian

1. Calonmemberharus mempunyai akun.

2. Setelah calon member melakukan registrasi akan mendapatkan balasan konfirmasi diemail.

3. Setelah member membuka notifikasi aktifasi pada email member sudah bisa melakukan pembelian produk secaraonline.

4. Membermemilih produk yang sudah disediakan pada websiteHORN MUSIC

MERCH DISTRO.

5. Jasa pengiriman barang dipilih olehmember.

8. Jikamembertelah mengupload bukti pembayaran yang benar, makaadminakan melakukan konfirmasi pemesanan.

9. Barang yang dipesan olehmembermaka akan segera dilakukan pengiriman oleh

admin.

3.6.2 Analisis Proses Laporan

1. Admin melakukan pengecekan terhadap laporan penjualan dan laporan stok

barang.

2. Admindapat melakukan penarikan laporan penjualan perminggu dan perbulan.

3.7 Analisis Kebutuhan Fungsional dan Non Fungsional 3.7.1 Kebutuhan Fungsional

1. Data barang. 2. Kategori barang. 3. Listbarang. 4. Data pesanan.

5. Slide benner.

6. Data member. 7. Laporan perbarang. 8. Laporan pertransaksi. 3.7.2 Kebutuhan Non Fungsional

1. Proses pembayaran dilakukan maksimal 1x24jam.

2. Laporan penjualan dan laporan stok barang ditampilkan dengan ketentuan pilihan.

3.8 Perancangan Sistem

Pada tahap ini dilakukan penentuan perancangan sistem yang akan digunakan. Berikut ini merupakan gambar perancangan sistem yang diusulkan:

Database

Server

Internet

Admin

Member

NON Member

Gambar 3.2. Arsitektur Sistem yang Diusulkan

Database server yang digunakan menggunakan pada aplikasi MySqldan

menggunakan xampp sebagai web server. Komunikasi antara pengguna dan

web server mengunakaninternet danweb browserpada perangkat pengguna.

Saat pengguna mengakses aplikasi, web server memuat antar muka dan melakukan pengambilan data yang dilakukan dari database server. Melalui antar muka yang dimuat web server sebagai pengguna bisa menyimpan

database server.

Tabel 3.1. Keterangan komponen Arsitektur. Admin

Member Non Member

Database

Berisi data-data sebagai berikut:

1. Data barang. 2. Kategori barang. 3. Listbarang . 4. Data pesanan .

5. Slide benner.

6. Datamember.

7. Laporan perbarang. 8. Laporan pertransaksi.

Server

Server digunakan untuk

penyimpanan data-data tersebut.

3.9 Perancangan Proses

Metode perancangan yang digunakan dalam aplikasi adalahUnited Markup

Languange(UML). Seperti yang sudah dijelaskan sebelumnya, metode UML yang

dipakai pengembangan aplikasi yaitu modelUse Case Diagram, Activity Diagram,

danClass Diagram.

3.9.1 Use CaseDiagram

Use casediagram merupakan salah satu bagian dari UML,use casediagram

adalah suatu diagram yang menggambarkan suatu sistem dan bagaimana sistem tersebut bekerja. Perancangan use case digunakan untuk memodelkan proses berdasarkan perspektifuser.Use casediagram terdiri atas diagram untuk use case

Admin

Tambah data

jenis laporan

Laporan penjualan

Laporan stok barang

Data barang

Data member

Cek tesmonial

Bukti transfer

Konfirmasi pesanan

Member Non Member

Login Member

Registrasi

Lihat produk

Order

Detail pemesanan

Upload bukti trasfer Login Admin

<<include>>

<<include>>

<<include>> <<include>> <<include>> <<include>>

<<include>>

<<include>>

<<include>>

<<include>>

<<include>>

<<include>>

<<include>>

<<include>>

Gambar 3.3. Use CaseDiagram Berikut penjelasan tentang Gambar3.3:

1. Terdapat 3 aktor padause casediagram aplikasi yakniadmin,member, dan

non member.

2. Admin berhubungan langsung pada update data barang seperti list barang

dan stok barang sehingga dapat melakukan pengelolaan data produk. 3. Berdasarkan barang yang dibeli member, maka dapat melakukan

pembayaran secaratransferdan melakukanuploadbuktitransfer.

4. Non memberhanya dapat melihat produk yang ada padawebsitedan dapat

pada Gambar 3.4.

Activity Diagram Horn Music Merch

Member

Admin

P

ha

se

Melakukan Update stok barang

Dapat melihat laporan penjualan dan laporan penjualan stok barang

Dapat melihat data member

Dapat melihat testimonial Dapat melihat detail

pemesanan

Konfirmasi pemesanan

Melakukan pemesanan barang

Melakukan pembayaran secara online

Melakukan upload bukti pembayaran

Konfirmasi Tambah stok barang

Konfirmasi pembayaran

Gambar 3.4. Activitydiagram Aplikasi

Gambar 3.4 menunjukan Activity diagram pada kegiatan alur proses penjualan.Admindapat melihat stok barang yang tersedia maupun sudah stok habis, jika stok barang habis makaadmindapat melakukanupdatestok barang, jika stok barang masih ada maka tidak ada perubahan.

3.10 Perancangan Basis Data

3.10.1 Entity Relationship Diagram(ERD)

Gambar berikut ini menjelaskan hubungan relasi antar data dalam basis data yang terdapat di dalam sistem DISTRO:

MEMBER Id_member _Kode konfirmasi PESAN KATEGORI PRODUK Id_barang Nama_barang Harga diskon Berat TRANSAKSI Invoice_id Id_barang Jumlah Status Tangal BUKTI PEMBAYARAN Id_bukti invoice Bukti Jatuh_tempo MELAKUKAN BUKTI PEMBAYARAN

Invoice_id _{Nama_kota Harga Alamat}

MELAKUKAN PEMBERITAHUAN Id_member Invoice_id Pesan Tanggal Status 1 1 M 1 1 1 1 1 SATUAN Id_satuan Id_barang Ukuran Stok 1 1 MELIHAT M MEMILIH M

Gambar 3.5. Entity Relationship Diagram(ERD) Berikut penjelasan tentang gambar 3.5:

1. Pada entitas member memiliki relasi dengan entitas kategori one to many,

artinyamemberdapat memesan banyak kategori yang tersedia diwebsite.

2. Pada entitas kategori memiliki relasi dengan entitas produk one to many,

artinya dapat melakukan banyak transksi pembelian, dan sebaliknya banyak barang yang dapat dibeli oleh kategori.

3. Pada entitas produk memiliki relasi dengan entitas satuan many to many,

pembayaran.

5. Pada entitas produk memiliki relasi dengan entitas bukti pembayaranone to one,artinya satu transaksi memiliki satu produk.

6. Pada entitas pengiriman memiliki relasi dengan entitas pemberitahuanone

to one, artinya dalam satu pesanan barang akan mendapat konfirmasi

pengiriman barang.

Tabel 3.2. Struktur TabelAdmin

No Name Type Null Extra

1. Id_admin Int(11) NN Auto_Increment

2. Nama Varchar(30) NN

3. Username Varchar(30) NN

4. Password Varhcar(40) NN

5. Email Varhcar(40) NN

6. Foto Varchar(30) NN

Tabel 3.3. Struktur TabelMember

No Name Type Null Extra

1. Id_member Int(11) NN Auto_Increment

2. Nama Varhcar(40) NN

3. Hp Varhcar(14) NN

4. Alamat Text NN

5. Username Varchar(30) NN

6. Email Varchar(40) NN

7. Password Varchar(40) NN

8. Show_password Varchar(30) NN

9. Tanggal_daftar Date NN

10. Kode_konfirmasi Varchar(100) NN

11. Status Int(1) NN

2. Nama_barang Varchar(40) NN

3. Harga Double NN

4. Kategori Int(11) NN

5. Dilihat Int(11) NN

6. Diskon Int(3) NN

7. Harga_baru Double NN

8. Berat Double NN

Tabel 3.5. Struktur Tabel Kategori

No Name Type Null Extra

1. Id_kategori Int(11) NN Auto_Increment

2. Nama_kategori Varchar(40) NN

Tabel 3.6. Struktur Tabel Satuan

No Name Type Null Extra

1. Id_satuan Int(11) NN Auto_Increment

2. Id_barang Int(11) NN

3. Ukuran Varchar(4) NN

4. Stok Int(4) NN

Tabel 3.7. Struktur TabelOrder

No Name Type Null Extra

1. Id_order Int(11) NN Auto_Increment

2. Invoice_id Varchar(30) NN

3. Id_barang Int(11) NN

4. Id_satuan Int(11) NN

5. Jumlah Int(3) NN

6. Diskon Int(3) NN

7. Id_user Int(3) NN

8. Status Int(11]) NN

9. Dilihat Int(1) NN

Tabel 3.8. Struktur Tabel Pengiriman

No Name Type Null Extra

1. Invoice_id Varchar(30) NN Auto_Increment

2. Nama_kota Varchar(30) NN

3. Paket Varchar(50) NN

4. Harga_ongkir Double NN

5. Alamat Text NN

6. Id Int(11) NN

Tabel 3.9. Struktur Tabel Gambar

No Name Type Null Extra

1. Id_gambar Int(11) NN Auto_increment

2. Gambar Varchar(50) NN

3. Id_gambar Int(11) NN

3.10.2 Class Diagram

Gambaranclass diagram yang digunakan dalam aplikasi dapat dilihat pada Gambar 3.6, dan berikut penjelasanya:

1. Kelas login terdapat fungsi untuk memasukkan username dan password

agaruserdapat masuk kedalam sistem.

2. Kelas membermemiliki association dengan kelas kategori. Artinya setiap

memberboleh tidak melakukan pembelian atau melakukan pembelian lebih

dari beberapa kali.

3. Kelas kategori memiliki association dengan kelas produk. Artinya setiap

membermelakukan pembelian bisa memilih kategori produk.

4. Kelas produk memiliki associotion dengan kelas satuan. Artinya member

bisa melakukan pemilihan satuan lebih dari satu.

5. Kelas produk memiliki association dengan kelas transaksi. Artinya setiap

biaya pengiriman yang telah ditentukan.

7. Kelas biaya pengiriman memiliki composition dengan kelas bukti pembayaran. Artinya kelas bukti pembayaran merupakan bagian dari kelas biaya pengiriman.

8. Kelas bukti pembauaran memilikiassociationdengan kelas pemberitahuan. Artinya apabila barang telah selesai di proses, maka akan mendapatkan notifikasi.

Class kategori memiliki association dengan class produk, class member

dapat mengakses apa saja yang yang terdapat di dalam website melalui method

Getidmember().

Class satuan memiliki composition dengan class produk, artinya class

satuan merupakan bagian dariclassproduk.Classsatuan tidak dapat berdiri sendiri apabilaclassproduk tidak ada.

Class produk memiliki association denganclass transaksi, classtransaksi

boleh melakukan akses transaksi melaluimethodGetinvoiceid() danclasstransaksi memiliki association dengan class biaya pengiriman, class transaksi boleh melakukan akses biaya pengiriman melaluimethodGetinvoiceid().

Class biaya pengiriman memiliki association dengan class bukti

pembayaran, class biaya pengiriman boleh melakukan bukti pembayaran melalui

methodGetbukti().

Classbukti pembayaran memilikiassociationdenganclasspemberitahuan,

class bukti pembayaran boleh melakukan pemberitahuan melalui method

+getidmember():int -alamat:text -username:varchar -email:varchar -password:varchar -kodekonfirmasi:varchar -status:int +setidmember():void +getnama():varchar +setnama():void +gethp():varchar +sethp():void +getalmat():text +setalamat():void +getusername():varchar +setusername():void +getemail():varchar +setemail():void +getpassword():varchar +setpassword():void +getkodekonfirmasi():varchar +setkodekonfirmasi():void +getstatus():int +setstatus():void

- Gambar: varchar

+getDiskon():int +getId_barang():int +setId_barang():void +getNama_barang():varchar +getHarga():double +getKategori():int +getGambar():varchar +getBerat():double - harga: double - kategori: int - diskon: int - berat: double

+setNama_barang():void +setHarga():void +setKategori():void +setDiskon():void +setGambar():void +setBerat():void TRANSAKSI - Invoive_Id:varchar - Jumlah: varchar

- Status: int

+getJumlah():varchar +getInvoice_Id():varchar +getDiskon():int +getTanggal():date - Tanggal:date +getId_barang():int +getStatus():int +getId_user():int - id_barang:int - diskon: int - id_user: int

+setInvoice_Id():void +setId_barang():void +setJumlah():void +setDiskon():void +setId_user():void +setStatus():void +setTanggal():void +getId_kategori():int +setId_kategori():void +getNama_kategori():varchar +setNama_kategori():void BUKTI PEMBAYARAN -Id_bukti_pembayaran:int +getId_bukti_pembayaran():int -invoice:varchar -bukti:varchar -jatuh_tempo:date +setId_bukti_pembayaran():voit +getInvoice():varchar +setInvoice():void +getBukti():varchar +setBukti():void +getJatuh_tempo():date +setJatuh_tempo():void BIAYA PENGIRIMAN -Invoice_id:varchar +getInvoice_id():varchar -Nama_kota:varchar -Harga_ongkir:double -Alamat:text +setInvoice_id():void +getNama_kota():varchar +setNama_kota():void +getHarga_ongkir():double +setHarga_ongkir():void +getAlamat():text +setAlamat():void PEMBERITAHUAN -Id_member:int +getStatus():varchar -Invoice_id:varchar -Pesan:text -Tanggal:date -Status:varchar +setStatus():void +getUkuran():int -Stok:varchar +setUkuran():void -Ukuran: int LOGIN -Username: varchar + Validate(): Boolean -Password: varchar

Gambar 3.6. ClassDiagram Aplikasi 3.11 PerancanganInterface

Perancangan interface sistem diperlukan untuk memudahkan user dalam melakukan proses interaksi terhadap sistem. Interface menyediakan tampilan halaman sebuah sistem yang digunakan untuk proses input hingga menghasilkan

output yang sesuai dengan kebutuhan. Interface untuk sistem yang akan dibuat

aplikasi yang dapat dilihat oleh member, nonmember dan admin. Gambaran rancangan antarmuka halaman utama aplikasi dapat dilihat pada Gambar 3.7.

Gambar 3.7. Rancangan Halam Utama 3.11.2 Rancangan Antarmuka Halaman Produk

Rancangan antarmuka halaman produk berisi tentang produk-produk barang yang berkaitan dengan produk barang. Dimana calonmemberdapat melihat beberapa jenis kategori produk barang yang mereka inginkan dapat dilihat pada Gambar 3.8.

Button Logo _{Button Keranjang Button Daftar Button Masuk}

search Button Cari

Image Button Produk _{Image Button Produk}

Image Button Produk Image Button Produk

Label Kategori Produk Button T-Shit

Button Topi Button Tote

Label Contact as

Label Produk

Label

Label Produk

Gambar 3.8. Halaman Utama

search Button Cari

Label Kategori Produk Button T-Shit

Button Topi Button Tote Image Button Produk _{Image Button Produk}

Label Penjelas Harga Button Beli

Label Penjelas Harga Button Beli

Label Contact as

Label

Produk

Label

Label

Produk

Label

dengan ketentuan pendaftaran yang dapat dilihat oleh calon member. Gambaran rancangan antarmuka halamanmemberbaru terdapat pada Gambar 3.9.

Gambar 3.9. Rancangan Antarmuka HalamanMemberBaru Button Logo _{Button Keranjang Button Daftar Button Masuk}

search Button Cari

Label Kategori Produk Button T-Shit

Button Topi Button Tote Textfield Nama Lengkap

Textfield Nomor Handphone Textfield Nama Pengguna

Textfield Alat Rumah

Textfield Alamat Email Textfield Kata Sandi Textfield Ulangi Kata Sandi

Check

Button Label Keterangan

Button Daftar

Label Contact as

Label

Produk

Label

Label

Produk

Label

memberketika telah selesai melakukan pendaftaranmemberbaru. Terdapat langkah selanjutnya member diwajibkan untuk membuka email agar akun bisa terverifikasin. Gambaran rancangan antarmuka halamanmemberbaru dapat dilihat pada Gambar 3.10.

Gambar 3.10.Rancangan Antarmuka Halaman Registrasiaktifasi

Button Logo _{Button Keranjang Button Daftar Button Masuk}

search Button Cari

Label Kategori Produk Button T-Shit

Button Topi Button Tote

Label Contact as

Label Produk

Label Label Produk

Label

Segera konfirmasi melalui email anda untuk mengaktifkan akun anda

Keteranagan Satu langkah lagi

Sialahkan buka email anda dan klik link konfirmasi kami. Dan anda akan menjadi member kami

button yaitu kolom username, password dan button masuk. Member dapat login

sesuai username dan password yang telah dibuat sebelumnya, jika member lupa

password memberakan di arahkan ke menuresert password.Gambaran rancangan

antarmuka halamanlogin memberterdapat pada Gambar 3.11.

Gambar 3.11.Rancangan Antarmuka HalamanLogin Member

Button Keranjang Button Daftar Button Masuk

search Button Cari

Label Kategori Produk Button T-Shit

Button Topi Button Tote Label Login Member

Textfield Nama Pengguna Textfield Kata Sandi Button Masuk

Button Logo

Label Contact as

Label Produk

Label Label Produk

data yang ada sebelumnya. Gambar rancangan antarmuka akun member terdapat pada Gambar 3.12.

Gambar 3.12.Rancangan Antarmuka akunmember

Button Logo _{Button Keranjang Button Daftar Button Masuk}

search Button Cari

Label Kategori Produk

Button T-Shit

Button Topi

Button Tote Textfield Nama Lengkap

Textfield Nomor Handphone

Textfield Nama Pengguna

Textfield Alamat Email

Textfield Kata Sandi Button_Ganti

Button Update

Label Contact as

Label

Produk

Label

Label

Produk

Label

Button Keranjang Button Pengguna Button Masuk Button Riwayat

akan dibeli olehmember,tampilan barang terdapatdetailbarang dan ukuran barang yang akan dipesan. Gambar rancangan antarmuka halaman barang terdapat pada Gambar 3.13.

Gambar 3.13.Rancangan Antarmuka Halaman Barang 3.11.8 Rancangan Antarmuka Halaman Keranjang Belanja

Rancangan antarmuka halaman keranjang belanja terdapat data barang yang dibeli oleh member, terdapat dua button yaitu button batalkan pemesanan dan

Label Contact as

Button Logo _{Button Keranjang Button Pengguna Button Masuk}

search Button Cari

Label Kategori Produk Button T-Shit

Button Topi Button Tote Image zoom Produk

Image Produk

Label Nama Barang Label view Label Kategori

Label Harga Label Ukuran List Item List Item List Item Button Tambah ke

Keranjang

Label

Produk

Label

Label

Produk

Label

Button Riwayat Pemesanan

yang sudah dibeli olehmember.Gambaran rancangan atarmuka halaman keranjang belanja terdapat pada Gambar 3.14.

Gambar 3.14.Rancangan Antarmuka Halaman Keranjang pembelian Button Logo

search Button Cari

Label Kategori Produk Button T-Shit

Button Topi Button Tote

Data grid Label

No

Label Nama Barang

Label

Ukuran Label Berat Label Harga Label Jumlah 1 LabelBarang label label Label label 2 LabelBarang label label label label

Label invoice ID Label No ID Label Totak

Button Batal Pemesanan Button Lanjutkan

Label Contact as

Label Produk

Label Label Produk

Label

Button Keranjang Button Pengguna Button Masuk Button Riwayat

Pemesanan

Label Discount

label label

Label Total label label label label label label

kota dan alamatmember,terdapat dua jasa pengiriman yaitu melalui jasa JNE dan TIKI. Gambaran rancangan antarmuka halaman jasa pengiriman terdapat pada Gambar 3.15.

Gambar 3.15.Rancangan Antarmuka Halaman Jasa Pengiriman Button Logo

search Button

Cari

Label Kategori Produk Button T-Shit

Button Topi Button Tote Label Pilih Jasa Pengiriman

Label Kota Tujuan

List Pilih Kota Tujuan Label Alamat

Text alamat

Button Cek Data Grib

Label JNE

Label Harga Label Paket Label Penjelasan Label Kota Button Pilih Label Tiki

Label Harga Label Paket Label Penjelasan Label Kota Button Pilih

Label Contact as Button Batalkan

Label

Produk

Label

Label

Produk

Label

Button Keranjang Button Daftar Button Masuk Button Keranjang Button Pengguna Button Masuk Button Riwayat

dan upload bukti pembayaran. pembelian member. Gamabaran rancangan antarmuka halamandetailpesanan terdapat pada Gambar 3.16.

Gambar 3.16.Rancangan Antarmuka HalamanDetailPesanan

Label Contact as Button Logo

search Button Cari

Label Kategori Produk Button T-Shit Button Topi Label Produk Label Label Produk Label Data grid Label

No Label Nama Barang Label

Ukuran Label Harga Label Berat

Label Discount

1 Label Label Label Label Label

Label Ongkos Kirim

Label Berat dan harga Label Total

Label Invoice ID Label ID Label

Harga Label Total Label Label Berat Label Total

Button Keranjang Button Daftar Button Masuk Button Keranjang Button Pengguna Button Masuk Button Riwayat

Pemesanan

Label Deskripsi

Label Upload Bukti

Button Browse Button Upload Bukti

status transaksi yang berhasil di upload oleh member. Gambaran antarmuka halamandetailpesanan berhasil terdapat pada Gambar 3.17.

Gambar 3.17.Rancangan Antarmuka HalamanDetailPesanan Berhasil Label Contact as

Button Logo

search Button Cari

Label Kategori Produk Button T-Shit

Button Topi

Label

Produk

Label

Label

Produk

Label Data grid

Label

No Label Nama Barang Label

Ukuran Label Harga Label Berat

Label Discount

1 Label Label Label Label Label

Label Ongkos Kirim

Label Berat dan harga

Label Total

Label Invoice ID Label ID Label

Harga Label Total Label

Label Berat

Label Total

Button Keranjang Button Daftar Button Masuk Button Keranjang Button Pengguna Button Masuk Button Riwayat

Pemesanan

Label Status Transaksi

pembelian member beserta tanggal pemesanan. Gambaran rancangan antarmuka halaman riwayat pemesanan terdapat pada Gambar 3.18.

Button Logo

search Button Cari

Label Kategori Produk

Button T-Shit

Button Topi

Button Tote

Label

Produk

Label

Label

Produk

Label

Button Keranjang Button Pengguna Button Masuk Button Riwayat

Pemesanan

Riwayat Pemesanan

Label No Label Invoice ID Label Status Label Detail

Label No Label ID Label Upload bukti Button detail

Horn Music Merch Distro. Gambaran rancangan antarmuka halaman kontak terdapat pada Gambar 3.19.

Button Logo

search Button Cari

Label Kategori Produk Button T-Shit

Button Topi Button Tote

Label

Produk

Label

Label

Produk

Label

Button Keranjang Button Pengguna Button Masuk Button Riwayat

Pemesanan

Label Kontak

Label Lokasi

Street Map

Label Informasi

Label Horn

Label Kontak No

Label ID Line

Label BBM

Label Instagram

Label Alamat

field,dan satubuttonmasuk. Gambaran rancangan antarmuka halamanlogin admin

terdapat pada Gamabar 3.20.

Gambar

Label UserName

TextFieldl UserName

TextFieldl Password Label Password

Button Masuk

image. Admin berfungsi untuk melakukan penambahan produk, menambah stok barang, mengubah banner, melihat data pemesanan, melihat data member,

mengirim bukti transfer, dan melihat laporan penjualan. Gambaran rancangan antarmuka halaman utamaadminterdapat pada Gambar 3.21.

Gambar 3.21.Rancangan Antarmuka Halaman UtamaAdmin

Button

Search Button

Button

Button Button Button Button

Label

Label

Image Image

Button Button

Label

Cobobox

Button

Button

Cobobox

Button

Button

laporan data penjualan. Gambaran rancangan halaman laporan penjualan terdapat pada Gambar 3.22.

Gambar 3.22.Rancangan Antarmuka Halaman Laporan Penjualan Label

TextField Button

Label

Label

Label

Label

Label

Button

Label

Cobobox Label

Label

Cobobox

Label

Label

Label Button

Label

Textfield Label

Textfield

Button

Label

Button Button

Search Button

Button

Button

Button

Button

Button

Cobobox

Button

Button

Cobobox

Button

46

Langkah pertama dalam pembangunan aplikasi ini adalah melakukan instalasi aplikasi server yaitu menggunakan XAMPP. Setelah selesai melakukan instalasi kemudian jalankan aplikasi XAMPP pastikan Apache dan MySQL dapat terkoneksi ditandai dengan tulisanrunning.

4.1.2 PembuatanDatabase

Setelah memastikan bahwa koneksi Apache dan MySQL berhasil langkah selanjutnya adalah pembuatan database dengan cara membuka web browser

kemudian ketikkan localhost atau phpmyadmin. Hasil dari pembuatan database

aplikasi dapat dilihat pada gambar 4.2.

4.2 Antarmuka 4.2.1 Halaman Utama

Halaman utama merupakan tampilan utama dari aplikasi yang dapat dilihat olehmemberdanadmin. Gambar halaman utama aplikasi dapat dilihat pada Gambar 4.3.

Gambar 4.3. Halaman UtamaWebsite

4.2.2 Halaman RegistrasiMember

Halaman registrasi yang akan diisi oleh calon member. Pada rancangan halaman registrasi terdapat data-data yang akan diisi oleh calonmember. Terdapat

Gambar 4.4. Halaman RegistrasiMember

4.2.3 Halaman AkunMember

Halaman akun member terdapat data-data member sesuai dengan data registrasi sebelumnya,memberdapat melakukan perubahan data serta semua menu akan aktif. Halaman akun member dapat dilihat pada Gambar 4.5.

4.2.4 HalamanLogin

Halaman login merupakan halaman utama admin sebelum menggunakan sistem. Halaman ini berisi formusernamedanpasswordyang harus diisi dengan benar. Halamanlogindapat dilihat pada gambar 4.6.

Gambar 4.6. HalamanLogin Admin

4.2.5 Halaman DaftarMember

Halaman data member berisi data member dan daftar pesanan member. Halaman daftarmemberdapat dilihat pada gambar 4.7.

4.2.6 Halaman Kategori Barang

Halaman kategori barang berisi data kategori barang. Disana juga ada kolom aksi yang digunakan untuk melihat, mengedit,dan menghapus kategori barang yang dikehendaki. Halaman kategori barang dapat dilihat pada gambar 4.8.

Gambar 4.8. Halaman Kategori Barang 4.2.7 HalamanListBarang

Halaman list barang digunakan untuk melihat, menambah barang baru, mengedit, menghapus, dan memberi diskon bagi member. Halaman list barang dapat dilihat pada gambar 4.9.

4.2.8 Halaman Data Pesanan

Halaman data pesanan digunakan untuk melihat data pesanan member.

Terdapat kolom status yang digunakan untuk melihat member yang sudah terkonfirmasi. Halaman data pesanan dapat dilihat pada gambar 4.10.

Gambar 4.10. Halaman Data Pesanan 4.2.9 HalamanDetailPesanan

Halaman detail pesanan digunakan digunakan untuk melakukan pengecekan pesanan barang dan terdapat nama barang, ukuran barang, haraga barang, jumlah barang, diskon, total harga dan data member. Halaman detail

pesanan dapat dilihat pada gambar 4.11.

4.2.10 Halaman DataMember

Halaman data member digunakan untuk melihat data username, tanggal daftar, dan Status. Disana juga ada kolom aksi yang digunakan untuk melihat dan menghapus data member yang dikehendaki. Halaman data member

dapat dilihat pada gambar 4.12.

Gambar 4.12.Halaman DataMember

4.2.11 Halaman DataMember

Langkah selanjutnya halaman pengguna berisi data username, tanggal

order, dan Status. Disana juga ada kolom aksi yang digunakan untuk melihat dan

menghapus data member yang dikehendaki. Halaman data member dapat dilihat pada gambar 4.13.

Gambar 4.13.Halaman DataMember

4.2.12 Halaman Laporan Penjualan

Halaman laporan penjualan berisi mengenai laporan data penjualan. Halaman laporan penjualan dapat dilihat pada gambar 4.14.

Gambar 4.14.Halaman Laporan Penjualan 4.2.13 Laporan Penjualan yang Sudah Bayar

Halaman laporan penjualan yang sudah bayar berisi mengenai laporan penjualan dari pembelian yang sudah bayar dapat dilihat pada gambar 4.15.

Gambar 4.15.Halaman Laporan Penjualan yang Sudah Bayar 4.2.14 Halaman Laporan Penjualan yang Belum Bayar

Halaman laporan penjualan yang belum bayar berisi mengenai laporan penjualan dari pembelian yang belum bayar dapat dilihat pada gambar 4.16.

Gambar 4.16.Halaman Laporan Penjualan yang Belum Bayar 1.3 Pengujian Sistem

Pengujian dilakukan bertujuan untuk melihat hasil eksekusi dan fungsionalitas berdasarkan analisis kebutuhan. Hasil pengujian dapat dilihat pada tabel 4.1.

Tabel 4.1. Hasil PengujianWebsite.

No Test Case Hasil yang

diharpkan Hasil yang Diharapkan Hasil Status 1. Tombol DAFTAR pada halamanhome. Member masuk ke halaman daftar member baru. Berhasil

2. DAFTAR pada halaman daftar

member dengan authentication valid. Member masuk kehalaman konfirmasi. Berhasil 3. DAFTAR member yang dimasukan tidak lengkap.

Sistem akan menjawab dengan data yang belum diisi oleh calon

member.

Berhasil

4. CalonMember

akan mendapatkan emaildari sistem. Member mendapatkan aktifasi akun dan masuk ke halamanweb.

Berhasil

5. Tombol Home

pada halaman

member. Memberakan bisa memilih produk di halamanhome. Berhasil

Tabel 4.1Hasil PengujianWebsite(Lanjutan).

No Test Case Hasil yang

diharpkan

Hasil yang Diharapkan

Hasil Status

6. HalamanHome

terdapat produk penjualan.

Setelah member

memilih produk akan masuk ke halaman DETAILbarang. Berhasil 7. Halaman Detail produk member bisa memilih

ukuran dan jumlah produk.

Setelah member

memilih sistem akan memberikan notifikasi. Berhasil 8. Tombol Keranjangpada halamanhome. Member masuk kehalaman keranjang. Berhasil 9. Tombol Lanjutkan pada halaman keranjang. Member masuk

ke halaman pilih jasa pengiriman.

Berhasil

10. Tombol Pilih pada halaman pilih jasa pengiriman.

Datamember

akan masuk ke

database.

Tabel 4.1Hasil PengujianWebsite(Lanjutan).

No Test Case Hasil yang

diharpkan

Hasil yang Diharapkan

Hasil Status

11. Member akan

dapat email detail pembelian. Member meng-upload bukti transfer. Berhasil 12. Tombol Upload bukti

pada halaman

detail.

Member

mendapatkan notofikasi status transaksi.

Berhasil

13. Tombol

Knfirmasi di halaman

admin.

Admin dapat

mengonfirmasi data bukti transfermember.

Berhasil

14. Tombol

Kontak pada halamanhome.

Member dapat

menghubungi kontak yang sudah tersedia.

Berhasil

15. Tombol

Dashboard

pada halaman

admin.

Setelah tombol di klik admin

masuk kehalaman pemberitahuan. Berhasil 16. Tombol Kategori barang pada

Setelah tombol di klik admin

masuk ke

Tabel 4.1Hasil PengujianWebsite(Lanjutan).

No Test Case Hasil yang

diharpkan Hasil yang Diharapkan Hasil Status halaman admin. halaman kategori barang Berhasil

17. Tombol List

barang pada halaman

admin.

Setelah tombol di klik admin

masuk ke

halaman list

barang.

Berhasil

18. Tombol Data pesanan pada halaman

admin.

Setelah tombol di klik admin

masuk ke

halaman data pesanan.

Berhasil

19. Tombol

Slide banner

pada halaman

admin.

Setelah tombol di klik admin

masuk ke

halaman slide banner.

Berhasil

20. Tombol Data

member pada

halaman

admin.

Setelah tombol di klik admin

masuk ke

halaman data

member.

<div class="form-group">

<label for="judul" class="col-sm-3 control-label&#class="col-sm-34;>Nama Kategori </label>

<div class="col-sm-7">

<input name="kategori" id="kategori" type="text" placeholder="Nama kategori..." required class="form-control" value="<?php echo set_value('username');?>" >

<?php echo

form_error('kategori', '<span class="alert-error help-inline">', '</span>'); ?>

</div>

</div>

<div class="form-group">

<div class="offset-3 col-sm-10">

<input type="submit" name="submit" value="simpan" id="btn-tambah" class="btn btn-success">

</div>

<link rel="stylesheet" href="<?php echo get_media_url();?>font-awesome/css/font-awesome.min.css">

<!-- Page Specific CSS --> <link rel="stylesheet"

href="http://cdn.oesmith.co.uk/morris-0.4.3.min.css">

<link href="<?php echo get_media_url();?>css/login.css" rel="stylesheet">

</head>

<body class='bg-primary'>

<div class="container"> <div class="row"> <div class="col-lg-12"> <?php

if($this->session->flashdata('msg')) echo '<p><div class="alert alert-danger"><button type="button" class="close" data-dismiss="alert">×</button>'.$this->session->flashdata('msg').'</div></p>'; ?>

<div class="box">

<center><i class="fa fa-user fa-5x"></i> </center>

<form method="post" action="<?php echo base_url();?>admin/login" >

<div class="form-group"> <label

for="exampleInputEmail1">Username</label> <input type="text" name="username" class="form-control" id="exampleInputEmail1" autofocus required placeholder="username"> </div>

</div>

<?php echo form_close(); ?>

</div>

<div class="modal-footer">

<button type="button" class="btn btn-default"

data-dismiss="modal">Kembali</button>

</div>

</div><!-- /.modal-content -->

</div><! /.modal-dialog -->

</div><!-- /.modal -->

<br><hr>

<table class="table table-bordered" width="50">

<thead> <tr>

<th>NO</th>

<th>Nama Kategori</th>

<th width="200">Aksi</th>

</tr> </thead> <tbody>

<?php $no = 1; foreach ($data as $row) {

?>

<label

for="exampleInputPassword1">Password</label >

<input type="password" name="password" class="form-control" id="exampleInputPassword1" required placeholder="Password">

</div>

<button type="submit" class="btn btn-default">Masuk</button>

<strong background-color:#00000; ><center></center></strong>

</form> </div> </div> </div> </div>

<!-- JavaScript --> <script src="<?php echo

get_media_url();?>js/jquery-1.10.2.js"></script> <script src="<?php echo

get_media_url();?>js/bootstrap.js"></script>

<!-- Page Specific Plugins --> <script

src="http://cdnjs.cloudflare.com/ajax/libs/raphae l/2.1.0/raphael-min.js"></script>

<script src="http://cdn.oesmith.co.uk/morris-0.4.3.min.js"></script>

<tr>

<td><?php echo $no++;?></td>

<td><?php echo $row->nama_kategori;?></td>

<td>

<a href="#edit<?php echo $row->id_kategori;?>" data-toggle="modal" class="btn btn-warning"><i class="fa fa-edit"></i> Edit</a>

<a href="<?php echo

base_url();?>admin/kategori_hapus/<?php echo $row->id_kategori;?>" class="btn btn-danger" onclick="return confirm('Anda yakin ingin menghapus?')"><i class="fa fa-times-circle"></i> Hapus</a>

<!--modal mulai !-->

<div id="edit<?php echo $row->id_kategori;?>" class="modal fade" data-backdrop="static">

<div class="modal-dialog">

<div class="modal-content">

<div class="modal-header">

<button type="button" class="close" data-dismiss="modal"

aria-hidden="true">&times;</button>

<script src="<?php echo

get_media_url();?>js/morris/chart-data-morris.js"></script>

<script src="<?php echo

get_media_url();?>js/tablesorter/jquery.tablesort er.js"></script>

<script src="<?php echo

get_media_url();?>js/tablesorter/tables.js"></scri pt>

</body> </html>

<?php echo get_header_guest();?> <h3><i class="fa fa-shopping-cart"></i> Keranjang Belanja</h3>

<table class="table"> <thead>

<tr>

<th>No</th> <th>Nama Barang</th>

<th>Ukuran</th> <th>Berat</th> <th>Harga</th> <th>Jumlah</th> <th>Discount</th> <th

width="20%">Total</th>

<th>#</th> </tr>

</thead> <tbody>

<?php $no = 1;

<h4 class="modal-title">Tambah</h4>

</div>

<div class="modal-body" style=" ">

<?php echo form_open('admin/kategori_edit/'.$row->id_kategori,array('class' => 'form-horizontal','enctype' =>'multipart/form-data'));?>

<div class="form-group">

<label for="judul" class="col-sm-3 control-label&#class="col-sm-34;>Nama Kategori </label>

<div class="col-sm-7">

<input type="hidden" name="id" value="<?php echo $row->id_kategori;?>">

<input name="kategori" id="kategori" type="text" placeholder="Nama kategori..." required class="form-control" value="<?php echo set_value('kategori',$row->nama_kategori);?>" >

<?php echo

form_error('kategori', '<span class="alert-error help-inline">', '</span>'); ?>

</div>

$invoice = "";

foreach ($data->result() as $key => $row) {

$harga_lama = tampilkan('barang',array('id_barang' => $row->id_barang),'harga');

$diskon = $row->diskon; $harga_baru = $harga_lama - ($harga_lama * $diskon / 100); if($diskon != 0) {

$dis = '<span class="label label-primary">Rp.'.number_format($harga_baru).'</s pan>';

$harga_awal = '<span class="label label-warning"><s>Rp.'.

number_format($harga_lama).'</s></span>'; //$show_dis = '<span class="label label-danger pull-right">Discount :

'.$row->diskon.'%</span>'; }

else {

$dis = '';

$harga_awal = '<span class="label

label-warning">Rp.'.number_format($harga_lama).'</ span>';

//$show_dis = ""; }

//0000000000

$tb = $harga_baru * $row->jumlah;

$total_kolom = $total_kolom + $tb;

</div>

<div class="form-group">

<div class="offset-3 col-sm-10">

<input type="submit" name="submit" value="simpan" id="btn-tambah" class="btn btn-success">

</div>

</div>

<?php echo form_close(); ?>

</div>

<div class="modal-footer">

<button type="button" class="btn btn-default"

data-dismiss="modal">Kembali</button>

</div>

</div><!-- /.modal-content -->

</div><! /.modal-dialog -->

</div><!-- /.modal -->

</td>

</tr> <?php } ?> </tbody>

?>

<tr>

<td><?php echo $no++;?></td>

<td><?php echo tampilkan('barang',array('id_barang' => $row->id_barang),'nama_barang');?></td>

<td><?php echo tampilkan('satuan',array('id_satuan' => $row->id_satuan),'ukuran');?></td>

<td><small><?php echo tampilkan('barang',array('id_barang' => $row->id_barang),'berat');?> Kg</small></td>

<td><?php echo $harga_awal;?> <?php echo $dis;?></td>

<td><?php echo $row->jumlah;?></td>

<td><?php echo $row->diskon;?>%</td>

<td>Rp.<strong style="float:right"><?php echo

number_format($tb);?></strong></td>

<td><a href="<?php echo base_url();?>guest/basket_del/<?php echo $row->id_order;?>" data-toggle="tooltip" title="Hapus dari keranjang"><i class="fa fa-times-circle"></i> </a></td>

</tr> <?php } ?> <tr>

<td></td>

<td><strong>Invoice ID</strong></td>

</table> </div>

</div>

<?php echo get_footer_admin();?>

<td><strong><?php echo $invoice;?></strong></td>

<td></td> <td></td> <td></td> <td>Rp.<strong style="float:right"><?php echo

number_format($total_kolom);?></storng></td> </tr>

</tbody>

</table>

<?php if($data->num_rows() > 0){?> <a href="<?php echo

base_url();?>guest/basket2" class="btn btn-primary pull-right">Lanjutkan</a>

<a href="<?php echo

base_url();?>guest/batal_invoice/<?php echo $invoice;?>" class="btn btn-danger " onclick="return confirm('Anda yakin ingin membatalkan semua pesanan anda ?')"><i class="fa fa-times-circle"></i> Batalkan Pemesanan</a>

<?php } ?>

<hr>