[Video] Quản lý đăng ký page- đăng nhập page - Hiển thị thông tin người dung- Lập trình Javascript - C2011I

Quản lý đăng ký page- đăng nhập page - Hiển thị thông tin người dung- Lập trình Javascript

#login.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Login Page</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
	<form method="post" onsubmit="return loginUser()">
		<div class="form-group">
			<label>Email:</label>
			<input required type="email" name="email" placeholder="Enter email" id="email_id">
		</div>
		<div class="form-group">
			<label>Password:</label>
			<input required type="password" name="pwd" placeholder="Enter pwd" id="pwd_id">
		</div>
		<p>
			<a href="register.html">Create a new account</a>
		</p>
		<div class="form-group">
			<button type="submit">Login</button>
		</div>
	</form>
</div>

<script type="text/javascript" src="script.js"></script>
</body>
</html>

#register.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Register Page</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
	<!-- '-' hay su dung nhieu hon so voi '_' 'uppercase' -->
	<!-- confirm password: confirm-pwd (confirmPwd, confirm_pwd) -->
	<!-- SEO web: confirm-pwd (confirm + pwd: 2 word), (confirmPwd, confirm_pwd: a word) -->
	<form method="post" onsubmit="return registerUser()">
		<div class="form-group">
			<label>Full Name:</label>
			<input required type="text" name="fullname" placeholder="Enter fullname" id="fullname_id">
		</div>
		<div class="form-group">
			<label>Age:</label>
			<input required type="number" name="age" placeholder="Enter age" id="age_id">
		</div>
		<div class="form-group">
			<label>Email:</label>
			<input required type="email" name="email" placeholder="Enter email" id="email_id">
		</div>
		<div class="form-group">
			<label>Password:</label>
			<input required type="password" name="pwd" placeholder="Enter pwd" id="pwd_id">
		</div>
		<div class="form-group">
			<label>Confirm Pwd:</label>
			<input required type="password" name="confirmPwd" placeholder="Enter confirm password" id="confirm_pwd_id">
		</div>
		<p>
			<a href="login.html">I have a account</a>
		</p>
		<div class="form-group">
			<button type="submit">Register</button>
			<button type="reset">Reset</button>
		</div>
	</form>
</div>

<script type="text/javascript" src="script.js"></script>
</body>
</html>

#script.js

var userList = []

//Lay du lieu tu localStorage ra
var json = localStorage.getItem('userList')
if(json != null && json != '') {
	userList = JSON.parse(json)
}

function registerUser() {
	//Mapping tags trong form register
	var fullname = document.getElementById('fullname_id').value
	var age = document.getElementById('age_id').value
	var email = document.getElementById('email_id').value
	var pwd = document.getElementById('pwd_id').value
	var confirmPwd = document.getElementById('confirm_pwd_id').value

	//Validate pwd
	if(pwd != confirmPwd) {
		alert('Password is not match, Plz check it again!!!')
		return false
	}

	//Luu thong tin
	var isFind = false
	for(var user of userList) {
		if(user.email == email) {
			//update data
			user.fullname = fullname
			user.age = age
			user.pwd = pwd

			isFind = true
			break
		}
	}

	if(!isFind) {
		//insert
		userList.push({
			'fullname': fullname,
			'age': age,
			'email': email,
			'pwd': pwd
		})
	}

	//update & insert
	var json = JSON.stringify(userList)
	//du lieu luu xuong -> int, float, boolean, char, string.
	localStorage.setItem('userList', json)

	return false
}

function loginUser() {
	var email = document.getElementById('email_id').value
	var pwd = document.getElementById('pwd_id').value

	for(var user of userList) {
		if(user.email == email && user.pwd == pwd) {
			//update data
			// alert("Login successfully!!!")
			window.open('show.html', '_self')
			return false
		}
	}

	alert('Login failed!!!')
	return false
}

function showUser() {
	var resultTag = document.getElementById('result')

	//Hien thi thong tin sinh vien len table
	var index = 0
	for(var user of userList) {
		resultTag.innerHTML += `<tr>
				<td>${++index}</td>
				<td>${user.fullname}</td>
				<td>${user.age}</td>
				<td>${user.email}</td>
			</tr>`
	}
}

#show.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Login Page</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body onload="showUser()">
<div class="container">
	<table border="1" cellpadding="5" style="width: 100%;">
		<thead>
			<tr>
				<th>No</th>
				<th>Full Name</th>
				<th>Age</th>
				<th>Email</th>
			</tr>
		</thead>
		<tbody id="result"></tbody>
	</table>

	<p>
		<a href="login.html">Login page</a>
	</p>
	<p>
		<a href="register.html">Register page</a>
	</p>
</div>

<script type="text/javascript" src="script.js"></script>
</body>
</html>

#style.css

.container {
	width: 600px;
	margin: 0px auto;
	background-color: orange;
	padding: 10px;
}

.form-group input, .form-group label{
	width: 100%;
	margin-bottom: 10px;
	font-size: 18px;
}

.form-group button {
	font-size: 18px;
}

[Video] Quản lý đăng ký page- đăng nhập page - Hiển thị thông tin người dung- Lập trình Javascript - C2011I

#login.html

#register.html

#script.js

#show.html

#style.css

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