Cara Membuat Aplikasi Web Sederhana - Nyekrip

Web Tutorial Indonesia
Beranda / Skrip / Glosarium / Tentang / Nyekrip Yuk
Cari Tutorial di Nyekrip ... CARI
Berlangganan
Cara Membuat Aplikasi Web
Sederhana Silahkan
masukkan
Nyekrip Website Cara Membuat Aplikasi Web
Email Anda
Sederhana
untuk
Berlangganan
Updated on Mei 9, 2015 Admin Website 34 Comments Tutorial
terbaru dari
blog
sederhana ini :)
. Happy
Nyekrip!
Email ..
Berlangganan
Halo Nyekriper! Pada tutorial ini kita akan belajar cara

membuat aplikasi web sederhana tanpa menggunakan
web server seperti apache, hanya menggunakan Tutorial
javascript dan fiturcanggih yang dimiliki HTML5. Pada Populer
saat ini Web browser sudah mendukung HTML5 yang

sudah memiliki fiturseperti canvas, WebGL, localStorage
Cara
Menentukan
yang digunakan untuk menyimpan data dalam bentuk Kualitas
key value, video dan Audio, dan masih banyak lagi. Software
/ Aplikasi
Dengan adanya fiturtersebut kita sudah bisa Web
membangun aplikasi yang dapat diakses secara lokal,
dan tidak perlu membutuhkan web server. Hasil Akhir
Pengertian
Object
dari tutorial ini akan nampak seperti gambar berikut ini: dan Class
Belajar
OOP
Alasan
Struktur
Website
Mempengaruhi
SEO
Cara
Menentukan
Pemrograman
Berbasis
Objek
Cara
Hosting
Tampilan Awal Website
Blog
WordPress
Download Skrip CPanel
Tutorial
Demo Skrip
Kategori
Blog
Anda bisa download aplikasi web dengan klik tombol
Download diatas atau ingin mencobanya secara online CSS
dengan klik Demo Skrip. Untuk membuat Aplikasi web HTML

tersebut, silahkan anda ikuti langkah-langkah berikut ini. Internet
Nyekrip
Cara Membuat Aplikasi Web PHP
Sederhana: Persiapan Awal Website
Dalam artikel ini kita akan membuat sebuah aplikasi web

Tutorial
lokal yang mempunyai fiturCRUD (Create Reset Update
Terbaru
Delete) data. Berikut ini adalah fituryang akan kita buat
untuk membangun aplikasi web lokal: Cara
Membuat
1. Lihat Data Melihat daftar data yang telah Konten
dimasukkan Post SEO

dan
2. Tambah Data Menambah data. Menarik
3. Edit Data Merubah data yang telah dimasukkan Cara

sebelumnya. Membuat
System
4. Hapus Data Menghapus data yang telah dengan
dimasukkan sebelumnya. Object
Oriented
Sedangkan perangkat lunak yang dibutuhkan adalah
sebagai berikut.
Pengertian
Object
dan Class
1. HTML (Hypertext Markup Language), untuk Belajar
mengetahui lebih jelas tentang HTML, anda bisa OOP
mengunjungi artikel Pengenalan HTML:
Langkah Dasar. Cara
Menentukan
2. Javascript, sebuah bahasa pemrograman yang Pemrograman

Berbasis
tertanam di web browser. Javascript membantu
Objek
kita untuk mewujudkan halaman HTML yang
dinamis. Cara
Menentukan
3. CSS, sebuah rules yang digunakan untuk Kualitas
memberikan style pada aplikasi web yang kita Software
kembangkan. / Aplikasi
Web
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
<!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"
<link rel="stylesheet" href="files/bootstrap/css/bootstrap.min.css"
</head>
</body>
</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
Berikut ini adalah perubahan isi dan tag <body></body> di

file index.html yang telah ditambahkan empat bagian
skrip diatas.
Skrip HTML
<div class="col-md-8 col-md-offset-2" ng-controller
<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);"
<li><a id="nav-tambah-data" href="javascript:void(0);"
</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"
</div>
<div id="alamat-group" class="form-group"
<label>Alamat:</label>
</div>
<div id="ket-group" class="form-group"
<label>Keterangan:</label>
<textarea class="form-control"
</div>
<input type="button" value="Simpan"
<input type="reset" value="Reset"
</form>
</div>
<div id="edit-data" class="well" style="display:none;"
<form id="eform-data">

<label>id data:</label>
</div>

<label>Nama:</label>
</div>
<div id="alamat-group" class="form-group"
<label>Alamat:</label>
</div>
<div id="ket-group" class="form-group"
<label>Keterangan:</label>
<textarea class="form-control"
</div>
<input type="button" value="Simpan"
<input type="reset" value="Reset"
<input type="button" value="Cancel"
</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

menjalankanfungsi muatDaftarData().
Cumapadasaat 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="tamb

ah-data" class="well" style="display:none;"></di
v>, kita berikan atribut style style="display:non
e;" supaya hanya muncul ketika navigasi tambah
data di klik. Di bagian akhir dalam tombol submit
kita berikanfungsi simpanData(), fungsi simpan
ini akan di-eksekusi ketika tombol tersebut di-klik
atau dijalankan.
Membuat Form edit data dalam <div id="edit-da

ta" class="well" style="display:none;"></div>.
Sama seperti Form tambah data, di bagian akhir
dalam tombol submit kita berikanfungsi simpanEd
itData(), 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

membuatfungsi ganti menu, letakkan persis dibawah ta
g body:
Skrip 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();
}
}
</script>
Penjelasan singkat kegunaan skrip:
Fungsi gantiMenu(menu)diatas memiliki parameter

