MEMBANGUN APLIKASI BASIS DATA SEDERHANA UNTUK ANDROID DENGAN MENGGUNAKAN HTML5, WEB SQL DAN JAVASCRIPT. Disusun Oleh: TIM LABORATORIUM

MEMBANGUN APLIKASI BASIS DATA SEDERHANA UNTUK ANDROID DENGAN MENGGUNAKAN HTML5, WEB SQL DAN JAVASCRIPT

Disusun Oleh: TIM LABORATORIUM

SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER BANI SALEH BEKASI 2015

DAFTAR ISI DAFTAR ISI........................................................................................................... i PENGENALAN BAHASA................................................................................... 1 A.

HTML5 ................................................................................................................. 1 

B.

HTML5 vs Mobile Native................................................................................... 1 

Perangkat Lunak ............................................................................................. 2



Pengetahuan Development .............................................................................. 2



Proses Kompilasi............................................................................................. 3



Performa.......................................................................................................... 3

Javascript.............................................................................................................. 4 

Sejarah Javascript ................................................................................................ 4

PENGENALAN BASIS DATA............................................................................ 5 A.

Pengertian Basis Data.......................................................................................... 5

B.

Pembagian Basis Data Menurut Jenisnya ......................................................... 5

C.

SQL ....................................................................................................................... 5 

Sejarah SQL........................................................................................................ 5

PENGENALAN SOFTWARE............................................................................. 7 CONTOH KASUS................................................................................................. 9 Membuat Basis Data Perpustakaan sederhana.......................................................... 9 

Merancang Struktur Tabel .................................................................................. 9



Tabel ................................................................................................................... 9





Tabel anggota.................................................................................................. 9



Tabel buku ...................................................................................................... 9



Tabel pinjam ................................................................................................. 10 Relasi Antar Tabel ............................................................................................ 10

PERANCANGAN APLIKASI ........................................................................... 11 A.

Membuat File Index........................................................................................... 11

B.

Membuat Layout Menu Aplikasi ..................................................................... 14

C.

Membuat Layout Form Pinjaman ................................................................... 16

D.

Membuat Layout Form Anggota...................................................................... 21

E.

Membuat Layout Form Buku........................................................................... 26

i

F.

Membuat Fungsi Untuk Menu Utama............................................................. 29

G.

Membuat Database Perpustakaan ................................................................... 37

H.

Tabel Buku ......................................................................................................... 39 

Membuat Tabel Buku ....................................................................................... 39



Merubah Elemen Form Buku Menjadi Obyek .................................................. 42

I.

Tabel Anggota .................................................................................................... 43 

Membuat Tabel Anggota .................................................................................. 43



Merubah Elemen Form Anggota Menjadi Obyek ............................................. 44

J.

Tabel Pinjam ...................................................................................................... 45 

Membuat Tabel Pinjam ..................................................................................... 45



Merubah Elemen Form Pinjam Menjadi Obyek ............................................... 46

K.

Membuat Fungsi Untuk Opsi Pilihan .............................................................. 48 

Fungsi Opsi Pilihan id_anggota ........................................................................ 49



Fungsi Opsi Pilihan no_buku............................................................................ 51

L.

Membuat Fungsi Simpan Data ......................................................................... 52 

Membuat Fungsi Simpan Form Anggota.......................................................... 52



Membuat Fungsi Simpan Form Buku............................................................... 55



Membuat Fungsi Simpan Form Pinjam ............................................................ 56

M.

Membuat Fungsi Membersihkan Value .......................................................... 59



Membuat Fungsi Membersihkan Value Form Anggota.................................... 59



Membuat Fungsi Membersihkan Value Form Buku......................................... 60



Membuat Fungsi Membersihkan Value Form Pinjam...................................... 61

N.

Membuat Fungsi Menampilkan Data Dari Tabel........................................... 62 

Fungsi Menampilkan Data Tabel Pinjaman...................................................... 63



Fungsi Menampilkan Data Tabel Anggota ....................................................... 66



