Tugas 1 Pemrograman Web Dinamis

Pada Tugas pertama Mata kuliah Pemrograman Web Dinamis ini adalah membuat suatu form dari script PHP dimana fungsi nya memasukan input, edit data, dan menghapus data.

baik, langsung saja kita mulai.

1. Hidupkan Xampp

Pertama sekali menghidupkan Web server Xampp, jika anda tidak ada, maka anda bisa menginstall nya terlebih dahulu.

kemudian pada Xampp Control Panel, klik start pada Apache dan My-Sql.

2. Membuat Data Base

Untuk membuat data dari Inputan maka kita membutuhkan suatu database, anda bisa menggunakan php my admin, atau menggunakan cmd.

untuk membuat database saya kali ini membuat dengan cara manual yaitu dengan menggunakan CMD.

pertama sekali anda buka CMD (Command Promt) pada windows Windows + R, Ketikkan cmd, kemudian enter.

ketik cd\ Xampp\Mysql\binpenjelasan: kita memasuki direktori xampp, dan folder mysql, dan masuk ke folder bin.

kemudian ketikkan mysql -u root -p

setelah masuk, kemudian kita buat database nya dengan perintah “create database data_diri;”

setelah berhasil, kemudian kita akan membuat table dalam database tersebut, ketikkan dengan perintah ” create table mahasiswa (NIM, int NOT NULL PRIMARY KEY, nama varchar(20), alamat varchar(50));

kemudian enter, dan anda telah membuat database dengan nama “data_diri” yang di dalamnya ada table NIM, Nama, dan alamat.

3. Membuat script dari PHP

nah bagian ini yang memakan waktu lumayan lama😀

pertama kita buat file index.php

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tugas Pemrograman Web Dinamis</title>
	<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>
<center>
<table bgcolor="#FFFFFF" border="0" width="600" cellpadding="0" cellspacing="0">
<tr height="50" align="center" bgcolor="#0055FF">
<td><b>Nim</b></td>
<td><b>Nama</b></td>
<td><b>Alamat</b></td>
<td><b>Pilihan</b></td>
</tr>
<?php     	include "koneksi.php"; 		$myquery = "select nim, nama, alamat from mahasiswa"; 		$datamahasiswa = mysql_query($myquery) or die (mysql_error()); 		while($data = mysql_fetch_object($datamahasiswa)) 		{ 	?>
<tr height="35" align="center">
<td><? echo $data->nim; ?></td>
<td><? echo $data->nama; ?></td>
<td><? echo $data->alamat; ?></td>
<td>
        	<a href="hapus_data.php?data_hapus=<? echo $data->nim; ?>" onClick="return confirm('Apakah anda yakin ingin menghapus data ini?')">Hapus</a> &nbsp; &nbsp;
<a href="form_edit.php?nim_edit=<?php echo  $data->nim?>">Update</a></td>
</tr>
<? 		} 	?>
<tr align="center" height="50">
<td colspan="4">
<form action="input.php" method="get">
		<input type="submit" value="input data"></form></td>
</tr>
</table>
</center>
</body>
</html>

Setelah itu kita buat file koneksi.php, ini berguna untuk menghubungkan script kita dengan database yang telah kita buat tadi
contoh script nya :

<?php $dbserver = "localhost"; //server yang digunakan $dbusername = "root"; //user yang dipakai $dbpassword = ""; //password yang digunakan $dbname = "data_diri"; //nama database yang digunakan mysql_connect($dbserver, $dbusername, $dbpassword) or die (mysql_error()); mysql_select_db($dbname) or die (mysql_error()); ?>

setelah itu kita buat file input.php, ini berguna untuk membuat form inputan data kita

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>



<center>

<form name="fform" method="post" action="simpan.php">
<table bgcolor="#FFFFFF" width="600" cellpadding="0" cellspacing="0">
<tr align="center">
<td colspan="2">
<h4>Input Data Mahasiswa</h4>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr height="50">
<td> &nbsp; Nim</td>
<td><input type="text" name="fnim"></td>
</tr>
<tr height="50">
<td> &nbsp; Nama</td>
<td><input type="text" name="fnama"></td>
</tr>
<tr height="50">
<td> &nbsp; Alamat</td>
<td><input type="text" name="falamat"></td>
</tr>
<tr height="50">
<td></td>
<td><input name="simpan" type="submit" value="Simpan"><input name="Reset" type="reset" value="Reset"></td>
</tr>
</table>
</form></center>
</body>
</html>

