Blog Tugas: Mei 2013

Pada postingan saya kali ini saya akan membuat sebuah program html sederhana, kali ini saya memuat program neraca perubahan pada html, demikiankah source codenya. semoga bermanfaat.

<html>
<head>
<title>Neraca Perubahan</title>

<script type="text/javascript">
function sum(){
var num1 = document.myform.angka1.value;
var num2 = document.myform.angka2.value;
if (num2 > num1) {
var sum = parseInt(num2) - parseInt(num1);
var sam = 0;
document.getElementById('add').value = sum;
document.getElementById('add1').value = sam;}
else{
var sam = parseInt(num1) - parseInt(num2);
var sum = 0;
document.getElementById('add').value = sum;
document.getElementById('add1').value = sam;}

var num3 = document.myform.angka3.value;
var num4 = document.myform.angka4.value;
if (num4 > num3) {
var sum1 = parseInt(num4) - parseInt(num3);
var sam1 = 0;
document.getElementById('add2').value = sum1;
document.getElementById('add3').value = sam1;}
else{
var sam1 = parseInt(num3) - parseInt(num4);
var sum1 = 0;
document.getElementById('add2').value = sum1;
document.getElementById('add3').value = sam1;}

var num5 = document.myform.angka5.value;
var num6 = document.myform.angka6.value;
if (num6 > num5) {
var sum2 = parseInt(num6) - parseInt(num5);
var sam2 = 0;
document.getElementById('add4').value = sum2;
document.getElementById('add5').value = sam2;}
else{
var sam2 = parseInt(num5) - parseInt(num6);
var sum2 = 0;
document.getElementById('add4').value = sum2;
document.getElementById('add5').value = sam2;}

var num7 = document.myform.angka7.value;
var num8 = document.myform.angka8.value;
if (num8 > num7) {
var sum3 = parseInt(num8) - parseInt(num7);
var sam3 = 0;
document.getElementById('add6').value = sum3;
document.getElementById('add7').value = sam3;}
else{
var sam3 = parseInt(num7) - parseInt(num8);
var sum3 = 0;
document.getElementById('add6').value = sum3;
document.getElementById('add7').value = sam3;}

var num9 = document.myform.angka9.value;
var num10 = document.myform.angka10.value;
if (num10 > num9) {
var sum4 = parseInt(num10) - parseInt(num9);
var sam4 = 0;
document.getElementById('add8').value = sum4;
document.getElementById('add9').value = sam4;}
else{
var sam4 = parseInt(num9) - parseInt(num10);
var sum4 = 0;
document.getElementById('add8').value = sum4;
document.getElementById('add9').value = sam4;}

var num11 = document.myform.angka11.value;
var num12 = document.myform.angka12.value;
if (num12 > num11) {
var sum5 = parseInt(num12) - parseInt(num11);
var sam5 = 0;
document.getElementById('add10').value = sum5;
document.getElementById('add11').value = sam5;}
else{
var sam5 = parseInt(num11) - parseInt(num12);
var sum5 = 0;
document.getElementById('add10').value = sum5;
document.getElementById('add11').value = sam5;}

var num13 = document.myform.angka13.value;
var num14 = document.myform.angka14.value;
if (num14 > num13) {
var sam6 = parseInt(num14) - parseInt(num13);
var sum6 = 0;
document.getElementById('add12').value = sum6;
document.getElementById('add13').value = sam6;}
else{
var sum6 = parseInt(num13) - parseInt(num14);
var sam6 = 0;
document.getElementById('add12').value = sum6;
document.getElementById('add13').value = sam6;}

var num15 = document.myform.angka15.value;
var num16 = document.myform.angka16.value;
if (num16 > num15) {
var sum7 = parseInt(num16) - parseInt(num15);
var sam7 = 0;
document.getElementById('add14').value = sum7;
document.getElementById('add15').value = sam7;}
else{
var sam7 = parseInt(num15) - parseInt(num16);
var sum7 = 0;
document.getElementById('add14').value = sum7;
document.getElementById('add15').value = sam7;}

var num17 = document.myform.angka17.value;
var num18 = document.myform.angka18.value;
if (num18 > num17) {
var sam8 = parseInt(num18) - parseInt(num17);
var sum8 = 0;
document.getElementById('add16').value = sum8;
document.getElementById('add17').value = sam8;}
else{
var sum8 = parseInt(num17) - parseInt(num18);
var sam8 = 0;
document.getElementById('add16').value = sum8;
document.getElementById('add17').value = sam8;}

var num19 = document.myform.angka19.value;
var num20 = document.myform.angka20.value;
if (num20 > num19) {
var sum9 = parseInt(num20) - parseInt(num19);
var sam9 = 0;
document.getElementById('add18').value = sum9;
document.getElementById('add19').value = sam9;}
else{
var sam9 = parseInt(num19) - parseInt(num20);
var sum9 = 0;
document.getElementById('add18').value = sum9;
document.getElementById('add19').value = sam9;}

var sum10 = parseInt(num1) + parseInt(num3) + parseInt(num5) + parseInt(num7) + parseInt(num9) + parseInt(num11) - parseInt(num13) + parseInt(num15) - parseInt(num17) + parseInt(num19);
var sam10 = parseInt(num2) + parseInt(num4) + parseInt(num6) + parseInt(num8) + parseInt(num10) + parseInt(num12) - parseInt(num14) + parseInt(num16) - parseInt(num18) + parseInt(num20);;
document.getElementById('add20').value = sum10;
document.getElementById('add21').value = sam10;

var num23 = document.myform.angka23.value;
var num24 = document.myform.angka24.value;
if (num24 > num23) {
var sam11 = parseInt(num24) - parseInt(num23);
var sum11 = 0;
document.getElementById('add22').value = sum11;
document.getElementById('add23').value = sam11;}
else{
var sum11 = parseInt(num23) - parseInt(num24);
var sam11 = 0;
document.getElementById('add22').value = sum11;
document.getElementById('add23').value = sam11;}

var num25 = document.myform.angka25.value;
var num26 = document.myform.angka26.value;
if (num26 > num25) {
var sam12 = parseInt(num26) - parseInt(num25);
var sum12 = 0;
document.getElementById('add24').value = sum12;
document.getElementById('add25').value = sam12;}
else{
var sum12 = parseInt(num25) - parseInt(num26);
var sam12 = 0;
document.getElementById('add24').value = sum12;
document.getElementById('add25').value = sam12;}

var num27 = document.myform.angka27.value;
var num28 = document.myform.angka28.value;
if (num28 > num27) {
var sam13 = parseInt(num28) - parseInt(num27);
var sum13 = 0;
document.getElementById('add26').value = sum13;
document.getElementById('add27').value = sam13;}
else{
var sum13 = parseInt(num27) - parseInt(num28);
var sam13 = 0;
document.getElementById('add26').value = sum13;
document.getElementById('add27').value = sam13;}

var num29 = document.myform.angka29.value;
var num30 = document.myform.angka30.value;
if (num30 > num29) {
var sam14 = parseInt(num30) - parseInt(num29);
var sum14 = 0;
document.getElementById('add28').value = sum14;
document.getElementById('add29').value = sam14;}
else{
var sum14 = parseInt(num29) - parseInt(num30);
var sam14 = 0;
document.getElementById('add28').value = sum14;
document.getElementById('add29').value = sam14;}

var num31 = document.myform.angka31.value;
var num32 = document.myform.angka32.value;
if (num32 > num31) {
var sam15 = parseInt(num32) - parseInt(num31);
var sum15 = 0;
document.getElementById('add30').value = sum15;
document.getElementById('add31').value = sam15;}
else{
var sum15 = parseInt(num31) - parseInt(num32);
var sam15 = 0;
document.getElementById('add30').value = sum15;
document.getElementById('add31').value = sam15;}

var num33 = document.myform.angka33.value;
var num34 = document.myform.angka34.value;
if (num34 > num33) {
var sam16 = parseInt(num34) - parseInt(num33);
var sum16 = 0;
document.getElementById('add32').value = sum16;
document.getElementById('add33').value = sam16;}
else{
var sum16 = parseInt(num33) - parseInt(num34);
var sam16 = 0;
document.getElementById('add32').value = sum16;
document.getElementById('add33').value = sam16;}

var sum17 = parseInt(num23) + parseInt(num25) + parseInt(num27) + parseInt(num29) + parseInt(num31) + parseInt(num33);
var sam17 = parseInt(num24) + parseInt(num26) + parseInt(num28) + parseInt(num30) + parseInt(num32) + parseInt(num34);
document.getElementById('add34').value = sum17;
document.getElementById('add35').value = sam17;

var sum19 = parseInt(sum) + parseInt(sum1) + parseInt(sum2) + parseInt(sum3) + parseInt(sum4) + parseInt(sum5) + parseInt(sum6) + parseInt(sum7) + parseInt(sum8) + parseInt(sum9);
var sam19 = parseInt(sam) + parseInt(sam1) + parseInt(sam2) + parseInt(sam3) + parseInt(sam4) + parseInt(sam5) + parseInt(sam6) + parseInt(sam7) + parseInt(sam8) + parseInt(sam9);

var sam20 = parseInt(sam11) + parseInt(sam12) + parseInt(sam13) + parseInt(sam14) + parseInt(sam15) + parseInt(sam16);
var sum20 = parseInt(sum11) + parseInt(sum12) + parseInt(sum13) + parseInt(sum14) + parseInt(sum15) + parseInt(sum16);

var sum18 = parseInt(sum19) + parseInt(sum20);
var sam18 = parseInt(sam19) + parseInt(sam20);
document.getElementById('add36').value = sum18;
document.getElementById('add37').value = sam18;

}
</script>
</head>
<body bgcolor = "red";>
<FORM NAME="myform">
<h1><b><center>Neraca Perubahan</center></b></h1>
<br></br>
<table border="1">
<tr>
<td><center>Keterangan</center></td>
<td><center>Data Lama</center></td>
<td><center>Data Baru</center></td>
<td><center>Debit</center></td>
<td><center>Kredit</center></td>
</tr>
<tr>
<td><b>Aktifa</b></td>
</tr>
<tr>
<td>   Kas</td>
<td>Rp.<input type = "text" name = "angka1"></td>
<td>Rp.<input type = "text" name = "angka2"></td>
<td>Rp.<input type = "text" id = "add" name = "debit" value= ""></td>
<td>Rp.<input type = "text" id = "add1" name = "kredit" value= ""></td>
</tr>
<tr>
<td>   Efek</td>
<td>Rp.<input type = "text" name = "angka3"></td>
<td>Rp.<input type = "text" name = "angka4"></td>
<td>Rp.<input type = "text" id = "add2" name = "debit1" value= ""></td>
<td>Rp.<input type = "text" id = "add3" name = "kredit1" value= ""></td>
</tr>
<tr>
<td>   Piutang Dagang</td>
<td>Rp.<input type = "text" name = "angka5"></td>
<td>Rp.<input type = "text" name = "angka6"></td>
<td>Rp.<input type = "text" name = "debit2" id = "add4" value= ""></td>
<td>Rp.<input type = "text" name = "kredit2" id = "add5" value= ""></td>
</tr>
<tr>
<td>   Persediaan</td>
<td>Rp.<input type = "text" name = "angka7"></td>
<td>Rp.<input type = "text" name = "angka8"></td>
<td>Rp.<input type = "text" name = "debit3" id = "add6" value= ""></td>
<td>Rp.<input type = "text" name = "kredit3" id = "add7" value= ""></td>
</tr>
<tr>
<td>   Sewa Bayar Dimuka</td>
<td>Rp.<input type = "text" name = "angka9"></td>
<td>Rp.<input type = "text" name = "angka10"></td>
<td>Rp.<input type = "text" name = "debit4" id = "add8" value= ""></td>
<td>Rp.<input type = "text" name = "kredit4" id = "add9" value= ""></td>
</tr>
<tr>
<td>   Mesin</td>
<td>Rp.<input type = "text" name = "angka11"></td>
<td>Rp.<input type = "text" name = "angka12"></td>
<td>Rp.<input type = "text" name = "debit5" id = "add10" value= ""></td>
<td>Rp.<input type = "text" name = "kredit5" id = "add11" value= ""></td>
</tr>
<tr>
<td>   Akumulasi Depresiasi Mesin</td>
<td>Rp.<input type = "text" name = "angka13"></td>
<td>Rp.<input type = "text" name = "angka14"></td>
<td>Rp.<input type = "text" name = "debit6" id = "add12" value= ""></td>
<td>Rp.<input type = "text" name = "kredit6" id = "add13" value= ""></td>
</tr>
<tr>
<td>   Bangunan</td>
<td>Rp.<input type = "text" name = "angka15"></td>
<td>Rp.<input type = "text" name = "angka16"></td>
<td>Rp.<input type = "text" name = "debit7" id = "add14" value= ""></td>
<td>Rp.<input type = "text" name = "kredit7" id = "add15" value= ""></td>
</tr>
<tr>
<td>   Akumulasi Depresiasi Bangunan</td>
<td>Rp.<input type = "text" name = "angka17"></td>
<td>Rp.<input type = "text" name = "angka18"></td>
<td>Rp.<input type = "text" name = "debit8" id = "add16" value= ""></td>
<td>Rp.<input type = "text" name = "kredit8" id = "add17" value= ""></td>
</tr>
<tr>
<td>   Tanah</td>
<td>Rp.<input type = "text" name = "angka19"></td>
<td>Rp.<input type = "text" name = "angka20"></td>
<td>Rp.<input type = "text" name = "debit9" id = "add18" value= ""></td>
<td>Rp.<input type = "text" name = "kredit9" id = "add19" value= ""></td>
</tr>
<tr>
<td>   Total Aktiva</td>
<td>Rp.<input type = "text" name = "angka21" id = "add20" value= ""></td>
<td>Rp.<input type = "text" name = "angka22" id = "add21" value= ""></td>
</tr>
<tr>
<td><b>Hutang Dan Modal</b></td>
</tr>
<tr>
<td>   Hutang Dagang</td>
<td>Rp.<input type = "text" name = "angka23"></td>
<td>Rp.<input type = "text" name = "angka24"></td>
<td>Rp.<input type = "text" name = "debit10" id = "add22" value= ""></td>
<td>Rp.<input type = "text" name = "kredit10" id = "add23" value= ""></td>
</tr>
<tr>
<td>   Hutang Wesel</td>
<td>Rp.<input type = "text" name = "angka25"></td>
<td>Rp.<input type = "text" name = "angka26"></td>
<td>Rp.<input type = "text" name = "debit11" id = "add24" value= ""></td>
<td>Rp.<input type = "text" name = "kredit11" id = "add25" value= ""></td>
</tr>
<tr>
<td>   Obligasi</td>
<td>Rp.<input type = "text" name = "angka27"></td>
<td>Rp.<input type = "text" name = "angka28"></td>
<td>Rp.<input type = "text" name = "debit12" id = "add26" value= ""></td>
<td>Rp.<input type = "text" name = "kredit12" id = "add27" value= ""></td>
</tr>
<tr>
<td>   Hipotik</td>
<td>Rp.<input type = "text" name = "angka29"></td>
<td>Rp.<input type = "text" name = "angka30"></td>
<td>Rp.<input type = "text" name = "debit13" id = "add28" value= ""></td>
<td>Rp.<input type = "text" name = "kredit13" id = "add29" value= ""></td>
</tr>
<tr>
<td>   Modal Saham</td>
<td>Rp.<input type = "text" name = "angka31"></td>
<td>Rp.<input type = "text" name = "angka32"></td>
<td>Rp.<input type = "text" name = "debit14" id = "add30" value= ""></td>
<td>Rp.<input type = "text" name = "kredit14" id = "add31" value= ""></td>
</tr>
<tr>
<td>   Laba Ditahan</td>
<td>Rp.<input type = "text" name = "angka33"></td>
<td>Rp.<input type = "text" name = "angka34"></td>
<td>Rp.<input type = "text" name = "debit15" id = "add32" value= ""></td>
<td>Rp.<input type = "text" name = "kredit15" id = "add33" value= ""></td>
</tr>
<tr>
<td>   Total Hutang Dan Modal</td>
<td>Rp.<input type = "text" name = "angka35" id = "add34" value= ""></td>
<td>Rp.<input type = "text" name = "angka36" id = "add35" value= ""></td>
<td>Rp.<input type = "text" name = "debit16" id = "add36" value= ""></td>
<td>Rp.<input type = "text" name = "kredit16" id = "add37" value= ""></td>
</tr>
</table>
<tr><INPUT TYPE="button" NAME="button" Value="Process" onClick="sum()"/></tr>
<tr><INPUT TYPE="reset" NAME="ulang" Value="Reset"></tr>
<br></br>
</FORM>
</body>
</html>

