latihan aplikasi pertamaku - sakuriw.files.wordpress.com filelatihan aplikasi pertamaku...

Latihan Aplikasi Pertamaku

Alhamdulillahirobbil 'alamin, akhirnya aku bisa menyelesaikan Latihan Aplikasiku yang pertama. Aplikasi latihanku ini berfungsi untuk pengentrian data, pengeditan data dan pencarian data dalam database.

Sebelum kita mengoperasikan program ini ada beberapa software yang diperlukan, penulis menggunakan beberapa software yaitu :

1. Bluefish 1.0.72. PHP version 5.2.63. xampp for linux 1.6.74. Apache5. firefox

Dalam menjalankan program ini ada beberapa file yang mesti di jalankan terlebih dahulu. Adapun file yang dimaksud adalah :

1. File query_buat.php file ini terletak di direktori /data_siswa/lihat/ kita bisa menjalankannya

dengan perintah http://localhost/data_siswa/lihat/query_buat.php file ini berfungsi untuk membuat database dan tabel siswa.

2. File tabel_login.php Terletak di direktori /data_siswa/lihat dan dapat dijalankan dengan perintah

http://localhost/data_siswa/lihat/tabel_login.php berfungsi untuk membutat tabel login.

Setelah database dan kedua tabel diatas terbentuk barulah kita dapat melakukan pengentrian.

Adapun tampilan halaman depan adalah :

1

http://localhost/data_siswa/lihat/query_buat.php

http://localhost/data_siswa/lihat/tabel_login.php

Untuk membuat halaman seperti di atas diperlukan skrip sebagai berikut :

file index.php

<!DOCTYPE html

PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en-US">

<head profile="http://www.w3.org/2005/10/profile">

<link rel="icon"

type="image/png"

href="http://localhost/data_siswa/gbr/12.jpg">

<title>[email protected]</title>

<link href="http://localhost/data_siswa/pelengkap/all.css"1 rel="stylesheet" type="text/css"/>

</head>

<body>

<div id="header">

<a href="http://localhost/data_siswa/index.php"><input type="submit" class="submit" name="Daftar" value="Home"></a>

<a href="http://localhost/data_siswa/entri/ent_mah_com.php"><input type="submit" class="submit" name="Daftar" value="Entri Data"></a>

<a href="http://localhost/data_siswa/login/login.html"><input type="submit" class="submit" name="Daftar" value="Edit Data"></a>

<a href="http://localhost/data_siswa/lihat/search.php"><input type="submit" class="submit" name="Daftar" value="Pencarian Data"></a>

<a href="http://localhost/data_siswa/lihat/data_rows.php"><input type="submit" class="submit" name="Daftar" value="Lihat Data

2

Mahasiswa "></a>

<p class="judul_header_kecil">Ahlan Wasahlan fi</p>

<h1 class="judul_header_besar">[email protected]</h1>

<p class="judul_header_kecil">"Isykariiman Aumut Syahiidan"</p>

</div>

<div id="nav_left">

<img src="http://localhost/data_siswa/gbr/logos.jpg" width="150" height="55" border="0" alt="">

</div>

<div id="nav_left_link">

<div id="stylelink">

<?php

print date('j F Y');

?>

<br>

<span class="menu_caption">Main Menu </span><br/>

<ul>

<li><a href="http://localhost/data_siswa/index.php">Home</a></li>

<li><a href="http://localhost/data_siswa/entri/ent_mah_com.php"> Entri Data</a></li>

<li><a href="http://localhost/data_siswa/login/login.html">Edit Data</a></li>

<li><a href="http://localhost/data_siswa/lihat/search.php">Pencarian Data</a></li>

<li><a href="http://localhost/data_siswa/lihat/data_rows.php">Lihat Data Mahasiswa</a></li>

3

http://localhost/data_siswa/lihat/data_rows.php

http://localhost/data_siswa/lihat/search.php

http://localhost/data_siswa/login/login.html

http://localhost/data_siswa/entri/ent_mah_com.php

</ul>

<img src="http://localhost/data_siswa/gbr/hi.gif" width="150" height="60" border="0" >

</ul>

</div>

</div>

