Membuat Antrian Dengan CodeIgniter dan Bootstrap (Part 3) Perbaharui File MVC

Asslamu’alaikum wr. wb.

materi selanjutnya adalah memperbaharui beberapa file dan membuat file baru pada folder Models, Views dan Controllers (MVC).

sebelum melanjutnya materi pada part 3 ini, download terlebih dahulu file suara / sound dilink berikut

DOWNLOAD SOUND. selanjutnya buat extraks file sound.zip tersebut didalam folder codeigniter sehingga muncul folder baru dengan nama sound (didalam folder ini ada beberapa file .mp3 dan .wav)

buat / perbaharui file Antrian.php pada folder Controllers sebagai berikut

<?php if (!defined('BASEPATH')) exit('No direct script access allowed');
class Antrian extends CI_Controller
{
    function __construct()
    {
        parent::__construct();
        $this->load->model('Antrian_model');
    }

    public function index()
    {
    	$date = date('Y-m-d');
    	$data = array(
    		'jlhnotif' => $this->Antrian_model->notif_count($date)->num_rows(),
    	);
    $this->load->view('antrian/antrian_depan',$data);
    }

    function cari_data_panggil()
    {
        $date = date('Y-m-d');
            $q = $this->Antrian_model->nomor_panggil($date);
            $row = $q->num_rows();
            if($row>0){
                foreach($q->result() as $dt){
                    $d['no_panggila'] = substr($dt->d_nomor,0,1);
                    $d['no_panggilb'] = substr($dt->d_nomor,1,1);
                    $d['no_panggilc'] = substr($dt->d_nomor,2,1);
                    $d['loket_ke']    = $dt->d_loket;
                }
                echo json_encode($d);
            }else{
                $d['no_panggila'] = '';
                $d['no_panggilb'] = '';
                $d['no_panggilc'] = '';
                $d['loket_ke'] 	  = '';
                echo json_encode($d);
            }
    }

    function cari_data_akhir()
    {
        $date = date('Y-m-d');
            //$q = ;
            $row = $this->Antrian_model->notif_count($date)->num_rows();
            if($row>0){
                $d['no_akhir'] = $row;
                echo json_encode($d);
            }else{
                $d['no_akhir'] = '';
                echo json_encode($d);
            }
    }

  function tampil_loket_1(){
    $date = date('Y-m-d');
    $loket = 1;
    $tampil = $this->Antrian_model->tampil_nomor($date,$loket);
    if($tampil){
      echo $tampil;
    }else{
      echo '-';
    }
  }
  
  function tampil_loket_2(){
    $date = date('Y-m-d');
    $loket = 2;
    $tampil = $this->Antrian_model->tampil_nomor($date,$loket);
    if($tampil){
      echo $tampil;
    }else{
      echo '-';
    }
  }
   
}

ingat !!! pastikan penulisan nama file controller harus diawali dengan huruf kapital (huruf besar ya) begitu juga pada

<?php if (!defined(‘BASEPATH’)) exit(‘No direct script access allowed’);
class Antrian extends CI_Controller { …….. }

pada class Antrian extends …… ini juga harus menggunakan huruf kapital diawalnya, selanjutnya begitu juga nanti untuk file Models dan class nya, harus menggunakan huruf kapital diawal ya.

Selanjutnya buat sebuah file Models, didalam folder (application/models) buat sebuah file dengan nama Antian_model.php, berikut sourcecode :

<?php if (!defined('BASEPATH')) exit('No direct script access allowed');
class Antrian_model extends CI_Model
{
 
    function __construct()
    {
        parent::__construct();
    }
    
  function notif_count($date){
        $this->db->from('display');
        $this->db->where('d_tgl',$date);
        return $this->db->get();
    }

  function nomor_panggil($date){
    return $this->db->query("SELECT d_nomor, d_loket from display WHERE d_tgl = '$date' ORDER BY d_id DESC LIMIT 0,1");
  }

  function tampil_nomor($date,$loket){
    $this->db->where('d_tgl',$date);
    $this->db->where('d_loket',$loket);
    $this->db->from('display');
    $this->db->order_by('d_id','DESC');
    return $this->db->get()->row()->d_nomor;
  }
   
}

selanjutnya buat sebuah views (application/views) file didalam folder views buat folder baru dengan nama antrian, kemudian buat lagi sebuah file baru dengan nama antrian_depan.php

 