1. Download xampp jika anda tidak memilikinya, lalu istall sesuai keterangannya.
2. Lalu buka xampp dan aktifkan Apache dan MySql.
3. Lalu buka browser anda, dan ketikkan localhost/phpmyadmin.
4. Lalu buat sebuah database dengan nama db dan di dalamnya kita buat sebuah table dengan nama mhs.
5. Pada table mhs tersebut kita buat 4 field dengan nama NPM dengan tipe varchar dan memiliki panjang 8, lalu Nama dengan tipe varchar dan memiliki panjang 50, Kelas dengan tipe varchar dan memiliki panjang 50 , dan Pesan dengan tipe varchar dan memiliki panjang 50.
6. Lalu setting NPM sebagai prymary key yang akan digunakan.
7. Lalu buka notepad anda dan ketikkan source code di bawah ini , dan simpan dengan nama index.php.

<html>
<head><title>DataBaseMahasiswa</title></head>
<body>
<FORM NAME="myform" method = "POST" id = "mahasiswa" action = "save.php">
<center><h1>FORM PENGISIAN MAHASISWA</h1></center>
<br></br>
<center><table border = 1>
<tr>
<td>NPM : <input type = "text" name = "npm" value = ""></td></tr><tr>
<td>Nama : <input type = "text" name = "nama" value = ""></td></tr><tr>
<td>Kelas : <select name="kelas">
<option value = 0 selected> Pilih Kelas </option>
<option value = "2IA18"> 2IA18 </option>
<option value = "2IA19"> 2IA19 </option>
<option value = "2IA20"> 2IA20 </option>
<option value = "2IA21"> 2IA21 </option>
<option value = "2IA22"> 2IA22 </option>
<option value = "2IA23"> 2IA23 </option>
<option value = "2IA24"> 2IA24 </option>
<option value = "2IA25"> 2IA25 </option>
</select></td></tr><tr>
<td>Pesan : <textarea size = "50" name = "pesan"></textarea></td></tr>
</table><br></br><tr>
<td><input type = "submit" name = "ok" value = "OK"></td>
<td><input type = "reset" name = "ulang" value = "Reset"></td>
</tr><br></br>
<a href = "data.php">Lihat Data ?</a></center></FORM>
</body>
</html>
Source code di atas digunakan untuk membuat tampilan inputan awal yang akan digunakan untuk menginput data ke database nantinya.
8. Lalu untuk mengesave data ke database ketikkan source code di bawah ini, dan simpan dengan nama save.php.