Fungsi Menampilkan Data Tabel Buku ............................................................ 68

O.

Membuat Fungsi Menghapus Data Tabel ....................................................... 71 

Fungsi Menghapus Data Tabel Buku................................................................ 71



Fungsi Menghapus Data Tabel Anggota........................................................... 74



Fungsi Menghapus Data Tabel Pinjam ............................................................. 75

P.

Membuat Fungsi Mengedit Data Tabel ........................................................... 76 

Fungsi Edit Data Tabel Pinjam ......................................................................... 79

ii



Fungsi Edit Data Tabel Anggota....................................................................... 81



Fungsi Edit Data Tabel Buku............................................................................ 82

Q.

Membuat Fungsi Update Data Tabel............................................................... 83 

Fungsi Update Data Tabel Pinjam .................................................................... 84



Fungsi Update Data Tabel Anggota.................................................................. 86



Fungsi Update Data Tabel Buku....................................................................... 87

R.

Mempublish File HTML Menjadi Aplikasi Android Dengan Phonegap ..... 88 

Membuild Aplikasi Dengan Phonegap ............................................................. 88

DAFTAR PUSTAKA........................................................................................... iv

iii

PENGENALAN BAHASA A. HTML5 HTML5 adalah sebuah

bahasa penanda

(Markup Language) untuk

