Input Data HTML

Mengenai input data html memang telah banyak tulisan tentang ini namun saya mencoba memadukan tulisan yang ditemukan di codingpintar.blogspot.co.id yang memposting metoda pencarian dengan menggunakan php, dimana dalam tulisannya menampilkan tombol edit dan hapus yang digunakan sebagai pemanis tampilan saja.

Untuk bisa mempraktekan input data html salah satu syaratnya di komputer harus terinstal xampp yang berfungsi untuk membuat database dan tabel yang akan diinput di HTML itu. dan sebagai salah satu permasalahan yang saya temukan ketika akan menginstall xampp dalam komputer itu adalah anti virus harus dinonaktifkan dulu.

Untuk input data HTML ini saya mencoba mereview dari postingan dari http://www.kangalfyan.com dengan menambahkan pencarian data yang bersumber dari, "http://codingpintar.blogspot.co.id/2015/10/cara-membuat-pencarian-data-dengan-php.html", hal ini tidak mudah dilakukan karena kalau dimasukan langsung kedua kode tersebut menjadi tidak nyambung, namun alhamdulillah akhirnya saya menemukan cara untuk menggabungkannya
"http://codingpintar.blogspot.co.id/2015/10/cara-membuat-pencarian-data-dengan-php.html"

berikut adalah langkah membuat input data html yang lengkap input, delete, edit dan cari data html.

buatlah sebuah database pada xampp seperti tulisannya http://www.kangalfyan.com dengan nama siswa_db. dan tabel dengan siswa, untuk kolomnya

buatlah sebuah folder beri nama latihan, untuk menyimpan data file-file php pada drive c/xampp/htdoc/latihan

selanjuntya bukalah notepad++ lalu ketikan kode barikut lalu simpanlah dengan nama koneksi.php dalam folder latihan yang telah kita buat di atas.

error_reporting(0);
$host = 'localhost';
$user = 'root';
$password = '';
$database = 'siswa_db';

$konek_db = mysql_connect($host, $user, $password);
$find_db = mysql_select_db($database) ;

?>

untuk menampilkan data yang telah kita input dalam bentuk tabel buatlah file baru beri nama index.php lalu copykan kode berikut :

<?php
include "koneksi.php";

// membaca informasi yang dikirim dari file view.php pada address bar
$id = $_GET['id'];

// Perintah sql untuk menampilkan database
$queri = "select * from siswa where id = '$id'";

// perintah untuk menjalankan sql
$hasil = mysql_query($queri);

// menjadikan data dalam bentuk array
$data = mysql_fetch_array($hasil);

$nomor = $data['id'];
$nama = $data['nama'];
$jenis_kelamin = $data['Jenis_Kelamin'];
$kelas = $data['Kelas'];
$alamat = $data['alamat'];

?>

<html>
<head>
<title> Registrasi Peserta Seminar </title>

</head>
<body style = 'margin : 20px; font : 16px arial;'>

<?php
echo "
<center>
<p> Registrasi Siswa Baru </p>

<form method ='POST' action = 'aksi_edit.php'>
<table border = '1' cellspacing = '1' cellpadding = '10'
style = 'border : #aaa; color: #101; font-family : arial; fot-size : 12px;'>
<tr>

<td> Nama Siswa </td>
<td width = '5' align = 'center'> : </td>
<td> <input type = 'text' name = 'nama' value= '".$nama."'/> </td>
<input type = 'hidden' name = 'id' value = '".$nomor."' />
</tr>
<tr>
<td> Jenis Kelamin </td>
<td align = 'center'> : </td>
<td> <input type = 'text' name = 'Jenis_Kelamin' value= '".$jenis_kelamin."'/> </td>
</tr>
<tr>
<td> Kelas </td>
<td align = 'center'> : </td>
<td> <input type = 'text' name = 'Kelas' value= '".$kelas."'/> </td>
</tr>
<tr>
<td> Alamat </td>
<td width = '5' align = 'center'> : </td>
<td> <textarea name = 'alamat'>".$alamat."</textarea> </td>
</tr>

