Membuat Halaman Web Data Mahasiswa pada Satu Halaman

Sobat Berbagi, Kali ini saya akan membagi tutorial untuk membuat halaman web data mahasiswa. Ini saya buat pada satu halaman dengan fitur captcha untuk menambahkan data mahasisa dan data disimpan pada database. Oke, saya akan langsung bagi tutorialnya :

CREATE DATABASE poltek;

Script diatas digunakan untuk membuat database melalui console dengan nama “poltek”.

Selanjutnya buat table mahasiswa dengan field nim, nama, alamat, tanggallahir, notlp dengan query dibawah ini.

CREATE TABLE `mahasiswa` (

`nim` varchar(10) NOT NULL,

`nama` varchar(50) NOT NULL,

`alamat` text NOT NULL,

`tanggallahir` date NOT NULL,

`notlp` varchar(15) NOT NULL,

PRIMARY KEY (`nim`)

);

Kita mulai membuat halama webnya, Sobat Berbagi. Gunakan editor sobat masing-masing disini saya akan berbagai dengan menggunakan Notepad++. Buat file baru dengan tipe php, beri nama data_mahasiswa.php.

<style>

.header{

text-align:center;

background:#993399;

color:#FFF;

height:50px;

padding-top:5px;

}

.tampil{

color:#000;

}

.tampil table{

border-color:#000;

text-decoration:none;

}

.tampil a{

color:#00F;

text-decoration:none;

}

.tampil table a{

color:#00F;

text-decoration:none;

}

.tampil table input{

width:190px;

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

}

.tampil table textarea{

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

}

.captcha{

background:#000;

color:#FFF;

border:none;

font-size:20px;

font-style:inherit;

text-align:center;

}

</style>

Letakkan script diatas pada didalam tag head. Style tersebut ditambahkan untuk merapikan dan memperindah tampilan.

Karena dalam satu halaman, kita buat tag php didalam tag body.

//konfigurasi koneksi

mysql_connect("localhost","root","") or die("Gagal Koneksi...<br>".mysql_error());

mysql_select_db("poltek") or die("Database Tidak Ditemukan...<br>".mysql_error());

Masukkan script diatas yang digunakan untuk menyambungkan dengan database yang kita miliki. “mysql_connect” digunakan agar dapat terhubung dengan database, “mysql_select_db” untuk memilih database yang digunakan.

//fungsi captcha

function mix(){

$c = substr(str_shuffle("1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"),0,6);

return $c;

}

Buat fungsi mix untuk membuat captcha yang akan ditampilkan pada form tambah. Fungsi tersebut akan mengembalikan nilai hasi pengacakkan karakter dengan jumlah 6 karakter.

Kemudian masukkan script php untuk fungsi tombol yang akan digunakan.

//tombol simpan

if(isset($_POST['simpan'])){

$nim = $_POST['nim'];

$nama = $_POST['nama'];

$alamat = $_POST['alamat'];

$tgl = $_POST['tgl'];

$telp = $_POST['telp'];

$c = $_POST['c'];

$cw = $_POST['cw'];

if($cw == $c){

$q = mysql_query("insert into mahasiswa values('$nim','$nama','$alamat','$tgl','$telp')") or die(mysql_error());

}else{

$q = false;

}

if($q){

header("Location:./data_mahasiswa.php?msg=success");

}else{

header("Location:./data_mahasiswa.php?msg=failed");

}

Script php diatas digunakan untuk menangkap data ketika button simpan pada form tambah data diklik. Data akan terlebih dahulu ditampung pada variabel dan untuk dapat menjalankan query simpan perlu dicocokan captcha yang diinputkan. Kemudian jika query berhasil dijalankan msg akan terdapat kata “success” dan jika gaga akan terdapat kata “failed”.

Kemudian diteruskan dengan membuat fungsi untuk tombol kembali.

//tombol kembali

}elseif(isset($_POST['kembali'])){

header("Location:./data_mahasiswa.php");

Script php diatas digunkana ketika tombol “kembali” pada form diklik. Ketika tombol dikluk maka header akan langsung diarahan pada halaman data_mahasiswa.php.

Masih dilanjutkan dengan script diatas kita tambahkan fungsi untuk tombol “edit” pada form edit data.

//tombol edit

}elseif(isset($_POST['edit'])){

$nim = $_POST['nim'];

$nama = $_POST['nama'];

$alamat = $_POST['alamat'];

$tgl = $_POST['tgl'];

$telp = $_POST['telp'];

$q = mysql_query("update mahasiswa set nama='$nama', alamat='$alamat', tanggallahir='$tgl', notlp='$telp' where nim='$nim'") or die(mysql_error());

if($q){

header("Location:./data_mahasiswa.php?msg=success");

}else{

header("Location:./data_mahasiswa.php?msg=failed");

}

Script php diatas digunakan untuk menangkap data ketika button edit pada form edit data diklik. Data akan terlebih dahulu ditampung pada variabel dan kemudian akan langsung diquerykan. Pada form edit ini tidak perlu menggunakan captcha. Kemudian jika query berhasil dijalankan msg akan terdapat kata “success” dan jika gaga akan terdapat kata “failed”.

Lanjutkan dengan aksi delete.

//aksi delete

}elseif(isset($_GET['act']) && $_GET['act']=="delete"){

$nim = $_GET['nim'];

$q = mysql_query("delete from mahasiswa where nim='$nim'");

if($q){

header("Location:./data_mahasiswa.php?msg=success");

}else{

header("Location:./data_mahasiswa.php?msg=failed");

}

Aksi ini akan dapat dijalankan ketika link delete pada tabel diklik, link tersebut akan memberikan parameter nim pada url. Parameter tersebut akan ditangkap pada variabel, dengan variabel tersebut akan dijadikan syarat untuk menghapus data. Kemudian jika query berhasil dijalankan msg akan terdapat kata “success” dan jika gaga akan terdapat kata “failed”.

Selanjutnya kita buat tag baru, keluar dari tag php.

<div class="header">

<font size="5"><u>POLITEKNIK KEDIRI</u></font><br />

Jl. Mayor Bismo No. 27 Kota Kediri

</div>

<hr color="#000" />

Script diatas akan membuat header pada tampilan halaman web.

Kita lanjutkan dengan membuat form tambah data.

Tag php diatas form tambah, akan digunakan untuk memastikan pengguna melakukan klik tambah data. Script berikutnya adalah script dari form tambah barang, pengiriman data dengan menggunkan method post sehingga data tidak akan ditampilkan pada url. Data akan dapat ditangkap oleh aksi simpan pada script php yang dibuat sebelumnya.

<div class="tampil">

<?php

//form tambah data

if(!isset($_GET['act'])){

<form action="" method="post">

<table align="center">

<thead align="center">

<tr><td colspan="3"><u><strong>Tambah Data</strong></u></td></tr>

</thead>

<tbody>

<tr>

<td>NIM</td>

<td>:</td>

<td><input type="text" name="nim" requiered /></td>

</tr>

<tr>

<td>Nama</td>

<td>:</td>

<td><input type="text" name="nama" /></td>

</tr>

<tr>

<td>Alamat</td>

<td>:</td>

<td><textarea type="text" name="alamat" rows="5" cols="24"></textarea></td>

</tr>

<tr>

<td>Tanggal Lahir</td>

<td>:</td>

<td><input type="text" name="tgl" maxlength="10" style="width:90px;" /> (yyyy-mm-dd)</td>

</tr>

<tr>

<td>Telepon/HP</td>

<td>:</td>

<td><input type="text" name="telp" maxlength="15" /></td>

</tr>

<tr>

<td></td>

<td align="right">

<input class="captcha" type="text" name="c" value="<?php echo mix(); ?>" style="width:100px;" readonly />

<input type="text" name="cw" maxlength="10" style="width:75px;" />

</td>

</tr>

</tbody>

<tr><td colspan="4"></td></tr>

<tfoot>

<tr><td align="right" colspan="3">

<input type="submit" name="simpan" value="Tambah" style="width:70px; cursor:pointer;" />

<input type="reset" name="batal" value="Batal" style="width:70px; cursor:pointer;" />

</td></tr>

</tfoot>

</table>

</form>

Kemudian buat form untuk melakukan edit.

<?php

//aksi form edit data

}elseif(isset($_GET['act'])&& $_GET['act']=="edit"){

$nim = $_GET['nim'];

$q = mysql_query("select * from mahasiswa where nim='$nim'");

$d = mysql_fetch_array($q);

<form action="" method="post">

<table align="center">

<thead align="center">

<tr><td colspan="3"><u><strong>Edit Data</strong></u></td></tr>

</thead>

<tbody>

<tr>

<td>NIM</td>

<td>:</td>

<td><input type="text" name="nim" value="<?php echo $d['nim']; ?>" requiered readonly /></td>

</tr>

<tr>

<td>Nama</td>

<td>:</td>

<td><input type="text" name="nama" value="<?php echo $d['nama']; ?>" /></td>

</tr>

<tr>

<td>Alamat</td>

<td>:</td>

<td><textarea type="text" name="alamat" rows="5" cols="24"><?php echo $d['alamat']; ?></textarea></td>

</tr>

<tr>

<td>Tanggal Lahir</td>

<td>:</td>

<td><input type="text" name="tgl" maxlength="10" value="<?php echo $d['tanggallahir']; ?>" style="width:90px;" /> (yyyy-mm-dd)</td>

</tr>

<tr>

<td>Telepon/HP</td>

<td>:</td>

<td><input type="text" name="telp" maxlength="15" value="<?php echo $d['notlp']; ?>" /></td>

</tr>

<tr>

<td></td>

<td align="right"> </td>

</tr>

</tbody>

<tfoot>

<tr><td align="right" colspan="3">

<input type="submit" name="edit" value="Simpan" style="width:70px; cursor:pointer;" />

<input type="submit" name="kembali" value="Batal" style="width:70px; cursor:pointer;" />

</td></tr>

</tfoot>

</table>

</form>

<?php

}

</div>

Tag php diatas form edit, akan digunakan untuk memastikan pengguna melakukan klik edit. Script berikutnya adalah script dari form tambah barang, pengiriman data dengan menggunkan method post sehingga data tidak akan ditampilkan pada url. Data akan dapat ditangkap oleh aksi edit pada script php yang dibuat sebelumnya.

Buat div baru untuk menampilkan data mahasiswa.

<hr />

<div class="tampil">

<a href="./data_mahasiswa.php" style="text-decoration:none;"><Refresh></a>

<center><h3 style="margin:0px 0px 2px 0px;">Data Mahasiswa TI-3B </h3></center>

<table border="1" cellspacing="0" cellpadding="4" align="center">

<thead>

<tr>

<th>No</th>

<th>NIM</th>

<th>Nama</th>

<th>Alamat</th>

<th>Tanggal Lahir</th>

<th>Telepon/HP</th>

<th>Aksi</th>

</tr>

</thead>

<tbody>

<?php

//menampilkan data

$no = 1;

$q = mysql_query("select * from mahasiswa");

$jml = mysql_num_rows($q);

while($data = mysql_fetch_array($q)){

<tr>

<td align="center"><?php echo $no; ?></td>

<td><?php echo $data['nim']; ?></td>

<td><?php echo $data['nama']; ?></td>

<td><?php echo $data['alamat']; ?></td>

<td><?php echo $data['tanggallahir']; ?></td>

<td><?php echo $data['notlp']; ?></td>

<td>

<a href="?act=edit&nim=<?php echo $data['nim'] ?>">Edit</a> |

<a href="?act=delete&nim=<?php echo $data['nim'] ?>">Hapus</a>

</td>

</tr>

<?php

$no++;

}

</tbody>

<tfoot>

<tr>

<td><strong>Jumlah : <?php echo $jml; ?></strong></td>

</tr>

</tfoot>

</table>

</div>

</body>

</html>

Untuk menampilkan data pada table yang dibuat, maka diperlukan proses perulangan pada pembacaan database dengan menggunakan script php. Karena penulisan pada tag html sehingga setiap pemanggilan data pada variabel php harus dimasukkan pada tag php dan ditambahkan perintah echo agar data dapat ditampilkan.

Berikut tampilannya jika sobat menuliskan script seperti diatas.

Recent Posts

Membuat Halaman Web Data Mahasiswa pada Satu Halaman

0 komentar:

Post a Comment

Arsip

Recent Posts

Membuat Halaman Web Data Mahasiswa pada Satu Halaman

Posting Terkait

0 komentar:

Post a Comment