<?php
include 'index.php';
$host = "localhost";
$user = "root";
$pass = "";
$dbname = "db";
$connect = mysql_connect($host, $user, $pass) or die(mysql_error());
$dbselect = mysql_select_db($dbname);

$npm = $_POST['npm'];
$nama = $_POST['nama'];
$kelas = $_POST['kelas'];
$pesan = $_POST['pesan'];

$query = mysql_query("insert into mhs (NPM, Nama, Kelas, Pesan) values ('$npm', '$nama', '$kelas' , '$pesan')") or die(mysql_error());
?>
9. Lalu untuk membuat koneksi ke database ketikkan source code di bawah ini, dan simpan dengan nama koneksi.php.

<?php
$host = "localhost";
$user = "root";
$pass = "";
$dbname = "db";
$connect = mysql_connect($host, $user, $pass) or die(mysql_error());
$dbselect = mysql_select_db($dbname);
$query = "select * from mhs";
$exe = mysql_query($query);
?>

10. Lalu untuk menampilkan database tersebut ketikkan source code di bawah ini, dan simpan dengan nama data.php.

<head><title>DataBaseMahasiswa</title></head>
<center><h1>DATA MAHASISWA</h1></center>
<br></br>
<table border='1' align='center'>
<tr><th>No</th><th>NPM</th><th>Nama</th><th>Kelas</th><th>Pesan</th><th>Edit</th></tr>
<?php
include 'koneksi.php';
$no = 1;
while($data = mysql_fetch_array($exe)){
?>
<tr>
<td><?php echo $no; ?></td>
<td><?php echo $data['NPM']; ?></td>
<td><?php echo $data['Nama']; ?></td>
<td><?php echo $data['Kelas']; ?></td>
<td><?php echo $data['Pesan']; ?></td>
<td><div align="center"><a href="delete.php?NPM=<?php echo $data['NPM']; ?>">Delete</a> | <a href="edit.php?NPM=<?php echo $data['NPM']; ?>">Edit</a> </div></td></tr>
<?php
$no++;
}
?>
</table>
<br></br>
<center><a href = "index.php">Tambah Lagi ?</a></center>
11. Lalu untuk menghapus data pada database ketik sourcode di bawah ini, dan simpan dengan nama delete.php.
<?php
include 'koneksi.php';
mysql_query("DELETE from mhs WHERE NPM='$_GET[NPM]'");
echo "Data Telah Dihapus<br>
<a href=\"data.php\">Kembali</a>";
?>
12. Lalu untuk mengedit data pada database ketik sourcode di bawah ini, dan simpan dengan nama edit.php.

