Ví dụ tạo ứng dụng Chat Online với PHP & MySQL - Menu và giao diện

Ví dụ tạo ứng dụng Chat Online với PHP & MySQL - Menu và giao diện là vấn đề được nhiều lập trình viên quan tâm, bởi những kiến thức trên trường lớp là không đủ, vì vậy bài Ví dụ tạo ứng dụng Chat Online với PHP & MySQL - Menu và giao diện sẽ chia sẻ tới bạn nhiều thông tin hữu ích

Mọi người vẫn hỏi tôi về việc học lập trình nói chung và PHP nói riêng có cần năng khiếu hay quá khó để tiếp cận hay không. Thì tôi có thể trả lời rằng, học lập trình cũng như việc bạn học tiếng Anh hay bất kỳ một ngôn ngữ khác, bởi lập trình...là ngôn ngữ của máy tính, để máy tính đọc và máy tính thực hiện theo yêu cầu của mình, bạn thích là học được.

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. 

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 :

 

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


Hy vọng với bài viết về Ví dụ tạo ứng dụng Chat Online với PHP & MySQL - Menu và giao diện đã giải đáp giúp bạn phần nào về kiến thức lập trình PHP. Như tôi đã nói, ngôn ngữ lập trình không quan trọng bằng tư duy giải thuật, tư duy logic để giải quyết vấn đề.

Với những năm trước đây, lập trình viên là một cái nghề khó và kén chọn người học, đồng nghĩa với việc thu nhập hàng tháng của các lập trình viên luôn cao. Còn những năm gần đây, thì lập trình là môn học phổ thông, và ai cũng nên học một ngôn ngữ lập trình nào đó.

Nếu bạn còn bất kỳ câu hỏi nào trong việc học lập trình online, hãy gửi yêu cầu cho tôi qua email hoidapcode.com@gmail.com hoặc để lại comment bên dưới, tôi sẽ giải đáp trong vòng 24 giờ!

Blog hoidapcode.com là blog được tổng hợp tự động các bài học, thông tin về lập trình trên mạng internet. Nếu bạn có ý kiến hoặc đóng góp về bài viết này, hãy liên hệ với tôi!