<div id="box_isi"><div align="center">

<?php

$file = fopen("counter.txt","r");

$hitung = fread($file,filesize("counter.txt"));

$hitung++;

echo "Anda pengunjung ke : <br>";

echo "<b><blink>";

echo substr("000000",0,6-strlen($hitung)).$hitung;

echo "</b></blink>";

fclose($file);

$file=fopen("counter.txt","w");

fwrite($file,$hitung);

fclose($file);

?><br><br>

<table align=center border="0">

<tr valign='bottom'><td><img src="gbr/pai.jpg" width="50" height="45" border="0" ></td>

<td><img src="gbr/pat.jpg" width="380" height="45"

4

border="0"></td>

<td><img src="gbr/paa.jpg" width="50" height="45" border="0" ></td></tr>

<tr><td><img src="gbr/pti.jpg" width="50" height="210" border="0" ></td>

<td><img src='gbr/sma.JPG' align='center' width='380' title='Kenangan SMA 3 IPA 1 Larangan Brebes' height='210' border='0'></td>

<td><img src="gbr/pta.jpg" width="50" height="210" border="0" ></td></tr>

<tr valign='top'><td><img src="gbr/pbi.jpg" width="50" height="45" border="0" ></td>

<td><img src="gbr/pat.jpg" width="380" height="45" border="0" ></td>

<td><img src="gbr/pba.jpg" width="50" height="45" border="0" ></td></tr>

</table></div></div></div>

</body>

</html>

File counter.txt Pada file ini kita hanya mengisikan angka diatas angka 0 yaitu 1

File all.css /* #############################################

judul : zambigoak.indo.tc

author : bch.zambigoak.bja

date : Juli 2008

###############################################

*/

/* medefinisikan header untuk bagian atas */

#header {

5

position: static;

height: 110px;

width: 98%;

/* banner */

background-image: url("http://localhost/data_siswa/gbr/net.jpg");

padding-top: 3%;

padding-right: 2%;

padding-bottom: 2%:

padding-left: 4%;

line-height: 0em;

left: 50px;

right: 50px;

}

/* tulisan assalamualaikum */

.judul_header_kecil {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 1em;

color: #00FF00;

letter-spacing: 1em;

padding-left:70px;

align: center;

}

/* tulisan zambigoak */

.judul_header_besar {


6

font-size: 2em;

color: #f4d8a6;

letter-spacing: 0.5em;/*spasi*/

text-decoration: line-through;

padding-left:70px;

}

#footer{

position: static;

height: 90px;

width: 100%;

/* banner */

background-color: #132500;

padding-top: 2%;

padding-right: 2%;

padding-bottom: 2%:

padding-left: 4%;

line-height: 0em;

left: 50px;

right: 50px;

}

7

.footer_kecil {

font-family: urw chancery l;

font-size: 1em;

color: #00FF00;

letter-spacing: 0.3em;

text-align : center;

}

/* ############################################# */

/* mendevinikasikan navigasi bagian kanan */

/* kotak luar go */

#nav_left {

background-color:#6F6F6F;

height: 60px;

width: 170px;

line-height: 0.1;

padding: 0.5em;

border-bottom-width: 6px;

border-bottom-style: solid;

border-bottom-color: #aaaa;

}

/* background main menu*/

#nav_left_link {

background-color: #867963;

8

height: 300px;

width: 170px;

padding: 0.5em;



border-bottom-color: #aafdaa;

}

#nav_left_menu_caption {

background-color: blue;

height: 20px;

width: 170px;

padding: 0.5em;



border-bottom-color: red;

}

/* tulisan menu */

.menu_caption {


font-size: 1em;

color: #fff;

text-align: center;

vertical-align: middle;

9

}

#stylelink a:link, #stylelink a:visited {

display: block;

border-top: 1px solid white;/* baris pada menu */

border-bottom: 1px solid blue;/* baris pada menu */

background-color:#84703F;/* background pada home */

font-weight: italic;/* bentuk tulisan home tebal atau lainnya*/

color: #EBE2E2;/* warna tulisan home */

width: 100px;

padding-top: 0px;

padding-right: 0px;

