Pengembangan Website E-Commerce Toko Grazia Ban Menggunakan Framework CodeIgniter Memanfaatkan Notifikasi

Pengembangan Website E-Commerce Toko Grazia Ban

Menggunakan Framework CodeIgniter Memanfaatkan

Notifikasi E-mail

Artikel Ilmiah

Diajukan kepada Fakultas Teknologi Informasi untuk memperoleh Gelar Sarjana Komputer

Peneliti:

Andree Pratama (672011204) Ramos Somya, S.Kom., M.Cs. Christine Dewi, S.Kom., M.Cs.

Program Studi Teknik Informatika

Fakultas Teknologi Informasi

Universitas Kristen Satya Wacana

Salatiga

Juli 2016

1. Pendahuluan

Melihat perkembangan teknologi dewasa ini yang begitu pesat, mengakibatkan aktivitas masyarakat sangat bergantung pada teknologi. Untuk mengoptimalkan proses bisnis, sebuah perusahaan memanfaatkan teknologi informasi melalui pembangunan aplikasi, agar perusahaan tersebut menjadi lebih efisien dalam melakukan proses bisnis. Sifat teknologi yang bersifat netral dapat mempermudah masyarakat luas untuk melakukan sesuatu yang dapat menguntungkan atau memberikan kemudahan kepada pengguna teknologi tersebut. Salah satunya untuk melakukan transaksi atau jual-beli sesuatu secara

online. Persaingan ketat antar pasar membuat banyak toko yang membuat media

periklanan, mulai dari toko serba ada, toko grosir, pasar swalayan, hingga toko barang sehari-hari sudah memiliki cara periklanan secara online.

Toko-toko yang semakin dicari oleh masyarakat saat ini adalah toko yang menjual pernak-pernik otomotif. Dilihat dari banyaknya toko otomotif yang ada, mayoritas belum memiliki media periklanan secara online. Hal ini membuat permintaaan perancangan website e-commerce untuk toko aksesoris otomotif semakin tinggi, khususnya pada toko Grazia Ban yang menyediakan berbagai macam velg dan ban baru setiap harinya. Toko tersebut menjual velg dan ban yang meiliki merk-merk internasional. Melalui toko ini, pelanggan dapat melakukan pemesanan velg, ban, atupun aksesoris mobil yang belum ada di toko secara spesifik sesuai keinginan pelanggan. Pemilik toko dan pegawai toko yang ramah menjadi salah satu keunggulan toko untuk mempertahankan pelanggan dalam proses bisnisnya. Berdasarkan analisis yang dilakukan, didapatkan beberapa kekurangan yang terdapat dalam proses bisnis tersebut. Proses bisnisnya belum menggunakan teknologi dan masih menggunakan cara yang manual. Saat ini, para pelanggan atau pembeli hanya bisa datang ke lokasi toko untuk melihat velg dan ban yang ada. Pemasangan atau instalasi barang yang dibeli hanya bisa dilakukan di toko yang terletak pada Jl. Fatmawati no.168 Tuntang, Kab. Semarang, atau berada di jalan anatar kota Semarang-Solo.

Untuk mengetahui lebih jelas apa yang menjadi masalah dalam penelitian ini dilakukan wawancara dengan pemilik toko Grazia Ban, pegawai toko, dan beberapa pelanggan toko. Berdasarkan wawancara tersebut didapatkan kesimpulan yaitu pelanggan selalu melihat-lihat terlebih dahulu dan membutuhkan waktu lama untuk menunggu antrian pemasangan velg, ban, ataupun aksesoris dengan pelanggan lain akibat terbatasnya jumlah pegawai toko. Faktor tersebut menjadi penghambat melihat kebututuhan dan terbatasnya waktu setiap pelanggan yang berbeda-beda mengakibatkan layanan transaksi lebih memakan waktu dan kurang efektif sehingga mengurangi transaksi jual-beli atau proses bisnis pada toko Grazia Ban menjadi berkurang. Wawancara berikutnya dilakukan kepada beberapa pelanggan toko. Keismpulan yang dapat diambil dari komunitas pelanggan yaitu pelanggan harus bertanya lebih dahulu kepada pemilik toko tentang spesifikasi lengkap velg, ban, maupun aksesoris. Hal ini membuat pelanggan harus menyempatkan waktu untuk menunggu pemilik toko melayani pelanggan lain.Beberapa pelanggan menginginkan pula sebuah sistem yang mempermudah para pelanggan mengetahui spesifikasi lengkap tengang barang yang di jual pada toko Grazia Ban.

Berdasarkan latar belakang masalah yang terjadi, dilakukan penelitian yang memiliki tujuan memanfaatkan teknologi untuk mengatasi masalah yang ada. Perancangan dan implementasi akan dibangun sebuah website yang akan digunakan sebagai media periklanan barang-barang di toko untuk para pelanggan atau pembeli secara online. Pembangunan website akan menggunakan framework CodeIgniter sebagai kerangka website, sedangkan untuk mempermudah pelanggan untuk melihat barang yang dijual serta menjadikannya Responsive Web digunakan Uikit Framework CSS, dan memanfaatkan teknologi e-mail untuk pemberitahuan atau notifikasi kepada pelanggan agar mudah memperoleh info tentang barang yang dijual. Pemilihan penggunaan framework CodeIgniter adalah karena

framework tersebit tergolong ringan sehingga tidak memberatkan kerja server.

Selain itu framework CI juga mendukung Model View Controller (MVC), sehingga pembangunan aplikasi akan menjadi lebih terorganisir dengan baik.

Framework CI juga menyediakan bermacam-macam library yang akan

