Anda di halaman 1dari 16

A.

Membuat Fitur Create, Read, Update, Delete


Disini, saya masih menggunakan projek sebelumnya yaitu fruitfatyashop.
1. Buat database dengan tabel seperti ini terlebih dahulu dengan menggunakan mysql.

2. Lakukan Konfigurasi Codeigniter.


Buka folder config lalu buat file bernama database.php, masukkan coding seperti ini:
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
$active_group = 'default';
$query_builder = TRUE;

$db['default'] = array(
'dsn' => '',
'hostname' => 'localhost',
'username' => 'root',
'password' => '',
'database' => 'tokobuahfatya',
'dbdriver' => 'mysqli',
'dbprefix' => '',
'pconnect' => FALSE,
'db_debug' => (ENVIRONMENT !== 'production'),
'cache_on' => FALSE,
'cachedir' => '',
'char_set' => 'utf8',
'dbcollat' => 'utf8_general_ci',
'swap_pre' => '',
'encrypt' => FALSE,
'compress' => FALSE,
'stricton' => FALSE,
'failover' => array(),
'save_queries' => TRUE
);

Perhatikan bagian username, password dan databasenya. Untuk username, jika anda
tidak menggunakan username dan password untuk masuk ke databasenya, maka isikan
saja username dengan root dan kosongkan passwordnya. Lalu untuk database,
sesuaikan dengan nama database yang anda buat.
Lalu buka buat file autoload.php dan masukkan codingan seperti ini:
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
$autoload['packages'] = array();

/*
| -------------------------------------------------------------------
| Auto-load Libraries
| -------------------------------------------------------------------
| These are the classes located in system/libraries/ or your
| application/libraries/ directory, with the addition of the
| 'database' library, which is somewhat of a special case.
|
| Prototype:
|
| $autoload['libraries'] = array('database', 'email', 'session');
|
| You can also supply an alternative library name to be assigned
| in the controller:
|
| $autoload['libraries'] = array('user_agent' => 'ua');
*/
$autoload['libraries'] = array('database', 'session');
$autoload['drivers'] = array();
$autoload['helper'] = array('url');
$autoload['config'] = array();
$autoload['language'] = array();
$autoload['model'] = array();

3. Buat Model untuk Tabel


Buka folder models lalu buat file dengan nama Product_model.php, lalu isi codingan
seperti ini:
<?php defined('BASEPATH') OR exit('No direct script access allowed');

class Product_model extends CI_Model


{
private $_table = "products";

public $product_id;
public $name;
public $price;
public $image = "default.jpg";
public $description;

public function rules()


{
return [
['field' => 'name',
'label' => 'Name',
'rules' => 'required'],

['field' => 'price',


'label' => 'Price',
'rules' => 'numeric'],

['field' => 'description',


'label' => 'Description',
'rules' => 'required']
];
}

public function getAll()


{
return $this->db->get($this->_table)->result();
}

public function getById($id)


{
return $this->db->get_where($this->_table, ["product_id" => $id])->row();
}

public function save()


{
$post = $this->input->post();
$this->product_id = uniqid();
$this->name = $post["name"];
$this->price = $post["price"];
$this->description = $post["description"];
$this->db->insert($this->_table, $this);
}

public function update()


{
$post = $this->input->post();
$this->product_id = $post["id"];
$this->name = $post["name"];
$this->price = $post["price"];
$this->description = $post["description"];
$this->db->update($this->_table, $this, array('product_id' => $post['id']));
}

public function delete($id)


{
return $this->db->delete($this->_table, array("product_id" => $id));
}
}

Perhatikan pada bagian class Product_model, $_table harus sama dengan nama tabel di
database, dan isiannya harus sama dengan nama kolom yang ada ditabelnya.

4. Membuat Controller
Buka folder admin yang ada didalam folder controller, kemudian buat file dengan nama
Products.php. Lalu isikan perintahnya:
<?php

defined('BASEPATH') OR exit('No direct script access allowed');

class Products extends CI_Controller


