angularjs CDN https://angularjs.org/ Version 1.8.2 https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js
CREATE TABLE `tbluser` (
`id` int(11) NOT NULL,
`name` varchar(150) NOT NULL,
`username` varchar(150) NOT NULL,
`password` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
INSERT INTO `tbluser` (`id`, `name`, `username`, `password`) VALUES
(1, 'Cairocoders Ednalan', 'cairocoders', '123456'),
(2, 'tutorial101', 'clded25', '123456'),
(3, 'Clydey Ednalan', 'clyde0130', '123456');
ALTER TABLE `tbluser`
ADD PRIMARY KEY (`id`);
ALTER TABLE `tbluser`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;
index.php
//index.php
<?php
session_start();
if(isset($_SESSION['user'])){
header('location:home.php');
}
?>
<!DOCTYPE html>
<html ng-app="myapp" ng-controller="controller">
<head>
<title>Angular JS PHP Mysql Login</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div class="container">
<center><h2 style="color:#fff;">Angular JS PHP Mysql Login</h2></center>
<div class="card card-login mx-auto text-center bg-dark">
<div class="card-header mx-auto bg-dark">
<span> <img src="myglogo.png" width="100" alt="Logo"/> </span><br/>
<span class="logo_title mt-5"> Login Account </span>
</div>
<div class="card-body">
<form ng-submit="myFunct()">
<div class="input-group form-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-user"></i></span>
</div>
<input type="text" class="form-control" placeholder="Username" name="username" id="username" ng-model="username" autofocus>
</div>
<div class="input-group form-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-key"></i></span>
</div>
<input type="password" class="form-control" placeholder="Password" name="password" id="password" ng-model="password">
</div>
<div class="form-group">
<button type="submit" class="btn btn-outline-danger float-right login_btn" ng-click="login()"><span class="glyphicon glyphicon-log-in"></span> {{btnName}}</button>
</div>
</form>
</div>
<div ng-if="message">
<div class="alert alert-success"><center>{{message}}</center></div>
</div>
</div>
</div>
<script>
var app = angular.module("myapp", []);
app.controller("controller", function($scope, $http) {
$scope.btnName = "Login";
$scope.error = false;
$scope.success = false;
$scope.login = function() {
if ($scope.username == null) {
alert("Please input Username");
}
else if ($scope.password == null) {
alert("Please input Password");
}
else {
$scope.btnName = "Logging in...";
$scope.alert = "Checking Account. Please Wait...";
$http({
method: 'POST',
url: 'login.php',
data:{username:$scope.username, password:$scope.password}
}).then(function (data){
console.log(data)
if(data.error){
$scope.error = true;
$scope.success = false;
$scope.message = data.data.message;
setTimeout(function() {
$scope.btnName = "Login";
$scope.$apply();
}, 3000);
}
else{
$scope.success = true;
$scope.error = false;
$scope.message = data.data.message;
setTimeout(function() {
$scope.username = null;
$scope.password = null;
$scope.btnName = "Login";
$scope.$apply();
}, 3000);
setTimeout(function() {
window.location.reload();
}, 4000);
}
},function (error){
console.log(error, 'can not get data.');
});
}
}
});
</script>
</body>
</html>
conn.php
//conn.php
<?php
$conn = new mysqli("localhost", "root", "", "testingdb");
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
?>
login.php
//login.php
<?php
include('conn.php');
session_start();
$data = json_decode(file_get_contents("php://input"));
$out = array('error' => false);
$username = mysqli_real_escape_string($conn, $data->username);
$password = mysqli_real_escape_string($conn, $data->password);
$query=$conn->query("select * from tbluser where username='$username' and password='$password'");
if($query->num_rows > 0){
$row=$query->fetch_array();
$_SESSION['user']=$row['id'];
$out['message'] = "Login Successful. Username: $username Password: $password";
}
else{
$out['error'] = true;
$out['message'] = "Login Failed. User not Found!";
}
echo json_encode($out);
?>
home.php
//home.php
<?php
session_start();
if(!isset($_SESSION['user'])){
header('location:index.php');
}
include('conn.php');
$query=$conn->query("select * from tbluser where id='".$_SESSION['user']."'");
$row=$query->fetch_array();
?>
<!DOCTYPE html>
<html>
<head>
<title>Angular JS PHP Mysql Login</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>Angular JS PHP Mysql Login</h2>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-4">
<h2><center>Welcome, <?php echo $row['username']; ?></center></h2>
<center><a href="logout.php" class="btn btn-danger"> Logout</a></center>
</div>
</div>
</div>
</body>
</html>
logout.php
//logout.php
<?php
session_start();
session_destroy();
header('location:index.php');
?>
style.css
//style.css
body {
background: #000 !important;
}
.card {
border: 1px solid #28a745;
}
.card-login {
margin-top:30px;
padding: 18px;
max-width: 30rem;
}
.card-header {
color: #fff;
/*background: #ff0000;*/
font-family: sans-serif;
font-size: 20px;
font-weight: 600 !important;
margin-top: 10px;
border-bottom: 0;
}
.input-group-prepend span{
width: 50px;
background-color: #ff0000;
color: #fff;
border:0 !important;
}
input:focus{
outline: 0 0 0 0 !important;
box-shadow: 0 0 0 0 !important;
}
.login_btn{
width: 130px;
}
.login_btn:hover{
color: #fff;
background-color: #ff0000;
}
.btn-outline-danger {
color: #fff;
font-size: 18px;
background-color: #28a745;
background-image: none;
border-color: #28a745;
}
.form-control {
display: block;
width: 100%;
height: calc(2.25rem + 2px);
padding: 0.375rem 0.75rem;
font-size: 1.2rem;
line-height: 1.6;
color: #28a745;
background-color: transparent;
background-clip: padding-box;
border: 1px solid #28a745;
border-radius: 0;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.input-group-text {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
padding: 0.375rem 0.75rem;
margin-bottom: 0;
font-size: 1.5rem;
font-weight: 700;
line-height: 1.6;
color: #495057;
text-align: center;
white-space: nowrap;
background-color: #e9ecef;
border: 1px solid #ced4da;
border-radius: 0;
}