padding-bottom: 3px;

padding-left: 10px;

text-decoration: none;

}

#stylelink a:hover {

border-top: 1px solid blue;

background-color:#EEB348;

background-image: none;

font-weight: bold;

text-decoration: none;

color: #red;

}

/* mengubah style pada text box cari */

.txt_cari {


10

font-size: 12px;

color: blue;/* warna tulisan */

background-color: #ffffff;/* warna kotak text */

height: 20px;

width: 100px;

border: 3px dotted grey;/*border kotak */

}

/* mengubah botton cari */

.bt_cari {

background-color: #c6c3b1;/* warna kotak */


font-weight: bold;

color: #8B6914;/* tulisan go */

}

/* mendevinisikan bagian bawah tau heder */

#bawah {

background-color:#e5f4z6 ;/* warna kotak bawah */

height: 75px;

width: 90%;

padding-right: 2em;

padding-left: 4em;

padding-top: 1em:

padding-bottom: 1em;

vertical-align: none;

}

11

.copyright_bawah {


font-size: 16px;

font-family: urw chancery l;

color: #333666;/* tulisan di kotak bawah */

text-align: center;

}

/*###############################################*/

/*mendefikasikan bagian isi atau cointen yang ada di tengah*/

/* garis berdiri */

#box_isi {

position: absolute;

height: auto;

width:75%;

left: 204px;

top: 150px;

padding: 1em;

border-left-width: 3px;

border-left-style: double;

border-left-color: #d3d4aa;

border-right-width: 3px;

border-right-style: double;

border-right-color: #d3d4aa;

}

12

.hurup_besar_isi {


font-size: 4em;

font-weight: bold;

color: #8B6914;

float: left;

padding-top: 0.1em;

padding-right: 0.1em;

padding-bottom: 0.1em:

padding-left: 0.1em;

text-align: center;

}

.isi {


font-size: 1.2em;

color: #000;/* warna tulisan isi */

line-height: 2em;

text-align: justify;

vertical-align: none;

}

/*bacground utama*/

body {


background-color: #AaaA9A;

margin: auto;

13

padding: 0.2em;

}

.submit{

background-color: #c7d8b4;

border: 2px dotted #a5b5b2;

text-decoration: underline;

font-weight: bolder;

color: #8B6914;

}

p {


font-size: 10px;

}

14

Keterangan :File all.css ini akan digunakan dalam file – file yang lain

Halaman Entri Data

Skrip yang dibutuhkan

● File ent_mah_com.php

<!DOCTYPE html



<html lang="en-US">


<link rel="icon"

type="image/png"




</head>

15

<body>

<div id="header">





<a href="http://localhost/data_siswa/lihat/data_rows.php"><input type="submit" class="submit" name="Daftar" value="Lihat Data Mahasiswa "></a>




</div>

<div id="nav_left">


</div>



<?php


16


http://localhost/data_siswa/index.php

?><br>


<ul>


<li><a href="http://localhost/data_siswa/entri/ent_mah_com.php">Entri Data</a></li>




</ul>


</ul>

</div>

</div>

<div id="box_isi">

<form action="ent_sim.php" method="post" target="_self" name="form1">

<table cellpadding="2" cellspacing="2" border="0" align="center" width="400">

<tr >

<td colspan="2" align="center"><b><h3>Entry Data Mahasiswa</h3></b></td>

</tr>

<tr>

<td width="89">NIM</td>

17





<td width="311"><input type="text" name="nim" size="25" maxlength="35"></td>

</tr>

<tr>

<td>Nama</td>

<td><input type="text" name="nama" size="25" maxlength="35"></td>

</tr>

<tr>

<td>Alamat</td>

<td><input type="text" name="alamat" size="25" maxlength="35"></td>

</tr>

<tr>

<td>Prop_Asal</td>

<td><input type="text" name="prop_asal" size="25" maxlength="35"></td>

</tr>

<tr>

<td>SMU Asal</td>

<td><input type="text" name="smu_asal" size="25" maxlength="35"></td>

</tr>

<tr>

<td>Jurusan</td>

<td><input type="text" name="jurusan" size="25" maxlength="35"></td>

