[Cordova]Membuat Form Login

OK langsung aja yaa hemat kouta nih, sedih ga ada speedy or wifi.id terdekat😀

masih kelanjutan yang kemarin (baca dulu klo belum tau ni link nya )

Ok masuk kedalam database, tambahakn 1 tabel dengan nama akun_user

Capture

Capture
OK langsung aja ditambah function actionMasuk dalam siteController


public function actionMasuk($username,$password)
{
$username = $username;
$password= md5($password);
$json = array();
$sql="Select * from akun_user where username=:username and password=:password";
$conn= Yii::$app->db;
$cmd=$conn->createCommand($sql);
$cmd->bindParam(":username",$username);
$cmd->bindParam(":password",$password);
$siswas=$cmd->queryAll();
if (count($siswas)<=0){
$row="Username or Password anda salah";
$result="0";
} else {
$row="Sukses Login";
$result="Sukses";
}
$json[] = array(
'result' => $result,
'pesan' => $row
);
\Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
return $json;
}

selanjutkan edit file index.html


<!DOCTYPE html>
<html>
<head>
<title>Aplikasi SIMGRPNS</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script src="vendor/waves/waves.min.js"></script>
<script src="vendor/wow/wow.min.js"></script>
<script src="js/nativedroid2.js"></script>
<script src="js/nd2settings.js"></script>
<script type="text/javascript" src="cordova.js"></script>

<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" href="css/styles.css" />
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="vendor/waves/waves.min.css" />
<link rel="stylesheet" href="vendor/wow/animate.css" />
<link rel="stylesheet" href="css/nativedroid2.css" />
<link rel="stylesheet" href="css/style.css">

<script>

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {

localStorage.clear();
//Login Masuk Ke menu
$( "#login" ).click(function() {
var username = $("#username").val();
var password = $("#password").val();

localStorage.setItem("kode",username);
$.mobile.loading("show");

$.ajax({
url: "http://weedingme.esy.es/web/index.php?r=site/masuk",
method:"GET",
data:{username:username,password:password},
dataType: "json",
success: function(parsed_json) {
$.each(parsed_json, function(i,item){
if (item.result=="0"){
alert(item.pesan);
}else{
location.href='nilai.html';
};
});
},

// $.mobile.loading("hide");
timeout: 30000,
//location.href='nilai.html';
error:function(){alert("Periksa Kembali Koneksi Internet Anda, Closing Application...");navigator.app.exitApp(); }
});
});
//aksi ketika di pencet tombol kembali
document.addEventListener("backbutton",tombolKeluar, false);
function tombolKeluar(){
function exitAplication(buttonIndex){
if(buttonIndex == 1){ // nomer 1 adalah urutan tombol Ya
navigator.app.exitApp(); // perintah untuk keluar dari aplikasi
}
}
navigator.notification.confirm(
'Yakin untuk Keluar Aplikasi ?', // pesan
exitAplication, // callback saat tombol ditekan
'Konfirmasi', // title
['Ya', 'Tidak'] // buttonLabels
);
}
}

</script>
</head>
<body>
<div data-role="page">
<div data-role="header" >
<a href="#" ><i class="zmdi zmdi-lock-outline zmd-fw"></i></a>
<h1 class="wow fadeIn" >Monitoring Siswa Mobile</h1>
</div>
<div data-role="content">
<div id="landmark-1" data-landmark-id="1">
<form data-ajax="false" id="formlogin">
<div data-role="fieldcontain" >
<div class="box">
<label>Nis</label>
<input type="number" name="username" id="username" value="" placeholder="Masukkan Nis" maxlength="18" />
</div>
<div class="box">
<label>Password</label>
<input type="password" name="password" id="password" value="" placeholder="Masukkan Password" />
</div>
</div>
<a href="#" id="login" class="ui-btn ui-btn-raised clr-primary">Login</a>
</form>
</div>
</div>

</div>
</body>
</html>

perhatikan saya ada gunakan localStorage.setItem(“kode”,username); yang artinya nanti isi variable dari username akan masuk kedalam penyimpan local di hape , kapasistas penyimpanan local ada 5Mb aja, dengan nama kode, naa selajutnya jika berhasil masuk login akan masuk kedalam nilai.html, tidak jauh berbeda dari kemarin, cuma cukup edit beberapa aja, yaa begini kompletnya

nilai.html


<!DOCTYPE html>
<html>
<head>
<title>Aplikasi Siswa</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script src="vendor/waves/waves.min.js"></script>
<script src="vendor/wow/wow.min.js"></script>
<script src="js/nativedroid2.js"></script>
<script src="js/nd2settings.js"></script>
<script type="text/javascript" src="cordova.js"></script>

<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" href="css/styles.css" />
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="vendor/waves/waves.min.css" />
<link rel="stylesheet" href="vendor/wow/animate.css" />
<link rel="stylesheet" href="css/nativedroid2.css" />
<link rel="stylesheet" href="css/style.css">

<script>
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {

//parsing JSON
var kode =localStorage.getItem("kode");
var tHead = $('table#app-status-table thead');
var tBody = $('#app-status-table tbody');
$.mobile.loading("show");
$.ajax({
url: "http://weedingme.esy.es/web/index.php?r=site/nilai",
method : "GET",
data : {kode:kode},
dataType: "json",
success: function(parsed_json) {
$.each(parsed_json, function(i,data){

var headRow = "<tr><th data-priority='1'>Nama</th>";
headRow += "<th data-priority='2'>matematika</th>";
headRow += "<th data-priority='3'>fisika</th>";
headRow += "<th data-priority='4'>kimia</th></tr>";

tHead.append(headRow);

var theRow = "<tr><td><div style='float:right;'>" + data.nama + "</div></td>";
theRow += "<td><div style='float:right;'>" + data.matematika + "</div></td>";
theRow += "<td><div style='float:right;'>" + data.fisika + "</div></td>";
theRow += "<td><div style='float:right;'>" + data.kimia + "</div></td></tr>";

tBody.append(theRow);

$("#app-status-table").table("refresh");
});
$.mobile.loading("hide");

},
timeout: 30000,
error:function(){ alert("Periksa Kembali Koneksi Internet Anda, Closing Application...");navigator.app.exitApp(); }
});

//aksi ketika di pencet tombol kembali
document.addEventListener("backbutton",tombolKembali, true);
function tombolKembali(){
location.href='index.html';
}
}

</script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed" class="wow fadeIn">

<a href='#' class='ui-btn ui-btn-left wow fadeIn' ><i class='zmdi zmdi-menu'></i></a>
<h1> Detail Nilai Siswa</h1>

</div>
<div data-role="content">
<table data-role="table" id="app-status-table" data-mode="reflow" class="ui-responsive table-stroke">
<thead>
</thead>
<tbody></tbody>
</table>
</div>

</div>
</body>
</html>

naa ada lagi localStorage.getItem(“kode”) artinya di akan mengambil variable kode yg tersimpan didalam penyimpanan local tadi, untuk mengapus bisa pake localStorage.clear() atau localStorage.removeItem(“var”), ok langsung aja bluid

hasilnya

Screenshot_2016-01-22-16-15-41[1] Screenshot_2016-01-22-16-03-00 Screenshot_2016-01-22-16-03-18

maka siswa bisa login berdasarkan NIS masing-masing🙂 ok happy koding

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: