CRUD adalah kepanjangan dari Create, Red, Update dan Delete yang artinya membuat intputan data, tampilan data, edit data dan hapus data, hampir semua websit mengunakan crud. apalagi web yang berbasis transaksi itu sudah wajib mengunakan CRUD, bisa di ibaratkan Crud adalah fungsi yang sangat penting dalam websit. ada banyak macamya untut crud Sendiri, disini saya akan menjabarkan bagaimana membuat Crud dengan CodeIgniter, beberapa fitur yang saya jabarkan disini sudah siap pakai sudah mengunakan bostrap dan modal agar kelihatan cantik seperti wanita tetangga saya. heheh
Ikuti langkah2 berikut, pahami dlu ya ngan langsung scrol turun dan cari link downloanya, soalnya nga saya kasi link download agar kamu terbiasa dan mengerti, tidak hanya asal download.
1. Buat database dengan nama books, bahasa indonesianya buku. code sqlny seperti dibawah ini
-- Table structure for table `books`
--
CREATE TABLE `books` (
`book_id` int(11) NOT NULL,
`book_isbn` int(11) NOT NULL,
`book_title` varchar(50) NOT NULL,
`book_author` varchar(50) NOT NULL,
`book_category` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
2. Buatlah sebuah kontruksi, dalam hal ini akan memuat library plugin, code seperti ini
public function __construct()
{
parent::__construct();
$this->load->helper('url');
$this->load->model('book_model');
}
3. Buatlah index, dimana index ini untuk menampilkan daya yang ada di database, semua button ada di index.
public function index()
{
$data['books']=$this->book_model->get_all_books();
$this->load->view('book_view',$data);
}
4. Buat file tambah buku code seperti dibawah ini
public function book_add()
{
$data = array(
'book_isbn' => $this->input->post('book_isbn'),
'book_title' => $this->input->post('book_title'),
'book_author' => $this->input->post('book_author'),
'book_category' => $this->input->post('book_category'),
);
$insert = $this->book_model->book_add($data);
echo json_encode(array("status" => TRUE));
}
6. Buat file dan beri nama Ajax_edit
public function ajax_edit($id)
{
$data = $this->book_model->get_by_id($id);
echo json_encode($data);
}
7. Buat file untuk update database
public function book_update()
{
$data = array(
'book_isbn' => $this->input->post('book_isbn'),
'book_title' => $this->input->post('book_title'),
'book_author' => $this->input->post('book_author'),
'book_category' => $this->input->post('book_category'),
);
$this->book_model->book_update(array('book_id' => $this->input->post('book_id')), $data);
echo json_encode(array("status" => TRUE));
}
8. Buat file delete code seperti dibawah ini
public function book_delete($id)
{
$this->book_model->delete_by_id($id);
echo json_encode(array("status" => TRUE));
}
Code diatas memang sengaja saya putus-putus agar kalian sebagai pembaca mengerti, untuk code lengkapnya seperti code dibawah ini
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Learn PHP CodeIgniter Framework with AJAX and Bootstrap</title>
<link href="<?php echo base_url('assests/bootstrap/css/bootstrap.min.css')?>" rel="stylesheet">
<link href="<?php echo base_url('assests/datatables/css/dataTables.bootstrap.css')?>" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<h1>Learn PHP CodeIgniter Framework with AJAX and Bootstrap</h1>
</center>
<h3>Book Store</h3>
<br />
<button class="btn btn-success" onclick="add_book()"><i class="glyphicon glyphicon-plus"></i> Add Book</button>
<br />
<br />
<table id="table_id" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Book ID</th>
<th>Book ISBN</th>
<th>Book Title</th>
<th>Book Author</th>
<th>Book Category</th>
<th style="width:125px;">Action
</p></th>
</tr>
</thead>
<tbody>
<?php foreach($books as $book){?>
<tr>
<td><?php echo $book->book_id;?></td>
<td><?php echo $book->book_isbn;?></td>
<td><?php echo $book->book_title;?></td>
<td><?php echo $book->book_author;?></td>
<td><?php echo $book->book_category;?></td>
<td>
<button class="btn btn-warning" onclick="edit_book(<?php echo $book->book_id;?>)"><i class="glyphicon glyphicon-pencil"></i></button>
<button class="btn btn-danger" onclick="delete_book(<?php echo $book->book_id;?>)"><i class="glyphicon glyphicon-remove"></i></button>
</td>
</tr>
<?php }?>
</tbody>
<tfoot>
<tr>
<th>Book ID</th>
<th>Book ISBN</th>
<th>Book Title</th>
<th>Book Author</th>
<th>Book Category</th>
<th>Action</th>
</tr>
</tfoot>
</table>
</div>
<script src="<?php echo base_url('assests/<a href="http://www.phpcodify.com/category/jquery/">jquery</a>/jquery-3.1.0.min.js')?>"></script>
<script src="<?php echo base_url('assests/bootstrap/js/bootstrap.min.js')?>"></script>
<script src="<?php echo base_url('assests/datatables/js/jquery.dataTables.min.js')?>"></script>
<script src="<?php echo base_url('assests/datatables/js/dataTables.bootstrap.js')?>"></script>
<script type="text/javascript">
$(document).ready( function () {
$('#table_id').DataTable();
} );
var save_method; //for save method string
var table;
function add_book()
{
save_method = 'add';
$('#form')[0].reset(); // reset form on modals
$('#modal_form').modal('show'); // show bootstrap modal
//$('.modal-title').text('Add Person'); // Set Title to Bootstrap modal title
}
function edit_book(id)
{
save_method = 'update';
$('#form')[0].reset(); // reset form on modals
//Ajax Load data from ajax
$.ajax({
url : "<?php echo site_url('index.php/book/ajax_edit/')?>/" + id,
type: "GET",
dataType: "JSON",
success: function(data)
{
$('[name="book_id"]').val(data.book_id);
$('[name="book_isbn"]').val(data.book_isbn);
$('[name="book_title"]').val(data.book_title);
$('[name="book_author"]').val(data.book_author);
$('[name="book_category"]').val(data.book_category);
$('#modal_form').modal('show'); // show bootstrap modal when complete loaded
$('.modal-title').text('Edit Book'); // Set title to Bootstrap modal title
},
error: function (jqXHR, textStatus, errorThrown)
{
alert('Error get data from ajax');
}
});
}
function save()
{
var url;
if(save_method == 'add')
{
url = "<?php echo site_url('index.php/book/book_add')?>";
}
else
{
url = "<?php echo site_url('index.php/book/book_update')?>";
}
// ajax adding data to database
$.ajax({
url : url,
type: "POST",
data: $('#form').serialize(),
dataType: "JSON",
success: function(data)
{
//if success close modal and reload ajax table
$('#modal_form').modal('hide');
location.reload();// for reload a page
},
error: function (jqXHR, textStatus, errorThrown)
{
alert('Error adding / update data');
}
});
}
function delete_book(id)
{
if(confirm('Are you sure delete this data?'))
{
// ajax delete data from database
$.ajax({
url : "<?php echo site_url('index.php/book/book_delete')?>/"+id,
type: "POST",
dataType: "JSON",
success: function(data)
{
location.reload();
},
error: function (jqXHR, textStatus, errorThrown)
{
alert('Error deleting data');
}
});
}
}
</script>
<!-- Bootstrap modal -->
<div class="modal fade" id="modal_form" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h3 class="modal-title">Book Form</h3>
</div>
<div class="modal-body form">
<form action="#" id="form" class="form-horizontal">
<input type="hidden" value="" name="book_id"/>
<div class="form-body">
<div class="form-group">
<label class="control-label col-md-3">Book ISBN</label>
<div class="col-md-9">
<input name="book_isbn" placeholder="Book ISBN" class="form-control" type="text">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Book Title</label>
<div class="col-md-9">
<input name="book_title" placeholder="Book_title" class="form-control" type="text">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Book Author</label>
<div class="col-md-9">
<input name="book_author" placeholder="Book Author" class="form-control<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Learn PHP CodeIgniter Framework with AJAX and Bootstrap</title>
<link href="<?php echo base_url('assests/bootstrap/css/bootstrap.min.css')?>" rel="stylesheet">
<link href="<?php echo base_url('assests/datatables/css/dataTables.bootstrap.css')?>" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<h1>Learn PHP CodeIgniter Framework with AJAX and Bootstrap</h1>
</center>
<h3>Book Store</h3>
<br />
<button class="btn btn-success" onclick="add_book()"><i class="glyphicon glyphicon-plus"></i> Add Book</button>
<br />
<br />
<table id="table_id" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Book ID</th>
<th>Book ISBN</th>
<th>Book Title</th>
<th>Book Author</th>
<th>Book Category</th>
<th style="width:125px;">Action
</p></th>
</tr>
</thead>
<tbody>
<?php foreach($books as $book){?>
<tr>
<td><?php echo $book->book_id;?></td>
<td><?php echo $book->book_isbn;?></td>
<td><?php echo $book->book_title;?></td>
<td><?php echo $book->book_author;?></td>
<td><?php echo $book->book_category;?></td>
<td>
<button class="btn btn-warning" onclick="edit_book(<?php echo $book->book_id;?>)"><i class="glyphicon glyphicon-pencil"></i></button>
<button class="btn btn-danger" onclick="delete_book(<?php echo $book->book_id;?>)"><i class="glyphicon glyphicon-remove"></i></button>
</td>
</tr>
<?php }?>
</tbody>
<tfoot>
<tr>
<th>Book ID</th>
<th>Book ISBN</th>
<th>Book Title</th>
<th>Book Author</th>
<th>Book Category</th>
<th>Action</th>
</tr>
</tfoot>
</table>
</div>
<script src="<?php echo base_url('assests/<a href="http://www.phpcodify.com/category/jquery/">jquery</a>/jquery-3.1.0.min.js')?>"></script>
<script src="<?php echo base_url('assests/bootstrap/js/bootstrap.min.js')?>"></script>
<script src="<?php echo base_url('assests/datatables/js/jquery.dataTables.min.js')?>"></script>
<script src="<?php echo base_url('assests/datatables/js/dataTables.bootstrap.js')?>"></script>
<script type="text/javascript">
$(document).ready( function () {
$('#table_id').DataTable();
} );
var save_method; //for save method string
var table;
function add_book()
{
save_method = 'add';
$('#form')[0].reset(); // reset form on modals
$('#modal_form').modal('show'); // show bootstrap modal
//$('.modal-title').text('Add Person'); // Set Title to Bootstrap modal title
}
function edit_book(id)
{
save_method = 'update';
$('#form')[0].reset(); // reset form on modals
//Ajax Load data from ajax
$.ajax({
url : "<?php echo site_url('index.php/book/ajax_edit/')?>/" + id,
type: "GET",
dataType: "JSON",
success: function(data)
{
$('[name="book_id"]').val(data.book_id);
$('[name="book_isbn"]').val(data.book_isbn);
$('[name="book_title"]').val(data.book_title);
$('[name="book_author"]').val(data.book_author);
$('[name="book_category"]').val(data.book_category);
$('#modal_form').modal('show'); // show bootstrap modal when complete loaded
$('.modal-title').text('Edit Book'); // Set title to Bootstrap modal title
},
error: function (jqXHR, textStatus, errorThrown)
{
alert('Error get data from ajax');
}
});
}
function save()
{
var url;
if(save_method == 'add')
{
url = "<?php echo site_url('index.php/book/book_add')?>";
}
else
{
url = "<?php echo site_url('index.php/book/book_update')?>";
}
// ajax adding data to database
$.ajax({
url : url,
type: "POST",
data: $('#form').serialize(),
dataType: "JSON",
success: function(data)
{
//if success close modal and reload ajax table
$('#modal_form').modal('hide');
location.reload();// for reload a page
},
error: function (jqXHR, textStatus, errorThrown)
{
alert('Error adding / update data');
}
});
}
function delete_book(id)
{
if(confirm('Are you sure delete this data?'))
{
// ajax delete data from database
$.ajax({
url : "<?php echo site_url('index.php/book/book_delete')?>/"+id,
type: "POST",
dataType: "JSON",
success: function(data)
{
location.reload();
},
error: function (jqXHR, textStatus, errorThrown)
{
alert('Error deleting data');
}
});
}
}
</script>
<!-- Bootstrap modal -->
<div class="modal fade" id="modal_form" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h3 class="modal-title">Book Form</h3>
</div>
<div class="modal-body form">
<form action="#" id="form" class="form-horizontal">
<input type="hidden" value="" name="book_id"/>
<div class="form-body">
<div class="form-group">
<label class="control-label col-md-3">Book ISBN</label>
<div class="col-md-9">
<input name="book_isbn" placeholder="Book ISBN" class="form-control" type="text">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Book Title</label>
<div class="col-md-9">
<input name="book_title" placeholder="Book_title" class="form-control" type="text">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Book Author</label>
<div class="col-md-9">
<input name="book_author" placeholder="Book Author" class="form-control" type="text">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Book Category</label>
<div class="col-md-9">
<input name="book_category" placeholder="Book Category" class="form-control" type="text">
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" id="btnSave" onclick="save()" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- End Bootstrap modal -->
</body>
</html>" type="text">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Book Category</label>
<div class="col-md-9">
<input name="book_category" placeholder="Book Category" class="form-control" type="text">
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" id="btnSave" onclick="save()" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- End Bootstrap modal -->
</body>
</html>
Untuk mendapatkan codenya saya kasih gratis silahkan download disini
No comments:
Post a Comment