</tr>

18

<tr>

<td>Angkatan</td>

<td><input type="text" name="angkatan" size="25" maxlength="35"></td>

</tr>

<tr>

<td></td>

<td><input type="submit" name="simpan" value="Simpan"></td>

</tr>

</table>

</form>

</body>

</html>

● File ent_sim.php

<!DOCTYPE html



<html lang="en-US">


<link rel="icon"

type="image/png"




</head>

19

<body>

<div id="header">









</div>

<div id="nav_left">


</div>



<?php


20


?><br>


<ul>


<li><a href="http://localhost/data_siswa/entri/ent_mah_com.php">Entri Data</a></li>




</ul>


</ul>

</div>

</div>

<div id="box_isi">

<?php

$koneksi=mysql_connect("localhost", "root", "")

or die ("Gagal koneksi");

mysql_select_db(comp, $koneksi)

or die ("Gagal pilih database");

$sql_input="INSERT INTO siswa (nim,nama,alamat,prop_asal,smu_asal,jurusan,angkatan)

21





VALUES ('$nim','$nama','$alamat','$prop_asal','$smu_asal','$jurusan','$angkatan')";

mysql_query($sql_input, $koneksi)

or die ("Gagal koneksi".mysql_error());

echo "<b>Data yang berhasil dimasukan</b><br>";

echo "NIM : $nim<br>";

echo "Nama : $nama<br>";

echo "Alamat : $alamat<br>";

echo "Prop_Asal : $prop_asal<br>";

echo "SMU Asal : $smu_asal<br>";

echo "Jurusan : $jurusan<br>";

echo "Angkatan : $angkatan<br>";

?>

<a href="ent_mah_com.php">Kembali</a>

</div></div>

</body>

</html>

22

Edit Data

Sebelum kita masuk ke halaman peng-editan kita akan menemui halaman login terlebih dahulu sebagai pengamanan.

Adapun skrip yang dibutuhkan adalah :● File login.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="en-US"><head profile="http://www.w3.org/2005/10/profile"><link rel="icon" type="image/png" href="http://localhost/data_siswa/gbr/12.jpg"><title>[email protected]</title><link href="http://localhost/data_siswa/pelengkap/all.css"1

rel="stylesheet" type="text/css"/></head><

<body><div id="header"> &nbsp

; <a href="http://localhost/data_siswa/index.php"><input

type="submit" class="submit" name="Daftar" value="Home"></a>

23

<a href="http://localhost/data_siswa/entri/ent_mah_com.php"><input type="submit" class="submit" name="Daftar" value="Entri

Data"></a><a href="http://localhost/data_siswa/login.html"><input

type="submit" class="submit" name="Daftar" value="Edit Data"></a>



<p class="judul_header_kecil">Ahlan Wasahlan fi</p><h1 class="judul_header_besar">[email protected]</h1><p class="judul_header_kecil">"Isykariiman Aumut Syahiidan"</p></div><div id="nav_left"><img src="http://localhost/data_siswa/gbr/logos.jpg" width="150"

height="55" border="0" alt=""></div><

<div id="nav_left_link"><div id="stylelink"><

<span class="menu_caption">Main Menu </span><br/><ul><li><a href="http://localhost/data_siswa/index.php">Home</a></li><li><a href="http://localhost/data_siswa/entri/ent_mah_com.php">

Entri Data</a></li><li><a href="http://localhost/data_siswa/login/login.html">

Edit Data</a></li><li><a href="http://localhost/data_siswa/lihat/search.php">

Pencarian Data</a></li><li><a href="http://localhost/data_siswa/lihat/data_rows.php">

Lihat Data Mahasiswa</a></li></ul><img src="http://localhost/data_siswa/gbr/hi.gif" width="150"

height="60" border="0" ></ul></div></div><

<div id="box_isi"><table border=0 align=center><form method=post action=cek.php><tr><td colspan='2' align='center'><img src="../gbr/user.jpg"

width="200" height="160" border="0" alt=""></td></tr><tr><td>Username</td>

<td><input type=text name=username></tr><tr><td>Password</td>

<td><input type=password name=password></tr>

24






