NRP : 05111740000068
Kelas : Pemrograman Web C
Pada postingan saya kali ini, saya akan membagikan hasil tugas saya yaitu membuat "Tokobuah" menggunakan CodeIgniter. Adapun panduan tutorial yang saya gunakan berasal dari Petanicode. Berikut sedikit penjelasan beserta Screenshot.
- Pertama saya buat database untuk Product yang akan dijual.
- Selanjutnya pada file /application/config/database.php ditambahkan kode berikut:
1: <?php
2: defined('BASEPATH') OR exit('No direct script access allowed');
3: $active_group = 'default';
4: $query_builder = TRUE;
5: $db['default'] = array(
6: 'dsn' => '',
7: 'hostname' => 'localhost',
8: 'username' => 'root',
9: 'password' => '',
10: 'database' => 'tokobuah',
11: 'dbdriver' => 'mysqli',
12: 'dbprefix' => '',
13: 'pconnect' => FALSE,
14: 'db_debug' => (ENVIRONMENT !== 'production'),
15: 'cache_on' => FALSE,
16: 'cachedir' => '',
17: 'char_set' => 'utf8',
18: 'dbcollat' => 'utf8_general_ci',
19: 'swap_pre' => '',
20: 'encrypt' => FALSE,
21: 'compress' => FALSE,
22: 'stricton' => FALSE,
23: 'failover' => array(),
24: 'save_queries' => TRUE
25: );
- Karena menggunakan localhost, maka bagian username diisi root dan password dikosongkan.
1: 'hostname' => 'localhost',
2: 'username' => 'root',
3: 'password' => '',
4: 'database' => 'tokobuah',
- Pada /application/config/autoload.php, tambahkan database dan sesion pada variabel autoload. Sehingga autoload.php akan terlihat seperti ini:
1: <?php
2: defined('BASEPATH') OR exit('No direct script access allowed');
3: $autoload['packages'] = array();
4: $autoload['libraries'] = array('database', 'session');
5: $autoload['drivers'] = array();
6: $autoload['helper'] = array('url');
7: $autoload['config'] = array();
8: $autoload['language'] = array();
9: $autoload['model'] = array();
- Pada /aplication/model/ , tambahkan file baru bernama Product_model.php dan tambahkan kode berikut.
1: <?php defined('BASEPATH') OR exit('No direct script access allowed');
2: class Product_model extends CI_Model
3: {
4: private $_table = "products";
5: public $product_id;
6: public $name;
7: public $price;
8: public $image = "default.jpg";
9: public $description;
10: public function rules()
11: {
12: return [
13: ['field' => 'name',
14: 'label' => 'Name',
15: 'rules' => 'required'],
16: ['field' => 'price',
17: 'label' => 'Price',
18: 'rules' => 'numeric'],
19: ['field' => 'description',
20: 'label' => 'Description',
21: 'rules' => 'required']
22: ];
23: }
24: public function getAll()
25: {
26: return $this->db->get($this->_table)->result();
27: }
28: public function getById($id)
29: {
30: return $this->db->get_where($this->_table, ["product_id" => $id])->row();
31: }
32: public function save()
33: {
34: $post = $this->input->post();
35: $this->product_id = uniqid();
36: $this->name = $post["name"];
37: $this->price = $post["price"];
38: $this->description = $post["description"];
39: $this->db->insert($this->_table, $this);
40: }
41: public function update()
42: {
43: $post = $this->input->post();
44: $this->product_id = $post["id"];
45: $this->name = $post["name"];
46: $this->price = $post["price"];
47: $this->description = $post["description"];
48: $this->db->update($this->_table, $this, array('product_id' => $post['id']));
49: }
50: public function delete($id)
51: {
52: return $this->db->delete($this->_table, array("product_id" => $id));
53: }
54: }
- Untuk membuat controller, maka dapat membuat file baru di folder /application/controllers/admin/ dengan nama Products.php
1: <?php
2: defined('BASEPATH') OR exit('No direct script access allowed');
3: class Products extends CI_Controller
4: {
5: public function __construct()
6: {
7: parent::__construct();
8: $this->load->model("product_model");
9: $this->load->library('form_validation');
10: }
11: public function index()
12: {
13: $data["products"] = $this->product_model->getAll();
14: $this->load->view("admin/product/list", $data);
15: }
16: public function add()
17: {
18: $product = $this->product_model;
19: $validation = $this->form_validation;
20: $validation->set_rules($product->rules());
21: if ($validation->run()) {
22: $product->save();
23: $this->session->set_flashdata('success', 'Berhasil disimpan');
24: }
25: $this->load->view("admin/product/new_form");
26: }
27: public function edit($id = null)
28: {
29: if (!isset($id)) redirect('admin/products');
30: $product = $this->product_model;
31: $validation = $this->form_validation;
32: $validation->set_rules($product->rules());
33: if ($validation->run()) {
34: $product->update();
35: $this->session->set_flashdata('success', 'Berhasil disimpan');
36: }
37: $data["product"] = $product->getById($id);
38: if (!$data["product"]) show_404();
39: $this->load->view("admin/product/edit_form", $data);
40: }
41: public function delete($id=null)
42: {
43: if (!isset($id)) show_404();
44: if ($this->product_model->delete($id)) {
45: redirect(site_url('admin/products'));
46: }
47: }
48: }
- Untuk membuat bagian view, maka kita dapat membuat sebuah folder baru pada /views/admin/ dengan nama product.
- Kemudian, kita membuat fire baru dengan nama list.php di /views/admin/product/ dan masukkan kode berikut.
1: <!DOCTYPE html>
2: <html lang="en">
3: <head>
4: <?php $this->load->view("admin/_partials/head.php") ?>
5: </head>
6: <body id="page-top">
7: <?php $this->load->view("admin/_partials/navbar.php") ?>
8: <div id="wrapper">
9: <?php $this->load->view("admin/_partials/sidebar.php") ?>
10: <div id="content-wrapper">
11: <div class="container-fluid">
12: <?php $this->load->view("admin/_partials/breadcrumb.php") ?>
13: <!-- DataTables -->
14: <div class="card mb-3">
15: <div class="card-header">
16: <a href="<?php echo site_url('admin/products/add') ?>"><i class="fas fa-plus"></i> Add New</a>
17: </div>
18: <div class="card-body">
19: <div class="table-responsive">
20: <table class="table table-hover" id="dataTable" width="100%" cellspacing="0">
21: <thead>
22: <tr>
23: <th>Name</th>
24: <th>Price</th>
25: <th>Photo</th>
26: <th>Description</th>
27: <th>Action</th>
28: </tr>
29: </thead>
30: <tbody>
31: <?php foreach ($products as $product): ?>
32: <tr>
33: <td width="150">
34: <?php echo $product->name ?>
35: </td>
36: <td>
37: <?php echo $product->price ?>
38: </td>
39: <td>
40: <img src="<?php echo base_url('upload/product/'.$product->image) ?>" width="64" />
41: </td>
42: <td class="small">
43: <?php echo substr($product->description, 0, 120) ?>...</td>
44: <td width="250">
45: <a href="<?php echo site_url('admin/products/edit/'.$product->product_id) ?>"
46: class="btn btn-small"><i class="fas fa-edit"></i> Edit</a>
47: <a onclick="deleteConfirm('<?php echo site_url('admin/products/delete/'.$product->product_id) ?>')"
48: href="#!" class="btn btn-small text-danger"><i class="fas fa-trash"></i> Hapus</a>
49: </td>
50: </tr>
51: <?php endforeach; ?>
52: </tbody>
53: </table>
54: </div>
55: </div>
56: </div>
57: </div>
58: <!-- /.container-fluid -->
59: <!-- Sticky Footer -->
60: <?php $this->load->view("admin/_partials/footer.php") ?>
61: </div>
62: <!-- /.content-wrapper -->
63: </div>
64: <!-- /#wrapper -->
65: <?php $this->load->view("admin/_partials/scrolltop.php") ?>
66: <?php $this->load->view("admin/_partials/modal.php") ?>
67: <?php $this->load->view("admin/_partials/js.php") ?>
68: </body>
69: </html
- Lalu untuk membuat form add, maka kita dapat membuat file baru dengan nama new_form.php pada /view/admin/product dan masukkan kode berikut:
1: <!DOCTYPE html>
2: <html lang="en">
3: <head>
4: <?php $this->load->view("admin/_partials/head.php") ?>
5: </head>
6: <body id="page-top">
7: <?php $this->load->view("admin/_partials/navbar.php") ?>
8: <div id="wrapper">
9: <?php $this->load->view("admin/_partials/sidebar.php") ?>
10: <div id="content-wrapper">
11: <div class="container-fluid">
12: <?php $this->load->view("admin/_partials/breadcrumb.php") ?>
13: <?php if ($this->session->flashdata('success')): ?>
14: <div class="alert alert-success" role="alert">
15: <?php echo $this->session->flashdata('success'); ?>
16: </div>
17: <?php endif; ?>
18: <div class="card mb-3">
19: <div class="card-header">
20: <a href="<?php echo site_url('admin/products/') ?>"><i class="fas fa-arrow-left"></i> Back</a>
21: </div>
22: <div class="card-body">
23: <form action="<?php base_url('admin/product/add') ?>" method="post" enctype="multipart/form-data" >
24: <div class="form-group">
25: <label for="name">Name*</label>
26: <input class="form-control <?php echo form_error('name') ? 'is-invalid':'' ?>"
27: type="text" name="name" placeholder="Product name" />
28: <div class="invalid-feedback">
29: <?php echo form_error('name') ?>
30: </div>
31: </div>
32: <div class="form-group">
33: <label for="price">Price*</label>
34: <input class="form-control <?php echo form_error('price') ? 'is-invalid':'' ?>"
35: type="number" name="price" min="0" placeholder="Product price" />
36: <div class="invalid-feedback">
37: <?php echo form_error('price') ?>
38: </div>
39: </div>
40: <div class="form-group">
41: <label for="name">Photo</label>
42: <input class="form-control-file <?php echo form_error('price') ? 'is-invalid':'' ?>"
43: type="file" name="image" />
44: <div class="invalid-feedback">
45: <?php echo form_error('image') ?>
46: </div>
47: </div>
48: <div class="form-group">
49: <label for="name">Description*</label>
50: <textarea class="form-control <?php echo form_error('description') ? 'is-invalid':'' ?>"
51: name="description" placeholder="Product description..."></textarea>
52: <div class="invalid-feedback">
53: <?php echo form_error('description') ?>
54: </div>
55: </div>
56: <input class="btn btn-success" type="submit" name="btn" value="Save" />
57: </form>
58: </div>
59: <div class="card-footer small text-muted">
60: * required fields
61: </div>
62: </div>
63: <!-- /.container-fluid -->
64: <!-- Sticky Footer -->
65: <?php $this->load->view("admin/_partials/footer.php") ?>
66: </div>
67: <!-- /.content-wrapper -->
68: </div>
69: <!-- /#wrapper -->
70: <?php $this->load->view("admin/_partials/scrolltop.php") ?>
71: <?php $this->load->view("admin/_partials/js.php") ?>
72: </body>
73: </html>
- Untuk menambahkan fitur edit, maka dapat dibuat file baru bernama edit_form.php pada folder /views/admin/product/ dan masukkan kode berikut:
1: <!DOCTYPE html>
2: <html lang="en">
3: <head>
4: <?php $this->load->view("admin/_partials/head.php") ?>
5: </head>
6: <body id="page-top">
7: <?php $this->load->view("admin/_partials/navbar.php") ?>
8: <div id="wrapper">
9: <?php $this->load->view("admin/_partials/sidebar.php") ?>
10: <div id="content-wrapper">
11: <div class="container-fluid">
12: <?php $this->load->view("admin/_partials/breadcrumb.php") ?>
13: <?php if ($this->session->flashdata('success')): ?>
14: <div class="alert alert-success" role="alert">
15: <?php echo $this->session->flashdata('success'); ?>
16: </div>
17: <?php endif; ?>
18: <!-- Card -->
19: <div class="card mb-3">
20: <div class="card-header">
21: <a href="<?php echo site_url('admin/products/') ?>"><i class="fas fa-arrow-left"></i>
22: Back</a>
23: </div>
24: <div class="card-body">
25: <form action="<?php base_url('admin/product/edit') ?>" method="post" enctype="multipart/form-data">
26: <input type="hidden" name="id" value="<?php echo $product->product_id?>" />
27: <div class="form-group">
28: <label for="name">Name*</label>
29: <input class="form-control <?php echo form_error('name') ? 'is-invalid':'' ?>"
30: type="text" name="name" placeholder="Product name" value="<?php echo $product->name ?>" />
31: <div class="invalid-feedback">
32: <?php echo form_error('name') ?>
33: </div>
34: </div>
35: <div class="form-group">
36: <label for="price">Price</label>
37: <input class="form-control <?php echo form_error('price') ? 'is-invalid':'' ?>"
38: type="number" name="price" min="0" placeholder="Product price" value="<?php echo $product->price ?>" />
39: <div class="invalid-feedback">
40: <?php echo form_error('price') ?>
41: </div>
42: </div>
43: <div class="form-group">
44: <label for="name">Photo</label>
45: <input class="form-control-file <?php echo form_error('image') ? 'is-invalid':'' ?>"
46: type="file" name="image" />
47: <input type="hidden" name="old_image" value="<?php echo $product->image ?>" />
48: <div class="invalid-feedback">
49: <?php echo form_error('image') ?>
50: </div>
51: </div>
52: <div class="form-group">
53: <label for="name">Description*</label>
54: <textarea class="form-control <?php echo form_error('description') ? 'is-invalid':'' ?>"
55: name="description" placeholder="Product description..."><?php echo $product->description ?></textarea>
56: <div class="invalid-feedback">
57: <?php echo form_error('description') ?>
58: </div>
59: </div>
60: <input class="btn btn-success" type="submit" name="btn" value="Save" />
61: </form>
62: </div>
63: <div class="card-footer small text-muted">
64: * required fields
65: </div>
66: </div>
67: <!-- /.container-fluid -->
68: <!-- Sticky Footer -->
69: <?php $this->load->view("admin/_partials/footer.php") ?>
70: </div>
71: <!-- /.content-wrapper -->
72: </div>
73: <!-- /#wrapper -->
74: <?php $this->load->view("admin/_partials/scrolltop.php") ?>
75: <?php $this->load->view("admin/_partials/js.php") ?>
76: </body>
77: </html>
- Untuk menambahkan fitur konfirmasi ketika suatu data akan dihapus, maka dapat menambahkan kode berikut pada file list.php pada /views/admin/product/list.php
- Tambahkan kode berikut sebelum penutup tag body:
1: <script>
2: function deleteConfirm(url){
3: $('#btn-delete').attr('href', url);
4: $('#deleteModal').modal();
5: }
6: </script>
- Sehingga, list.php akan terlihat seperti ini:
1: <!DOCTYPE html>
2: <html lang="en">
3: <head>
4: <?php $this->load->view("admin/_partials/head.php") ?>
5: </head>
6: <body id="page-top">
7: <?php $this->load->view("admin/_partials/navbar.php") ?>
8: <div id="wrapper">
9: <?php $this->load->view("admin/_partials/sidebar.php") ?>
10: <div id="content-wrapper">
11: <div class="container-fluid">
12: <?php $this->load->view("admin/_partials/breadcrumb.php") ?>
13: <!-- DataTables -->
14: <div class="card mb-3">
15: <div class="card-header">
16: <a href="<?php echo site_url('admin/products/add') ?>"><i class="fas fa-plus"></i> Add New</a>
17: </div>
18: <div class="card-body">
19: <div class="table-responsive">
20: <table class="table table-hover" id="dataTable" width="100%" cellspacing="0">
21: <thead>
22: <tr>
23: <th>Name</th>
24: <th>Price</th>
25: <th>Photo</th>
26: <th>Description</th>
27: <th>Action</th>
28: </tr>
29: </thead>
30: <tbody>
31: <?php foreach ($products as $product): ?>
32: <tr>
33: <td width="150">
34: <?php echo $product->name ?>
35: </td>
36: <td>
37: <?php echo $product->price ?>
38: </td>
39: <td>
40: <img src="<?php echo base_url('upload/product/'.$product->image) ?>" width="64" />
41: </td>
42: <td class="small">
43: <?php echo substr($product->description, 0, 120) ?>...</td>
44: <td width="250">
45: <a href="<?php echo site_url('admin/products/edit/'.$product->product_id) ?>"
46: class="btn btn-small"><i class="fas fa-edit"></i> Edit</a>
47: <a onclick="deleteConfirm('<?php echo site_url('admin/products/delete/'.$product->product_id) ?>')"
48: href="#!" class="btn btn-small text-danger"><i class="fas fa-trash"></i> Hapus</a>
49: </td>
50: </tr>
51: <?php endforeach; ?>
52: </tbody>
53: </table>
54: </div>
55: </div>
56: </div>
57: </div>
58: <!-- /.container-fluid -->
59: <!-- Sticky Footer -->
60: <?php $this->load->view("admin/_partials/footer.php") ?>
61: </div>
62: <!-- /.content-wrapper -->
63: </div>
64: <!-- /#wrapper -->
65: <?php $this->load->view("admin/_partials/scrolltop.php") ?>
66: <?php $this->load->view("admin/_partials/modal.php") ?>
67: <?php $this->load->view("admin/_partials/js.php") ?>
68: <script>
69: function deleteConfirm(url){
70: $('#btn-delete').attr('href', url);
71: $('#deleteModal').modal();
72: }
73: </script>
74: </body>
75: </html>
- Kemudian, tambahkan sebuah modal untuk men-delete di file /views/admin/_partials/modal.php
1: <!-- Logout Delete Confirmation-->
2: <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
3: <div class="modal-dialog" role="document">
4: <div class="modal-content">
5: <div class="modal-header">
6: <h5 class="modal-title" id="exampleModalLabel">Are you sure?</h5>
7: <button class="close" type="button" data-dismiss="modal" aria-label="Close">
8: <span aria-hidden="true">×</span>
9: </button>
10: </div>
11: <div class="modal-body">Data yang dihapus tidak akan bisa dikembalikan.</div>
12: <div class="modal-footer">
13: <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
14: <a id="btn-delete" class="btn btn-danger" href="#">Delete</a>
15: </div>
16: </div>
17: </div>
18: </div>
- Untuk menambahkan fitur upload, maka dapat membuat folder baru bernama upload dalam project, dan di dalamnya membuat folder lagi bernama product. Kita juga menaruh file default.jpg
- Lalu, buka file Product_model.php lalu tambahkan method_uploadImage() setelah fungsi delete
1: private function _uploadImage()
2: {
3: $config['upload_path'] = './upload/product/';
4: $config['allowed_types'] = 'gif|jpg|png';
5: $config['file_name'] = $this->product_id;
6: $config['overwrite'] = true;
7: $config['max_size'] = 1024; // 1MB
8: // $config['max_width'] = 1024;
9: // $config['max_height'] = 768;
10: $this->load->library('upload', $config);
11: if ($this->upload->do_upload('image')) {
12: return $this->upload->data("file_name");
13: }
14: return "default.jpg";
15: }
- Kemudian, mengubah method save() dan update() menjadi seperti berikut:
- save()
1: public function save()
2: {
3: $post = $this->input->post();
4: $this->product_id = uniqid();
5: $this->name = $post["name"];
6: $this->price = $post["price"];
7: $this->image = $this->_uploadImage();
8: $this->description = $post["description"];
9: $this->db->insert($this->_table, $this);
10: } - update()
1: public function update()
2: {
3: $post = $this->input->post();
4: $this->product_id = $post["id"];
5: $this->name = $post["name"];
6: $this->price = $post["price"];
7: if (!empty($_FILES["image"]["name"])) {
8: $this->image = $this->_uploadImage();
9: } else {
10: $this->image = $post["old_image"];
11: }
12: $this->description = $post["description"];
13: $this->db->update($this->_table, $this, array('product_id' => $post['id']));
14: }
- Untuk menghapus file yang telah diupload, maka kita memerlukan method khusus. Oleh karena itu, kita dapat menambahkan method berikut ini dalam class Product_model , tepat di bawah method _uploadImage():
1: private function _deleteImage($id)
2: {
3: $product = $this->getById($id);
4: if ($product->image != "default.jpg") {
5: $filename = explode(".", $product->image)[0];
6: return array_map('unlink', glob(FCPATH."upload/product/$filename.*"));
7: }
8: }
Screenshot
(Tampilan Halaman web Tokobuah)
(Tampilan dari List Product)
(Tampilan ketika ingin Add Product)
(Tampilan ketika ingin Delete Product)
No comments:
Post a Comment