mempermudah pembangunan aplikasi diantaranya adalah library cart, library

session, dan library email yang akan digunakan dalam penelitian ini.

Setelah melihat latar belakang masalah yang ada, maka menjadi sebuah rumusan masalah pada penelitian yang dilakukan yaitu bagaimana menghasilkan pengembangan website e-commerce Grazia Ban menggunakan Framework CodeIgniter memanfaatkan layanan E-mail. Adapun batasan masalah penelitian untuk tidak memperluas area pembahasan penelitian ini. Batasan masalah dalam penelitian ini adalah sebagai berikut: 1) Media periklanan ini dibangun dari awal dikarenakan toko belum meiliki media periklanan sama sekali. 2) Penelitian berfokus pada pemanfaatan Email sebagai notifikasi kepada pelanggan toko, pemesanan barang oleh pelanggan toko, dan sarana komunikasi kepada pemilik toko oleh para pelanggan. 3) Aplikasi yang dibangun memberikan info sederhana dalam bentuk visual dan teks tentang barang-barang yang dijual di toko Grazia Ban. 4) Tidak membahas kecepatan bandwith internet. 5) Aplikasi tidak membahas keamanan data.

2. Kajian Pustaka

Penelitian yang digunakan sebagai acuan dalam penelitian ini ada 2. Penelitian terdahulu yang pertama dilakukan pada tahun 2013. yaitu penelitian tentang sebuah toko online perlengkapan bayi dan anak. Sebelumya, proses jual beli harus melakukan transaksi di lokasi toko. Kini penjual dapat melakukannya dengan lebih mudah dan cepat. Penjual hanya perlu mempublikasikannya melalui

websie. Adapun manfaat yang akan digunakan dalam penelitian ini, antara lain

pembuatan sebuah website toko online untuk meningkatkan kinerja proses bisnis pada sebuah toko. Serta menerpakan sebuah framework dalam pembuatan website toko online [1].

Penelitian terdahulu yang kedua dilakukan pada tahun 2015. Penelitian yang membahas tentang memonitoring suatu data center yang dilakukan secara

mobile dan mengirimkan sebuah notifikasi kepada administrator berupa e-mail

apabila jaringan terjadi masalah atau gangguan seperti server down, atau servis mati akibat berlebihan beban hardisk atau memory. Saat ini aplikasi monitoring

aplikasi monitoring dapat mengirimkan notifikasi kepada admin apabila server mengalami gangguan [2].

Perbedaan dengan penelitian yang dilakukan saat ini adalah pada aplikasi penelitian yang pertama toko online hanya dapat memberikan informasi kepada pengguna hanya dengan perseorangan dan belum memiliki fitur responsive. Sedangkan dalam penelitian terdahulu yang kedua aplikasi hanya memberikan informasi atau notifikasi e-mail kepada satu pihak saja. Pada penelitian ini seluruh pengguna dapat menerima notifikasi berupa email dan mendapat respon langsung kepada pemesan secara otomatis setiap ada pemberitahuan yang dilakukan oleh pihak pemilik toko dan dapat diakses menggunakan device apapun.

Sistem adalah suatu kebulatan atau keseluruhan yang kompleks atau terorganisir, suatu himpunan atau perpaduan hal hal atau bagian bagian yang membentuk suatu kebulatan atau keseluruhan yang kompleks dan utuh. Suatu kebulatan atau keseluruhan yang utuh, di mana didalamnya terdapat komponen komponen yang pada gilirannya merupakan sistem tersendiri yang memiliki fungsi masing-masing yang saling berhubungan satu dengan lainnya menurut pola, tata atau norma tertentu dalam rangka mencapai suatu tujuan [3].

Website adalah kumpulan dari halaman web yang sudah dipublikasikan di

jaringan internet dan memiliki domain/URL (Uniform Resource Locator) yang dapat diakses semua pengguna internet dengan cara mengetikan alamatnya. Hal ini dimungkinkan dengan adanya teknologi World Wide Web (WWW) fasilitas

hypertext guna menampilkan data berupa teks, gambar, animasi, suara dan

multimedia lainnya data tersebut dapat saling pada web server untuk dapat di akses melalui jaringan internet. Agar data pada web dapat dibaca, digunakan web

server terlebih dahulu seperti Mozila Firefox, Internet Explorer, Opera Mini,

Safari atau yang lainnya [4].

Framework dapat diartikan sebagai kumpulan potongan-potongan program

(kelas dan Fungsi) yang disusun dan di organisasikan sedemikian rupa, sehingga dapat digunakan kembali untuk membantu membuat aplikasi utuh tanpa harus membuat semua kodenya dari awal. CodeIgniter (CI) adalah framework PHP yang dibuat berdasarkan kaidah Model-View-Controller (MVC). Dengan MVC, maka memungkinkan pemisahan antara layer Application- logic dan presentation [5]. Adapun beberapa kelebihan framework CodeIgniter, antara lain CodeIgniter termasuk framework sederhana dengan ukuran kecil, namun memiliki kemampuan besar, aplikasi yang dibuat dengan CI kompatibel dengan standar hosting yang menjalankan beberapa versi PHP dan konfigurasi yang berbeda, menyediakan Library dan Helper yang cukup lengkap.

Sebuah web yang memiliki teknologi terbaru yaitu penggabungan dari HTML5 dan CSS3. Responsive Web adalah perubahan ukuran web secara otomatis mengikuti lebar device (Smartphone, Notebook-PC, dan lain-lain). Perubahan ini mengacu pada fluid design, elastic layout, rubber layout, liquid

