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

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

#login.html

Name: ZicZac: Thiết kế web & app & quản lý tồn kho
Address: Số 08 Tôn Thất Thuyết, Cầu Giấy, Hà Nội, Nam Từ Liêm, Hà Nội, 100000
Telephone: 0967025996
Price range: $$$

<!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>

	<!-- Bootstrap -> thiet ke GUI -->
	<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>

	<!-- AngularJS -> framework (js) -> duoc viet bang js (library js) -> file .js -> nhung cdn vao web -->
	<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">
<form method="post" ng-submit="login()">
	<div class="container">
		<div class="form-group">
			<label>Email:</label>
			<input required type="email" name="email" placeholder="Enter email" class="form-control" ng-model="formUser.email">
		</div>
		<div class="form-group">
			<label>Password:</label>
			<input required type="password" name="pwd" placeholder="Enter pwd" class="form-control" ng-model="formUser.pwd">
		</div>
		<div class="form-group">
			<a href="register.html">Register a new account</a>
		</div>
		<div class="form-group">
			<button class="btn btn-success" type="submit">Login</button>
		</div>
	</div>
</form>

<script type="text/javascript">
	var app = angular.module('MyApp', [])
	app.controller('MyController', ['$scope', function ($scope) {
		//Quan ly thong tin nguoi dung da dang ky tu Form
		$scope.userList = []
		$scope.formUser = {}

		//Load du lieu tu localStorage
		var json = localStorage.getItem('userList')
		if(json != '' && json != null) {
			$scope.userList = JSON.parse(json)
			console.log($scope.userList)
		}

		$scope.login = function() {
			//Kiem tra thong tin email nhap vao co trung vs tai khoan trc do khong
			for(var item of $scope.userList) {
				if(item.email == $scope.formUser.email && item.pwd == $scope.formUser.pwd) {
					//update
					alert('Login successfully!')
					window.open('show.html', '_self')
					return
				}
			}

			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>

	<!-- Bootstrap -> thiet ke GUI -->
	<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>

	<!-- AngularJS -> framework (js) -> duoc viet bang js (library js) -> file .js -> nhung cdn vao web -->
	<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">
<form method="post" ng-submit="saveUser()">
	<div class="container">
		<div class="form-group">
			<label>Full Name:</label>
			<input required type="text" name="fullname" placeholder="Enter fullname" class="form-control" ng-model="formUser.fullname">
		</div>
		<div class="form-group">
			<label>Age:</label>
			<input required type="text" name="age" placeholder="Enter age" class="form-control" ng-model="formUser.age">
		</div>
		<div class="form-group">
			<label>Email:</label>
			<input required type="email" name="email" placeholder="Enter email" class="form-control" ng-model="formUser.email">
		</div>
		<div class="form-group">
			<label>Password:</label>
			<input required type="password" name="pwd" placeholder="Enter pwd" class="form-control" ng-model="formUser.pwd">
		</div>
		<div class="form-group">
			<label>Confirm Password:</label>
			<input required type="password" name="confirmPwd" placeholder="Enter confirm pwd" class="form-control" ng-model="formUser.confirmPwd">
		</div>
		<div class="form-group">
			<a href="login.html">I have a account</a>
		</div>
		<div class="form-group">
			<button class="btn btn-success" type="submit">Save</button>
			<button class="btn btn-warning" type="reset">Reset</button>
		</div>
	</div>
</form>

<script type="text/javascript">
	var app = angular.module('MyApp', [])
	app.controller('MyController', ['$scope', function ($scope) {
		//Quan ly thong tin nguoi dung da dang ky tu Form
		$scope.userList = []
		$scope.formUser = {}

		//Load du lieu tu localStorage
		var json = localStorage.getItem('userList')
		if(json != '' && json != null) {
			$scope.userList = JSON.parse(json)
			console.log($scope.userList)
		}

		$scope.saveUser = function() {
			//check validate pwd
			if($scope.formUser.pwd != $scope.formUser.confirmPwd) {
				return alert('Password does not match, Please check it again!')
			}

			//ok
			//Kiem tra thong tin email nhap vao co trung vs tai khoan trc do khong
			var isFind = false
			for(var item of $scope.userList) {
				if(item.email == $scope.formUser.email) {
					//update
					item.fullname = $scope.formUser.fullname
					item.age = $scope.formUser.age
					item.pwd = $scope.formUser.pwd

					isFind = true
					break
				}
			}

			if(!isFind) {
				//Them moi thong tin nguoi dung
				$scope.userList.push({
					'fullname': $scope.formUser.fullname,
					'age': $scope.formUser.age,
					'email': $scope.formUser.email,
					'pwd': $scope.formUser.pwd
				})
			}

			console.log($scope.userList)
			//Luu localStorage
			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>

	<!-- Bootstrap -> thiet ke GUI -->
	<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>

	<!-- AngularJS -> framework (js) -> duoc viet bang js (library js) -> file .js -> nhung cdn vao web -->
	<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">
	<table class="table table-bordered">
		<thead>
			<tr>
				<th>No</th>
				<th>Full Name</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>
	<a href="register.html">Create a new account</a>
</div>

<script type="text/javascript">
	var app = angular.module('MyApp', [])
	app.controller('MyController', ['$scope', function ($scope) {
		//Quan ly thong tin nguoi dung da dang ky tu Form
		$scope.userList = []

		//Load du lieu tu localStorage
		var json = localStorage.getItem('userList')
		if(json != '' && json != null) {
			$scope.userList = JSON.parse(json)
			console.log($scope.userList)
		}
	}])
</script>
</body>
</html>

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

#login.html

#register.html

#show.html

Tags:

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

5

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

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