<html>
<head>
  <title>Sistem Antrian</title>
  <link rel="stylesheet" href="<?php echo base_url();?>bootstrap/css/bootstrap.min.css">	
  <link rel="stylesheet" href="<?php echo base_url();?>bootstrap/css/jquery-ui.min.css">	
</head>
<body>
    <audio id="suara0" src="<?php echo base_url('sound/0.wav');?>"></audio>
    <audio id="suara1" src="<?php echo base_url('sound/1.wav');?>"></audio>
    <audio id="suara2" src="<?php echo base_url('sound/2.wav');?>"></audio>
    <audio id="suara3" src="<?php echo base_url('sound/3.wav');?>"></audio>
    <audio id="suara4" src="<?php echo base_url('sound/4.wav');?>"></audio>
    <audio id="suara5" src="<?php echo base_url('sound/5.wav');?>"></audio>
    <audio id="suara6" src="<?php echo base_url('sound/6.wav');?>"></audio>
    <audio id="suara7" src="<?php echo base_url('sound/7.wav');?>"></audio>
    <audio id="suara8" src="<?php echo base_url('sound/8.wav');?>"></audio>
    <audio id="suara9" src="<?php echo base_url('sound/9.wav');?>"></audio>
    <audio id="loket" src="<?php echo base_url('sound/loket.wav');?>"></audio>
    <audio id="ke_1" src="<?php echo base_url('sound/1.wav');?>"></audio>
    <audio id="ke_2" src="<?php echo base_url('sound/2.wav');?>"></audio>
    <audio id="start" src="<?php echo base_url('sound/start.mp3');?>"></audio>
    <audio id="end" src="<?php echo base_url('sound/end.mp3');?>"></audio>
    <audio id="antrian" src="<?php echo base_url('sound/antrian.wav');?>"></audio>
    <input type="text" id="awal" value="<?php echo $jlhnotif;?>">
    <input type="text" name="akhir" id="akhir" value="<?php echo $jlhnotif;?>">
    <input type="text" name="panggila" id="panggila">
    <input type="text" name="panggilb" id="panggilb">
    <input type="text" name="panggilc" id="panggilc">
    <input type="text" name="loket_ke" id="loket_ke">



<div class="container-fluid alert-danger">
<div class="row">
  <div class="col-md-8">
    <video src="<?php echo base_url();?>video/videoplayback.mp4" width="100%" muted loop controls autoplay class="img-thumbnail" style="width: 100%"></video>

  </div>
  <div class="col-md-4">
    <div class="text-lg-center btn-success img-thumbnail" style="font-size: 50px;font-weight: bold;width: 100%;">
    ANTRIAN<br/>
    <div id="loket_ke_1">-</div>
    <div class="btn-danger">Loket 1</div>
    </div>
    <hr/>
    <div class="text-lg-center btn-success img-thumbnail" style="font-size: 50px;font-weight: bold;width: 100%;">
    ANTRIAN<br/>
    <div id="loket_ke_2">-</div>
    <div class="btn-danger">Loket 2</div>
    </div>
    <hr/>
    <div class="text-lg-center btn-success img-thumbnail" style="font-size: 50px;font-weight: bold;width: 100%;">
    <?php echo date('l');?><br/><?php echo date('d F Y');?><br/>
    <div class="btn-danger" id="jam_sekarang"><?php echo date('H:m:i');?></div>
    </div>
  </div>
</div>
</div>

<script src="<?php echo base_url();?>bootstrap/js/jquery.min.js"></script>
<script src="<?php echo base_url();?>bootstrap/js/jquery-ui.min.js"></script>
<script>
    var myVar = setInterval(myTimer, 1000);
    function myTimer() {
        var d = new Date();
        document.getElementById("jam_sekarang").innerHTML = d.toLocaleTimeString();
    }	
</script>

