[Video] Bài tập - Đă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

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 Form</title>

	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">

	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

	<style type="text/css">
		.form-group {
			margin-bottom: 20px;
		}
	</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">
			<p>
				<a href="register.html">Create a new account</a>
			</p>
		</div>
		<div class="form-group">
			<button class="btn btn-success">Login</button>
		</div>
	</form>
</div>

<script type="text/javascript">
	var app = angular.module('MyApp', [])
	app.controller('MyController', ['$scope', function ($scope) {
		$scope.userList = []

		$scope.login = function() {
			for(item of $scope.userList) {
				if(item.email == $scope.email && item.pwd == $scope.pwd) {
					//login thanh cong
					window.open('show.html', '_self')
					return
				}
			}
			alert('Login failed!!!')
		}

		//Code chung
		$scope.loadData = function() {
			var json = localStorage.getItem('userList')
			if(json != null && json != '') {
				$scope.userList = JSON.parse(json)
			}
		}

		$scope.loadData()
	}])

	// var obj = {
	// 	"fullname": "A",
	// 	"age": 12,
	// 	"address": "Ha Noi"
	// }

	// var json = `{
	// 	"fullname": "A",
	// 	"age": 12,
	// 	"address": "Ha Noi"
	// }`

	// var objList = [
	// 	{
	// 		"fullname": "A",
	// 		"age": 12,
	// 		"address": "Ha Noi"
	// 	}, {
	// 		"fullname": "A",
	// 		"age": 12,
	// 		"address": "Ha Noi"
	// 	}, {
	// 		"fullname": "A",
	// 		"age": 12,
	// 		"address": "Ha Noi"
	// 	}
	// ]

	// var jsonList = `[
	// 		{
	// 			"fullname": "A",
	// 			"age": 12,
	// 			"address": "Ha Noi"
	// 		}, {
	// 			"fullname": "A",
	// 			"age": 12,
	// 			"address": "Ha Noi"
	// 		}, {
	// 			"fullname": "A",
	// 			"age": 12,
	// 			"address": "Ha Noi"
	// 		}
	// 	]`
	// jsonList = '[{"fullname":"A","age":12,"address":"Ha Noi"},{"fullname":"A","age":12,"address":"Ha Noi"},{"fullname":"A","age":12,"address":"Ha Noi"}]';
	//Chuyen object | array -> json string -> object | array -> de dang trong lap trinh
</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 Form</title>

	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">

	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

	<style type="text/css">
		.form-group {
			margin-bottom: 20px;
		}
	</style>
</head>
<body ng-controller="MyController">
<div class="container">
	<form method="post" ng-submit="saveUser()">
		<div class="form-group">
			<label>Full Name:</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">
			<p>
				<a href="login.html">I have a account</a>
			</p>
		</div>
		<div class="form-group">
			<button class="btn btn-success">Save</button>
		</div>
	</form>
</div>

<script type="text/javascript">
	var app = angular.module('MyApp', [])
	app.controller('MyController', ['$scope', function ($scope) {
		$scope.userList = []

		$scope.saveUser = function() {
			var user = {
				'fullname': $scope.fullname,
				'age': $scope.age,
				'email': $scope.email,
				'pwd': $scope.pwd
			}

			var isFind = false
			for (var i = 0; i < $scope.userList.length; i++) {
				if($scope.userList[i].email == user.email) {
					//update
					$scope.userList[i] = user
					isFind = true
					break
				}
			}
			if(!isFind) {
				$scope.userList.push(user)
			}
			console.log($scope.userList)

			//Luu localStorage
			var json = JSON.stringify($scope.userList)
			localStorage.setItem('userList', json)
		}

		$scope.loadData = function() {
			var json = localStorage.getItem('userList')
			if(json != null && json != '') {
				$scope.userList = JSON.parse(json)
			}
		}

		$scope.loadData()
	}])
</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>Show User List</title>

	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">

	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

	<style type="text/css">
		.form-group {
			margin-bottom: 20px;
		}
	</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>
</div>

<script type="text/javascript">
	var app = angular.module('MyApp', [])
	app.controller('MyController', ['$scope', function ($scope) {
		$scope.userList = []

		//Code chung
		$scope.loadData = function() {
			var json = localStorage.getItem('userList')
			if(json != null && json != '') {
				$scope.userList = JSON.parse(json)
			}
		}

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

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

#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 đó