Tugas UAS Multimedia

Presentasi Pembuatan Web Aplikasi Showroom Prima Jati Motor (Bagian Invoice/Bukti Pembelian Customer)

Halo semuanya, pada kesempatan kali ini, saya akan membagikan salah satu bagian dari hasil project Web yang telah dibuat secara berkelompok.
Web Aplikasi yang kita buat adalah Web jual-beli mobil bekas online yaitu Showroom Prima Jati Motor, latar belakang kami membuat web ini adalah karna di showroom tersebut belum menerapkan sistem jual-beli online, dan tujuan dari dibuatnya web ini adalah untuk mempermudah customer yang akan memilih atau membeli mobil melalui web saja, tidak perlu repot untuk datang ke lokasi.


Dan berikut adalah tampilan home di Web Showroom Prima Jati Motor.

Gambar 1

Disini saya akan membagikan bagian saya yaitu invoice/bukti pembelian customer, dibagian halaman admin, dan seperti inilah bentuk tampilannya, gimana bisa jadi seperti ini? berikut saya akan jelaskan cara gimana data ini masuk ke invoice dan saya akan tunjukkan beberapa codingannya.

Gambar 2

Sebelumnya disini saya akan menjelaskan, bahwa web ini terbuat menggunakan metode MVC, MVC sendiri adalah singkatan dari Model, View, dan Controller yaitu sebuah metode untuk membuat sebuah aplikasi dengan memisahkan data dari tampilan.

Jadi, sebelum user membeli, user akan diarahkan untuk login terlebih dahulu, jika belum punya akun bisa mendaftar terlebih dahulu.

Gambar 3

Dan jika sudah login, langsung saja kita ambil contoh untuk membeli salah satu mobilnya, dan yang kita beli sekarang adalah BMW X3.

Gambar 4

Jadi, seperti inilah tampilan Controllernya dari tampilan home diatas (Gambar 4), dengan nama Dashboard.php yang disimpan dalam folder controller, dan terlihat yang menjadi fokus kita adalah Controller beli, dan proses pesanan yang dimana diviewnya setelah diklik beli dan mengirim kehalaman isi data alamat dan pembayaran kita akan melihat view proses pesanan, berikut codingannya :

Gambar 5

Fungsi Controller ini adalah untuk mengatur apa yang harus dilakukan model dan view mana yang harus ditampilkan berdasarkan permintaan dari user (dengan catatan jika kita ingin membuat file Controller, huruf depan nama file kita harus besar/kapital).

Selanjutnya dari Controller, kita ke model, disini saya beri nama Model_invoice.php pada folder models, dan terlihat dibagian index data yang dikirim dari Controller (yang nanti dibawah saya akan bahas) akan mengirim data input nama, alamat dll costumer ke Database tb_pesanan dan akan tampil di View detail_invoice.php berikut codingannya :

Gambar 6

Fungsi pembuatan Model ini adalah untuk mengatur, menyiapkan, memanipulasi dan mengorganisasikan data (dari database) sesuai dengan instruksi dari Controller (Dalam Model juga kita harus menyimpan nama file dengan huruf depan besar/kapital, sama seperti Controller).

Lalu kita akan melihat Database yang berhubungan dengan bagian yang saya buat yaitu tb_invoice dan juga tb_pesanan, tapi dibawah ini yang saya perlihatkan adalah tb_pesanan, kenapa? Karna saya ingin menjelaskan terlebih dahulu, bahwa tadi ketika kita klik beli mobil yang kita ingin beli, datanya otomatis akan masuk ke Database tb_pesanan, kenapa tb_pesanan? bukan tb_invoice? kalau tb_invoice itu untuk data inputan nama dan alamat pembeli, dan nantinya data yang di tb_pesanan ini akan ditampilkan di View detail_invoice.php.

Gambar 7

Fungsi Database seperti sebuah perpustakaan yang menyimpan banyak buku - buku dari berbagai kategori, di mana satu buku menyimpan berbagai data, mulai judul buku, nama pengarang, ringkasan isi, penerbit, tahun penerbitan, dll. Demikian halnya dalam database menyimpan informasi suatu obyek yang didalamnya terkandung serpihan - serpihan data. Bila informasi itu berupa profil orang, maka data yang tersimpan adalah nama, tempat tanggal lahir, jenis kelamin, pekerjaan, umur, no KTP. Dan dalam hal ini saya menyimpan berbagai tabel, yaitu tabel invoice, tabel mobil, tabel pesanan, dan juga tabel user.

