Mudahnya Membuat Aplikasi Android dengan Visual Studio dan Xamarin 41
Gambar 5.1. Skema Web Service
Pada penjelasan kali ini saya akan menjelaskan tentang bagaimana membuat sebuah web service dengan Microsoft Azure menggunakan web app (PHP dan MySQL) dan output yang dihasilkan berupa data berformat JSON (Javascript Object Notation). Untuk membuat web service ini anda diharapkan sudah
memeliki akun Microsoft Azure. Login pada situs Azure
http://portal.azure.com, masukan email dan password yang sudah terkait dengan akun Azure, tampilan utama Microsoft Azure setelah login adalah sebagai berikut: Web Service MySQL Server Admin Web Server Mobile App
agussuparno.com
Mudahnya Membuat Aplikasi Android dengan Visual Studio dan Xamarin 42
Gambar 5.2. Tampilan utama Azure
Klik tanda “+ New” pada menu sebelah kiri, kemudian ketik “web” untuk mencari service web app yang akan kita buat. Pada hasil pencarian klik “Web App” seperti pada gambar berikut:
Gambar 5.3. Pencarian Web App Azure
Pilihan berikutnya adalah jenis-jenis web app yang ada pada Microsoft Azure. Pada tabmpilan ini kita pilih “Web App + MySQL”, seperti pada gambar berikut:
Mudahnya Membuat Aplikasi Android dengan Visual Studio dan Xamarin 43
Gambar 5.4. Pilih Web App + MySQL
Setelah kita memilih Web App + MySQL maka tampilan berikut adalah meminta kita untuk membuat web app tersebut dengan menekan tombol “Create”.
agussuparno.com
Mudahnya Membuat Aplikasi Android dengan Visual Studio dan Xamarin 44
Gambar 5.6. Form isian Web App + MySQL
Pada gambar 5.6 adlaah form isian untuk web app yang akan kita buat. a. App Name, diisi dengan nama web app yang akan kita buat. b. Subcription, dibiarkan default.
c. Resource Group, ketik “web” pada Create New atau pilih pada resource group yang sudah ada.
d. Database Provider, pilih ClearDB.
e. App Service Plan/Location, dibiarkan default.
f. Database, pada pilihan ini akan muncul tampilan untuk membuat database MySQL baru.
Buat database MySQL baru dengan klik tanda “+” seperti pada gambar 5.7 berikut:
Mudahnya Membuat Aplikasi Android dengan Visual Studio dan Xamarin 45
Gambar 5.7. Create New database MySQL
Pada tampilan new MySQL Database, anda diminta mengisi nama database, tipe database, location, Pricing Tier (scema pembelian), dan Legal Terms. Isi form tersebut seperti pada gambar 5.8 berikut:
agussuparno.com
Mudahnya Membuat Aplikasi Android dengan Visual Studio dan Xamarin 46
Pada pilihan Legal Terms, klik “Purchase” untuk menyetujui ketentuan dan aturan yang ditampilkan. Tampilan legal terms seperti pada gambar 5.9 berikut:
Gambar 5.9. Legal Terms
Semua proses harus anda selesaikan, klik “OK” pada kolom database MySQL, kemudian klik “Create” pada kolom Web App + MySQL. Kemudian muncul tampilan proses pembuatan web service seperti pada gambar 5.10 berikut:
Mudahnya Membuat Aplikasi Android dengan Visual Studio dan Xamarin 47
Gambar 5.11. Deployments succeded
Pada gambar 5.11 menunjukan bahwa proses pembuatan web app sudah berhasil. Lankah berikutnya adalah refresh halaman browser anda, sehingga akan muncul web app yang baru anda buat, seperti pada gambar 5.12 berikut:
agussuparno.com
Mudahnya Membuat Aplikasi Android dengan Visual Studio dan Xamarin 48
Sampai tahap ini pembuatan web app + MySQL sudah berhasil dengan baik. Untuk menambahkan table pada database MySQL dan menambahkan file kode php yang digunakan untuk membuat web service maka dibutuhkan data profile tentang web server yang sudah kita buat. Untuk mendapatkan data profile tersebut caranya dengan masuk ke dalam web App yang sudah dibuat, kemudian pada kolom sebelah kanan atas pilih “More”, pilih “Get publish profile”. Tampilan seperti pada gambar 5.13 berikut ini:
Gambar 5.13. Get Publish Profile
Publish profile adalah sebuah identitas dari web app yang anda buat, informasi ini disimpan dalam sebuah file, sehingga ketika anda klik “Get Publish profile” maka anda akan diminta untuk mendownload file tersebut. Tampilan file yang akan didownload seperti pada gambar 5.13. Simpan file tersebut di folder komputer anda. Perlu diingat bahwa file tersebut berisi username dan password dari web app anda oleh karena itu disarankan untuk menyimpannya dengan baik.
Mudahnya Membuat Aplikasi Android dengan Visual Studio dan Xamarin 49
Gambar 5.13. Puplish profile file
Isi dari file publish profile ketika dibuka dengan notepad adalah seperti pada gambar 5.14. Informasi ini anda gunakan untuk login ke dalam database MySQL yang sudah anda buat atau anda gunakan untuk mengirim file ke web server melalui FTP (File Transfer Protocol).
agussuparno.com
Mudahnya Membuat Aplikasi Android dengan Visual Studio dan Xamarin 50
5.1 Membuat Tabel
Untuk membuat tabel pada database MySQL Azure dibutuhkan tool/software managemen database, pada tulisan ini saya menggunakan software “Navicat for MySQL” anda bisa menggunakan tool kesukan anda sendiri. Pada tampilan utama Navicat klik “Connection” untuk membuat koneksi baru. Isi data “New Connection” dengan informasi yang berasal dari file Publish Profile yang sudah anda download. Contoh informasi untuk koneksi database MySQL pada file Publish Profile seperti pada gambar 5.15. Tulisan yang diblok adalah informasi yang bisa digunakan untuk login ke dalam database MySQL.
Mudahnya Membuat Aplikasi Android dengan Visual Studio dan Xamarin 51
Gambar 5.16. Buat koneksi database Azure
Jika koneksi berhasil dilakukan maka tampilan Navicat akan berisi nama database yang terletak di Azure, pada contoh ini adalah “stikomyosdb”. Tampilan database seperti pada gambar 5.16.
agussuparno.com
Mudahnya Membuat Aplikasi Android dengan Visual Studio dan Xamarin 52
Langkah berikutnya kita akan membuat sebuah tabel untuk menyimpan data pada database. Tabel yang dibuat adalah tabel mahasiswa dengan kolom-kolom seperti pada gambar 5.17. Kolom “usrname” dan “password” digunakan untuk membuat autentikasi mahasiswa pada halaman login yang nanti akan kita buat.
Gambar 5.17. Membuat tabel “tb_mhs”
Beri nama tabel tesebut dengan “tb_mhs”. Sebagai contoh silakan isi data pada tabel tersebut. Pada gambar 5.18 saya isikan dua buah data mahasiswa. Pada tahap ini proses pembuatan database sudah selesai.
Mudahnya Membuat Aplikasi Android dengan Visual Studio dan Xamarin 53
Gambar 5.19. File login.php
Simpan file tersebut dengan nama “login.php”. Anda bisa membuat file tersebut menggunakan notepad atau tool editor lainnya. Setelah itu lakukan proses pengunggahan file tersebut ke web server caranya dengan menggunakan tool FTP (File Transfer Protocol). Tool FTP yang saya gunakan adalah Filezilla, tool ini tersedia gratis diinternet. Silakan anda bisa download tool ini di https://filezilla-project.org/. Buka software FileZilla setelah diinstall. Pada kolom Host diisi nama server yang ada pada file Publish Profile, begitu juga dengan username dan password. Port tidak perlu diisi, klik “Quick Connect”. Setelah tersambung maka tampilan Filezilla seperti pada gambar 5.20.
agussuparno.com
Mudahnya Membuat Aplikasi Android dengan Visual Studio dan Xamarin 54
Gambar 5.20. Upload file login.php ke web server
Kolom sebelah kiri adalah lokasi folder komputer lokal. Kolom sebelah kanan adalah folder yang ada di web server. Klik kanan pada file “login.php” kemudian pilih upload untuk mengunggah file tersebut.
5.3. Membuat Tampilan Login
Untuk mengaplikasikan webservice ini kita akan membuat sebuah aplikasi mobile. Pada contoh ini saya akan membuat aplikasi Android menggunakan Visual Studio dan Xamarin. Ada 2 tampilan pada aplikasi ini yaitu tampilan utama sebagai halaman login dan tampikan kedua sebagai halaman menu. Pada Visual Studio klik “File -> New -> Project …” maka akan muncul tampilan seperti pada gambar 5.21. Pilih jenis aplikasi yang dibuat adalah “Blank App (Android), kemudian klik “ok”.
Mudahnya Membuat Aplikasi Android dengan Visual Studio dan Xamarin 55
Gambar 5.21. Projek Baru Android Blank App
Supaya aplikasi mobile bisa mengolah file JSON dari web service maka diperlukan sebuah package yang harus ditambahkan ke dalam project aplikasi tersebut. Package yang ditambahkan adalah Newtonsof JSON. Cara menambahkan NuGet Package ini adalah dengan klik kanan pada project kemudian pilih “Manage NuGet Packages…” seperti ditunjukan pada gambar 5.22.
agussuparno.com
Mudahnya Membuat Aplikasi Android dengan Visual Studio dan Xamarin 56
Pada tampilan NuGet Package Manager klik pada tab “Browser” kemudian ketik “Newtonsoft”, pilih Newtonsoft.Json kemudian klik tombol install pada kolom sebelah kanan seperti pada gambar 5.23.
Gambar 5.23. NuGet Packages Manager
Buat tampilan login pada layout utama (Main.axml) seperti pada gambar 5.24.
Mudahnya Membuat Aplikasi Android dengan Visual Studio dan Xamarin 57
Gambar 5.23. Tampilan Menu Utama
Selanjutnya tambahkan kode pada file MainActivity.cs. File tersebut digunakan untuk melakukan proses login dari halaman login yang dihubungkan dengan web service “login_event” yang sudah kita buat sebelumnya. Kode penuh pada file MainActivity.cs bisa anda lihat pada gambar 5.24.
agussuparno.com
Mudahnya Membuat Aplikasi Android dengan Visual Studio dan Xamarin 58
Mudahnya Membuat Aplikasi Android dengan Visual Studio dan Xamarin 59
Gambar 5.25. Login Gagal
Sedangkan tampilan jika proses login sukses maka akan muncul tampilan menu utama seperti pada gambar 5.26.
agussuparno.com
Mudahnya Membuat Aplikasi Android dengan Visual Studio dan Xamarin 60
Demikian penjelasan tentang bagaimana membuat sebuah web service mengunakan PHP dan MySQL dengan format JSON. Kemudian menggunakan web service tersebut pada sebuah aplikasi mobile untuk menangani proses login. Pada bab berikutnya akan dijelaskan tentang bagaimana menambahkan data, menampilkan data, edit data dan menghapus data tentunya menggunakan web service.