<?php
$connect = mysql_connect("localhost", "root", "") or die ("Gagal Connect Tuh !!");
mysql_select_db("db") or die ("Gagal Buka DB Tuh !!");
$NPM = $_GET['NPM'];
$query = "select * from mhs where NPM='$NPM'";
$exe = mysql_query($query, $connect) or die("Query Gagal Tuh !!");
$data = mysql_fetch_array($exe);
mysql_close($connect);
?>
<html>
<head><title>Edit Data</title></head>
<body><center><h1>EDIT DATA MAHASISWA</h1></center>
<br></br>
<form name="form1" method="POST" action="update.php">
<table>
<tr>
<td>NPM : </td><td><input type="text" name="NPM" value="<?php echo $data['NPM']; ?>"></td></tr>
<tr><td>Nama : </td><td><input type="text" name="Nama" value="<?php echo $data['Nama']; ?>"></td></tr>
<tr><td>Kelas : </td><td><select name="Kelas">
<option><?php echo $data['Kelas']; ?></option>
<option value = "2IA18"> 2IA18 </option>
<option value = "2IA19"> 2IA19 </option>
<option value = "2IA20"> 2IA20 </option>
<option value = "2IA21"> 2IA21 </option>
<option value = "2IA22"> 2IA22 </option>
<option value = "2IA23"> 2IA23 </option>
<option value = "2IA24"> 2IA24 </option>
<option value = "2IA25"> 2IA25 </option>
</select></td></tr>
<tr><td>Pesan : </td><td><textarea size = "50" name = "Pesan"><?php echo $data['Pesan']; ?></textarea></td></tr>
</table>
<input value="Simpan" type="submit" name="submit"/>
<input type="button" value="Kembali" onClick="self.history.back()">
</form>
</body>
</html>
13. Lalu untuk mengupdate data tersebut ketik sourcode di bawah ini, dan simpan dengan nama update.php.

<?php
include 'koneksi.php';
$NPM = $_POST['NPM'];
$Nama = $_POST['Nama'];
$Kelas = $_POST['Kelas'];
$Pesan = $_POST['Pesan'];
$query = mysql_query("update mhs set Nama='$Nama', Kelas='$Kelas', Pesan='$Pesan' where NPM='$NPM'");
echo "Data Telah Diedit<br>
<a href=\"data.php\">Kembali</a>";
?>
14. Lalu simpan semua file php itu di folder semua dan taruh di xampp/htdocs.
15. Untuk menjalankannya buka browser anda dan ketikkan localhost/semua, lalu klik index.php.
16. Selesai.

Blog Tugas

Selasa, 14 Mei 2013

MEMBUAT NERACA PERUBAHAN PADA HTML

MEMBUAT DATABASE EDIT DAN UPDATE PADA PHP