Source: http://germo-ndeso.blogspot.co.id/2012/02/cara-membuat-tanggal-posting-blog.html#ixzz4ObErovl4
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:
Skrip HTML
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.
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="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.
Skrip HTML
