Tampilkan postingan dengan label Codeigniter. Tampilkan semua postingan
Tampilkan postingan dengan label Codeigniter. Tampilkan semua postingan

Sabtu, 31 Juli 2021

Membuat Helper format tanggal indonesia di codeigniter





Assalamualaikum Wr, Wb

Membuat Helper Format Tanggal Indonesia di Codeigniter bagaimana caranya langsung saja.

Dalam pembuatan aplikasi web, format tanggal merupakan kebutuhan penting. Sebagai contoh penggunaan format tanggal biasannya pada cetak laporan default format dalam php biasanya berbahasa inggris. untuk membuat tanggal menjadi format indonesia kita perlu membuatnya dulu.

Sebagai contoh penggunaan Format Tanggal indonesia

  • 13 Juli 2020
  • 13 Jul 2020
  • 13/07/2020
  • Senin, 13 Juli 2020
Untuk membuat helper Format Tanggal indonesia langkahnya seperti berikut

Buat file tglindo_helper.php simpan pada folder Codeigniter kita struktur folder application/helpers. kode skript seperti di bawah ini:

<?php

if (!function_exists('bulan')) {
    function bulan(){
        $bulan = Date('m');
        switch ($bulan) {
            case 1:
                $bulan = "Januari";
                break;
            case 2:
                $bulan = "Februari";
                break;
            case 3:
                $bulan = "Maret";
                break;
            case 4:
                $bulan = "April";
                break;
            case 5:
                $bulan = "Mei";
                break;
            case 6:
                $bulan = "Juni";
                break;
            case 7:
                $bulan = "Juli";
                break;
            case 8:
                $bulan = "Agustus";
                break;
            case 9:
                $bulan = "September";
                break;
            case 10:
                $bulan = "Oktober";
                break;
            case 11:
                $bulan = "November";
                break;
            case 12:
                $bulan = "Desember";
                break;

            default:
                $bulan = Date('F');
                break;
        }
        return $bulan;
    }
}

/**
 * Fungsi untuk membuat tanggal dalam format bahasa indonesia
 * @param void
 * @return string format tanggal sekarang (contoh: 22 Desember 2016)
 */
if (!function_exists('tanggal')) {
    function tanggal() {
        $tanggal = Date('d') . " " .bulan(). " ".Date('Y');
        return $tanggal;
    }
}

function tanggal_indo($tanggal)
{
$bulan = array (1 =>   'Januari',
            'Februari',
            'Maret',
            'April',
            'Mei',
            'Juni',
            'Juli',
            'Agustus',
            'September',
            'Oktober',
            'November',
            'Desember'
        );
$split = explode('-', $tanggal);
return $split[2] . ' ' . $bulan[ (int)$split[1] ] . ' ' . $split[0];
}


function format_hari_tanggal($waktu)
{
    $hari_array = array(
        'Minggu',
        'Senin',
        'Selasa',
        'Rabu',
        'Kamis',
        'Jumat',
        'Sabtu'
    );
    $hr = date('w', strtotime($waktu));
    $hari = $hari_array[$hr];
    $tanggal = date('j', strtotime($waktu));
    $bulan_array = array(
        1 => 'Januari',
        2 => 'Februari',
        3 => 'Maret',
        4 => 'April',
        5 => 'Mei',
        6 => 'Juni',
        7 => 'Juli',
        8 => 'Agustus',
        9 => 'September',
        10 => 'Oktober',
        11 => 'November',
        12 => 'Desember',
    );
    $bl = date('n', strtotime($waktu));
    $bulan = $bulan_array[$bl];
    $tahun = date('Y', strtotime($waktu));
    $jam = date( 'H:i:s', strtotime($waktu));
    
    
    return "$hari, $tanggal $bulan $tahun $jam";
}

Untuk kegunaan masing masing function sebagai berikut:
  • Function tanggal_indo untuk menampilkan format : 13 Juli 2020
  • Function format_hari_tanggal untuk menampilkan format: Senin, 13 Juli 2020 13.00
Untuk Implementasi Penggunaanya seperti berikut:

Buat file Controller baru Format_tanggal.php kode seperti berikut:

<?php 
class Format_tanggal extends CI_Controller{
    function __construct(){
        parent::__construct();
        $this->load->helper('tglindo_helper');
    }
 
    function index(){
        // Pemanggilan Fungsi dari helper
        echo tanggal_indo('2017-09-5');
        echo "<br/>";        

        // Pemanggilan Fungsi dari helper
        echo format_hari_tanggal('2017-09-5');
        echo "<br/>";      
    }
}
?>
Keterangan:
Kita harus meload helper tglindo untuk bisa digunanakan, utuk merubah tanggal kita panggil function tglindo_helper sendiri contoh seperti diatas, jalankan dan lihat hasilnya tanggal sudah berubah ke format indonesia. Sekian dan semoga bermanfaat