design, adaptive layout, cross-device design, dan flexible design [6]. Front-end Framework dan CSS Framework merupakan sarana yang biasa dipergunakan

untuk membantu dalam pembuatan web design atau pembuatan template website yang lebih baik dan lebih cepat. Penggunaan CSS Framework terbaru memungkinkan output atau tampilan template yang sudah mengandung dengan

Responsive web. Uikit CSS Framewok yang digunakan dalam penelitian ini.

Beberapa keuntungan yang didapatkan ketika menggunakan CSS Framework antara lain, efisiensi waktu dan tenaga, dokumentasi yang cukup lengkap, bisa mengatasi permasalahan cross browser compability, dan sebagainya.

Simple Mail Transfer Protocol (SMTP) adalah protokol pada jaringan

internet yang berfungsi untuk mengirimkan pesan email agar tepat waktu dan efisien kepada penerima. Berbeda dengan POP3 (Post Office Protocol 3) atau IMAP (Internet Message Access Protocol) yang merupakan protokol untuk menerima pesan email, SMTP membuat perintah untuk mengontrol negosiasi dan transmisi melalui koneksi data stream Transfer Control Protocol (TCP). SMTP ini berada pada layer aplikasi (application layer) pada model OSI, dimana layer aplikasi ini berfungsi untuk menjalankan proses aplikasi dari pengguna seperti untuk sinkronisasi komunikasi, penentuan sumber daya jaringan, dan identifikasi partner komunikasi [7].

Email merupakan singkatan dari Electronic Mail yang artinya surat

elektronik. Secara harfiah, email dapat didefenisikan sebagai metode pengiriman, penerimaan, dan penyimpanan pesan melalui sistem komunikasi elektronik berupa internet. Dari pengertian email tersebut, jelas bahwa email mulai dari ditulis, dikirim, diterima, sampai dengan dibaca dilakukan secara elektronis. Email adalah surat elektronik yang dikirim dengan menggunakan internet, seperti layaknya surat biasa email dapat ditujukan ke perorangan dan kelompok. Email bisa menjangkau seluruh dunia dengan karena didukung jaringan global. Dengan email maka surat menyurat dapat dilakukan dengan cepat. Pengirim email ke seluruh dunia tidak dibedakan biayanya baik jarak dekat atau jauh semuanya sama [8].

3. Metode dan Perancangan Sistem

Tahapan penelitian yang akan dilakukan dalam perancangan aplikasi ini menggunakan lima tahapan penelitian, anatra lain: 1) Identifikasi Masalah. 2) Perancangan Sistem. 3) Pembuatan aplikasi. 4)Implementasi dan Pengujian Sistem serta Analisis Hasil Pengujian. 5) Penulisan Laporan Hasil Penelitian [9]. Tahapan-tahapan yang akan dilakukan dalam metode penelitian ini dapat ditunjukkan pada Gambar 1.

Penjelasan metode penelitian adalah sebagai berikut: 1) Identifikasi Masalah: Pada tahap ini, tindakan pertama yang dilakukan adalah mengamati dan meneliti masalah yang terjadi pada toko Grazia Ban yaitu datang ke lokasi toko, melakukan pengamatan proses jual-beli yang sedang berlangsung, dan membuat wawancara kepada pemilik toko, pegawai toko, tentang faktor-faktor yang menjadi penghambat selama terjadi proses bisnis. 2) Perancangan Sistem: Penelitian ini akan menggunakan Unifed Modelling Language (UML) yang meliputi Use Case diagram, Activity Diagram, dan Class Diagram. Selain itu dilakukan perancangan database dan user interface aplikasi. 3) Pembuatan Aplikasi: Tahap ini dilakukan pembuatan aplikasi sesuai dengan perancangan sistem yang telah dibuat sebelumnya. Pembuatan aplikasi website toko online ini terdiri dari dua tampilan, yaitu tampilan user yang akan digunakan sebagai User

Interface para pelanggan atau calon pembeli dan tampilan admin sebagai User Interface untuk pemilik toko atau pengelola toko. Kedua User Interface ini akan

menggunakan Uikit Framework CSS sebagai pembuatan HTML dan framework

CodeIgniter untuk pembuatan Model dan Controller. 4) Implementasi dan

Pengujian Sistem serta Hasil Analisis Pengujian: Pengimplementasian aplikasi

website toko online yang telah dibuat, kemudian dilakukan pengujian/testing yang

menggunakan metode Blackbox dan pengujian kuisioner untuk mengetahui apakah aplikasi website telah sesuai dengan perancangan yang dilakukkan dan apakah sidah tidak ditemukan kesalahan/bug pada aplikasi website toko online. 5) Penulisan Laporan Hasil Penelitian: Tujuan dari penulisan laporan yaitu mendokumentasikan setiap proses secara rinci dalam bentuk laporan tertulis dan akan menjadi laporan hasil penelitian.

Metode pengembangan sistem yang digunakan pada penelitian ini adalah adalah metode prototyping, karena dalam pembuatan sistem ini dilakukan komunikasi yang intensif dengan pengguna aplikasi. Metode ini digunakan untuk membantu pengembangan perangkat lunak dalam membentuk model dari perangkat lunak yang harus dibuat. Metode ini dilakukan secara bertahap, yaitu dengan mengembangkan suatu prototype yang sederhana terlebih dahulu baru kemudian dikembangkan dari waktu ke waktu sampai perangkat lunak selesai dikembangkan. Prototype merupakan bentuk dasar atau model awal dari suatu sistem atau subsistem [10]. Tahap-tahap Prototyping akan dijelaskan pada Gambar 2.