{
public function __construct()
{
parent::__construct();
$this->load->model("product_model");
$this->load->library('form_validation');
}

public function index()


{
$data["products"] = $this->product_model->getAll();
$this->load->view("admin/product/list", $data);
}

public function add()


{
$product = $this->product_model;
$validation = $this->form_validation;
$validation->set_rules($product->rules());

if ($validation->run()) {
$product->save();
$this->session->set_flashdata('success', 'Berhasil disimpan');
}

$this->load->view("admin/product/new_form");
}

public function edit($id = null)


{
if (!isset($id)) redirect('admin/products');
$product = $this->product_model;
$validation = $this->form_validation;
$validation->set_rules($product->rules());

if ($validation->run()) {
$product->update();
$this->session->set_flashdata('success', 'Berhasil disimpan');
}

$data["product"] = $product->getById($id);
if (!$data["product"]) show_404();

$this->load->view("admin/product/edit_form", $data);
}

public function delete($id=null)


{
if (!isset($id)) show_404();

if ($this->product_model->delete($id)) {
redirect(site_url('admin/products'));
}
}
}

5. Membuat Tampilan
Disini kita akan membuat 3 tampilan, yaitu tampilan untuk menampilkan data, tampilan
untuk menambah data dan tampilan untuk mengedit data, yang akan disimpan dalam
folder bernama product didalam folder admin yang ada dalam folder views.
a. Tampilan untuk menampilkan data
Buat file bernama list.php, lalu begini codingnya:
<!DOCTYPE html>
<html lang="en">

<head>
<?php $this->load->view("admin/_partials/head.php") ?>
</head>

<body id="page-top">

<?php $this->load->view("admin/_partials/navbar.php") ?>


<div id="wrapper">

<?php $this->load->view("admin/_partials/sidebar.php") ?>

<div id="content-wrapper">

<div class="container-fluid">

<?php $this->load-
>view("admin/_partials/breadcrumb.php") ?>

<!-- DataTables -->


<div class="card mb-3">
<div class="card-header">
<a href="<?php echo
site_url('admin/products/add') ?>"><i class="fas fa-plus"></i> Add New</a>
</div>
<div class="card-body">

<div class="table-responsive">
<table class="table
table-hover" id="dataTable" width="100%" cellspacing="0">
<thead>

<tr>
<th>Name</th>

<th>Price</th>

<th>Photo</th>

<th>Description</th>

<th>Action</th>

</tr>
</thead>
<tbody>

<?php foreach ($products as $product): ?>

<tr>

<td width="150">

<?php echo $product->name ?>

</td>

<td>

<?php echo $product->price ?>

</td>

<td>

<img src="<?php echo base_url('upload/product/'.$product->image) ?>"


width="64" />

</td>

<td class="small">

<?php echo substr($product->description, 0, 120) ?>...</td>

<td width="250">

<a href="<?php echo site_url('admin/products/edit/'.$product->product_id)


?>"

class="btn btn-small"><i class="fas fa-edit"></i> Edit</a>

<a onclick="deleteConfirm('<?php echo


site_url('admin/products/delete/'.$product->product_id) ?>')"

href="#!" class="btn btn-small text-danger"><i class="fas fa-trash"></i>


Hapus</a>

</td>

</tr>

<?php endforeach; ?>

</tbody>
</table>
</div>
</div>
</div>

</div>
<!-- /.container-fluid -->

<!-- Sticky Footer -->


<?php $this->load->view("admin/_partials/footer.php") ?>

</div>
<!-- /.content-wrapper -->

</div>
<!-- /#wrapper -->

<?php $this->load->view("admin/_partials/scrolltop.php") ?>


<?php $this->load->view("admin/_partials/modal.php") ?>

<?php $this->load->view("admin/_partials/js.php") ?>

<script>
function deleteConfirm(url){
$('#btn-delete').attr('href', url);
$('#deleteModal').modal();
}
</script>

</body>

</html>

b. Tampilan untuk menambah data


Berinama filenya dengan nama new_form.php.
<!DOCTYPE html>
<html lang="en">

<head>
<?php $this->load->view("admin/_partials/head.php") ?>
</head>

<body id="page-top">

<?php $this->load->view("admin/_partials/navbar.php") ?>


