1. Membuat Database
masuk kedalam database daily_codeigniter kemudian masukan query sql dibawah ini untuk membuat tablenya :
CREATE TABLE `tb_biodata` (
`id` int(255) NOT NULL,
`name` varchar(255) NOT NULL,
`gender` enum('Male','Female') NOT NULL,
`birthday` date NOT NULL,
`photo` varchar(255) NOT NULL,
`hobby` varchar(255) NOT NULL,
`about` text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
--
-- Indexes for dumped tables
--
--
-- Indexes for table `tb_biodata`
--
ALTER TABLE `tb_biodata`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for table `tb_biodata`
--
ALTER TABLE `tb_biodata`
MODIFY `id` int(255) NOT NULL AUTO_INCREMENT;2. Membuat Controller
- buat file controllers dengan nama Crud.php didalam folder app maka pathnya adalah application/controllers/app/Crud.php
- kemudian isi dengan kode dibawah ini :
<?php
defined('BASEPATH') OR exit('no direct script access allowed');
class Crud extends MY_App
{
private $redirect = 'app/crud';
public function __construct()
{
parent::__construct();
$this->load->helper('form');
$this->load->library('form_validation');
$this->load->model('app/M_Crud');
}
public function index()
{
$data = [
'title' => 'Module Crud',
'biodata' => $this->M_Crud->read(),
];
$this->load->view('app/crud/index',$data);
}
public function create()
{
$data = [
'title' => 'Create Data',
'update' => false,
];
$this->load->view('app/crud/form',$data);
}
public function process_create()
{
$create = $this->M_Crud->create();
if ($create == TRUE) {
$this->session->set_flashdata('create', true);
}
else {
$this->session->set_flashdata('create', 'failed');
}
redirect($this->redirect);
}
public function update($id)
{
$data = [
'title' => 'Update Data',
'update' => true,
'biodata' => $this->M_Crud->read_by($id),
];
$this->load->view('app/crud/form',$data);
}
public function process_update($id)
{
if ($this->M_Crud->update($id) == TRUE) {
$this->session->set_flashdata('edit', true);
}else {
$this->session->set_flashdata('edit', 'failed');
}
redirect($this->redirect);
}
public function process_delete($id)
{
if ($this->M_Crud->delete($id) == TRUE) {
$this->session->set_flashdata('delete', true);
}else {
$this->session->set_flashdata('delete', 'failed');
}
redirect($this->redirect);
}
}
?>
3. Membuat Model
- Dilanjut membuat file model dengan nama M_Crud.php didalam folder app (buat folder app terlebih dahulu) maka pathnya adalah application/models/app/M_Crud.php
- kemudian isi dengan kode dibawah ini :
<?php
defined('BASEPATH') OR exit('no direct script access allowed');
class M_Crud extends CI_Model
{
private $table = 'tb_biodata';
private $storage_path = 'storage/uploads/';
/**
* Form Process
*/
public function _form_data($identity = false)
{
$this->_form_validation();
$prepare_data = array(
'name' => $this->input->post('name'),
'gender' => $this->input->post('gender'),
'birthday' => date('Y-m-d', strtotime($this->input->post('birthday'))),
'hobby' => $this->input->post('hobby'),
'about' => $this->input->post('about'),
);
if (!empty($_FILES['photo']['name']))
{
if ($identity)
{
$delete_image = $this->db->get_where($this->table,$identity)->row_array();
$this->__delete_file($delete_image['photo']);
}
$upload_image = $this->__upload_file();
if ($upload_image !== 'failed')
{
$photo = $upload_image;
}else
{
echo "failed upload photo, code error";
exit;
}
$photo = array('photo' => $photo);
$data = array_merge($prepare_data,$photo);
}else
{
$data = $prepare_data;
}
return $data;
}
public function _form_validation()
{
$this->form_validation->set_rules('name','name','required');
$this->form_validation->set_rules('gender','gender','required');
$this->form_validation->set_rules('birthday','birthday','required');
$this->form_validation->set_rules('hobby','hobby','required');
$this->form_validation->set_rules('about','about','required');
$this->form_validation->set_error_delimiters('<span>', '</span>');
if($this->form_validation->run() != false)
{
return true;
}else{
$data = array(
'name' => form_error('name'),
'gender' => form_error('gender'),
'birthday' => form_error('birthday'),
'hobby' => form_error('hobby'),
'about' => form_error('about'),
);
$this->session->set_flashdata($data);
redirect($_SERVER['HTTP_REFERER']);
}
}
/**
* Database Process
*/
public function read()
{
return $this->db->get($this->table)->result_array();
}
public function read_by($id)
{
$identity = array('id' => $id);
return $this->db->get_where($this->table,$identity)->row_array();
}
public function create()
{
$post_data = $this->_form_data();
$this->db->insert($this->table,$post_data);
return ($this->db->affected_rows() > 0) ? true : false;
}
public function update($id)
{
$identity = array('id' => $id);
$post_data = $this->_form_data($identity);
$this->db->trans_start();
$this->db->update($this->table, $post_data, $identity);
$this->db->trans_complete();
if ($this->db->affected_rows() > 0) {
return true;
}else {
if ($this->db->trans_status() === false) {
return false;
}else {
return true;
}
}
}
public function delete($id)
{
$identity = array('id' => $id);
$this->db->db_debug = false;
$read = $this->db->get_where($this->table,$identity);
if ($read->num_rows() > 0) {
$delete_image = $read->row_array();
$this->__delete_file($delete_image['photo']);
$this->db->delete($this->table,$identity);
return ($this->db->affected_rows() > 0) ? true : false;
}
}
/**
* File Process
*/
public function __upload_file()
{
$this->load->library('upload');
$config_upload = [
'upload_path' => $this->storage_path,
'allowed_types' =>'jpg|png|ico',
];
$this->upload->initialize($config_upload);
if($this->upload->do_upload('photo'))
{
$result = array('photo' => $this->upload->data());
$create_thumb = $this->_thumbnail($result['photo']['file_name']);
if ($create_thumb != 'success') {
echo $create_thumb;
exit;
}
return $result['photo']['file_name'];
}else {
return 'failed';
}
}
public function __delete_file($file)
{
@unlink($this->storage_path.$file);
@unlink($this->storage_path.'thumbnail/'.$file);
}
/**
* Image Process
*/
public function _thumbnail($file_data)
{
$this->load->library('image_lib');
$source_path = $this->storage_path.$file_data;
$target_path = $this->storage_path.'thumbnail/';
$config = array(
'image_library' => 'gd2',
'source_image' => $source_path,
'new_image' => $target_path,
'maintain_ratio' => TRUE,
'width' => 320,
);
$this->image_lib->clear();
$this->image_lib->initialize($config);
if (!$this->image_lib->resize()) {
return $this->image_lib->display_errors();
}
else {
return 'success';
}
}
}4. Membuat View
- Buat folder crud didalam folder app (pathnya daily_codeigniter/application/views/app/crud)
- Buat file index.php didalam folder app (pathnya daily_codeigniter/application/views/app/crud/index.php)
- isi dengan kode ini
<?php $this->load->view('app/_layouts/header'); ?>
<?php $this->load->view('app/_layouts/sidebar'); ?>
<div class="row">
<div class="col-md-12">
<div class="c-card c-card--responsive h-100vh u-p-zero">
<div class="c-card__header c-card__header--transparent o-line">
<a class="c-btn--custom c-btn--small c-btn c-btn--info" href="<?php echo base_url('app/crud/create') ?>">
<i class="fa fa-plus"></i>
</a>
</div>
<div class="c-card__body">
<?php $this->load->view('app/_layouts/alert'); ?>
<div class="c-table-responsive">
<table class="c-table c-table--zebra" style="display: table;">
<thead class="c-table__head">
<tr class="c-table__row">
<th class="c-table__cell c-table__cell--head">user</th>
<th class="c-table__cell c-table__cell--head">birthday</th>
<th class="c-table__cell c-table__cell--head">hobby</th>
<th class="c-table__cell c-table__cell--head">about</th>
<th class="c-table__cell c-table__cell--head">tools</th>
</tr>
</thead>
<tbody>
<?php if ($biodata): ?>
<?php foreach ($biodata as $data): ?>
<tr class="c-table__row">
<td class="c-table__cell">
<?php if ($data['photo']): ?>
<div class="o-media__img u-mr-xsmall">
<a target="_blank" href="<?php echo base_url("storage/uploads/thumbnail/{$data['photo']}") ?>"><img width="60" src="<?php echo base_url("storage/uploads/thumbnail/{$data['photo']}") ?>" alt="<?php echo $data['name'] ?>"/></a>
</div>
<?php endif ?>
<div class="o-media__body">
<?php echo $data['name'] ?>
<span class="u-block u-text-mute u-text-xsmall"><?php echo $data['gender'] ?></span>
</div>
</td>
<td class="c-table__cell">
<?php echo $data['birthday'] ?>
</td>
<td class="c-table__cell">
<?php echo $data['hobby'] ?>
</td>
<td class="c-table__cell">
<?php echo $data['about'] ?>
</td>
<td class="c-table__cell">
<a class="c-btn c-btn--info c-btn--custom" href="<?php echo base_url('app/crud/update/'.$data['id']) ?>">
<i class="fa fa-edit"></i>
</a>
<button class="c-btn c-btn--danger c-btn--custom action-delete" data-href="<?php echo base_url('app/crud/process_delete/'.$data['id']) ?>">
<i class="fa fa-trash"></i>
</button>
</td>
</tr>
<?php endforeach ?>
<?php else: ?>
<tr>
<td class="c-table__cell u-text-center" colspan="8">No Content</td>
</tr>
<?php endif ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<?php $this->load->view('app/_layouts/footer'); ?>
- Buat file form.php didalam folder crud (pathnya daily_codeigniter/application/views/app/crud/form.php)
- isi dengan kode ini
<?php $this->load->view('app/_layouts/header'); ?>
<?php $this->load->view('app/_layouts/sidebar'); ?>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<form action="<?php echo ($update == true) ? base_url('app/crud/process_update/'.$biodata['id']) : base_url('app/crud/process_create') ?>" class="row" method="post" enctype="multipart/form-data">
<div class="col-12 col-xl-9 col-lg-9 u-p-zero">
<div class="c-card c-card--responsive h-100vh u-p-zero">
<div class="c-card__header c-card__header--transparent o-line">
<button class="c-btn c-btn--info" name="publish" type="submit" title="publish">
<i class="fa fa-save" aria-hidden="true"></i>
</button>
</div>
<div class="c-card__body u-p-small">
<div class="c-field u-mb-small">
<label class="c-field__label u-text-uppercase">name : </label>
<input autofocus="" value="<?php echo (!empty($biodata['name']) ? $biodata['name'] : '') ?>" class="c-input" name="name" id="name" type="text" placeholder="name">
<?php if ($this->session->flashdata('name')): ?>
<small class="c-field__message u-color-danger">
<i class="fa fa-times-circle"></i><?php echo $this->session->flashdata('name') ?>
</small>
<?php endif ?>
</div>
<div class="c-field u-mb-small">
<p class="u-text-mute u-text-uppercase u-mb-small">gender</p>
<?php if ($this->session->flashdata('gender')): ?>
<small class="c-field__message u-color-danger">
<i class="fa fa-times-circle"></i><?php echo $this->session->flashdata('gender') ?>
</small>
<?php endif ?>
</div>
<div class="c-choice c-choice--radio">
<input class="c-choice__input" id="male" name="gender" type="radio" value="male" <?php echo (!empty($biodata['gender']) AND $biodata['gender'] == 'Male') ? 'checked' : '' ?>>
<label class="c-choice__label" for="male">Male</label>
</div>
<div class="c-choice c-choice--radio">
<input class="c-choice__input" id="female" name="gender" type="radio" value="female" <?php echo (!empty($biodata['gender']) AND $biodata['gender'] == 'Female') ? 'checked' : '' ?>>
<label class="c-choice__label" for="female">Female</label>
</div>
<label class="c-field__label u-text-uppercase">birthday</label>
<div class="c-field has-icon-right u-mb-small">
<span class="c-field__icon">
<i class="fa fa-calendar"></i>
</span>
<input name="birthday" readonly="" class="c-input" data-toggle="datepicker" type="text" placeholder="select date" value="<?php echo (!empty($biodata['birthday']) ? date('m-d-Y', strtotime($biodata['birthday'])) : '') ?>">
<?php if ($this->session->flashdata('birthday')): ?>
<small class="c-field__message u-color-danger">
<i class="fa fa-times-circle"></i><?php echo $this->session->flashdata('birthday') ?>
</small>
<?php endif ?>
</div>
<div class="c-field u-mb-small">
<label class="c-field__label u-text-uppercase">photo : </label>
<?php if (!empty($biodata['photo'])): ?>
<img width="100px" src="<?php echo (!empty($biodata['photo']) ? base_url("storage/uploads/thumbnail/{$biodata['photo']}") : '') ?>" alt="photo">
<?php endif ?>
<input class="c-input" name="photo" id="photo" type="file" placeholder="photo">
</div>
<div class="c-field u-mb-small">
<label class="c-field__label u-text-uppercase">hobby : </label>
<input autofocus="" value="<?php echo (!empty($biodata['hobby']) ? $biodata['hobby'] : '') ?>" class="c-input" name="hobby" id="hobby" type="text" placeholder="hobby">
<?php if ($this->session->flashdata('hobby')): ?>
<small class="c-field__message u-color-danger">
<i class="fa fa-times-circle"></i><?php echo $this->session->flashdata('hobby') ?>
</small>
<?php endif ?>
</div>
<div class="c-field u-mb-small">
<label class="c-field__label u-text-uppercase">about : </label>
<textarea rows="5" autofocus="" class="c-input" name="about" id="about" type="text" placeholder="about"><?php echo (!empty($biodata['about']) ? $biodata['about'] : '') ?></textarea>
<?php if ($this->session->flashdata('about')): ?>
<small class="c-field__message u-color-danger">
<i class="fa fa-times-circle"></i><?php echo $this->session->flashdata('about') ?>
</small>
<?php endif ?>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<?php $this->load->view('app/_layouts/footer'); ?>
5. Menambah Menu Navigasi
- buka file nav.php (pathnya daily_codeigniter/application/views/app/_layouts/nav.php)
- ganti isi kode didalamnya menjadi kode dibawah ini
<li class="c-sidebar__item">
<a class="c-sidebar__link <?php if($this->uri->segment(1)=="app" and empty($this->uri->segment(2)) or $this->uri->segment(2) == 'dashboard'){echo "is-active";}?>" href="<?php echo base_url('app/dashboard') ?>">
<i class="fa fa-fire u-mr-xsmall"></i>Dashboard
</a>
</li>
<h4 class="c-sidebar__title">First App</h4>
<li class="c-sidebar__item">
<a class="c-sidebar__link <?php if($this->uri->segment(2)=='crud' or $this->uri->segment(2)=='crud' and $this->uri->segment(3) == 'create' ){echo "is-active";}?>" href="<?php echo base_url('app/crud') ?>">
<i class="fa fa-fire u-mr-xsmall"></i> Crud
</a>
</li>
6. Menambahkan Sweet Alert
- buka file all-modules.js (pathnya daily_codeigniter/storage/app/js/all-modules.js)
- tambahkan kode sweetalert dibawah ini
7. Konfigurasi Sweet Alert
- buka file custom.js (pathnya daily_codeigniter/storage/app/js/custom.js)
- tambahkan kode dibawah ini
$('.action-delete').click(function(){
Swal.fire({
title: 'Are you sure?',
text: "You Will delete this data !",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes'
}).then((result) => {
if (result.value) {
window.location.href = $(this).data('href');
}
})
});
8. Membuat Folder Uploads
folder uploads ini nantinya untuk menampung file gambar yang berhasil diupload pada proses crud- buat folder uploads didalam folder storage (pathnya daily_codeigniter/storage/uploads)
- buat folder thumbnail didalam folder storage (pathnya daily_codeigniter/storage/uploads/thumbnail)
9. Ujicoba Proses
- jalankan projectnya dengan membuka url
- http://localhost/daily_codeigniter/app/crud