Tahap pengumpulan kebutuhan merupakan tahap untuk mengetahui semua permasalahan kebutuhan sistem yang akan dibangun. Analisis kebutuan dilakukan dengan pencarian data-data serta informasi-informasi yang nantinya akan dibutuhkan oleh sistem supaya apliksi website yang dibuat dapat memnuhi kebutuhan pengguna, maka diperlukan suatu kebutuhan analisis sistem. Analisis kebutuhan sistem ini dilakukan dengan melakukan wawancara dengan pemilik toko Garazia Ban dan beberapa pelanggan toko. Berdasarkan wawancara yang telah dilakukan, didapatkan bahwa dibutuhkan sistem yang dapat memenuhi kebutuhan sebagai berikut ini: a) kebutuhan pemilik toko mencakup: dapat mengelola barang-barang yang dijual, dapat melihat data pelanggan, dapat melihat pesanan pelanggan, dapat melihat grafik jumlah barang per bualan yang di tampilkan pada website toko online. b) kebutuhan pelanggan toko mencakup: dapat menerima pesan berupa email bila terdapat penambahan barang terbaru, dapat memesan barang, dapat melihat riwayat pesanan barang, dapat memesan lebih dari satu jenis barang melalui sebuah keranjang belanja.

Analisis kebutuhan perangkat keras dan spesifikasi yang digunakan untuk membangun toko online ini yaitu: Prosessor Intel Core I3, 2.40 GHz, RAM 2 GB,

Hardisk 500 GB. Sedangkan perangkat lunak yang digunakan adalah Sistem

Operasi Windows 7 Ultimate, Sublime Text 3, XAMPP (Apache dan MySQL),

Web browser, dalam penelitian ini digunakan Mozilla Firefox, dan StarUML

untuk pembuatan UML sistem.

Perancangan sistem dalam penelitian ini dibuat dalam bentuk diagram UML. Diagram UML meliputi diagram use case, diagram activity, diagram

sequence dan diagram class. Berikut ini akan dijelaskan masing-masing diagram

yang telah dibuat.

Gambar 3 Use Case Diagram

Gambar 3 merupakan diagram use case dari aplikasi yang dibuat. Terdapat 2 (dua) aktor dalam aplikasi. Aktor Pemilik toko merupakan pemilik hak akses tertinggi. Pemilik toko dapat melakukan pengolahan data barang, mengolah data pelanggan, melihat data pelanggan, dan melihat data pesannan pelanggan. Untuk pelanggan toko memiliki hak akses memesan barang, melihat barang, menghapus pesanan barang, mengelola data pelanggan, dan melihat riwayat pesanan.

Gambar 4 Activity Diagram Tambah Barang

Gambar 4 merupakan diagram activity untuk proses melihat data barang yang akan dipesan. Aktivitas dimulai dengan memasukkan username dan

password pada form login. Pemilik toko kemudian memasukkan data barang yang

akan dijual seperti merk barang, ukuran ring barang, kondisi barang, lebar barang, keterangan barang, kategori barang, dan foto barang. Kemudian data barang akan tersimpan dalam database setelah pemilik toko menekan tombol tambah.

Gambar 5 Activity Menghapus Pesan

Gambar 5 merupakan diagram activity untuk proses menghapus pelanggan oleh pemilik toko. Hal pertama yang dilakukan untuk menghapus pelanggan adalah melakukan login pada form login, kemudian akan menampilkan data pelanggan setelan pemilik toko memilih navigasi pelanggan yang berada pada

Gambar 6 Diagram Activity Pelanggan Toko

Gambar 6 merupakan diagram activity untuk proses pemesanan barang yang dilakukan oleh pelangggan toko. Pelanggan toko memilih barang yang akan dipesan terlebih dahulu. Selanjutnya website akan menampilkan tabel yang berisi data barang yang telah di pesan sebelumnya. Setelah pelanggan toko mengirimkan pesanan, pelanggan akan merima sebuah feedback berupa email yang berisi pesanan terbaru oleh pelanggan. Data pesanan selanjutnya akan di simpan dalam

database.

Gambar 7 Sequence Diagram Tambah Barang

Gambar 3.7 merupakan diagram sequence untuk proses menambah barang yang akan diajual oleh pemilik toko. Pemilik toko mengisi karakteristik barang seperti merk barang, lebar barang, ukurang ring barang, kategori barang, keterangan barang, dan foto barang. Setelah tombol tambah ditekan, fungsi insert yang berada di file controller barang akan dipanggil. Pada fungsi insert ini dilakukkan pemanggilan model barang untuk memerintahkan menyimpan data barang yang sudah dimasukkan tadi ke dalam database.

Aplikasi website juga memiliki sistem create, read, update, dan delete (CRUD) untuk memudahkan pemilik toko mengunggah, melihat, mengubah, dan menghapus barang yang dijual maupun mengahapus pembeli yang sudah tidak berlangganan lagi. Pelanggan juga dapat memesan barang mealui email dengan memanfaatkan library email pada framework CodeIgniter untuk melakukan proses pembelian.

Gambar 8 Sequence Diagram Pesan Barang

Gambar 8 merupakan diagram sequence untuk proses pemesanan barang yang dilakukan oleh pelanggan toko. Pemesanan barang dilakukan pada halaman

view pelanggan yang menampilkan barang-barang yang dijual di toko. Setelah

pelanggan memilih barang, shop controller akan memberikan inruksi kepada shop

model untuk memerintahkan database menyimpan pesanan pelanggan toko yang

sudah dipilih tadi ke dalam database. Kemudian database akan mengembalikan ke

