5 Membuat Web Service dengan Azure

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 Mobile App Gambar 5.1. Skema Web Service Admin Web Server 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Gambar 5.24. Kode lengkap MianActivity.cs Mudahnya Membuat Aplikasi Android dengan Visual Studio dan Xamarin 58

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

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