praktikum pemrograman web ii stmik cikarang · pdf filemembuat aplikasi crud dengan...
TRANSCRIPT
Praktikum Pemrograman Web II STMIK Cikarang
MEMBUAT APLIKASI CRUD DENGAN CODEIGNITER DAN BOOTSTRAP 1. Membuat database dan tabel barang
Dengan menggunakan phpmyadmin, buatlah database dengan nama penjualan dilanjutkan dengan membuat tabel dengan nama tbbarang dengan desain sebagai berikut:
2. Menginstal CI di server Extrak master CI, kemudian tempatkan di folder htdoc anda. Rename folder menjadi BelajarCI.
3. Mengkonfigurasikan CI Buka file config.php di folder config, dan atur base url sebagai berikut :
$config['base_url'] = ' http://localhost:8080/belajarCI/ ';
Buka database.php di folder config, atur konfigurasi sebgai berikut : $db['default']['hostname'] = 'localhost'; $db['default']['username'] = 'root'; $db['default']['password'] = ''; $db['default']['database'] = 'penjualan';
Buka autoload.php di folder config, atur konfigurasi sebagai berikut : $autoload['libraries'] = array('database'); $autoload['helper'] = array('url','form');
4. Membuat template Bootstrap
Download template boostrap yang bertype SB Admin. Buat Folder assets di dalam folder belajarCI. Copy folder css , fonts , js dan fontawesome kedalam folder assets diatas. Buat folder template di dalam folder BelajarCI/Application/View. Buka source page dari halaman blankpage dengan notepad++ .
1
Praktikum Pemrograman Web II STMIK Cikarang
Save as source page diatas menjadi template.php di dalam folder BelajarCI/Application/View/tempate .
Ubah kode berikut :
Menjadi seperti dibawah ini :
Dan juga code dibawah ini :
Menjadi seperti dibawah ini :
2
Praktikum Pemrograman Web II STMIK Cikarang
Bagi dua file template.php menjadi 2 file, yaitu header.php dan footer.php. Dengan content dari masingmasing sebagai berikut :
Header.php <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf8"> <meta httpequiv="XUACompatible" content="IE=edge"> <meta name="viewport" content="width=devicewidth, initialscale=1"> <meta name="description" content=""> <meta name="author" content=""> <title> Sistem Penjualan </title> <! Bootstrap Core CSS > <link href="<?php echo base_url();?>assets/css/bootstrap.min.css" rel="stylesheet"> <! Custom CSS > <link href="<?php echo base_url();?>assets/css/sbadmin.css" rel="stylesheet"> <! Custom Fonts > <link href="<?php echo base_url();?>assets/fontawesome/css/fontawesome.min.css" rel="stylesheet" type="text/css"> <! 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.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]> </head> <body> <div id="wrapper"> <! Navigation > <nav class="navbar navbarinverse navbarfixedtop" role="navigation"> <! Brand and toggle get grouped for better mobile display > <div class="navbarheader">
3
Praktikum Pemrograman Web II STMIK Cikarang
<button type="button" class="navbartoggle" datatoggle="collapse" datatarget=".navbarex1collapse"> <span class="sronly">Toggle navigation</span> <span class="iconbar"></span> <span class="iconbar"></span> <span class="iconbar"></span> </button> <a class="navbarbrand" href="index.html">SB Admin</a> </div> <! Top Menu Items > <ul class="nav navbarright topnav"> <li class="dropdown"> <a href="#" class="dropdowntoggle" datatoggle="dropdown"><i class="fa faenvelope"></i> <b class="caret"></b></a> <ul class="dropdownmenu messagedropdown"> <li class="messagepreview"> <a href="#"> <div class="media"> <span class="pullleft"> <img class="mediaobject" src="http://placehold.it/50x50" alt=""> </span> <div class="mediabody"> <h5 class="mediaheading"> <strong>John Smith</strong> </h5> <p class="small textmuted"><i class="fa faclocko"></i> Yesterday at 4:32 PM</p> <p>Lorem ipsum dolor sit amet, consectetur...</p> </div> </div> </a> </li> <li class="messagepreview"> <a href="#"> <div class="media"> <span class="pullleft"> <img class="mediaobject" src="http://placehold.it/50x50" alt=""> </span> <div class="mediabody"> <h5 class="mediaheading"> <strong>John Smith</strong> </h5>
4
Praktikum Pemrograman Web II STMIK Cikarang
<p class="small textmuted"><i class="fa faclocko"></i> Yesterday at 4:32 PM</p> <p>Lorem ipsum dolor sit amet, consectetur...</p> </div> </div> </a> </li> <li class="messagepreview"> <a href="#"> <div class="media"> <span class="pullleft"> <img class="mediaobject" src="http://placehold.it/50x50" alt=""> </span> <div class="mediabody"> <h5 class="mediaheading"> <strong>John Smith</strong> </h5> <p class="small textmuted"><i class="fa faclocko"></i> Yesterday at 4:32 PM</p> <p>Lorem ipsum dolor sit amet, consectetur...</p> </div> </div> </a> </li> <li class="messagefooter"> <a href="#">Read All New Messages</a> </li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdowntoggle" datatoggle="dropdown"><i class="fa fabell"></i> <b class="caret"></b></a> <ul class="dropdownmenu alertdropdown"> <li> <a href="#">Alert Name <span class="label labeldefault">Alert Badge</span></a> </li> <li> <a href="#">Alert Name <span class="label labelprimary">Alert Badge</span></a> </li> <li>
5
Praktikum Pemrograman Web II STMIK Cikarang
<a href="#">Alert Name <span class="label labelsuccess">Alert Badge</span></a> </li> <li> <a href="#">Alert Name <span class="label labelinfo">Alert Badge</span></a> </li> <li> <a href="#">Alert Name <span class="label labelwarning">Alert Badge</span></a> </li> <li> <a href="#">Alert Name <span class="label labeldanger">Alert Badge</span></a> </li> <li class="divider"></li> <li> <a href="#">View All</a> </li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdowntoggle" datatoggle="dropdown"><i class="fa fauser"></i> John Smith <b class="caret"></b></a> <ul class="dropdownmenu"> <li> <a href="#"><i class="fa fafw fauser"></i> Profile</a> </li> <li> <a href="#"><i class="fa fafw faenvelope"></i> Inbox</a> </li> <li> <a href="#"><i class="fa fafw fagear"></i> Settings</a> </li> <li class="divider"></li> <li> <a href="#"><i class="fa fafw fapoweroff"></i> Log Out</a> </li> </ul> </li> </ul> <! Sidebar Menu Items These collapse to the responsive navigation menu on small screens >
6
Praktikum Pemrograman Web II STMIK Cikarang
<div class="collapse navbarcollapse navbarex1collapse"> <ul class="nav navbarnav sidenav"> <li> <a href="index.html"><i class="fa fafw fadashboard"></i> Dashboard</a> </li>
<li> <a href="<?php echo base_url();?>index.php/barang/"><i class="fa fafw fadashboard"></i> Data Barang</a> </li> <li> <a href="charts.html"><i class="fa fafw fabarcharto"></i> Data Customer</a> </li> <li> <a href="tables.html"><i class="fa fafw fatable"></i> Penjualan</a> </li> <li> <a href="javascript:;" datatoggle="collapse" datatarget="#demo"><i class="fa fafw faarrowsv"></i> Laporanlaporan <i class="fa fafw facaretdown"></i></a> <ul id="demo" class="collapse"> <li> <a href="#">Laporan Barang</a> </li> <li> <a href="#">Laporan Customer</a> </li>
<li> <a href="#">Laporan Penjualan</a> </li>
</ul> </li> </ul> </div> <! /.navbarcollapse > </nav> <div id="pagewrapper">
7
Praktikum Pemrograman Web II STMIK Cikarang
<div class="containerfluid"> <! Page Heading > <div class="row"> <div class="collg12"> <h1 class="pageheader">
footer.php
</div> </div> <! /.row > </div> <! /.containerfluid > </div> <! /#pagewrapper > </div> <! /#wrapper > <! jQuery > <script src="<?php echo base_url();?>assets/js/jquery.js"></script> <! Bootstrap Core JavaScript > <script src="<?php echo base_url();?>assets/js/bootstrap.min.js"></script> </body> </html> File template.php diubah menjadi sbb :
Dua baris kode inilah yang nanti akan kita gunakan di semua page yang akan digunakan. Dengan cara menempatkan kode baris ke 1 di awal page dan kode baris 2 di akhir page.
5. Membuat Page tampil data barang
Membuat page yang menampilkan data akan melibatkan 3 file yang harus kita buat atau kita update, yaitu Model, View, control
Model model_barang
8
Praktikum Pemrograman Web II STMIK Cikarang
<?php class Model_barang extends CI_Model function tampil_barang() return $this‐>db‐>get('tbbarang');
?>
View tampilbarang <?php $this‐>load‐>view('template/header');?> Data Barang</h1> <?php echo anchor('barang/tambah','Tambah Data',array('class'=>'btn btn‐danger btn‐sm')) ?> <table class="table table‐bordered table‐hover table‐striped"> <tr>
<th>Kode Barang</th> <th>Nama Barang</th> <th>Harga</th> <th>Satuan</th> <th colspan="2">Aksi</th>
</tr> <?php foreach ($list_barang‐>result() as $r) echo "<tr>"; echo "<td width=30>".$r‐>KodeBarang."</td>"; echo "<td>".$r‐>NamaBarang."</td>"; echo "<td>".$r‐>Harga."</td>"; echo "<td>".$r‐>satuan."</td>"; echo "<td width='20'>".anchor('barang/edit/'.$r‐>KodeBarang,'Edit')."</td>"; echo "<td width='20'>".anchor('barang/hapus/'.$r‐>KodeBarang,'Hapus')."</td>"; echo "</tr>"; ?> </table> <?php $this‐>load‐>view('template/footer');?>
9
Praktikum Pemrograman Web II STMIK Cikarang
Controller barang <?php class Barang extends CI_Controller function __construct() parent::__construct(); $this‐>load‐>model('model_barang');
function index()
$this‐>load‐>model('model_barang');
$data['list_barang']= $this‐>model_barang‐>tampil_barang(); $this‐>load‐>view('barang/tampilbarang',$data);
?> Ketika di cek dibrowser hasilnya sbb :
6. Membuat Page Input data Barang Model model_barang : Tambahkan function post pada model model_barang. (teks yang
di bold)
<?php class Model_barang extends CI_Model
10
Praktikum Pemrograman Web II STMIK Cikarang
function tampil_barang() return $this‐>db‐>get('tbbarang');
function post($data)
$this‐>db‐>insert('tbbarang',$data); ?>
View forminput
<?php $this‐>load‐>view('template/header');?> <h3>Tambah Data Barang</h3> <?php echo form_open('barang/submit'); ?> <table class="table table‐bordered"> <tr><td width="120">Nama Barang</td> <td><input type="text" class="form‐control" name="namabarang" placeholder="nama barang"> </td></tr> <tr><td>Harga</td> <td><input type="text" class="form‐control" name="harga" placeholder="harga"> </td></tr>
<tr><td>Satuan</td> <td><input type="text" class="form‐control" name="satuan" placeholder="Satuan"> </td></tr>
<tr><td colspan="2"> <button type="submit" class="btn btn‐primary btn‐sm" name="submit">Simpan</button> <?php echo anchor('barang','Kembali',array('class'=>'btn btn‐primary btn‐sm'))?></td></tr> </table> </form> <?php $this‐>load‐>view('template/footer');?>
11
Praktikum Pemrograman Web II STMIK Cikarang
Controller barang <?php class Barang extends CI_Controller function __construct() parent::__construct(); $this‐>load‐>model('model_barang');
function index()
$this‐>load‐>model('model_barang'); $data['list_barang']= $this‐>model_barang‐>tampil_barang(); $this‐>load‐>view('barang/tampilbarang',$data);
function tambah()
$this‐>load‐>view('barang/forminput'); function submit()
$nama = $this‐>input‐>post('namabarang'); $harga = $this‐>input‐>post('harga');
$satuan = $this‐>input‐>post('satuan'); $data = array(
'namabarang'=>$nama, 'harga'=>$harga,
'satuan'=>$satuan); $this‐>model_barang‐>post($data); redirect('barang/index');
?>
7. Membuat page Edit data barang Model model_barang
<?php class Barang extends CI_Controller
function __construct()
12
Praktikum Pemrograman Web II STMIK Cikarang
parent::__construct(); $this>load>model('model_barang');
function index()
$this>load>model('model_barang'); $data['list_barang']= $this>model_barang>tampil_barang(); $this>load>view('barang/tampilbarang',$data);
function tambah()
$this>load>view('barang/forminput'); function submit()
$nama = $this>input>post('namabarang'); $harga = $this>input>post('harga'); $satuan = $this>input>post('satuan');
$data = array( 'namabarang'=>$nama,
'harga'=>$harga, 'satuan'=>$satuan);
$this>model_barang>post($data); redirect('barang/index'); function edit()
if(isset($_POST['submit'])) // proses barang $kode = $this>input>post('KodeBarang'); $nama = $this>input>post('nama_barang'); $harga = $this>input>post('harga'); $satuan = $this>input>post('satuan'); $data = array('NamaBarang'=>$nama, 'Harga'=>$harga, 'satuan'=>$satuan);
$this>model_barang>edit($data,$kode); redirect('barang');
13
Praktikum Pemrograman Web II STMIK Cikarang
else
$id= $this>uri>segment(3); $data['record'] =
$this>model_barang>get_one($id)>row_array(); $this>load>view('barang/formedit',$data);
?>
View formedit
<?php $this>load>view('template/header');?> <h3>Edit Data Barang</h3> <?php echo form_open('barang/edit'); ?> <input type="hidden" name="KodeBarang" value="<?php echo $record['KodeBarang']?>"> <table class="table tablebordered"> <tr><td width="120">Nama Barang</td> <td><input type="text" class="formcontrol" name="nama_barang" value="<?php echo $record['NamaBarang']?>" placeholder="nama barang"> </td></tr> <tr><td>Harga</td> <td><input type="text" class="formcontrol" name="harga" value="<?php echo $record['Harga']?>" placeholder="Harga"> </td></tr>
<tr><td>Satuan</td> <td><input type="text" class="formcontrol" name="satuan" value="<?php echo $record['satuan']?>" placeholder="Satuan"> </td></tr> <tr><td colspan="2"><button type="submit" class="btn btnprimary btnsm" name="submit">Simpan</button> <?php echo anchor('barang','Kembali',array('class'=>'btn btnprimary btnsm'))?></td></tr> </table> </form> <?php $this>load>view('template/footer');?>
14
Praktikum Pemrograman Web II STMIK Cikarang
Controller barang <?php class Barang extends CI_Controller function __construct() parent::__construct(); $this>load>model('model_barang');
function index()
$this>load>model('model_barang'); $data['list_barang']= $this>model_barang>tampil_barang(); $this>load>view('barang/tampilbarang',$data);
function tambah()
$this>load>view('barang/forminput'); function submit()
$nama = $this>input>post('namabarang'); $harga = $this>input>post('harga'); $satuan = $this>input>post('satuan');
$data = array( 'namabarang'=>$nama,
'harga'=>$harga, 'satuan'=>$satuan);
$this>model_barang>post($data); redirect('barang/index'); function edit()
if(isset($_POST['submit'])) // proses barang $kode = $this>input>post('KodeBarang'); $nama = $this>input>post('nama_barang'); $harga = $this>input>post('harga'); $satuan = $this>input>post('satuan');
15
Praktikum Pemrograman Web II STMIK Cikarang
$data = array('NamaBarang'=>$nama, 'Harga'=>$harga, 'satuan'=>$satuan);
$this>model_barang>edit($data,$kode); redirect('barang'); else
$id= $this>uri>segment(3); $data['record'] =
$this>model_barang>get_one($id)>row_array(); $this>load>view('barang/formedit',$data);
?>
8. Membuat Program hapus barang. Karena hapus data barang tidak memerlukan tampilan tersendiri, maka kode program yang akan kita modifikasi hanya model dan controller. Model model_barang <?php class Barang extends CI_Controller
function __construct() parent::__construct(); $this>load>model('model_barang');
function index()
$this>load>model('model_barang'); $data['list_barang']= $this>model_barang>tampil_barang(); $this>load>view('barang/tampilbarang',$data);
function tambah()
$this>load>view('barang/forminput');
16
Praktikum Pemrograman Web II STMIK Cikarang
function submit()
$nama = $this>input>post('namabarang'); $harga = $this>input>post('harga'); $satuan = $this>input>post('satuan');
$data = array( 'namabarang'=>$nama,
'harga'=>$harga, 'satuan'=>$satuan);
$this>model_barang>post($data); redirect('barang/index'); function edit()
if(isset($_POST['submit'])) // proses barang $kode = $this>input>post('KodeBarang'); $nama = $this>input>post('nama_barang'); $harga = $this>input>post('harga'); $satuan = $this>input>post('satuan'); $data = array('NamaBarang'=>$nama, 'Harga'=>$harga, 'satuan'=>$satuan);
$this>model_barang>edit($data,$kode); redirect('barang'); else
$id= $this>uri>segment(3); $data['record'] = $this>model_barang>get_one($id)>row_array(); $this>load>view('barang/formedit',$data);
function delete($kode) $this>db>where('KodeBarang',$kode); $this>db>delete('tbbarang');
17
Praktikum Pemrograman Web II STMIK Cikarang
?>
Controller barang
<?php class Barang extends CI_Controller
function __construct() parent::__construct(); $this>load>model('model_barang');
function index()
$this>load>model('model_barang'); $data['list_barang']= $this>model_barang>tampil_barang(); $this>load>view('barang/tampilbarang',$data);
function tambah()
$this>load>view('barang/forminput'); function submit()
$nama = $this>input>post('namabarang'); $harga = $this>input>post('harga'); $satuan = $this>input>post('satuan');
$data = array( 'namabarang'=>$nama,
'harga'=>$harga, 'satuan'=>$satuan);
$this>model_barang>post($data); redirect('barang/index'); function edit()
if(isset($_POST['submit'])) // proses barang
18
Praktikum Pemrograman Web II STMIK Cikarang
$kode = $this>input>post('KodeBarang'); $nama = $this>input>post('nama_barang'); $harga = $this>input>post('harga'); $satuan = $this>input>post('satuan'); $data = array('NamaBarang'=>$nama, 'Harga'=>$harga, 'satuan'=>$satuan);
$this>model_barang>edit($data,$kode); redirect('barang'); else
$id= $this>uri>segment(3); $data['record'] = $this>model_barang>get_one($id)>row_array(); $this>load>view('barang/formedit',$data);
function hapus() $id= $this>uri>segment(3); $this>model_barang>delete($id); redirect('barang'); ?>
19