Membuat Aplikasi Crud Sederhana dengan PHP & Bootstrap Chapter 2

Fahmi Amarullah 18.49 PHP Tidak ada komentar

Yoo minna pada chapter sebelum nya kita membuat design untuk aplikasi sederhana kita dan sekarang di chapter ke 2 ini kita akan membuat koneksi database dan coding php untuk menampilkan data dari database ke halaman anggota.php.

Pertama buat dulu database :

Setelah membuat database kita akan membuat tabel anggota pada database yang sudah kita buat, kira” seperti ini query nya :




create table anggota ( 

id_anggota varchar(5) not null primary key AUTO_INCREMENT,

nama varchar(50),

jenis_kelamin varchar(10),

email varchar(50)

);

baiklah, database dan table sudah kita buat dan sekarang kita menuju ke pengkodean PHP. Pertama buat folder baru di project kita dan beri nama config.php kemudian buka text editor nya sekarang kita membuat file bernama db.php untuk membuat koneksi antara database dan php tersebut. ini dia kode nya :


<?php

error_reporting(E_ALL ^ E_DEPRECATED) ; /* mengatasi error deprecated karena PHP 5 keatas sudah tidak mendukung MySQL */

 $koneksi = mysql_connect("localhost", "username localhost anda", "pasword localhost anda") or die (mysql_error());

$db = mysql_select_db("ancoder", $koneksi) or die (mysql_error());

?>

ganti username dan password sesuai user dan pass localhost pc masing-masing. Kemudian simpan di folder config tadi. nah koneksi database sudah kita buat sekarang kita akan mencoba menampilkan data anggota ke dalam form anggota yang telah kita buat. kita buka dulu file anggota.php yg sudah kita buat dan masukkan kode php nya, masukkan diantara </tr> dan </table>,berikut kodenya :



<?php 

 include "config/db.php" ;

 $no = 0 ;

 $sql = mysql_query("SELECT * FROM anggota");

 while ($tampil = mysql_fetch_array($sql)) {

 $no++;

 ?> 

 <tr>

 <td><center><?php echo $no ?></center></td>

 <td><?php echo $tampil['nama']?></td>

 <td><center><?php echo $tampil['jenis_kelamin']?></center></td>

 <td><center><?php echo $tampil['email']?></center></td>

 <td><center><a class="glyphicon glyphicon-pencil" href="edit.php?id=<?php echo $tampil['id_anggota'];?>"> Edit</a> | <a class="glyphicon glyphicon-trash" href="hapus.php?id=<?php echo $tampil['id_anggota'];?>" onclick="return confirm('Apakah Anda yakin akan menghapus?')">Hapus</a></td></center>

 </tr>

 <?php

 }

 ?>

untuk kode lengkap nya sebagai berikut :



<!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>Anime Coder</title>

<!-- Bootstrap -->

 <link href="assets/css/bootstrap.min.css" rel="stylesheet">

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

 <script src="assets/js/bootstrap.min.js"></script>

 </head>

 <body>

 <div class="container">

 <h2> Simple CRUD BY Anime Coder </h2>

 <nav class="navbar navbar-inverse" role="navigation">

 <div class="container-fluid">

 <!-- Brand and toggle get grouped for better mobile display -->

 <div class="navbar-header">

 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">

 <span class="sr-only">Toggle navigation</span>

 <span class="icon-bar"></span>

 <span class="icon-bar"></span>

 <span class="icon-bar"></span>

 </button>

 <a class="navbar-brand" href="index.php"><span class="glyphicon glyphicon-home"></span></a>

 </div>



 <!-- Collect the nav links, forms, and other content for toggling -->

 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

 <ul class="nav navbar-nav">

 <li><a href="anggota.php"><span class="glyphicon glyphicon-user"></span> Data Anggota</a></li>

 <form class="navbar-form navbar-left" role="search">

 <div class="form-group">

 <input type="text" class="form-control" placeholder="Search">

 </div> 

 <button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-search"></span> Cari</button>

 </form>

 </div><!-- /.navbar-collapse -->

 </div><!-- /.container-fluid -->

 </nav>



 </div>

 <div class="container">

 <h3>Data Anggota</h3 >

 <table class="table table-striped table-bordered">

 <tr>



 <th><center>No</center></th>

 <th><center>Nama Lengkap</center></th>

 <th><center>Jenis Kelamin</center></th>

 <th><center>Email Address</center></th>

 <th><center>Pilih Aksi</center></th>



 </tr>



 <?php 

 include "config/db.php" ;

 $no = 0 ;

 $sql = mysql_query("SELECT * FROM anggota");

 while ($tampil = mysql_fetch_array($sql)) {

 $no++;

 ?> 

 <tr>

 <td><center><?php echo $no ?></center></td>

 <td><?php echo $tampil['nama']?></td>

 <td><center><?php echo $tampil['jenis_kelamin']?></center></td>

 <td><center><?php echo $tampil['email']?></center></td>

 <td><center><a class="glyphicon glyphicon-pencil" href="edit.php?id=<?php echo $tampil['id_anggota'];?>"> Edit</a> | <a class="glyphicon glyphicon-trash" href="hapus.php?id=<?php echo $tampil['id_anggota'];?>" onclick="return confirm('Apakah Anda yakin akan menghapus?')">Hapus</a></td></center>

 </tr>

 <?php

 }

 ?>

 </table>

 <div class="container">

 <form class="form-horizontal" role="form" action="tambah.php" method="POST">

 <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span> Tambah Data</button>

 </form>

 </div>

 </div>

 <div class="container">

 <div class="row">

 <div class="col-sm-12">

 <hr>

 <center> <p>&copy;Copyright Anime Coder 2015 All Right Reserved</p></center>

 </div>

 </div>

 </div>

 </body>

</html>

save file tersebut dan sekarang kita test terlebih dahulu, buat beberapa record di database untuk kita test apakah data tersebut akan muncul di page anggota.php. Setelah membuat nya kita running di localhost kita, jika berhasil maka akan muncul seperti di bawah ini :