menstrukturkan dan menampilkan isi dari sebuah halaman web (World Wide Web), sebuah teknologi inti dari internet. HTML5 adalah revisi kelima dari HTML (yang pertama kali diciptakan pada tahun 1990 dan versi keempatnya, HTML4, pada

tahun 1997 dan hingga bulan Juni 2011 masih dalam

pengembangan. Tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.

 HTML5 vs Mobile Native Beberapa tahun yang lalu, atau kira-kira pada pertengahan 2011 dirilislah sebuah framework

untuk pengembangan aplikasi mobile

multiplatform yang bernama Phonegap. Meskipun sebenarnya

ada

framework lain seperti Kendo dan Sencha, tapi tampaknya Phonegap lebih populer dibanding keduanya. Phonegap sendiri merupakan framework yang dapat digunakan untuk membangun aplikasi mobile dimana seorang developer hanya memerlukan bantuan HTML5 programming, tanpa perlu expert pada bahasa pemrograman native masing-masing platform. Kita akan melihat beberapa perbandingan antara membangun aplikasi dengan HTML5 dan Mobile Native :

1



Perangkat Lunak

Dari sisi perangkat lunak yang digunakan, jelas sekali bahwa framework Cross-platform menggunakan plugin maupun extensi tertentu pada masing-masing aplikasi native agar bisa digunakan untuk proses kompilasi. Sebagai contoh Eclipse harus ditambah plugin tertentu untuk kompilasi Phonegap. Meskipun Phonegap juga telah menyediakan proses building secara cloud, namun bilamana aplikasi mengharuskan memiliki fitur tertentu cloud tidak akan bisa maksimal. Dalam beberapa

kasus seorang developer baru, penggunaan

Phonegap cukup rikuh dari sisi instalasi aplikasi pendukung. Dalam hal praktis dan tidaknya, proses development secara native jelas unggul apabila menggunakan framework HTML5.



Pengetahuan Development

Pengembangan sebuah aplikasi mobile, tentunya membutuhkan pengetahuan yang setidaknya harus mendalam dan tidak bisa setengahtengah. Contohnya seorang developer Android tentu harus paham betul Java, Windows Phone dengan C#, ataupun iOS dengan Objective C. Hal ini tentu saja akan cukup merepotkan seorang developer yang hanya paham satu jenis bahasa pemrograman apabila dia ingin mendevelop pada masing-masing platform. Akan tetapi semenjak

munculnya framework HTML5, para

developer mobile ataupun website agaknya bisa bernafas lega atas ketergantungan masing-masing native programming language tersebut. Selain itu, penggunaan framework cross-platform juga sering dikaitkan dengan pemangkasan anggaran untuk pembuatan aplikasi mobile.

2



Proses Kompilasi

Jika dilihat pada satu sisi pandang, HTML5 tentu lebih unggul dibanding native dari sisi kompilasi. Semisal cloud phonegap yang memiliki fasilitas untuk melakukan kompilasi langsung pada beberapa platform. Tapi jika dilihat dari sisi pandang hasil dan performa, maka kompilasi menggunakan native tentu lebih unggul. 

Performa

Development menggunakan native tentu saja akan unggul jika dilihat dari sisi performa hasil akhir aplikasi. Meski ada beberapa framework HTML5 seperti Ludei JS yang menyebut bahwa performa hasil akhir aplikasi setara dengan native, tentu saja hasilnya akan memiliki perbedaan. (Huda, 2014) Untuk lebih lanjut mempeleajari HTML5 dapat dilihat pada link berikut : http://www.w3schools.com/html/

3

B. Javascript JavaScript adalah bahasa pemrograman yang khusus untuk halaman web agar halaman web menjadi lebih hidup. Kalau dilihat dari suku katanya terdiri dari dua suku kata, yaitu Java dan Script. Java adalah Bahasa pemrograman berorientasi objek, sedangkan Script adalah serangkaian instruksi program.

 Sejarah Javascript Javascript diperkenalkan pertama kali oleh Netscape pada tahun 1995. Pada awalnya bahasa yang sekarang disebut JavaScript ini dulunya dinamai ³LiYeScUiSW´ yang berfungsi sebagai bahasa sederhana untuk browser Netscape Navigator 2 yang sangat populer pada saat itu. Kemudian sejalan dengan

sedang giatnya kerjasama

antara

Netscape dan Sun (pengembang bahasa pemrograman ³JaYa´) pada masa itu, maka Netscape memberikan nama ³JaYaScUiSW´ kepada bahasa tersebut pada tanggal 4 desember 1995. Pada saat yang bersamaan Microsoft sendiri mencoba untuk mengadaptasikan teknologi ini yang mereka sebut sebagai ³JVcUiSW´ di browser milik mereka yaitu Internet Explorer 3. JavaScript

sendiri merupakan modifikasi dari bahasa

pemrograman C++ dengan pola penulisan yang lebih sederhana dari bahasa pemrograman C++. (Syafiq, 2006) Untuk lebih lanjut mempeleajari Javascript dapat dilihat pada link berikut : http://www.w3schools.com/js/default.asp

4

PENGENALAN BASIS DATA A. Pengertian Basis Data Database atau basis data adalah kumpulan data yang disimpan secara sistematis di dalam komputer dan dapat diolah atau dimanipulasi menggunakan perangkat lunak (program aplikasi) untuk menghasilkan informasi. Pendefinisian basis data meliputi spesifikasi berupa tipe data, struktur, dan juga batasan-batasan data yang akan disimpan. B. Pembagian Basis Data Menurut Jenisnya Basis data flat-file. Basis data flat-file ideal untuk data berukuran kecil dan dapat dirubah dengan mudah. Pada dasarnya, mereka tersusun dari sekumpulan string dalam satu atau lebih file yang dapat diurai untuk mendapatkan informasi yang disimpan. Basis data flat-file baik digunakan untuk menyimpan daftar atau data yang sederhana dan dalam jumlah kecil. Basis data relasional. Basis data ini mempunyai struktur yang lebih logis terkait cara penyimpanan. Kata "relasional" berasal dari kenyataan bahwa tabeltabel yang berada di basis data dapat dihubungkan satu dengan lainnya. Basis data relasional menggunakan sekumpulan tabel dua dimensi yang masing-masing tabel tersusun atas baris (tupel) dan kolom (atribut). Untuk membuat hubungan antara dua atau lebih tabel, digunakan key (atribut kunci) yaitu primary key di salah satu tabel dan foreign key di tabel yang lain. (Hindro) C. SQL SQL (Structured Query Language) adalah bahasa pemrograman khusus yang digunakan untuk memanajemen data dalamRDBMS. SQL biasanya berupa perintah sederhana yang berisi instruksi-instruksi untuk manipulasi data. Perintah 64 / LQL VHULQJ MXJD GLVLQJNDW GHQJDQ VHEXWDQ µqueryµ_  Sejarah SQL Bersamaan dengan paper Dr. Edgar F. Codd pada tahun 1969 tentang Teori Database Relational, ia pun mengajukan sebuah bahasa yang disebut DSL/Alpha untuk memanajemen

data dalam relational

database. Berdasarkan ide Dr.Codd ini, beberapa saat setelah itu IBM 5

mencoba

merancang

bahasa

prototipe

sederhana DSL/Alpha yang

disebut SQUARE. Pada tahun 1970, team yang beranggotakan peneliti IBM, Donald

D.

Chamberlin

dan

Raymond

F.

Boyce,

mengembangkan SQUARE lebih lanjut menjadi SEQUEL (Structured English Query Language). SEQUEL digunakan untuk mengoperasikan prototipe RDBMS pertama IBM, System R. Dikemudian hari, SEQUEL berubah

nama

menjadi SQL karena

permasalahan

merk

dagang

(trademark) dengan sebuah perusahaan pesawat di inggris yang terlebih dahulu telah memakai nama SEQUEL. Pada akhir 1970an, perusahaan Relational

Software, Inc.

(sekarang Oracle) melihat potensi bahasa SQL dan mengembangkan sendiri versi SQL untuk RDBMS mereka. Oracle V2 (versi 2) yang dirilis Juni 1979 adalah RDBMS komersial pertama yang mengimplementasikan SQL. Dengan

kemudahan

yang

ditawarkan,

SQL

mulai

diimplementasikan oleh berbagai RDBMS dengan versi SQL mereka masing-masing. Namun

hal ini

menimbulkan permasalahan karena

perbedaan penerapan SQL dari satu aplikasi dengan aplikasi database lainnya yang tidak seragam.Sehingga

pada tahun 1986, badan standar

amerika, ANSI (American National Standards Institute) merancang sebuah standar untuk SQL. Satu tahun setelahnya, ISO (International Standart Organization) juga mengeluarkan standar untuk SQL. Versi terakhir standar SQL dirilis pada 2011, yang dinamakan SQL 2011. Dengan standar ini diharapkan ada keseragaman SQL antar aplikasi RDBMS. Akan tetapi walaupun sudah ada standar tentang SQL, banyak SHUXVDKDDQ 5'%06 \DQJ PHQDPEDKNDQ µfitur¶ 64/ VHODLQ VWDQGDU \DQJ ada. MySQL juga memiliki SQL yang tidak standar, yang tidak ada pada Oracle, begitu juga sebaliknya. (Duniailkom)

Untuk lebih lanjut mempeleajari SQL dapat dilihat pada link berikut : http://www.w3schools.com/sql/default.asp

6

PENGENALAN SOFTWARE Dalam tutorial kali ini, hanya akan digunakan dua software dan satu cloud apps, software ± software tersebut antara lain : 1. Notepad (Direkomendasikan Notepad ++). Notepad adalah aplikasi yang terdapat pada komputer berfungsi sebagai media untuk mengubah suatu file/kode sumber bebas serta mendukung berbagai bahasa

pemrograman.notepad biasanya

berfungsi mengubah kode ke dalam format txt dan format lainnya.

Notepad++ adalah sebuah program penynting teks dan bahasa pemrograman yang berjalan di windows. Mendukung banyak sekali bahasa pemrograman. Merupakan program opensource yang dikembangkan oleh sourceforge.net.

2. Google Chrome Browser (min. versi 32). Google chrome adalah browser besutan Google yang diklaim sangat cepat, sederhana

dan aman yang

dikhususkan untuk

teknologi web modern. Browser Chrome adalah browser yang paling baik mendukung HTML5 dan Javascript dibandingkan browser lain yang beredar saat ini.

3. Phonegap Build Cloud. Phonegap adalah sebuah kerangka kerja/framework open source yang dipakai untuk membuat aplikasi cross-platform mobile dengan HTML5, CSS, dan JavaScript. PhoneGap menjadi suatu solusi yang ideal untuk seorang web developer yang tertarik dalam pembuatan aplikasi di smartphone. dengan framework phonegap kita hanya melakukan satu kali coding lansung bisa di compile kesemua platform sekaligus. PhoneGap SDK menyediakan sebuah API, yaitu sebuah lapisan abstrak yang menyediakan pengembang dengan akses ke fitur hardware dan platform tertentu. PhoneGap menjelaskan bahwa 7

dengan kode yang sama dapat digunakan pada sejumlah platform mobile dengan sedikit perubahan koding ataupun tidak, yang membuat aplikasi kita dapat dipakai untuk kalangan pengguna yang lebih luas. Untuk dapat mengakses phonegap secara cloud, dapat

dilakukan

dengan

mengakses

link

http://www.build.phonegap.com.

8

CONTOH KASUS Membuat Basis Data Perpustakaan sederhana  Merancang Struktur Tabel Sebelum membuat database/basis data, langkah pertama yang harus dilakukan adalah merancang terlebih dulu struktur tabel yang akan di buat. Di dalam database perpustakaan ini dipelukan 3 buah tabel, yaitu  Tabel anggota,  Tabel buku,  dan Tabel pinjam  Tabel 



Tabel anggota Nama Field

Type

id_anggota

Text

nama

Text

alamat

Text

kota

Text

no_tlp

Text

tgl_lahir

Date

Tabel buku Nama Field

Type

no_buku

Text

judul

Text

pengarang

Text

thn_terbit

Date

jenis_buku

Text

status

Text

9



Tabel pinjam Nama Field

Type

no_pinjam

Text

id_anggota

Text

no_buku

Text

tgl_pinjam

Date

tgl_kembali

Date

 Relasi Antar Tabel Tabel buku

Tabel anggota 1

id_anggota (PK) nama alamat kota no_tlp tgl_lahir

1

no_buku(PK) judul pengarang thn_terbit jenis_buku status

Tabel pinjam ’

no_pinjam(PK) id_anggota (FK) no_buku (FK) tgl_pinjam tgl_kembali

’

10

PERANCANGAN APLIKASI Aplikasi yang akan dibuat akan berbasis pada HTML5 dan bahasa pemrograman Javascript. Sedangkan untuk compile menjadi APK akan dibuild di phonegap secara cloud. Berikut ini adalah langkah ± langkah dalam membuat Aplikasi Basis Data Perpustakaan sederhana : A. Membuat File Index File Index ini adalah file utama dalam keseluruhan aplikasi. Semua fungsi dan layout aplikasi akan ditempatkan dalam file ini. File ini berekkstensi html. Berikut adalah langkah membuat file index.html: 1. Buka program Notepad/Notepad ++. 2. Ketikkan script HTML berikut :

Penjelasan script diatas :  Baris 1 : adalah sebuah deklarasi yang digunakan untuk menandakan bahwa file html yang kita buat adalah HTML5, baris ini wajib ada pada setiap file HTML5.  Baris 2 dan 10 : file html selalu diawali oleh dua tag(penanda) yaitu tag dan antitag .  Baris 3 dan 6 : tag ini adalah tag untuk mendeklarasikan fungsi dan menentukan informasi yang ingin ditampilkan dalam dokumen.

deklarasi

perlu

ditampatkan

di

antara

tag

.  Baris 4 : _PHWD FKDUVHW ´87)-_´! , Meta tag ini bersifat opsional (boleh digunakan atau tidak digunakan) berfungsi untuk

11

memberi instruksi kepada web browser untuk menerjemahkan karakter-karakter di dalam halaman HTML sebagai UTF-8. Pada awal perkembangan XHTML, diperkenalkan karakter set UTF-8 (Unicode Transformation Format-8) yang mendukung hampir seluruh karakter yang ada

di dunia. Dalam perkembangan

selanjutnya, HTML5 juga menggunakan UTF-8 sebagai charset standar. Dengan menggunakan UTF-8, kita tidak perlu khawatir mengenai karakter atau bahasa apa yang akan digunakan. UTF-8 mendukung hingga lebih dari 10.000 karakter.  Baris 5 : <meta name="viewport" content="">, Meta tag ini pertama kali diperkenalkan oleh Apple.Inc. Di dalam content="" kita dapat memasukkan beberapa nilai yang dibatasi koma. Agar layout menjadi fleksibel, cara terpraktis adalah mendasari lebar viewport

sesuai dengan

perangkat, agar lebar layout menyesuaikan dengan lebar perangkat yang digunakan maka pada bagian content ditambahkan, <meta name="viewport" content="width=devicewidth">. Sedangkan

untuk

memastikan

bahwa

layout

akan

ditampilkan seperti yang dimaksudkan dengan perbandingan skala 1:1, maka ditambahkan initial-scale=1, <meta name="viewport" content="width=devicewidth,initial-scale=1">.  Baris 7 sampai 9 : Tag . Ini adalah tempat untuk meletakkan semua element yang akan ditampilkan pada web browser, seperti tombol, link, dll. Setiap element ditulis dan ditambahkan di antara tag

dan antitag ,

contoh untuk menambahkan input text: _LQSXW W\SH ´WH[W´!

12

3. Selanjutnya simpan file diatas dengan nama index.html. Untuk Notepad, set file type-nya menjadi All File(*.*) ,

4. Sedangkan untuk Notepad++, pilih file type-nya Hypertext Markup Languange File (*.html,*.htm)

13

B. Membuat Layout Menu Aplikasi Layout aplikasi dibuat sangat sederhana, untuk membuat tampilan yang lebih bagus dan modern, diperlukan format style CSS3 (Cascading Style Sheet v.3) yang tidak akan dibahas di sini. Berikut adalah link untuk mempelajari CSS3: http://www.w3schools.com/css/default.asp

Setelah sebelumnya

kita sudah membuat file

index.html. langkah

selanjutnya adalah mendesain menu aplikasi untuk navigasi pengguna. Berikut langkah-langkahnya: 1. Kita akan membuat tiga buah Menu Utama, yaitu Pinjaman, Anggota dan Buku. 2. Tambahkan

script

untuk

Menu

Utama

di

antara

tag

, seperti pada gambar di bawah:

Penjelasan Script diatas : 

Baris 8 dan 12 : Tag digunakan untuk melayout tampilan HTML, div akan membentuk layout (bisa kotak dan lainnya sesuai settingan style di CSS-nya) yang didalamnya bisa berisi elemen HTML lain. Penjelasan lebih lanjut mengenai DIV dapat dilihat pada link berikut: http://www.w3schools.com/html/html_layout.asp

14

Pemberian id pada setiap elemen HTML dimaksudkan agar setiap elemen HTML

nantinya dapat diakses oleh

Javascript dan

bertindak sebagai objek (bukan sebagai elemen penanda biasa). 

adalah tag link, yang

Baris 9, 10 dan 11 : Tag

digunakan oleh user untuk navigasi dari satu halaman ke halaman lain.

Link

ini

juga

menjalankan/memanggil

fungsi

dapat script

dimanfaatkan yang

dibuat

untuk dengan

Javascript. , href biasa digunakan untuk menuju file yang di link-kan. Jika ingin linknya berada pada halaman yang sama maka href diberi tanda #. _D LG ´PQBSLQMDP´ KUHI ´#´!3LQMDPDQ__D!

dan

seterusnya_ GLPDNVXGNDQ XQWXN PHQDPSLONDQ NDWD ³3LQMDPDQ´ web browser yang bertipe link (bias diklik). Penjelasan lebih lanjut mengenai LINKS dapat dilihat pada link berikut: http://www.w3schools.com/html/html_links.asp 3. Tag
digunakan untuk memulai elemen html berikutnya di baris baru. 4. Simpan file (bisa dengan menekan kombinasi tombol keyboard ctrl+s). 5. Buka kembali file index.html dengan browser chrome (atau refresh jika file tersebut sudah dibuka sebelumnya). Pastikan tampilannya akan seperti gambar dibawah ini,

6. Saat ini menu diatas masih belum berfungsi karena belum diberi fungsi Javascript.

15

C. Membuat Layout Form Pinjaman Setelah membuat menu, selanjutnya adalah membuat layout form yang pertama yaitu form Pinjaman. Sesuai dengan struktur tabel yang sudah dibuat sebelumnya, maka Form ini akan terdiri dari, Nama Field no_pinjam id_anggota no_buku tgl_pinjam tgl_kembali

Berikut langkah untuk membuat form Pinjaman : 1. Dilihat dari struktur tabel diatas, form ini akan terdiri dari : 

No. Pinjam, berupa input text.



ID Anggota, berupa select (drop down list).



No. Buku, berupa select (drop down list).



Tanggal Pinjam, berupa input type date (hanya di support browser Chrome).



Tanggal Kembali, berupa input type date.

2. Tambahkan layout div baru untuk form Pinjaman. Dan beri id ³IRUP_SLQMDP´ .

3. Langkah awal adalah membuat input text No. Pinjam. Untuk membuat input text No. Pinjam, tambahkan script berikut diantara tag div ³IRUPBSLQMDP´_ WDPEDKNDQ VFULSW EHULNXW_

16

Pada script diatas, browser akan menampilkan sebuah input text dengan id yang sudah kita set yaitu ³QR_SLQMDP´.

Penjelasan lebih lanjut mengenai INPUT dapat dilihat pada link berikut: http://www.w3schools.com/html/html_form_input_types.asp

4. Selanjutnya tambahkan dua buah tag select element yang berfungsi untuk memilih ID Anggota dan No. Buku (perlu diperhatikan nilai pilihan dari select elemen ini akan diambil menggunakan Javascript dari database tabel anggota dan tabel buku, akan dibahas di pembahasan berikutnya). Beri id tiap elemen tersebut ³LG_DQJJRWD´ dan ³QR_EXNX´. Tambahkan script di kotak merah berikut :

17

Penjelasan Script diatas : 

Baris 16 sampai 22 : Tag yang digunakan pada HTML5 untuk memilih opsi adalah tag <select>, di dalam tag <select> terdapat tag untuk menampilkan pilihan yang akan dipilih. Untuk tag select yang pertama kita memberikan id, dimana id tersesbut nantinya akan diakses oleh Javascript

untuk menampilkan pilihan dari

database tabel anggota dan tabel buku

Penjelasan lebih lanjut mengenai SELECT dapat dilihat pada link berikut: http://www.w3schools.com/html/html_form_elements.asp

5. Langkah selanjutnya adalah membuat form inputan Tanggal Pinjam dan Tanggal Kembali. Masing-masing diberi id ³WJO_SLQMDP´ dan ³WJO_NHPEDOL´. Tambahkan script di kotak merah berikut:

18

Penjelasan Script diatas : 

Baris 24 dan 26 : pada HTML5 terdapat sebuah input type yang digunakan untuk menampilkan date picker, input type tersebut adalah _LQSXW W\SH ´GDWH´!. Pada sscript diatas, kita memberikan date picker untuk Tanggal Pinjam dan Tanggal Kembali.

19

6. Langkah terakhir adalah meneambahkan sebuah tombol submit yang berfungsi untuk mengirim data agar disimpan ke dalam database. Beri id untuk tombol tersebut ³WPEO_VLPSDQ_SLQMDP´. Tambahkan script di kotak merah berikut :

Penjelasan script diatas: 

Baris 28 : Agar data dari form tersebut dapat disimpan maka, dibutuhkan sebuah tombol untuk mentrigger fungsi simpan (akan dibuat di Javascript). Pada HTML5 tag yang digunakan untuk menampilkan tombol adalah .

Penjelasan lebih lanjut mengenai BUTTON dapat dilihat pada link berikut: http://www.w3schools.com/tags/tag_button.asp

7. Simpan seluruh file yang sudah dikerjakan (ctrl+s).

20

D. Membuat Layout Form Anggota Sama seperti dalam membuat layout form Pinjaman, selanjutnya adalah membuat layout form Anggota. Sesuai dengan struktur tabel yang sudah dibuat sebelumnya, maka form ini akan terdiri dari, Nama Field id_anggota nama alamat kota no_tlp tgl_lahir

Berikut adalah langkah-langkah membuat form Anggota : 1. Dilihat dari struktur tabel diatas, form ini akan terdiri dari : 

ID Anggota, berupa input type text.



Nama, berupa input type text.



Alamat, berupa textarea.



Kota, berupa input type text.



No. Tlp, berupa input type text.



Tgl. Lahir, berupa input type date.

2. Tambahkan layout div baru untuk form Anggota, dan beri id ³IRUP_DQJJRWD´

21

3. Tambahkan dua form input type text yaitu ID Anggota dan Nama, dan beri

masing-masing

id

³setId_anggota´

dan

³nm_anggota´.

Tambahkan script di kotak merah berikut :

4. Seperti yang terlihat pada gambar diatas, posisi form ditampilkan secara vertikal (dari atas ke bawah). Untuk saat ini biarkan saja seperti itu, karena nanti kita akan menghilangkan form ini agar tidak ditampilkan di browser. 5. Langkah selanjutnya adalah menambahkan sebuah textarea untuk menulis Alamat. Textarea digunakan agar user dapat memasukkan teks dengan jumlah yang lebih banyak. Beri

id textarea

tersebut

³alamat_anggota´. Tambahkan script di kotak merah berikut :

22

Penjelasan script diatas : 

Baris 37 : pada script diatas digunakan salah satu tag dari HTML5 untuk manmpilkan area input teks yang lebih lebar bagi user, dengan jumlah rows (baris) = 4.

Penjelasan lebih lanjut mengenai TEXTAREA dapat dilihat pada link berikut: http://www.w3schools.com/tags/tag_textarea.asp

6. Setelah menambahkan text area untuk Alamat, langkah selanjutnya adalah menambahkan dua buah input text yaitu Kota dan No. Tlp, dengan masing-masing id

³NRWD_DQJJRWD´ dan ³WOS_DQJJRWD´.

Tambahkan script di kotak merah berikut :

7. Elemen form berikutnya adalah Tanggal Lahir. Untuk memilih tanggal lahir digunakan form input type date dengan id ³WJOLDKLU_DQJJRWD´

23

yang akan menampilkan Date picker agar user dapat memilih format tanggalnya. Tambahkan script di kotak merah berikut :

8. Elemen terakhir yang harus ditambahkan adalah tombol submit yang akan menyimpan data ke dalam database,

tombol ini diberi id

³WPEO_VLPSDQ_DQJJRWD´ . Tambahkan script di kotak merah berikut :

9. Pada pembahasan no.4 diatas, form ³Pinjaman´ dan form ³Anggota´ ditampilkan secara bersamaan. Hal ini tentunya tidak baik, oleh karena itu form ³Anggota´

untuk sementara

akan dihilangkan (form

³Anggota´ akan dimunculkan kembali dengan bantuan gavascript ketika user mengklik menu ³Anggota´). 10. Langkah untuk menghilangkan form ³Anggota´ sangat mudah, cukup menggunakan attribute style maka kita bisa menghilangkan form yang dimaksud.

24

Tambahkan attribute style pada tag div form ³AQggRWa´ : sebelum

sesudah

Penjelasan attribute diatas: 

Baris 30 : pada

tag