Selasa, 09 Agustus 2016

Aplikasi Sederhana : Crued Data Mahasiswa

Pada kesempatan kali ini kita akan belajar membuat aplikasi sederhana untuk memasukan data mahasiswa ke dalam database, meng-edit, menghapus dan menampilkannya dengan menggunakan php. Untuk desain kita akan menggunakan bantuan bootstrap dan CSS.

Baiklah pertama-tama buatlah databse dan tabelnya, seperti berikut :

1. Buatlah Database dengan nama : kampus
2. Buatlah tabel dengan nama : tbl_mhs

berikut contoh dari tabelnya yang sudah jadi :














Berikutnya folder di C://xampp/hatdocs/kampus

1. Ketik file di bawah ini kemudian simpan dengan nama input.php


<!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">
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="style/tabel2.css">
<link rel="stylesheet" type="text/css" href="style/aplikasi.css">
<link rel=”SHORTCUT ICON” href=”http://www.yourwebsite.com/favicon.ico” />
<!-- Image Responsive -->
<style>img {max-width:100%;} </style>
<title>Blog Kang Arya</title>
</head>

<body>
<div class="container">
<center><h1><b>APLIKASI SEDERHANA</b></h1></center>
<h3><b>Input Data Mahasiswa</b></h3>
<ul class="breadcrumb">
<li><a href="input.php">Input</a></li>
<li><a href="tampil.php">Tampil</a></li>
<li><a href="cari.php">Cari Data</a></li>
</ul>
<div id='kotak'>
<!-- Form Input -->
<form name='input' method='POST' action='simpan.php'>
<div class='form-group'>
<label for='npm'>NIM Mahasiswa </label>
<input type='number' name='npm' placeholder='NIM Anda' class='form-control'>
</div>
<div class="form-group">
<label for='nama'>Nama Mahasiswa </label>
<input type='text' name='nama' placeholder='Nama Anda' class='form-control'>
</div>
<div class="form-group">
<label for='tgl'>Nama Mahasiswa </label>
<input type='date' name='tgl' placeholder='Tanggal Lahir' class='form-control'>
</div>
<div class="form-group">
<label for='jrs'>Pilihan Jurusan</label>
<select name='jrs' class='form-control'>
<option value=''>-- Pilih Jurusan --</option>
<option value='TI'>Teknik Informatika</option>
<option value='MI'>Manajemen Informatika</option>
<option value='KA'>Komputer Akuntansi</option>
</select>
</div>
<div class="form-group">
<label for='almt'>Alamat </label>
<textarea name='almt' placeholder='Alamat' class='form-control' cols=5 rows=10></textarea>
</div>
<div class="form-group">
<input type='submit' name='save' value='Simpan' class='btn btn-primary btn-sm'>
<input type='reset' name='batal' value='Hapus' class='btn btn-info btn-sm'>
</div>
</div>
</form>

</div>
</div>
<!-- Javascript -->
<script type="text/javascript" src="bootstrap/js/jquery.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<?php include 'footer.php';?>
</body>
</html>


2. Ketik script di bawah ini kemudian simpan dengan nama : simpan.php

<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
<?php
include 'koneksi.php';
$npm = $_POST[npm];
$nama = strip_tags($_POST[nama]);
$tgl = $_POST[tgl];
$jrs = $_POST[jrs];
$almt = $_POST[almt];

$cekdata = "SELECT npm FROM tbl_mhs WHERE npm = '$npm'";
$ada = mysql_query($cekdata) or die (mysql_error);
if(mysql_num_rows($ada)>0){
echo "<script language='javascript'> alert ('Sorry, NPM ini sudah ada');
window.location = 'input.php'</script>";
 
}elseif(empty($npm)){
echo "<script language='javascript'> alert ('Sorry, nim belum diisi');
window.location = 'input.php'</script>";

}elseif(empty($nama)){
echo "<script language='javascript'> alert ('Sorry, Nama belum diisi');
window.location = 'input.php'</script>";

}elseif(empty($tgl)){
echo "<script language='javascript'> alert ('Sorry, Tanggal belum diisi');
window.location = 'input.php'</script>";

}elseif(empty($jrs)){
echo "<script language='javascript'> alert ('Sorry, Jurusan belum diisi');
window.location = 'input.php'</script>";

}elseif(empty($almt)){
echo "<script language='javascript'> alert ('Sorry, Alamat belum diisi');
window.location = 'input.php'</script>";

$query = "insert into tbl_mhs(npm, nama, tgl, jrs, almt)
values ('".$npm."', '".$nama."','".$tgl."', '".$jrs."','".$almt."')";
}
echo "<script language='javascript'> alert
('input data sukses'); window.location='tampil.php'</script> ";
mysql_query($query);
?>

