Tutorial Xamarin Form : Insert Data ke dalam MySQL dengan metode Post Web Services (Rest Api)

Selamat siang jumpa lagi dengan saya, pada kesempatan kali ini kita akan membuat sebuah page dengan xamarin form. Dimana page tersebut akan mengirim data yang kita inputkan pada aplikasi kita kedalam database MySQL yang sudah online.

Untuk Rest Apinya saya menggunakan CodeIgniter, dimana library REStnya milik mas Ardi Saurus, kita ucapkan terimakasih buat beliau karena sudah membuatkannya yah :). Alamat librarynya adalah https://github.com/ardisaurus/ci-restserver.

Sebelum menggunakan library tersebut, kita wajib memiliki sebuah database dan tabel. Nah untuk tabelnya sebagai tutorial saya berikan nama tabel ma_kontakform saja ya. Isi strukturnya terdiri dari id, nama, email dan pesan.

Kemudian kita upload library ci-restserver tersebut kedalam server kita, kalau saya sudah rename dengan nama RestApi foldernya.

Kemudian kita lakukan konfigurasi nih, pada Application/database.php sesuaikan username, password, host dan nama database yang sudah kalian set tentunya. Kalau anda bingung pada tahap ini pastikan anda belajar cara membuat database di CPANEL dulu ya :). Belajar memang berproses.

Langkah 1
Kita buat sebuah controller dengan nama Kontak.php pada codeigniter RestApi kita. Karena tutorial ini menunjukan post data , maka saya hanya akan kasih kode yang bagian post saja ya. Oh iya kebetulan saya baca juga artikel tentang Rest Api punya CI ini di CodePolitan loh ini linknya https://www.codepolitan.com/rest-api-server-sederhana-dengan-codeigniter-58901f324a29f

Kontak.php

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

require APPPATH . '/libraries/REST_Controller.php';
use RestserverLibrariesREST_Controller;

class Kontak extends REST_Controller {

    function __construct($config = 'rest') {
        parent::__construct($config);
        $this->load->database();
    }

    //Menampilkan data kontak
    function index_get() {
        $id = $this->get('id');
        if ($id == '') {
            $kontak = $this->db->get('ma_kontakform')->result();
        } else {
            $this->db->where('id', $id);
            $kontak = $this->db->get('ma_kontakform')->result();
        }
        $this->response($kontak, 200);
    }

    //Mengirim atau menambah data kontak baru
 function index_post() {
        $data = array(
                    'id'       => $this->post('id'),
                    'nama'     => $this->post('nama'),
                    'email'    => $this->post('email'),
                    'pesan'    => $this->post('pesan')

                );
        $insert = $this->db->insert('ma_kontakform', $data);
        if ($insert) {
            $this->response($data, 200);
        } else {
            $this->response(array('status' => 'fail', 502));
        }
    }
    //Masukan function put

    function index_put() {
        $id = $this->put('id');
        $data = array(
                    'id'       => $this->put('id'),
                    'nama'          => $this->put('nama'),
                    'email'    => $this->put('email'),
                    'pesan' =>$this->put('pesan')
                
                );
        $this->db->where('id', $id);
        $update = $this->db->update('ma_kontakform', $data);
        if ($update) {
            $this->response($data, 200);
        } else {
            $this->response(array('status' => 'fail', 502));
        }
    }


    //function delete
    function index_delete() {
        $id = $this->delete('id');
        $this->db->where('id', $id);
        $delete = $this->db->delete('ma_kontakform');
        if ($delete) {
            $this->response(array('status' => 'success'), 201);
        } else {
            $this->response(array('status' => 'fail', 502));
        }
    }
 
}
?>

Yang akan saya bahas adalah kode ini

/Mengirim atau menambah data kontak baru
 function index_post() {
        $data = array(
                    'id'       => $this->post('id'),
                    'nama'     => $this->post('nama'),
                    'email'    => $this->post('email'),
                    'pesan'    => $this->post('pesan')

                );
        $insert = $this->db->insert('ma_kontakform', $data);
        if ($insert) {
            $this->response($data, 200);
        } else {
            $this->response(array('status' => 'fail', 502));
        }
    }

Kode diatas akan melakukan post data yang telah dikonsumsi oleh xamarin form.


Okeh kita sudah punya kode untuk POST , selanjutnya kita beralih ke Xamarin Form. Jangan lupa instal JSON.net dan HttpRequest ya.

Langkah 2
Buatkah sebuah file baru new file tipe Content Page Xaml berikan nama KontakKami. Maka anda akan mendapat dua file yaitu KontakKami.xaml dan KotakKami.xaml.cs.

