Cara Membuat Aplikasi Web Sederhana

Cara Membuat Aplikasi Web Sederhana
Nyekrip Website Cara Membuat Aplikasi Web Sederhana
Updated on Mei 9, 2015

Admin
Website
55 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. Jquery, framework yang mempermudah dalam penggunaan Javascript. Donwioad
Jquery disini: http://jquery.com/download/.
5. Twitter Bootstrap, kita menggunakannya agar tampilan aplikasi web menjadi
responsif. Download Twitter Bootstrap disini: http://getbootstrap.com/.
6. Web Browser, Untuk pilihannya anda bisa menggunakan Google Chrome, Chromium,
atau Safari. Untuk download chrome disini: http://www.google.com/chrome/
7. 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
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <title>Nyekrip Aplikasi Web Sederhana</title>
5 </head>
6 <body onload="muatDaftarData();">
7 </body>
8 <script type="text/javascript">
9 </script>
10 </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
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <title>Nyekrip Aplikasi Web Sederhana</title>
5 <script src="files/js/jquery.min.js"></script>
6 <script src="files/bootstrap/js/bootstrap.min.js"></script>
7 <link rel="stylesheet" href="files/bootstrap/css/bootstrap.min.css">
8 </head>
10 </body>
12 </script>
13 </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:
1. Judul dan Menu Aplikasi