<tr><td></td> <td><input type=submit name=submit value=Login></tr>

</form></table></div></div></div> </body></html>

● File cek.php● File config.php● File main.php● File Logout.php

Keempat file di atas dapat diambil pada file Pendataan.zip

Cari Data

Digunakan untuk mencari data yang tersimpan pada database.

Skrip yang dibutuhkan adalah :

● search.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="en-US"><head profile="http://www.w3.org/2005/10/profile"><link rel="icon" type="image/png"

25

href="http://localhost/data_siswa/gbr/12.jpg"><title>[email protected]</title><link href="http://localhost/data_siswa/pelengkap/all.css"1


<body><div id="header">

<a href="http://localhost/data_siswa/index.php"><input

type="submit" class="submit" name="Daftar" value="Home"></a><a href="http://localhost/data_siswa/entri/ent_mah_com.php"><input

type="submit" class="submit" name="Daftar" value="Entri Data"></a>




<p class="judul_header_kecil">Ahlan Wasahlan fi</p><h1 class="judul_header_besar">[email protected]</h1><p class="judul_header_kecil">"Isykariiman Aumut Syahiidan"</p></div><div id="nav_left"><img src="http://localhost/data_siswa/gbr/logos.jpg" width="150"

height="55" border="0" alt=""></div><

<div id="nav_left_link"><div id="stylelink"><?phpprint date('j F Y');?><br><span class="menu_caption">Main Menu </span><br/><ul><li><a href="http://localhost/data_siswa/index.php">Home</a></li><li><a href="http://localhost/data_siswa/entri/ent_mah_com.php">

Entri Data</a></li><li><a href="http://localhost/data_siswa/login/login.html">

Edit Data</a></li><li><a href="http://localhost/data_siswa/lihat/search.php">

Pencarian Data</a></li><li><a href="http://localhost/data_siswa/lihat/data_rows.php">

Lihat Data Mahasiswa</a></li></ul><img src="http://localhost/data_siswa/gbr/hi.gif" width="150"

height="60" border="0" >

26






</ul></div></div><

<div id="box_isi"><?php // cek apakah kondisi form terkirim atau tidak if (!$cari) { // jika form tidak dalam kondisi terkirim, // tampilkan form pencarian nama ?> <center> <form action="<?php echo $PHP_SELF ?>" method="POST"> <font size=5>Pencarian Data Anggota Sakura.Comp</font> <p> <h4>Masukkan nama yang dicari :</h4> <p> <input type="text" name="form_nama" size="30" maxlength="50"> <input type="submit" name="cari" value=" Cari Data "> </form> </center> <?php } else { // jika form dalam kondisi terkirim, // lakukan pencarian dan tampilkan hasilnya // ambil variabel untuk koneksi basis data require("koneksi.php"); // tentukan query dan kriteria pencarian $query = "SELECT * FROM siswa WHERE NAMA LIKE

'%$form_nama%'"; // lakukan proses query $hasil = mysql_db_query($db,$query,$koneksi); // cek apakah pencarian ada hasilnya $jml_rec = mysql_num_rows($hasil); if (!$jml_rec) { // jika pencarian tidak ada hasilnya, // tampilkan pesan gagal ?> <center> <font size=5>Nama Anggota tidak ditemukan!</font><p> <a href="<?php echo $PHP_SELF?>">Klik di sini untuk kembali</a> </center> <?php } else

27

{ // jika pencarian memberikan hasil, // tampilkan dalam halaman html // membuat tabel untuk menampilkan hasil pencarian echo "<font size=5>Hasil Pencarian ". "Ditemukan $jml_rec Data</font><br>\n"; echo "<table border=1 cellpadding=1 cellspacing=0>\n"; echo "<tr>\n"; echo "<td>NIM</td>\n"; echo "<td>Nama</td>\n"; echo "<td>Alamat</td>\n"; echo "<td>Prop_Asal</td>\n"; echo "<td>SMU Asal</td>\n"; echo "<td>Jurusan</td>\n"; echo "<td>Angkatan</td>\n"; echo "</tr>\n"; // gunakan perulangan while // perulangan akan terjadi sepanjang masih // ditemukan record while (list($nim,$nama,$alamat,$prop_asal,$smu_asal,

$jurusan,$angkatan) = mysql_fetch_row($hasil))

