Membuat Aplikasi GPS & Suara Antrian dengan PHP fileDengan sedikit kreatifitas, Anda dapat membuat...

M e m b u at A p l i k a s i G P S & S u a r a A n t r i a n

dengan PHP

www.bukulokomedia.com

Ronald Rusli

MEMBUAT APLIKASI GPS DAN SUARA ANTRIAN DENGAN PHPPerpustakaan Nasional : Katalog Dalam Terbitan (KDT)Penulis : Ronald RusliMEMBUAT APLIKASI GPS DAN SUARA ANTRIAN DENGAN PHP- Cet. I. - Yogyakarta : Penerbit Lokomedia, 2013 105 hlm; 15 x 23 cm ISBN : 978-979-1758-89-5

Penerbit Lokomedia, Cetakan Pertama : Februari 2013

Editor : Siti MutmainahCover : Subkhan AnshoriLayout : Lukmanul Hakim

Diterbitkan pertama kali oleh :Penerbit LokomediaJl. Jambon, Perum. Pesona Alam Hijau 2 Kav. B-4, Kricak Yogyakarta 55242.

email : [email protected] : www.bukulokomedia.com

Copyright © Lokomedia, 2013

Hak Cipta dilindungi oleh Undang-Undang

Dilarang memperbanyak, mencetak ataupun menerbitkan sebagian maupun seluruh isi buku ini tanpa izin tertulis dari penerbit.

Kata Pengantar

Bahasa Pemrograman web (PHP, Javascript/JQuery) kebanyakan digunakan untuk melakukan operasi-operasi pengolahan data (menyimpan data ke dalam database, lalu menampilkannya kembali). Namun, tahukah Anda bahwa bahasa pemrograman web juga dapat disulap menjadi aplikasi-aplikasi kreatif layaknya aplikasi desktop.

Dengan sedikit kreatifitas, Anda dapat membuat aplikasi-aplikasi yang dulunya hanya dapat dibuat oleh bahasa pemrograman desktop dapat diwujudkan menggunakan bahasa pemrograman web seperti aplikasi papan pengumuman elektronik, aplikasi note, aplikasi suara antrian dan aplikasi GPS!.

Buku ini disusun berdasarkan pengalaman penulis yang telah cukup banyak bertualang dalam dunia IT di Kota Jambi dan dikemas sesederhana mungkin, sehingga diharapkan pembaca dapat memperoleh manfaat dari buku ini.

Tak lupa penulis mengucapkan terima kasih kepada Orang Tua, Pak Lukmanul Hakim yang bersedia membantu dan menerbitkan buku ini menjadi sebuah karya tulis, penulis-penulis dokumentasi dan tutorial di Internet dan berbagai pihak yang telah membantu dalam penerbitan buku ini.

Penulis menyadari bahwa buku ini masih jauh dari kata sempurna, oleh karena itu kritik dan saran dari pembaca sangat penulis harapkan untuk melakukan penyempurnaan dimasa yang akan datang.

Jambi, September 2012

Penulis

[email protected]

Halaman ini Sengaja Dikosongkan

www.bukulokomedia.com

Daftar Isi

BAB 1. Dasar-Dasar CSS..................................................................................................1

1.1. Pengenalan CSS............................................................................................................2

1.2. Selector pada CSS.........................................................................................................5

1.2.1. Selector ID............................................................................................................5

1.2.2. Selector Type........................................................................................................7

1.2.3. Selector Class.......................................................................................................8

1.2.4. Selector Dynamic Pseudo Classes......................................................................8

1.3. Membuat Halaman Web dengan CSS (Tableless)......................................................11

BAB 2. Javascript, jQuery dan phpMyAdmin............................................................19

2.1. Apa itu Javascript........................................................................................................20

2.2. Cara Menggunakan Javascript....................................................................................20

2.3. Kasus Perhitungan dengan Javascript......................................... ...............................23

2.4. Apa itu jQuery?...........................................................................................................25

2.5. Cara Menggunakan jQuery.........................................................................................25

2.6. Operasi Dasar Database dengan phpMyAdmin.........................................................28

2.6.1. Membuat Database............................................................................................29

2.6.2. Membuat Tabel..................................................................................................29

