Membuat Aplikasi Crud Sederhana dengan PHP & Bootstrap Chapter 1

Fahmi Amarullah 18.34 PHP Tidak ada komentar

Hai hai minna :D, akhir nya saya bisa update postingan kembali, kali ini saya akan memberikan tutorial cara membuat Aplikasi CRUD sederhana dengan PHP dan juga dengan sentuhan tampilan Bootstrap. Apa itu CRUD ? CRUD merupakan singkatan dari Create Read Update and Delete. Setiap web, aplikasi desktop ataupun sistem informasi lainnya pasti akan selalu ada perintah CRUD.

Pertama-tama kita akan membuat design nya terlebih dahulu dengan bootstrap, yoo langsung saja buka text editor anda dan jangan lupa aktifkan web server lokal anda. tampilan yang saya buat cukup sederhana sekali, kita langsung saja.

1. Buat file bernama index.php untuk tampilan home kita, kode nya sebagai berikut :


<html lang="en">

<head>

<title>Anime Coder</title>

<!-- Bootstrap -->

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

<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 class="navbar-toggle" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" type="button">

<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="https://www.blogger.com/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="https://www.blogger.com/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 class="form-control" placeholder="Pencarian" type="text" />

</div>

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

</form>

</ul>

</div>

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

</div>

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

</nav>

<div class="jumbotron">

<img class="img-rounded" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" height="300px" src="img/header.jpg" width="1000px" />

<div class="container">

<h1>

<span class="glyphicon glyphicon-heart"></span> Irraseimasen</h1>

Selamat datang di Ancoder Academy

Ini adalah contoh aplikasi CRUD sederhana menggunakan PHP

</div>

</div>

</div>

<div class="container">

<div class="row">

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

<hr />

<center>

 ©Copyright Anime Coder 2015 All Right Reserved</center>

</div>

</div>

</div>

</body>

</html>

simpan file tersebut di folder project kita, setelah itu coba running di localhost kita maka tampilan nya kurang lebih seperti ini :

2. Buat file bernama anggota.php dan masukkan kode nya di bawah ini :


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

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

kira kira tampilan nya seperti ini :

3. Kita Buat file lagi dengan nama tambah.php, berikut kode nya :


<!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>Tambah Anggota</h3 >

</div>

<div class="container">

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

<div class="form-group">

<label class="col-sm-2">Nama</label>

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

<input type="text" name="nama" class="form-control" placeholder="Nama Anda">

</div>

</div>

<div class="form-group">

<label class="col-sm-2"> Jenis Kelamin </label>

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

<select name="jeniskelamin" class="form-control">

<option value="0"class="form-control">

<option value="Laki-laki" class="form-control">Laki-laki

<option value="Perempuan" class="form-control">Perempuan

</select>

</div>

</div>

<div class="form-group">

<label class="col-sm-2">Email</label>

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

<input type="text" name="email" class="form-control" placeholder="Email Anda">

</div>

</div>

<div class="form-group">

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

<button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-save"></span> Simpan</button>

</div>

</div>

</form>

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

Hasilnya seperti ini :