Skripsi
untuk memenuhi sebagian persyaratan mencapai derajat Sarjana S-1
Diajukan oleh Hilman Yuliansyah NIM: 20120140034
PROGRAM STUDI TEKNOLOGI INFORMASI FAKULTAS TEKNIK
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.
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.
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:
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.
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
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
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
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
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.
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
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
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
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
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
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
Admin
Tambah data
jenis laporan
Laporan penjualan
Laporan stok barang
Data barang
Upload bukti trasfer Login Admin
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)
MEMBER
Invoice_id Nama_kota Harga Alamat
MELAKUKAN
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
- Gambar: varchar
+getDiskon():int - harga: double - kategori: int - diskon: int
- berat: double
+setNama_barang():void
- Jumlah: varchar
- Status: int
+getJumlah():varchar
- diskon: int - id_user: int
+setInvoice_Id():void
+ 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
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 ButtonGanti
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
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
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
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
No Label Nama Barang Label
Ukuran Label Harga Label Berat
Label Discount
1 Label Label Label Label Label
Label Ongkos Kirim
Label
Label Invoice ID Label ID Label
Harga
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
No Label Nama Barang Label
Ukuran Label Harga Label Berat
Label Discount
1 Label Label Label Label Label
Label Ongkos Kirim
Label
Label Invoice ID Label ID Label
Harga
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.
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
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
Gambar 4.15.Halaman Laporan Penjualan yang Sudah Bayar 4.2.14 Halaman Laporan Penjualan yang Belum Bayar
Gambar 4.16.Halaman Laporan Penjualan yang Belum Bayar 1.3 Pengujian Sistem
Tabel 4.1. Hasil PengujianWebsite.
No Test Case Hasil yang
diharpkan
2. DAFTAR pada halaman daftar
member
Sistem akan menjawab dengan data yang belum diisi oleh calon
member.
Berhasil
4. CalonMember
akan dan masuk ke halamanweb.
Berhasil
5. Tombol Home
pada halaman
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
ukuran dan jumlah produk.
Setelah member
memilih sistem akan
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
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
Setelah tombol di klik admin
masuk ke
Tabel 4.1Hasil PengujianWebsite(Lanjutan).
No Test Case Hasil yang
diharpkan
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.
Tabel 4.1Hasil PengujianWebsite(Lanjutan).
No Test Case Hasil yang
diharpkan
Hasil yang Diharapkan
Hasil Status
21. Tombol Per-barang pada halaman
admin.
Setelah tombol di klik admin transaksi pada halaman
admin.
Setelah tombol di klik admin
penjualan per-transaksi.
Laporan
penjualan per-barang.
Berhasil
4.4 Pembahasan
Dari pengujian perangkat lunak dapat dirangkum sebagai berikut: 1. Hasil dan fitur dariwebsiteHORN MUSIC MERCH adalah:
a. Promosi produk dipermudah dengan ada nya tampiulan gambar dan harga yang sudah ada.
b. Terdapat tampilan haraga diskon.
c. Terdapat tampilan haraga dan ongkos pengiriman untuk pembeli.
2. Masalah yang sudah terjawab pada distro HORN MUSIC MERCH adalah:
a. Pemilik distro sudah dapat mempromosikan produknya dengan mudah.
b. Pembeli dapat membeli dengan caraonline.
c. Pembeli bisa dapat menngakses website distro Horn Music Merch.
d. Perluasan penjualan dengan dibantuinternet.
e. Pembeli
3. Manfaat yang sudah tercapai padasoftwaresebagai berikut: a. Promosi produk yang sangat baik.
b. Pembeli dengan mudah mengakses dan melihat produk. c. Pemesanan yang luas dengan bantuaninternet.
d. Pembeli dapat lebih mudah dan flaksibel dalam segi waktu dan tempat.
e. Memudahkan pembeli mendapatkan informasi tentang perusahaan.
f. Pembelian dan pemesanan dapat dilakukan secara
online.
4. Softwareini memiliki kelebihan sebagai berikut:
a. Pembeli dapat melihat detail produk.
b. Pembeli akan dapat konfirmasi pendaftaran dan pemesanan melaluiemaildariwebsite.