{ // modifikasi beberapa variabel hasil // mysql_fetch_row() $prop_asal = $prop_asal; $angkatan = $angkatan; // format dalam baris dan kolom tabel echo "<tr>\n"; echo "<td>$nim</td>\n"; echo "<td>"; echo "$nama"; echo "</td>\n"; echo "<td>$alamat</td>\n"; echo "<td>$prop_asal</td>\n"; echo "<td>$smu_asal</td>\n"; echo "<td>$jurusan</td>\n"; echo "<td>$angkatan</td>\n"; echo "</tr>\n"; } echo "</table>\n"; echo "<p>\n"; echo "<a href=$PHP_SELF>Klik di sini ". "untuk kembali</a>\n"; // bebaskan memori yang digunakan untuk proses mysql_free_result($hasil); } }?></div></p></div>

28

</body></html>

● File koneksi.php ada di Pendataan.zip

Lihat Data

● File data_rows.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="en-US"><head profile="http://www.w3.org/2005/10/profile"><link rel="icon" type="image/png" href="http://localhost/data_siswa/gbr/12.jpg"><title>[email protected]</title><link href="http://localhost/data_siswa/pelengkap/all.css"1


<body><div id="header">

<a href="http://localhost/data_siswa/index.php"><input

type="submit" class="submit" name="Daftar" value="Home"></a><a href="http://localhost/data_siswa/entri/ent_mah_com.php"><input

type="submit" class="submit" name="Daftar" value="Entri

29

Data"></a><a href="http://localhost/data_siswa/login/login.html"><input

type="submit" class="submit" name="Daftar" value="Edit Data"></a>



<p class="judul_header_kecil">Ahlan Wasahlan fi</p><h1 class="judul_header_besar">[email protected]</h1><p class="judul_header_kecil">"Isykariiman Aumut Syahiidan"</p></div><

<?php$namahost="localhost";$namauser="root";$password="";$

$namadbs="comp";$

$koneksi = mysql_connect($namahost, $namauser, $password)or die ("Gagal koneksi".mysql_error());o

mysql_select_db($namadbs, $koneksi) or die ("Gagal pilih database".nysql_error());d

//seleksi data$hasil=mysql_query ("SELECT * FROM siswa ORDER BY nim")or die ("Gagal query".mysql_error());o

//mengkondisikan data ada atau tidak adaif (mysql_num_rows($hasil) >0){//apabila adaprint date('j F Y');echo "<table width=1000 cellpadding=0 border=1>";echo "<tr>";echo "<td colspan=7 align=center bgcolor='#cccccc'><b>Daftar Mahasiswa</b></td>";echo "</tr>";echo "<tr align=center bgcolor='#ccccaa'>";

echo "<td><b>NIM</b></td>";echo "<td> <b>Nama</b></td>";echo "<td><b>Alamat</b></td>";echo "<td><b>Prop_Asal</b></td>";echo "<td><b>SMU Asal</b></td>";echo "<td><b>Jurusan</b></td>";echo "<td><b>Angkatan</b></td>";echo "</tr>";

30


3

//menampilkan isi datawhile($baris = mysql_fetch_row($hasil))

{//menampilkan data berdasarkan nomor baris kolomnyaecho "<tr align=center>";echo "<td> $baris[0] </td>";echo "<td> $baris[1] </td>";echo "<td> $baris[2] </td>";echo "<td> $baris[3] </td>";echo "<td> $baris[4] </td>";echo "<td> $baris[5] </td>";echo "<td> $baris[6] </td>";echo "</tr>";

}echo "</table>";

}else{echo "Pada tabel siswa, data kosong";e

//menutup koneksimysql_close($koneksi);exit();}}

//menutup koneksi untuk menampilkan datamysql_free_result($hasil);mysql_close($koneksi);?></body></html>

31

Untuk lebih lengkapnya bisa download file Pendataan.zip

latihan aplikasi pertamaku - sakuriw.files.wordpress.com filelatihan aplikasi pertamaku...

Documents