3. Ketik script di bawah ini kemudian simpan dengan nama : tampil.php

<!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">
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="style/aplikasi.css">
<link rel="stylesheet" type="text/css" href="style/tabel2.css">
<link rel=”SHORTCUT ICON” href=”http://www.yourwebsite.com/favicon.ico” />
<!-- Image Responsive -->
<style>img {max-width:100%;} </style>
<title>Blog Kang Arya</title>
<script>
function hapus(pesan){
var pesan;
pesan = 'Apakah Anda ingin menghapus data ini? Jika yakin tekan OK, jika tidak tekan Cancel';

if(confirm(pesan)){
return true;
}
else{
return false;
}
}
</script>
</head>

<body>
<div class='container'>
<center><h1><b>APLIKASI SEDERHANA</b></h1></center>
<h3><b>Tampil Data Mahasiswa</b></h3>
<ul class="breadcrumb">
<li><a href="input.php">Input</a></li>
<li><a href="tampil.php">Tampil</a></li>
<li><a href="cari.php">Cari Data</a></li>
</ul>
<div id='kotak'>

<!-- Pagging -->
<?php
include 'koneksi.php';
$per_hal=5;
$jumlah_record=mysql_query("SELECT COUNT(*) from tbl_mhs");
$jum=mysql_result($jumlah_record, 0);
$halaman= ceil($jum / $per_hal);
$page = (isset($_GET['page'])) ? (int)$_GET['page'] : 1;
$mulai = ($page - 1) * $per_hal;
?>
<!-- END PAGGING -->

<table class='layout display responsive-table'>
<thead>
<tr>
<th>NPM</th>
<th>Nama Mahasiswa</th>
<th>Tanggal Lahir</th>
<th>Jurusan</th>
<th>Alamat</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
include 'koneksi.php';
$no=0;
$query=mysql_query("select * from tbl_mhs limit $mulai, $per_hal");
while($data=mysql_fetch_array($query)){
    $no++;
echo"
<tr>
<td class='organisationnumber'> $data[npm] </td>
<td class='organisationname'> $data[nama] </td>
<td class='organisationname'> $data[tgl] </td>
<td class='organisationname'> $data[jrs] </td>
<td class='organisationname'> $data[almt] </td>
<td class='organisationname'>
<a href='delete.php?npm=$data[npm]'
class='btn btn-primary btn-xs' onClick='return hapus()'
title='tombol untuk menghapus data'>
<span class='glyphicon glyphicon-remove'></span>
Delete</a>
<a href='edit.php?npm=$data[npm]'
class='btn btn-success btn-xs' title='edit data mahasiswa'>
<span class='glyphicon glyphicon-pensil'></span>
Edit</a>
</td>
</tr> </tbody>";
?>
<?php
}
echo "</table>";
?>
<!-- MENAMPILKAN NOMER HALAMAN -->
<center>Halaman :
<a href="?page=<?php echo $page -1 ?>"></a>
<?php
for($x=1;$x<=$halaman;$x++){
?>

<a href="?page=<?php echo $x ?>"><?php echo $x ?></a>
<?php
}
?>

<?php
echo "Jumlah data : ".$jum."<br>";
echo "Jumlah halaman : ".$halaman."<br/>";
?>
</center>
<!-- END NOMOR HALAMAN -->
</div>
</div>
<!-- Javascript -->
<script type="text/javascript" src="bootstrap/js/jquery.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<?php include 'footer.php';?>
</body>
</html>

4. Ketik script di bawah ini kemudian simpan dengan nama : edit.php

<!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">
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="style/tabel2.css">
<link rel="stylesheet" type="text/css" href="style/aplikasi.css">
<link rel=”SHORTCUT ICON” href=”http://www.yourwebsite.com/favicon.ico” />
<!-- Image Responsive -->
<style>img {max-width:100%;} </style>
<title>Blog Kang Arya</title>
</head>