kemudian kita buat file edit_data.php, yang berguna umtuk melakukan pengubahan data

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>


<form action="update.php" method="post" enctype="multipart/form-data" name="form_data">
<table bgcolor="#ffffff" width="500" border="0" align="center" cellpadding="0" cellspacing="1">
<tr>
<td height="40" align="center" bgcolor="#0099FF"><strong><font color="#ffffff">ENTRY DATA MAHASIWA</font></strong></td>
</tr>
<tr>
<td bgcolor="#FFFFFF">
<table width="500" border="0" align="center" cellpadding="5" cellspacing="0">
<tr>
<td width="113">NIM</td>
<td width="11">:</td>
<td width="237"><input name="nim" type="text" id="nim" value="<? echo $dataku->nim; ?>" readonly="readonly"></td>
</tr>
<tr>
<td>Nama</td>
<td>:</td>
<td><input name="nama" type="text" id="nama" value="<? echo $dataku->nama; ?>"></td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td><textarea name="alamat" cols="30" rows="5" id="alamat"><? echo $dataku->alamat; ?></textarea></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td align="left">
            	<input name="simpan" type="submit" id="simpan" value="Update">
<input name="ulang" type="reset" id="ulang" value="Ulangi">
<input name="batal" type="button" id="batal" value="Batal" onClick="javascript:history.back()"></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>
</form></body>
</html>

setelah tiu kita buat lagi file form_edit.php, yang berguna untuk menampilkan form untuk pengubahan data

<? 	error_reporting(0); 	include"koneksi.php"; 	$kode_edit=$_GET['nim_edit'];     $qrykoreksi=mysql_query("SELECT * FROM mahasiswa WHERE nim='$kode_edit'");     $dataku=mysql_fetch_object($qrykoreksi); ?>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>


<form action="update.php" method="post" enctype="multipart/form-data" name="form_data">
<table bgcolor="#ffffff" width="500" border="0" align="center" cellpadding="0" cellspacing="1">
<tr>
<td height="40" align="center" bgcolor="#0099FF"><strong><font color="#ffffff">ENTRY DATA MAHASIWA</font></strong></td>
</tr>
<tr>
<td bgcolor="#FFFFFF">
<table width="500" border="0" align="center" cellpadding="5" cellspacing="0">
<tr>
<td width="113">NIM</td>
<td width="11">:</td>
<td width="237"><input name="nim" type="text" id="nim" value="<? echo $dataku->nim; ?>" readonly="readonly"></td>
</tr>
<tr>
<td>Nama</td>
<td>:</td>
<td><input name="nama" type="text" id="nama" value="<? echo $dataku->nama; ?>"></td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td><textarea name="alamat" cols="30" rows="5" id="alamat"><? echo $dataku->alamat; ?></textarea></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td align="left">
            	<input name="simpan" type="submit" id="simpan" value="Update">
<input name="ulang" type="reset" id="ulang" value="Ulangi">
<input name="batal" type="button" id="batal" value="Batal" onClick="javascript:history.back()"></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>
</form></body>
</html>

setelah itu, untuk melakukan fungsi hapus, maka kita buat file hapus_data.php

<?php
error_reporting(0);
include "koneksi.php";

$datahapus = $_GET['data_hapus'];
if(trim($datahapus) == ""){
echo "<script>alert('Tidak Ada Data Yang dihapus');location.href='index.php';</script>\n";
}
else{
$sql_del = "DELETE from mahasiswa where nim = '$datahapus'";
$mysql = mysql_query($sql_del) or die(mysql_error());
if(! $mysql){
echo "<script>alert('Data Gagal Dihapus');location.href='index.php';</script>\n";
}
}

echo "<script>alert('Nama = $Nama | NIM = $Nim Sudah Terhapus');location.href='index.php';</script>\n";
?>

dan kemudian, untuk melakukan fungsi update kita membutuh kan suatu file bernma update_date.php

<?php
include "koneksi.php";

$nim=$_POST['nim'];
$nama=$_POST['nama'];
$alamat=$_POST['alamat'];

