Aplikasi Sederhana : Crued Data Mahasiswa ~ Blog Kang Arya

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

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

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

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

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

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


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


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

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

</div>
</div>

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

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

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

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

<head>

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>

<center><h1><b>APLIKASI SEDERHANA</b></h1></center>

<h3><b>Input Data Mahasiswa</b></h3>

<li><a href="input.php">Input</a></li>

<li><a href="tampil.php">Tampil</a></li>

</ul>

<?php

echo'

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

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

<thead>

<tr>

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

<a href='delete.php?npm=$data[npm]'

class='btn btn-primary btn-xs' onClick='return hapus()'

title='tombol untuk menghapus data'>

Delete</a>

<a href='edit.php?npm=$data[npm]'

class='btn btn-success btn-xs' title='edit data mahasiswa'>

Edit</a>

</td>

</tr> </tbody>";

<?php

}

echo "</table>";

<center>Halaman :

<?php

for($x=1;$x<=$halaman;$x++){

<?php

}

<?php

echo "Jumlah data : ".$jum."<br>";

echo "Jumlah halaman : ".$halaman."<br/>";

</center>

</div>

<?php include 'footer.php';?>

</body>

</html>

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

<!DOCTYPE html>

<head>

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>

<center><h1><b>APLIKASI SEDERHANA</b></h1></center>

<h3><b>Input Data Mahasiswa</b></h3>

<li><a href="input.php">Input</a></li>

<li><a href="tampil.php">Tampil</a></li>

</ul>

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

<?php

echo'

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

<thead>

<tr>

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

<a href='delete.php?npm=$data[npm]'

class='btn btn-primary btn-xs' onClick='return hapus()'

title='tombol untuk menghapus data'>

Delete</a>

<a href='edit.php?npm=$data[npm]'

class='btn btn-success btn-xs' title='edit data mahasiswa'>

Edit</a>

</td>

</tr> </tbody>";

<?php

}

echo "</table>";

<center>Halaman :

<?php

for($x=1;$x<=$halaman;$x++){

<?php

}

<?php

echo "Jumlah data : ".$jum."<br>";

echo "Jumlah halaman : ".$halaman."<br/>";

</center>

</div>

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

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

Blog Kang Arya

About

Selasa, 09 Agustus 2016