shop view setelah melewati shop model dan shop controller.

Gambar 9 Class Diagram Aplikasi Website

Gambar 9 merupakan diagram class yang menggambarkan Model Class dan Controller Class pada aplikasi. Model Class merupakan bagian aplikasi yang bertugas untuk mengendalikan fungsi yang berhubungan dengan database. Pada aplikasi yang dibuat terdapat 4 (empat) Model Class, antara lain dataModel, penggunaModel, dataUser Model, dan pesananUserModel. Sedangkan Controller

Class bertugas untuk menghubungkan bagian view dengan bagian Model Class.

Pada aplikasi ini terdapat 2 (dua) Controller Class, yaitu penggunaController dan dataController.

Proses evaluasi prototyping dilakukan sebanyak tiga kali dan dilakukan dengan mendemokan aplikasi kepada pemilik toko. Penjelasan setiap tahap evaluasi sebagai berikut : Evaluasi tahap pertama dilakukan bersama pengguna aplikasi yaitu kepada pemilik toko dan beberapa pelanggan. Pada evaluasi ini dilakukan penambahan beberapa fasilitas untuk memberikan pembeda user yang nantinya akan digunakan oleh pemilik dan pelanggan. Evaluasi tahap kedua dilakukkan kembali dengan pemilik toko. Pada tahap ini ditambahakan grafik untuk memberitahu jumlah barang yang ada didalam tampilan website. Evaluasi tahap ketiga dilakukan dengan memperbaiki beberapa bagian yang masih memilik beberapa bug, seperti kerusakan pada framework dan mengubah beberapa tampilang website.

4. Hasil Implementasi dan Pembahasan

Implementasi dan pembuatan toko online Grazia Ban ini dilakukan dengan

framework CodeIgniter. Terdapat beberapa pengaturan yang harus dilakukan

pertama kali saat pembuatan, yaitu pengaturan koneksi ke database MySQL dan pengaturan route file. Pengaturan koneksi database dilakukan pada file database yang terletak pada folder config. Pengaturan ini ditunjukkan pada Kode Program 1.

Kode Program 1 Koneksi Framework dengan Database