if(trim($nama) == ""){
echo "<script>alert('Nama Belum Diisi');location.href='form_edit.php';</script>";
}
else if(trim($alamat) == ""){
echo "<script>alert('Alamat Belum Diisi');location.href='form_edit.php';</script>";
}
else{
$myqry="UPDATE mahasiswa SET nama='$nama', alamat='$alamat' WHERE nim='$nim'";
mysql_query($myqry) or die(mysql_error());
}

echo "<script>alert('Data Sudah di Update');location.href='index.php';</script>\n";
?>

kemudian kita buat file satu lagi bernama simpan.php, file inilah yang berguna untuk memasukan inputan dari form yang telah kita buat tadi ke dalam database kita

<?php
include "koneksi.php";

$Nim = $_POST['fnim'];
$Nama = $_POST['fnama'];
$Alamat = $_POST['falamat'];

if(trim($Nim)=="" && trim($Nama)== "" && trim($Alamat)==""){
echo "<script>alert('Nim, Nama & Alamat belum diisi');location.href='input.php';</script>";
}
else if(trim($Nim)=="" && trim($Nama)== ""){
echo "<script>alert('Nim & Nama belum diisi');location.href='input.php';</script>";
}
else if(trim($Nim)=="" && trim($Alamat)==""){
echo "<script>alert('Nim & Alamat belum diisi');location.href='input.php';</script>";
}
else if(trim($Nama)== "" && trim($Alamat)==""){
echo "<script>alert('Nama & Alamat belum diisi');location.href='input.php';</script>";
}
else if(trim($Nim) == ""){
echo "<script>alert('Nim belum diisi');location.href='input.php';</script>";
}
else if(trim($Nama) == ""){
echo "<script>alert('Nama belum diisi');location.href='input.php';</script>";
}
else if(trim($Alamat) == ""){
echo "<script>alert('Alamat belum diisi');location.href='input.php';</script>";
}
else{
$cekdata = "select nim from mahasiswa where nim ='$Nim'";
$ada = mysql_query($cekdata) or die(mysql_error());
if(mysql_num_rows($ada) > 0)
{
echo "<script>alert('NIM telah Terdaftar! Mohon input dengan NIM yang lain!');location.href='input.php';</script>\n";
}
else{
mysql_query("insert into mahasiswa(nim, nama, alamat) values('$Nim','$Nama','$Alamat')") or die(mysql_error());
}
echo "<script>alert('Nama = $Nama | NIM = $Nim Sudah Tersimpan');location.href='index.php';</script>\n";
}
?>

nah, setelah semua file diatas telah kita buat, maka tinggal kita jalankan saja. jangan lupa semua file diatas di simpan pada direktori C:\xampp\htdocs\nama folder yang akan anda letakkan filenya
setelah itu kita buka web browser nya dan ketikkan pada kolom url “localhost/nama_folder_yang_dibuat”
maka akan tampil seperti ini:

1

gambar diatas setelah saya masukkan data, jika inigin menambah data, klik pada button input data, maka tampilan yang akan keluar seperti ini:
2

sesuai database yang telah kita buat tadi, terdapat 3 data, yaitu NIM,Nama, dan alamat

setelah field diisikan, maka klik button simpan, maka data akan tersimpan dalam database kita, dan jangan lupa setiap field harus diisi, jika tidak, data tidak akan tersimpan.

kemudian jika terjadi kesalahan data, maka kita mempunyai fitur update, tampilan untuk mengupdate data ;

3

dan untuk NIm, data tidak bisa berubah, karena nim hanya 1, dan tidak akan bisa di ubah. setelah data diganti, klik update, dan lihat hasilnya, data yang anda ubah akan berubah dengan data baru yang anda masukkan.

kemudian fitur untuk menghapus, ini berguna jika anda tidak membutuhkan data tersebut lagi, bentuk tampilan dari menu hapus hanyalh sebuah allert yang muncul pada window web browser anda, tampilannya sebagai berikut:

4

nah, itulah tugas pemrograman web dinamis saya yang pertama, silahkan anda berkreasi dengan script yang saya berikan tadi.

jika anda ingin mendownload scrip yang telah saya buat tadi, saya akan lampirkan dibawah postingan ini.

okay, sekian dulu. terimakasih.-

download source code : disini

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: