latest Post

/ / / / / Tutorial Membuat Fungsi Register atau Signup di Android [Cordova]

Tutorial Membuat Fungsi Register atau Signup di Android [Cordova]

By , , ,
Halo, tutorial kali ini kita akan mencoba membuat fungsi untuk daftar user atau bisa kita sebut Sign Up di Android. Masih menggunakan metode hybrid dalam pembuatannya, maka kita akan menggunakan bahasa pemrograman HTML, Javascript, dan PHP.

Oke, langsung saja kita mulai Tutorial Membuat Fungsi Daftar atau Signup di Android [Cordova].

Pertama, buat dulu database yang akan kita gunakan untuk Register.
Tutorial Membuat Fungsi Register atau Signup di Android [Cordova]


Setelah itu buat tabelnya, kira-kira seperti ini
Tutorial Membuat Fungsi Register atau Signup di Android [Cordova]

Kedua, buat form untuk register (sign up)

<div class="formarea" style="margin-top:30px;border:1px solid #ddd; padding:20px;width:200px;">
    <h3>Register</h3>
    <div class="form-row">
        <input type="text" id="email" class="text-input--underbar width-full" placeholder="Email" value="" autocomplete="off">
    </div>
    <div class="form-row">
        <input type="password" id="password" class="text-input--underbar width-full" placeholder="Password" value="" autocomplete="off">
    </div>
    <div class="form-row">
        <input type="submit" name="submit" value="Register">
    </div>
</div>

CSS 

<style type="text/css">
    .form-row{
        margin-top: 10px;
    }
</style>


Sehingga tampilan form register nantinya akan seperti ini
Setelah berhasil tampil form registernya, sekarang kita buat kodingan untuk javascriptnya. Kodingan ini yang nantinya akan mengambil value dari form dan dikirim ke server.

<script type="text/javascript">
$(document).ready(function(){
    $("#register").click(function(){
//mengambil value dari form input 
        var email=$("#email").val();
        var password=$("#password").val();

        var dataString="email="+email+"&password="+password;
        if($.trim(email).length>0 & $.trim(password).length>0)
        {
            $.ajax({
            type: "POST",
 //ganti url dengan lokasi dimana file signup berada
            url: "http://localhost:8080/belajar-android/signup.php",
            data: dataString,
            crossDomain: true,
            cache: false,
            success: function(data){
                if(data=="success")
                {
                alert("Daftar sukses! kamu bisa login sekarang");
                }
                else if(data="exist")
                {
                alert("akun ini sudah ada");
                }
                else if(data="failed")
                {
                alert("Signup error");
                }
                }
            });
        } else {
            alert("Form kosong");
        }return false;
    });
});

</script>

Oke, pada sisi aplikasi androidnya sudah selesai. Sekarang kita akan membuat kodingan untuk sisi servernya.

Buat file db.php, ini untuk mengatur koneksi ke database

<?php
 header("Access-Control-Allow-Origin: *");

 //buat koneksi mysqli
 $con=new mysqli("localhost","root","","belajar_android");

 //cek koneksi
 if ($con->connect_error){
  die("connection Failed : ".$con->connect_error);
 }
?>

Setelah itu, buat file Signup.php. File ini yang akan mengatur proses cek email apakah sudah terdaftar, dan menyimpannya jika belum terdaftar.

<?php
include "db.php";
$email=$_POST['email'];
$password=md5($_POST['password']);

//mengecek apakah email sudah ada atau tidak
$query = "SELECT * FROM tb_login where email='$email'";

$data = $con->query($query);
 if(mysqli_fetch_assoc($data)>0)
 {
 echo "exist";
 } else {
 $sql = "INSERT INTO tb_login (email, pass) VALUES ('$email','$password')";
 $q = mysqli_query($con,$sql);
 if($q)
 {
 echo "success";
 }
 else
 {
 echo "failed";
 }
}

echo mysql_error();
?>

Sekarang semuanya sudah selesai. Hasil akhir dari kodingan di sisi aplikasi adalah seperti ini

<!DOCTYPE html>
<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
 <title>Index</title>
</head>
<script type="text/javascript">
$(document).ready(function(){
    $("#register").click(function(){ 
        //mengambil value dari form input
        var email=$("#email").val();
        var password=$("#password").val();
        var dataString="email="+email+"&password="+password;
            $.ajax({
            type: "POST",
            //ganti url dengan lokasi dimana file signup berada
            url: "http://localhost:8080/belajar-android/signup.php",
            data: dataString,
            crossDomain: true,
            cache: false,
            success: function(data){
                console.log(data);
                if(data=="success")
                {
                alert("Daftar sukses! kamu bisa login sekarang");
                }
                else if(data="exist")
                {
                alert("akun ini sudah ada");
                }
                else if(data="failed")
                {
                alert("Signup error");
                }
                }
            });return false;
    });
});
</script>

<style type="text/css">
    .form-row{
        margin-top: 10px;
    }
</style>

<body>
<div class="formarea" style="margin-top:30px;border:1px solid #ddd; padding:20px;width:200px;">
    <h3>Register</h3>
    <div class="form-row">
        <input type="text" id="email" class="text-input--underbar width-full" placeholder="Email" value="" autocomplete="off">
    </div>

    <div class="form-row">
        <input type="password" id="password" class="text-input--underbar width-full" placeholder="Password" value="" autocomplete="off">
    </div>

    <div class="form-row">
        <input type="submit" name="submit" id="register" value="Register">
    </div>
</div>

</body>
</html>

Sekarang mari kita test aplikasinya.

Tutorial Membuat Fungsi Register atau Signup di Android [Cordova]
Tes aplikasi menggunakan Intel XDK
Oke, cukup mudah kan? silahkan dicoba

About taufiq

taufiq
Recommended Posts × − +

0 komentar:

Posting Komentar

Langganan: Posting Komentar ( Atom )