Bài 03: PHP Note Online - Xây dựng layout

DOWNLOAD

Chào mừng các bạn đã quay trở lại với series hướng dẫn xây dựng ứng dụng ghi chú onine bằng PHP OOP và Ajax. Trong bài trước chúng ta đã xây dựng được thư viện database và session rồi, bài hôm nay mình sẽ hướng dẫn các bạn xây dựng, chia layout cho ứng dụng. Chúng ta bắt tay vào làm thôi nào !

1. Xây dựng header và footer

Ở trong bài trước mình đã nói về công dụng của 2 phần này rồi, nên bây giờ giờ chúng ta tiến hành xây dựng luôn.

Phần header

Các bạn mở file includes/header.php lên và dán nội dung này vào :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>iNote</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
	<?php
	
	// Nếu tồn tại $user
	if ($user)
	{
		echo '
			<nav class="navbar navbar-default" role="navigation">
				<div class="container-fluid">
					<div class="navbar-header">
						<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-header">
							<span class="sr-only">Toggle navigation</span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						</button>
						<a class="navbar-brand" href="index.php"><span class="glyphicon glyphicon-edit"></span> iNote</a>
					</div> 

					<div class="collapse navbar-collapse" id="nav-header">
					    <ul class="nav navbar-nav navbar-right">  		
					      	<li>
					      		<a href="index.php?ac=create_note">
					      			<span class="glyphicon glyphicon-plus"></span> Note mới
					      		</a>
					      	</li>
					      	<li>
					      		<a href="index.php?ac=change_password">
					      			<span class="glyphicon glyphicon-lock"></span> Đổi mật khẩu
					      		</a>
					      	</li>
					        <li>
					         	<a href="signout.php">
					         		<span class="glyphicon glyphicon-off"></span> Thoát
					    		</a>
					    	</li>
					    </ul>
					</div>
				</div>
			</nav>
		';
	}
	// Ngược lại không tồn tại $user
	else
	{
		echo '
			<nav class="navbar navbar-default" role="navigation">
				<div class="container-fluid">
					<div class="navbar-header">			
						<a class="navbar-brand" href="index.php">
							<span class="glyphicon glyphicon-edit"></span> iNote
						</a>
					</div> 
				</div>
			</nav>
		';
	}

	?>
Tiếp theo chúng ta sẽ xây dựng phần footer.

Phần footer

Mở file includes/footer.php lên rồi sau đó các bạn copy nội dung này :

	<div class="modal fade" id="modalDeleteNote" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
			    <div class="modal-header">
			        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
			        <h4 class="modal-title" id="myModalLabel"><span class="glyphicon glyphicon-trash"></span> Xoá note</h4>
			    </div>
			    <div class="modal-body">
			    	<p>Bạn chắc chắn muốn xoá note này không ?</p>
			    	<div class="alert alert-danger hidden"></div>
			    </div>
			    <div class="modal-footer">
	        		<button type="button" class="btn btn-default" data-dismiss="modal">Không</button>
	        		<button type="button" class="btn btn-primary" id="submit_delete_note">Đồng ý</button>
	      		</div>
			</div>
		</div>
	</div>
	<script src="js/jquery.js"></script>
	<script src="js/plugins/autogrow.js"></script>
	<script src="js/functions/signup.js"></script>
	<script src="js/functions/signin.js"></script>
	<script src="js/functions/note.js"></script>
	<script src="js/functions/change-pass.js"></script>
	<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Đây chỉ là đoạn code HTML bình thường nên mình chỉ nói về cái #modalDeleteNote, nó là cái popup khi nhấn vào nút xoá nó sẽ hiện ra để hỏi lại, các bạn có thể xem video demo để hiểu rõ hơn nhé !

2. Include các file 

Chúng ta sẽ include các file core/init.php, file includes/header.php là includes/footer.php vào file index.php. Chúng ta sẽ include theo trình tự như hình vẽ bên dưới :

Các bạn mở file index.php lên và dán đoạn code này vào :

<?php

// Include database, session, general info
require_once 'core/init.php';
// Include header
require_once 'includes/header.php';

