Assalamualaikum Wr, Wb
Apakabar temen2 Semoga sehat dan bahagian, untuk postingan kali ini akan berbagi cara membuat aplikasi pencatatan buku tamu dengan framework codeigniter, dengan memanfaatkan kamera webcam dari komputer, langsung saja ya hehe
 |
| Tampilan Aplikasi Seperti Gambar |
Langkah Langkah
Ada 3 file dalam aplikasi ini
- File Controller Beranda.php
- File Model Mtamu.php
- File View beranda.php
Code File Controller
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Beranda extends CI_Controller {
public function __construct(){
parent::__construct();
$this->load->model('Mtamu');
}
public function index(){
date_default_timezone_set('Asia/Bangkok');
$data = $this->Mtamu->view();
$this->load->view('beranda');
}
public function tampil_tamu(){
$data = $this->Mtamu->view();
echo json_encode($data);
}
public function jumlah_tamu(){
$data = $this->Mtamu->jml_tamu();
echo json_encode($data);
}
public function simpan(){
$input_nama = $this->input->post('input_nama', true);
$input_jeniskelamin= $this->input->post('input_jeniskelamin', true);
$input_alamat = $this->input->post('input_alamat', true);
$input_nominal = $this->input->post('input_nominal', true);
$input_waktu = $this->input->post('input_waktu', true);
$image = $this->input->post('image');
$img = str_replace('data:image/jpeg;base64,','', $image);
// echo $img;
$imgg = base64_decode($img);
$filename = 'image_'.time().'.png';
file_put_contents(FCPATH.'uploads/'.$filename,$imgg);
$data = array(
'nama' => $input_nama,
'jenis_kelamin'=> $input_jeniskelamin,
'alamat' => $input_alamat,
'nominal' => $input_nominal,
'waktu' => $input_waktu,
'gambar' => $filename
);
// print_r($data);die();
$add = $this->db->insert('tb_tamu', $data);
if($add){
$callback = array(
'status'=>'sukses'
);
}else{
$callback = array(
'status'=>'gagal'
);
}
echo json_encode($callback);
}
public function ubah($id){
if($this->Mtamu->validation("update")){ // Jika validasi sukses atau hasil validasi adalah true
$this->Mtamu->edit($id);
$callback = array(
'status'=>'sukses'
);
}else{
$callback = array(
'status'=>'gagal'
);
}
echo json_encode($callback);
}
public function hapus($id){
$this->Mtamu->delete($id);
$callback = array(
'status'=>'sukses'
);
echo json_encode($callback);
}
public function date(){
$date = date('Y-m-d H:i:s');
echo json_encode($date);
}
}
Code File Model
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Mtamu extends CI_Model {
public function view(){
return $this->db->get('tb_tamu')->result();
}
public function jml_tamu(){
return $this->db->query('SELECT date(waktu) AS wkt, COUNT(waktu) AS jumlah FROM `tb_tamu` GROUP BY date(waktu)')->result();
}
public function validation($mode){
$this->load->library('form_validation');
if($mode == "save"){
$this->form_validation->set_rules('input_nama', 'Nama', 'required|max_length[50]');
$this->form_validation->set_rules('input_jeniskelamin', 'Jenis Kelamin', 'required');
$this->form_validation->set_rules('input_alamat', 'Alamat', 'required');
$this->form_validation->set_rules('input_nominal', 'Nominal', 'required|numeric|max_length[15]');
}else if($mode == "update"){
$this->form_validation->set_rules('edit_nama', 'Nama', 'required|max_length[50]');
$this->form_validation->set_rules('edit_jeniskelamin', 'Jenis Kelamin', 'required');
$this->form_validation->set_rules('edit_alamat', 'Alamat', 'required');
$this->form_validation->set_rules('edit_nominal', 'Nominal', 'required|numeric|max_length[15]');
}
if($this->form_validation->run()){return true;}
else{return false;}
}
public function save(){
$data = array(
"nama" => $this->input->post('input_nama'),
"jenis_kelamin" => $this->input->post('input_jeniskelamin'),
"alamat" => $this->input->post('input_alamat'),
"nominal" => $this->input->post('input_nominal'),
"waktu" => $this->input->post('input_waktu')
);
$this->db->insert('tb_tamu', $data);
}
public function edit($id){
$data = array(
"nama" => $this->input->post('edit_nama'),
"jenis_kelamin" => $this->input->post('edit_jeniskelamin'),
"alamat" => $this->input->post('edit_alamat'),
"nominal" => $this->input->post('edit_nominal'),
"waktu" => $this->input->post('edit_waktu')
);
$this->db->where('id_tamu', $id);
$this->db->update('tb_tamu', $data);
}
public function delete($id){
$this->db->where('id_tamu', $id);
$this->db->delete('tb_tamu');
}
}
Code File View
<?php
$status = $this->session->userdata("status");
if (isset($status) != "login") {
redirect('login');
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Beranda | Tamuku</title>
<meta name="description" content="LulusanSkom" />
<meta name="keywords" content="admin, admin dashboard, admin template, cms, LulusanSkom, responsive admin, sass, panel, software, ui, visualization, web app, application" />
<meta name="author" content="hencework" />
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<!-- Morris Charts CSS -->
<link href="<?php echo base_url();?>assets/vendors/bower_components/morris.js/morris.css" rel="stylesheet" type="text/css" />
<!-- Data table CSS -->
<link href="<?php echo base_url();?>assets/vendors/bower_components/datatables/media/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<!--alerts CSS -->
<link href="<?php echo base_url();?>assets/vendors/bower_components/sweetalert/dist/sweetalert.css" rel="stylesheet" type="text/css">
<!-- Custom CSS -->
<link href="<?php echo base_url();?>assets/dist/css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrapper theme-1-active pimary-color-red">
<!-- Top Menu Items -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="mobile-only-brand pull-left">
<div class="nav-header pull-left">
<div class="logo-wrap">
<a href="<?php echo base_url();?>">
<img class="brand-img" src="./assets/dist/img/chair2.jpg" alt="brand" />
<span class="brand-text">Buku Tamu</span>
</a>
</div>
</div>
<a id="toggle_mobile_nav" class="mobile-only-view" href="javascript:void(0);"><i class="zmdi zmdi-more"></i></a>
</div>
<div id="mobile_only_nav" class="mobile-only-nav pull-right">
<ul class="nav navbar-right top-nav pull-right">
<li class="dropdown auth-drp">
<a href="#" class="dropdown-toggle pr-0" data-toggle="dropdown"><?php echo $this->session->userdata('nama'); ?> <img src="<?php echo base_url();?>assets/dist/img/icon_topi.jpeg" alt="user_auth" class="user-auth-img img-circle" /><span class="user-online-status"></span></a>
<ul class="dropdown-menu user-auth-dropdown" data-dropdown-in="flipInX" data-dropdown-out="flipOutX">
<li>
<a href="<?php echo base_url();?>"><i class="zmdi zmdi-account"></i><span>Profile</span></a>
</li>
<li class="divider"></li>
<li>
<a href="login/logout"><i class="zmdi zmdi-power"></i><span>Log Out</span></a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<!-- /Top Menu Items -->
<!-- Main Content -->
<div class="page-wrapper" style="margin-left: 0px;">
<div class="container pt-25">
<!-- Row -->
<div class="row">
<div class="col-lg-9 col-md-9 col-sm-6 col-xs-12">
<div class="panel panel-default card-view panel-refresh">
<div class="refresh-container">
<div class="la-anim-1"></div>
</div>
<div class="panel-heading">
<div class="row">
<span class="weight-500 font-20 txt-primary ml-25">
<img src="<?php echo base_url();?>assets/dist/img/toga_ku.png" width="90px" style="margin-bottom:-20px" alt="user_auth" class="user-auth-img img-circle" />
Daftar Tamu</span>
<button data-toggle="modal" data-target="#form-tambah" class="btn btn-primary btn-sm pull-right" id="btn-tambah" style="padding-right: 8px;padding-left: 8px; margin-right: 10px;">Tambah Tamu</button>
</div>
<div class="clearfix"></div>
</div>
<div class="panel-wrapper collapse in">
<div class="panel-body">
<div class="table-wrap">
<div class="table-responsive">
<table id="tabel_tamu" class="table table-hover display pb-30">
<thead>
<tr>
<th>ID</th>
<th>Nama</th>
<th>Jenis Kelamin</th>
<th>Alamat</th>
<th>Foto</th>
<th>Aksi</th>
</tr>
</thead>
<tfoot>
<tr>
<th>ID</th>
<th>Nama</th>
<th>Jenis Kelamin</th>
<th>Alamat</th>
<th>Foto</th>
<th>Aksi</th>
</tr>
</tfoot>
<tbody id="tampil_data">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="panel panel-default card-view">
<div class="panel-heading">
<span class="weight-500 font-20 block text-center txt-primary">Jumlah Tamu</span>
<div class="clearfix"></div>
</div>
<div class="panel-wrapper collapse in">
<div class="panel-body">
<div id="jum_tamu">
</div>
<div id="jum_keseluruhan">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /Row -->
</div>
<!-- Footer -->
<footer class="footer container-fluid pl-30 pr-30">
<div class="row">
<div class="col-sm-12">
<p><?php echo date('yy');?> © <a href="http://www.lulusanskom.com/" target="_blank">LulusanSkom</a></p>
</div>
</div>
</footer>
<!-- /Footer -->
</div>
<!-- /Main Content -->
</div>
<!-- /#wrapper -->
<div id="form-tambah" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h5 class="modal-title">Masukkan Data Tamu</h5>
</div>
<div class="modal-body">
<div class="text-center">
<div id="scanner"></div>
</div>
<div id="result_tamu">
</div>
<form>
<div class="form-group">
<label class="control-label mb-10" for="nama">Nama</label>
<input type="text" class="form-control" name="input_nama" id="input_nama" placeholder="Masukkan Nama">
</div>
<div class="form-group">
<label class="control-label mb-10" for="jenis_kelamin">Jenis Kelamin</label>
<select class="form-control" name="input_jeniskelamin" id="input_jeniskelamin">
<option value="Laki-laki">Laki-laki</option>
<option value="Perempuan">Perempuan</option>
</select>
</div>
<div class="form-group">
<label class="control-label mb-10" for="alamat">Alamat</label>
<input type="text" class="form-control" name="input_alamat" id="input_alamat" placeholder="Masukkan Alamat">
</div>
<div class="form-group">
<label class="control-label mb-10" for="nominal">Nominal</label>
<input type="text" class="form-control" name="input_nominal" id="input_nominal" placeholder="Masukkan Nominal">
</div>
<input type="text" class="hidden" name="input_waktu" id="input_waktu">
</form>
</div>
<div class="modal-footer">
<button id="btn-simpan" type="button" class="btn btn-sm btn-primary ">Simpan</button>
</div>
</div>
</div>
</div>
<div id="form-edit" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h5 class="modal-title">Edit Data</h5>
</div>
<div class="modal-body">
<form>
<div class="edit"><img src="" id="gambar" alt=""></div>
<input type="text" class="hidden" name="edit_idtamu" id="edit_idtamu">
<div class="form-group">
<label class="control-label mb-10" for="edit_">Nama</label>
<input type="text" class="form-control" name="edit_nama" id="edit_nama" placeholder="Masukkan Nama">
</div>
<div class="form-group">
<label class="control-label mb-10" for="edit_jeniskelamin">Jenis Kelamin</label>
<select class="form-control" name="edit_jeniskelamin" id="edit_jeniskelamin">
<option value="Laki-laki">Laki-laki</option>
<option value="Perempuan">Perempuan</option>
</select>
</div>
<div class="form-group">
<label class="control-label mb-10" for="edit_alamat">Alamat</label>
<input type="text" class="form-control" name="edit_alamat" id="edit_alamat" placeholder="Masukkan Alamat">
</div>
<div class="form-group">
<label class="control-label mb-10" for="edit_nominal">Nominal</label>
<input type="text" class="form-control" name="edit_nominal" id="edit_nominal" placeholder="Masukkan Nominal">
</div>
<input type="text" class="hidden" name="edit_waktu" id="edit_waktu">
</form>
</div>
<div class="modal-footer">
<button id="btn-ubah" type="button" class="btn btn-sm btn-primary">Ubah</button>
</div>
</div>
</div>
</div>
<div id="form-hapus" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h5 class="modal-title">Hapus Data</h5>
</div>
<div class="modal-body">
<p class="text-center">Apakah Anda Yakin Ingin Menghapus Data Ini?</p>
<form>
<input type="text" class="hidden" name="hapus_idtamu" id="hapus_idtamu">
</form>
</div>
<div class="modal-footer">
<button id="btn-hapus" type="button" class="btn btn-sm btn-danger">Hapus</button>
</div>
</div>
</div>
</div>
<!-- JavaScript -->
<!-- jQuery -->
<script src="<?php echo base_url();?>assets/vendors/bower_components/jquery/dist/jquery.min.js"></script>
<script src="<?php echo base_url();?>assets/vendors/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- <script src="https://code.jquery.com/jquery-3.5.0.js"></script> -->
<!-- Bootstrap Core JavaScript -->
<script src="<?php echo base_url();?>assets/vendors/bower_components/bootstrap-validator/dist/validator.min.js"></script>
<!-- Data table JavaScript -->
<script src="<?php echo base_url();?>assets/vendors/bower_components/datatables/media/js/jquery.dataTables.min.js"></script>
<!-- Init JavaScript -->
<script src="<?php echo base_url();?>assets/dist/js/init.js"></script>
<!-- Slimscroll JavaScript -->
<script src="<?php echo base_url();?>assets/dist/js/jquery.slimscroll.js"></script>
<!-- Owl JavaScript -->
<script src="<?php echo base_url();?>assets/vendors/bower_components/owl.carousel/dist/owl.carousel.min.js"></script>
<!-- Switchery JavaScript -->
<script src="<?php echo base_url();?>assets/vendors/bower_components/switchery/dist/switchery.min.js"></script>
<!-- Sweet-Alert -->
<script src="<?php echo base_url();?>assets/vendors/bower_components/sweetalert/dist/sweetalert.min.js"></script>
<!-- Fancy Dropdown JS -->
<script src="<?php echo base_url();?>assets/dist/js/dropdown-bootstrap-extended.js"></script>
<!-- QR Code Scanner -->
<script src="<?php echo base_url();?>assets/vendors/bower_components/qrcode/qrcodelib.js"></script>
<!-- <script src="./assets/vendors/bower_components/qrcode/webcodecamjquery.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcamjs/1.0.25/webcam.js"></script>
<script>
var id = 0;
$(document).ready(function () {
tampil_tamu()
jumlah_tamu()
date();
$('#tabel_tamu').DataTable({
"language": {
"decimal": "",
"emptyTable": "Data Tidak Tersedia",
"info": "Tampilkan _START_ - _END_ dari _TOTAL_ Data",
"infoEmpty": "Showing 0 to 0 of 0 entries",
"infoFiltered": "(filter dari _MAX_ total data)",
"infoPostFix": "",
"thousands": ",",
"lengthMenu": "Tampilkan _MENU_ Data",
"loadingRecords": "Loading...",
"processing": "Proses...",
"search": "Cari:",
"zeroRecords": "Data Tidak Tersedia",
"paginate": {
"first": "First",
"last": "Last",
"next": "Lanjut",
"previous": "Kembali"
},
"aria": {
"sortAscending": ": activate to sort column ascending",
"sortDescending": ": activate to sort column descending"
}
}
});
function tampil_tamu() {
$.ajax({
type: 'ajax',
url: 'beranda/tampil_tamu',
async: false,
dataType: 'json',
success: function (data) {
var html = '';
var no = 1;
for (i = 0; i < data.length; i++) {
html += '<tr id="' + data[i].id_tamu + '">' +
'<td>' + no + '</td>' +
'<td>' + data[i].nama + '</td>' +
'<td>' + data[i].jenis_kelamin + '</td>' +
'<td>' + data[i].alamat + '</td>' +
// '<td>' + data[i].waktu +'<img src="<?php echo base_url('assets/');?>' + data[i].gambar + '" width="1px" style=" display: none"></td>' +
'<td>' +'<img src="<?php echo base_url('uploads/');?>' + data[i].gambar + '" width="40px"></td>' +
'<td>' +
'<button class="btn btn-xs btn-primary" style="padding-left: 10px;padding-right: 10px;" data-toggle="modal" data-target="#form-edit" id="btn-edit" data-id="' + data[i].id_tamu + '" data-nama="' + data[i].nama + '" data-jk="' + data[i].jenis_kelamin + '" data-jk="' + data[i].jenis_kelamin + '" data-alamat="' + data[i].alamat + '" data-nominal="' + data[i].nominal + '" data-gambar="' + data[i].gambar + '"> <i class="fa fa-pencil"></i></button> ' +
'<button class="btn btn-xs btn-danger" style="padding-left: 10px;padding-right: 10px;" data-toggle="modal" data-target="#form-hapus" data-id="' + data[i].id_tamu + '"> <i class="fa fa-trash"></i> </button>' +
'</td>' +
'</tr>'
no++;
}
$('#tampil_data').html(html);
}
});
}
function jumlah_tamu() {
$.ajax({
type: 'ajax',
url: 'beranda/jumlah_tamu',
// async: false,
dataType: 'json',
success: function (data) {
var html1 = '';
var html2 = '';
var jum = 0;
for (i = 0; i < data.length; i++) {
html1 += '<span class="pull-left inline-block capitalize-font txt-dark"> ' + data[i].wkt + '</span>' +
'<span class="label label-success pull-right" style="font-size:14px;">' + data[i].jumlah + '</span>' +
'<div class="clearfix"></div>' +
'<hr class="light-grey-hr row mt-10 mb-10" />';
}
$('#jum_tamu').html(html1);
for (u = 0; u < data.length; u++) {
jum += parseInt(data[u].jumlah);
}
html2 += '<span class="pull-left inline-block capitalize-font txt-dark">Jumlah</span>' +
'<span class="label label-primary pull-right" style="font-size:14px;">' + jum + '</span>' +
'<div class="clearfix"></div>';
$('#jum_keseluruhan').html(html2);
}
});
}
function date() {
$.ajax({
type: 'ajax',
url: 'beranda/date',
async: false,
dataType: 'json',
success: function (data) {
$('#waktu').val(data);
$('#edit_waktu').val(data);
}
});
}
$('#form-edit').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
console.log(button);
var id = button.data('id');
var nama = button.data('nama');
var jk = button.data('jk');
var alamat = button.data('alamat');
var nominal = button.data('nominal');
var gambar = button.data('gambar');
$('#edit_idtamu').val(id);
$('#edit_nama').val(nama);
$('#edit_jeniskelamin').val(jk);
$('#edit_alamat').val(alamat);
$('#edit_nominal').val(nominal);
console.log(gambar);
$('img#gambar').attr('src','<?=base_url("uploads/")?>'+gambar);
})
$('#form-hapus').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var id = button.data('id');
$('#hapus_idtamu').val(id);
})
$('#btn-simpan').click(function () {
var image = '';
var input_nama= $('#input_nama').val();
var input_jeniskelamin = $('#input_jeniskelamin').val();
var input_alamat = $('#input_alamat').val();
var input_nominal = $('#input_nominal').val();
var input_waktu = (new Date()).toISOString().slice(0, 19).replace("T", " ");
// var input_gambar = $('#result_tamu').val();
var username = $('#username').val();
var email = $('#email').val();
var password = $('#password').val();
Webcam.snap( function(data_uri) {
image = data_uri;
// console.log(image);
});
$.ajax({
type: "POST",
url: "<?php echo base_url("Beranda/simpan");?>",
data: {input_nama:input_nama, input_jeniskelamin:input_jeniskelamin, input_alamat:input_alamat, input_nominal:input_nominal, input_waktu:input_waktu, image:image},
success: function(response){
let cek = JSON.parse(response);
if (cek.status == 'sukses') {
// Tampilkan Tabel
tampil_tamu();
jumlah_tamu()
// pesan sukses
swal({
title: "Sukses",
type: "success",
text: "Anda Telah Berhasil Mengiputkan Data",
confirmButtonColor: "#469408"
});
$('#form-tambah').modal('hide')
} else {
// Tampilkan Tabel
tampil_tamu();
jumlah_tamu()
// pesan gagal
swal({
title: "Gagal",
type: "error",
text: "Data Yang Di Inputkan Harus Valid",
showConfirmButton: false,
timer: 1500
});
$('#form-tambah').modal('hide')
}
}
})
})
$('#btn-tambah').click(function (event) {
event.preventDefault();
var arg = {
resultFunction: function (result) {
var array_tamu = result.code;
console.log(array_tamu);
$('#input_nama').val("asdads");
// document.getElementById("input_nama").innerHTML = array_tamu[0];
// document.getElementById("input_jeniskelamin").innerHTML = array_tamu[1];
// document.getElementById("input_alamat").innerHTML = array_tamu[2];
// document.getElementById("input_nominal").innerHTML = array_tamu[3];
// document.getElementById("result_tamu").innerHTML = array_tamu;
}
};
Webcam.set({
width: 320,
height: 240,
image_format: 'jpeg',
jpeg_quality: 90
});
Webcam.attach( '#scanner' );
// $("#scanner").WebCodeCamJQuery(arg).data().plugin_WebCodeCamJQuery.play();
})
$('#btn-hapus').click(function () {
id = $('#hapus_idtamu').val();
console.log(id);
$.ajax({
url: 'beranda/hapus/' + id, // URL tujuan
dataType: 'json',
beforeSend: function () {},
success: function (response) { // Ketika proses pengiriman berhasil
if (response.status == 'sukses') {
// Tampilkan Tabel
tampil_tamu()
jumlah_tamu()
// pesan sukses
swal({
title: "Sukses",
type: "success",
text: "Anda Telah Berhasil Menghapus Data Ini",
confirmButtonColor: "#469408"
});
$('#form-hapus').modal('hide')
} else {
// Tampilkan Tabel
tampil_tamu()
jumlah_tamu()
// pesan gagal
swal({
title: "Gagal",
type: "error",
text: "Data Ini Gagal Di Hapus",
showConfirmButton: false,
timer: 1500
});
$('#form-hapus').modal('hide')
}
}
})
})
$("#btn-ubah").click(function () {
id = $('#edit_idtamu').val();
$.ajax({
url: 'beranda/ubah/' + id, // URL tujuan
type: 'POST', // Tentukan type nya POST atau GET
data: $("#form-edit form").serialize(), // Ambil semua data yang ada didalam tag form
dataType: 'json',
beforeSend: function () {},
success: function (response) { // Ketika proses pengiriman berhasil
if (response.status == 'sukses') {
// Tampilkan Tabel
tampil_tamu()
jumlah_tamu()
// pesan sukses
swal({
title: "Sukses",
type: "success",
text: "Anda Telah Berhasil Mengedit Data",
confirmButtonColor: "#469408"
});
$('#form-edit').modal('hide')
} else {
// Tampilkan Tabel
tampil_tamu()
jumlah_tamu()
// pesan gagal
swal({
title: "Gagal",
type: "error",
text: "Data Yang Di Edit Harus Valid",
showConfirmButton: false,
timer: 1500
});
$('#form-edit').modal('hide')
}
}
})
});
$('#form-tambah').on('hidden.bs.modal', function (e) { // Ketika Modal Dialog di Close / tertutup
$('#form-tambah #nama, #form-tambah #alamat, #form-tambah #nominal').val('') // Clear inputan menjadi kosong
})
})
</script>
</body>
</html>
Salin code diatas sesuaikan dengan file masing masing kemudian jalankan
Configurasi
Seting koneksi database sesuaikan dengan database temen temen
Tentukan Default Routing
untuk download database dan assetnya disini Download
Semoga Bermanfaat
link download nya not found
BalasHapus