Setelah kita menyelesaikan Pembuatan Form Kategori Barang dan Form Produk pada part sebelumnya, Pada part 3 Dalam Pembuatan Online Shop ini kita akan membuat Menu Invoice yang diambil dari 2 tabel, yaitu tabel orders dan tabel invoices
Generate Tabel Invoice dan Orders
-
- Langkah pertama yang harus kita siapkan adalah mengenereate tabel Invoices dan table orders menggunakan Code Generator, caranya buka http://localhost/lsp_toko_online/code, kemudian pilih tabel Invoice, untuk Export Word dan Excel tidak perlu dicentang. Kemudian tekan Tombol Generate Warna Biru
- Setelah proses generate berhasil, buka view invoices_list.php pada folder Views/invoices cari dan hapus kode berikut
<?php echo anchor(site_url('invoices/create'), '<i class="fa fa-wpforms" aria-hidden="true"></i> Tambah Data', 'class="btn btn-danger btn-sm"'); ?>
Setelah itu cari kode berikut
//cari <td><?php echo $invoices->id_user ?></td> //ganti dengan <td><?php echo $invoices->full_name?></td>
Perintah diatas, digunakan untuk menampilkan nama pemesan, bukan id Pemesan
- Masih di invoice_list.php, cari dan ganti code berikut ini
//CARI KODE BERIKUT <?php foreach ($invoices_data as $invoices) { ?> <tr> <td width="10px"><?php echo ++$start ?></td> <td><?php echo $invoices->id_user ?></td> <td><?php echo $invoices->date ?></td> <td><?php echo $invoices->due_date ?></td> <td><?php echo $invoices->status ?></td> <td style="text-align:center" width="200px"> <?php echo anchor(site_url('invoices/read/'.$invoices->id),'<i class="fa fa-eye" aria-hidden="true"></i>','class="btn btn-danger btn-sm"'); echo ' '; echo anchor(site_url('invoices/update/'.$invoices->id),'<i class="fa fa-pencil-square-o" aria-hidden="true"></i>','class="btn btn-danger btn-sm"'); echo ' '; echo anchor(site_url('invoices/delete/'.$invoices->id),'<i class="fa fa-trash-o" aria-hidden="true"></i>','class="btn btn-danger btn-sm" Delete','onclick="javasciprt: return confirm(\'Are You Sure ?\')"'); ?> </td> </tr> <?php } ?> //GANTI DENGAN <?php foreach($invoices_data as $invoices) : if ($invoices->status == 'unpaid' ) { $tombol = '<button type="button" class="btn btn-primary ">Konfirmasi</button>'; }else{ $tombol = '<button type="button" class="btn btn-primary disabled">Lunas</button>'; } ?> <tr> <td width="10px"><?php echo ++$start ?></td> <td><?php echo $invoices->full_name ?></td> <td><?php echo $invoices->date ?></td> <td><?php echo $invoices->due_date ?></td> <td><?php echo $invoices->status ?></td> <td style="text-align:center" width="200px"> <?=anchor( 'invoices/detail/' . $invoices->id, 'Details', ['class'=>'btn btn-default btn-sm']) ?> <?=anchor( 'invoices/updateNotif/' . $invoices->id, $tombol) ?> </td> </tr> <?php endforeach; ?>
Koding diatas digunakan untuk mengganti id_user menjadi Full_name agar muncul namanya, kemudian menghapus tombol CRUD dan menggantinya dengan Tombol Details dan Konfirmasi, Jika Statusnya unpaid maka tombol konfirmasinya aktif, jika tidak maka tombol akan terdisable dan menjadi Lunas
Setelah Semuanya selesai, simapn file invoice_list.php - Kemudian buka controller Invoice dan tambahkan fungsi berikut
public function detail($invoice_id) { $data['orders_data'] = $this->db->where('invoice_id',$invoice_id)->get('orders')->result(); $data['invoice'] = $this->db->where('id',$invoice_id)->limit(1)->get('orders')->row(); $this->template->load('template','orders/orders_list',$data); } public function updateNotif() { $id=$this->uri->segment('3'); $data = array( 'status' => 'paid', ); $this->Invoices_model->update($id, $data); echo json_encode(array("status" => TRUE)); redirect(site_url('Invoices')); }
Function Detail diatas digunakan untuk membaca data detail dari tabel order untuk id_invoice yang dipilih, sedangkan untuk Function updateNotif digunakan untuk mengganti status dari unpaid ke paid
- Berikutnya buka view orders_list.php di dalam folder views/orders, cari kode berikut ini, kemudian ganti
//CARI KODE BERIKUT <?php echo anchor(site_url('orders/create'), '<i class="fa fa-wpforms" aria-hidden="true"></i> Tambah Data', 'class="btn btn-danger btn-sm"'); ?> //GANTI <?php echo anchor(site_url('Invoices'), '<i class="fa fa-wpforms" aria-hidden="true"></i> Kembali', 'class="btn btn-danger btn-sm"'); ?>
Masih di Orders_list.php, Cari dan Ganti juga kode berikut ini
//CARI KODE INI <table class="table table-bordered" style="margin-bottom: 10px"> <tr> <th>No</th> <th>Invoice Id</th> <th>Product Id</th> <th>Product Name</th> <th>Qty</th> <th>Price</th> <th>Options</th> <th>Action</th> </tr><?php foreach ($orders_data as $orders) { ?> <tr> <td width="10px"><?php echo ++$start ?></td> <td><?php echo $orders->invoice_id ?></td> <td><?php echo $orders->product_id ?></td> <td><?php echo $orders->product_name ?></td> <td><?php echo $orders->qty ?></td> <td><?php echo $orders->price ?></td> <td><?php echo $orders->options ?></td> <td style="text-align:center" width="200px"> </td> </tr> <?php } ?> </table> //GANTI DENGAN KODE BERIKUT INI <h3>Barang yang dipesan di Invoice #<?=$invoice->id?></h3> <table class="table table-bordered" style="margin-bottom: 10px"> <tr> <th>No</th> <th>Product Id</th> <th>Product Name</th> <th>Qty</th> <th>Price</th> <th>Subtotal</th> </tr> <?php foreach ($orders_data as $orders) { $total = 0; $subtotal = $orders->qty * $orders->price; $total += $subtotal; ?> <tr> <td width="10px"><?php echo ++$start ?></td> <td><?php echo $orders->product_id ?></td> <td><?php echo $orders->product_name ?></td> <td><?php echo $orders->qty ?></td> <td><?php echo $orders->price ?></td> <td>Rp. <?php echo number_format($subtotal,0,',','.') ?></td> </tr> <?php } ?> <tfoot> <tr> <td colspan="5" align="right">Total</td> <td>Rp. <?=number_format($total,0,',','.')?></td> </tr> </tfoot> </table>
Untuk View Orders_list ini digunakan untuk menampilkan detail dari Invoice dan ditambahkan Subtotal dan Total dari barang yang diorder
- Langkah pertama yang harus kita siapkan adalah mengenereate tabel Invoices dan table orders menggunakan Code Generator, caranya buka http://localhost/lsp_toko_online/code, kemudian pilih tabel Invoice, untuk Export Word dan Excel tidak perlu dicentang. Kemudian tekan Tombol Generate Warna Biru
Menampilkan Menu Invoice di Dashboard
Jika semua sudah dilakukan, silahkan masukkan Menu invoice kedalam Dashboard, seperti langkah pada part sebelumnya caranya Klik Menu Kelola Menu, kemudian sisikan seperti gambar berikuat
Kemudian Klik Update dan coba Menu Invoice yang sudah kita buat.
Pada Part berikutnya, kita akan membuat Front end dari Toko Online ini, front end digunakan untuk membuat tampilan Pada Member, mulai dari Registrasi Member, Pilih Produk, Order Produk dan History Pemesanan.