Kolaborasi Basic4Android dan Yii PHP Framework (1)

Chairruddin Arrasid | 10/08/2015 | Basic4Android | 11 Comments

Pada artikel sebelumnya saya pernah share Cara Menghubungkan Aplikasi Android ke Database MySQL tanpa perlu repot-repot membuat Web Server sendiri, yaitu dengan menggunakan Remote Database Server (RDC), sebuah middleware berupa Java Web Server yang memungkinkan kita dengan mudah untuk menghubungkan aplikasi android ke berbagai Remote Database Server.

Library yang digunakan dalam project ini yaitu HttpUtils2 dan JSON.

Berhubung banyak yang menanyakan bagaimana jika aplikasi Android-nya menggunakan API atau JSON dari sebuah Web Server, maka kali ini saya akan share tutorialnya! Dalam tutorial ini saya menggunakan PHP dengan Yii Framework sebagai Web Server-nya. Dan di sini saya akan lebih menekankan pada penjelasan mengenai Basic4Android (B4A) seperti: Request data ke server, parsing JSON, menampilkan hasil parsing JSON, dll. Jadi, untuk tutorial Yii Framework seperti: Instalasi Yii, generate Model dan CRUD dengan Gii, setting config database, dll. Bisa tanya ke si Mbah 😀

Sebelum melangkah lebih jauh, terlebih dahulu buat database MySQL-nya, dengan nama (misal): h-store. Lalu buatlah tiga tabel dengan nama: barang, kategori, dan user.

Lalu buatlah field-field sebagai berikut:

Tabel barang

Tabel kategori

Tabel user

Web Server/Back-End (Masih Standar Yii Framework)

* * *

Jika database MySQL sudah dibuat, lalu perhatikan langkah-langkah berikut ini…

Membuat Login Aplikasi

Di sini (Yii Framework) ada tiga controller yang saya generate, yaitu: BarangController, KategoriController, dan UserController. Controller-controller ini yang nantinya akan meng-handle request data yang datang dari mobile atau aplikasi Android-nya.

Pada UserController saya menambahkan fungsi actionMobile, code-nya seperti berikut:

Public function actionMobile()
{
	switch ($_GET['action']){
		
		Case 'login':
			$user = User::model()->findByAttributes(Array('username'=>$_GET['username'], 'password'=>md5($_GET['password'])));

	        If($user===Null){
	        	//Login gagal
	            $result = 0;
	        	$message = "Login gagal. Silakan cek kembali Username atau Password.";
	        }            
	        else{
	        	//Login sukses
	        	$result = 1;
	        	$message = "Login sukses. Hai, ".$_GET['username'].". Selamat datang di H-Store!";
	        }
	        echo CJSON::encode(Array('result'=>$result, 'message'=>$message, 'data'=>$user));
	        break;
	}
}

Public function actionMobile()