2.6.3. Memasukkan Data ke dalam Tabel...................................................................31

2.6.4. Mengekspor Database.......................................................................................32

2.6.5. Mengimpor Database........................................................................................32

BAB 3. Operasi Database CRUD dengan PHP (Studi Kasus: Modul Login).........35

3.1. Menampilkan Data dari Database (Read)..................................................................36

3.2. Menyimpan Data ke dalam Database (Create)..........................................................38

3.3. Mengubah Data di Database (Update)...................................... ................................42

3.4. Menghapus Data di Database (Delete).......................................................................47

3.5. Modul Login (Autentikasi Pengguna)........................................................................48

BAB 4. Aplikasi Papan Informasi Elektronik..............................................................55

4.1. Merancang Layout Papan Informasi..........................................................................56

4.2. Pembuatan Aplikasi untuk Back End.........................................................................58

4.3. Pembuatan Aplikasi untuk Front End........................................................................61

BAB 5. Aplikasi Note (Touch Screen)..............................................................................67

5.1. Cara Menggunakan Canvas........................................................................................68

5.2. Cara Membuat Aplikasi Note di Browser..................................................................70

5.3. Menjalankan Aplikasi Note di Ponsel Touch Screen.................................................73

BAB 6. Aplikasi Suara Antrian......................................................................................77

6.1. Cara Menggunakan Tag <audio> pada HTML5.......................................................78

6.2. Membuat Aplikasi Suara Antrian Sederhana.............................................................79

BAB 7. Aplikasi Tracking System Armada Taxi.............................................................85

7.1. Membuat Peta Statik dengan Library Google Maps.................................................86

7.1.1. Cara Menggunakan Library Google Maps.......................................................86

7.1.2. Membuat Marker (Penanda) pada Peta.............................................................89

7.1.3. Menambahkan Informasi Teks pada Marker.....................................................90

7.1.4. Menambahkan Informasi Gambar pada Marker...............................................90

7.1.5. Mengubah Bentuk dan Warna Marker...............................................................92

7.1.6. Cara Mengetahui Rute Terdekat Antara Dua Lokasi........................................92

7.2. Membuat Peta Dinamis dengan Library Google Maps.............................................93

7.2.1. Membuat Database Peta dan Koneksinya.........................................................94

7.2.2. Membuat Skrip Peta Dinamis............................................................................95

7.2.3. Membuat Fitur Pencarian dalam Peta Dinamis.................................................97

7.2.4. Membuat Thread Refresh Peta Secara Otomatis..............................................98

7.2.5. Modul Login ke Aplikasi Tracking System via Ponsel..................................101

7.2.6. Membuat Thread Pengiriman Koordinat Taxi................................................103

BAB I

Dasar-Dasar CSS (Cascading Style Sheet)

2 Aplikasi GPS dan Suara Antrian dengan PHP

Bab 1

Dasar-Dasar CSS

1.1 Pengenalan CSSCascading Style Sheet (CSS) adalah cara mem-format halaman situs secara efektif dan efisien. Bila kode style-nya dibuat dalam file tersendiri yang biasanya dilakukan oleh para developer web akan sangat membantu pekerjaan kita. CSS yang ditempatkan pada file tersendiri disebut External Style Sheet. File CSS tersebut berekstensi *.css. Untuk mengerti tentang CSS, kita perlu mengerti tentang apa itu (X)HTML. Sebagai pembukanya, silahkan lihat contoh berikut:

Skrip latihan1.html<table> <tr> <th>No.</th> <th>Nama</th> <th>Email</th> <th>Jns.Kelamin</th> </tr> <tr> <td>1.</td> <td>Ronald Rusli</td> <td>[email protected]</td> <td>Laki-laki</td> </tr> <tr> <td>2.</td> <td>Hendra</td> <td>[email protected]</td> <td>Perempuan</td> </tr> <tr> <td>3.</td> <td>Husni</td> <td>[email protected]</td> <td>Laki-laki</td> </tr> <tr> <td>4.</td> <td>Merry</td> <td>[email protected]</td> <td>Perempuan</td> </tr></table>

Sekarang coba jalankan skrip latihan1.html di browser. Jika tidak ada kendala, maka hasilnya akan terlihat seperti pada gambar 1.1.