<body>
<div class="container">
<center><h1><b>APLIKASI SEDERHANA</b></h1></center>
<h3><b>Edit Data Mahasiswa</b></h3>
<ul class="breadcrumb">
<li><a href="input.php">Input</a></li>
<li><a href="tampil.php">Tampil</a></li>
<li><a href="cari.php">Cari Data</a></li>
</ul>
<div id='kotak'>
<?php
include 'koneksi.php';
$data = mysql_fetch_array(mysql_query("SELECT * FROM tbl_mhs WHERE npm = '$_GET[npm]'"));
?>
<?php
echo"
 <h2>Edit Data Mahasiswa</h2>
 <form name='input' method='POST' action='update.php'>
<div class='form-group'>
<input type='hidden' name='npm' class='form-control' value='$data[npm]'>
</div>

<div class='form-group'>
<label>Nama Mahasiswa : </label>
<input type='text' name='nama' class='form-control' value='$data[nama]'>
</div>

<div class='form-group'>
<label>Tanggal Lahir</label>
<input type='date' name='tgl' class='form-control' value='$data[tgl]'>
</div>

<div class='form-group'>
<label> Jurusan </label>
<select name='jrs' class='form-control'>
<option value='$data[jrs]'> $data[jrs]</option>
<option value='TI'>Teknik Informatika</option>
<option value='KA'>Komputer Akuntansi</option>
<option value='MI'>Manajemen Informatika</option>
</select>
</div>

<div class='form-group'>
<label> Alamat : </label>
<textarea name='almt' class='form-control' cols='5' rows='10'>$data[almt]</textarea>
</div>
<input type='submit' value='Update' class='btn btn-danger btn-md'>
<a href='tampil.php'><button class='btn btn-primary'>Batal</button></a>
</form>";
?>
</div>
</div>
<!-- Javascript -->
<script type="text/javascript" src="bootstrap/js/jquery.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<?php include 'footer.php';?>
</body>
</html>


5. Ketik script di bawah ini kemudian simpan dengan nama : update.php

