PHP Note Online - Xây dựng layout

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 !

test php

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

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 :

Bài viết này được đăng tại [free tuts .net]

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

layout note online jpg

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 !

Danh sách file tải về

Tên file tải về	Pass giải nén
Note online PHP OOP phần 3	freetuts.net hoặc gameportable.net

Bài trước Bài tiếp

Cùng chuyên mục:

Hàm key_exists() trong PHP

Cách sử dụng key_exists() trong PHP

Hàm mysqli_fetch_row() trong PHP

Cách sử dụng mysqli_fetch_row() trong PHP

Hàm end() trong PHP

Cách sử dụng end() trong PHP

Hàm mysqli_field_count() trong PHP

Cách sử dụng mysqli_field_count() trong PHP

Hàm count() trong PHP

Cách sử dụng count() trong PHP

Hàm mysqli_field_seek() trong PHP

Cách sử dụng mysqli_field_seek() trong PHP

Hàm compact() trong PHP

Cách sử dụng compact() trong PHP

Hàm mysqli_field_tell() trong PHP

Cách sử dụng mysqli_field_tell() trong PHP

Hàm array_values() trong PHP

Cách sử dụng array_values() trong PHP

Hàm mysqli_free_result() trong PHP

Cách sử dụng mysqli_free_result() trong PHP

Hàm array_unshift() trong PHP

Cách sử dụng array_unshift() trong PHP

Hàm mysqli_get_charset() trong PHP

Cách sử dụng mysqli_get_charset() trong PHP

Hàm array_shift() trong PHP

Cách sử dụng array_shift() trong PHP

Hàm mysqli_get_client_stats() trong PHP

Cách sử dụng mysqli_get_client_stats() trong PHP

Hàm array_unique() trong PHP

Cách sử dụng array_unique() trong PHP

Hàm mysqli_get_client_version() trong PHP

Cách sử dụng mysqli_get_client_version() trong PHP

Hàm array_uintesect() trong PHP

Cách sử dụng array_uintesect() trong PHP

Hàm mysqli_get_connection_stats() trong PHP

Cách sử dụng mysqli_get_connection_stats() trong PHP

Hàm array_sum() trong PHP

Cách sử dụng array_sum() trong PHP

Hàm mysqli_get_host_info() trong PHP

Cách sử dụng mysqli_get_host_info() trong PHP