Kali ini saya mencoba membuat postingan input data html tanpa database sebagai perbandingan input data html sebelumnya. pada postingan sebelumnya input data html tersebut menggunakan data base mysql, artinya pada materi sebelumnya kita tidak bisa mempraktekannya apabila di laptop maupun desktop tidak terinstall aplikasi xampp.
Namun pada postingan kali ini kita bisa mempraktekan input data ke tabel html hanya dengan menggunakan program notepad yang merupakan bawaan window. untuk membuat input data ke tabel tersebut kita hanya memerlukan dua buah file yang satu adalah file ekstensi html dan yang satu lagi file ekstensi javascript. dan kedua ekstensi tersebut tidak usah diinstall hanya dengan memberikan titik (.) setelah nama file tersebut. untuk contoh misalkan kita akan membuat file index dengan format html maka cukup memberikan nama file pada saat akan menyimpan file notepad dengan nama index.html, begitupun dengan file javascript hanya dengan memberikan titik kemudian js setelah nama file tersebut, contoh javascript.js.
Oke langsung saja buka aplikasi notepad kesukaan anda kemudian copykan script berikut dan simpan dengan nama javascript.js, untuk memudahkan simpanlah dalam sebuah folder baru misalkan kita beri nama latihan.
function terimainput(){
var x=document.forms['biodata']['nim'].value;
var y=document.forms['biodata']['nama'].value;
var z=document.forms['biodata']['agama'].value;
if(x==null || x=="")
{
document.getElementById("val_nim").innerHTML="<font color='red'><b>* Harap Isi Kolom NIM Dengan Benar</b></font>";
if(y==null || y=="") {
document.getElementById("val_nama").innerHTML="<font color='red'><b>* Harap Isi Kolom NAMA Dengan Benar</b></font>";
} else {
document.getElementById("val_nama").innerHTML="<font color='purple'>* Benar</font>";
}
} else {
document.getElementById("val_nim").innerHTML="<font color='purple'>* Benar</font>";
if(y==null || y=="") {
document.getElementById("val_nama").innerHTML="<font color='red'><b>* Harap Isi Kolom NAMA Dengan Benar</b></font>";
} else {
document.getElementById("val_nama").innerHTML="<font color='purple'>* Benar</font>";
var tabel = document.getElementById("tabelinput");
var row = tabel.insertRow(1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = x;
cell2.innerHTML = y;
cell3.innerHTML = z;
}
}
}
var x=document.forms['biodata']['nim'].value;
var y=document.forms['biodata']['nama'].value;
var z=document.forms['biodata']['agama'].value;
if(x==null || x=="")
{
document.getElementById("val_nim").innerHTML="<font color='red'><b>* Harap Isi Kolom NIM Dengan Benar</b></font>";
if(y==null || y=="") {
document.getElementById("val_nama").innerHTML="<font color='red'><b>* Harap Isi Kolom NAMA Dengan Benar</b></font>";
} else {
document.getElementById("val_nama").innerHTML="<font color='purple'>* Benar</font>";
}
} else {
document.getElementById("val_nim").innerHTML="<font color='purple'>* Benar</font>";
if(y==null || y=="") {
document.getElementById("val_nama").innerHTML="<font color='red'><b>* Harap Isi Kolom NAMA Dengan Benar</b></font>";
} else {
document.getElementById("val_nama").innerHTML="<font color='purple'>* Benar</font>";
var tabel = document.getElementById("tabelinput");
var row = tabel.insertRow(1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = x;
cell2.innerHTML = y;
cell3.innerHTML = z;
}
}
}
untuk file selanjutnya kita buat kode html seperti di bawah ini dan berinama dengan index.html letakan satu folder dengan kode javascript.js di atas
<html>
<head>
<title>input data tanpa database</title>
<script src='javascript.js'></script>
</head>
<body>
<form name='biodata' method='post' action='tutor.html'>
<pre>
Nim : <input type='number' name='nim'><p id='val_nim'>* Hanya boleh di-isi dengan angka</p>
Nama : <input type='text' name='nama' ><p id='val_nama'>* Masukkan Nama Mahasiswa</p>
Agama : <select name='agama'>
<option>Islam
<option>Hindu
<option>Budha
<option>Kristen
<option>Konghucu
</select><p>* Pilih Agama</p>
</pre>
<input type='button' onClick='terimainput()' value='Simpan'>
<input type='reset' value='Ulangi'>
</form>
<table border='1' id='tabelinput'>
<tr>
<td>NIM</td>
<td>NAMA</td>
<td>AGAMA</td>
</tr>
</table>
</body>
</html>
<head>
<title>input data tanpa database</title>
<script src='javascript.js'></script>
</head>
<body>
<form name='biodata' method='post' action='tutor.html'>
<pre>
Nim : <input type='number' name='nim'><p id='val_nim'>* Hanya boleh di-isi dengan angka</p>
Nama : <input type='text' name='nama' ><p id='val_nama'>* Masukkan Nama Mahasiswa</p>
Agama : <select name='agama'>
<option>Islam
<option>Hindu
<option>Budha
<option>Kristen
<option>Konghucu
</select><p>* Pilih Agama</p>
</pre>
<input type='button' onClick='terimainput()' value='Simpan'>
<input type='reset' value='Ulangi'>
</form>
<table border='1' id='tabelinput'>
<tr>
<td>NIM</td>
<td>NAMA</td>
<td>AGAMA</td>
</tr>
</table>
</body>
</html>
yang harus diperhatikan dari kode di atas adalah cara penulisan file nama file yang merupakan link harus sama dengan nama file yang ada di html yaitu
<script src='javascript.js'></script>
harus sama dengan file javascript.js.
Demikianlah cara membuat input data html tanpa database, sederhana bukan? selamat mencobanya!
Silakan coba disini untuk melakukan input data ke dalam form di bawah ini!
| NIM | NAMA | AGAMA |
Kalo menghubungkan ke database mySQL(phpmyadmin) gimana caranya dengan format HTML?
ReplyDeleteCara menghubungkan ke database (phpmyadmin) bagaimana?
ReplyDeleteuntuk cara nyimpan ke database gimana ya?
ReplyDelete