<div id="wrapper">

<?php $this->load->view("admin/_partials/sidebar.php") ?>

<div id="content-wrapper">

<div class="container-fluid">

<?php $this->load-
>view("admin/_partials/breadcrumb.php") ?>

<?php if ($this->session->flashdata('success')): ?>


<div class="alert alert-success" role="alert">
<?php echo $this->session-
>flashdata('success'); ?>
</div>
<?php endif; ?>

<div class="card mb-3">


<div class="card-header">
<a href="<?php echo
site_url('admin/products/') ?>"><i class="fas fa-arrow-left"></i> Back</a>
</div>
<div class="card-body">

<form action="<?php
base_url('admin/product/add') ?>" method="post" enctype="multipart/form-data" >
<div class="form-
group">
<label
for="name">Name*</label>
<input
class="form-control <?php echo form_error('name') ? 'is-invalid':'' ?>"
type="text"
name="name" placeholder="Product name" />
<div
class="invalid-feedback">

<?php echo form_error('name') ?>


</div>
</div>

<div class="form-
group">
<label
for="price">Price*</label>
<input
class="form-control <?php echo form_error('price') ? 'is-invalid':'' ?>"

type="number" name="price" min="0" placeholder="Product price" />


<div
class="invalid-feedback">

<?php echo form_error('price') ?>


</div>
</div>

<div class="form-
group">
<label
for="name">Photo</label>
<input
class="form-control-file <?php echo form_error('price') ? 'is-invalid':'' ?>"
type="file"
name="image" />
<div
class="invalid-feedback">

<?php echo form_error('image') ?>


</div>
</div>

<div class="form-
group">
<label
for="name">Description*</label>
<textarea
class="form-control <?php echo form_error('description') ? 'is-invalid':'' ?>"

name="description" placeholder="Product description..."></textarea>


<div
class="invalid-feedback">

<?php echo form_error('description') ?>


</div>
</div>

<input class="btn btn-


success" type="submit" name="btn" value="Save" />
</form>

</div>

<div class="card-footer small text-muted">


* required fields
</div>

</div>
<!-- /.container-fluid -->
<!-- Sticky Footer -->
<?php $this->load->view("admin/_partials/footer.php")
?>

</div>
<!-- /.content-wrapper -->

</div>
<!-- /#wrapper -->

<?php $this->load->view("admin/_partials/scrolltop.php") ?>

<?php $this->load->view("admin/_partials/js.php") ?>

</body>

</html>

c. Tampilan untuk mengedit data


Berinama filenya dengan nama edit_form.php
<!DOCTYPE html>
<html lang="en">

<head>
<?php $this->load->view("admin/_partials/head.php") ?>
</head>

<body id="page-top">

<?php $this->load->view("admin/_partials/navbar.php") ?>


<div id="wrapper">

<?php $this->load->view("admin/_partials/sidebar.php") ?>

<div id="content-wrapper">

<div class="container-fluid">

<?php $this->load-
>view("admin/_partials/breadcrumb.php") ?>

<?php if ($this->session->flashdata('success')): ?>


<div class="alert alert-success" role="alert">
<?php echo $this->session-
>flashdata('success'); ?>
</div>
<?php endif; ?>

<!-- Card -->


<div class="card mb-3">
<div class="card-header">

<a href="<?php echo


site_url('admin/products/') ?>"><i class="fas fa-arrow-left"></i>
Back</a>
</div>
<div class="card-body">

<form action="<?php
base_url('admin/product/edit') ?>" method="post" enctype="multipart/form-data">

<input type="hidden"
name="id" value="<?php echo $product->product_id?>" />

<div class="form-
group">
<label
for="name">Name*</label>
<input
class="form-control <?php echo form_error('name') ? 'is-invalid':'' ?>"
type="text"
name="name" placeholder="Product name" value="<?php echo $product->name ?>" />
<div
class="invalid-feedback">

<?php echo form_error('name') ?>


</div>
</div>

<div class="form-
group">
<label
for="price">Price</label>
<input
class="form-control <?php echo form_error('price') ? 'is-invalid':'' ?>"

