PHP Note Online - Xây dựng layout - Ứng dụng Note và Chat với PHP
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 ...
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">×</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 !
