Membuat Antrian Dengan CodeIgniter dan Bootstrap (Part 1)

Assalamu’alaikum wr. wb. disini saya asumsikan sudah bisa menyetting codeigniter

Membuat Antrian Dengan CodeIgniter dan Bootstrap dan jquery (Part 1)

Langkah awal adalah membuat file views,

buat sebuah folder baru dengan nama antrian didalam folder views (application/views/antrian).

nama file = “antrian_depan.php

dengan code sebagai berikut

<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>
<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/>
    001
    <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/>
    003
    <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>
</body>
</html>

 

selanjutnya buat file controllers baru dengan nama Antrian.php didalam folder (application/controllers/Antrian.php

<?php if (!defined('BASEPATH')) exit('No direct script access allowed');

class Antrian extends CI_Controller
{
    function __construct()
    {
        parent::__construct();
    }

    public function index()
    {
    $this->load->view('antrian/antrian_depan');
    }
}

jika berhasil akan muncul view seperti dibawah ini

Recommended For You

About the Author: adyrhs

Leave a Reply

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