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
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
server dapat melakukan restart service atau reboot host secara remote. Selain itu,
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.
Gambar 1 Tahap Penelitian
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.
Gambar 2 Metode Prototyping[10]
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
navigation bar. Lalu pemilik toko memilih pelanggan yang akan dihapus datanya.
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.
2.
3.
4.
5.
6.
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
controller untuk mengeksekusi perintah.
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.
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
server dapat melakukan restart service atau reboot host secara remote. Selain itu,
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.
Gambar 1 Tahap Penelitian
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.
Gambar 2 Metode Prototyping[10]
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
navigation bar. Lalu pemilik toko memilih pelanggan yang akan dihapus datanya.
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.
2.
3.
4.
5.
6.
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
controller untuk mengeksekusi perintah.
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.