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 ! Show 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 headerCác bạn mở file 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 footerMở file <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 2. Include các fileChúng ta sẽ include các file Các bạn mở file <?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 3. Chia layout cho ứng dụngKiể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 // 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 độngTiế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 // 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ếtQua 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 ! |