Jquery Mobile + Phonegap Post Data ke Server (cross-domain)
Mengembangkan aplikasi mobile menggunakan phonegap merupakan hasil kompilasi code. Walau pengembangan pada dasarnya menggunakan html. Terdapat perbedaan ketika melakukan penge-test-an antara menggunakan browser langsung dengan menggunakan browser mobile hasil kompilasi. Karena sesungguhnya phonegap memungkinkan aplikasi yang kita buat untuk mengakses cross-domain (external host).
Jadi, contoh yang saya berikan ini tidak akan berjalan ketika di test menggunakan browser desktop, namun akan berjalan ketika menggunakan emulator atau device sesungguhnya.
Disini saya menggunakan jquery mobile untuk tampilan, proses yang digunakan.
HTML Form
Untuk tampilan html form dibuat sederhana:
<form id="loginForm" method="post">
<div data-role="fieldcontain"><label for="text">Username:</label>
<input id="username" type="text" name="username" /></div>
<div data-role="fieldcontain"><label for="text">Password:</label>< input id="pass" type="password" name="pass" /></div>
<p><input id="submit" type="submit" name="submit" value="Login" data-theme="e" />
</form>Jquery Mobile
Lalu untuk bagian jquery mobile, bagian yang memproses hasil data yang di input pada form. Akan dilempar ke domain yang dituju. Disini, saya menggunakan fungsi $.post. Seharusnya menggunakan fungsi $.ajax pun bisa, karena tidak jauh berbeda.
$(document).ready(function() {
$("#submit").click(function() {
var postTo = 'http://yourdomaian.com/file.php';
$.post(postTo,{username: $('[name=username]').val() , pass: $('[name=pass]').val()} ,
function(data) {
if(data.message) {
$('#output').html(data.message);
}
} else {
$('#output').html('Could not connect');
}
},'json');
return false; }); });FILE PHP
Lalu untuk file php yang berada di domain singkatnya :
< ?php
if(isset($_POST['username'] and isset($_POST['password'])) {
if ($_POST['username'] == 'test' and $_POST['password'] == 'test') {
$data['success'] = true; $data['message'] = 'Login succesful';
} else {
$data['success'] = false; $data['message'] = 'Login failed';
}
echo json_encode($data); }
?>done
Bacaan terkait
Cara Install Composer di Windows Dengan Mudah
Composer adalah dependency manager yang sangat populer untuk pengembangan aplikasi berbasis PHP. Di artikel ini, Anda akan belajar cara menginstal Composer di Window...
10 Tips dan Trik Composer yang Wajib Diketahui Developer PHP
Composer adalah dependency manager yang sangat penting bagi developer PHP. Meskipun terlihat sederhana, ada banyak fitur dan trik yang sering terlewatkan. Berikut ad...
Install Golang di Mac
Berikut adalah panduan untuk menginstal Go (Golang) di macOS: 1. Mengunduh dan Menginstal Go Anda dapat menginstal Go menggunakan beberapa metode, termasuk Homebrew...
Komentar (2)
Great post.
<pre>
if ($_POST['username'] == 'test' and $_POST['password'] == 'test') {
$data['success'] = true; $data['message'] = 'Login succesful';
mysql_query("insert into table values('field1','field2');
dst..
}
</pre>
Tulis komentar
Komentar akan dimoderasi sebelum tampil.