Sekarang coba Anda buat lagi sebuah file baru dengan nama style.css. Kalau Anda menggunakan program Dreamweaver, caranya klik menu File > New, maka akan tampil kotak dialog New Document, lalu pilihlah Blank Page > CSS. Lihat gambar 1.2.

3Bab I. Dasar-Dasar CSS

Gambar 1.1 Hasil skrip latihan1.html

Gambar 1.2 Kotak dialog New Document

Selanjutnya, ketikkanlah kode berikut:


Skrip style.csstable { border: 1px solid #0088ff;}

tr:hover { background: #ffaaff;}

th { padding : 2px 6px; border : 1px solid #0088ff; background : #0088ff; color : white;}

td { padding : 2px 6px; border : 1px solid #0088ff;}

Kemudian, buka kembali file latihan1.html, lalu tambahkan satu baris kode berikut pada bagian tag head:

<link rel=”stylesheet” href=”style.css” />

Sekarang coba jalankan lagi atau Refresh file latihan1.html di browser. Apakah gerangan yang terjadi?? Tentu saja hasil tabelnya sudah berubah menjadi lebih stylish. Lihat gambar 1.3.

Gambar 1.3 Hasil skrip latihan1.html (setelah diberi style.css)


U PENGETAHUANFile CSS merupakan file yang memisahkan pem-formatan suatu halaman dengan kerangkanya. Coba Anda bayangkan sendiri jika sekarang Anda memiliki sebuah website dengan jumlah halaman yang sangat banyak. Suatu ketika Anda ingin mengubah warna latar halaman Anda, apa yang akan terjadi?? Tentu saja Anda akan menghabiskan banyak waktu untuk mengubahnya satu per satu halamannya. Namun dengan menggunakan CSS, Anda dapat melakukannya hanya dalam hitungan detik, yaitu cukup mengubah satu file CSS saja. Selain berfungsi sebagai formatting, dengan menggunakan CSS juga dapat mempercepat pemuatan website kita oleh browser. Kenapa? Karena sekarang semua browser menyimpan beberapa tampilan CSS dalam suatu wadah yang disebut cache, sehingga kelak jika pengunjung tersebut kembali ke website kita, browser tidak perlu lagi me-load semua file pada website kita, karena sudah tersimpan di cache J

1.2 Selector pada CSSPada pembahasan lalu, kita telah melihat bagaimana suatu CSS mem-format suatu halaman HTML. Kali ini, kita akan mencoba memahami beberapa selector CSS yang umum digunakan. Selector berfungsi agar browser dapat mengetahui bagian mana pada kode HTML yang akan diformat oleh sedertan kode CSS. Daripada basa basi, langsung saja kita praktekkan.

1.2.1 Selector ID

Selector ID digunakan untuk memilih ID pada suatu tag HTML. Biasanya selector ini digunakan untuk sesuatu tag yang bersifat unik. Untuk memahami selector ini, ketikkan kode berikut, perhatikan teks yang ditebalkan:

Skrip latihan2.html

<div id=”satu”> <p> sample sample sample sample sample sample sample sample

sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample

</p></div><div id=”dua”> <p> sample sample sample sample sample sample sample sample

sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample


sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample

</p></div>

Selanjutnya, buatlah dokumen CSS dengan nama style2.css, lalu ketiklah kode berikut:

Skrip style2.css#satu{ background-color : #CCCCCC; font-weight : bold;}

Setelah membuat file style2.css, hubungkanlah dengan file latihan2.html dengan menyisipkan satu baris kode berikut di bagian tag head:

<link rel=”stylesheet” href=”style2.css” />

Sekarang coba jalankan file latihan2.html di browser. Jika tidak ada masalah, seharusnya Anda akan melihat tampilan paragraf pertama (div id=’satu’) terdapat background berwarna abu-abu dan teksnya tebal. Lihat gambar 1.4.

Gambar 1.4 Hasil skrip latihan2.html (Selector ID)


1.2.2 Selector Type

Selector type digunakan untuk memilih tag-tag general yang ada pada dokumen HTML. Untuk lebih memahami maksud dari selector type, tambahkanlah kode berikut ini pada style2.css yang telah kita buat sebelumnya:

p{ border:solid;}

Sekarang coba jalankan lagi skrip latihan2.html. Jika tidak ada kesalahan, seharusnya Anda akan melihat tampilan paragraf pertama dan kedua (tag <p>) terdapat border atau bingkainya. Lihat gambar 1.5.

Gambar 1.5 Hasil skrip latihan2.html (Selector Type)


1.2.3 Selector Class

Selector class digunakan untuk memilih nama kelas (class) yang pada suatu tag HTML. Biasanya selector ini digunakan untuk memilih lebih dari 1 (satu) tag. Jika tag ini mengalami overlapping dengan selector ID (nama tag dan ID sama), maka pem-formatan dalam selector ID yang akan diutamakan oleh browser. Untuk memahami selector ini, ketikkan kode berikut, perhatikan teks yang ditebalkan:

Skrip latihan3.html

<div id=”satu” class=”merah”> <p>

sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample

</p> </div> <div id=”dua”> <p class=”merah”>

sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample

</p></div>

Kemudian, tambahkan kode berikut pada style2.css yang telah kita buat sebelumnya:.merah{ color:#F00;}

Sekarang coba jalankan file latihan3.html di browser. Jika tidak ada kendala, seharusnya Anda akan melihat tampilan teks dan border pada paragraf pertama dan kedua semuanya berwarna merah. Lihat gambar 1.6.

1.2.4 Selector Dynamic Pseudo Classes

Selector jenis ini banyak digunakan untuk link-link pada HTML. Sesuai dengan namanya, pem-formatan dengan selector ini hanya akan aktif pada kondisi tertentu, misalnya hover akan aktif pada saat mouse terletak diatas suatu elemen. Untuk lebih memahami selector ini, ketikkan kode berikut (latihan4.html), perhatikan teks yang ditebalkan:


Gambar 1.6 Hasil skrip latihan3.html (Selector Class)

Skrip latihan4.html<div id=”satu” class=”merah”> <p>

<a href=””>sample</a> sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample

</p> </div> <div id=”dua”> <p class=”merah”>

sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample


sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample

</p></div>

Selanjutnya, buatlah dokumen CSS dengan nama style4.css, kemudian ketiklah kode berikut:

Skrip style4.css#satu{ background-color : #CCCCCC; font-weight : bold;}

p{ border:solid;}

.merah{ color:#f00}

a{ font-size : 18px; font-weight : bold; color : #008000;}

a:hover{ font-size : 36px; font-weight : bold; color : #800040;}

a:active{ font-size : 36px; font-weight : bold; color : #800040;}

#dua:hover{ background-color:#00F;}

Setelah membuat file style4.css, hubungkanlah dengan file latihan4.html dengan menyisipkan satu baris kode berikut di bagian tag head:


Sekarang jalankan file latihan4.html di browser. Untuk melihat hasilnya, arahkan mouse ke atas link sample atau arahkan mouse pada paragraf kedua. Lihat gambar 1.7.


Gambar 1.7 Hasil skrip latihan4.html (Selector Dynamic Pseudo Classes)

1.3 Membuat Halaman Web dengan CSS (Tableless)Pada sub-bab sebelumnya, kita telah mempelajari beberapa selector CSS yang umum digunakan. Pada materi kali ini, kita akan membahas cara membangun halaman web menggunakan CSS tanpa tabel atau disebut dengan tableless. Beberapa sumber menyebutkan bahwa penggunaan tabel yang berlebih dapat mengurangi kecepatan load suatu halaman web.

Sebelum membuat layout halaman web menggunakan CSS, sebaiknya lihat dulu sketsa layout yang akan dibuat. Lihat gambar 1.8.


Gambar 1.8 Sketsa layout halaman web

Dari gambar 1.8 dapat kita ketahui bahwa website yang akan kita buat terdiri dari lima bagian inti, yaitu Banner, Menu, Kiri, Kanan dan Footer. Kemudian, agar setiap bagian tersebut dapat tersusun rapi, maka biasanya kita menggunakan sebuah tag <div> yang menaungi semua bagian <div> tersebut, misalnya kita namai div kontainer. Nah..dari pada bingung-bingung, mari kita praktekkan saja:

Skrip latihan5.html<div id=”kontainer”>

<div id=”banner”></div><div id=”menu”></div> <div id=”kiri”></div><div id=”kanan”></div><div id=”footer”></div>

</div>

Selanjutnya, buatlah dokumen CSS dengan nama style5.css, lalu ketiklah kode berikut:

Skrip style5.css#kontainer{ background : #E2E2E2; min-height : 600px; width : 800px;


margin : 0 auto 0px;}

Property margin bernilai 0 auto untuk membuat posisi kotak berada di tengah browser. Setelah membuat file style5.css, hubungkanlah dengan file latihan5.html dengan menyisipkan satu baris kode berikut di bagian tag head:


Sekarang coba jalankan file latihan5.html di browser. Jika tidak ada kesalahan, seharusnya Anda akan melihat tampilan kotak besar berwarna abu-abu sebagai background (#kontainer). Lihat gambar 1.9.

Gambar 1.9 Hasil skrip latihan5.html (#kontainer)

Selanjutnya, kita akan mencoba membuat sebuah banner pada bagian atas. Untuk itu, tambahkanlah kode berikut ini pada file style5.css:

#banner{ background-image : url(banner.jpg); height : 150px;}


File banner.jpg dapat Anda temukan di CD sebagai contoh saja, silahkan Anda gunakan gambar lain, yang penting ukuran lebarnya sesuaikan dengan layout web, dalam kasus ini lebarnya 900px. Sekarang coba jalankan lagi skrip latihan5.html, maka banner akan tampil di bagian paling atas. Lihat gambar 1.10.

Gambar 1.10 Hasil skrip latihan5.html (#banner)

Selanjutnya, kita akan membuat sebuah menu yang posisinya berada tepat dibawah banner. Untuk itu, tambahkanlah kode berikut ini pada file style5.css:

#menu{ background : #EAD282; height : 25px;}

Kode tersebut untuk menciptakan ruang untuk meletakkan menu pada bagian bawah banner. Lihat gambar 1.11.


Gambar 1.11 Hasil skrip latihan5.html (#menu)

Selanjutnya, berdasarkan sketsa yang kita buat, kita akan membuat kolom di sebelah kiri. Kolom ini biasanya digunakan untuk meletakkan modul-modul seperti login, polling dan sebagainya. Untuk itu, tambahkanlah kode berikut ini pada file style5.css:

#kiri{ float :left; background : #FFBD9D; min-height : 400px; width : 250px;}

Kode tersebut untuk menciptakan sebuah ruang untuk meletakkan kolom modul pada bagian sebelah kiri. Property float bernilai left membuat agar tampilan kolom ini cenderung berada di sebelah kiri. Lihat gambar 1.12.


Gambar 1.12 Hasil skrip latihan5.html (#kiri)

Selanjutnya, kita akan membuat kolom di sebelah kanan. Kolom ini biasanya digunakan untuk meletakkan inti dari modul yang dibuat (content) seperti berita. Untuk itu, tambahkanlah kode berikut ini pada file style5.css:

#kanan{ float :right; background : #CCCCCC; min-height : 400px; width : 550px; }

Kode tersebut untuk menciptakan sebuah ruang untuk meletakkan kolom modul pada bagian sebelah kanan. Lihat gambar 1.13.


Gambar 1.13 Hasil skrip latihan5.html (#kanan)

Dan terakhir, kita akan membuat kolom footer. Sebenarnya bentuk kolom footer memiliki kesamaan dengan kolom menu. Untuk itu, tambahkanlah kode berikut ini pada file style5.css:

#footer{ float :left; background : #EAD282; height : 25px; width : 800px;}

Kode tersebut untuk menciptakan sebuah ruang untuk kolom footer yang terletak di bagian paling bawah. Lihat gambar 1.14.


Gambar 1.14 Hasil skrip latihan5.html (#footer)

Membuat Aplikasi GPS & Suara Antrian dengan PHP fileDengan sedikit kreatifitas, Anda dapat membuat...

Documents

Transcript of Membuat Aplikasi GPS & Suara Antrian dengan PHP fileDengan sedikit kreatifitas, Anda dapat membuat...