program sortir dengan php mysql

15 Okt 2011 18.04

Berhubung tugasnya disuruh upload ke blog, maka kami upload lah :D
(kami menggunakan wampserver).

screenshot hasil jadi :






langkah-langkah :

buat database dengan nama sortir_satu_database (localhost/phpmyadmin), lalu klik tab sql, masukkan script ini

CREATE TABLE data_mahasiswa(
  no int(5) auto_increment primary key,
  npm int(30),
  nama varchar(30),
  kelas int(10)
)

kemudian buat form input data, simpan dengan nama :

form_1database.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<link rel="stylesheet" href="bingkai_form.css" type="text/css" charset="utf-8"/>

<body>

<script type="text/javascript" src="jquery-1.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#input_data").click(function(){
    $("#bingkai_form").slideToggle("fast");
  });
});

</script>
<style type="javascript">
function closeWin()
{
myWindow.close();
}
</style>

<div id="bingkai_menu" style="text-align:center;">
<a id="input_data" href="#">Input data <br/></a>
<a href="sortir_keseluruhan.php" target="_blank">Sort urut 1,2,3 <br/></a>
<a href="sortir_perkelas.php" target="_blank">Sort per kelas <br/></a>
<a href="" OnClick="window.close()">Keluar</a>
</div>


<form action="form_1database.php" method="POST">
<div id="bingkai_form" style="display:none;">
<div id="header_form">INPUT DATA</div>
npm<input type="text" name="npm" style="padding: 2px;margin-top:10px;margin-left:8px;"/><br/>
nama<input type="text" name="nama" style="padding: 2px;margin-top:2px;margin-left:2px;"/><br/>
kelas<input type="text" name="kelas" style="padding: 2px;margin-top:2px;margin-left:4px;"/><br/>
<input type="submit" value="kirim" style="margin-left:67px;"/>
</div>
</form>
<?php
mysql_connect ("localhost","root","");
mysql_select_db ("sortir_satu_database");

if(!empty($_POST)) {
$npm=$_POST['npm'];
$nama=$_POST['nama'];
$kelas=$_POST['kelas'];

if($npm && $nama && $kelas){
$kirim=mysql_query("INSERT INTO data_mahasiswa (npm,nama,kelas) VALUES ('$npm','$nama','$kelas')");
}
}
?>
</body>
</html>

lalu download jquery-1.4.js, kami gunakan sedikit animasi dalam form data ini.
lalu download bingkai_form.css, kami gunakan untuk bingkai formnya.

kemudian buat tabel untuk menyortir kelas secara keseluruhan dalam 1 tabel, simpan dengan nama :

sortir_keseluruhan.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<style type="text/css">
th {
background:#ccc;
}
td {
background:#eee;
}
#bingkai {
width:290px;
margin:auto;
}
table {
text-align:center;
border:0px;
float:left;
}
</style>
<body>
<table cellpadding=6>
<tr>
<th colspan=3 align=center>SEBELUM DISORTIR</th>
</tr>
<tr>
<td>npm</td>
<td>nama</td>
<td>kelas</td>
</tr>
<?php
mysql_connect ("localhost","root","");
mysql_select_db ("sortir_satu_database");

$ambil=mysql_query("SELECT * FROM data_mahasiswa");
while ($kolom_db=mysql_fetch_assoc($ambil)){
$ambil_npm=$kolom_db['npm'];
$ambil_nama=$kolom_db['nama'];
$ambil_kelas=$kolom_db['kelas'];

echo "
<tr>
<td>$ambil_npm </td>
<td>$ambil_nama </td>
<td>$ambil_kelas </td>
</tr>
";
}

?>
</table>

<table cellpadding=6>
<tr>
<th colspan=3>SESUDAH DISORTIR</th>
</tr>
<tr>
<td>npm</td>
<td>nama</td>
<td>kelas</td>
</tr>
<?php
mysql_connect ("localhost","root","");
mysql_select_db ("sortir_satu_database");

$ambil=mysql_query("SELECT * FROM data_mahasiswa ORDER BY kelas ASC");
while ($kolom_db=mysql_fetch_assoc($ambil)){
$ambil_npm=$kolom_db['npm'];
$ambil_nama=$kolom_db['nama'];
$ambil_kelas=$kolom_db['kelas'];

echo "
<tr>
<td>$ambil_npm </td>
<td>$ambil_nama </td>
<td>$ambil_kelas </td>
</tr>
";
}
?>
</table>
</body>
</html>

kemudian buat sortir perkelas, jadi ada 3 tabel.. masing-masing tabel untuk kelas1, kelas2, kelas3.
ini scriptnya simpan dengan nama :

sortir_perkelas.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<style type="text/css">
th {
background:#ccc;
}
td {
background:#eee;
}
table {
text-align:center;
border:0px;
float:left;
}
</style>
<body>
<table cellpadding=6>
<tr>
<th colspan=3>SORTIR KELAS 1</th>
</tr>
<tr>
<td>npm</td>
<td>nama</td>
<td>kelas</td>
</tr>
<?php
mysql_connect ("localhost","root","");
mysql_select_db ("sortir_satu_database");

$ambil=mysql_query("SELECT * FROM data_mahasiswa WHERE kelas=1");
while ($kolom_db=mysql_fetch_assoc($ambil))
{
$ambil_npm=$kolom_db['npm'];
$ambil_nama=$kolom_db['nama'];
$ambil_kelas=$kolom_db['kelas'];

echo "
<tr>
<td>$ambil_npm </td>
<td>$ambil_nama </td>
<td>$ambil_kelas </td>
</tr>
";
}
?>
</table>

<table cellpadding=6>
<tr>
<th colspan=3>SORTIR KELAS 2</th>
</tr>
<tr>
<td>npm</td>
<td>nama</td>
<td>kelas</td>
</tr>
<?php
mysql_connect ("localhost","root","");
mysql_select_db ("sortir_satu_database");

$ambil=mysql_query("SELECT * FROM data_mahasiswa WHERE kelas=2");
while ($kolom_db=mysql_fetch_assoc($ambil))
{
$ambil_npm=$kolom_db['npm'];
$ambil_nama=$kolom_db['nama'];
$ambil_kelas=$kolom_db['kelas'];

echo "
<tr>
<td>$ambil_npm </td>
<td>$ambil_nama </td>
<td>$ambil_kelas </td>
</tr>
";
}
?>
</table>

<table cellpadding=6>
<tr>
<th colspan=3>SORTIR KELAS 3</th>
</tr>
<tr>
<td>npm</td>
<td>nama</td>
<td>kelas</td>
</tr>
<?php
mysql_connect ("localhost","root","");
mysql_select_db ("sortir_satu_database");

$ambil=mysql_query("SELECT * FROM data_mahasiswa WHERE kelas=3");
while ($kolom_db=mysql_fetch_assoc($ambil))
{
$ambil_npm=$kolom_db['npm'];
$ambil_nama=$kolom_db['nama'];
$ambil_kelas=$kolom_db['kelas'];

echo "
<tr>
<td>$ambil_npm </td>
<td>$ambil_nama </td>
<td>$ambil_kelas </td>
</tr>
";
}
?>
</table>
</body>
</html>

selesai. download source demo

Template oleh : meong-meoooong | Blogger
username
password