{

switch ($_GET['action']){

Case 'login':

$user = User::model()->findByAttributes(Array('username'=>$_GET['username'], 'password'=>md5($_GET['password'])));

If($user===Null){

//Login gagal

$result = 0;

$message = "Login gagal. Silakan cek kembali Username atau Password.";

}

else{

//Login sukses

$result = 1;

$message = "Login sukses. Hai, ".$_GET['username'].". Selamat datang di H-Store!";

}

echo CJSON::encode(Array('result'=>$result, 'message'=>$message, 'data'=>$user));

break;

}

Beri akses actionMobile pada fungsi accessRules, agar bisa diakses oleh aplikasi Android-nya.

Public function accessRules()
{
	Return Array(
		Array('allow',  // allow all users to perform 'index' and 'view' actions
			'actions'=>array('index','view','mobile'),
			'users'=>array('*'),
		),
		...
		...
		...
	);
}

Public function accessRules()

{

Return Array(

Array('allow', // allow all users to perform 'index' and 'view' actions

'actions'=>array('index','view','mobile'),

'users'=>array('*'),

...

);

}

Oke, beralih ke B4A. Buat project baru lalu save dengan nama: h-store.

Membuat Aplikasi Android Pertama dengan Basic4Android

Buka jendela Designer dengan mengklik menu Designer.

Buat layout baru dengan nama: login. Lalu tambahkan object-object seperti gambar berikut:

Membuat Form Login Aplikasi di Basic4Android (1)

Kemudian deklarasikan object-object tersebut. Untuk btnLogin tambahkan event Click.

Sub Globals
	'These global variables will be redeclared each time the activity is created.
	'These variables can only be accessed from this module.

	Private edtUsername As EditText
	Private edtPassword As EditText
	Private btnLogin As Button
End Sub

Sub btnLogin_Click
	'Saat button login diklik.
End Sub

Sub Globals

'These global variables will be redeclared each time the activity is created.

'These variables can only be accessed from this module.

Private edtUsername As EditText

Private edtPassword As EditText

Private btnLogin As Button

End Sub

Sub btnLogin_Click

'Saat button login diklik.

End Sub

Pada Process_Globals deklarasikan sebuah variabel string dengan nama: serverAddress. Variabel ini berfungsi untuk menampung alamat IP Web Server-nya.

Sub Process_Globals
	'These global variables will be declared once when the application starts.
	'These variables can be accessed from all modules.

	'Alamat IP Web Server-nya.
	Dim serverAddress As String = "http://192.168.0.104/h-store"
End Sub

Sub Process_Globals

'These global variables will be declared once when the application starts.

'These variables can be accessed from all modules.

'Alamat IP Web Server-nya.

Dim serverAddress As String = "http://192.168.0.104/h-store"

End Sub

Pada event Activity_Create masukkan code seperti di bawah ini:

Sub Activity_Create(FirstTime As Boolean)
	'Panggil layout yg akan digunakan pada activity ini.
	Activity.LoadLayout("login")
	
	'Set judul untuk activity ini.
	Activity.Title = "H-Store"
End Sub

Sub Activity_Create(FirstTime As Boolean)

'Panggil layout yg akan digunakan pada activity ini.

Activity.LoadLayout("login")

'Set judul untuk activity ini.

Activity.Title = "H-Store"

End Sub

Lalu pada Sub btnLogin_Click tambahkan code berikut:

Sub btnLogin_Click
	'Validasi jika username kosong.
	If edtUsername.Text = "" Then
		Msgbox("Please enter Username.", "Warning")
		Return
	End If
	'Validasi jika password kosong.
	If edtPassword.Text = "" Then
		Msgbox("Plese enter Password.", "Warning")
		Return
	End If
	
	ProgressDialogShow2("Please wait . . .", False)
			
	Dim job As HttpJob
	job.Initialize("loginJob", Me)

	'Request data user ke server.
	Dim S As String = serverAddress & "/user/mobile"	
	job.Download2(S , Array As String("action", "login", "username", edtUsername.Text, "password", edtPassword.Text))	
End Sub

Sub btnLogin_Click

'Validasi jika username kosong.

If edtUsername.Text = "" Then

Msgbox("Please enter Username.", "Warning")

Return

End If

'Validasi jika password kosong.

If edtPassword.Text = "" Then

Msgbox("Plese enter Password.", "Warning")

Return

End If

ProgressDialogShow2("Please wait . . .", False)

Dim job As HttpJob

job.Initialize("loginJob", Me)

'Request data user ke server.

Dim S As String = serverAddress & "/user/mobile"

job.Download2(S , Array As String("action", "login", "username", edtUsername.Text, "password", edtPassword.Text))

End Sub

Setelah itu buat event JobDone. JobDone ini akan berjalan ketika proses komunikasi antara App Client (Android) dengan Web Server selesai.

Sub JobDone (Job As HttpJob)
	Dim Map1 As Map
	Dim JSON As JSONParser
	Map1.Initialize

	If Job.Success = False Then
		ToastMessageShow("Login failed! Please try again.", True)
		ProgressDialogHide
	Else
		If Job.JobName = "loginJob" Then
			JSON.Initialize(Job.GetString)			
			Map1 = JSON.NextObject
			Dim result As Int = Map1.Get("result")	
					
			'Jika result = 1, berarti login sukses.
			'Jika result = 0, berarti login gagal.
			If(result = 1) Then				
				Msgbox(Map1.Get("message"), "Info")
				StartActivity(Menu)
			Else
				Msgbox(Map1.Get("message"), "Info")
			End If
						
			ProgressDialogHide
		End If
	End If
	Job.Release
End Sub

Sub JobDone (Job As HttpJob)

Dim Map1 As Map

Dim JSON As JSONParser

Map1.Initialize

If Job.Success = False Then

ToastMessageShow("Login failed! Please try again.", True)

ProgressDialogHide

Else

If Job.JobName = "loginJob" Then

JSON.Initialize(Job.GetString)

Map1 = JSON.NextObject

Dim result As Int = Map1.Get("result")

'Jika result = 1, berarti login sukses.

'Jika result = 0, berarti login gagal.

If(result = 1) Then

Msgbox(Map1.Get("message"), "Info")

StartActivity(Menu)

Else

Msgbox(Map1.Get("message"), "Info")

End If

ProgressDialogHide

End If

Job.Release

End Sub

Berikut adalah JSON yang dihasilkan saat ada request data user dari mobile atau aplikasi Android:

Jika login gagal

Jika login sukses

Bisa kita lihat baris kode pada poin 10 di atas,

Baris ke-12: Hasil parsing JSON yang dilakukan oleh JSON.NextObject di-assign ke additional Map (Map1).
Baris ke-13: Value dari “result” ditampung ke variabel result.
Baris ke-18 dan 21: Value dari “message” ditampilkan di MsgBox.

* * *

Membuat Menu Utama pada Aplikasi

Setelah membuat login, sekarang kita akan membuat menu utama. Jadi, jika user sukses saat melakukan login, maka akan diarahkan ke menu utama ini.

Buat activity baru, beri nama Menu.

Membuat Multi Activity di Basic4Android

Kemudian buat layout baru dengan nama: menu. Lalu tambahkan object-object seperti gambar berikut:

Jika Button-nya ingin dipasang gambar, silakan atur properties Button-nya (misal btnKategori) seperti berikut ini:

Kemudian deklarasikan object-object tersebut. Dan tambahkan event Click untuk btnKategori dan btnBarang.

Sub Globals
	'These global variables will be redeclared each time the activity is created.
	'These variables can only be accessed from this module.

	Private btnKategori As Button
	Private btnBarang As Button
End Sub

Sub btnKategori_Click
	'Saat button kategori diklik.
End Sub

Sub btnBarang_Click
	'Saat button barang diklik.
End Sub

Sub Globals

'These global variables will be redeclared each time the activity is created.

'These variables can only be accessed from this module.

Private btnKategori As Button

Private btnBarang As Button

End Sub

Sub btnKategori_Click

'Saat button kategori diklik.

End Sub

Sub btnBarang_Click

'Saat button barang diklik.

End Sub

Pada event Activity_Create masukkan code seperti di bawah ini:

Sub Activity_Create(FirstTime As Boolean)
	'Panggil layout yg akan digunakan pada activity ini.
	Activity.LoadLayout("menu")
	
	'Set judul untuk activity ini.
	Activity.Title = "Menu"
End Sub

Sub Activity_Create(FirstTime As Boolean)

'Panggil layout yg akan digunakan pada activity ini.

Activity.LoadLayout("menu")

'Set judul untuk activity ini.

Activity.Title = "Menu"

End Sub

Save, kemudian Run/Compile project ini dalam versi Release.
Lalu lihat, apa yang terjadi…
Form login, saat aplikasi di-running.

Saat login gagal.

Saat login sukses.

Menu utama aplikasi.

Oke, demikian kolaborasi antara Basic4Android dengan Yii PHP Framework untuk bagian pertama. Di bagian kedua nanti akan saya share cara membuat CRUD untuk tabel barang dan kategori. Happy Coding! 🙂

Silakan download source code lengkapnya di sini: B4A | Yii | DB

Untuk bagian keduanya:

Kolaborasi Basic4Android dan Yii PHP Framework (2)

About The Author

Chairruddin Arrasid

Orang yang suka belajar, juga suka membaca, juga suka menulis, dan juga suka makan kalau lapar. Dulu waktu kecil tidak punya cita-cita jadi programmer, tapi sekarang jadi programmer. Lah? Mungkin dulu masih belum tahu bahwa programming itu menyenangkan.

0 0 votes

Article Rating

This site uses Akismet to reduce spam. Learn how your comment data is processed.

11 Comments

Oldest

Newest Most Voted

Inline Feedbacks

View all comments

Imam

9 years ago

Guanteng pisan tutorial e….sukses selalu gan…

Chairruddin Arrasid

Author

Reply to Imam

9 years ago

Thanks gan 🙂

Guest

9 years ago

bagus sekali tutorialnya. sedikit saran, untuk response login sukses sebaiknya tidak usah menampilkan data password. untuk mencegah hal yg tidak diinginkan 😀

Chairruddin Arrasid

Author

Reply to Guest

9 years ago

Thanks atas kunjungan dan juga sarannya.

Iya di atas semua field di tabel user dikirimkan. Namun jika ingin seperti itu, bisa disensor saja password-nya 😀

Public function actionMobile()
{
	switch ($_GET['action']){
		
		Case 'login':
			$user = User::model()->findByAttributes(Array('username'=>$_GET['username'], 'password'=>md5($_GET['password'])));

	        If($user===Null){
	        	//Login gagal
	            $result = 0;
	        	$message = "Login gagal. Silakan cek kembali Username atau Password.";
	        }            
	        else{
	        	//Login sukses
	        	$result = 1;
	        	$message = "Login sukses. Hai, ".$_GET['username'].". Selamat datang di H-Store!";
	        	$user->password = '*****';
	        }		        
	        echo CJSON::encode(Array('result'=>$result, 'message'=>$message, 'data'=>$user));
	        break;
	}
}

Public function actionMobile()

{

switch ($_GET['action']){

Case 'login':

$user = User::model()->findByAttributes(Array('username'=>$_GET['username'], 'password'=>md5($_GET['password'])));

If($user===Null){

//Login gagal

$result = 0;

$message = "Login gagal. Silakan cek kembali Username atau Password.";

}

else{

//Login sukses

$result = 1;

$message = "Login sukses. Hai, ".$_GET['username'].". Selamat datang di H-Store!";

$user->password = '*****';

}

echo CJSON::encode(Array('result'=>$result, 'message'=>$message, 'data'=>$user));

break;

}

Floren

Reply to Chairruddin Arrasid

7 years ago

Mas, gmn caranya upload RDC ke server??
apa yg harus dsetting d android kita???

Kolaborasi Basic4Android dan Yii PHP Framework (2) | Always Del Heru

9 years ago

[…] Kolaborasi Basic4Android… […]

fadil

7 years ago

gan kok gk bisa di compile yah

sirad

6 years ago

gan apa pada latihan ini masih pake RDC ???

daris

6 years ago

klo tanpa framework langsung php aja buat login khususnya ke mysql, gmna ya ?? klo bsa ada tutorialnya buat belajar

Arip

5 years ago

ijin sedot gan. sangat sederhana dan mudah dipahami penjelasannya

ivijuditavija

3 years ago

– Emozinow Iyifoneja qra.ssdg.alwaysdelheru.com.lls.us

aoduzunahii

3 years ago

– Afucgub Adoqom aey.npqp.alwaysdelheru.com.fml.jb

Tabel barang

Tabel kategori

Tabel user

Web Server/Back-End (Masih Standar Yii Framework)

Membuat Login Aplikasi

Membuat Menu Utama pada Aplikasi

Related Posts

About The Author

Chairruddin Arrasid