Cara Membuat Aplikasi Web Sederhana

Cara Membuat Aplikasi Web Sederhana
Nyekrip » Website » Cara Membuat Aplikasi Web Sederhana


Updated on Mei 9, 2015



Admin



Website



44 Comments

Halo Nyekriper! Pada tutorial ini kita akan belajar cara membuat aplikasi web sederhana tanpa menggunakan
web server seperti apache, hanya menggunakan javascript dan fitur canggih yang dimiliki HTML5. Pada saat
ini Web browser sudah mendukung HTML5 yang sudah memiliki fitur seperti canvas, WebGL, localStorage

yang digunakan untuk menyimpan data dalam bentuk key value, video dan Audio, dan masih banyak lagi.
Dengan adanya fitur tersebut kita sudah bisa membangun aplikasi yang dapat diakses secara lokal, dan tidak
perlu membutuhkan web server. Hasil Akhir dari tutorial ini akan nampak seperti gambar berikut ini:

Tampilan Awal
Download Skrip
Demo
Skrip
Anda bisa download aplikasi web dengan klik tombol “Download” diatas atau ingin mencobanya secara online

dengan klik “Demo Skrip”. Untuk membuat Aplikasi web tersebut, silahkan anda ikuti langkah-langkah berikut
ini.

Cara Membuat Aplikasi Web Sederhana: Persiapan Awal
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:
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.

1.

HTML (Hypertext Markup Language), untuk mengetahui lebih jelas tentang HTML, anda bisa
mengunjungi artikel ”Pengenalan HTML: Langkah Dasar”.
2. Javascript, sebuah bahasa pemrograman yang tertanam di web browser. Javascript membantu kita
untuk mewujudkan halaman HTML yang dinamis.
3. CSS, sebuah rules yang digunakan untuk memberikan style pada aplikasi web yang kita
kembangkan.

4.
5.
6.
7.

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-plusplus.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.
2.

html, dokumen HTML tang berisikan skrip HTML5, Javascript, dan CSS.
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
1
2

3

4
Nyekrip Aplikasi Web Sederhana
5

6

7

8

9

10

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

1
2
3

4
Nyekrip Aplikasi Web Sederhana
5

6

7

8

9

10
11
12
13

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 . Pada tahap ini kita akan membuat 4 bagian skrip yaitu:
1.
2.
3.
4.
5.

Judul dan Menu Aplikasi
Form Tambah Data
Form Edit Data
Tampilan Daftar Data
Fungsi Ganti Menu

Berikut ini adalah perubahan isi dan tag di file index.html yang telah ditambahkan empat

bagian skrip diatas.

Skrip HTML
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





Nyekrip CRUD Aplikasi Web Sederhana


Daftar Data
Tambah Data





Nama:

Alamat:



Keterangan:









id data:



Nama:



Alamat:



Keterangan:








Tidak ada data...




Penjelasan singkat tentang kegunaan Skrip :


Event onload pada tag akan menjalankan fungsi muatDaftarData(). Cuma pada saat
ini fungsi tersebut belum kita buat, sehingga belum bisa memuat daftar data.
 Pada kita membuat judul dan navigasi aplikasi web serderhana
 Membuat Form tambah data dalam , 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 .
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
1



2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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();
}
}


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.

Membuat Fungsi daftar, edit, simpan dan hapus Data

Tambah 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 .
Skrip Javascript
1
function muatDaftarData(){
2
if (localStorage.daftar_data && localStorage.id_data){
3
4
daftar_data = JSON.parse(localStorage.getItem('daftar_data'));
5
6
var data_app = "";
7
8
if (daftar_data.length > 0){
9
data_app = '';
10
data_app += ''+
11
'ID'+
12
'nama'+
13
'alamat beli'+
14
'ket'+
15
'aksi'+
16
'aksi 2'+
17
'';
18
19
for (i in daftar_data){
20
data_app += '';
21
data_app += ''+ daftar_data[i].id_data + ' '+
22
''+ daftar_data[i].nama + ' '+
23
''+ daftar_data[i].alamat + ' '+
24
''+ daftar_data[i].ket + ' '+
25
'Hapus'+
27
'Edit';
29
data_app += '';
30
31
}
32
data_app += '';
33
34
}
35
else {
36
data_app = "Tidak ada data...";
37
}
38
39
40
$('#list-data').html(data_app);
41
$('#list-data').hide();
42
$('#list-data').fadeIn(100);
43
}
44
}
45
46
function editData(id){
47
48
if (localStorage.daftar_data && localStorage.id_data){
49
daftar_data = JSON.parse(localStorage.getItem('daftar_data'));
50
idx_data = 0;
51
for (i in daftar_data){
52
if (daftar_data[i].id_data == id){
53
$("#eid_data").val(daftar_data[i].id_data);
54
$("#enama").val(daftar_data[i].nama);
55
$("#ealamat").val(daftar_data[i].alamat);
56
$("#eket").val(daftar_data[i].ket);
57
daftar_data.splice(idx_data, 1);
58
}
59
idx_data ++;
60
}
61
gantiMenu('edit-data');
62
63
64
}
65
66
}
67
68
69
function simpanData(){
70
nama = $('#nama').val();
71
alamat = $('#alamat').val();
72
ket = $('#ket').val();
73
74
if (localStorage.daftar_data && localStorage.id_data){
75
daftar_data = JSON.parse(localStorage.getItem('daftar_data'));
76
id_data = parseInt(localStorage.getItem('id_data'));
77
}
78
else {
79
daftar_data = [];
80
id_data = 0;
81
}
82
83
id_data ++;
84
daftar_data.push({'id_data':id_data, 'nama':nama, 'alamat':alamat, 'ket':ket});
85
localStorage.setItem('daftar_data', JSON.stringify(daftar_data));
86
localStorage.setItem('id_data', id_data);
87
document.getElementById('form-data').reset();
88
gantiMenu('list-data');
89
90
return false;
91
}
92
93
94
function simpanEditData(){
95
id_data = $('#eid_data').val();
96
nama = $('#enama').val();
97
alamat = $('#ealamat').val();
98
ket = $('#eket').val();
99
10
daftar_data.push({'id_data':id_data, 'nama':nama, 'alamat':alamat, 'ket':ket});
0
localStorage.setItem('daftar_data', JSON.stringify(daftar_data));
10
document.getElementById('eform-data').reset();
1
gantiMenu('list-data');
10
2
return false;
10
}
3
10
function hapusData(id){
4
if (localStorage.daftar_data && localStorage.id_data){
10
daftar_data = JSON.parse(localStorage.getItem('daftar_data'));
5
10
idx_data = 0;
6
for (i in daftar_data){

10
7
10
8
10
9
11
0
11
1
11
2
11
3
11
4
11
5
11
6
11
7
11
8
11
9

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.
Jika anda ingin membuat website sederhana dengan html5 kunjungi artikel “Cara Membuat Website
Sederhana dengan HTML 5“.