Oleh : Admin Nyekrip
Sumber : http://www.nyekrip.com/cara-membuat-aplikasi-web-sederhana/
Dalam artikel ini 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:
- Lihat Data – Melihat daftar data yang telah dimasukkan
- Tambah Data – Menambah data.
- Edit Data – Merubah data yang telah dimasukkan sebelumnya.
- Hapus Data – Menghapus data yang telah dimasukkan sebelumnya.
- 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:- html, dokumen HTML tang berisikan skrip HTML5, Javascript, dan CSS.
- files, berupa folder untuk menyimpan file Twitter Bootstrap dan Jquery yang sudah didownload sebelumnya.
index.html, oke langsung saja kita ketik-kan skrip berikut ini:|
1
2
3
4
5
6
7
8
9
10
|
<!DOCTYPE HTML>
<html>
<head>
<title>Nyekrip Aplikasi Web Sederhana</title>
</head>
<body onload="muatDaftarData();">
</body>
<script type="text/javascript">
</script>
</html>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<!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>
|
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
<body></body> di file index.html yang telah ditambahkan empat bagian skrip diatas.|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
<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>
|
- Event onload pada tag
<body></body>akan menjalankan fungsimuatDaftarData(). 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 stylestyle="display:none;"supaya hanya muncul ketika navigasi tambah data di klik. Di bagian akhir dalam tombol submit kita berikan fungsisimpanData(), 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 fungsisimpanEditData(), 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…”
tag body:|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<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>
|
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.Membuat Fungsi daftar, edit, simpan dan hapus Data
Tambah Data
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>.|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
|
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();
}
}
|
- 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 mengambilid_datayang 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 kelocalStorage. - 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 kelocaIStorage. - 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 dilocalStorageatau belum. Kemudian jika daftar_data dan id_data sudah tersimpan, dilanjutkan dengan penghapusan daftar_barang berdasarkan id_barang darilocalStorage.
Tidak ada komentar:
Posting Komentar