Ứng dụng Chat Ajax - Xây dựng menu và giao diện chính

Chào mọi người, hôm nay chúng ta sẽ tiếp tục về series hướng dẫn xây dựng Messenger đơn giản bằng PHP và Ajax. Bài hôm trước chúng ta đã xây dựng xong chức năng đăng ký, đăng nhập và đăng xuất rồi, vậy bài hôm nay sẽ nhẹ hơn rất nhiều và nghiêng về phần xây dựng layout là chủ yếu, chúng ta sẽ thiết kế menu và xây dựng giao diện trò chuyện cho ứng dụng.

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. Thiết kế menu

Mình chỉ xây dựng menu đơn giản thôi vì ứng dụng này ít chức năng.

Ở bài trước chúng ta đã có thể lưu session đăng nhập qua $user rồi nên bây giờ chúng ta sẽ kiểm tra sự tồn tại của nó. Tức là nếu tồn tại $user nghĩa là đã đăng nhập hoặc mới vừa đăng ký, còn ngược lại không tồn tại thì chưa đăng nhập.

Các bạn mở file includes/header.php lên và thay thế toàn bộ nội dung như sau :

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Messenger</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>
        <!-- Kết nối thư viện Font Awesome Icons -->
        <link rel="stylesheet" href="css/font-awesome-4.6.3/css/font-awesome.min.css">
        <!-- Kết nối file css/style.css -->
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <?php
        // Nếu tồn tại $user
        if ($user) {
            // Hiển thị menu
            echo '<div class="main-menu">
                            <h1><i class="fa fa-commenting"></i> Messenger</h1>
                            <a href="logout.php"><i class="fa fa-sign-out"></i></a>	
                    </div>
                    <div class="clearfix"></div>';
        }
        // Ngược lại
        else {
            // Hiển thị navbar
            echo '  <div class="main-navbar">
                            <h1><i class="fa fa-commenting"></i> Messenger</h1>
                    </div><!-- div.main-header -->';
        }
        ?>

Tiếp theo là viết CSS. Các bạn copy đoạn code sau và bổ sung thêm vào file css/style.css.

/* Menu */
.main-menu {padding: 10px 5%; border-bottom: 1px solid #e5e5e5; width: 90%; position: fixed; background-color: #fff;}
.main-menu h1 {color: #428bca; display: inline-block;}
.main-menu a {display: inline-block; float: right; color: #555; font-size: 30px; margin-left: 15px;}

Ổn rồi, giờ chúng ta qua xây dựng giao diện trò chuyện nhé !

2. Xây dựng giao diện trò chuyện

Ở phần này ta cũng xử lý kiểm tra $user như ở phần menu. Nghĩa là tồn tại $user thì hiển thị phần trò chuyện, còn ngược lại thì hiển thị form đăng nhập, đăng ký. Bây giờ chúng ta mở file index.php lên là thay thế toàn bộ nội dung sau :

<?php

// Kết nối database
include('includes/general.php');
// Kết nối header
include('includes/header.php');

// Nếu tồn tại $user
if ($user) {
    // Hiển thị trò chuyện
    echo '<div class="main-chat">		
            </div><!-- div.main-chat -->
            <div class="box-chat">
                    <form method="POST" id="formSendMsg" onsubmit="return false;">
                            <input type="text" placeholder="Nhập nội dung tin nhắn ...">
                    </form><!-- form#formSendMsg -->
            </div><!-- div.box-chat -->';
}
// Ngược lại
else {
    // Hiển thị form đăng nhập, đăng ký
    echo '<div class="box-join">
                    <p>Tạo tài khoản hoặc đăng nhập để tham gia với chúng tôi</p>
                    <form method="POST" id="formJoin" onsubmit="return false;">
                            <input type="text" placeholder="Tên đăng nhập" class="data-input" id="username">
                            <input type="password" placeholder="Mật khẩu" class="data-input" id="password">
                            <button class="btn-submit">Bắt đầu</button>
                            <div class="alert danger"></div>
                    </form><!-- form#formJoin -->
            </div><!-- div.box-join -->';
}
// Kết nối footer
include('includes/footer.php');
?>

Trong đó :

.main-chat là phần hiển thị toàn bộ nội dung tin nhắn.
.box-chat là thanh để chúng ta gửi tin nhắn.

Kế tiếp bổ sung CSS vào file css/style.css với đoạn code sau :

/* Form chat */
.box-chat {position: fixed; bottom: 0; width: 100%; border-top: 1px solid #e5e5e5;}
#formSendMsg input[type=text] {width: calc(100% - 20px); padding: 10px; font-size: 15px; color: #555; border: 0;}

/* Show chat */
.main-chat {height: auto; padding: 67px 10px 38px 10px;}
.main-chat .msg-user {width: 100%; text-align: right; margin-bottom: 10px;}
.main-chat .msg-user p {background-color: #428bca; color: #fff; display: inline-block; padding: 10px; font-size: 15px;}
.main-chat .msg {width: 100%; text-align: left; margin-bottom: 10px;}
.main-chat .msg p {background-color: #f1f1f1; color: #555; display: inline-block; padding: 10px; font-size: 15px;}
.main-chat .msg-user .info-msg-user,
.main-chat .msg .info-msg {font-size: 13px; color: #666; margin-top: 5px;}

OK ! Giờ bạn chạy thử rồi đăng nhập xem kết quả nhé !

3. Lời kết

Trong bài này các bạn cần chú ý đến đoạn code xuất ra mã HTML nhé, nếu hiểu bài này thì bạn mới có thể tiếp tục theo dõi các bài tiếp theo được, bài tiếp theo chúng ta sẽ tạo chức năng gửi tin nhắn, thiết lập thời gian thực cho cuộc trò chuyện. 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
Ajax chat PHP phần 5	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