Cara Membuat Aplikasi Web Sederhana - Nyekrip
Cara Membuat Aplikasi Web Sederhana
- Updated on
- 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:
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:
- 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.
Sedangkan perangkat lunak yang dibutuhkan adalah sebagai berikut.
- 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.
Mari kita buat terlebih dahulu file 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 > |
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.
| 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 > |
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:
- Judul dan Menu Aplikasi
- Form Tambah Data
- Form Edit Data
- Tampilan Daftar Data
- Fungsi Ganti Menu
Berikut ini adalah perubahan isi dan tag <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 > |
Penjelasan singkat tentang kegunaan Skrip :
- 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…”
Selanjutnya tambahkan skrip javascript berikut untuk membuat fungsi ganti menu, letakkan persis dibawah 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> |
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
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>.
| 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 ( ) ; } } |
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 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.
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!
About The Author
Admin
Nyekrip - Web Tutorial Indonesia



rudy
kalo di ganti pakai MYSQL script.a jadi gimna?
Admin
Article Author
jika anda ingin agar database-nya mysql, maka harus dibuat dulu koneksi kedatabase dan input dan update-nya tinggal eksekusi sql query… lebih jelasnya silahkan kunjungi artikel http://www.nyekrip.com/tutorial-lengkap-belajar-php-mysql-untuk-pemula/
Hari Setiawan
Btw kalau localStorage itu seperti pengganti database ya?
Admin
Article Author
iya, anda benar. Sekalian tidak membutuhkan web server seperti Apache 🙂
Indah Safitri
Sudah ditesting di tablet atau smartphone mas, apa gak ada kendala? thank
Admin
Article Author
sudah saya test dan hasilnya memuaskan 🙂
krisna bara
gan kalau cara mengganti tampilan daftar data yang terbaru paling atas gimana? kan dalam contoh tampilan terbaru setelah tambah data paling bawah..
Admin
Article Author
wah… ane juga baru nyadar… ane juga belum ngerti gan.. bentar biar ane utak-atik dulu.. 🙂
dedy
om.. cara nambahin upload foto gimana…
tahanx om…
Admin
Article Author
ane juga belum yahu tuh gan… pasti nanti fotonya harus disimpan dalam database HTML5 juga… ane juga baru mau belajar.. 🙂
fahmi
kalo data 1 dihapus, kenapa “id” tidak mengulang dari 1?
Admin
Article Author
karena fungsi sama seperti auto increment pada sql.. jadi memori mengingat id terakhir 🙂
Muhammad Adi Yusuf
locaIStorage itu nyimpen di mana? id ane undefined mau di Hapus gak bisa.
isna
Nice post Gan
Sandi Mulyadi
Kira-kira database yang paling cocok buat nangani data yang besar serta menangani proses CRUD realtime apa ya, Mas? 🙂
Admin
Article Author
mysql juga bisa kok gan.. 🙂
Agiel hadid
Gan, JavaScript bisa dibuat selain apilkasi web gak?
Admin
Article Author
javascript itu programnya web browser gan, setahu ane sih g bisa. 🙂
webmaster
Komentar telah dihapus secara otomatis.
ashri
Maaf pak, setelah saya tes, fungsinya belum berjalan, tampilannya sudah bisa, apa masalahnya? terima kasih
i;m batmun
mau nanya gan, local storage itu maksudnya datanya kesimpen dimana?
thx
Admin
Article Author
dalam aplikasi web browser kita gan.. 🙂 tidak menggunakan database.
candra priyatna
gan turtor lengkap kalo mau pakai mysql sebagi dtabase web di atas gimana ???
plus minusnya pakai local storage apa gan??
trima kasih atas sharing ilmunya
ilmu yg berguna adalah salah satu amalan yg tidak akan pernah putus
Admin
Article Author
kalau mau pakai mysql, jatuhnya jadi php dan mysql, cari php dan mysql dalam web nyekrip yah.. 🙂
candra priyatna
kalo pakai skrip java skrip , seperti skrip di atas gak bisa yah gan
Admin
Article Author
tidak bisa, js tidak bisa langsung connect ke mysql. 🙂
Daffa Nur Rafie Alam
pusing liat kodenya -_- hehehe lain kali dicoba deh gan, bookmark dulu ^_^
untung
agar data ny tersimpan permanen dan bsa di buka dmana saja gmana mas??
Admin
Article Author
pakai mysql gan 🙂 tetapi kombinasi dengan php ya..
Yoga Pratama Pangestu
Bermanfaat, terimakasih gan ..
Ara
Mas bro, Mau tanya, kalau mau bikin form isian di Blogger, #di salah satu halaman posting, lalu ketika tombol submit telah ter-klik, data akan terkirim ke email dan saat bersamaan pengunjung blog tersebut langsung pindah halaman bikinnya gimana ya mas, minta tolong dong.. thanks
Admin
Article Author
pertanyaan tidak sesuai dengan artikel nih.. 🙂 kirim email aja ya.. atau hubungi di kontak page
Abdul Gani
Malam admin… Untuk membut folder memulai nya dari mana gan.. tks
Admin
Article Author
dimulai dari membuat kerangka aplikasi web
Angga
Gan, saya mau coba run di hp, aplikasinya apa ya biar bisa di run javascriptnya?
Terimakasih
Admin
Article Author
pakai broswer bawaan hp
Azizah
Saya masih belum paham nih kak 😆. Ajarin dunk kak 😊
Admin
Article Author
email aja di nyekripweb@gmail.com
Fadli
cara konekin ke browser gimna gan ? mngunakan xampp atau apa ini gan masih bingung soalnya ? *mhnpncerahannya thx
Admin
Article Author
tidak membutuhkan server gan, jalan langsung di browser… ketikkan alamatnya langsung aja… 🙂
Aditya Wicaksono
saya masih baru untuk javascript….. aplikasi yg biasanya digunakan untuk membuat app apa ya?
Admin
Article Author
javascript itu running sisi client atau browser… jadi anda tinggal ketikkan di notepad dan running via browser… 🙂
ivan codingindong
gan mau nanya, itu datanya hilangnya pas gimana gan?
apa pas di close? atau pas cache dihapus?
Admin
Article Author
chache dihapus, bisa dipraktekkan 🙂
karimunjawa tour
gan, bagaimana cara buat schema event seo agar keluar di pencarian google
Admin
Article Author
wah apa itu gan? ane g tahu 🙂
febri
cara reset ID bagai mana? trims..
Admin
Article Author
purge cache aja gan…
EDDY PURWOKO GOO
pak, saya ingin belajar membuat web responsive tentang membuat aplikasi CRUD dengan PHP & PostgreSQL. bisa buatkan saya TUTOR lengkap dasar-lanjut, jika cocok saya bersedia membeli TUTOR nya.
Thz, Eddy – 0823 020 73513
kaindras
kalau bootstrap diganti grid 960 bisa nggak gan?, thanks
Admin
Article Author
belum pernah coba 960 gan 🙂
halidi
mas boleh minta email sampean
Admin
Article Author
nyekripweb@gmail.com
A. Sadli
gimana cara mengirim data yg di localstorgae ke mysql…pake AJAX???
Siapa
Tutorial pemberian hak akses pada sistem dong gan, memakai java web. Netbean.