T1 672011204 Full text

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

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.

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

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.

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

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

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(

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

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.

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

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. _}

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.

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 e-mail. Baris 2 hingga 6 adalah pengaturan server pengirim e-mail atau menjadi e-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

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

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

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.

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.