Hm.... halo semua pada artikel ini saya mau coba nih berbagi ilmu tetang pemograman web, ya walaupun saya masih amatir mudah-mudah artikel ini bisa membantu, dan isinya ga ketinggalan jaman hehehe.
Oke sebenernya saya menulis artikel ini karna ga ada kerjaan alias iseng aja J, oke langsung saja idenya adalah membuat multi form dimana form bisa ditambah sebanyak yang diperlukan dan tentunya bisa diremove , dengan mengkolaborasi javascript dan php.
Scriptnya sih ga terlalu panjang simpel banget malah langsung aja deh, pertama buat database dengan nama belajar kemudian buat tabel hobi dengan struktur berikut ;
Setelah persiapan database selesai kemudian ketik script berikut dan simpan dengan nama belajar.php atau terserah anda.
<script language="JavaScript" type="text/JavaScript">
function hps(x)
{
z = x ;
document.getElementById("tes"+z).innerHTML = "";
}
</script>
<script language="JavaScript" type="text/JavaScript">
counter = 0;
function tambah()
{
counterNext = counter + 1;
counterId = counter + 1;
document.getElementById("input"+counter).innerHTML = "<div id=\"tes"+counterNext+"\"><table cellpadding=‘2’ cellspacing=‘0’ style=‘border-bottom:thick; border-bottom-style:solid’><tr bgcolor=‘#999999’><td colspan=‘2’>Hobi</td><td align=‘right’><input type=‘button’ onClick=‘hps("+counterNext+")’ value=‘X’></td></tr><tr><td>Nama</td><td>:</td><td><input type=‘text’ name=‘nama[]’></td></tr><tr><td>Hobi</td><td>:</td><td><input type=‘text’ name=‘hobi[]’></td></tr></table></div><div id=\"input"+counterNext+"\"></div>";
counter++;
}
</script>
Disini ada dua javascript yaitu hps() yang nantinya digunakan untuk meremove form dan fungsi tambah() yang digunakan untuk menambah form sebanyak yang kita inginkan disini saya menggunakan fungsi innerHTML untuk menyisipkan tag-tag html nah script diatas diletakan diantara tag . Setelah itu kita buat tampilannya ;Tampilannya akan menjadi seperti ini ;
"X" Tombol ini digunakan untuk meremove form yang tidak diperlukan jika dilihat discript tombol ini diatur dengan aksi onClick dimana apabila tomobl ini diklik dia akan memanggil fungsi hps() yang tadi kita buat. Dan tombol "+" untuk menambah form, sama seperti sebelumnya tombol ini pun diatur dengan aksi onClick dimana saat tombol diklik akan memanggil fungsi tambah() yang tadi kita buat nah klik tombol simpan bila data-data ingin disimpan . Selanjutnya ketik script berikut untuk menyimpan data yang telah diinput, kali ini kita gunakan bantuan dari script PHP.
<?php
if($_POST)
{
$nama = $_POST[‘nama’];
$hobi = $_POST[‘hobi’];
mysql_connect(‘localhost’,’root’,’’);
mysql_select_db(‘belajar’);
$t = 0;
foreach($nama as $data)
{
$query = mysql_query(‘insert into hobi set nama = "‘.$data.’", hobi = "‘.$hobi[$t].’"‘);
$t++;
}
?>
<script language="javascript">
alert("Berhasil");
document.location=‘test.php’;
</script>
Disini saya menggunakan perulangan karna data yang dimasukan banyak atau multi input kali ya? Disini menggunakan foeach, karna foreach mampu melakukan perulangan sebanyak data yang ada tanpa harus tau terlebih dahulu jumlah datanya enakan J.
Nah untuk tambahan kita ketik kembali script berikut yang berguna untuk menhapus data dan menampilkan data yang diinput tadi ;
<?php
mysql_connect('localhost','root','');
mysql_select_db('belajar');
$querytmp = mysql_query('select * from hobi order by no');
$cek = mysql_num_rows($querytmp);
if($cek<=0)
{
echo "<h3>Belum ada data</h3>";
}
else
{
$no = 1;
echo "<table cellpadding='2' cellspacing='0' border='1'>";
echo "<tr bgcolor='#999999'>";
echo "<th>No</th>";
echo "<th>Nama</th>";
echo "<th>Hobi</th>";
echo "<th>Del</th>";
echo "</tr>";
while($data = mysql_fetch_array($querytmp))
{
echo "<tr>";
echo "<td bgcolor='#666600' align='center'>".$no."</td>";
echo "<td>".$data['nama']."</td>";
echo "<td>".$data['hobi']."</td>";
echo "<td align='center'><a href='test.php?id=".$data['no']."' style='text-decoration:none'><span style='color:red'>X</span></a></td>";
echo "</tr>";
$no++;
}
echo "</table>";
}
?>
Nah kalo script fullnya ya seperti ini kira-kira....
<html>
<head>
<title>Pakar</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script language="JavaScript" type="text/JavaScript">
function hps(x)
{
z = x ;
document.getElementById("tes"+z).innerHTML = "";
}
</script>
<script language="JavaScript" type="text/JavaScript">
counter = 0;
function tambah()
{
counterNext = counter + 1;
counterId = counter + 1;
document.getElementById("input"+counter).innerHTML = "<div id=\"tes"+counterNext+"\"><table cellpadding='2' cellspacing='0' style='border-bottom:thick; border-bottom-style:solid'><tr bgcolor='#999999'><td colspan='2'>Hobi</td><td align='right'><input type='button' onClick='hps("+counterNext+")' value='X'></td></tr><tr><td>Nama</td><td>:</td><td><input type='text' name='nama[]'></td></tr><tr><td>Hobi</td><td>:</td><td><input type='text' name='hobi[]'></td></tr></table></div><div id=\"input"+counterNext+"\"></div>";
counter++;
}
</script>
</head>
<body>
<form action="test.php" method="POST">
Pertanyaan baru
<div id="tes0">
<table cellpadding='2' cellspacing='0' style='border-bottom:thick; border-bottom-style:solid'>
<tr bgcolor='#999999'>
<td colspan='2'>Hobi</td>
<td align='right'><input type='button' onClick='hps(0)' value='X'></td>
</tr>
<tr>
<td>Nama</td>
<td>:</td>
<td><input type='text' name='nama[]'></td>
</tr>
<tr>
<td>Hobi</td>
<td>:</td>
<td><input type='text' name='hobi[]'></td>
</tr>
</table>
</div>
<div id="input0">
</div>
<input onClick="tambah()" value="+" type="button" >
<hr>
<input type="submit" value="Simpan" name="submit">
</form>
<br>
<?php
if($_POST)
{
$nama = $_POST['nama'];
$hobi = $_POST['hobi'];
mysql_connect('localhost','root','');
mysql_select_db('belajar');
$t = 0;
foreach($nama as $data)
{
$query = mysql_query('insert into hobi set nama = "'.$data.'", hobi = "'.$hobi[$t].'"');
$t++;
}
?>
<script language="javascript">
alert("Berhasil");
document.location='test.php';
</script>
<?php
}
if($_GET)
{
$id = $_GET['id'];
mysql_connect('localhost','root','');
mysql_select_db('belajar');
$querydel = mysql_query("delete from hobi where no = '".$id."'");
if($querydel);
{ ?>
<script language="javascript">
alert("Berhasil");
document.location='test.php';
</script>
<?php
}
}
?>
<?php
mysql_connect('localhost','root','');
mysql_select_db('belajar');
$querytmp = mysql_query('select * from hobi order by no');
$cek = mysql_num_rows($querytmp);
if($cek<=0)
{
echo "<h3>Belum ada data</h3>";
}
else
{
$no = 1;
echo "<table cellpadding='2' cellspacing='0' border='1'>";
echo "<tr bgcolor='#999999'>";
echo "<th>No</th>";
echo "<th>Nama</th>";
echo "<th>Hobi</th>";
echo "<th>Del</th>";
echo "</tr>";
while($data = mysql_fetch_array($querytmp))
{
echo "<tr>";
echo "<td bgcolor='#666600' align='center'>".$no."</td>";
echo "<td>".$data['nama']."</td>";
echo "<td>".$data['hobi']."</td>";
echo "<td align='center'><a href='test.php?id=".$data['no']."' style='text-decoration:none'><span style='color:red'>X</span></a></td>";
echo "</tr>";
$no++;
}
echo "</table>";
}
?>
</body>
</html>
Nah itu tadi lah idenya maaf kalo kacau artikelnya maklum baru pertama nyoba bikin artikel, dan kalo penjelasannya kuarang jelas mohon dimaklumi masih amatiran, ya initinya mohon dimaklumi atas segala keurangannya ya hee.... semoga membantu J
Tidak ada komentar:
Posting Komentar