Selanjutnya, ketika tadi kita sudah klik beli, maka tampilan selanjutnya adalah seperti ini (Gambar 8), user diminta untuk mengisi nama, alamat dll, (disini saya kasih contoh nama Citra) dan data ini akan masuk ke Database tb_invoice, dan akan tampil di View invoice.php.

Gambar 8

Lalu, dibawah ini (Gambar 9) adalah codingan dari tampilan View diatas (Gambar 8), terlihat disitu ada (foreach, type hidden) yang dimana codingan tersebut akan mengirim data yang kita ketik di Viewnya (yang diatas) ke Model dan akan di masukkan ke dalam Database tb_invoice, berikut codingannya :

Gambar 9

Fungsi View adalah untuk menyajikan informasi (yang mudah dimengerti) kepada user sesuai dengan instruksi dari Controller. Pada View ini form yang sudah dibuat menggunakan Controller dan Model akan tampil (Di View ini jika kita ingin membuat file, huruf depannya tidak harus memakai huruf besar/kapital).

Dan diatas (Gambar 9) tadi terlihat juga echo base_url (dashboard/proses_pesanan) itu fungsinya untuk memanggil View proses_pesanan.php dibawah ini (Gambar 10), melalui Controller yang sudah kita bahas diatas (Gambar 5).

Gambar 10

Selanjutnya, seperti inilah tampilan View proses_pesanan.php.

Gambar 11

Dan setelah saya memperlihatkan gimana cara data mobil yang dibeli dan pembelinya masuk ke invoice dibagian admin, sekarang saatnya saya akan menjelaskan bagian saya yaitu invoce/bukti pembelian customer.

Dibawah ini (Gambar 12) kita bisa lihat data invoice dengan nama Citra tadi (Gambar 8) sudah masuk ke View halaman invoice.

Gambar 12

Dengan codingan Controller Invoice.php yang disimpan di controller/admin/Invoice.php seperti dibawah ini (Gambar 13), terlihat di bagian detail terus dibagian data array, disitu ada invoice, yang akan mengirim ke model_invoice dengan nama ambil_id_invoice dengan parameter id_invoice.

Gambar 13

Seperti yang saya singgung diatas setelah dari Controler invoice, data tersebut akan diambil dari Database melalui models, dengan nama file Model_invoice.php, dengan nama function ambil_id_invoice dengan parameter yang sama id_invoice, dan akan mengambil (get) data dari Database tb_invoice.

Gambar 14

Dan seperti inilah Database dari tb_invoice, setelah kita memasukkan data pembeli dengan nama Citra.

Gambar 15

Lalu, data tersebut akan ditampilkan melalui View invoice.php, dan tampilannya seperti diatas (Gambar 12), dengan codingan sebagai berikut :

Gambar 16

Dan diatas (Gambar 16) terlihat ada div detail, dan disitu terlihat ketika kita mengklik detail dibagian View invoice.php, akan mengirim ke Controller Invoice.php lagi dibagian detailnya lebih tepatnya di bagian pesanan (yang akan dibahas dibawah), dan akan muncul tampilan Viewnya seperti dibawah ini :

Gambar 17

Dengan codingan Controllernya yang hampir sama dengan invoice, yaitu dibagian detail dengan nama pesanan dan dengan parameter id_invoice, dibagian data array dan dibagian pesanan, kita mengambil data lagi melalui model_invoice dengan nama ambil_id_pesanan dengan parameter id_invoice.

Gambar 18

Dibagian models ini data mobil yang sudah kita pesan tadi (BMW X3) (Gambar 4) akan diambil dari Database untuk ditampilkan di View detail_invoice.php seperti yang terlihat diatas, dengan function ambil_id_pesanan dengan parameter id_invoice dan mengambil (get) data dari Database tb_pesanan.

Gambar 19

Dan dibagian Database tb_pesanan terlihat dibawah ini (Gambar 20) bahwa mobil yang dibeli Citra yaitu BMW X3 sudah masuk datanya.

Gambar 20

Dan inilah codingan View detail_invoice.php, yang untuk ditampilkan di halaman detail invoice (Gambar 17).

Gambar 21

Dan jika kita klik kembali dibagian codingan diatas admin/invoice/index akan kembali ke halaman sebelumnya yaitu halaman invoice, seperti terlihat dibawah ini.

Gambar 22

Jadi, seperti itulah bagian yang saya buat adalah bagian invoice/bukti pembelian customer.

Berikut video tutorialnya yang dapat dilihat dibawah ini :

Note : Disarankan menonton dengan kualias 720p, terima kasih.

Itulah ulasan pembahasan dan tutorial video yang dapat saya sajikan. Terima kasih yang sudah berkunjung ke blog ini, semoga bermanfaat.