<script>  
      function data_panggil(){
        $.ajax({
            type  : "POST",
            url   : "<?php echo base_url()?>index.php/antrian/cari_data_panggil",
            dataType: "json",
            success : function(data){
            $('#panggila').val(data.no_panggila);
            $('#panggilb').val(data.no_panggilb);
            $('#panggilc').val(data.no_panggilc);
            $('#loket_ke').val(data.loket_ke);
            }
          });
        }
        
      function count_awal(){
        $.ajax({
            type  : "POST",
            url   : "<?php echo base_url()?>antrian/cari_data_akhir",
            dataType: "json",
            success : function(data){
              $('#awal').val(data.no_akhir);
            }
          });
        }

      function count_akhir()
      {
        $.ajax({
            type  : "POST",
            url   : "<?php echo base_url()?>antrian/cari_data_akhir",
            dataType: "json",
            success : function(data){
              $('#akhir').val(data.no_akhir)
            }
          });
      }
      
function cektotal()
{
   var awal  = document.getElementById('awal');
   var akhir = document.getElementById('akhir');
   if (awal.value == akhir.value)
   {
      /* Tidak ada proses */    
   }
    else
   {
            
    document.getElementById('start').pause();
    document.getElementById('start').currentTime=0;
    document.getElementById('start').play();

     //SET DELAY UNTUK MEMAINKAN REKAMAN NOMOR URUT  
     totalwaktu=document.getElementById('start').duration*1000;
     setTimeout(function() {
       document.getElementById('antrian').pause();
       document.getElementById('antrian').currentTime=0;
       document.getElementById('antrian').play();
     }, totalwaktu);

      totalwaktu=totalwaktu+1200;
      setTimeout(function() {
        var a = document.getElementById('panggila').value;
        document.getElementById('suara'+a+'').pause();
        document.getElementById('suara'+a+'').currentTime=0;
        document.getElementById('suara'+a+'').play();
          }, totalwaktu);

      totalwaktu=totalwaktu+1200;
      setTimeout(function() {
        var b = document.getElementById('panggilb').value;
        document.getElementById('suara'+b+'').pause();
        document.getElementById('suara'+b+'').currentTime=0;
        document.getElementById('suara'+b+'').play();
          }, totalwaktu);

      totalwaktu=totalwaktu+1200;
      setTimeout(function() {
        var c = document.getElementById('panggilc').value;
        document.getElementById('suara'+c+'').pause();
        document.getElementById('suara'+c+'').currentTime=0;
        document.getElementById('suara'+c+'').play();
          }, totalwaktu);

      totalwaktu=totalwaktu+1200;
      setTimeout(function() {
        var c = document.getElementById('loket').value;
        document.getElementById('loket').pause();
        document.getElementById('loket').currentTime=0;
        document.getElementById('loket').play();
          }, totalwaktu);

      totalwaktu=totalwaktu+1200;
      setTimeout(function() {
        var ke = document.getElementById('loket_ke').value;
        document.getElementById('suara'+ke+'').pause();
        document.getElementById('suara'+ke+'').currentTime=0;
        document.getElementById('suara'+ke+'').play();
          }, totalwaktu);

      totalwaktu=totalwaktu+1200;
      setTimeout(function() {
        document.getElementById('end').pause();
        document.getElementById('end').currentTime=0;
        document.getElementById('end').play();
          }, totalwaktu);
   		
    count_awal();
    		
  }    
} 
</script>

<script>
  setInterval(function(){
    count_akhir();
        data_panggil();
        cektotal();
      }, 1000);
    setInterval(function(){
    $("#loket_ke_1").load('<?php echo base_url()?>antrian/tampil_loket_1?>')
    $("#loket_ke_2").load('<?php echo base_url()?>antrian/tampil_loket_2?>')
  }, 1000);
  
  
</script>

</body>
</html>

nah, biasanya codeigniter waktu permata kali disetting jika dipanggil base_url() masih menggunakan link sebagai berikut

example : http://localhost/codeigniter/index.php/nama_controller

pada file diatas link tersebut sudah di bypass sehingga index.php tidak lagi ditampilkan di sebuah link base_url() sehingga menjadi

http://localhost/codeigniter/nama_controller

yang harus dilakukan cukup dengan menambahkan .htaccess di dalam folder codeigniter, untuk sourcecode sebagai berikut :

RewriteEngine on
RewriteCond $1 !^(index\.php|resources|robots\.txt)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L,QSA]

atau dengan mendownload file .htaccess ini.

Nb. Isi dari file akan terus diupdate seiring pembuatan sistem ini.

 

Recommended For You

About the Author: adyrhs

Leave a Reply

Your email address will not be published. Required fields are marked *