Web Tutorial Indonesia 
Skrip berikut ini adalah bagian dari tutorial ” Cara Membuat Aplikasi Web Sederhana “, silahkan anda uji coba dengan mengkopi paste atau ketikkan skrip berikut dalam teks editor anda. Berikutnya anda jalankan melalui browser kesayangan anda.
Untuk lebih jelasnya dalam memahami dan menggunakan skrip berikut, silahkan anda kunjungi ” Cara Membuat Aplikasi Web Sederhana “.
<!DOCTYPE HTML>
<html>
<head>
<title>Nyekrip Aplikasi Web Sederhana</title>
<script src="www.nyekrip.com/demo/cara-membuat-aplikasi-web-sederhana/files/js/jquery.min.js"></script>
<script src="www.nyekrip.com/demo/cara-membuat-aplikasi-web-sederhana/files/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="www.nyekrip.com/demo/cara-membuat-aplikasi-web-sederhana/files/bootstrap/css/bootstrap.min.css">
</head>
<body onload="muatDaftarData();">
<div class="col-md-8 col-md-offset-2" ng-controller="listContactCtrl">
<div class="page-header">
<h1>
Nyekrip CRUD Aplikasi Web Sederhana
</h1>
<ul class="nav nav-pills">
<li><a id="nav-list-data" href="javascript:void(0);" onclick="gantiMenu('list-data');">Daftar Data</a></li>
<li><a id="nav-tambah-data" href="javascript:void(0);" onclick="gantiMenu('tambah-data');">Tambah Data</a></li>
</ul>
</div>
<div id="tambah-data" class="well" style="display:none;">
<form id="form-data">
<div id="name-group" class="form-group">
<label>Nama:</label>
<input type="text" class="form-control" id="nama" name="nama" placeholder="contoh: Nyekrip Web" /><br/>
</div>
<div id="alamat-group" class="form-group">
<label>Alamat:</label>
<input type="text" class="form-control" id="alamat" name="alamat" placeholder="contoh: Indonesia" /><br/>
</div>
<div id="ket-group" class="form-group">
<label>Keterangan:</label>
<textarea class="form-control" id="ket" name="ket" placeholder="contoh: Web Tutorial Indonesia"></textarea><br/>
</div>
<input type="button" value="Simpan" onclick="simpanData();" class="btn btn-success btn-small"/>
<input type="reset" value="Reset" onclick="" class="btn btn-warning btn-small"/>
</form>
</div>
<div id="edit-data" class="well" style="display:none;">
<form id="eform-data">
<div id="name-group" class="form-group" style="display:none;">
<label>id data:</label>
<input type="text" class="form-control" id="eid_data" name="nama" placeholder="" /><br/>
</div>
<div id="name-group" class="form-group">
<label>Nama:</label>
<input type="text" class="form-control" id="enama" name="nama" placeholder="contoh: Nyekrip Web" /><br/>
</div>
<div id="alamat-group" class="form-group">
<label>Alamat:</label>
<input type="text" class="form-control" id="ealamat" name="alamat" placeholder="contoh: Indonesia" /><br/>
</div>
<div id="ket-group" class="form-group">
<label>Keterangan:</label>
<textarea class="form-control" id="eket" name="ket" placeholder="contoh: Web Tutorial Indonesia"></textarea><br/>
</div>
<input type="button" value="Simpan" onclick="simpanEditData();" class="btn btn-success btn-small"/>
<input type="reset" value="Reset" onclick="" class="btn btn-warning btn-small"/>
<input type="button" value="Cancel" onclick="gantiMenu('list-data');" class="btn btn-warning btn-small"/>
</form>
</div>
<div id="list-data" class="well">
Tidak ada data...
</div>
</div>
</body>
<script type="text/javascript">
function muatDaftarData(){
if (localStorage.daftar_data && localStorage.id_data){
daftar_data = JSON.parse(localStorage.getItem('daftar_data'));
var data_app = "";
if (daftar_data.length > 0){
data_app = '<table class="table">';
data_app += '<thead>'+
'<th>ID</th>'+
'<th>nama</th>'+
'<th>alamat beli</th>'+
'<th>ket</th>'+
'<th>aksi</th>'+
'<th>aksi 2</th>'+
'</thead><tbody>';
for (i in daftar_data){
data_app += '<tr>';
data_app += '<td>'+ daftar_data[i].id_data + ' </td>'+
'<td>'+ daftar_data[i].nama + ' </td>'+
'<td>'+ daftar_data[i].alamat + ' </td>'+
'<td>'+ daftar_data[i].ket + ' </td>'+
'<td><a class="btn btn-danger btn-small" href="javascript:void(0)" onclick="hapusData(\''+daftar_data[i].id_data+'\')">Hapus</a></td>'+
'<td><a class="btn btn-warning btn-small" href="javascript:void(0)" onclick="editData(\''+daftar_data[i].id_data+'\')">Edit</a></td>';
data_app += '</tr>';
}
data_app += '</tbody></table>';
}
else {
data_app = "Tidak ada data...";
}
$('#list-data').html(data_app);
$('#list-data').hide();
$('#list-data').fadeIn(100);
}
}
function editData(id){
if (localStorage.daftar_data && localStorage.id_data){
daftar_data = JSON.parse(localStorage.getItem('daftar_data'));
idx_data = 0;
for (i in daftar_data){
if (daftar_data[i].id_data == id){
$("#eid_data").val(daftar_data[i].id_data);
$("#enama").val(daftar_data[i].nama);
$("#ealamat").val(daftar_data[i].alamat);
$("#eket").val(daftar_data[i].ket);
daftar_data.splice(idx_data, 1);
}
idx_data ++;
}
gantiMenu('edit-data');
}
}
function simpanData(){
nama = $('#nama').val();
alamat = $('#alamat').val();
ket = $('#ket').val();
if (localStorage.daftar_data && localStorage.id_data){
daftar_data = JSON.parse(localStorage.getItem('daftar_data'));
id_data = parseInt(localStorage.getItem('id_data'));
}
else {
daftar_data = [];
id_data = 0;
}
id_data ++;
daftar_data.push({'id_data':id_data, 'nama':nama, 'alamat':alamat, 'ket':ket});
localStorage.setItem('daftar_data', JSON.stringify(daftar_data));
localStorage.setItem('id_data', id_data);
document.getElementById('form-data').reset();
gantiMenu('list-data');
return false;
}
function simpanEditData(){
id_data = $('#eid_data').val();
nama = $('#enama').val();
alamat = $('#ealamat').val();
ket = $('#eket').val();
daftar_data.push({'id_data':id_data, 'nama':nama, 'alamat':alamat, 'ket':ket});
localStorage.setItem('daftar_data', JSON.stringify(daftar_data));
document.getElementById('eform-data').reset();
gantiMenu('list-data');
return false;
}
function hapusData(id){
if (localStorage.daftar_data && localStorage.id_data){
daftar_data = JSON.parse(localStorage.getItem('daftar_data'));
idx_data = 0;
for (i in daftar_data){
if (daftar_data[i].id_data == id){
daftar_data.splice(idx_data, 1);
}
idx_data ++;
}
localStorage.setItem('daftar_data', JSON.stringify(daftar_data));
muatDaftarData();
}
}
function gantiMenu(menu){
if (menu == "list-data"){
muatDaftarData();
$('#tambah-data').hide();
$('#list-data').fadeIn();
$('#edit-data').hide();
}
else if (menu == "tambah-data"){
$('#tambah-data').fadeIn();
$('#list-data').hide();
$('#edit-data').hide();
}else if (menu == "edit-data"){
$('#edit-data').fadeIn();
$('#tambah-data').hide();
$('#list-data').hide();
}
}
</script>
</html>
Asalamualaikum
Maaf ganggu waktunya bos saya ingin bertanya cara membuat web bisa lihat di anroid gimana bos caranya bos
Wasalam