RANCANG BANGUN E-COMMERCE SEBAGAI STRATEGI
PENINGKATAN PENJUALAN PRODUK UMKM DESA
ALASMALANG SEBAGAI PILOT PROJECT
DESABROADBAND
LAPORAN PROYEK AKHIR
Proyek Akhir Ini Dibuat Dan Diajukan Untuk Memenuhi Salah Satu Syarat Untuk Kelulusan Program Studi Diploma III Teknik Informatika
Dan Mencapai Gelar Ahli Madya (A.Md)
Oleh :
Nelson Ariyadi Da Silva 9912201077
PROGRAM STUDI DIPLOMA III
PROGRAM STUDI TEKNIK INFORMATIKA
POLITEKNIK NEGERI BANYUWANGI
PERSEMBAHAN
Alhamdulillah puji syukur kepada Allah SWT, dengan limpahan rahmat-Nya Laporan Proyek Akhir ini dapat diselesaikan dalam waktu yang telah ditetapkan.
Proyek Akhir ini saya persembahkan untuk :
1. Ayahanda dan Ibunda tercinta, yang telah mendoakan serta memberikan kasih sayang bahkan pengorbanan selama ini sehingga saya deberikan bekal yang tak tergantikan yaitu ilmu yang bermanfaat.
2. Bapak Ibu Guru terhormat yang telah membimbing dan mengajarkan ilmu yang bermanfaat dengan penuh kesabaran dari Pendidikan TK sampai SMA.
3. Bapak Ibu dosen pembimbing yang terhormat yang telah membimbing saya demi kelancaran penyelesaian proyek akhir ini.
PERNYATAAN
Saya yang bertanda tangan dibawah ini :Nama : Nelson Ariyadi Da Silva NIM : 9912201077
menyatakan dengan sesungguhnya bahwa skripsi yang berjudul :
“Rancang Bangun E-commerce sebagai Strategi Peningkatan Penjualan Produk Umkm Desa Alasmalang sebagai Pilot Project Desa Broadband” adalah benar-benar hasil karya sendiri, kecuali jika disebutkan sumbernya dan belum pernah diajukan pada institusi manapun, serta bukan karya jiplakan/plagiat. Saya bertanggung jawab atas keabsahan dan kebenaran isinya sesuai dengan sikap ilmiah yang harus dijunjung tinggi.
Demikian pernyataan ini saya buat dengan sebenarnya, tanpa adanya tekanan dan paksaan dari pihak manapun serta bersedia mendapat sanksi akademik jika ternyata di kemudian hari pernyataan ini tidak benar.
Banyuwangi, 16 Agustus 2014 Yang menyatakan
RANCANG BANGUN E-COMMERCE SEBAGAI STRATEGI
PENINGKATAN PENJUALAN PRODUK UMKM DESA
ALASMALANG SEBAGAI PILOT PROJECT DESA
BROADBAND
PROYEK AKHIR
Diajukan Guna Melengkapi Proyek Akhir Dan Memenuhi Syarat-Syarat Untuk Menyelesaikan Program Studi Diploma III (D-3) Teknik Informatika Dan Mencapai Gelar Ahli Madya (A.Md)
Disusun Oleh : Nelson Ariyadi Da Silva
NIM. 9912201077
Proyek Akhir ini disetujui oleh dosen pembimbing Pada tanggal : 20 Agustus 2014
Pembimbing I Pembimbing II
Muh. Fuad Al Haris, S.T., M.T. Endi Sailul Haq, S.T.
RANCANG BANGUN E-COMMERCE SEBAGAI STRATEGI
PENINGKATAN PENJUALAN PRODUK UMKM
DESA ALASMALANG SEBAGAI PILOT
PROJECT DESA BROADBAND
Proyek Akhir ini telah disusun untuk memenuhi salah satu syarat memperoleh gelar NIP. 19560222 198811 1 001
RANCANG BANGUN E-COMMERCE SEBAGAI STRATEGI
PENINGKATAN PENJUALAN PRODUK UMKM DESA
ALASMALANG SEBAGAI PILOT PROJECT
DESABROADBAND
NamaMahasiswa : Nelson Ariyadi Da Silva
NIM : 9912201077
ABSTRAK
Banyuwangi merupakan salah satu kabupaten dengan pertumbuhan ekonomi terbaik nasional. Banyaknya investor yang mulai mempercayakan bisnisnya di kota paling ujung timur pulau jawa ini ikut serta merangsang pebisnis local banyuwangi untuk menciptakan dan mengembangkan bisnisnya. Berbagai macam cara digunakan guna memperluas pemasaran produk termasuk menggunakan jasa internet. Kemampuan masyarakat daerah dalam menciptakan lahan bisnis diwujudkan dengan adanya UMKM di desa setempat. Desa Alasmalang menjadi salah satu contoh desa dengan UMKM terbanyak di Banyuwangi. Pemasaran yang mereka gunakan selama ini hanya dari mulut kemulut atau secara manual. Dengan adanya potensi yang begitu besar di desa tersebut maka dibuatlah proyek Desa Broadband, dimana proyek ini akan mengangkat potensi desa Alasmalang dalam bidang ekonomi, sosial, budaya, kesehatan, dan pendidikan dengan memanfaatkan teknologi yang ada pada saat ini. Dibidang ekonomi khususnya UMKM diperlukan terobosan baru dalam membantu pemasaran produk. E-commerce merupakan aplikasi penjualan berbasis web yang dapat membantu UMKM memasarkan produknya hanya dengan megirimkan informasi seputar produk yang mereka miliki. Aplikasi ini juga membantu konsumen yang jauh dengan desa Alasmalang untuk memesan produk yang dipasarkan. Dalam perancangan serta pembangunan aplikasi ini, penulis menggunakan yii framework yang merupakan pemrograman berbasis objek, mysql
ARCHITECTURE OF E-COMMERCE AS A STRATEGY OF
INCREASED UMKM ALASMALANG VILLAGE PRODUCT
SALES AS A PILOT PROJECT BROADBAND VILLAGE
NamaMahasiswa : Nelson Ariyadi Da Silva
NIM : 9912201077
ABSTRACT
Banyuwangi is a Regency in the best national economic growth. Many investors who began to entrust his business in the most eastern city tip of the island of Java is stimulating local businesses participate of banyuwangi to create and develop its business. A variety of methods used to expand marketing of products including using internet services. The ability of regional community in creating business land embodied by the presence UMKM in local villages. The village Alasmalang being just one example of the village with the largest UMKM in Banyuwangi. Marketing they use for this is just from the mouth of controlled or manually. With such a huge potential in the village, village of Broadband projects were underway then, where this project will raise the potential of the village of Alasmalang in the field of economic, social, cultural, health, and education by leveraging existing technologies at this time. In the field of the economy, especially UMKM needed a new breakthrough in assisting product marketing. E-commerce is a web based sales application that can help UMKM to market their products by simply information about the products they have. This application also helps consumers away with village Alasmalang to order the products marketed. In the design and construction of this application, the author uses yii framework which is the object-based programming, mysql DBMS as HTML and CSS, as supporter of this application.
KATA PENGANTAR
Puji syukur kehadirat Allah SWT atas segala rahmat dan karunianya sehingga penilis dapat menyelesaikan proyek akhir yang berjudul “Rancang Bangun E-commerce sebagai strategi peningkatan penjualan produk UMKM desa Alasmalang sebagai pilot project desa broadband”. Proyek akhir ini disusun untuk memenuhi salah satu syarat menyelesaikan pendidikan diploma tiga (D3) pada Program Studi Teknik Informatika Politeknik Negeri Banyuwangi .
Penyusunan proyek akhir ini tidak lepas dari bantuan berbagai pihak. Oleh karena itu, penulis ingin menyampaikan ucapan terima kasih kepada:
1. Ir.H.Asmuji, MM selaku direktur Politeknik Banyuwangi.
2. Muh.Fuad Al Haris,S.T.,M.T selaku ketua program Studi Teknik Informatika. 3. Muh.Fuad Al Haris,S.T.,M.T dan Endi Sailul Haq, S.T selaku pembimbing pertama
dan pembimbing kedua.
4. Farisqi Panduardi, S.ST.,M.T dan Aulia El Hakim, S.ST.,M.T selaku penguji.
5. Ayahanda “Nur Khojin” dan Ibunda “Leni Andriyani”tercinta, yang telah mendoakan serta memberikan kasih sayang bahkan pengorbanan sehingga saya diberikan bekal yang tak tergantikan yaitu ilmu yang bermanfaat.
6. Bapak dan ibu dosen Teknik Informatika yang telah membantu membimbing selama ini, dan membimbing jalannya Proyek Akhir ini.
7. Serta semua pihak yang tidak dapat disebutkan satu persatu.
Penulis juga menerima segala kritik dan saran dari semua pihak demi kesempurnaan proyek akhir ini. Dan penulis berharap proyek akhir ini dapat bermanfaat.
Banyuwangi, 16 Agustus 2014
DAFTAR ISI
BAB II. TINJAUAN PUSTAKA...5
2.1Pengertian E-commerce...5
2.2Yii Framework...6
2.2.1 Fitur Yii...6
2.2.2 Kelebihan Yii Framework...7
2.2.3 Kekurangan Yii Framework...7
2.3 Hypertext Markup Language(HTML)...7
2.4 MYSQL...8
2.5CSS...9
2.6 Konsep Pemodelan Sistem...10
2.6.2 Use Case Diagram...11
BAB III. METODOLOGI...13
3.1 Gambaran Umum E-commerce Produk UMKM Desa Alasmalang...13
3.2 Tempat dan Waktu Penelitian...13
3.2.1 Tempat Penelitian...13
3.2.2 Waktu Penelitian...13
3.3 Alat dan Bahan...14
3.4 Diagram Blok Proyek Akhir...15
3.4.1 Diagram Alur Proses Proyek Akhir...15
3.4.2 Activity Diagram...16
3.4.3 Use Case Diagram...17
3.4.3a Use Case Diagram Sistem Aplikasi E-commerce...17
3.4.3b Use Case DiagramPengunjung Web...19
3.5 Flowchart...25
3.5.1 Flowchart Proses Login...25
3.5.2 Flowchart Pemesanan oleh Visitor...26
3.5.3 Flowchart Proses Transaksi...27
BAB IV. HASIL DAN PEMBAHASAN...28
4.2.1 Login...35
4.2.2 Membuat Akun...36
4.2.3 Memesan Produk...37
4.2.4 Shopping Cart...38
4.2.5 Checkout...39
4.2.6 Invoice...41
4.2.7 Login Admin...42
4.2.8 Membuat Kategori...42
4.2.9 Update Kategori...44
4.2.10 Delete Kategori...45
4.2.11 Membuat Produk...46
4.2.12 Update Produk...48
4.2.13 Delete Produk...50
4.3 Perbandingan Strategi Secara Konvensional dan Menggunakan E-commerce...52
4.3.1 Pemasaran Produk Secara Konvensional...52
4.3.1.1 Iklan di Radio...52
4.3.1.2 Iklan di Media Cetak...55
4.3.1.3 Pemasaran Menggunakan Brosur...57
4.3.2 Strategi Pemasaran Produk Menggunakan E-commerce...60
4.3.3 Tabel Perbandingan Strategi Pemasaran...63
4.3.4 Alur Pembelian Secara Langsung atau E-commerce...64
4.3.4.1 Alur Pembelian Secara Langsung...64
4.3.4.2 Alur Pembelian Menggunakan E-commerce...65
4.3.5 Perbandingan Alur Pembelian...66
BAB V. KESIMPULAN DAN SARAN...68
5.1 Kesimpulan...68
5.2 Saran...68 DAFTAR PUSTAKA
DAFTAR TABEL
Tabel 2.1 Macam-macam simbol yang digunakan untuk menunjukan jenis operasi
pengolahan dalam suatu proses / prosedur...10
Tabel 2.2 Macam-macam simbol diagram use case yang digunakan untuk menggambarkan suatu prosedur...12
Tabel 3.1 Jadwal Kegiatan Penelitian...14
Tabel 3.2 Alat dan Bahan yang Digunakan...14
Tabel 3.3 Keterangan Use Case Memberikan Profil UMKM dan Produk...18
Tabel 3.4 Keterangan Use Case Input Profil UMKM...18
Tabel 3.5 Keterangan Use Case Input Produk UMKM...18
Tabel 3.6 Keterangan Use Case Melihat Informasi...19
Tabel 3.7 Keterangan Use Case Melihat Item...20
Tabel 3.8 Keterangan Use Case Belanja...20
Tabel 3.9 Keterangan Use Case Checkout...20
Tabel 3.10 Keterangan Use Case Registrasi...21
Tabel 3.11 Keterangan Use Case Mencari Item...22
Tabel 3.12 Keterangan Use Case Melihat Rekomendasi...22
Tabel 3.13 Keterangan Use Case Memasukkan ke Daftar Belanja...22
Tabel 3.14 Keterangan Use Case Login...24
Tabel 3.15 Keterangan Use Case Menjumlah Total...24
Tabel 3.16 Keterangan Use Case Transfer...24
Tabel 4.1 Biaya Memasang Iklan di Radio...55
Tabel 4.2 Biaya Memasang Iklan di Koran...57
Tabel 4.3 Biaya Pemasaran Menggunakan Brosur...59
Tabel 4.4 Biaya Pemasaran Menggunakan E-commerce...62
Tabel 4.5 Perbandingan Strategi Pemasaran...63
DAFTAR GAMBAR
Gambar 3.1Diagram Alur Proses Pengerjaan ProyekAkhir...15
Gambar 3.2 Desain Sistem Aplikasi E-Commerce Desa Alasmalang...16
Gambar 3.3 Diagram Activity E-Commerce Desa Alasmalang...16
Gambar 3.4 Diagram Use Case E-Commerce Desa Alasmalang...17
Gambar 3.5 Use Case Diagram Pengunjung Web...19
Gambar 3.6 Use Case Diagram Melihat Item...21
Gambar 3.7Use Case Diagram Checkout, Authentikasi, dan Pembayaran...23
Gambar 3.8 Flowchart Proses Login...25
Gambar 3.9Flowchart Proses Pemesanan...26
Gambar 3.10 Flowchart Proses Transaksi...27
Gambar 4.1 Tampilan Utama...28
Gambar 4.2 Halaman Login...29
Gambar 4.3 Halaman Register...29
Gambar 4.4 Form Penerima...30
Gambar 4.5 Halaman Kategori...31
Gambar 4.6 Halaman Produk...31
Gambar 4.7 Add to Cart...32
Gambar 4.8 Shopping Cart...33
Gambar 4.9 Checkout...33
Gambar 4.10 Panel Admin...34
Gambar 4.11 Pengolahan Data Produk...34
Gambar 4.12 Input Username dan Password Login...35
Gambar 4.13 User Berhasil Login...35
Gambar 4.14 Input Data User...36
Gambar 4.15 Input Data Penerima...37
Gambar 4.16 Data User Tersimpan di Database...37
Gambar 4.19 Data Produki Sementara...39
Gambar 4.20 Perubahan Quantity dan Total...39
Gambar 4.21 Delete Produk...39
Gambar 4.22 User Login...40
Gambar 4.23 Data User...40
Gambar 4.24 Produk yang di Pesan...40
Gambar 4.25 Data Penerima dan Tarif Pengiriman...40
Gambar 4.26 Metode Pembayaran dan Total Pembayaran...41
Gambar 4.27 Invoice dengan Data Tidak Lengkap...41
Gambar 4.27 Invoice dengan Data Lengkap...42
Gambar 4.29 Login sebagai Admin...42
Gambar 4.30 Halaman Kategori pada Panel Admin...43
Gambar 4.31 Admin Input Data Kategori Baru...43
Gambar 4.32 Admin Input Data Kategori...43
Gambar 4.33 Kategori Baru Tersimpan...44
Gambar 4.34 Admin Mengupdate Nama Kategori...44
Gambar 4.35 Kategori Baru Setelah Update...44
Gambar 4.36 Memilih Kategori yang akan di Hapus...45
Gambar 4.37 Delete Kategori...45
Gambar 4.38 Kategori Terhapus...45
Gambar 4.39 Halaman Produk...46
Gambar 4.40 Input Nama dan Kategori...46
Gambar 4.41 Input Gambar Produk...47
Gambar 4.42 Upload Gambar Produk...47
Gambar 4.43 Upload Gambar Sukses...47
Gambar 4.44 Produk Baru Tersimpan...48
Gambar 4.45 Produk Baru di Halaman Utama...48
Gambar 4.46 Produk Red Box...49
Gambar 4.47 Update Nama Produk...49
Gambar 4.48 Red Box Menjadi Update Produk...49
Gambar 4.49 Halaman Utama Ikut Update...50
Gambar 4.51 Pesan yang Muncul Ketika akan Menghapus Produk...50
Gambar 4.52 “Produk Baru” Terhapus...51
Gambar 4.53 “Produk Baru” Terhapus dari Halaman Utama...51
Gambar 4.54 Cara Pemasangan Iklan di Radio...54
Gambar 4.55 ProsesPembuatan Iklan di Media Cetak...56
Gambar 4.56 Proses Pembuatan Brosur...59
Gambar 4.57 Proses Pembuatan E-commerce...62
Gambar 4.58 Proses Pembelian Secara Lagsung...64
BAB 1
PENDAHULUAN
1.1 Latar belakang
Perkembangan internet menyebabkan terbentuknya sebuah dunia baru yang lazim disebut dunia maya yang memungkinkan setiap individu melakukan interaksi dengan individu lain tanpa batas. Sehingga globalisasi yang sempurna sebenarnya telah berjalan di dunia maya yang menghubungkan seluruh komunitas digital. Dari seluruh aspek kehidupan manusia, sektor bisnis merupakan sektor yang paling terkena dampak dari perkembangan teknologi informasi dan telekomunikasi serta paling cepat tumbuh. Melalui e-commerce, untuk pertama kalinya seluruh manusia di muka bumi memiliki kesempatan dan peluang yang sama agar dapat bersaing dan berhasil berbisnis di dunia maya.
E-commerce adalah suatu jenis dari mekanisme bisnis secara elektronik yang memfokuskan diri pada transaksi bisnis berbasis individu dengan menggunakan internet (teknologi berbasis jaringan digital) sebagai medium pertukaran barang atau jasa baik antara dua buah institusi (business to business) dan konsumen langsung (business to consumer), melewati kendala ruang dan waktu yang selama ini merupakan hal-hal yang dominan. Menurut Suyanto [1], E-Commerce secara umum dapat diartikan yaitu proses membeli, menjual, baik dalam bentuk barang, jasa ataupun informasi, yang dilakukan melalui media internet.
memesan, dan membeli produk. Pembayaran dilakukan secara langsung saat itu juga, sehingga konsumen harus memperkirakan berapa besar yang harus dibayar olehnya ke penjual.
Dalam penerapan e-commerce di Indonesia hanya sedikit diantaranya yang membahas seputar produk UMKM suatu desa. Pada umumnya e-commerce yang berkembang di masyarakat memuat produk pribadi atau produk dari beberapa orang yang tidak terorganisir. Terlalu banyaknya produk dari orang yang berbeda, kurang jelasnya penanggung jawab menimbulkan keraguan di benak masyarakat sebagai konsumen untuk melakukan transaksi secara online. Disamping itu, masyarakat juga tidak bisa berharap banyak untuk mendapatkan barang dengan mutu yang sesuai dengan harapannya, masyarakat harus siap kecewa apabila barang yang sampai ternyata tidak sesuai dengan gambar. Tidak dicantumkannya detail atau spesefikasi produk dengan baik serta gambar produk yang kurang apa adanya, mempersulit konsumen melakukan penilaian terhadap kualitas produk tersebut. Kekecewaan konsumen semakin bertambah dengan tidak adanya
contack person yang dapat dihubungi atau ruang dalam website untuk mereka menuangkan pendapatnya.
Mengacu pada permasalahan diatas, sistem yang akan dibuat adalah
“RANCANG BANGUN E-COMMERCE SEBAGAI STRATEGI
PENINGKATAN PENJUALAN PRODUK UMKM DESA ALASMALANG SEBAGAI PILOT PROJECT DESA BROADBAND” sebagai e-commerce
1.2 Rumusan Masalah
Dari penjelasan latar belakang di atas dapat dirumuskan masalah sebagai berikut:
1) Bagaimana pembangunan sarana untuk mempromosikan produk secara digital.
2) Bagaimana penyediaan layanan transaksi penjualan jarak jauh yang bisa mempermudah dalam memperluas wilayah pemasaran.
3) Bagaimana pembangunan sarana pembelian dan pembayaran untuk calon konsumen yang bisa dilakukan secara transfer via rekening.
1.3 Batasan Masalah
Dalam proyek akhir ini akan dilakukan beberapa batasan masalah sebagai berikut:
1) E-commerce dibangun menggunakan yii framework dan mysql.
2) Produk yang dipasarkan hanya berasal dari UMKM desa Alasmalang.
3) Terdapat 3 kategori yang dipasarkan meliputi monte, kerajinan dari kayu dan kerajinan dari keramik.
4) Pembayaran dilakukan dengan elektronik transfer atau mobile banking di nomor rekening yang tertera dalam website.
5) Pengurangan dan penambahan stok produk dapat dilakukan setelah adanya konfirmasi dari owner UMKM.
1.4 Tujuan
Tujuan dari proyek akhir ini, antara lain:
1) Membantu UMKM desa Alasmalang dalam penyebarluasan informasi dan promosi produk.
2) Memfasilitasi transaksi jarak jauh antara konsumen dan UMKM sehingga memperluas market exposure.
1.5 Manfaat
Pembuatan proyek akhir ini diharapkan dapat bermanfaat untuk:
1) Meningkatkan market exposure produk UMKM desa alasmalang dilingkup dalam maupun luar kota.
2) Mensukseskan proyek desa broadband sehingga dapat ditularkan ke desa-desa yang lain.
3) Mempermudah konsumen agar bisa menghemat waktu, biaya dan tenaga saat membeli produk UMKM yang tertera karena tidak perlu datang langsung ketoko.
4) Dijadikan referensi bagi mahasiswa yang ada dilingkungan Politeknik Negeri Banyuwangi untuk penyusunan proyek akhir selanjutnya, serta dapat dijadikan acuan bagi mahasiswa untuk menambah ilmu yang mereka miliki di bidang rekayasa perangkat lunak.
BAB II
TINJAUAN PUSTAKA
2.1Pengertian E-commerce [1]
Electronic commerce (EC) merupakan konsep baru yang bisa digambarkan sebagai proses jual beli barang atau jasa pada Word Wide Web internet atau proses jual beli atau pertukaran produk, jasa dan informasi melalui jaringan informasi termasuk internet.
Sedangkan Onno W. Purbo dan Aang Wahyudi yang mengutip pendapat dari David Baum, menyebutkan bahwa “e-commerceis a dynamic set of technologies, applications, and business procces that link enterprises, consumers, and communities through electronic transaction and the electronic exchange of goods, services, and information”. Bahwa e-commerce merupakan suatu set dinamis teknologi, aplikasi dan proses bisnis yang menghubungkkan perusahaan, konsumen dan komunitas melalui transaksi elektronik dan perdagangan barang, pelayanan dan informasi yang dilakukan secara elektronik.
E-commerce digunakan sebagai transaksi bisnis antara perusahaan yang satu dengan perusahaan yang lain, antara perusahaan dengan pelanggan, atau antara perusahaan dengan institusi yang bergerak dalam pelayanan public. Jika diklasifikasikan, sistem e-commerce terbagi menjadi tiga tipe aplikasi, yaitu:
1. Electronik Markets (EMs), adalah sebuah sarana yang menggunakan teknologi informasi dan komunikasi untuk melakukan/menyajikan penawaran dalam sebuah segmen pasar, sehingga pembeli dapat membandingkan berbagai macam harga yang ditawarkan.
2. Electronic Data Interchange (EDI) merupakan sarana untuk mengefisienkan pertukaran data transaksi-transaksi regular yang berulang dalam jumlah besar antara organisasi-organisasi komersial.
4. dalam penjualan produk dan jasa. Transaksi yang dapat dilakukan di internet antara lain pemesanan/pembelian barang dimana barang akan dikirim melalui pos atau sarana lain setelah uang masuk ke rekening penjual.
2.2 Yii Framework [2]
Yii meruapakan salah satu dari sederatan PHP framework yang bersifat open source.Berdasarkan situs resminya, Yii adalah Framework (kerangka kerja) PHP berbasis komponen, berkinerja tinggi untuk pengembangan aplikasi web
berskala besar.
Yii juga menyediakan reusability maksimum dalam pemrograman web
dan mampu meningkatkan kecepatan pengembangan secara signifikan. Nama Yii singkatan dari “ Yes it is!”.
2.2.1 Fitur Yii
a) Menggunakan pola MVC, pola standart pengembangan aplikasi yang memisahkan tampilan, logic program, dan modelnya.
b) Menggunakan database abstraction layer seperti Data Accsess Objects
(DAO) dan Active Record untuk memudahkan interaksi antar database. c) Terintegrasi dengan JQuery Javascript Framework. Walaupun
menggunakan JQuery sebagai internal javascript librari, namun Yii dapat menggunakan librari lain tanpa terjadi bentrok.
d) Mendukung Internationalization (I18N) and localization (L10N) untuk memudahkan pengembangan aplikasi dalam multi bahasa dan lokasi seperti penggunaan waktu dan tanggal.
e) Memiliki layercache untuk cache data, halaman, sebagian, dan keseluruhan aplikasi sehingga dapat meningkatan performance dengan beragam pilihan media cache. Penggunaan media cache seperti database, APC, memcache, dan sebagainya mudah diatur tanpa melakukan perubahan besar pada kode.
f) Fitur penanganan error dan login, sehingga memudahkan pengembangan dalam melakukan debuging aplikasi dalam masa pengembangan aplikasi. g) Penggunaan time, memudahkan pengembangan aplikasi dalam merancang
h) Console, penggunaan perintah pada console untuk melakukan beragam perintah otomatis seperti mengenerate struktur dasar aplikasi, model,crud, dan sebagainya.
i) Dukungan Authentication dan authorization internal sehingga memudahkan pengembangan aplikasi dengan fitur autentikasi.
2.2.2 Kelebihan Yii Framework
Ada beberapa keuntungan yang dapat penulis ambil dalam penggunaan
framework PHP Yii berikut. Keuntungan dari Yii antara lain adalah:
1. Yii adalah salah satu framework yang sangat ringan dan dilengkapi dengan solusi caching yang memuaskan.
2. Yii sangat cocok untuk pengembangan aplikasi dengan lalu lintas tinggi, seperti portal, forum, sistem manajemen konten (CMS), sistem e-commerce, dll
3. Yii didokumentasi dengan jelas, efisien, dan kaya-fitur. 2.2.3 Kekurangan Yii Framework
Tidak banyak kekurangan yang ditemui pada penggunaan Yii.Yii cukup mencakup segala macam fitur-fitur yang diperlukan dalam membangun sebuah
website.Namun, bukan berarti Yii tidak mempunyai kekurangan.Salah satu kekurangan Yii yang cukup signifikan adalah tidak compatibleYii dengan PHP 4. 2.3HTML( Hypertext Markup Language ) [3]
HTML ( Hypertext Markup Language )adalah suatu bahasa yang digunakan untuk menulis halaman web. HTML dirancang untuk digunakan tanpa tergantung pada suatu platform tertentu (platform independent).Dokumen HTML adalah suatu dokumen teks biasa, dan disebut sebagai markuplanguage karena mengandung tanda – tanda (tag) tertentu yang digunakan untuk menentukan tampilan suatu teks dan tingkat kepentingan teks tersebut dalam suatu dokumen.
Berbeda dengan dengan dunia pemrograman biasa, HTML tidak mengenal variabel, fungsi, dan kata kunci lainnya. Selama penulisan baris-baris HTML, anda akan akrab dengan 3 istilah berikut :
2. Element - Jenis-jenis dari tag. HTML mempunyai banyak elemen untukberbagi keperluan dengan berbagai bentuk penggunaan.
3. Attribute – Digunakan untuk memodifikasi nilai dari elemen HTML. Suatu elemen biasanya mempunyai banyak elemen.
2.4 MySQL[3]
MySQL termasuk jenis RDBMS (Relational Database Management System).Sehingga istilah seperti tabel, baris, dan kolom tetap digunakan dalamMySQL.Pada MySQL sebuah database mengandung satu beberapa tabel, tabel terdiri dari sejumlah baris dan kolom.
Menurut Setiyo, pernyataan – pernyataan SQL dapat dibagi menjadi 2 kategori, yaitu pernyataan – pernyataan Data Manipulation Language (DML) dan Data Definition Language (DDL).Pernyataan – pernyataan DML berkaitan dengan data, baik pengambilan ataupun modifikasian data supaya tetap up-to-date. Sedangkan penyataan – pernyataan DDL berkaitan dengan pembuatan atau pengubahan tabel dan objek – objek database lainnya seperti view dan index. Keunggulan dari MySQL :
a. Ditulis dalam bahasa C dan C++. Telah dites menggunakan berbagai
compiler berbeda.
b. Bekerja pada banyak platform berbeda, seperti Windows, Linux, Unix, FreeBSD, dan Mac OS.
Mendukung banyak tipe field, diantaranya : integer bertanda / tak bertanda 1, 2, 3, 4, dan 8 byte, float, double, char, varchar, text, blob, date, time, datetime, timestamp, year, set, dan enum.
2.5 CSS (Cascade Style Sheet) [4]
CSS memiliki kepanjangan Cascade Style Sheet ini digunakan para web designer untuk mengatur style elemen yang ada dalam halaman web mereka. Mulai dari menformat text, sampai menformat layout.Tujuan dari penggunaan CSS ini adalah supaya diperoleh suatu kekonsistenan style pada elemen tertentu.
Dengan menggunakan CSS, anda akan lebih mudah mengatur style elemen dalam halaman web anda. Sebagai contoh, misalnya untuk mengatur style elemen
CSS anda cukup menuliskan proprti dari elemen heading tersebut sekali saja, dan anda akan memperoleh hasil yang di inginkan.
CSS merupakan salah satu bahasa pemrograman website untuk mengendalikan beberapa komponen dalam sebuah website sehingga akan lebih terstruktur dan seragam. Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa file. Pada umumnya CSS dipakai untuk memformat tampilan halaman website yang dibuat dengan bahasa HTML dan XHTML.CSS dapat mengendalikan ukuran gambar, warna body teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri/kanan/atas/bawah, dan parameter lainnya. 2.6 Konsep Pemodelan Sistem [5]
2.6.1 Flowchart
Flowchart adalah bagan-bagan yang mempunyai arus yang menggambarkan langkah-langkah penyelesaian suatu masalah.Flowchart
merupakan penyajian dari suatu algoritma.
Ada dua macam flowchart yang menggambarkan proses dengan komputer, yaitu:
1. Sistem Flowchart
Bagan yang memperlihatkan urutan proses dalam sistem dengan menunjukan alat media input, output serta jenis media penyimpanan dalam proses pengolahan data.
2. Program Flowchart
Tabel 2.1 Macam-macam simbol yang digunakan untuk menunjukan jenis operasi pengolahan dalam suatu proses / prosedur.
SIMBOL NAMA FUNGSI
TERMINATOR Permulaan/ Akhir
Program Garis Alir (FLOW LINE) Arah Aliran Program
PREPARATION Proses Inisialisasi/ pembagian harga awal
PROSES Proses
Perhitungan/proses pengolahan data
INPUT/OUTPUT DATA Proses Input/Output
data, parameter, bagian flowchart yang
berada pada satu
Use case adalah gambaran fungsionalitas dari suatu sistem, sehingga
dalam sebuah model serta di realisasikan oleh sebuah collaboration. Umumnya
use case digambarkan dengan sebuah elips dengan garis yang solid.
Use-case diagram dapat digunakan selama proses analisis untuk menangkap requirement sistem dan untuk memahami bagaimana sistem seharusnya bekerja. Selama tahap desain, use-case diagram berperan untuk menetapkan perilaku sistem saat diimplementasikan.Dalam sebuah model mungkin terdapat satu atau beberapa use-case diagram. Kebutuhan atau
requirements system adalah fungsionalitas yang harus disediakan oleh sistem kemudian didokumentasikan pada model use-case yang menggambarkan fungsi sistem yang diharapkan, dan yang mengelilinginya (actor),Secara umum use case
digambarkan seperti dibawah ini: a. Pola perilaku sistem
b. Urutan transaksi yang berhubungan yang dilakukan oleh actor Use casediagram terdiri dari:
a. Use case b. Actor
c. Relationship
d. System boundary boxes e. Packages
Ada beberapa relasi yang terdapat pada use case diagram: 1. Association, menghubungkan link antar element.
2. Generalization, disebut juga inheritance (pewarisan), sebuah elemen dapat merupakan spesialisasi dari elemen lainnya.
3. Dependency, sebuah element bergantung dalam beberapa cara ke element lainnya.
4. Aggregation, bentuk assosiation dimana sebuah elemen berisi elemen lainnya.
Tabel 2.2 Macam-macam simbol diagram use case yang digunakan untuk menggambarkan suatu prosedur
GAMBAR NAMA KETERANGAN
dengan use case.
Hubungan dimana objek anak (descendent) berbagi perilaku dan struktur data dari objek yang ada di atasnya objek induk (ancestor).
Include Menspesifikasikan bahwa use case sumber
secara eksplisit.
Extend
Menspesifikasikan bahwa use case target memperluas perilaku dari use case sumber pada suatu titik yang diberikan.
Association Apa yang menghubungkan antara objek satu
dengan objek lainnya.
System Menspesifikasikan paket yang menampilkan
sistem secara terbatas.
Use Case
Deskripsi dari urutan aksi-aksi yang ditampilkan sistem yang menghasilkan suatu hasil yang terukur bagi suatu actor
dilakukan secara bertahap mulai dari perancangan sistem, proses installasi dan konfigurasi, pengujian serta analisis, dan kesimpulan dari hasil proyek akhir.
3.1 Gambaran Umum E-commerce Produk UMKM Desa Alasmalang
E-commerce produk UMKM Desa Alasmalang ini dirancang sebagai media yang memudahkanowner UMKM untuk memasarkan produk mereka.Dengan memasukkan produk mereka dalam aplikasi secara berkala, memudahkan mereka untuk menginformasikan produk terbaru.Konsumen juga semakin mudah untuk melihat spesifikasi produk dan melakukan transaksi pembelian dengan owner melalui aplikasi ini.
3.2 Tempat dan Waktu Penelitian
Tempat penelitian adalah tempat yang digunakan untuk mengaplikasikan seluruh rangkaian program, dan waktu penelitian adalah kapan Aplikasi yang sudah dibuat untuk diterapkan jika sudah selesai
3.2.1 Tempat Penelitian
Tempat penelitian Proyek Akhir ini akan dilakukan di desa Alasmalang Kecamatan Singojuruh Kabupaten Banyuwangi, yang nantinya desa tersebut akan dijadikan tempat penerapan Aplikasi yang telah dibuat.
3.2.2 Waktu Penelitian
Penelitian akan dilakukan selama kurang lebih 5 bulan, mulai bulan Maret 2014 sampai dengan Juli 2014 yang mencakup tahap proses pengerjaan proposal sampai pelaporan. Adapun jadwal proyek akhir tahun akademik 2013/2014 ditunjukan pada Tabel 3.1.
Tabel 3.1 Jadwal Pelaksanaan Proyek Akhir
N o.
Kegia tan
Bula
n ke- Maret April Mei Juni Juli
Ming
gu ke 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4
Proposal Hardware maupun Software ditunjukan pada Tabel 3.2.
Tabel 3.2 Alat dan Bahan yang digunakan N
o Alat Jenis
1 Komputer / Laptop Hardwar
e
2 Notepad++ Software
3 Xampp sebagai penyimpanan database
MySQL Software
4 YII Framework untuk membangun aplikasi Software
3.4 Diagram Blok Proyek Akhir
Diagram Blok Proyek Akhir adalah diagram yang dibuat untuk mempetakan proses kerja pada suatu proyek, hal ini bertujuan untuk memudahkan seseorang dalam memahami alur kerja di dalamnya.
3.4.1 Diagram Alur Proses Proyek Akhir
LOGIN ADMIN OWNER UMKM
MENGELOLA WEB MENGELOLA PRODUK
TRANSAKSI Gambar 3.1 Diagram Alur Proses Pengerjaan Proyek Akhir Penjelasan :
1. Perancangan
Hasil dari perancangan aplikasi, menggunakan aplikasi e-commerce
untuk informasi serta transaksinya, dengan menggunakan sistem autentikasi
pada admin, owner dan konsumen, sedangankan untuk antarmuka menggunakan browser firefox.
2. Analisa
Mengumpulkan kebutuhan secara lengkap dengan cara wawancara dengan bagian terkait baik didalam wawancara terpisah maupun didalam grup diskusi. Perencanaan, pengumpulan data dan analisis diperoleh melalui studi literatur ini.Studi ini dilaksanakan di desa Alasmalang Kecamatan Singojuruh Kabupaten Banyuwangi.
3. Desain
Pada tahapan ini adalah melakukan proses desain dan melakukan perbaikan-perbaikan apabila masih terdapat ketidak sesuaian desain antara
user dan analis. Gambar 3.2 menunjukan desain prototype dari SistemAplikasiE-commerce
Gambar 3.2 Desain Sistem Aplikasi E-commerce Desa Alasmalang
4. Implementasi
Pelaksanaan dari sebuah rencana yang sudah disusun secara matang dan terperinci. Implementasi ini dilakukan setelah perencanaan sudah selesai 3.4.2 Activity Diagram
Diagram activity merupakan gambaran aktifitas web secara umum.
Gambar 3.3 Diagram Activity E-commerce Desa Alasmalang
Member dapat melakukan pencarian produk, melihat detail produk, menambahkan produk pada daftar belanja, dan checkout.Member dapat melihat daftar belanja.Checkout diasumsikan hanya dapat dilihat oleh pengguna yang telah memiliki akun dan telah login.
3.4.3 Diagram Uses Case
3.4.3a. Uses Case DiagramSistem Aplikasi E-commerce Desa Alasmalang
diagram sistem AplikasiE-commerce Desa Alasmalang dan Use Case komentar di tunjukan pada Tabel 3.3 hingga Tabel 3.6 secara berurutan.
Gambar 3.4 Uses Case Diagram Sistem Aplikasi E-commerce Desa Alasmalang Tabel 3.3 Keterangan Use Case Memberikan Pofil UMKM dan Produk
Use Case Name Memberikan Pofil UMKM dan Produk
Actor Admin dan Member
Deskripsi Member member profil dan produk ke aadmin
Normal Course 1. Menampilkan profil dan produk UMKM pada aplikasi
Alternate Course 2a. Tidak ada profil dan produk yang diinputkan
Pre-Condition input profil dan produk UMKM
Post-Condition Menampilkan profil dan produk UMKM
Assumption
-Tabel 3.4 KeteranganUse Case Input profil UMKM
Use Case Name Input profil UMKM
Actor Admin dan Sistem
Deskripsi Menginputkan profil UMKM
Normal Course 1. Admin menginputkan profil UMKM 2. Simpan informasi yang sudah diinputkan
3. Informasi yang telah disimpan dapat ditampilkan
Alternate Course 3a. Tidak ada informasi yang diinputkan 4a. Tidak ada informasi yang disimpan
Pre-Condition Input profil
Post-Condition Menampilkan profil
-Tabel 3.5 KeteranganUse Case Input produk UMKM
Use Case Name Input produk UMKM
Actor Admin dan Sistem
Deskripsi Menginputkan produk UMKM
Normal Course 1. Admin menginputkan produk UMKM 2. Simpan informasi yang sudah diinputkan
3. Informasi yang telah disimpan dapat ditampilkan
Alternate Course 2a. Tidak ada informasi yang diinputkan 3a. Tidak ada informasi yang disimpan
Pre-Condition Input produk
Post-Condition Menampilkan produk
Assumption
-Tabel 3.6 Keterangan Use Case Melihat Informasi
Use Case Name Melihat Informasi
Actor Pengguna dan Sistem
Deskripsi Informasi yang sudah diperbarui dan ditampilkan oleh sistem dapat dilihat oleh pengguna
Normal Course 1. Informasi yang telah diperbarui akan tampil pada halaman e-commerce
2. Pengguna dapat melihat informasi
Alternate Course 2a. tidak ada informasi
Pre-Condition Melihat Informasi
Post-Condition Halaman utama
Assumption
-3.4.3b. Uses Case Pengunjung Web
Gambar 3.5 Use CaseDiagram Pengunjung Web
Tabel 3.7 Keterangan Use Case Melihat Item Use Case Name Melihat Item
Actor Pengguna dan Sistem
Deskripsi Informasi yang sudah diperbarui dan ditampilkan oleh sistem dapat dilihat oleh pengguna
Normal Course 1. Informasi yang telah diperbarui akan tampil pada halaman e-commerce
2. Pengguna dapat melihat informasi
Alternate Course 2a. tidak ada informasi
Pre-Condition Melihat Informasi
Post-Condition Halaman utama
Assumption
-Tabel 3.8 Keterangan Use Case Belanja
Use Case Name Belanja
Actor Pengguna dan Sistem
Deskripsi Pengguna memilih produk yang sudah ditampilkan oleh sistem
Normal Course 1. Produk yang telah diperbarui akan tampil pada halaman
e-commerce
2. Pengguna dapat memilih produk
2a. pengguna tidak memilih produk
Pre-Condition Memilih produk
Post-Condition Halaman utama
Assumption
-Tabel 3.9 Keterangan Use Case Checkout Use Case Name Checkout
Actor Pengguna, admin dan Sistem
Deskripsi Pengguna dan admin melihat checkout berisi total pembelian yang ditampilkan oleh sistem
Normal Course 1. Produk yang telah dipesan, spesifikasi dan harga akan tercantum pada checkout
Alternate Course 1a. pengguna tidak belanja 2a. tidak ada checkout Pre-Condition Memilih produk
Post-Condition Halaman checkout
Tabel 3.10 Keterangan Use Case Registrasi Use Case Name Registrasi
Actor PenggunaSistem
Deskripsi Pengguna melakukan registrasi dan disimpan pada sistem Normal Course 1. Menampilkan form registrasi
2. pengguna mengisi form registrasi
Alternate Course 2a. registrasi tidak sukses, pengguna tidak mengisi form
Pre-Condition registrasi Post-Condition Halaman utama
3.4.3c. Uses Case Melihat Item
Gambar 3.6 Use Case Diagram Melihat Item
Tabel 3.11 Keterangan Use Case Mencari Item Use Case Name Mencari Item
Actor Pengguna dan Sistem
Deskripsi Pengguna melakukan pencarian produk yang tersimpan dalam sistem
Normal Course 1. produk yang dicari akan tampil pada halaman e-commerce
2. Pengguna dapat melihat informasi
Alternate Course 2a. tidak ada produk yang dicari
Pre-Condition Mencari produk
Post-Condition Halaman utama
Assumption
-Tabel 3.12 Keterangan Use Case Melihat Rekomendasi
Use Case Name Melihat Rekomendasi
Actor Pengguna dan Sistem
Deskripsi Pengguna melihat produk yang direkomendasikan
Normal Course 1. Produk yang direkomendasi akan tampil pada halaman
e-commerce
2. Pengguna dapat melihat produk yang direkomendasi
Alternate Course 2a. tidak ada produk yang diinputkan
Pre-Condition Melihat rekomendasi
Post-Condition Halaman utama
Assumption
-Tabel 3.13 Keterangan Use CaseMemasukkan ke Daftar Belanja
Use Case Name Memasukkan ke Daftar Belanja
Actor Pengguna dan Sistem
Deskripsi Pengguna memilih produk-produk yang akan dibeli Normal Course 1. Produk yang dipilih akan masuk pada halaman daftar
belanja dan disimpan dalam sistem
2. Pengguna dapat melihat produk daftar belanja
Alternate Course 1a. tidak ada produk yang dipilih 2a. daftar belanja kosong
Pre-Condition Memilih daftar belanja
3.4.3d. Uses Case Checkout, Authentikasi dan Pembayaran
Diagram use case ini adalah gambaran fungsionalitas dari checkout, authentikasi, dan pembayaran. Gambar 3.5 menunjukan Use case
DiagramCheckout, Authentikasi dan Pembayaran.Use Case komentar di tunjukan pada Tabel 3.14 hingga Tabel 3.16 secara berurutan.
Gambar 3.7 Use Case Diagram Checkout, Authentikasi dan Pembayaran Tabel 3.14 Keterangan Use Case Login
Use Case Name LOGIN
Actor Pengguna dan Sistem
Deskripsi Validasi admin untuk masuk kedalam sistem Normal Course 1. Menampilkan form Login pada Aplikasi
2. Masukkan Username dan Password untuk login yang sudah tersimpan pada databse
Alternate Course 2a. Login tidak sukses, karena user dan password tidak tersimpan pada database
Pre-Condition Login
Post-Condition Register database Assumption
-Tabel 3.15 Keterangan Use Case Menjumlah Total
Use Case Name Menjumlah Total
Actor Pengguna dan Sistem
Deskripsi Sistem menampilkan total belanja
Normal Course 1. Produk yang dipilih disimpan oleh sistem 2. Sistem menampilkan total belanja
Alternate Course 1a. tidak ada produk yang dipilih 2a. Total belanja sama dengan nol
Post-Condition Menampilkan total belanja
Assumption
-Tabel 3.16 Keterangan Use Case Transfer
3.5 Flowchart
Flowchart berikut ini adalah bagan-bagan yang mempunyai arus yang menggambarkan langkah-langkah Aplikasi E-commerce UMKM Desa Alasmalang. Gambar 3.7 menunjukan Flowchart Login, Gambar 3.8 menunjukan
Flowchart Pemesanan dan Gambar 3.9 menunjukkan Flowchart Transaksi . 3.5.1 Flowchart Proses Login
Input Username & Password
Deskripsi Pengguna melakukan transfer ke nomor rekening yang tertera lalu mengkonfirmasi admin
Normal Course 1. Pengguna transfer lalu konfirmasi ke admin 2. Admin menyimpan bukti transfer
Alternate Course 1a. tidak ada transfer 2a. tidak ada yang disimpan
Pre-Condition Transfer ke rekening yang tertera
Post-Condition Admin menyimpan bukti transfer
-Halaman Menu Utama
START
Proses login
Pilih produk
beli?
Output checkout
Lanjut belanja?
tidak
ya
tidak ya
Gambar 3.8 Flowchart Proses Login
Pengguna login sebagai admin, owner UMKM, atau member dengan memasukkan username dan password yang sudah tersimpan dalam database. Jika pengguna sukses login maka akan masuk ke tampilan awal. Pengguna juga dapat mengakses web sesuai dengan hak akses. Admin memiliki hak akses untuk mengelola data produk, data pemesanan, data member, dan data UMKM.Owner
UMKM memiliki hak akses untuk mengelola data produk dan edit profil UMKM miliknya. Member memiliki hak akses untuk melakukan transaksi pembelian dan mengelola data pada akun pribadinya.
3.5.2 Flowchart Proses Pemesanan Oleh Visitor
Halaman Checkout START
Proses login
Input bukti pembayaran
Pengiriman barang
Output nomor resi
Gambar 3.9 Flowchart Proses Pemesanan
Member memasukkan username dan password yang langsung dicek oleh
database. Jika username dan password benar maka muncul tampilan awal dan
member dapat melakukan pembelian, jika salah maka sistem akan mengarahkan pengguna untuk login ulang atau membuat akun (jika belum punya akun).
Member dapat melakukan pembelian untuk beberapa barang dengan memilih barang satu persatu. Setelah memilih produk, member mengisi data berupa namamember, email, nomor telpon, jumlah barang yang dibeli, memilih agen pengiriman, kota tujuan dan alamat tujuan. Tampil total uang yang harus dibayarkan oleh member. Lanjut belanja jika ingin melanjutkan berbelanja dan
exit jika selesai belanja.
3.5.3 Flowchart Proses Transaksi
Gambar 3.10 Flowchart Proses Transaksi
Untuk mengetahui transaksi yang sudah dilakukan member, admin terlebih dahulu login. Melakukan cek order member. Setelah member melakukan pemesanan pada web maka member akan diarahkan untuk melakukan pembayaran, jika pembayaran sudah dilakukan maka member mengirim konfirmasi bukti pembayaran pada admin. Admin melanjutkan konfirmasi pada
owner UMKM, owner UMKM mengirim pesanan pada member serta mengirim nomor resi pengiriman pada admin yang nantinya akan ditampilkan pada web.
BAB IV
HASIL DAN PEMBAHASAN
4.1 Hasil
Berikut ini adalah tampilan hasil dan penjelasan dari sistem informasi manajemen notaris yang telah dibuat.
4.1.1 Tampilan Utama
Dalam website e-commerce umkm yang merupakan subweb dari
seputar owner dapat di akses pada link about us. Login dapat dilakukan oleh user dengan klik “login” pada kanan atas. Kategori yang ada sengaja penulis tampilkan untuk mempermudah pencarian sesuai kategori produk. Berikut adalah Gambar 4.1 tampilan utama yang telah dijelaskan diatas.
Gambar 4.1 Tampilan Utama 4.1.2 Account Login
Pengguna harus login terlebih dahulu agar nantinya dapat mengakses halaman checkout. Dengan kata lain, ada beberapa halaman dalam website ini yang masih bisa diakses tanpa harus login.Untuk login pengguna atau user harus memiliki akun, user yang belum memiliki akun dapat mendaftarkan akunnya dengan klik “Create an account”. “Registered Customer”, merupakan form untuk
user yang sudah memiliki akun dan melakukanlogindengan inputusername dan
Gambar 4.2 HalamanLogin
4.1.3 Membuat Account
Halaman ini berisi form pendaftaran akun baru. Pengguna mengisikan data pada form yang sudah tersedia, setelah itu pengguna dapat melakukan login
dengan username yang sudah terdaftar.Berikut adalah Gambar 4.3 Halaman
Register yang telah dijelaskan diatas.
Gambar 4.3 HalamanRegister
4.1.4 Form Penerima
Ketika registrasi akun, pengguna juga harus mengisi form yang disebut sebagai form penerima. Form ini harus terisi, untuk informasi pengiriman. Jika pengguna melakukan transaksi, maka pengiriman barang akan ditujukan kepada data penerima yang sudah terisi oleh pengguna. Data penerima juga dibutuhkan dalam menentukan besaran tarif yang dikenakan ketika proses pengiriman. Bila form ini tidak terisi, maka akan terjadi error ketika pengguna ingin mengakses
Gambar 4.4Form Penerima
4.1.5 Kategori
Kategori yang ada pada website ini terdiri dari kategori monte, kerajinan kayu, dan kerajinan perak.Untuk melihat produk di setiap kategori, pengguna yang sudah login atau belum hanya perlu klik kategori yang dimaksud.Berikut adalah Gambar 4.5 Halaman Kategori yang telah dijelaskan diatas.
Gambar 4.5Halaman Kategori
Informasi seputar produk dapat dilihat dengan klik gambar produk, maka akan muncul halaman produk. Halaman memuat informasi tentang nama produk, kode produk, ketersediaan produk, harga persatuan, jumlah produk dan detail produk. Pengguna dapat melihat gambar produk secara jelas dengan klik pada gambar, dan akan muncul juga gambar lain dari produk yang memungkinkan
user melihat dari sisi yang berbeda. Untuk melihat halaman ini user tidak perlu
login.Berikut adalah Gambar 4.6 Halaman Produk yang telah dijelaskan diatas.
Gambar 4.6Halaman Produk
4.1.7 Add to Cart
Tekan tombol “Add to cart” jika user ingin memasukkan produk ke keranjang belanja yang berarti user ingin memesan produk. Secara default produk yang tersimpan berjumlah satu bila user tidak merubah jumlah produk yang akan dipesan. Jika user ingin merubah jumlah produk yang akan dipesan, user dapat memesan kembali melalui halaman produk atau dapat merubah jumlah pada form
quantity pada halaman shopping cart. Berikut adalah Gambar 4.7 Add to Cart
Gambar 4.7Add to Cart
4.1.8 Shopping Cart
Menyimpan sementara produk yang user pilih.Halaman ini berisi gambar, nama, model, jumlah, harga perunit,dantotal hargaproduk yang dipesan
user. Untuk melihat halaman ini user tidak perlu login. Seperti yang telah dijelaskan sebelumnya, pada halaman ini user dapat melakukan perubahan pada jumlah produk dengan langsung memasukkan jumlah produk pada field quantity
lalu klik tombol biru yang merupakan tombol refresh. Tombol merah merupakan tombol delete, memungkinkan user untuk menghapus produk yang batal dipesan. User dapat melanjutkan belanja dengan klik continue shopping.Harga yang tertera pada halaman ini belum termasuk tarif pengiriman. Berikut adalah Gambar 4.8
Shopping Cart yang telah dijelaskan diatas.
Gambar 4.8Shopping Cart
4.1.9 Checkout
Halaman checkout hanya bisa diakses dengan beberapa kondisi.User
produk yang dibeli, tarif pengiriman yang sesuai dengan data penerima, serta metode pembayaran yang harus terisi. User harus mengisi nomor rekening, bila tidak terisi maka data transaksi tidak akan tersimpan dalam database. Setelah halaman checkout, user mengirimkan konfirmasi pemesanan dengan menekan tombol submit.Berikut adalah Gambar 4.9 Checkout yang telah dijelaskan diatas.
Gambar 4.9Checkout
4.1.10 Panel admin
Gambar 4.10Panel Admin 4.1.11 Pengolahan Data Produk
Pengolahan data produk hanya dapat dilakukan dalam panel admin.Admin mengolah data produk pada halaman ini. Admin dapat insert
produk, delete, danupdate produk. Informasi yang diperbarui pada halaman ini akan terupdate otomatis di frontend atau halaman untuk user.Berikut adalah Gambar 4.11 pengolahan data produk yang telah dijelaskan diatas.
Gambar 4.11Pengolahan Data Produk
4.2 Pengujian Sistem 4.2.1 Login
Terdapat dua halaman login pada website ini, halaman login untuk user
dan halaman login untuk admin.halamanlogin untuk user dapat diakses dengan klik login di halaman utama. Pada halaman ini juga user yang belum memiliki akun dapat melakukan registrasi akun dengan klik create an account. Login user
Gambar 4.12Input username dan password login
Gambar 4.13User Berhasil Login
4.2.2 Membuat Akun
penerima atas nama “sandriana” pada gambar 4.15. Gambar 4.16 data “ariana”
tersimpan dalam tabel user, gambar 4.17 data penerima “sandriana” tersimpan pada tabel penerima.
Gambar 4.14Input Data User
Gambar 4.16 Data User Tersimpan di Database
Gambar 4.17Data Penerima Tersimpan di Database 4.2.3 Memesan Produk
Klik gambar produk yang ingin dipesan, userakan menuju halaman produk. Pada halaman ini user dapat melihat detail produk serta memasukkan jumlah produk yang akan dipesan. Klik add to cart untuk memasukkan produk ke keranjang belanja. Gambar 4.18 menunjukkan userakan memesan produk “purple ring alasmalang” dengan jumlah barang satu. Setelah klik button add to cart
Gambar 4.18 Klik Add to Cart
4.2.4 Shopping Cart
Dalam Shopping cart, user dapat melakukan update jumlah produk atau
delete produk yang akan dipesan. Jumlah produk dapat dirubah dengan memasukkan jumlah pada field quantity.Gambar 4.19 menunjukan data produk sementara yang tersimpan.Gambar 4.20 menunjukkan perubahan jumlah produk “purple ring alasmalang” yang sebelumnya sebanyak satu menjadi tujuh dan total harga menjadi 52500setelah user menekan tombol biru yang merupakan tombol refresh. Klik tombol merah pada kolom produk untuk deleteproduk.Gambar 4.21 menunjukkan terhapusnya produk “3 rantai monte alasmalang” setelah tombol merah ditekan.
Gambar 4.19Data Produk Sementara
Gambar 4.21Delete Produk
4.2.5 Checkout
Halaman ini memuat data user, data produk yang di pesan, data penerima, tarif pengiriman, metode pembayaran dan total pembayaran.Data user yang muncul sesuai dengan user yang login ditunjukkan pada gambar 4.22 dan gambar 4.23 yaitu user “ariana”. Gambar 4.24 menunjukkan produk yang telah dipesan. Data penerima atas nama “sandriana” beserta tarif pengiriman ditunjukkan pada gambar 4.25. Gambar 4.26 merupakan metode pembayaran dan total pembayaran ditunjukkan oleh gambar 4.27.
Gambar 4.22User Login
Gambar 4.23Data User
Gambar 4.25Data Penerima dan Tarif Pengiriman
Gambar 4.26Metode Pembayaran dan Total Pembayaran 4.2.6 Invoice
Invoiceakan muncul setelah user menekan tombol submit, dengan catatan
user telah mengisi field untuk nomor rekening. Bila tidak terisi invoice tetap muncul namun kode invoice dan data produk yang dipesan tidak akan muncul seperti pada gambar 4.27, secara otomatis transaksi ini tidak tersimpan dalam database. Gambar 4.28 tampilan invoice dengan data lengkap.
Gambar 4.28Invoice dengan Data Lengkap
4.2.7 Login Admin
Untukmasuk ke panel admin, admin memiliki halaman login sendiri seperti pada gambar 4.29, admin memasukkan username dan password.
Admin dapat melakukan beberapa hal dalam panel admin seperti membuat kategori baru, melakukan update kategori, dan menghapus kategori.Pada gambar 4.30 menunjukan halaman kategori. Untuk membuat kategori klik insert maka muncul form seperti gambar 4.31 dan gambar 4.32, admin memasukkan data kategori baru yang diberi nama “kategori baru”. Gambar 4.34 menunjukkan “kategori baru” tersimpan.
Gambar 4.30Halaman Kategori pada Panel Admin
Gambar 4.32Admin Input Data Kategori
Gambar 4.33Kategori Baru Tersimpan 4.2.9 Update Kategori
Admin dapat mengupdate data kategori dengan menekan tombol edit pada kategori yang dimaksud. Gambar 4.34 admin merubah nama kategori yang semula beranama “kategori baru” menjadi “kategori baru yang dirubah” dan gambar 4.35 menunjukkan kategori tersimpan dengan nama “kategori baru yang dirubah”.
Gambar 4.35Kategori Baru Setelah Update
4.2.10 Delete Kategori
Delete kategori dapat dilakukan oleh admin dengan mencentang kategori terlebih dahulu lalu klik delete seperti pada gambar 4.36 yang menunjukkan kategori dengan nama “kategori baru yang dirubah” akan dihapus, kemudian akan muncul pesan seperti gambar 4.37.Gambar 4.38 menunjukkan “kategori baru yang dirubah” sudah terhapus.
Gambar 4.36Memilih Kategori yang akan Dihapus
Gambar 4.38Kategori Terhapus 4.2.11Membuat Produk
Membuat produk baru hanya dapat dilakukan oleh admin.Masuk ke halaman produk dengan tampilan seperti gambar 4.39, klik insert untuk membuat produk baru. Mengisi nama produk seperti contoh yaitu “produk baru” dan kategori produk “monte” pada form yang muncul seperti gambar 4.40. Memasukkan gambar produk seperti gambar 4.41.Untuk memasukkan gambar dari luar, klik upload seperti yang ditunjukkan pada Gambar 4.42.Setelah itu, muncul pesan seperti gambar 4.43 bila upload gambar sukses.Gambar 4.44 menunjukkan data produk baru bernama “Produk Baru” tersimpan. Setiap admin memasukkan produk terbaru maka produk tersebut akan muncul di halaman utama urutan teratas seperti gambar 4.45.
Gambar 4.40Input Nama dan Kategori
Gambar 4.41Input Gambar Produk
Gambar 4.42Upload Gambar Produk
Gambar 4.44Produk Baru Tersimpan
Gambar 4.45Produk Baru di Halaman Utama
4.2.12UpdateProduk
Gambar 4.46Produk Red Box
Gambar 4.47Update Nama Produk
Gambar 4.48Red Box Menjadi Update Produk
Gambar 4.49Halaman Utama Ikut Update
Menghapus salah satu produk yang sudah tersimpan bernama “Produk Baru” seperti gambar 4.50 setelah itu klik tombol delete. Muncul pesan seperti gambar 4.51, klik ok bila ingin menghapus. Gambar 4.52 menunjukkan produk bernama “Produk Baru” telah terhapus, begitu juga di halaman untuk user, gambar 4.53 menunjukkan produk bernama “Produk Baru” tidak ada.
Gambar 4.50Pilih Produk yang Akan dihapus
Gambar 4.51Pesan yang Muncul Ketika Akan Menghapus Produk
Gambar 4.53 “Produk Baru” Terhapus dari Halaman Utama
4.3 Perbandingan Strategi Secara Konvensional dan Menggunakan E-commerce
Memiliki tujuan yang sama seperti meningkatkan daerah pemasaran, memberikan informasi produk dengan cepat serta beberapa tupjuan lain, menimbulkan berbagai macam gagasan atau ide yang berkembang guna memenuhi tujuan yang sebenarnya yaitu mecapai target pasar untuk meningkatkan penjualan produk. Dari sekian banyak ide yang muncul menimbulkan pula penilaian dan anggapan tentang cara yang paling tepat dari segi efisiensi waktu yang digunakan, anggaran yang dikeluarkan maupun banyaknya sumber daya manusia yang terlibat. Sehingga muncul penggolongan terhadap cara-cara yang ada.
4.3.1 Pemasaran Produk Secara Konvensional
sasaran tertarik dan membeli. Strategi pemasaran konvensional sejak dulu hingga sekarang contohnya ialah iklan, direct marketing, dan sales promotion.
4.3.1.1 Iklan di Radio
Menggunakan radio sebagai media promosi mungkin bukan hal baru didunia periklanan. Dikalangan UMKM desa Alasmalang hampir semua UMKM pernah menempuh alternatif ini sebagai cara mereka mempromosikan produknya. Meski cukup terkenal ternyata langkah ini tidak selalu ditempuh oleh pelaku UMKM dikarenakan beberapa hal yang dianggap sebagai kelemahan dalam penerapan strategi ini. Berikut kelebihan dan kekurangan promosi melalui iklan di radio.
Kelebihan promosi di radio:
1. Biayanya relatif rendah (dalam artian hardware-nya serta dalam produksi siarannya).
2. Dapat diterima oleh siapa saja.
3. Lebih leluasa dalam penyampaian pesan-pesannya tanpa banyak varian-variannya.
4. Menimbulkan audio imaginatif. Efek yang ditimbulkan lebih dahsyat daripada efek visual. Daya tembus yang besar tidak mengenal rintangan. Radio yang menggunakan gelombang SW, MW, mempunyai kemampuan penetrasi area yang luas sehingga pesan yang disampaikan dapat mengatasi jarak, ruang dan waktu.
5. Radio dapat diterima dan didengar di areal tanpa listrik atau tidak selalu membutuhkan daya listrik.
1. Adanya biaya yang dikenakan pertayang dengan durasi terbatas serta masa berlaku iklan yang terbatas cukup.
2. Durasi iklan terbatas.
4. Pendengar sering kurang mendengarkan secara penuh karena diselingi melakukan pekerjaan lain.
5. Noise Factor.
6. Sulit untuk menyampaikan pesan-pesan yang kompleks.
7. Alternatif audiance dalam pemilihan stasiun lebih banyak ( persaingan yang ketat ).
Untuk memasang iklan di radio UMKM harus bersifat aktif dengan mendatangi langsung kantor radio yang dimaksud. Khususnya di banyuwangi, terdapat lebih dari 50 radio gabungan antara LPPL (Lembaga Penyiaran Publik Lokal), radio swasta, maupun radio komunitas. Setiap radio mengenakan biaya iklan yang berbeda-beda, pertimbangan yang dimiliki oleh UMKM sebelum memasang iklan di radio yang pasti minat pendengar radio tersebut dan harga. Berikut gambar 4.54 merupakan cara memasang iklan di radio. Tabel 4.1 merupakan biaya untuk memasang iklan diradio swasta terdekat.
Gambar 4.54 Cara Pemasangan Iklan di Radio
Tabel 4.1 Biaya Memasang Iklan di Radio
NO KETERANGAN BIAYA
1 Transportasi Rp.6.500 @bensin 1L
2 Produksi
(pembuatan iklan)
Rp.50.000
3 Pemutaran Iklan Rp.500.000 @1 Bulan
TOTAL Rp.556.500
4.3.1.2 Iklan di Media Cetak
Memanfaatkan media cetak koran, sudah pernah dilakukan oleh pelaku UMKM di desa Alasmalang. Sama halnya dengan radio, pemasangan iklan dimedia cetak tidak selalu menjadi pilihan bagi pelaku UMKM. Beberapa kelebihan dan kekurangan pemasaran menggunakan media cetak menjadi pertimbangan bagi pelaku UMKM.
Kelebihan memasang iklan di media cetak:
1. Fleksibel, lebih luwes dalam menentukan jadwal publikasi iklan dan surat kabar yang mempublikasikan, apakah lokal, regional ataukah nasional, berkaitan dengan khalayak yang dijadikan sasaran iklan. 2. Dapat dinikmati lebih lama.
3. Surat kabar mampu menjangkau daerah-daerah perkotaan sesuai cakupan wilayahnya.
4. Surat kabar sering digunakan sebagai bahan acuan atau referensi konsumen dalam membeli barang atau jasa.
Kekurangan memasang iklan di media cetak: 1. Mudah diabaikan serta cepat basi.
2. Informasi sulit untuk disimpan.
3. Isi dan tata letaknya mempengaruhi pemaknaan dan pemahaman isi pesan iklan oleh pembacanya.
4. Cover area sesuai pemasaran media cetak.
5. Pengolahan informasi yang membutuhkan waktu lama. 6. Media cetak menggunakan bahan yang gampang robek.
7. Mengharuskan konsumen dapat membaca, karena media ini menekankan pada gambar dan tulisan.
Gambar 4.55 Proses Pembuatan Iklan di Media Cetak
Tabel 4.2 Biaya Memasang Iklan di Koran
NO KETERANGAN BIAYA
1 Transportasi
(PP Alasmalang-Sukowidi)
Rp.13.000 @bensin 2L
2 Produksi
(pembuatan iklan)
Rp.75.000 UMKM
KANTOR MEDIA CETAK
Menyerahkan informasi produk dan pembayaran ke pihak media
