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

This is default featured slide 1 title

This is default featured slide 2 title

This is default featured slide 3 title

This is default featured slide 4 title

This is default featured slide 5 title

Selasa, 13 September 2016

Modul Sketchup

Rabu, 31 Agustus 2016

Materi Pertemuan 8

Selasa, 30 Agustus 2016

Materi Ujian

Selasa, 09 Agustus 2016

Aplikasi Sederhana : Crued Data Mahasiswa

Senin, 25 Juli 2016

Login Single User

Menu Artikel

Postingan Populer

Daftar Isi

Blogroll

About

About

Selasa, 13 September 2016

Rabu, 31 Agustus 2016

Selasa, 30 Agustus 2016

Selasa, 09 Agustus 2016

Senin, 25 Juli 2016

Social Profiles

Menu Artikel

Postingan Populer

Daftar Isi

Blogroll

About