TUGAS 7 PBKK A - CRUD Pada Framework CodeIgniter
1. Persiapan
- Ikuti semua tahap pada post TUGAS 6 PBKK A - Pengenalan Framework CodeIgniter
- Ikuti tahap-tahap yang disebutkan di Tutorial Codeigniter #5: Cara Membuat Fitur CRUD yang Benar! (petanikode)
- Ikuti semua tahap yang disebutkan di Tutorial Codeigniter #6: Membuat Fitur Upload File (petanikode)
2. Membuat Aplikasi CRUD CodeIgniter
Tabel pada Database
Konfigurasi pada application/config/database.php
$db['default'] = array(
'dsn' => '',
'hostname' => 'localhost',
'username' => 'root',
'password' => '',
'database' => 'pengenalanci',
'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
);
Model portofolio pada application/models/Portofolio_model.php
<?php defined('BASEPATH') OR exit('No direct script access allowed');
class Portofolio_model extends CI_Model
{
private $_table = "portofolios";
public $portofolio_id;
public $portofolio_name;
public $portofolio_date;
public $portofolio_desc;
public $portofolio_pic = "default.jpg";
public function rules()
{
return [
['field' => 'portofolio_name',
'label' => 'portofolio_name',
'rules' => 'required'],
['field' => 'portofolio_date',
'label' => 'portofolio_date',
'rules' => 'required']
];
}
public function getAll()
{
return $this->db->order_by('portofolio_date','ASC')->get($this->_table)->result();
}
public function getById($id)
{
return $this->db->get_where($this->_table, ["portofolio_id" => $id])->row();
}
public function save()
{
$post = $this->input->post();
$this->portofolio_id = uniqid();
$this->portofolio_name = $post["portofolio_name"];
$this->portofolio_date = $post["portofolio_date"];
$this->portofolio_desc = $post["portofolio_desc"];
$this->portofolio_pic = $this->_uploadImage();
return $this->db->insert($this->_table, $this);
}
public function update()
{
$post = $this->input->post();
$this->portofolio_id = $post["portofolio_id"];
$this->portofolio_name = $post["portofolio_name"];
$this->portofolio_date = $post["portofolio_date"];
$this->portofolio_desc = $post["portofolio_desc"];
if (!empty($_FILES["portofolio_pic"]["name"]))
{
$this->portofolio_pic = $this->_uploadImage();
}
else
{
$this->portofolio_pic = $post["old_image"];
}
return $this->db->update($this->_table, $this, array('portofolio_id' => $post['portofolio_id']));
}
public function delete($id)
{
$this->_deleteImage($id);
return $this->db->delete($this->_table, array("portofolio_id" => $id));
}
private function _uploadImage()
{
$config['upload_path'] = './public/upload/portofolio/';
$config['allowed_types'] = 'gif|jpg|png';
$config['file_name'] = $this->portofolio_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('portofolio_pic'))
{
return $this->upload->data("file_name");
}
return "default.jpg";
}
private function _deleteImage($id)
{
$portofolio = $this->getById($id);
if ($portofolio->portofolio_pic != "default.jpg")
{
$filename = explode(".", $portofolio->portofolio_pic)[0];
return array_map('unlink', glob(FCPATH."public/upload/portofolio/$filename.*"));
}
}
}
Controller pada application/controllers/admin/Portofolios.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Portofolios extends CI_Controller
{
public function __construct()
{
parent::__construct();
$this->load->model("Portofolio_model");
$this->load->library('form_validation');
}
public function index()
{
$data["portofolios"] = $this->Portofolio_model->getAll();
$this->load->view("admin/portofolio/list", $data);
}
public function add()
{
$portofolio = $this->Portofolio_model;
$validation = $this->form_validation;
$validation->set_rules($portofolio->rules());
if ($validation->run()) {
$portofolio->save();
$this->session->set_flashdata('success', 'Berhasil disimpan');
}
$this->load->view("admin/portofolio/new_form");
}
public function edit($id = null)
{
if (!isset($id)) redirect('admin/portofolios');
$portofolio = $this->Portofolio_model;
$validation = $this->form_validation;
$validation->set_rules($portofolio->rules());
if ($validation->run()) {
$portofolio->update();
$this->session->set_flashdata('success', 'Berhasil disimpan');
}
$data["portofolio"] = $portofolio->getById($id);
if (!$data["portofolio"]) show_404();
$this->load->view("admin/portofolio/edit_form", $data);
}
public function delete($id=null)
{
if (!isset($id)) show_404();
if ($this->Portofolio_model->delete($id)) {
redirect(site_url('admin/portofolios'));
}
}
}
View untuk menampilkan daftar portofolio pada application/views/admin/portofolio/list.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Portfolio - Dafa Berlian</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<link rel="shortcut icon" href=<?= base_url("public/img/favicon.ico")?> type="image/x-icon" />
<link rel="stylesheet" type="text/css" href=<?= base_url("public/hometown/css/style.css")?>>
<link href="https://fonts.googleapis.com/css2?family=Courgette&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"></script>
</head>
<body>
<input type="checkbox" id="check">
<div class="sidebar">
<ul>
<a href=<?= base_url("about/")?>><li>About</li></a>
<a href=<?= base_url("contact/")?>><li>Contact</li></a>
<a href=<?= base_url("portofolioindex/")?>><li>Portfolio</li></a>
</ul>
</div>
<header>
<div class="container-fluid">
<h1><a href=<?= base_url("/")?>>DAFA BERLIAN</a></h1>
<ul>
<a href=<?= base_url("about/")?>><li>About</li></a>
<a href=<?= base_url("contact/")?>><li>Contact</li></a>
<a href=<?= base_url("portofolioindex/")?>><li>Portfolio</li></a>
</ul>
<label for="check" class="mobile-menu">
<div></div>
<div></div>
<div></div>
</label>
</div>
</header>
<section class="banner">
<div class="container">
<div class="banner-left">
<h1>My Portfolio</h1>
</div>
</div>
</section>
<section id="about">
<div class="container-fluid">
<!-- DataTables -->
<div class="card mb-3">
<div class="card-header">
<a href="<?= base_url('admin/portofolios/add') ?>" class="btn btn-primary">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>Date</th>
<th>Picture</th>
<th>Description</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php foreach ($portofolios as $portofolio): ?>
<tr>
<td width="150">
<?= $portofolio->portofolio_name ?>
</td>
<td>
<?= $portofolio->portofolio_date ?>
</td>
<td>
<a target="blank" href="<?= base_url('public/upload/portofolio/'.$portofolio->portofolio_pic) ?>"><img src="<?= base_url('public/upload/portofolio/'.$portofolio->portofolio_pic) ?>" width="80" /> </a>
</td>
<td class="small">
<?= substr($portofolio->portofolio_desc, 0, 120) ?>...</td>
<td width="250">
<a href="<?= base_url('admin/portofolios/edit/'.$portofolio->portofolio_id) ?>" class="btn btn-warning">Edit</a>
<a onclick="deleteConfirm('<?= site_url('admin/portofolios/delete/'.$portofolio->portofolio_id) ?>')" href="#!" class="btn btn-danger">Delete</a>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<small>Copyright © 2020 - Dafa Berlian.</small>
</div>
</footer>
<!-- 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">
<p>This action cannot be undone</p>
</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>
<script>
$(document).ready( function () {
$('#dataTable').DataTable();
} );
function deleteConfirm(url){
$('#btn-delete').attr('href', url);
$('#deleteModal').modal();
}
</script>
</body>
</html>
View untuk menampilkan form untuk membuat portofolio baru pada application/views/admin/portofolio/new_form.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Portfolio - Dafa Berlian</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<link rel="shortcut icon" href=<?= base_url("public/img/favicon.ico")?> type="image/x-icon" />
<link rel="stylesheet" type="text/css" href=<?= base_url("public/hometown/css/style.css")?>>
<link href="https://fonts.googleapis.com/css2?family=Courgette&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap" rel="stylesheet">
</head>
<body>
<input type="checkbox" id="check">
<div class="sidebar">
<ul>
<a href=<?= base_url("about/")?>><li>About</li></a>
<a href=<?= base_url("contact/")?>><li>Contact</li></a>
<a href=<?= base_url("portofolioindex/")?>><li>Portfolio</li></a>
</ul>
</div>
<header>
<div class="container-fluid">
<h1><a href=<?= base_url("/")?>>DAFA BERLIAN</a></h1>
<ul>
<a href=<?= base_url("about/")?>><li>About</li></a>
<a href=<?= base_url("contact/")?>><li>Contact</li></a>
<a href=<?= base_url("portofolioindex/")?>><li>Portfolio</li></a>
</ul>
<label for="check" class="mobile-menu">
<div></div>
<div></div>
<div></div>
</label>
</div>
</header>
<section class="banner">
<div class="container">
<div class="banner-left">
<h1>My Portfolio</h1>
</div>
</div>
</section>
<section id="about">
<div class="container">
<?php if ($this->session->flashdata('success')): ?>
<div class="alert alert-success" role="alert">
<?= $this->session->flashdata('success'); ?>
</div>
<?php endif; ?>
<div class="card mb-3">
<div class="card-header">
<a href="<?= base_url('admin/portofolios/') ?>" class="btn btn-outline-secondary btn-block">Back</a>
</div>
<div class="card-body">
<form action="<?= site_url('admin/portofolios/add') ?>" method="post" enctype="multipart/form-data" >
<div class="form-group">
<label for="portofolio_name">Name <span style="color: red;">*</span></label>
<input class="form-control <?php echo form_error('portofolio_name') ? 'is-invalid':'' ?>"
type="text" name="portofolio_name" placeholder="Portofolio Name" />
<div class="invalid-feedback">
<?php echo form_error('portofolio_name') ?>
</div>
</div>
<div class="form-group">
<label for="portofolio_date">Date <span style="color: red;">*</span></label>
<input class="form-control <?php echo form_error('portofolio_date') ? 'is-invalid':'' ?>"
type="date" name="portofolio_date" placeholder="Portofolio Date" />
<div class="invalid-feedback">
<?php echo form_error('portofolio_date') ?>
</div>
</div>
<div class="form-group">
<label for="portofolio_desc">Description <span style="color: red;">*</span></label>
<textarea class="form-control <?php echo form_error('portofolio_desc') ? 'is-invalid':'' ?>"
name="portofolio_desc" placeholder="Portofolio description..."></textarea>
<div class="invalid-feedback">
<?php echo form_error('portofolio_desc') ?>
</div>
</div>
<div class="form-group">
<label for="portofolio_pic">Certificate Picture</label>
<input class="form-control-file <?php echo form_error('portofolio_pic') ? 'is-invalid':'' ?>"
type="file" name="portofolio_pic" />
<div class="invalid-feedback">
<?php echo form_error('portofolio_pic') ?>
</div>
</div>
<input class="btn btn-success" type="submit" name="btn" value="Save" />
</form>
</div>
<div class="card-footer small text-muted">
<span style="color: red;">*</span> required fields
</div>
</div>
</div>
<!-- /.container-fluid -->
</section>
<footer>
<div class="container">
<small>Copyright © 2020 - Dafa Berlian.</small>
</div>
</footer>
</body>
</html>
View untuk form edit pada application/views/admin/portofolio/edit_form.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Portfolio - Dafa Berlian</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<link rel="shortcut icon" href=<?= base_url("public/img/favicon.ico")?> type="image/x-icon" />
<link rel="stylesheet" type="text/css" href=<?= base_url("public/hometown/css/style.css")?>>
<link href="https://fonts.googleapis.com/css2?family=Courgette&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap" rel="stylesheet">
</head>
<body>
<input type="checkbox" id="check">
<div class="sidebar">
<ul>
<a href=<?= base_url("about/")?>><li>About</li></a>
<a href=<?= base_url("contact/")?>><li>Contact</li></a>
<a href=<?= base_url("portofolioindex/")?>><li>Portfolio</li></a>
</ul>
</div>
<header>
<div class="container-fluid">
<h1><a href=<?= base_url("/")?>>DAFA BERLIAN</a></h1>
<ul>
<a href=<?= base_url("about/")?>><li>About</li></a>
<a href=<?= base_url("contact/")?>><li>Contact</li></a>
<a href=<?= base_url("portofolioindex/")?>><li>Portfolio</li></a>
</ul>
<label for="check" class="mobile-menu">
<div></div>
<div></div>
<div></div>
</label>
</div>
</header>
<section class="banner">
<div class="container">
<div class="banner-left">
<h1>My Portfolio</h1>
</div>
</div>
</section>
<section id="about">
<div class="container">
<?php if ($this->session->flashdata('success')): ?>
<div class="alert alert-success" role="alert">
<?= $this->session->flashdata('success'); ?>
</div>
<?php endif; ?>
<div class="card mb-3">
<div class="card-header">
<a href="<?= base_url('admin/portofolios/') ?>" class="btn btn-outline-secondary btn-block">Back</a>
</div>
<div class="card-body">
<form action="" method="post" enctype="multipart/form-data">
<!-- Note: atribut action dikosongkan, artinya action-nya akan diproses
oleh controller tempat vuew ini digunakan. Yakni index.php/admin/portofolios/edit/ID --->
<input type="hidden" name="portofolio_id" value="<?php echo $portofolio->portofolio_id?>" />
<div class="form-group">
<label for="portofolio_name">Name <span style="color: red;">*</span></label>
<input class="form-control <?php echo form_error('portofolio_name') ? 'is-invalid':'' ?>"
type="text" name="portofolio_name" placeholder="Portofolio Name" value="<?php echo $portofolio->portofolio_name?>" />
<div class="invalid-feedback">
<?php echo form_error('portofolio_name') ?>
</div>
</div>
<div class="form-group">
<label for="portofolio_date">Date <span style="color: red;">*</span></label>
<input class="form-control <?php echo form_error('portofolio_date') ? 'is-invalid':'' ?>"
type="date" name="portofolio_date" value="<?php echo $portofolio->portofolio_date ?>" />
<div class="invalid-feedback">
<?php echo form_error('portofolio_date') ?>
</div>
</div>
<div class="form-group">
<label for="portofolio_desc">Description <span style="color: red;">*</span></label>
<textarea class="form-control <?php echo form_error('portofolio_desc') ? 'is-invalid':'' ?>"
name="portofolio_desc" placeholder="Portofolio description..."><?php echo $portofolio->portofolio_desc ?></textarea>
<div class="invalid-feedback">
<?php echo form_error('portofolio_desc') ?>
</div>
</div>
<div class="form-group">
<label for="portofolio_pic">Certificate Picture</label>
<input class="form-control-file <?php echo form_error('portofolio_pic') ? 'is-invalid':'' ?>"
type="file" name="portofolio_pic" />
<input type="hidden" name="old_image" value="<?php echo $portofolio->portofolio_pic ?>" />
<div class="invalid-feedback">
<?php echo form_error('portofolio_pic') ?>
</div>
</div>
<input class="btn btn-success" type="submit" name="btn" value="Save" />
</form>
</div>
<div class="card-footer small text-muted">
<span style="color: red;">*</span> required fields
</div>
</div>
</div>
<!-- /.container-fluid -->
</section>
<footer>
<div class="container">
<small>Copyright © 2020 - Dafa Berlian.</small>
</div>
</footer>
</body>
</html>
Tampilan daftar portofolio sisi publik:
Tampilan daftar portofolio sisi admin:
Tampilan form untuk menyunting portofolio yang sudah dibuat:
source code dapat dilihat disini
Komentar
Posting Komentar