type="number" name="price" min="0" placeholder="Product price" value="<?php echo $product-


>price ?>" />
<div
class="invalid-feedback">

<?php echo form_error('price') ?>


</div>
</div>

<div class="form-
group">
<label
for="name">Photo</label>
<input
class="form-control-file <?php echo form_error('image') ? 'is-invalid':'' ?>"
type="file"
name="image" />
<input
type="hidden" name="old_image" value="<?php echo $product->image ?>" />
<div
class="invalid-feedback">

<?php echo form_error('image') ?>


</div>
</div>

<div class="form-
group">
<label
for="name">Description*</label>
<textarea
class="form-control <?php echo form_error('description') ? 'is-invalid':'' ?>"

name="description" placeholder="Product description..."><?php echo $product->description


?></textarea>
<div
class="invalid-feedback">

<?php echo form_error('description') ?>


</div>
</div>

<input class="btn btn-


success" type="submit" name="btn" value="Save" />
</form>

</div>

<div class="card-footer small text-muted">


* required fields
</div>
</div>
<!-- /.container-fluid -->

<!-- Sticky Footer -->


<?php $this->load->view("admin/_partials/footer.php")
?>

</div>
<!-- /.content-wrapper -->

</div>
<!-- /#wrapper -->

<?php $this->load->view("admin/_partials/scrolltop.php") ?>

<?php $this->load->view("admin/_partials/js.php") ?>

</body>

</html>

6. Membuat Fitur Hapus Data


Buka file list.php, kemudian masukkan coding berikut di bawah sebelum </body>
<script>
function deleteConfirm(url){
$('#btn-delete').attr('href', url);
$('#deleteModal').modal();

Lalu, buat file modal.php di folder _partials, dan masukkan coding berikut:
<!-- Logout Delete Confirmation-->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-
labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Are you sure?</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">Data yang dihapus tidak akan bisa dikembalikan.</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
<a id="btn-delete" class="btn btn-danger" href="#">Delete</a>
</div>
</div>
</div>
</div>
7. Jangan lupa save pekerjaan anda, lalu coba jalankan
localhost/fruitshopfatya/index.php/admin/products
Tampilannya akan seperti ini:
Tambah Data

Tampil Data
Hapus Data

Edit Data
8. Fitur Upload Gambar
a. Buat folder baru didalam projek bernama upload, kemudian buat folder bernama
product.

b. Kemudian buka file Product_model.php, tambahkan _uploadImage()


private function _uploadImage()
{
$config['upload_path'] = './upload/product/';
$config['allowed_types'] = 'gif|jpg|png';
$config['file_name'] = $this->product_id;
$config['overwrite'] = true;
$config['max_size'] = 1024; // 1MB
// $config['max_width'] = 1024;
// $config['max_height'] = 768;

$this->load->library('upload', $config);

if ($this->upload->do_upload('image')) {
return $this->upload->data("file_name");
}

return "default.jpg";
}

c. Ubah method save, menjadi seperti berikut:


public function save()
{
$post = $this->input->post();
$this->product_id = uniqid();
$this->name = $post["name"];
$this->price = $post["price"];
$this->image = $this->_uploadImage();
$this->description = $post["description"];
$this->db->insert($this->_table, $this);
}
d. Ubah method update juga, menjadi seperti ini:
public function update()
{
$post = $this->input->post();
$this->product_id = $post["id"];
$this->name = $post["name"];
$this->price = $post["price"];

if (!empty($_FILES["image"]["name"])) {
$this->image = $this->_uploadImage();
} else {
$this->image = $post["old_image"];
}

$this->description = $post["description"];
$this->db->update($this->_table, $this, array('product_id' => $post['id']));

e. Tambahkan method _deleteImage()


private function _deleteImage($id)
{
$product = $this->getById($id);
if ($product->image != "default.jpg") {
$filename = explode(".", $product->image)[0];
return array_map('unlink', glob(FCPATH."upload/product/$filename.*"));
}
}

f. Jangan lupa simpan, kemudian coba tambahkan field lagi dan jangan lupa upload
gambarnya.
Tampilannya akan seperti ini:

Anda mungkin juga menyukai