1. $db['default'] = array( 2. 'dsn' => '', 3. 'hostname' => 'localhost', 4. 'username' => 'root', 5. 'password' => '', 6. 'database' => 'skripsi', 7. 'dbdriver' => 'mysqli', 8. 'dbprefix' => '', 9. 'pconnect' => FALSE,

Kode Program 4.1 merupakan perintah untuk melakukan pengaturan koneksi dan framework CodeIgniter ke database MySQL. Pada pengaturan ini dilakukan pengisian untuk hostname, username, password, dan nama dari

database yang digunakan.

Kode Program 2 Konfigurasi Library Email

1. <?php 2. $config['protocol'] = 'smtp'; 3. $config['smtp_host'] = 'ssl://smtp.gmail.com'; 4. $config['smtp_port'] = 465; 5. $config['smtp_user'] = 'namaemail.email.com'; 6. $config['smtp_pass'] = 'password'; 7. ?>

Kode Program 4.2 merupakan pengaturan library email yang terletak pada

folder config. Pengaturan ini berfungsi untuk mengetahui protocol, hostname, username email dan password email sebagai server atau pengirim email.

Kemudian dilanjutkan ke fungsi yang berada di dalam shop.php terletak di folder

Gambar 10 Halaman Home Website Grazia Ban

Gambar 10 merupakan halaman depan dari sistem toko online Grazia Ban. Halaman ini menampilkan pilihan menu daftar dan login. Pada navigation bar atau menu terdapat Store untuk melihat barang-barang yang ada di toko. Aplikasi

website ini dikembangkan menggunakan teknologi Responsive Web, maka

tampilan akan mengikuti ukuran device yang digunakan.

Gambar 11 Halaman Store Toko Online Grazia Ban pada Smartphone

Gambar 11 merupakan tampilan yang ada pada toko online ketika dibuka melalui smartphone. Proses ini dilakukan dengan memanggil CSS yang terdapat pada Uikit Framework CSS. Setiap file yang terletak pada foler view menggunakan perintah pemanggilan Uikit Framework CSS. Pemanggilannya

dilakukan dalam file yang terletak di setiap header. Kode Program 3 merupakan perintah pemanggilan Uikit Framework CSS.

Kode Program 3 Perintah Pemanggilan Uikit Framework CSS

1. <link rel="stylesheet" type="text/css" href="<?php echo base_url()."assets/css/uikit.gradient.css" ?>">

2. <link rel="stylesheet" type="text/css" href="<?php echo base_url()."assets/css/uikit.docs.min.css" ?>">

3. <script type="text/javascript" src="<?php echo base_url()."assets/js/jquery.js" ?>"></script>

4. <script type="text/javascript" src="<?php echo base_url()."assets/js/uikit.min.js" ?>"></script>

<script src="<?php echo base_url()."assets/js/components/search.js" ?>"></script>

Untuk menampilkan daftar barang pada halaman Store, digunakan dengan prinsip Model View Controller (MVC). Pada proses ini, pertama kali dilakukan pengecekan database oleh shopModel (terletak di bagian Model). Fungsi yang digunakan adalah getBarang. Fungsi getBarang ini bertugas melakukan query untuk mengambil data barang dari database pada tabel data.

Kemudian fungsi barang (terletak di bagian controller) melakukan pemanggilan fungsi getBarang yang dilakukan oleh shopModel. Sedangkan di bagian view untuk menampilkan data kepada pelanggan sebagai user interface sehingga tersaji seperti Gambar 12. Kode Program 4 merupakan perintah fungsi getBarang pada shopModel. Kode Program 5 merupakan fungsi store pada bagian

shop Controller dan Kode Program 6 merupakan perintah pada bagian view. Kode Program 4 Fungsi getBarang pada ShopModel

1. function getBarang(){

2. $sql = "select * from data"; 3. $query = $this->db->query($sql); 4. return $query->result();

5. }

Pada bagian ShopModel terdapat sebuah fungsi yang mengatur pengambilan data dari database menggunakan SQL. Pada baris 1 adalah pendeklarasian nama fungsi getBarang. Pada baris 2 hingga 3 merupakan pendefinisian fungsi untuk memanggil semua data yang terletak pada tabel data dari dalam database.

Kode Program 5 Fungsi Store pada Shop Controller

1. function store($pesan=0){

2. if ($pesan == 1) {

3. $data['warning'] = "Terimakasih TelahMemesan";

4. }else if ($pesan == 2 ) {

5. $data['daftar'] = "Pendaftaran Telah Berhasil";

6. }

7. $data['barang'] = $this->shopModel->getBarang();

8. $this->load->view('jual',$data);

9. }

Fungsi Store yang terletak pada shopController bertugas untuk mengatur data yang telah diambil dari database. Pada baris 2 hingga 7 merupakan perintah pendeklarasian perulangan untuk memberikan peringatan kepada pelanggan

apabila pelanggan melakukan pendaftaran maupun pemesanan. Pada baris 8 adalah variabel yang nantinya akan dilanjutkan ke bagian view.

Kode Program 6 Perintah pada bagian view 1. <?php

2. foreach ($barang as $row) { 3. ?>

4. <div data-uk-filter="<?php echo $row->kategori ?>"> 5. <div class="uk-panel-box">

6. <a class="uk-thumbnail" href="<?php echo site_url('shop/barang/'.$row->id) ?>">

7. <img width="400" height="200" src="<?php echo base_url()."image/".$row->lokasiPoto ?>" alt=""> 8. </a> 9. </div> 10. </div> 11. <?php 12. } 13. ?>

Pada bagian view berfungsi untuk menampilkan data yang telah diolah dan kemudian ditampilkan kepada user. Untuk baris 2 merupakan pendeklarasian nama barang menjadi row. Pada baris 4 bertugas untuk mengurutkan barang berdasarkan kategori. Baris 6 dan 7 berfungsi untuk pembuatan panel dan pengaturan tampilan agar user lebih tertarik untuk menggunakannya.

Pelanggan toko dapat memesan lebih dari satu barang untuk pemesanan. Setelah melakukan pendaftaran, pelanggan dapat memilih satu atau lebih dari satu barang yang akan dimasukkan kedalam cart atau keranjang belanja.

Gambar 12 Halaman Cart Pelanggan

Gambar 12 merupakan tampilan daftar belanja pelanggan toko setelah memilih barang yang dipesan. Selanjutnya, pelanggan dapat mengrimkan daftar pesanan dengan menekan tombol Kirimkan Cart. Framework CodeIgniter memiliki sebuah library shopping cart.

Library shopping cart merupakan library untuk membuat keranjang

melakukan pembelian barang jika membeli lebih dari 1(satu) barang secara bersamaan. Pada proses pembuatan cart, pertama kali akan dipanggil fungsi addToCart yang terdapat pada file shop (terletak di bagian controller). Kode Program 7 merupakan penggunaan library cart CodeIgniter.

Kode Program 7 Fungsi Cart pada Shop Controller 1. <?php $i=1;

2. foreach ($this->cart->contents() as $row) { 3. ?>

4. <tr>

5. <td><?php echo $i ?></td>

6. <td><?php echo $row['name'] ?></td> 7. <td><?php echo $row['qty'] ?></td> 8. <td><a href="<?php echo

site_url('shop/delete/'.$row['rowid']) ?>"

9. class="uk-icon-hover uk-icon-remove uk-icon-medium"> 10. </a> 11. </td> 12. </tr> 13. <?php 14. $i++; 15. } ?>

Pada aplikasi website toko online ini, pelanggan akan mendapatkan sebuah

feedback berupa notifikasi melalui email apabila melakukan pendaftaran ataupun

pemesanan. Gambar 13 merupakan halaman email pelanggan jika sudah melakukkan pemesanan online dan mendapatkan notifikasi melalui email.

Gambar 13 Feedback pada Email Pelanggan Toko

Pengembangan berikutnya dilakukan dengan menambahkan halaman administrator untuk melakukan pengelolaan data barang. Pada aplikasi website toko online ini, halaman administrator akan di gunakan oleh pemilik toko Pemilik toko dapat menambah, mengubah, dan menghapus data barang melalui halaman barang yang hanya dapat diakses melalui halaman administrator. Proses ini membutuhkan validasi login ke dalam halaman administrator.

Kode Program 8 Pengaturan Pengirim Email kepada Pelanggan 1. $this->load->library('email');

2. $this->email->set_newline("\r\n");

3. $this->email->from('p4uk.l4uk@gmail.com', 'Andree Pratama'); 4. $this->email->to($datauser->email.",philox.emas55@ymail.com"); 5. $this->email->cc("");

7. foreach ($this->cart->contents() as $row) { 8. $data = array( 9. "idpesanan" => "", 10. "iduser" => $this->session->userdata('id'), 11. "tanggalPesanan" => date('Y-m-d'), 12. "idbarang" => $row['id'] 13. ); 14. $this->shopModel->insertPesanan($data); 15. } 16. $message = $this->load->view('emailTemplate',$x,TRUE); 17. $this->email->subject('Pesanan Baru'); 18. $this->email->message($message);

Kode program 8 merupakan pengaturan sistem broadcast berupa e-mail kepada pelanggan toko. Framework CodeIgniter meiliki fitur-fitur yang cukup banyak, salah satunya adalah Class library Email. Pemasangan Library Email tidak memerlukan waktu yang lama. Pada baris 1 merupakan pemanggilan library

mail. Baris 2 hingga 6 adalah pengaturan server pengirim mail atau menjadi mail milik pengelola toko. Pada baris 7 hingga 12 merupakan pengaturan isi e-mail yang nanti dikirimkan kepada pelanggan toko. Kemudian pada baris 14

hingga 18 merupakan pengaturan judul, subyek, dan pendeklarasian isi e-mail. Pengembangan berikutnya dilakukan dengan menambahkan halaman administrator untuk melakukan pengelolaan data barang. Pada aplikasi website toko online ini, halaman administrator akan di gunakan oleh pemilik toko Pemilik toko dapat menambah, mengubah, dan menghapus data barang melalui halaman barang yang hanya dapat diakses melalui halaman administrator. Proses ini membutuhkan validasi login ke dalam halaman administrator.

Gambar 14 Form Pengisian Data Barang

Proses penambahan barang dapat dilakukan melalui form yang disediakan oleh aplikasi website ini, sehingga mempermudah pemilik toko untuk menambah data barang yang akan di tampilkan ke dalam website toko online. Gambar 14 merupakan form untuk menambah data barang oleh administrator. Pengembangan

aplikasi website toko online juga dilkukan dengan menambahkan halaman untuk melihat data pelanggan. Hal ini diperlukan untuk melihat data pelanggan dan pesanan pelanggan. Pemilik toko akan melakukan persetujuan dengan pelanggan memanfaatkan data yang diberikan oleh pelanggan saat pelanggan melakukan pendaftaran. Gambar 15 merupakan halaman untuk melihat data pelanggan.

Gambar 15 Halaman Data Pelanggan

Pengujian aplikasi dilakukan dengan menguji fungsi-fungsi dari aplikasi yang telah dibuat untuk mencari kesalahan/bug pada aplikasi website toko online. Pengujian aplikasi dilakukan agar sistem yang dibangun berjalan sesuai dengan yang diharapkan dan dapat memnuhi kebutuhan pengguna. Pengujian ini menggunakan dua tenik pengujian yaitu pengujian alpha dan pengujian beta.

Pengujian alpha menggunakan metode blackbox yaitu pengujian fungsi-fungsi aplikasi secara langsung tanpa memperhatikan alur eksekusi program dilakukan dengan cara menguji setiap fungsi-fungsi aplikasi secara langsung tanpa memperhatian alur eksekusi program. Pengujian ini dilakukan dengan memperhatikan apakah fungsi yang dibuat telah berjalan sesuai rancangan dana sesuai dengan yang diharapkan. Tabel 1 adalah hasil pengujian dari aplikasi yang telah dilakukan.

Tabel 1 Hasil Pengujian Blackbox

Fungsi yang diuji Kondisi Output yang diharapkan

Output yang dihasilkan sistem

Status Pengujian

Login Mengisi form

Username dan Password dengan

benar

Berhasil Login Sukses Login Valid

Tambah barang Form diisi dengan

benar

Sukses tambah data Sukses tambah data Valid

Ubah data barang Form diisi dengan

benar

Sukses ubah data Sukses ubah data Valid

Hapus data Barang Pilih salah satu barang Sukses hapus data Sukses hapus data Valid Load data barang Buka halaman Store Sukses load data Sukses load data Valid

Keranjang belanja oleh Pelanggan

Memilih satu atau beberapa barang, membuka cart Data terkumpul di keranjang belanja/cart Data terkumpul di keranjang belanja/cart Valid

Notifikasi email Mengirim pesanan Terhubung internet

Mendapat email berisi pesanan

Mendapat email berisi pesanan

Berdasarkan pengujian yang dilakukan pada aplikasi web dapat dilihat status pengujian setiap fungsi valid, maka disimpulkan bahwa aplikasi ini berjalan baik dan sesuai dengan yang diharapkan. Peengujian berikutnya adalah pengujian

beta. Pengujian beta adalah pengujian yang dilakukan oleh orang yang tidak ikut

dalam pembuatan aplikasi atau calon pengguna aplikasi. Pengujian beta dilakukan menggunakan kuesioner, yaitu dengan membagikan kuesioner kepada sample

user. Sample user berjumlah 30 responden dan dipilih secara acak, sample user

pada pengujian ini adalah masyarakat kota Salatiga yang mengerti tentang velg dan ban mobil, khususnya pelanggan toko Grazia Ban.

Tabel 2 Hasil Jawaban Kuisioner

No Pernyataan STS TS CS S SS

1 Aplikasi mudah digunakan 0 1 3 17 9 2 Tampilan, huruf dan gambar dari aplikasi dapat dilihat

dengan jelas

0 0 6 14 10 3 Menu pada aplikasi ini mudah dipahami dan tidak

membingungkan

1 2 8 10 9 4 Apllikasi ini membantu memberikan informasi tentang

barang yang di jual di toko Grazia Ban

0 1 9 15 5 5 Aplikasi ini mempermudah cara pemesanan barang dan

proses bisnis toko Grazia Ban

1 1 9 10 9

Setelah semua jawaban diketahui maka yang dilakukan selanjutnya adalah menghitung presntase jawaban responden yang telah mengisi kuesioner. Hasil analisis data untuk pernyataan 1 menunjukkan sebanyak 30% responden sangat setuju, 56,67% responden setuju, dan 10% responden menjawab cukup setuju. Jadi dapat disimpulkan bahwa aplikasi ini mudah untuk digunakan.

Hasil analisis data untuk pernyataan 2 menunjukkan sebanyak 33,33% responden menjawab sangat setuju, 46,67% responden menjawab setuju, dan 20% responden menjawab cukup setuju. Jadi disimpulkan bahwa tampilan aplikasi ini dapat dilihat dengan jelas.

Hasil analisis data untuk pernyataan 3 menunjukkan sebanyak 30% responden menjawab sangat setuju, 33,33% responden menjawab setuju, dan 26,67% responden menjawab cukup setuju. Jadi kesimpulan dari pernyataan 3 bahwa menu-menu pada aplikasi ini mudah dipahami dan tidak membingungkan.

Hasil analisis data untuk pernyataan 4 menunjukkan sebanyak 16,67% responden menjawab sangat setuju, 50% responden menjawab setuju, dan 30% responden menjawab cukup setuju. Jadi dismpulkan bahwa aplikasi website ini mempermudah pengguna mendapat informasi tentang barang-barang yang dijual di toko Grazia Ban secara online.

Hasil analisis data untuk pernyataan 5 menunjukkan sebanyak 30% responden menjawab sangat setuju, 33,33% responden menjawab setuju, dan 30% responden menjawab cukup setuju. Jadi kesimpulan yang didapatkan dari pernyataan 5 bahwa aplikasi website ini mempermudah penggunamelakukan pememsan dan ikut membantu proses bisnis toko Grazia Ban.

Pengujian manfaat juga dilakukan dengan wawancara kepada pemilik toko Grazia Ban. Berdasarkan wawancara tersebut didapatkan bahwa aplikasi website toko online ini dapat membantu menambah minat pelanggan untuk melakukan pemesanan dan memperluas target pemasaran. Selain itu mempermudah pekerjaan pemilik toko untuk mengefisiensi proses jual-beli di toko Grazia Ban.

5. Simpulan

Berdasarkan penelitian yang telah dilakukan, maka dapat diambil kesimpulan bahwa pengembangan website e-commerce Grazia Ban menggunakan framework CodeIgmiter (CI) memanfaatkan layanan e-mail bermafaat dalam pengembangan aplikasi menggunakan Model View Controller (MVC). MVC dapat dengan mudah dibuat menggunakan kelas induk Controller dan Model yang ada di framework CI. Sedangakan pemanfaatan e-mail membantu memberikan informasi kepada pelanggan toko dengan mudah dan efisien.

Hasil dari penelitian ini telah menyelesaikan rumusan masalah yang ada, yaitu membangun sebuah toko online yang menggunakan framework CodeIgniter dan memanfaatkan teknologi notifikasi e-mail. Dilihat dari hasil pembahasan ternyata penggunaan framework lebih mempermudah pekerjaan pembuatan website dengan lebih tertata dan tepat sasaran. Website juga telah digunakan oleh pemilik toko dalam melakukan proses bisnis. Hasil pengujian juga menunjukkan bahwa pengembangan website e-commerce ini membantu dalam mempermudah proses bisnis toko Grazia Ban, karena disediakan halaman administrator yang dipegang oleh pemilik toko untuk menambah, mengubah, dan menghapus barang yang akan dijual. Website e-commerce juga dilengkapi dengan Uikit CSS Framework, sehingga dapat diakses dari berbagai ukuran layar device seperti Smartphone maupun Personal Computer. Hasil pengujian kepada pengunjung website e-commerce juga menunjukkan jika website ini dapat membantu para pelanggan dalam memperoleh informasi dan pemberitahuan tentang barang terbaru yang di jual tanpa harus datang terlebih dahulu ke lokasi toko.

6. Pustaka

[1] Nucifera, Emy Mardiana, 2013, Perancangan dan Implementasi Toko Online Perlengkapan Bayi dan Anak Berbasis Web dan Mobile, 5 (12): 12-15.

[2] Ray, Endang, 2015, Pengembangan Aplikasi Monitoring Server Berbasis Mobile Web dengan Sistem Notifikasi Email, 5, pp.235-256.

[3] Binanto, Iwan, Multimedia Digital Dasar Teori dan Pengembanganya, 2010, Yoyakarta: Andi Publisher.

[4] Arief, M. Rudyanto, Pemrograman Web Dinamis menggunakan PHP dan MySQL, 2011, Yogyakarta: Andi Publisher.

[5] Basuki, Awan Pribadi, Proyek Membangun Website Berbasis PHP dengan Codeigniter, 2014, Yogyakarta: Lokomedia.

[6] Marcotte, Ethan. 2011. Responsive Web Design,

http://www.alistapart.com/articles/responsive-web-design/. Diakses tanggal 11 April 2016.

[7] Wong, Jony, 2010, "Internet Marketing for Beginners", Jakarta: Elex Media Komputindo.

[8] J.Com, "Jago Internet dari Nol Hingga Mahir", 2009. Yogyakarta: Multicom.

[9] Hasibuan, Zainal A. 2007. Metodologi Penelitian Pada Bidang Ilmu Komputer dan Teknologi Informasi : Konsep, Teknik, dan Aplikasi. Jakarta : Ilmu Komputer Univesitas Indonesia.

[10] Pressman, R.S, 2001, Software Engineering : A Practitioner’s Approach, Amerika Serikat : R.S. Pressman and Associates.