Mari kita belajar pemograman membuat aplikasi pendaftran dengan web base dengan PHP dan Javascript. Kita akan membuat sebuah
aplikasi web lokal yang mempunyai fitur CRUD (Create Reset Update Delete) data. Berikut ini adalah
fitur yang akan kita buat untuk membangun aplikasi web lokal :
1.
Lihat Data – Melihat
daftar data yang telah dimasukkan
2.
Tambah Data – Menambah
data.
3.
Edit Data – Merubah
data yang telah dimasukkan sebelumnya.
4.
Hapus Data – Menghapus
data yang telah dimasukkan sebelumnya.
Sedangkan perangkat lunak yang dibutuhkan
adalah sebagai berikut.
- HTML (Hypertext Markup Language), untuk mengetahui lebih jelas tentang HTML, anda bisa mengunjungi artikel ”Pengenalan HTML: Langkah Dasar”.
- Javascript, sebuah bahasa pemrograman yang tertanam di web browser. Javascript membantu kita untuk mewujudkan halaman HTML yang dinamis.
- CSS, sebuah rules yang digunakan untuk memberikan style pada aplikasi web yang kita kembangkan.
- Jquery, framework yang mempermudah dalam penggunaan Javascript. Donwioad Jquery disini: http://jquery.com/download/.
- Twitter Bootstrap, kita menggunakannya agar tampilan aplikasi web menjadi responsif. Download Twitter Bootstrap disini: http://getbootstrap.com/.
- Web Browser, Untuk pilihannya anda bisa menggunakan Google Chrome, Chromium, atau Safari. Untuk download chrome disini: http://www.google.com/chrome/
- Teks Editor, notepad bawaan windows atau teks editor dasar lainnya, jangan menggunakan Microsoft Word. Saya menyarankan untuk menggunakan notepad++, untuk download disini: http://notepad-plus-plus.org/download/
Membuat Aplikasi Web:
Membangun Kerangka
Pertama kita akan membuat folder dengan nama
“nyekrip aplikasi web” dalam folder tersebut kita akan membuat satu folder lagi
dengan nama “files” dan satu file HTML dengan nama “index.html”. Secara lebih
detail, fungsi dari kedua file adalah sebagai berikut:
1.
html, dokumen HTML
tang berisikan skrip HTML5, Javascript, dan CSS.
2. files, berupa folder
untuk menyimpan file Twitter Bootstrap dan Jquery yang sudah didownload
sebelumnya.
Mari kita buat terlebih dahulu file index.html,
oke langsung saja kita ketik-kan skrip berikut ini :
Skrip
HTML
<!DOCTYPE
HTML>
<html>
<head>
<title>Nyekrip Aplikasi Web
Sederhana</title>
</head>
<body
onload="muatDaftarData();">
</body>
<script type="text/javascript">
</script>
</html>
Langkah
selanjutnya adalah memasang aset aplikasi yaitu file Twitter Bootstrap dan
Jquery yang telah kita download sebelumnya, tambahkan skrip yang telah di-blok
dengan background hitam berikut dibawah tag title.
Skrip
HTML
<!DOCTYPE
HTML>
<html>
<head>
<title>Nyekrip Aplikasi Web
Sederhana</title>
<script
src="files/js/jquery.min.js"></script>
<script
src="files/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet"
href="files/bootstrap/css/bootstrap.min.css">
</head>
<body
onload="muatDaftarData();">
</body>
<script
type="text/javascript">
</script>
</html>
Setelah
menyiapkan file HTML, selanjutnya kita membuat folder yang bernama “files”,
dalam folder tersebut kita masukkan file Twitter Bootstrap dan Jquery.
Aplikasi Web Sederhana: Membuat Form dan Navigasi
Selanjutnya kita
membuat dua form yaitu form tambah data dan form edit data, kita akan membuat
perubahan di dalam dan pada tag <body></body>. Pada tahap ini kita
akan membuat 4 bagian skrip yaitu:
Judul dan Menu
Aplikasi
- Form
Tambah Data
- Form
Edit Data
- Tampilan
Daftar Data
- Fungsi
Ganti Menu
Berikut ini adalah
perubahan isi dan tag <body></body> di file index.html yang telah
ditambahkan empat bagian skrip diatas.
Skrip
HTML
<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>
Penjelasan singkat tentang kegunaan Skrip :
- ·
Event
onload pada tag <body></body> akan menjalankan fungsi
muatDaftarData(). Cuma pada saat ini fungsi tersebut belum kita buat, sehingga
belum bisa memuat daftar data.
- ·
Pada
<div class="page-header"></div> kita membuat judul dan
navigasi aplikasi web serderhana
- ·
Membuat
Form tambah data dalam <div id="tambah-data"
class="well" style="display:none;"></div>, kita
berikan atribut style style="display:none;" supaya hanya muncul
ketika navigasi tambah data di klik. Di bagian akhir dalam tombol submit kita
berikan fungsi simpanData (), fungsi simpan ini akan di-eksekusi ketika tombol
tersebut di-klik atau dijalankan.
- ·
Membuat
Form edit data dalam <div id="edit-data" class="well"
style="display:none;"></div>. Sama seperti Form tambah data,
di bagian akhir dalam tombol submit kita berikan fungsi simpanEditData(),
fungsi edit ini akan di-eksekusi ketika tombol tersebut di-klik atau
dijalankan.
- ·
Membuat
area yang menampilkan daftar data yang telah dimasukkan, jika belum ada data
maka akan menampilkan tulisan “Tidak ada data…”
Selanjutnya
tambahkan skrip javascript berikut untuk membuat fungsi ganti menu, letakkan
persis dibawah tag body :
Skrip
Javascript
<script
type="text/javascript">
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>
Penjelasan
singkat kegunaan skrip :
Fungsi gantiMenu(menu) diatas memiliki
parameter berupa string yang akan diperiksa untuk menampilkan div yang
diinginkan. Melalui kondisional if dan else if, tombol di daftar menu yang
diklik akan diperiksa. Dengan memanfaatkan fungsi Jquery fadeIn() (menampilkan)
dan hide() (menyembunyikan) kita memanipulasi tampilan halaman web agar
seolah-olah pindah halaman.
Sampai tahap ini kita sudah membuat
aplikasi web sederhana dalam tahap view dan sudah menentukan letak dan nama
fungsi, maka selanjutnya kita akan membuat fungsi tersebut agar aplikasi bisa
berjalan dengan baik.
Lihat gambar di bawah Ini :
Membuat
Fungsi daftar, edit, simpan dan hapus Data
Setelah kita membuat form dan navigasi
sebagai elemen view, saatnya kita membuat controller dengan membuat fungsi
daftar, edit, simpan dan hapus data.
Ketik-kan skrip berikut dalam tag <script
type="text/javascript"></script>.
Skrip
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();
}
}
Penjelasan
singkat skrip :
·
Fungsi
muatDaftarData() ini di-eksekusi ketika halaman aplikasi dimuat, tombol menu
“Daftar Data” di-klik, proses penambahan data berhasil, dan penghapusan salah
satu data. Saat fungsi ini dieksekusi, proses yang pertama kali dilakukan
adalah pengecekan daftar_data dan id_data di locaIStorage. Jika data ditemukan,
maka akan menampilkan data beserta tombol hapus dan edit. Jika tidak ada data,
maka akan menampilkan tulisan “Tidak ada data…”
·
Fungsi
editData(id) akan di-eksekusi ketika klik tombol edit di salah satu data. Fungsi ini akan mengambil id_data yang akan
diedit, berdasarkan id tersebut akan diambil data tentang nama, alamat,
keterangan dan akan langsung di masukkan dalam form edit.
·
·
Fungsi
simpanData() ketika di-eksekusi, proses yang pertama kali digunakan adalah
pengambilan nilai dari setiap field di form tambah data. Kemudian setelah
proses pengambilan nilai dari setiap field di form tambah data, dilanjutkan
dengan penyimpanan data ke localStorage.
·
Fungsi
simpanEditData() ketika di-eksekusi, proses yang pertama kali digunakan adalah
pengambilan nilai dari setiap field di form edit data. Kemudian setelah proses
pengambilan nilai dari setiap field di form edit data, dilanjutkan dengan
penyimpanan data ke locaIStorage.
·
Fungsi
hapusData(id) akan di-eksekusi ketika klik tombol hapus di salah satu data.
Proses yang pertama kali terjadi adalah pemeriksaan apakah daftar_barang dan
id_barang sudah tersimpan di localStorage atau belum. Kemudian jika daftar_data
dan id_data sudah tersimpan, dilanjutkan dengan penghapusan daftar_barang
berdasarkan id_barang dari localStorage.
Akhirnya kita
selesai juga dalam membuat aplikasi web sederhana dengan memanfaatkan
localStorage, dengan fitur tersebut kita tidak perlu menggunakan web server
untuk menyimpan data. Selain itu karena dalam aplikasi web sederhana ini kita
menyertakan file Twitter Bootstrap, maka tampilan dari aplikasi web ini sudah
responsif dan bisa digunakan di komputer dekstop maupun mobile gadget seperti
smartphone dan tablet.