berupa string yang akan diperiksa untuk menampilkan d
iv yang diinginkan. Melalui kondisional if dan else if,
tombol di daftar menu yang diklik akan diperiksa.
Dengan memanfaatkanfungsi 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.
MembuatFungsi 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/jav

ascript"></script>.
Skrip Javascript
function muatDaftarData(){
if (localStorage.daftar_data && localStorage

daftar_data = JSON.parse(localStorage.

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
'<td>'+ daftar_data
'<td>'+ daftar_data
'<td>'+ daftar_data
'<td><a class="btn btn-danger btn-small"
'<td><a class="btn btn-warning btn-small
data_app += '</tr>';
}
data_app += '</tbody></table>';
}
else {
data_app = "Tidak ada data...";
}
$('#list-data').html(data_app);
$('#list-data').fadeIn(100);
}
}
function editData(id){

idx_data = 0;
if (daftar_data[i].id_data == id){
$("#eid_data").val(daftar_data
$("#enama").val(daftar_data[i]
$("#ealamat").val(daftar_data[
$("#eket").val(daftar_data[i].
daftar_data.splice(idx_data, 1
}
idx_data ++;
}
gantiMenu('edit-data');
function simpanData(){
nama = $('#nama').val();
alamat = $('#alamat').val();
ket = $('#ket').val();

id_data = parseInt(localStorage.getItem
}
else {
daftar_data = [];
id_data = 0;
}
id_data ++;
daftar_data.push({'id_data':id_data, 'nama'
localStorage.setItem('daftar_data', JSON.stringify
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'
localStorage.setItem('daftar_data', JSON.stringify
document.getElementById('eform-data').reset
gantiMenu('list-data');

return false;
}

function hapusData(id){

idx_data = 0;
if (daftar_data[i].id_data == id){
daftar_data.splice(idx_data, 1
}
idx_data ++;
}

localStorage.setItem('daftar_data', JSON
muatDaftarData();
}
}
Penjelasan singkat skrip:
Fungsi muatDaftarData() ini di-eksekusi ketika

halaman aplikasi dimuat, tombol menu Daftar
Data di-klik, proses penambahan databerhasil,
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
tulisanTidak ada data
Fungsi editData(id) akan di-eksekusi ketika klik
tombol editdi salah satu data. Fungsi ini akan
mengambil id_data yang akan diedit,
berdasarkanid tersebut akan diambil data
tentang nama, alamat, keterangan dan akan
langsung di masukkandalamform edit.
Fungsi simpanData() ketikadi-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() ketikadi-eksekusi,

proses yang pertama kali digunakan adalah
pengambilan nilai dari setiap field di form
editdata.Kemudian setelah proses pengambilan
nilai dari setiap field di form editdata, 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 penghapusandaftar_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 digunakandi komputer dekstop
maupun mobile gadget seperti smartphone dan tablet.
Jika anda ingin membuat website sederhana dengan

Cara Membuat Aplikasi Web Sederhana - Nyekrip

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

Diunggah oleh

Hak Cipta:

Format Tersedia

Web Tutorial Indonesia

Beranda / Skrip / Glosarium / Tentang / Nyekrip Yuk

Cari Tutorial di Nyekrip ... CARI

Halo Nyekriper! Pada tutorial ini kita akan belajar cara

saat ini Web browser sudah mendukung HTML5 yang

dengan klik Demo Skrip. Untuk membuat Aplikasi web HTML

Cara Membuat Aplikasi Web PHP

Sederhana: Persiapan Awal Website

Dalam artikel ini kita akan membuat sebuah aplikasi web

dimasukkan Post SEO

3. Edit Data Merubah data yang telah dimasukkan Cara

2. Javascript, sebuah bahasa pemrograman yang Pemrograman

5. Twitter Bootstrap, kita menggunakannya agar

6. Web Browser, Untuk pilihannya anda bisa

7. Teks Editor, notepad bawaan windows atau teks

Membuat Aplikasi Web:

1. html, dokumen HTML tang berisikan skrip HTML5,

2. files, berupa folder untuk menyimpan file Twitter

Mari kita buat terlebih dahulu file index.html, oke

Langkah selanjutnya adalah memasang aset aplikasi

Setelah menyiapkan file HTML, selanjutnya kita

Aplikasi Web Sederhana:Membuat

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

<div id="tambah-data" class="well" style="display:none;"

<div id="name-group" class="form-group"

<div id="name-group" class="form-group"

Event onload pada tag <body></body> akan

Pada <div class="page-header"></div> kita

Membuat Form tambah data dalam <div id="tamb

Membuat Form edit data dalam <div id="edit-da

Membuat area yang menampilkan daftar data

Selanjutnya tambahkan skrip javascript berikut untuk

Penjelasan singkat kegunaan skrip:

Fungsi gantiMenu(menu)diatas memiliki parameter

Sampai tahap ini kita sudah membuat aplikasi web

MembuatFungsi daftar, edit,

Setelah kita membuat form dan navigasi sebagai elemen

Ketik-kan skrip berikut dalam tag <script type="text/jav

if (localStorage.daftar_data && localStorage

if (localStorage.daftar_data && localStorage

Penjelasan singkat skrip:

Fungsi muatDaftarData() ini di-eksekusi ketika

Fungsi simpanData() ketikadi-eksekusi, proses

Fungsi simpanEditData() ketikadi-eksekusi,

Fungsi hapusData(id) akan di-eksekusi ketika klik

Akhirnya kita selesai juga dalam membuat aplikasi web

Jika anda ingin membuat website sederhana dengan

Anda mungkin juga menyukai