Praktikum Pemrograman Web II STMIK Cikarang · PDF fileMEMBUAT APLIKASI CRUD DENGAN...

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

http://localhost:8080/belajarCI/


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


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


<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


<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


<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


<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


<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


<?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


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


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


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


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


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


Controller barang <?php class Barang extends CI_Controller function __construct() parent::__construct(); $this>load>model('model_barang');

function index()


function tambah()






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


$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()


function tambah()

$this>load>view('barang/forminput');

16


function submit()





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);


$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


?>

Controller barang

<?php class Barang extends CI_Controller

function __construct() parent::__construct(); $this>load>model('model_barang');

function index()


function tambah()






if(isset($_POST['submit'])) // proses barang

18


$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);


$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

Praktikum Pemrograman Web II STMIK Cikarang · PDF fileMEMBUAT APLIKASI CRUD DENGAN...

Documents

Transcript of Praktikum Pemrograman Web II STMIK Cikarang · PDF fileMEMBUAT APLIKASI CRUD DENGAN...

Praktikum Pemrograman Web II ­ STMIK Cikarang · PDF fileMEMBUAT APLIKASI CRUD DENGAN...

Documents

Transcript of Praktikum Pemrograman Web II ­ STMIK Cikarang · PDF fileMEMBUAT APLIKASI CRUD DENGAN...

Praktikum Pemrograman Web II STMIK Cikarang · PDF fileMEMBUAT APLIKASI CRUD DENGAN...

Transcript of Praktikum Pemrograman Web II STMIK Cikarang · PDF fileMEMBUAT APLIKASI CRUD DENGAN...