agussuparno.com
5 Membuat Web Service dengan Azure Web service sangat penting bagi sebuah aplikasi mobile karena dengan web service koneksi dari aplikasi mobile ke server database menjadi lebih aman dan lebih cepat. Web service sendiri merupakan perantara yang menjembatani antara database dengan aplikasi mobile, gambar berikut menjelaskan tentang bagaimana posisi web service bagi sebuah aplikasi mobile.
MySQL Server
Web Service
Admin Web Server Mobile App
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:
Mudahnya Membuat Aplikasi Android dengan Visual Studio dan Xamarin
41
agussuparno.com
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
42
agussuparno.com
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”.
Gambar 5.5. Create Web App + MySQL
Mudahnya Membuat Aplikasi Android dengan Visual Studio dan Xamarin
43
agussuparno.com
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
44
agussuparno.com
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:
Gambar 5.8. New MySQL Database
Mudahnya Membuat Aplikasi Android dengan Visual Studio dan Xamarin
45
agussuparno.com
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:
Gambar 5.10. Proses Deployment started
Mudahnya Membuat Aplikasi Android dengan Visual Studio dan Xamarin
46
agussuparno.com
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:
Gambar 5.12. Services Baru Web App + MySQL
Mudahnya Membuat Aplikasi Android dengan Visual Studio dan Xamarin
47
agussuparno.com
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
48
agussuparno.com
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).
Gambar 5.14. Isi file publish profile
Mudahnya Membuat Aplikasi Android dengan Visual Studio dan Xamarin
49
agussuparno.com
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.
Gambar 5.15. Informasi untuk login database MySQL
Mudahnya Membuat Aplikasi Android dengan Visual Studio dan Xamarin
50
agussuparno.com
Setelah diisi data koneksi database, klik “Test Connection” untuk memastikan koneksi terbentuk dengan baik. Seperti pada gambar 5.16 menunjukan bahwa koneksi berhasil dibuat. Setelah itu klik “OK”.
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.
Gambar 5.16. Koneksi database MySQL sudah terbentuk Mudahnya Membuat Aplikasi Android dengan Visual Studio dan Xamarin
51
agussuparno.com
Langkah berikutnya kita akan membuat sebuah tabel untuk menyimpan data pada database. Tabel yang dibuat adalah tabel mahasiswa dengan kolomkolom 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.
Gambar 5.18. Mengisi database MySQL
Mudahnya Membuat Aplikasi Android dengan Visual Studio dan Xamarin
52
agussuparno.com
5.2. Pembuatan kode web service. Web service yang akan kita buat adalah menggunakan bahasa pemrograman PHP. Output yang dihasilkan berupa web service dengan format JSON. JSON merupakan output web service yang cepat dan mudah untuk diolah. Pada contoh ini saya buat web service untuk menangani proses login yang digunakan pada aplikasi mobile yang akan kita buat. Kode untuk web service pada proses login dapat lihat pada gambar 5.19.
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. Mudahnya Membuat Aplikasi Android dengan Visual Studio dan Xamarin
53
agussuparno.com
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
54
agussuparno.com
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.
Gambar 5.22. Menambahkan Nuget Packages Mudahnya Membuat Aplikasi Android dengan Visual Studio dan Xamarin
55
agussuparno.com
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.
Gambar 5.24. Tampilan Login Mudahnya Membuat Aplikasi Android dengan Visual Studio dan Xamarin
56
agussuparno.com
Tampilan kedua adalah tampilan menu. Buat tampilan menu seperti pada gambar 5.23.
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.
Mudahnya Membuat Aplikasi Android dengan Visual Studio dan Xamarin
57
agussuparno.com
Gambar 5.24. Kode lengkap MianActivity.cs
Mudahnya Membuat Aplikasi Android dengan Visual Studio dan Xamarin
58
agussuparno.com
Setelah selesai proses pembuatan aplikasi mobile ini, silakan coba dijalankan dengan menggunakan emulator Android atau device Android. Tampilan login dan jika login gagal maka akan seperti pada gambar 5.25.
Gambar 5.25. Login Gagal Sedangkan tampilan jika proses login sukses maka akan muncul tampilan menu utama seperti pada gambar 5.26.
Gambar 5.26. Login Berhasil Mudahnya Membuat Aplikasi Android dengan Visual Studio dan Xamarin
59
agussuparno.com
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.
Mudahnya Membuat Aplikasi Android dengan Visual Studio dan Xamarin
60
