Sistem login untuk aplikasi simplegis sudah kita buat sebelumnya, untuk admin kan sudah default terinput ke database pada saat mengimport file .sql. Karena sebelumnya telah kita siapkan halaman untuk member maka kita harus membuat sistem registrasi agar pengunjung bisa mengakses halaman member tersebut. Lanjutkan membaca Sistem registrasi menggunakan codeigniter ion auth
Bulan: November 2016
Membuat sistem login menggunakan codeigniter ion auth
Pada aplikasi simple gis yang kita buat, pengguna dapat mengakses halaman admin dan melakukan penginputan data jalan, jembatan dan juga koordinat pada jalan dan jembatan. Oleh karena itu kita akan membuat sistem supaya hanya admin yang mempunyai email terdaftar saja yang bisa mengakses halaman admin dan melakukan sistem administrasi jalan, jembatan dan koordinat. Untuk mempermudah kita menggunakan codeigniter-ion-auth untuk membuat sistem registrasi dan login aplikasi simplegis. Lanjutkan membaca Membuat sistem login menggunakan codeigniter ion auth
Membuat Grafik Menggunakan CanvasJs
Grafik digunakan untuk menampilkan ringkasan dari sekumpulan data, biasanya sering kita temui di dalam aplikasi excel, word dll. Untuk menampilkan data di sebuah halaman website bisa digunakan sebuah plugin jquery, salah satunya adalah canvasJs.
Beberapa waktu sebelumnya telah kita buat sebuah aplikasi pemetaan dengan nama Simple Gis yang didalamnya terdapat data jalan dan juga data jembatan yang akan kita tampilkan grafiknya ke halaman depan dari aplikasi tersebut.
Sebelumnya download canvasJs, exstract dan copy paste file canvasjs.min.js ke dalam folder assets/js.
Bagi yang sudah membuat aplikasi Simple Gis silahkan buka dan edit file view/homepage.php dengan menambahkan script pada bagian bawah dari “<h1 class=”text-center”>Simple Gis</h1>” seperti berikut :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
<div class="row"> <div class="col-md-12 col-sm-12" id="grafik" style="height: 300px; width: 100%;"> </div> </div> <div class="row"> <div class="col-md-6 col-sm-6"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title"><span class="glyphicon glyphicon-list"></span> Data Jalan</h3> </div> <div class="panel-body"> <table class="table table-striped"> <th>No</th> <th>Nama Jalan</th> <th></th> <tbody id="datajalan"> <?php $no = 1; foreach($itemjalan->result() as $jalan){ ?> <tr> <td><?php echo $no;?></td> <td><?php echo $jalan->namajalan;?></td> <td></td> </tr> <?php $no++; } ?> </tbody> </table> </div> </div> </div> <div class="col-md-6 col-sm-6"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title"><span class="glyphicon glyphicon-list"></span> Data Jembatan</h3> </div> <div class="panel-body"> <table class="table table-striped"> <th>No</th> <th>Nama Jalan</th> <th></th> <tbody id="datajembatan"> <?php $no = 1; foreach($itemjembatan->result() as $jembatan){ ?> <tr> <td><?php echo $no;?></td> <td><?php echo $jembatan->namajembatan;?></td> <td></td> </tr> <?php $no++; } ?> </tbody> </table> </div> </div> <button type="button" name="loadgrafik" class="btn btn-primary" id="loadgrafik"><span class="glyphicon glyphicon-refresh"></span> Grafik</button> </div> </div> |
Biar tidak terjadi error edit juga file Home.php di folder controller.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<?php defined('BASEPATH') OR exit('No direct script access allowed'); class Home extends CI_Controller{ public function __construct(){ parent::__construct(); //Codeigniter : Write Less Do More $this->load->model(array('model_jalan', 'model_jembatan')); $this->load->helper('url'); } function index(){ $data = array('itemjalan' => $this->model_jalan->getAll(), 'itemjembatan'=>$this->model_jembatan->getAll()); $this->load->view('homepage',$data); } } |
Kemudian buka dengan mengakses http://localhost/simplegis sehingga tampak 2 buah tabel jalan dan jembatan.

Untuk menampilkan grafik dari data di database kita akan menambahkan sebuah function loadgrafik dan function buatgrafik sehingga keseluruhan file homepage menjadi seperti berikut ini.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 |
<!DOCTYPE html> <html lang="en"> <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>Simple Gis</title> <!-- Bootstrap --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script src="<?php echo base_url('assets/js/canvasjs.min.js')?>"></script> <!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.2/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <h1 class="text-center">Simple Gis</h1> <div class="row"> <div class="col-md-12 col-sm-12" id="grafik" style="height: 300px; width: 100%;"> </div> </div> <div class="row"> <div class="col-md-6 col-sm-6"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title"><span class="glyphicon glyphicon-list"></span> Data Jalan</h3> </div> <div class="panel-body"> <table class="table table-striped"> <th>No</th> <th>Nama Jalan</th> <th></th> <tbody id="datajalan"> <?php $no = 1; foreach($itemjalan->result() as $jalan){ ?> <tr> <td><?php echo $no;?></td> <td><?php echo $jalan->namajalan;?></td> <td></td> </tr> <?php $no++; } ?> </tbody> </table> </div> </div> </div> <div class="col-md-6 col-sm-6"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title"><span class="glyphicon glyphicon-list"></span> Data Jembatan</h3> </div> <div class="panel-body"> <table class="table table-striped"> <th>No</th> <th>Nama Jalan</th> <th></th> <tbody id="datajembatan"> <?php $no = 1; foreach($itemjembatan->result() as $jembatan){ ?> <tr> <td><?php echo $no;?></td> <td><?php echo $jembatan->namajembatan;?></td> <td></td> </tr> <?php $no++; } ?> </tbody> </table> </div> </div> <button type="button" name="loadgrafik" class="btn btn-primary" id="loadgrafik"><span class="glyphicon glyphicon-refresh"></span> Grafik</button> </div> </div> </div> <script> $(document).on('click','#loadgrafik',loadgrafik); function loadgrafik(){ /*var jalan = ''; var jembatan = ''; buatgrafik(jalan,jembatan);*/ $.ajax({ url : '<?php echo site_url("home/loaddata");?>', dataType : 'json', type : 'POST', success : function(data,status){ if (data.status!='error') { buatgrafik(data.jalan,data.jembatan); }else{ buatgrafik(data.jalan,data.jembatan); } }, error : function(x,t,m){ alert(x.responseText); } }) } function buatgrafik(jalan,jembatan){ var chart = new CanvasJS.Chart("grafik", { title:{ text: "Data Jalan dan Jembatan" }, animationEnabled: true, axisY: { title: "Jumlah Jalan dan Jembatan" }, legend: { verticalAlign: "bottom", horizontalAlign: "center" }, theme: "theme2", data: [ { type: "column", showInLegend: true, legendMarkerColor: "grey", //legendText: "MMbbl = one million barrels", dataPoints: [ {y: jalan, label: "Jalan"}, {y: jembatan, label: "Jembatan"} ] } ] }); chart.render(); } </script> </body> </html> |
Dan juga untuk file controller Home.php tambahkan satu function yaitu function loaddata().
1 2 3 4 5 6 7 8 9 10 |
function loaddata(){ if (!$this->input->is_ajax_request()) { show_404(); }else{ $status = 'success'; $jalan = $this->model_jalan->getAll()->num_rows(); $jembatan = $this->model_jembatan->getAll()->num_rows(); $this->output->set_content_type('application/json')->set_output(json_encode(array('status'=>$status,'jalan'=>$jalan,'jembatan'=>$jembatan))); } } |
Hasil akhirnya akan tampak seperti berikut ini.

Terima kasih telah ikut mencoba membuat. 😀