Seting URL Dinamis di Codeigniter

 



Assalamualaikum Wr, Wb

Kita akam membahas bagaimana cara menjadikan base_url dinamis di codeigniter, ada kalanya kita saat membuat aplikasi kita lupa untuk menseting base_url menjadi dinamis, akibatnya kadang pemanggilan file css dan lain sebagainya tidak berfungsi. ok langsung saja ya

Saat pertama kali membuat aplikasi denga Codeigniter, hal pertma yang kita lakukan adalah seting konfigurasi base_url. Config ini berguna untuk menciptakan URL yang mengakses resource yang berada pada direktori root.

Secara default konfigurasi base_url Codeigniter adalah seperti berikut


$config['base_url'] = '';

Ketika kita ingin membuat sebuah aplikasi misalnya Penjualan, maka kita merubah konfigurasi url menjadi seperti ini:

$config['base_url'] = 'http://localhost/penjualan/';

Bila aplikasi tersebut kita upload diserver/hosting maka akan ada errr, disebabkan karena Codeigniter mengakses localhost yang seharusnya mengakses domain/ip server.

Solusi untuk mengatasi error seperti diatas cukup mudah, kita tinggal mengatur ulang setingan base_url agar menjadi dinamis, konfigurasinya seperti ini:

base_url default

$config['base_url'] = '';

Ganti dengan konfigurasi seperti di bawah ini:

$config['base_url'] = ((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == "on") ? "https" : "http");
$config['base_url'] .= "://" . $_SERVER['HTTP_HOST'];
$config['base_url'] .= str_replace(basename($_SERVER['SCRIPT_NAME']), "", $_SERVER['SCRIPT_NAME']);

Dengan cara diatas maka kita tidak perlu merubah konfigurasi base_url secara manual, apabila berpindah domain/ server. ok mungkin segitu dulu dan semoga bermanfaat

Rabu, 07 Juli 2021

Membuat Aplikasi Buku Tamu Memanfaatkan Kamera Webcam With Codeigniter

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
  1.     File Controller  Beranda.php
  2.     File Model Mtamu.php
  3.     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" />&nbsp;
									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');?> &copy; <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

Senin, 03 Agustus 2020

Membuat Qrcode dengan library Ciqrcode

Assalamualaikum Sobat Semua, 

Postingan kali ini akan membuat qrcode dengan mengunakkan framework Codeigniter dan library Ciqrcode langsung saja ya sobat semua

Peralatan yang di butuhkan

  1. Download Framework Codeigniter versi 3 Download Disini
  2. Download Library Ciqrcode Download Disini
  3. Sudah Terinstall xampp Pengguna Windows

Implementasi Code

  1. extract folder framework codeigniter, kemudian rename menjadi qrcode, taruh di dalam folder xampp/htdocs
  2. Buat File Controller Qrcode di dalam folder controller
  3. Buat File Model qrcode_model didalam folder model
  4. Buat File Qrcode_view didalam folder view
  5. Buat Database misal mahasiswa
Catatan untuk folder controller, model dan view sudah di sediakan oleh framework codeigniter yang sudah sobat download

File Qrcode Controller, Copy Code dibawah

<?php 
class Qrcode extends CI_Controller{
	function __construct(){
		parent::__construct();
		$this->load->model('qrcode_model'); //pemanggilan model mahasiswa
	}

	function index(){
		$data['data']=$this->qrcode_model->get_all_mahasiswa();
		$this->load->view('qrcode_view',$data);
	}

	function simpan()
	{
		$nim	= $this->input->post('nim');
		$nama	= $this->input->post('nama');
		$prodi	= $this->input->post('prodi');

		$this->load->library('ciqrcode'); //pemanggilan library QR CODE

		$config['cacheable']	= true; //boolean, the default is true
		$config['cachedir']		= './assets/'; //string, the default is application/cache/
		$config['errorlog']		= './assets/'; //string, the default is application/logs/
		$config['imagedir']		= './assets/images/'; //direktori penyimpanan qr code
		$config['quality']		= true; //boolean, the default is true
		$config['size']			= '1024'; //interger, the default is 1024
		$config['black']		= array(224,255,255); // array, default is array(255,255,255)
		$config['white']		= array(70,130,180); // array, default is array(0,0,0)
		$this->ciqrcode->initialize($config);

		$image_name=$nim.'.png'; //buat name dari qr code sesuai dengan nim

		$params['data'] 	= $nim; //data yang akan di jadikan QR CODE
		$params['level'] 	= 'H'; //H=High
		$params['size'] 	= 10;
		$params['savename'] = FCPATH.$config['imagedir'].$image_name; //simpan image QR CODE ke folder assets/images/
		$this->ciqrcode->generate($params); // fungsi untuk generate QR CODE

		$this->qrcode_model->simpan_mahasiswa($nim,$nama,$prodi,$image_name); //simpan ke database
		redirect('mahasiswa'); //redirect ke mahasiswa usai simpan data
	}
}


