yang akan kita pelajari disini adalah cara membuat form login dengan Vuejs, dimana kita mempunyai sebuah form login dan ketika kita inputkan, akan mengeluarkan tampilan seolah kita sudah berhasil untuk login, dan disini kita akan menggunakan vuejs, jadi jangan kemana-mana simak terus ya teman-teman.
jadi kasus untuk kali ini dalam cara membuat form login dengan Vuejs adalah sebenarnya masih dalam satu halaman ya, tetapi ketika seorang itu berhasil login dan data login yang di masukan benar maka akan berganti tampilan seolah-olah sudah ganti halaman, seperti itu.
yang harus kita lakukan adalah kita akan menyembunyikan sebuah halaman berhasilnya jika orang itu berhasil login, dengan v-if, yang saya berikan false, jadi pertamnya berarti true ya, oke langsung silahkan teman-teman buat file index.php nya lalu ketika seperti ini:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="../dist/bootstrap.css">
</head>
<body>
<div class="container mt-4" id="app">
<div class="row" v-if="!page">
<div class="jumbotron">
<h1 class="display-4">Hallow {{ userLogin }} </h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<a class="btn btn-primary btn-lg" href="logout.php" role="button">logout</a>
</div>
</div>
<div class="row" v-if="page">
<div class="col-md-12">
<form>
<div class="form-group">
<input type="text" name="" class="form-control" v-model="user">
</div>
<div class="form-group">
<input type="password" name="" class="form-control" v-model="pass">
</div>
<button class="btn btn-primary" @click.prevent="login">login</button>
<span class="alert alert-danger" v-if="teksNotif">{{ teksNotif }}</span>
</form>
</div>
</div>
</div>
<script type="text/javascript" src="../dist/jquery.js"></script>
<script type="text/javascript" src="../dist/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
user: null,
pass: null,
url: 'data.php',
teksNotif: null,
page: true,
userLogin: null
},
methods:{
showData(){
this.page = false
},
login(){
var self = this
$.ajax({
url: self.url,
method: 'POST',
data: {
username: self.user,
password: self.pass
}
})
.done((data)=>{
var result = JSON.parse(data)
if(result[0]){
this.teksNotif = null
this.showData()
this.userLogin = result[1]
}else{
this.teksNotif = result[1]
}
})
}
}
})
</script>
</body>
</html>
Jika teman-teman bertanya ko tidak menggunakan session_start() biasanya ketika kita menggunakan sebuah login ada sebuah sessionnya, ya benar tetapi karena di halaman ini kita tidak menampilkan sebuah session jadi tidak perlu ya. jika teman-teman lihat ajaxnya menghar pada sebuah data.php oke sekarang teman-teman buat file data.php dan ketika seperti ini:
<?php
session_start();
$koneksi = mysqli_connect('localhost', 'root', '', 'ajax');
if(isset($_POST['username']) && isset($_POST['password'])){
if( !empty($_POST['username']) && !empty($_POST['password']) ) {
$username = mysqli_real_escape_string($koneksi, $_POST['username']);
$password = md5(mysqli_real_escape_string($koneksi, $_POST['password']));
$sql = "SELECT * FROM ajax_login_coba WHERE username = '$username' AND password = '$password' ";
$result = mysqli_query($koneksi, $sql);
$num_rows = mysqli_num_rows($result);
if($num_rows > 0){
$row = mysqli_fetch_array($result);
$_SESSION['admin_id'] = $row["id"];
$_SESSION['admin_username'] = $row["username"];
echo json_encode([true, $row['username']]);
}else{
echo json_encode([false, 'data tidak ada']);
}
}else{
echo json_encode([false, 'gak boleh kosong']);
}
}else{
echo json_encode([false, 'SQL ERROR']);
}
?>
Jika teman-teman sudah pernah membuat sebuah login, pasti masih sangat familiar ya untuk ini, dan sekarang kita coba lihat hasilnya.
oke yang pertama adalah tampilan saat belum login dan ketika berhasil maka akan menampilkan seperti yang di bawahnya, dan saya rasa untuk logut teman-teman sudah bisa ya, cukup sekian cara membuat form login dengan Vuejs, semoga bermanfaat dan sampai jumpa pada artikel berikutnya terimakasih.