By GokiSoft.com| 15:05 23/02/2022|
AngularJS

[Video] Đăng ký đăng nhập tài khoản sử dụng localStorage & AngularJS - C2110L

Bài tập - Đăng ký đăng nhập tài khoản sử dụng localStorage & AngularJS


#login.html


<!DOCTYPE html>
<html ng-app="MyApp">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Login Page</title>

	<!-- Nhung thu vien bootstrap -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

	<!-- Nhung js angularjs vao du an (Framework) -->
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

	<style type="text/css">
		.form-group {
			margin-bottom: 15px;
		}
	</style>
</head>
<body ng-controller="MyController">
<div class="container">
	<form method="post" ng-submit="login()">
		<div class="form-group">
			<label>Email: </label>
			<input required type="email" name="email" class="form-control" ng-model="email">
		</div>
		<div class="form-group">
			<label>Password: </label>
			<input required type="password" name="pwd" class="form-control" ng-model="pwd">
		</div>
		<p>
			<a href="register.html">Register a new account</a>
		</p>
		<div class="form-group">
			<button class="btn btn-success" type="submit">Login</button>
		</div>
	</form>
</div>

<script type="text/javascript">
	var app = angular.module('MyApp', [])

	app.controller('MyController', ['$scope', function($scope){
		$scope.userList = [] //Quan ly danh sach tai khoan nguoi da duoc dang ky

		$scope.loadUser = function() {
			var json = localStorage.getItem('userList')

			if(json != null && json != '') {
				$scope.userList = JSON.parse(json)
			}

			console.log($scope.userList)
		}

		$scope.loadUser()

		$scope.login = function() {
			for(var item of $scope.userList) {
				if(item.email == $scope.email && item.password == $scope.pwd) {
					return window.open('show.html', '_self')
				}
			}

			alert('Login failed')
		}
	}])
</script>
</body>
</html>


#register.html


<!DOCTYPE html>
<html ng-app="MyApp">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Register Page</title>

	<!-- Nhung thu vien bootstrap -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

	<!-- Nhung js angularjs vao du an (Framework) -->
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

	<style type="text/css">
		.form-group {
			margin-bottom: 15px;
		}
	</style>
</head>
<body ng-controller="MyController">
<div class="container">
	<form method="post" ng-submit="saveUser()">
		<div class="form-group">
			<label>Fullname: </label>
			<input required type="text" name="fullname" class="form-control" ng-model="fullname">
		</div>
		<div class="form-group">
			<label>Age: </label>
			<input required type="number" name="age" class="form-control" ng-model="age">
		</div>
		<div class="form-group">
			<label>Email: </label>
			<input required type="email" name="email" class="form-control" ng-model="email">
		</div>
		<div class="form-group">
			<label>Password: </label>
			<input required type="password" name="pwd" class="form-control" ng-model="pwd">
		</div>
		<div class="form-group">
			<label>Confirm Password: </label>
			<input required type="password" name="confirmPwd" class="form-control" ng-model="confirmPwd">
		</div>
		<p>
			<a href="login.html">I have a account</a>
		</p>
		<div class="form-group">
			<button class="btn btn-success" type="submit">Save User</button>
			<button class="btn btn-warning" type="reset">Reset</button>
		</div>
	</form>
</div>

<script type="text/javascript">
	var app = angular.module('MyApp', [])

	app.controller('MyController', ['$scope', function($scope){
		$scope.userList = [] //Quan ly danh sach tai khoan nguoi da duoc dang ky

		$scope.loadUser = function() {
			var json = localStorage.getItem('userList')

			if(json != null && json != '') {
				$scope.userList = JSON.parse(json)
			}

			console.log($scope.userList)
		}

		$scope.loadUser()

		$scope.saveUser = function() {
			console.log('save user ...')
			// Kiem tra xem mat khau co khop khong
			if($scope.pwd != $scope.confirmPwd) {
				return alert("Password doesn't match, Plz check it again!!!")
			}

			var user = {
				'fullname': $scope.fullname,
				'email': $scope.email,
				'age': $scope.age,
				'password': $scope.pwd
			}

			// Kiem tra xem email da ton tai chua
			var isFind = false
			for(i=0;i<$scope.userList.length;i++) {
				if($scope.userList[i].email == $scope.email) {
					// Tai khoan da ton tai => update lai thong tin
					$scope.userList[i] = user

					isFind = true
					break
				}
			}

			// Neu khong tim thay thong tin email -> them moi nguoi dung
			if(!isFind) {
				$scope.userList.push(user)
			}

			console.log($scope.userList)

			// Luu thong tin nguoi dung xuong localStorage
			// Chuyen userList (array object) -> json string -> save
			var json = JSON.stringify($scope.userList)
			localStorage.setItem('userList', json)
		}
	}])
</script>
</body>
</html>


#show.html


<!DOCTYPE html>
<html ng-app="MyApp">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>User Management Page</title>

	<!-- Nhung thu vien bootstrap -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

	<!-- Nhung js angularjs vao du an (Framework) -->
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

	<style type="text/css">
		.form-group {
			margin-bottom: 15px;
		}
	</style>
</head>
<body ng-controller="MyController">
<div class="container">
	<h1>User Management</h1>
	<table class="table table-bordered">
		<thead>
			<tr>
				<th>No</th>
				<th>Fullname</th>
				<th>Age</th>
				<th>Email</th>
			</tr>
		</thead>
		<tbody>
			<tr ng-repeat="item in userList track by $index">
				<td>{{ $index + 1 }}</td>
				<td>{{ item.fullname }}</td>
				<td>{{ item.age }}</td>
				<td>{{ item.email }}</td>
			</tr>
		</tbody>
	</table>
</div>

<script type="text/javascript">
	var app = angular.module('MyApp', [])

	app.controller('MyController', ['$scope', function($scope){
		$scope.userList = [] //Quan ly danh sach tai khoan nguoi da duoc dang ky

		$scope.loadUser = function() {
			var json = localStorage.getItem('userList')

			if(json != null && json != '') {
				$scope.userList = JSON.parse(json)
			}

			console.log($scope.userList)
		}

		$scope.loadUser()
	}])
</script>
</body>
</html>


Tags:



Phản hồi từ học viên

5

(Dựa trên đánh giá ngày hôm nay)

Đăng nhập để làm bài kiểm tra

Chưa có kết quả nào trước đó