<tr>
<td colspan = '3' align = 'center'>
<input type = 'submit' name = 'submit' value = 'Update'/>
</td>
</tr>
</table>
<a href = 'index.php'> Kembali </a>
</form>
</body>
</html>
";
?>

Nah langkah selanjutnya untuk mengaktifkan tombol edit dan delete, kita harus membuat tiga file, yaitu, edit.php, aksi_edit.php, dan delete.php kita mulai dengan membuat file edit.php copykan script berikut kemudian simpan dengan nama edit.php

kode di atas hanya menampilkan form edit ketiak di klik update maka belum bisa mengupdate data untuk langkah selanjutnya kita harus buat file aksi_edit.php yang kode php nya seperti di bawah ini :

<?php

error_reporting(E_ALL ^ E_NOTICE);

include 'koneksi.php';

$id = $_POST['id'];

$nama = $_POST['nama'];

$Jenis_Kelamin = $_POST['Jenis_Kelamin'];

$kelas = $_POST['Kelas'];

$alamat = $_POST['alamat'];

$update = "UPDATE SISWA SET nama='$nama',Jenis_Kelamin='$Jenis_Kelamin',Kelas='$kelas',alamat='$alamat' where id = '$id'";

$hasil = mysql_query($update);

if ($hasil){

//header ('location:view.php');

echo " <center> Data Berhasil diupdate <br/>

<br> Untuk melihat daftar peserta klik <a href = 'index.php'> Disini </a></center>";

} else { echo "Data gagal diupdate";

}

setelah membuat file-file di atas maka tombol edit sudah bisa berfungsi.

langkah selanjutnya adalah mengfungsikan tombol delete dengan membuat file delete.php copykan kode berikut pada file delete.php kemudian simpan di folder latihan.

<?php

include "koneksi.php";

error_reporting(E_ALL ^ E_NOTICE);

$id = $_GET['id'];

$nama = $_GET['nama'];

$delete = "delete from siswa where id = '$id'";

$hasil = mysql_query($delete);

if ($hasil){

//header ('location:view.php');

echo " <center> <b> <font color = 'red' size = '4'> <p> Data dengan nama $nama Berhasil dihapus </p> </center> </b> </font> <br/>

} else { echo "Data gagal dihapus";

}

tinggal satu lagi tombol yang belum berfungsi yaitu tombol tambah siswa untuk input data pada html. ada dua file yang harus kita buat untuk mengaktifkan tombol tambah siswa, yaitu tambah.php, dan aksi_tambah.php pertama kita buat dulu file tambah.php kemudian simpan di folder latihan, berikut kode untuk tambah.php

<?php

include "koneksi.php";

<html>

<head>

<title> Registrasi Peserta Seminar </title>

</head>

<p> Registrasi Siswa Baru </p>

<table border = '1' cellspacing = '1' cellpadding = '10'

style = 'border : #aaa; color: #101; font-family : arial; fot-size : 12px;'>

<tr>

<td> Nama Siswa </td>

</tr>

<tr>

<td> Jenis Kelamin </td>

</tr>

<tr>

<td> Kelas </td>

</tr>

<tr>

<td> Alamat </td>

</tr>

<tr>

</tr>

</table>

<a href = 'index.php'> Kembali </a>

</form>

</body>

</html>

kode di atas hanya menampilkan form input data namun ketika di klik submit belum berfungsi, agar submit sebagai tombol input data berfungsi maka buatlah file aksi_tambah.php dengan kode sebagai berikut :

<?php

error_reporting(E_ALL ^ E_NOTICE);

include "koneksi.php";

// file submit.php

// menangkap data yang dikirimkan dari file tambah.php mwnggunakan method = POST

$nama = $_POST['nama'];

$jenis_kelamin = $_POST['Jenis_Kelamin'];

$kelas = $_POST['Kelas'];

$alamat = $_POST['alamat'];

// perintah SQL

$query="INSERT INTO siswa VALUES ('','$nama' ,' $jenis_kelamin','$kelas','$alamat') " ;

$hasil=mysql_query($query);

if ($hasil){

//header ('location:view.php');

echo " <center> <b> <font color = 'red' size = '4'> <p> Data Berhasil disimpan </p> </center> </b> </font> <br/>

} else { echo "Data gagal disimpan

}