2. Form Tambah Data
3. Form Edit Data
4. Tampilan Daftar Data
5. 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
2 <div class="col-md-8 col-md-offset-2" ng-controller="listContactCtrl">
3 <div class="page-header">
4 <h1>
5 Nyekrip CRUD Aplikasi Web Sederhana
6 </h1>
7 <ul class="nav nav-pills">
8 <li><a id="nav-list-data" href="javascript:void(0);" onclick="gantiMenu('list-
9 data');">Daftar Data</a></li>
10 <li><a id="nav-tambah-data" href="javascript:void(0);"
11 onclick="gantiMenu('tambah-data');">Tambah Data</a></li>
12 </ul>
13 </div>
14 <div id="tambah-data" class="well" style="display:none;">
15 <form id="form-data">
16 <div id="name-group" class="form-group">
17 <label>Nama:</label>
18 <input type="text" class="form-control" id="nama" name="nama"
19 placeholder="contoh: Nyekrip Web" /><br/>
20 </div>
21 <div id="alamat-group" class="form-group">
22 <label>Alamat:</label>
23 <input type="text" class="form-control" id="alamat" name="alamat"
24 placeholder="contoh: Indonesia" /><br/>
25 </div>
26 <div id="ket-group" class="form-group">
27 <label>Keterangan:</label>
28 <textarea class="form-control" id="ket" name="ket" placeholder="contoh: Web
29 Tutorial Indonesia"></textarea><br/>
30 </div>
31 <input type="button" value="Simpan" onclick="simpanData();" class="btn btn-
32 success btn-small"/>
33 <input type="reset" value="Reset" onclick="" class="btn btn-warning btn-small"/>
34 </form>
35 </div>
36 <div id="edit-data" class="well" style="display:none;">
37 <form id="eform-data">
38 <div id="name-group" class="form-group" style="display:none;">
39 <label>id data:</label>
40 <input type="text" class="form-control" id="eid_data" name="nama"
41 placeholder="" /><br/>
42 </div>
43 <div id="name-group" class="form-group">
44 <label>Nama:</label>
45 <input type="text" class="form-control" id="enama" name="nama"
46 placeholder="contoh: Nyekrip Web" /><br/>
47 </div>
48 <div id="alamat-group" class="form-group">
49 <label>Alamat:</label>
50 <input type="text" class="form-control" id="ealamat" name="alamat"
51 placeholder="contoh: Indonesia" /><br/>
52 </div>
53 <div id="ket-group" class="form-group">
54 <label>Keterangan:</label>
55 <textarea class="form-control" id="eket" name="ket" placeholder="contoh: Web
56 Tutorial Indonesia"></textarea><br/>
57 </div>
58 <input type="button" value="Simpan" onclick="simpanEditData();" class="btn btn-
59 success btn-small"/>
60 <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
2 function gantiMenu(menu){
3 if (menu == "list-data"){
4 muatDaftarData();
5 $('#tambah-data').hide();
6 $('#list-data').fadeIn();
7 $('#edit-data').hide();
8 }
9 else if (menu == "tambah-data"){
10 $('#tambah-data').fadeIn();
11 $('#list-data').hide();
12 $('#edit-data').hide();
13 }else if (menu == "edit-data"){
14 $('#edit-data').fadeIn();
15 $('#tambah-data').hide();
17 }
18 }
19 </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.
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 <script type="text/javascript"></script>.
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 = '<table class="table">';
10 data_app += '<thead>'+
11 '<th>ID</th>'+
12 '<th>nama</th>'+
13 '<th>alamat beli</th>'+
14 '<th>ket</th>'+
15 '<th>aksi</th>'+
16 '<th>aksi 2</th>'+
17 '</thead><tbody>';
18
19 for (i in daftar_data){
20 data_app += '<tr>';
21 data_app += '<td>'+ daftar_data[i].id_data + ' </td>'+
22 '<td>'+ daftar_data[i].nama + ' </td>'+
23 '<td>'+ daftar_data[i].alamat + ' </td>'+
24 '<td>'+ daftar_data[i].ket + ' </td>'+
25 '<td><a class="btn btn-danger btn-small" href="javascript:void(0)"
26 onclick="hapusData(\''+daftar_data[i].id_data+'\')">Hapus</a></td>'+
27 '<td><a class="btn btn-warning btn-small" href="javascript:void(0)"
28 onclick="editData(\''+daftar_data[i].id_data+'\')">Edit</a></td>';
29 data_app += '</tr>';
30
31 }
32 data_app += '</tbody></table>';
33
34 }
35 else {
36 data_app = "Tidak ada data...";
37 }
38
39
40 $('#list-data').html(data_app);
42 $('#list-data').fadeIn(100);
43 }
44 }
45 function editData(id){
48 idx_data = 0;
50 if (daftar_data[i].id_data == id){
51 $("#eid_data").val(daftar_data[i].id_data);
52 $("#enama").val(daftar_data[i].nama);
53 $("#ealamat").val(daftar_data[i].alamat);
54 $("#eket").val(daftar_data[i].ket);
55 daftar_data.splice(idx_data, 1);
56 }
57 idx_data ++;
58 }
59 gantiMenu('edit-data');
60 }
61 }
62
63
64 function simpanData(){
65 nama = $('#nama').val();
66 alamat = $('#alamat').val();
67 ket = $('#ket').val();
68
71 id_data = parseInt(localStorage.getItem('id_data'));
72 }
73 else {
74 daftar_data = [];
75 id_data = 0;
76 }
77
78 id_data ++;
79 daftar_data.push({'id_data':id_data, 'nama':nama, 'alamat':alamat, 'ket':ket});
80 localStorage.setItem('daftar_data', JSON.stringify(daftar_data));
81 localStorage.setItem('id_data', id_data);
82 document.getElementById('form-data').reset();
83 gantiMenu('list-data');
84
85 return false;
86 }
87 function simpanEditData(){
88 id_data = $('#eid_data').val();
89 nama = $('#enama').val();
90 alamat = $('#ealamat').val();
91 ket = $('#eket').val();
92
93 daftar_data.push({'id_data':id_data, 'nama':nama, 'alamat':alamat, 'ket':ket});
95 document.getElementById('eform-data').reset();
96 gantiMenu('list-data');
97
98 return false;
99 }
100
101 function hapusData(id){
104
105 idx_data = 0;
107 if (daftar_data[i].id_data == id){
108 daftar_data.splice(idx_data, 1);
109 }
110 idx_data ++;
111 }
112
114 muatDaftarData();
115 }
116 }
117
118
119
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.
Happy Nyekrip!

Cara Membuat Aplikasi Web Sederhana

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Cara Membuat Aplikasi Web Sederhana

Diunggah oleh

Hak Cipta:

Format Tersedia

Cara Membuat Aplikasi Web Sederhana

Nyekrip Website Cara Membuat Aplikasi Web Sederhana

Updated on Mei 9, 2015

Cara Membuat Aplikasi Web Sederhana: Persiapan Awal

1. Lihat Data Melihat daftar data yang telah dimasukkan

Sedangkan perangkat lunak yang dibutuhkan adalah sebagai berikut.

Membuat Aplikasi Web: Membangun Kerangka

Aplikasi Web Sederhana: Membuat Form dan Navigasi

1. Judul dan Menu Aplikasi

Penjelasan singkat tentang kegunaan Skrip :

Event onload pada tag <body></body> akan menjalankan fungsi muatDaftarData().

Penjelasan singkat kegunaan skrip:

Membuat Fungsi daftar, edit, simpan dan hapus Data

Ketik-kan skrip berikut dalam tag <script type="text/javascript"></script>.

Penjelasan singkat skrip:

Fungsi muatDaftarData() ini di-eksekusi ketika halaman aplikasi dimuat, tombol

Anda mungkin juga menyukai