API dan DB.pdf (3,641Kb)
Google Map API Gunadarma University INTRODUCTION API
EXAMPLE Google Maps
Menampilkan Peta Di Dalam Website INTRODUCTION API
EXAMPLE Google Maps
Fitur Utama Pada Google Maps Google Maps
Map Dapat Diterapkan pada Aplikasi Android
INTRODUCTION API
EXAMPLE Google Maps
INTRODUCTION API
EXAMPLE
Google Map API untuk membuat map dan informasi secara spesifik API yang disediakan adalah services / fungsi yang terdiri dari : Marker Directions Coordinates Mengakomodasi Fungsi Utama Google Map Versi Web Services Lainnya Case Study
- Menampilkan Alamat yang telah diinput pada
Map
- Menampilkan Lokasi sebenarnya pada Map
Step by Step
1. Membuat nama projek tampilan : a. Buka panel Properties.
b. ubah Title menjadi Map it
2. Membuat
Label “Google Map “
a. klik Label pada Pada Palette -> lalu tarik ke halaman Viewer Project.
b. Melakukan pengaturan pada Properties
Pengaturan Properties Label “Google map”
1. BackgroundColor : Light Gray
2. FontBold : Ceklis
√
3. FontSize : 14.0
4. FontTypeface : default
5. HasMargins : Ceklis
√
6. Height : Automatic
7. Width : Fill parent
8. Text : Google Map
9. TextAlignment : Center : 1
10. TextColor : Red
11. Visible : ceklis
Membuat layout baru
1. Klik VerticalArrangement pada Palette
- – Layout.
2. Tarik kehalaman Viewer.
3. Atur Properties Layout.
Pengaturan Properties Layout
1. AllignHorizotal : Left:1
2. AllignVertical : Top:1
3. BockgroundColor : Light Gray
4. Height : Automatic
5. Width : Fill parent
6. Image : None
7. Visible : Ceklis
Pengaturan VerticalArrangement
Input Componet VerticalArrangementa. klik & tahan Label pada Palette - User Interface -> lalu tarik ke halaman Viewer.
b. klik & tahan TextBox Pada Palette - User Interface -> lalu tarik ke halaman Viewer.
c. klik & tahan Button Pada Palette - User Interface -> lalu tarik ke halaman Viewer.
d. Melakukan pengaturan pada Masing-Masing Component VerticalArrangement2.
Langkah-langkah Merubah Nama Component
1. Klik Component yang akan
dirubah namanya
3. Ketikan Nama baru yang diinginkan untuk mengganti
nama yang lama pada kolom New name OK
4. Maka nama baru pada Component
yang dipilih akan sesuai dengan yg
2. Klik Rename yang berada pada telah diketikan.
bagian paling bawah Component
Pengaturan Properties Label “SelectedAddresLabel”
1. BackgroundColor : None
2. FontBold : Ceklis
√
3. FontSize : 14.0
4. FontTypeface : default
5. HasMargins : Ceklis
√
6. Height : Automatic
7. Width : Fill parent
8. Text : Masukan Alamat
9. TextAlignment : left: 1
10. TextColor : Black
11. Visible : Ceklis
√
Pengaturan Properties Label “AddresForMApLabel”
1. BackgroundColor : Default
2. Enabled : Ceklis
√
3. FontSize : 14.0
4. FontTypeface : default
5. Height : Automatic
6. Width : Fill parent
7. Hint : masukan alamat
yang dicari
8. TextAlignment : left: 0
9. TextColor : Black
10. Visible : Ceklis
√
Pengaturan Properties Button “ViewOnMapButton”
1. BackgroundColor : Default
2. Enabled : Ceklis
√
3. FontBold : Ceklis
√
4. Fontitalic : Blank
5. FontSize : 14.0
6. FontTypeface : default
7. Height : Automatic
8. Width : Fill parent
9. Image : None
10. Shape : default
11. Text : View On Map
12. TextAlignment : Center:1
13. TextColor : Default
Membuat Button baru
1. Klik Button pada Palette
- – user Interface 2. Tarik kehalaman Viewer.
3. Atur Properties Button.
Pengaturan Properties Button “MyLocationButton”
1. BackgroundColor : Default
2. Enabled : Ceklis
√
3. FontBold : Ceklis
√
4. Fontitalic : Blank
5. FontSize : 14.0
6. FontTypeface : default
7. Height : Automatic
8. Width : Fill parent
9. Image : None
10. Shape : default
11. Text : My Location On The Map
12. TextAlignment : Center:1
13. TextColor : Default
Menambahkan Database
Step by step :1. Klik & tahan TinyDB pada
Pallete – Storage.
2. Tarik menuju halaman Viewer
3. Lepaskan
Menambahkan Notifikasi
Step by step :1. Klik & tahan Notifier pada
Pallete – User Interface.
2. Tarik menuju halaman Viewer 3. Lepaskan.
Menambahkan ActivityStrarter
Step by step :1. Klik & tahan ActivityStarter pada Pallete
- – Connectivity.
2. Tarik menuju halaman Viewer
3. Lepaskan
Menambahkan LocationSensor
Step by step :1. Klik & tahan LocationSensor pada Pallete
- – Sensors.
2. Tarik menuju halaman Viewer
3. Lepaskan
Mengaktivkan Setiap Component Dengan Control Block
Pengaturan Control Block
Klik tombol Blocks untuk pindah pada tampilan Pengaturan activity Componen Case Study
Menampilkan Peta dari Alamat yang Diinput
Aksi yang Ditampilkan saat Tombol View On Map Di Klik Case Study
Menampilkan Peta Lokasi Asal saat
Button My Location Di klik Menampilkan Peta dari Alamat yang Diinput Step by Step :
1. Klik Blocks-Prosedures
2. Pilih tipe prosedures to-do
3. Klik pada tipe yang sesuai lalu tarik menuju halaman Ubah Menjadi :
Viewer showMap
Menampilkan Peta dari Alamat yang Diinput Step by Step :
1. Klik Blocks-ActivityStarter1
2. Pilih tipe set-action-to
3. Klik pada tipe yang sesuai lalu tarik menuju halaman Viewer
4. Gabungkan dengan Block sebelumnya.
Menampilkan Peta dari Alamat yang Diinput Step by Step :
1. Klik Blocks- Text
2. Pilih tipe Banks Text
3. Klik pada tipe yang sesuai lalu tarik menuju halaman Viewer
4. Gabungkan dengan Blocks sebelumnya.
Isi bagian kosong dengan : Lanjutkan Hingga membentuk pola seperti dibawah ini :
Menampilkan Peta dari Alamat yang Diinput
Menampilkan Peta dari Alamat yang Diinput Blocks
Text “…..”
4 Isi dengan : geo:0,0?q= Blocks Text Join
3
2 Blocks
ActivityStarter1 Call ActivityStarter1. StartActivity Blocks
AddressForMapText AddressForMapText. Text
5 Blocks ActivityStarter1 DataUri. to
1 Membuat Pola baru untuk menambahkan aksi pada tombol view on map.
Aksi yang Ditampilkan saat Tombol View On Map Di Klik
Aksi yang Ditampilkan saat Tombol View On Map Di Klik Blocks
Text is empty
3 Blocks
AddressForMapText AddressForMapText. Text
4 Blocks Text “…….”
6
1 Blocks
Blocks
Text “Info”
7 ViewOnMapButton when ViewOnMapButton . Click
8 Blocks Control if then
Blocks Text “Okay”
Blocks Notifier1Call Notifier1. ShowMessageDialog
5 (lalu klik kotak biru untuk
2 message menambahkan kondisi else) title button text Blocks
Procedures Call ShowMap Membuat Pola baru untuk menambahkan aksi pada tombol My Location
Menampilkan Peta Lokasi Asal saat Button
My Location Di klik
Menampilkan Peta Lokasi Asal saat Button My Location Di klik Isi bagian kosong dengan : Android.intent.action.VIEW Blocks
Text “…..”
3 Blocks ActivityStarter1 Set ActivityStarter1.Action. to
2 Blocks
Text “…..”
6 Isi dengan : geo:0,0?q=
1 Blocks
MyLocationButton
When MyLocationButton
5 Click, do Blocks
Text Join
7 Blocks Procedures Call ActivityStarter1 . StartActivity
8 Blocks
LocationSensor1 LocationSensor1.Currentaddress Blocks
ActivityStarter1 Set ActivityStarter1.DataUri. to
4
Database Dengan TinyDB Gunadarma University Database
Kumpulan informasi yang disimpan di dalam komputer secara sistematik Dapat dilihat kembali dengan menggunakan program aplikasi Bersifat Persisten Database
Atribut Tabel Database
Sekolah Siswa nisn nama_siswa
Guru NIP nama_guru
Mapel Kode_mapel Nama_mapel TinyDB
Menerima / Membaca Data di
TinyDB TinyDB
Menyimpan Data di dalam storage Devices TinyDB
Mengambil Nilai dari Database Case Study
– Menggunakan Projek Sebelumnya
- Menyimpan Alamat Dalam Database • Memilih Alamat yang telah disimpan di dalam database
- Menampilkan Alamat pada Map
– Menggunakan Projek Sebelumnya
3 Ubah Text sesuai SS
Case Study
- – Menggunakan Projek Sebelumnya
1 Drag n Drop Label
2 Ubah Text sesuai SS
Case Study
- – Menggunakan Projek Sebelumnya
1 Drag n Drop ListPicker
Case Study
- – Menggunakan Projek Sebelumnya
1 Drag n Drop Horizontal Arrang.
Case Study
- – Menggunakan Projek Sebelumnya
1 Drag n Drop Horizontal Arrang.
Case Study
- – Menggunakan Projek Sebelumnya
1 Drag n Drop Dua Button
Case Study
- – Menggunakan Projek Sebelumnya
1 Drag n Drop Vertical Arrang.
2 Ubah Text dari Label
Case Study
- – Menggunakan Projek Sebelumnya
1 Drag n Drop Label
2 Ubah Text dari Label
Case Study
- – Menggunakan Projek Sebelumnya
1 Drag n Drop Label
2 Ubah Text dari Label
Case Study
- – Menggunakan Projek Sebelumnya
1 Drag n Drop TextBox
Case Study
- – Menggunakan Projek Sebelumnya
1 Drag n Drop Horizontal
Arrangment Case Study
- – Menggunakan Projek Sebelumnya
1 Drag n Drop 2 Button
Case Study
- – Menggunakan Projek Sebelumnya
1 Drag n Drop 2 Button
TextBox
Case Study
- – Menggunakan Projek Sebelumnya
1 Set background ke white
1 Drag n Drop Label, Mengganti
Case Study
- – Menggunakan Projek Sebelumnya
Definisi Variabel Membaca Database saat Aplikasi Dibuka Case Study
- – Menggunakan Projek Sebelumnya
Definisi Variabel
2 Drag n Drop dan Pasang ke tagAdress
1 Drag n Drop
3 Drag n Drop dan Pasang ke listLocations Case Study
- – Menggunakan Projek Sebelumnya
Membaca Database saat Aplikasi Dibuka
1 Drag n Drop
2 Drag n Drop dan Pasang ke listLocations
2 Drag n Drop dan Pasang ke block When-Do
3 Drag n Drop dan Pasang ke block When-Do Case Study
- – Menggunakan Projek Sebelumnya
4 Drag n Drop dan psang
ke ListPikcer
Membaca Database saat Aplikasi Dibuka
Fungsi Membaca Data Aksi Ketika Tombol Add
Case Study
- – Menggunakan Projek Sebelumnya
Location Di-Klik Aksi Ketika Tombol
Cancel Di-Klik Fungsi Menambah Data Alamat yang Diinput
Menampilkan alamat yang dipilih pada label Case Study
Case Study
- – Menggunakan Projek Sebelumnya
– Menggunakan Projek Sebelumnya