// LAYOUT

// Include footer
require_once 'includes/footer.php';

?>
Trong phần // Layout mình sẽ viết tiếp ở bước 2.

3. Chia layout cho ứng dụng

Kiểm tra đăng nhập

Đầu tiên chúng ta phải kiểm tra là user đã đăng nhập hay chưa. Các bạn mở file index.php và chèn đoạn code này dưới dòng // Layout :

// Nếu tồn tại $user
if ($user)
{
	// Kiểm tra hành động
}
// Ngược lại không tồn tại $user
else
{	
	// Include template form đăng nhập, đăng ký
	require_once 'templates/signin-up-form.php';
}

Kiểm tra hành động 

Tiếp theo chúng ta sẽ kiểm tra từng hành động của người dùng để đưa ra layout thích hợp. Các bạn mở file index.php và chèn đoạn code này dưới dòng // Kiểm tra hành động :

// Nếu thực hiện hành động
if (isset($_GET['ac']))
{
	// Xử lý chuỗi $ac
	$ac = addslashes(trim(htmlentities($_GET['ac'])));

	// Nếu hành động là thêm note
	if ($ac == 'create_note')
	{
		// Include template form thêm note 
		require_once 'templates/create-note-form.php';
	}
	// Ngược lại nếu hành động là chỉnh sửa note
	else if ($ac == 'edit_note')
	{
		// Nếu có ID truyền vào
		if (isset($_GET['id']))
		{
			$get_id = addslashes(trim(htmlentities($_GET['id'])));
			if ($get_id != '')
			{
				// Lệnh truy vấn kiểm tra sự tồn tại và quyền sở hữu note 
				$sql_check_id_exist = "SELECT id_note, user_id FROM notes WHERE user_id = '$data_user[id_user]' AND id_note = '$get_id'";

				// Nếu có tồn tại và thuộc quyền sở hữu
				if ($db->num_rows($sql_check_id_exist))
				{
					// Include template chỉnh sửa note
					require_once 'templates/edit-note-form.php';
				}
				// Ngược lại không tồn tại và không thuộc quyền sở hữu 
				else
				{	
					// Hiển thị thông báo lỗi
					echo '
						<div class="container">
							<div class="alert alert-danger">
								Note này không tồn tại hoặc không thuộc quyền sở hữu của bạn.
							</div>
						</div>
					';
				}					
			}
			// Ngược lại không có ID truyền vào
			else
			{
				header('Location: index.php'); // Di chuyển về trang chủ
			}				
		}
		else
		{
			header('Location: index.php'); // Di chuyển về trang chủ
		}
	}
	// Ngược lại nếu hành động là đổi mật khẩu
	else if ($ac == 'change_password')
	{
		// Include template form đổi mật khẩu
		require_once 'templates/change-pass-form.php';
	}
}
// Ngược lại không thực hiện hành động
else
{
	// Include template danh sách ghi chú
	require_once 'templates/list-note.php';
}
Trong đó mình đã chú thích rất kỹ từng phần nên mình sẽ không giải thích thêm nữa nhé ! Đó là tất cả toàn bộ layout của ứng dụng này.

3. Lời kết

Qua bài này chúng ta đã xây dựng thành công layout cho ứng dụng. Bài sau, mình sẽ hướng dẫn cho các bạn viết các chức năng đăng ký, đăng nhập và đăng xuất cho ứng dụng. Hẹn gặp lại và chúc các bạn thành công !

Hãy để lại link bài viết gốc khi chia sẻ bài viết này, mình sẽ report DMCA với những website lấy nội dung mà không để nguồn hoặc copy bài với số lượng lớn.

Nguồn: freetuts.net

Profile photo of adminLeChiHuy

LeChiHuy

Sinh năm 2001, thích lập trình, ham học hỏi. Bắt đầu tham gia vào Freetuts giữa năm 2016, mong được sự ủng hộ của các bạn !

ĐĂNG BÌNH LUẬN: Đăng câu hỏi trên Group Facebook để được hỗ trợ nhanh nhất.