Cara Membuat Aplikasi Web Sederhana

(1)

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.

(2)

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 2 3 4 5 6 7 8 9 10

<!DOCTYPE HTML> <html>

<head>

<title>Nyekrip Aplikasi Web Sederhana</title> </head>

</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 2 3 4 5 6 7 8 9 10 11 12 13

<!DOCTYPE HTML> <html>

<head>

<title>Nyekrip Aplikasi Web Sederhana</title> <script src="fles/js/jquery.min.js"></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:

1. Judul dan Menu Aplikasi

2. Form Tambah Data

3. Form Edit Data

4. Tampilan Daftar Data

5. Fungsi Ganti Menu

(3)

Skrip HTML

<h1>

Nyekrip CRUD Aplikasi Web Sederhana </h1>

<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="alamat-group" class="form-group"> <label>Alamat:</label>

<div id="ket-group" class="form-group"> <label>Keterangan:</label>

</form> </div>

<div id="alamat-group" class="form-group"> <label>Alamat:</label>

<div id="ket-group" class="form-group"> <label>Keterangan:</label>

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

(4)

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

} </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.

(5)

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

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>'+

(6)

28

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

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

(7)

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

} }