Pada KontakKami.xaml kodenya seperti berikut

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="ListViewJson.KontakKami">
 <ContentPage.Content>
  <StackLayout Padding="20">
  <Label Text="Silahkan Hubungi Kami"/>
   <Entry x:Name="nama" Placeholder="Masukan Nama"/>
   <Entry x:Name="email" Placeholder="Masukan Email"/>
   <Entry x:Name="pesan" Placeholder="Masukan Pesan"/>
   <Button x:Name="submit" Text="Submit" TextColor="White" HeightRequest="50" BackgroundColor="Teal"/>

  </StackLayout>
 </ContentPage.Content>
</ContentPage>

Mohon sesuaikan x:Class nya dengan nama project anda ya agar tidak terjadi eror.

Kode diatas kita buatkan 3 buah inputan data yaitu nama, email dan pesan lalu satu buah button dengan nama submit. Nah submit button ini yang akan melakukan post data ke MySQL.

pada KontakKami.xaml.cs

using System;
using System.Collections.Generic;
using System.Collections.Specialized;
using System.Linq;
using System.Net;
using System.Text;
using Newtonsoft.Json;
using System.Net.Http;

using Xamarin.Forms;
using System.Collections.ObjectModel;

namespace ListViewJson

{
 public partial class KontakKami : ContentPage
 {
  public class itemKontak
  {
   //public int id { get; set; }
   public string nama { get; set; }
   public string email { get; set; }
   public string pesan { get; set; }

  }

  public KontakKami()
  {
   InitializeComponent();
   Title = "Kontak Kami";

   submit.Clicked += async delegate {
   using (var client = new HttpClient())
      {
    var items = new itemKontak()
     {
      nama = nama.Text,
      email = email.Text,
      pesan = pesan.Text
       };

    string data = JsonConvert.SerializeObject(items);
    var content = new StringContent(data, Encoding.UTF8, "application/json");

    var uri = "https://webkamu/RestApi/index.php/kontak/";
    var results = await client.PostAsync(uri, content);

    results.EnsureSuccessStatusCode();

    //var resultstring = await results.Content.ReadAsStringAsync();
    //var post = JsonConvert.DeserializeObject<itemKontak>(resultstring);

    //Tampilkan display alert
    await DisplayAlert("Terimakasih", "Terimakasi telah menghubungi kami", "OK");

    //Arahkan ke halaman utama
    await Navigation.PushAsync(new ReminderPage());



    }
   };
  }




 }
}

Pada kode diatas kita buat sebuah model dulu dengan kode berikut, tujuannya untuk menampung data field

public class itemKontak
  {
   //public int id { get; set; }
   public string nama { get; set; }
   public string email { get; set; }
   public string pesan { get; set; }

  }

Selanjutnya kita buat fungsi jika button submit diklik oleh user

submit.Clicked += async delegate {
 using (var client = new HttpClient())
      {
 var items = new itemKontak()
  {
   nama = nama.Text,
   email = email.Text,
   pesan = pesan.Text
  };

  string data = JsonConvert.SerializeObject(items);
  var content = new StringContent(data, Encoding.UTF8, "application/json");

  var uri = "https://namawebsiteanda/RestApi/index.php/kontak/";
  var results = await client.PostAsync(uri, content);

  results.EnsureSuccessStatusCode();

  //var resultstring = await results.Content.ReadAsStringAsync();
  //var post = JsonConvert.DeserializeObject<itemKontak>(resultstring);

  //Tampilkan display alert
  await DisplayAlert("Terimakasih", "Terimakasi telah menghubungi kami", "OK");

  //Arahkan ke halaman utama
  await Navigation.PushAsync(new ReminderPage());



      }
   };

Anda bisa cek kita terlebih dahulu tampung datanya pada model

var items = new itemKontak()
  {
   nama = nama.Text,
   email = email.Text,
   pesan = pesan.Text
  };

Kemudian kita serialisasikan data json nya

string data = JsonConvert.SerializeObject(items);
  var content = new StringContent(data, Encoding.UTF8, "application/json");

Lalu, panggil url yang sudah terinstal CI Rest Server

var uri = "https://namawebsiteanda/RestApi/index.php/kontak/";
var results = await client.PostAsync(uri, content);

Nah selesai, jika dijalankan maka hasilnya seperti ini. Selamat belajar

Salam

Ipung Purwono
Facebook : https://web.facebook.com/ipungz.purwono