Final Project

E-Commerce Sederhana

Oleh :
Iqbaal Pratama Putra 05111840000021

Evelyn Tjitrodjojo 05111840000099

Amelia Puji 05111840000147

Pada final project kali ini, kami diminta untuk membuat Website E-Commerce sederhana, dimana kami menamainya Toko Elektronik Online IqbaalAmelEvelyn yang sudah kami deploy pada URL berikut: https://ogabeezle.me/toko/login menggunakan Code Igniter dengan 2 role, yaitu role Admin dengan beberapa fitur seperti:

Registrasi
Login
Logout
Create Product
Update Product
View Product
Delete Product
Create Invoice Penjualan
Change Invoice Status
Finish Invoice
View Invoice Penjualan
View Daftar Admin
View Daftar Customer

dan role Customer dengan beberapa fitur seperti:

Registrasi
Login
Logout
View Product
View Daftar Transaksi
Menambahkan Product ke Keranjang Belanja
Melakukan Check Out Product
View Product by Category (Filter by Catogory)
View Invoice
Change Invoice Status

Sebelumnya, pastikan sudah mengunduh Code Igniter pada halaman berikut:

Code Igniter Download

Tidak lupa mengunduh juga XAMPP sebagai tempat instalasi Code Igniter pada halaman berikut:

XAMPP Download

Untuk pemahaman dan instalasi, kami mengacu pada tutorial dari website petani kode seperti yang sudah dijelaskan dikelas dan website ilmu coding dari internet

Mohon maaf kami tidak menjelaskan kode program dan sistemnya secara rinci, namun kami menyertakan penjelasan pembuatan database dan inisiasi kode program, gambar antarmuka dari halaman Admin dan Customer serta video demonstrasinya. Semoga bermanfaat!

Pembuatan Database pada phpmyadmin

Tabel tbl_produk untuk menyimpan data produk yang dijual admin dengan atribut

id_produk
nama_produk
deskripsi
harga
gambar
kategori

Tabel tbl_kategori yang berfungsi sebagai kategori produk untuk fitur filter berdasarkan kategori dengan atribut

id
nama kategori

Tabel tbl_detail_order yang berfungsi menyimpan detail belanjaan customer yang sudah di checkout dengan atribut:

id
order_id
produk
quantity
harga

Tabel tbl_order yang berfungsi menyimpan keseluruhan daftar belanjaan customer yang sudah di checkout dengan atribut:

id
tanggal
users
nama_tujuan
alamat_tujuan
telepon_tujuan
invoice
status
total

Tabel users untuk menyimpan data user saat registrasi dan rolenya (admin / customer) yang nanti digunakan untuk login dengan atribut

user_id
username
password
email
full_name
phone
role
last_login
photo

Berikut merupakan kode MySQL untuk database Toko Online kami

Inisiasi Setting pada Code Igniter

Copy Paste folder Code Igniter yang sudah didownload kedalam xampp/htdocs, lalu rename folder menjadi crud

Nyalakan XAMPP

Konfigurasi file config.php pada folder xampp/htdocs/TokoElektronik/application/config/ dan ubah beberapa potongan kode berikut:

$config[‘base_url’] = ”; menjadi $config[‘base_url’] = ‘http://localhost/TokoElektronik’;

Kode ini digunakan untuk mengatur baseurl.

$config[‘index_page’] = ‘index.php’; menjadi $config[‘index_page’] = ”;

Men set index page menjadi kosong

Konfigurasi file autoload.php pada folder xampp/htdocs/TokoElektronik/application/config/ dan ubah beberapa potongan kode berikut

$autoload[‘libraries’] = array(); menjadi $autoload[‘libraries’] = array('database','form_validation','session','pagination');
$autoload[‘helper’] = array(); menjadi $autoload[‘helper’] = array('form','url','html','string');

Konfigurasi file routes.php pada folder xampp/htdocs/TokoElektronik/application/config/ dan ubah beberapa potongan kode berikut

$route[‘default_controller’] = ‘welcome’; menjadi $route[‘default_controller’] = ‘page’;

Kode ini digunakan untuk menset controller mana yang akan dimuat pertama kali. Untuk diketahui, Codeigniter mengatur default controller welcome. Kita ubah default controller tersebut menjadi page.

Konfigurasi database.php pada folder xampp/htdocs/TokoElektronik/application/config/ dan ubah beberapa potongan kode berikut

‘hostname’ => ‘localhost’, //Nama Host
‘username’ => ‘root’, //Username, karena menggunakan XAMPP set menjadi root
‘password’ => ”, // Jika menggunakan password isi, jika tidak kosongkan saja
‘database’ => db_toko, // Nama databasenya sesuai yang sudah dibuat di phpmyadmin

Kode-kode diatas digunakan untuk konfigurasi ke database

Konfigurasi file .htaccess yang bertujuan untuk menghilangkan index.php dengan membuat file .htaccess baru di folder xampp/htdocs/TokoElektronik

Kode Program .htaccess

Gambar Antarmuka Customer

Beranda = Tempat dimana produk diperlihatkan untuk dibeli customer. Disebelah kiri terdapat filter by kategori dimana customer dapat memfilter produk berdasarkan kategori. Tekan tombol detail untuk melihat spesifikasi produk dan tekan tombol beli untuk memasukkan produk ke keranjang

Detail Produk = Berisi informasi detail barang yang diunggah admin dan dapat dilihat customer. Tekan tombol Beli Produk Ini untuk memasukkan produk ke keranjang.

Keranjang Belanja = Keranjang berisi rencana daftar barang yang akan dibeli customer. Keranjang terdiri dari daftar belanja customer yang dapat disunting, dihapus, dan di checkout.

Konfirmasi Checkout = Form konfirmasi customer yang melakukan Checkout. Tekan tombol Proses Order untuk membeli produk

Daftar Transaksi dan Invoice Pembelian = Berisi daftar transaksi yang pernah dilakukan pembeli, semacam histori belanja. Customer dapat menekan tombol Detail untuk melihat daftar produk yang dibeli dan menekan tombol Pesanan Selesai apabila produk sudah diterima.

Detail Transaksi

Pesanan Selesai

Gambar Antarmuka Admin

Beranda = Tempat ditampilkannya ringkasan informasi akun admin berupa jumlah produk, jumlah customer, jumlah admin keseluruhan sistem, dan jumlah invoice yang sudah terbuat. Terdapat sidebar tempat admin mengakses produk, invoice, dan user.

Tambah Produk = Form untuk menambah produk. Tekan tombol Tambah Produk apabila telah selesai mengisikan informasi produk dan produk otomatis ditampilkan pada beranda customer.

Daftar Produk = tempat melihat, menyunting, dan menghapus produk yang sudah dibuat admin.

Edit Produk

Hapus Produk

Daftar Invoice = Berisi daftar invoice baik yang belum dan sudah selesai. Tekan tombol Detail pada kolom Tujuan Pengiriman untuk melihat detail tujuan pengiriman, tekan tombol Detail pada kolom Daftar Beli untuk melihat detail daftar produk yang dibeli customer, dan tekan tombol Sudah Sampai apabila produk telah sampai pada customer