nah itulah input data persi http://www.kangalfyan.com namun saya sekarang mencoba menggabungkan menu pencarian agar jiga datanya banyak maka kita tinggal mencari kemudian mengeditnya dengan mudah tanpa harus memutar tombol gulir atau mencari-cari data satu persatu.

sumber data yang saya pilih untuk membuat pencarian agar file input data html di atas menjadi lengkap, saya ambil data dari "http://codingpintar.blogspot.co.id/2015/10/cara-membuat-pencarian-data-dengan-php.html".

dalam materi pencarian data yang disajikan dalam postingannya terdiri dari dua file yaitu file koneksi.php dan index.php, karena file koneksi sudah ada di input data html, maka saya mengambil file index.php untuk diambil form pencariannya, serta mengambil aksi pencariannya, inilah index.php versi codingpintar.

<?php

include "koneksi.php"; // menghubungkan ke file koneksi.php agar terhubung dengan database

<!DOCTYPE html>

<html>

<head>

<title>Lihat Data</title>

td{

text-align: center;

}

</style>

</head>

<body>

<legend><h1>Cari Data Negara</h1></legend>

</form>

</div>

<th>Kode Negara</th>

<th>Nama Negara</th>

</tr>

<?php

$input_cari = @$_POST['input_cari'];

$cari = @$_POST['cari'];

// jika tombol cari di klik

if($cari) {

// jika kotak pencarian tidak sama dengan kosong

if($input_cari != "") {

// query mysql untuk mencari berdasarkan nama negara. .

$sql = mysql_query("select * from countries where country_name like '%$input_cari%'") or die (mysql_error());

} else {

$sql = mysql_query("select * from countries") or die (mysql_error());

}

} else {

$sql = mysql_query("select * from countries") or die (mysql_error());

}

// mengecek data

$cek = mysql_num_rows($sql);

// jika data kurang dari 1

if($cek < 1) {

<td colspan="7" align="center style="padding:10px;""> Data Tidak Ditemukan</td>

</tr>

<?php

} else {

// mengulangi data agar tidak hanya 1 yang tampil

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

<tr>

<button>Hapus</button>

</td>

</tr>

<?php

}

</table>

</fieldset>

</body>

</html>

tidak semua data di atas diambil, hanya beberapa kode saja yang akan di ambil, langkah pertama kita cari mana yang berfungis untuk membuat form pencarian, dan dimana akan kita letakan form pencarian tersebut.

cari kode berikut :

</form>

</div>

letakan pada index.php pada input data setelah

coba buka locolhost/latihan apa yang terjadi? muncul form pencarian yang berada di bawah tombol tambah pada input data html, bukan?

sekarang kita cari lagi kode html pada index pencarian di file index.php

<?php

$input_cari = @$_POST['input_cari'];
$cari = @$_POST['cari'];

// jika tombol cari di klik
if($cari) {

// jika kotak pencarian tidak sama dengan kosong
if($input_cari != "") {
// query mysql untuk mencari berdasarkan nama negara. .
$sql = mysql_query("select * from countries where country_name like '%$input_cari%'") or die (mysql_error());
} else {
$sql = mysql_query("select * from countries") or die (mysql_error());
}
} else {
$sql = mysql_query("select * from countries") or die (mysql_error());
}

// mengecek data
$cek = mysql_num_rows($sql);
// jika data kurang dari 1
if($cek < 1) {
?>
<tr> 
<td colspan="7" align="center style="padding:10px;""> Data Tidak Ditemukan</td>
</tr>
<?php
} else {

// mengulangi data agar tidak hanya 1 yang tampil
while($data = mysql_fetch_array($sql)) {

?>
<tr>
<td><?php echo $data['country_code'] ?></td>
<td><?php echo $data['country_name'] ?></td>


<td align="center">
<button>Edit</button>
<button>Hapus</button>
</td>
</tr>
<?php

}
}
?>

letakan kode di atas kode berikut :
</table>