<?php
include 'koneksi.php';
$update = mysql_query("update tbl_mhs set
nama = '$_POST[nama]',
tgl = '$_POST[tgl]',
jrs = '$_POST[jrs]',
almt = '$_POST[almt]'
WHERE npm = '$_POST[npm]'")or die ("gagal update ");
echo "<script>alert ('data telah di update '); document.location='tampil.php' </script> ";
?>


6. Ketik script di bawah ini kemudian simpan dengan nama : delete.php

<?php
include 'koneksi.php';
mysql_query("DELETE from tbl_mhs WHERE npm='$_GET[npm]'");
include 'tampil.php';
?>


7. Ketik script di bawah ini kemudian simpan dengan nama : cari.php

<!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">
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="style/tabel2.css">
<link rel="stylesheet" type="text/css" href="style/aplikasi.css">
<link rel=”SHORTCUT ICON” href=”http://www.yourwebsite.com/favicon.ico” />
<!-- Image Responsive -->
<style>img {max-width:100%;} </style>
<title>Blog Kang Arya</title>
<script>
function hapus(pesan){
var pesan;
pesan = 'Apakah Anda ingin menghapus data ini? Jika yakin tekan OK, jika tidak tekan Cancel';
if(confirm(pesan)){
return true;
}
else{
return false;
}
}
</script>
</head>

<body>
<div class='container'>
<center><h1><b>APLIKASI SEDERHANA</b></h1></center>
<h3><b>Input Data Mahasiswa</b></h3>
<ul class="breadcrumb">
<li><a href="input.php">Input</a></li>
<li><a href="tampil.php">Tampil</a></li>
<li><a href="cari.php">Cari Data</a></li>
</ul>
<div id='kotak'>

<!-- Form Pencarian -->
<?php
echo'
<form method="POST" action="cari_mahasiswa.php" class="form-inline">
<input type="text" name="nama" 
placeholder="Ketik nama Anda" class="form-control" class="col-md-4" />
<input type="submit" name="cari" value="GO" 
class="btn btn-primary">
</form>';
?>

<!-- Isi Data -->
<!-- Pagging -->
<?php
include 'koneksi.php';
$per_hal=5;
$jumlah_record=mysql_query("SELECT COUNT(*) from tbl_mhs");
$jum=mysql_result($jumlah_record, 0);
$halaman= ceil($jum / $per_hal);
$page = (isset($_GET['page'])) ? (int)$_GET['page'] : 1;
$mulai = ($page - 1) * $per_hal;
?>
<!-- END PAGGING -->
<table class='layout display responsive-table'>
<thead>
<tr>
<th>NPM</th>
<th>Nama Mahasiswa</th>
<th>Tanggal Lahir</th>
<th>Jurusan</th>
<th>Alamat</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
include 'koneksi.php';
$no=0;
$query=mysql_query("select * from tbl_mhs limit $mulai, $per_hal");
while($data=mysql_fetch_array($query)){
    $no++;
echo"  
<tr>
<td class='organisationnumber'> $data[npm] </td>
<td class='organisationname'> $data[nama] </td>
<td class='organisationname'> $data[tgl] </td>
<td class='organisationname'> $data[jrs] </td>
<td class='organisationname'> $data[almt] </td>
<td class='organisationname'>
<a href='delete.php?npm=$data[npm]' 
class='btn btn-primary btn-xs' onClick='return hapus()'
title='tombol untuk menghapus data'>
<span class='glyphicon glyphicon-remove'></span>
Delete</a> 
<a href='edit.php?npm=$data[npm]' 
class='btn btn-success btn-xs' title='edit data mahasiswa'>
<span class='glyphicon glyphicon-pensil'></span>
Edit</a>
</td>
</tr> </tbody>";
?>
<?php
}
echo "</table>";
?>
<!-- MENAMPILKAN NOMER HALAMAN -->
<center>Halaman :
<a href="?page=<?php echo $page -1 ?>"></a>
<?php  
for($x=1;$x<=$halaman;$x++){
?>
 
<a href="?page=<?php echo $x ?>"><?php echo $x ?></a>
<?php
}
?>
 
<?php
echo "Jumlah data : ".$jum."<br>";
echo "Jumlah halaman : ".$halaman."<br/>";
?>
</center>
<!-- END NOMOR HALAMAN -->
</div>
</div>
<!-- Javascript -->
<script type="text/javascript" src="bootstrap/js/jquery.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<?php include 'footer.php';?>
</body>
</html>

8. Ketik script di bawah ini kemudian simpan dengan nama : cari_mahasiswa.php

<!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">
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="style/tabel2.css">
<link rel="stylesheet" type="text/css" href="style/aplikasi.css">
<link rel=”SHORTCUT ICON” href=”http://www.yourwebsite.com/favicon.ico” />
<!-- Image Responsive -->
<style>img {max-width:100%;} </style>
<title>Blog Kang Arya</title>
<script>
function hapus(pesan){
var pesan;
pesan = 'Apakah Anda ingin menghapus data ini? Jika yakin tekan OK, jika tidak tekan Cancel';
if(confirm(pesan)){
return true;
}
else{
return false;
}
}
</script>
</head>

<body>
<div class='container'>
<center><h1><b>APLIKASI SEDERHANA</b></h1></center>
<h3><b>Input Data Mahasiswa</b></h3>
<ul class="breadcrumb">
<li><a href="input.php">Input</a></li>
<li><a href="tampil.php">Tampil</a></li>
<li><a href="cari.php">Cari Data</a></li>
</ul>
<div id='kotak'>

<!-- Pagging -->
<?php
include 'koneksi.php';
$per_hal=5;
$jumlah_record=mysql_query("SELECT COUNT(*) from tbl_mhs");
$jum=mysql_result($jumlah_record, 0);
$halaman= ceil($jum / $per_hal);
$page = (isset($_GET['page'])) ? (int)$_GET['page'] : 1;
$mulai = ($page - 1) * $per_hal;
?>
<!-- END PAGGING -->
<!-- Form Pencarian -->
<?php
echo'
<form method="POST" action="cari_mahasiswa.php" class="form-inline">
<input type="text" name="nama" 
placeholder="Ketik nama Anda" class="form-control" class="col-md-4" />
<input type="submit" name="cari" value="GO" 
class="btn btn-primary">
</form>';
?>
<table class='layout display responsive-table'>
<thead>
<tr>
<th>NPM</th>
<th>Nama Mahasiswa</th>
<th>Tanggal Lahir</th>
<th>Jurusan</th>
<th>Alamat</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
include 'koneksi.php';
$no=0;
$nama= $_POST[nama];
$query = "SELECT * from tbl_mhs where nama like '%$nama%' limit $mulai, $per_hal"; 
$result = mysql_query($query) or die ('Database eror');
while ($data = mysql_fetch_array($result)) {  
    $no++;
echo"  
<tr>
<td class='organisationnumber'> $data[npm] </td>
<td class='organisationname'> $data[nama] </td>
<td class='organisationname'> $data[tgl] </td>
<td class='organisationname'> $data[jrs] </td>
<td class='organisationname'> $data[almt] </td>
<td class='organisationname'>
<a href='delete.php?npm=$data[npm]' 
class='btn btn-primary btn-xs' onClick='return hapus()'
title='tombol untuk menghapus data'>
<span class='glyphicon glyphicon-remove'></span>
Delete</a> 
<a href='edit.php?npm=$data[npm]' 
class='btn btn-success btn-xs' title='edit data mahasiswa'>
<span class='glyphicon glyphicon-pensil'></span>
Edit</a>
</td>
</tr> </tbody>";
?>
<?php
}
echo "</table>";
?>
<!-- MENAMPILKAN NOMER HALAMAN -->
<center>Halaman :
<a href="?page=<?php echo $page -1 ?>"></a>
<?php  
for($x=1;$x<=$halaman;$x++){
?>
 
<a href="?page=<?php echo $x ?>"><?php echo $x ?></a>
<?php
}
?>
 
<?php
echo "Jumlah data : ".$jum."<br>";
echo "Jumlah halaman : ".$halaman."<br/>";
?>
</center>
<!-- END NOMOR HALAMAN -->
</div>
</div>
<!-- Javascript -->
<script type="text/javascript" src="bootstrap/js/jquery.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<?php include 'footer.php';?>
</body>
</html>


9. Ketik script di bawah ini di dalam folder style, kemudian simpan dengan nama : aplikasi.css

@charset "utf-8";
/* CSS Document */

*{margin:0px auto;}
body{background-image:url("../images/cream_pixels.png"); background-image:repeat; font-family:calibri, verdana, sans-serif; line-height:1.5em;
A:link {text-decoration: none; color:#0000FF;};
    A:visited {text-decoration: none; color:#000;};
    A:active {text-decoration: none; color:#DC143C;};
}
#kotak{
width: 100%;
padding: 10px;
background-image: url(../images/light_grey.png);
border: 1px solid #COCOCO;
border-radius: 5px;
box-shadow: 4px 4px 4px;
}

#isi_login {
background-image: url(../images/agsquare.png);
width:100%;
height:0 auto;
border:1px solid #CCC;
padding:20px;
border-radius: 8px;
margin-bottom: 10px;
}


10. Ketik script di bawah ini masukan ke dalam folder style,  kemudian simpan dengan nama : tabel2.css

.page{
  max-width: 60em;
  margin: 0 auto;
}
table th,
table td{
  text-align: left;
}
table.layout{
  width: 100%;
  border-collapse: collapse;
}
table.display{
  margin: 1em 0;
}
table.display th,
table.display td{
  border: 1px solid #B3BFAA;
  padding: .5em 1em;
}

table.display th{ background: #D5E0CC; }
table.display td{ background: #fff; }

table.responsive-table{
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
}

@media (max-width: 30em){
    table.responsive-table{
      box-shadow: none;
    }
    table.responsive-table thead{
      display: none;
    }
  table.display th,
  table.display td{
    padding: .5em;
  }
 
  table.responsive-table td:nth-child(1):before{
    content: 'Number';
  }
  table.responsive-table td:nth-child(2):before{
    content: 'Name';
  }
  table.responsive-table td:nth-child(1),
  table.responsive-table td:nth-child(2){
    padding-left: 25%;
  }
  table.responsive-table td:nth-child(1):before,
  table.responsive-table td:nth-child(2):before{
    position: absolute;
    left: .5em;
    font-weight: bold;
  }

    table.responsive-table tr,
    table.responsive-table td{
        display: block;
    }
    table.responsive-table tr{
        position: relative;
        margin-bottom: 1em;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
    }
    table.responsive-table td{
        border-top: none;
    }
    table.responsive-table td.organisationnumber{
        background: #D5E0CC;
        border-top: 1px solid #B3BFAA;
    }
    table.responsive-table td.actions{
        position: absolute;
        top: 0;
        right: 0;
        border: none;
        background: none;
    }
}


11. Ketik script berikut ini kemudian simpan dengan nama : koneksi.php

<?php
$hostName = "localhost";
$userName = "root";
$passWord = "";
$dataBase = "kampus";

mysql_connect($hostName,$userName,$passWord) or die('Koneksi Gagal');
mysql_select_db($dataBase) or die('Database tidak ditemukan');
ini_set("display_errors",0);
?>



12. Ketik script di bawah ini kemudian simpan dengan nama : footer.php

<!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">
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
</head>

<body>
<div class='container'>
<center><h6>Copyright @ 2016 Design by Arya All Rights Reserved</h6></center>
</div>
</body>
</html>
Posted by