File Qrcode_model, Copy Code dibawah


<?php
class Qrcode_model extends CI_Model{

	function get_all_mahasiswa(){
		$hasil=$this->db->get('mahasiswa');
		return $hasil;
	}
	
	function simpan_mahasiswa($nim,$nama,$prodi,$image_name){
		$data = array(
			'nim' 		=> $nim,
			'nama' 		=> $nama,
			'prodi' 	=> $prodi, 
			'qr_code' 	=> $image_name
		);
		$this->db->insert('mahasiswa',$data);
	}

}

File Qrcode_view, Copy Code dibawah


<!DOCTYPE html>
<html>
<head>
	<title>Data Mahasiswa</title>
	<link rel="stylesheet" type="text/css" href="<?php echo base_url().'assets/css/bootstrap.css'?>">
</head>
<body>
	<div class="container">
		<div class="row">
			<h2>Data <small>Mahasiswa</small></h2>
			<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">Add New</button>
			<table class="table table-striped">
				<thead>
					<tr>
						<th>NIM</th>
						<th>NAMA</th>
						<th>PRODI</th>
						<th>QR CODE</th>
					</tr>
				</thead>
				<tbody>
					<?php foreach($data->result() as $row):?>
					<tr>
						<td style="vertical-align: middle;"><?php echo $row->nim;?></td>
						<td style="vertical-align: middle;"><?php echo $row->nama;?></td>
						<td style="vertical-align: middle;"><?php echo $row->prodi;?></td>
						<td>
							<a href="<?= base_url().'index.php/qrcode/edit/'.$row->qr_code; ?>">
							<img style="width: 100px;" src="<?php echo base_url().'assets/images/'.$row->qr_code;?>"></a>
						</td>
					</tr>
					<?php endforeach;?>
				</tbody>
			</table>
		</div>
	</div>

	<!-- Modal add new mahasiswa-->
	<form action="<?php echo base_url().'index.php/mahasiswa/simpan'?>" method="post">
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		  <div class="modal-dialog" role="document">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title" id="myModalLabel">Add New Mahasiswa</h4>
		      </div>
		      <div class="modal-body">
		    
		          <div class="form-group">
		            <label for="nim" class="control-label">NIM:</label>
		            <input type="text" name="nim" class="form-control" id="nim">
		          </div>
		          <div class="form-group">
		            <label for="nama" class="control-label">NAMA:</label>
		            <input type="text" name="nama" class="form-control" id="nama">
		          </div>
	       		  <div class="form-group">
		            <label for="prodi" class="control-label">PRODI:</label>
		            <select name="prodi" class="form-control" id="prodi">
		            	<option>Sistem Informasi</option>
		            	<option>Sistem Komputer</option>
		            	<option>Manajemen Informatika</option>
		            </select>
		          </div>
	        
		      </div>
		      <div class="modal-footer">
		        <button type="button" class="btn btn-default" data-dismiss="modal">Tutup</button>
		        <button type="submit" class="btn btn-primary">Simpan</button>
		      </div>
		    </div>
		  </div>
		</div>
	</form>

	<script type="text/javascript" src="<?php echo base_url().'assets/js/jquery-2.1.4.min.js'?>"></script>
	<script type="text/javascript" src="<?php echo base_url().'assets/js/bootstrap.js'?>"></script>
</body>
</html>

Buat Database db_qrku, buat tabel mahasiswa
Code Tabel mahasiswa


CREATE TABLE IF NOT EXISTS `mahasiswa` (
  `nim` varchar(15) NOT NULL,
  `nama` varchar(50) DEFAULT NULL,
  `prodi` varchar(40) DEFAULT NULL,
  `qr_code` varchar(50) DEFAULT NULL,
  PRIMARY KEY (`nim`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;


INSERT INTO `mahasiswa` (`nim`, `nama`, `prodi`, `qr_code`) VALUES
('1210158', 'Sigit', 'Sistem Informasi', '1210158.png'),
('1210159', 'Joko', 'Manajemen Informatika', '1210159.png'),
('1210160', 'Andi', 'Sistem Komputer', '1210160.png');


Jika Sudah Buka Browser dan ketik url sesuai dengan nama folder sobat, contoh: localhost/qrcode

Kurang Lebih Hasilnya akan seperti ini


Mungkin Cukup Itu dulu dan semoga bermanfaat. Download Full Source Code

dipostingan selanjutnya nanti kita belajar edit dan hapus data

Kategori