karena sumber data yang berbeda antara input data versi kangalfian dengan pencarian versi codingpintar maka kita harus mengubah sumber database dan data tabel dari pencarian karena kita akan menerapkannya di input data html, langsung saja saya buatkan index.php yang sudah jadi tanpa saya jelaskan langkah-langkahnya satu persatu agar lebih singkat, untuk pemahamannya silakan pelajari sendiri.

selanjutnya inilah hasil perpaduan input data html yang memiliki mesin pencari data, gantilah file index kang alfian dengan index.php kode di bawah ini :

<?php
error_reporting(0);
//membuat koneksi ke database
include "koneksi.php";
?>
<div style="margin-bottom:15px;" align="right">
<form action="" method="post">
<input type="text" name="input_cari" placeholder="Cari Berdasarkan Nama" class="css-input" style="width:250px;" />
<input type="submit" name="cari" value="Cari" class="btn" style="padding:3px;" margin="6px;" width="50px;" />
</form>
</div>
<form action="tambah.php" >
<input type="submit" name ="tambah" value ="tambah siswa">
</form>
<center>
<a href="index.php">MENAMPILKAN DATA SISWA </a>
<br>
<br>
<link href="css/bootstrap.min.css" rel="stylesheet">


<link href="css/body.css" rel="stylesheet">

<script language="javascript">
function tanya() {
if (confirm ("Apakah Anda yakin akan menghapus data ini ?")) {
return true;
} else {
return false;
}
}
</script>

<head>
<title>Lihat Data</title>

<style type="text/css">
td{
text-align: center;
}
</style>

</head>

<body>

<table width="100%" border="7px solid #000" style="border-collapse:collapse;">
<tr style="background-color:#fc0;">
<th>NO</th>
<th width="5%">NIS</th>
<th width="15%">Nama</th>
<th width="10%">Jenis_Kelamin</th>
<th width="10%">Kelas</th>
<th width="50%">Alamat</th>
<Th colspan="4">Action</th>
</tr>

<?php
$baris=0;

$input_cari = @$_POST['input_cari'];
$cari = @$_POST['cari'];

// jika tombol cari di klik
if($cari) {

// jika kotak pencarian tidak sama dengan kosong
if($input_cari != "") {
// query mysql untuk mencari berdasarkan nama negara. .
$sql = mysql_query("select * from siswa where nama like '%$input_cari%'") or die (mysql_error());
} else {
$sql = mysql_query("select * from siswa") or die (mysql_error());
}
} else {
$sql = mysql_query("select * from siswa") or die (mysql_error());
}

// mengecek data
$cek = mysql_num_rows($sql);
// jika data kurang dari 1
if($cek < 1) {
?>
<tr> 
<td colspan="7" align="center style="padding:10px;""> Data Tidak Ditemukan</td>
</tr>
<?php
} else {

// mengulangi data agar tidak hanya 1 yang tampil
while($data = mysql_fetch_array($sql)) {
$id = $data['id'];
$baris++;

?>

<td><?php echo$baris?></td>
<td> <?php echo$data['id']?> </td>
<td><?php echo$data['nama']?></td>
<td><?php echo$data['Jenis_Kelamin'] ?></td>
<td><?php echo$data['Kelas']?></td>
<td><?php echo$data['alamat']?></td>



<td><form action = 'edit.php' method = 'GET'>
<input type = 'submit' name = 'tombol' value = 'Edit' class = 'edit'>
<input type = 'hidden' name = 'id' value = "<?php echo$data['id']?>">
</form></td>

</form></td>
<td> <form action = 'delete.php' method = 'GET'>
<input type = 'hidden' name = 'nama' value = ''>
<input type = 'hidden' name = 'id' value = "<?php echo$data['id']?>">

<input type = 'submit' name = 'tombol2' value = 'Delete' class = 'delete'
onclick='return tanyalagi(".$data['id'].")'>

</form></td>
</tr>

<?php

}

}
?>
</table>
</body>



</table>

</div>
</html>

untuk hasil akhir semua kode bisa di dapatkan disini. nah itulah cara input data yang ada edit data, hapus data, dan mesin pencari data., semoga bermanfaat.

SMK insan mandiri

Wednesday, March 1, 2017

Input Data HTML

1 comment:

Popular Posts

Labels Cloud

Facebook Like

About Me

Blog Archive

Label