Kali ini saya akan membahas Cara Membuat Program Input, Update & Delete di HTML Dan Java Script atau biasa dikenal dengan Program CRUD namun Tanpa PHP atau Database. sehingga data yang di input akan tersimpan langsung di penyimpanan HTML nya namun hanya bersifat sementara, sehingga ketika kita sudah menginput data lalu merefresh Program yang kita buat, maka data tersebut akan hilang. saya membuat program ini karena Soal UAS saya mata kuliah Pemrograman Web di Universitas Mercubuana Bekasi. Saya menggunakan konsep Form sebagai media Input dan Tabel sebagai media Output . saya juga akan menggunakan CSS untuk membuat tampilan Web HTML menjadi lebih Menarik. oke langsung saja berikut tampilan Program Web HTML dan Java Script yang akan kita buat:
Hal yang harus disiapkan:
1. Siapkan gambar logo dengan format .PNG.
2. Siapkan gambar dengan resolusi tinggi yang akan kita jadikan sebagai baground.
3. Codingan HTML dan Java Script untuk membuat algoritma program webnya
4. Codingan CSS yang akan mempercantik tampilan web.
langkah 1 & 2 bisa kalian cari sendiri gambarnya sesuai keinginan kalian dan pastikan gambar yang akan digunakan disimpan dalam satu folder yang sama dengan codingan yang akan kita buat.
Langkah ke 3, yaitu Codingan HTML dan Java Script, silahkan ketikan / Copas codingan berikut ke Aplikasi Notepad++ atau Notepad biasa:
<!DOCTYPE html>
<html>
<head>
<title>Created By PrisaizerTech</title>
<marquee><font face="verdana" color="white" size="5"><b>http://prisaizertech.blogspot.co.id/</b></marquee></font>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<center>
<div class="container">
<div class="tab table-1">
<table>
<tr>
<td align="center"><img src="lintasarta.png" width="200" height="89" /></td>
</tr>
<tr>
<td>
<form name="survey">
<center>
<h4><font color="blue">FORM SURVEY<br>Penilaian Pelayanan IT Infrastructure</font></h4></center>
<pre>
<input type='number' placeholder="NOMOR TIKET GANGGUAN" name='vtiket' id="vtiket" size="46"><br>
<input type='text' placeholder="NAMA REQUESTER" name='vnama' id="vnama" size="46"><br>
<b>KATEGORI</b>
<select name='vkategori' id="vkategori">
<option></option>
<option>Absen</option>
<option>Database</option>
<option>Domain</option>
<option>Email</option>
<option>Kabel & Converter</option>
<option>Network & Internet</option>
<option>Operating System</option>
<option>PC & Laptop</option>
</select><br>
<b>TEKNISI / ENGINEER Yang Handle</b>
<select name='vhandle' id="vhandle">
<option></option>
<option>Andri Febriansyah</option>
<option>Azis Saefudin</option>
<option>Fathurrahman Dali</option>
<option>Jaka Abdul</option>
<option>M. Arief</option>
</select><br>
<b>PENILAIAN</b>
<select name='vnilai' id="vnilai">
<option></option>
<option>10</option>
<option>20</option>
<option>30</option>
<option>40</option>
<option>50</option>
<option>60</option>
<option>70</option>
<option>80</option>
<option>90</option>
<option>100</option>
</select>
</pre>
</center>
</form>
<center>
<button class="btn" onclick="SubmitData();">SUBMIT</button>
<button class="btn" onclick="UpdateData();">UPDATE</button>
</td>
</tr>
</table>
</div>
</div>
<br>
<div class="tab table-2">
<table id="survey" cellpadding="2" >
<tr>
<th colspan="7" bgcolor="white" align="center">HASIL FORM SURVEY</th>
</tr>
<tr>
<th width="100">NO.TIKET</th>
<th >NAMA REQUESTER</th>
<th width="150">KATEGORI</th>
<th >TEKNISI / ENGINEER</th>
<th width="150">PENILAIAN</th>
<th colspan="2" width="150">OPTION</th>
</tr>
</table>
</div>
<script>
var rIndex,
table = document.getElementById("survey");
function SubmitData() //fungsi menambahkan data
{
var getLastIndex = table.getElementsByTagName("tr").length;
if(!HarusIsiData()){
var newRow = table.insertRow(getLastIndex),
cell1 = newRow.insertCell(0),
cell2 = newRow.insertCell(1),
cell3 = newRow.insertCell(2),
cell4 = newRow.insertCell(3),
cell5 = newRow.insertCell(4),
cell6 = newRow.insertCell(5),
cell7 = newRow.insertCell(6),
vtiket = document.getElementById("vtiket").value,
vnama = document.getElementById("vnama").value,
vkategori = document.getElementById("vkategori").value;
vhandle = document.getElementById("vhandle").value;
vnilai = document.getElementById("vnilai").value;
vbtn_edit = "<button onclick='EditData(" + getLastIndex + ")'> Edit </button>";
vbtn_delet = "<button onclick='DeleteData(" + getLastIndex + ")'>Delete</button>";
cell1.innerHTML = vtiket;
cell2.innerHTML = vnama;
cell3.innerHTML = vkategori;
cell4.innerHTML = vhandle;
cell5.innerHTML = vnilai;
cell6.innerHTML = vbtn_edit;
cell7.innerHTML = vbtn_delet;
clearform();
document.getElementById("survey").scrollIntoView(true);
alert("Data Berhasil Di Submit. \nSilahkan Cek Tabel ~Hasil Form Survey~");
}
}
function EditData(index) //fungsi tombol edit
{
rIndex = index;
document.getElementById("vtiket").value = table.rows[index].cells[0].innerHTML;
document.getElementById("vnama").value = table.rows[index].cells[1].innerHTML;
document.getElementById("vkategori").value = table.rows[index].cells[2].innerHTML;
document.getElementById("vhandle").value = table.rows[index].cells[3].innerHTML;
document.getElementById("vnilai").value = table.rows[index].cells[4].innerHTML;
alert("Silahkan ubah data ini pada ~Form Survey~");
}
function UpdateData() //fungsi tombol update
{
var vtiket = document.getElementById("vtiket").value;
vnama = document.getElementById("vnama").value;
vkategori = document.getElementById("vkategori").value;
vhandle = document.getElementById("vhandle").value;
vnilai = document.getElementById("vnilai").value;
if(!HarusIsiData()){
table.rows[rIndex].cells[0].innerHTML = vtiket;
table.rows[rIndex].cells[1].innerHTML = vnama;
table.rows[rIndex].cells[2].innerHTML = vkategori;
table.rows[rIndex].cells[3].innerHTML = vhandle;
table.rows[rIndex].cells[4].innerHTML = vnilai;
clearform();
document.getElementById("survey").scrollIntoView(true);
alert("Update Data Berhasil");
}
}
function DeleteData(rowIndex) //fungsi tombol delete
{
var index;
if (rowIndex != null) {
index = rowIndex;
} else {
index = rIndex;
}
table.deleteRow(index);
alert("Data Berhasil Dihapus");
}
function clearform() //fungsi reset form setiap kali setelah klik submit / update
{
document.getElementById("vtiket").value = "";
document.getElementById("vnama").value = "";
document.getElementById("vkategori").value = "";
document.getElementById("vhandle").value = "";
document.getElementById("vnilai").value = "";
}
function HarusIsiData() //fungsi alert saat salah satu bagian form tidak diisi
{
var isEmpty = false,
vtiket = document.getElementById("vtiket").value,
vnama = document.getElementById("vnama").value,
vkategori = document.getElementById("vkategori").value;
vhandle = document.getElementById("vhandle").value;
vnilai = document.getElementById("vnilai").value;
if (vtiket === "") {
alert("~No. Tiket Gangguan~ HARUS DI ISI !!");
isEmpty = true;
}
else if (vnama === "") {
alert("~Nama Requester~ HARUS DI ISI !!");
isEmpty = true;
}
else if (vkategori === "") {
alert("~Kategori~ HARUS DI ISI !!");
isEmpty = true;
}
else if (vhandle === "") {
alert("~Teknisi / Engineer~ HARUS DI ISI !!");
isEmpty = true;
}
else if (vnilai ===""){
alert("~Nilai~ HARUS DI ISI !!");
isEmpty = true;
}
return isEmpty;
}
</script>
</center>
</body>
</html> Kemudian save codingan diatas dengan format .html, misal anda save menjadi index.html , ingat bukan .txt ya!
Langkah 4 kita buat codingan CSS nya untuk mempercantik tampilan web, berikut codingannya:
font-family: 'Open Sans';
.container{
overflow: hidden}
.table-1{
margin-bottom: 30px}
.table-2 {
font-family: sans-serif;
color: #444;
box-shadow:0px 15px 30px #40403d;
}
.table-2 tr th{
background: #35A9DB;
color: #fff;
font-weight: normal;
}
.table-2 td{
padding: 2px 10px;
background: white;
}
.table-2 tr:hover{
background-color: #f5f5f5;
}
.tab table-2 tr:nth-child(even){
background-color: #f2f2f2;
}
.table-1{
background:#c7ccd0;
color: black;
border-radius:10px;
padding:20px;
padding-top:30px;
width:350px;
margin:0 auto;
margin-top: 30px;
box-shadow:0px 15px 30px #40403d;
}
input {
width:280px;
background:#fcfcfc;
border:0;
padding:5px;
border-radius:10px;
margin-bottom: 5px;
}
select {
width:290px;
background:#fcfcfc;
border:0;
padding:5px;
border-radius:10px;
margin-bottom: 5px;
}
.btn {
width: 100px;
padding:10px;
border-radius:10px;
border:0;
background:#326799;
font-size:1em;
color:white;
box-shadow:0px 2px 0px #0b4072;
cursor: pointer;
}
body{
background: url('background.png');
}kemudian save codingan di atas dengan format .css, misal kita save menjadi style.css .
jika 4 langkah diatas sudah kita lakuka
dan pastikan ke 4 file tersebut sudah disimpan dalam satu folder , maka program sudah selesai kita buat dan silahkan anda buka file
index.html yang tadi kita buat untuk melihat hasil programnya.jika ada hal yang belum jelas, silahkan tanyakan di kolom komentar dan jika anda ingin file codingan punya kami, silahkan download filenya berbentuk .rar DISINI!
passwordnya : prisaizertech.blogspot.co.id
Semoga Bermanfaat,,
