1. Nhà cung cấp (chúng tôi) của dịch vụ cung cấp bới trang web này (Dịch vụ) không chịu trách nhiệm với bất kỳ nội dung của thành viên (Nội dung). Nội dung được đăng chỉ thể hiện quan điểm của tác giả.Xem chi tiết
    Dismiss Notice
  2. Diễn đàn ẩm thực pabuzo.vn sẽ kiểm tra tất cả các bài đăng từ thành viên ở tất cả cac box kể từ ngày 26 tháng 08 chúng tôi đã có đủ thành viên trong BQT. Do đó việc kiểm tra sẻ thường xuyên hơn đối với các nội dung vi phạm của diễn đàn. Xem chi tiết
    Dismiss Notice
  3. Hiện tại chúng tôi chuyên cung cấp mật ong rừng "Tây Nguyên" nguyên chất. Giá 700k/lít Liên hệ: 0947962530 - 0906872341 - 0969911224. Xem chi tiết
    Dismiss Notice

Chia sẻ code chat đơn giản

mật ong rừng nguyên chất

Thảo luận trong 'Tài liệu khác' bắt đầu bởi SMOD, 13/3/18.

Lượt xem : 291

  1. SMOD

    SMOD Thành viên BQT Staff Member

    Tham gia:
    28/8/17
    Bài viết:
    23
    Thích đã nhận:
    3
    Điểm thành tích:
    3
    Cách tạo Ứng dụng Chat Đơn giản trên nền Web

    Trong hướng dẫn này, chúng ta sẽ tạo ra một ứng dụng chat đơn giản trên nền web với PHP và jQuery. Loại tiện ích này sẽ hoàn hảo cho một hệ thống hỗ trợ trực tiếp đối với trang web của bạn.

    Giới thiệu

    [​IMG]


    Ứng dụng chat mà chúng ta sẽ xây dựng hôm nay là khá đơn giản. Nó sẽ bao gồm một hệ thống đăng nhập và đăng xuất, các tính năng theo phong cách AJAX, và cũng sẽ hỗ trợ đa người dùng.

    Bước 1: Markup HTML

    Chúng ta sẽ bắt đầu hướng dẫn này bằng cách tạo ra tập tin đầu tiên của chúng ta gọi index.php.

    PHP:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    title>Chat Customer Module</title>
    <
    link type="text/css" rel="stylesheet" href="style.css" />
    </
    head>
     
    <
    div id="wrapper">
      <
    div id="menu">
            <
    class="welcome">Welcome, <b></b></p>
            <
    class="logout"><a id="exit" href="#">Exit Chat</a></p>
            <
    div style="clear:both"></div>
        </
    div>
        
        <
    div id="chatbox"></div>
        
        <
    form name="message" action="">
            <
    input name="usermsg" type="text" id="usermsg" size="63" />
            <
    input name="submitmsg" type="submit"  id="submitmsg" value="Send" />
        </
    form>
    </
    div>
    <
    script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script type="text/javascript">
    // jQuery Document
    $(document).ready(function(){
     
    });
    </script>
    </body>
    </html

    • Chúng ta bắt đầu html với các thẻ DOCTYPE, html, head, và body. Trong thẻ head, chúng ta thêm tiêu đề, và liên kết đến stylesheet css của chúng ta (style.css).
    • Bên trong thẻ body, chúng ta cấu trúc layout của chúng ta bên trong thẻ div #wrapper. Chúng ta sẽ có ba khối chính: một Menu đơn giản, chatbox, và input để nhập tin nhắn của chúng ta; mỗi cái đi kèm với div và id tương ứng của nó.
      • Thẻ div #menu sẽ bao gồm hai phần tử đoạn văn. Phần tử đầu tiên sẽ là một thông điệp chào mừng người dùng và sẽ trôi về bên trái và phần tử thứ hai sẽ là một liên kết thoát và sẽ trôi về bên phải. Chúng ta cũng bao gồm một div để xóa các phần tử.
      • Thẻ div #chatbox sẽ chứa chatlog của chúng ta. Chúng ta sẽ nạp log từ một tập tin bên ngoài bằng cách sử dụng yêu cầu ajax của jQuery.
      • Phần tử cuối cùng trong div #wrapper sẽ là form của chúng ta, trong đó sẽ bao gồm một input cho tin nhắn của người dùng và một nút submit.
    • Chúng ta thêm các script của chúng ta ở cuối để tải trang nhanh hơn. Đầu tiên chúng ta sẽ liên kết với jQuery CDN của Google, vì chúng ta sẽ sử dụng thư viện jQuery cho hướng dẫn này. Thẻ script thứ hai sẽ là nơi mà chúng ta làm việc. Chúng ta sẽ nạp tất cả các code sau khi tài liệu đã sẵn sàng.
    Bước 2: Phong cách CSS
    Bây giờ chúng ta sẽ thêm một số css để làm cho ứng dụng chat trông tốt hơn so với phong cách mặc định của trình duyệt. Đoạn code dưới đây sẽ được thêm vào tập tin style.css của chúng ta.

    HTML:
    /* CSS Document */
    body {
        font:12px arial;
        color: #222;
        text-align:center;
        padding:35px; }
     
    form, p, span {
        margin:0;
        padding:0; }
     
    input { font:12px arial; }
     
    a {
        color:#0000FF;
        text-decoration:none; }
     
        a:hover { text-decoration:underline; }
     
    #wrapper, #loginform {
        margin:0 auto;
        padding-bottom:25px;
        background:#EBF4FB;
        width:504px;
        border:1px solid #ACD8F0; }
     
    #loginform { padding-top:18px; }
     
        #loginform p { margin: 5px; }
     
    #chatbox {
        text-align:left;
        margin:0 auto;
        margin-bottom:25px;
        padding:10px;
        background:#fff;
        height:270px;
        width:430px;
        border:1px solid #ACD8F0;
        overflow:auto; }
     
    #usermsg {
        width:395px;
        border:1px solid #ACD8F0; }
     
    #submit { width: 60px; }
     
    .error { color: #ff0000; }
     
    #menu { padding:12.5px 25px 12.5px 25px; }
     
    .welcome { float:left; }
     
    .logout { float:right; }
     
    .msgln { margin:0 0 2px 0; }
    Không có gì đặc biệt về css ở trên ngoại trừ thực tế rằng một số id hoặc lớp mà chúng ta đã thiết lập một phong cách cho chúng, sẽ được thêm sau chốc lát nữa.

    [​IMG]

    Như bạn có thể thấy ở trên, chúng ta đã hoàn tất việc xây dựng giao diện người dùng của ứng dụng chat.

    Bước 3: Sử dụng PHP để tạo một Form Đăng nhập.
    Bây giờ chúng ta sẽ cài đặt một form đơn giản sẽ yêu cầu người dùng nhập tên của họ trước khi tiếp tục.

    PHP:
    <?
    session_start();
     
    function 
    loginForm(){
        echo
    '
        <div id="loginform">
        <form action="index.php" method="post">
            <p>Please enter your name to continue:</p>
            <label for="name">Name:</label>
            <input type="text" name="name" id="name" />
            <input type="submit" name="enter" id="enter" value="Enter" />
        </form>
        </div>
        '
    ;
    }
     
    if(isset(
    $_POST['enter'])){
        if(
    $_POST['name'] != ""){
            
    $_SESSION['name'] = stripslashes(htmlspecialchars($_POST['name']));
        }
        else{
            echo 
    '<span class="error">Please type in a name</span>';
        }
    }
    ?>
    Hàm loginForm() mà chúng ta tạo ra được tạo thành từ một form đăng nhập đơn giản yêu cầu người dùng nhập tên của họ. Sau đó chúng ta sử dụng một câu lệnh if và else để xác nhận rằng người đó nhập vào một tên. Nếu người đó nhập vào một cái tên, chúng ta thiết lập tên là $ _SESSION[ 'name']. Vì chúng ta đang sử dụng một session dựa trên cookie để lưu trữ tên, nên chúng ta phải gọi session_start() trước khi bất cứ điều gì được xuất ra trên trình duyệt.

    Một điều mà bạn có thể cần chú ý kỹ, là chúng ta đã sử dụng hàm htmlspecialchars(), trong đó chuyển đổi ký tự đặc biệt cho các đối tượng HTML, để bảo vệ biến name khỏi trở thành nạn nhân của phương pháp tấn công Cross-site scripting (XSS). Sau đó, chúng ta cũng sẽ thêm hàm này vào biến text mà sẽ được đăng vào chatlog.

    Hiển thị Form Đăng nhập
    Để hiển thị form đăng nhập trong trường hợp người dùng chưa đăng nhập và do đó chưa tạo một session, chúng ta sử dụng câu lệnh if và else khác xung quanh div #wrapper và các thẻ script trong code ban đầu của chúng ta. Đối với trường hợp ngược lại, việc này sẽ ẩn form đăng nhập, và hiển thị hộp thoại nếu người dùng đã đăng nhập và đã tạo ra một session.

    PHP:
    <?php
    if(!isset($_SESSION['name'])){
        
    loginForm();
    }
    else{
    ?>
    <div id="wrapper">
        <div id="menu">
            <p class="welcome">Welcome, <b><?php echo $_SESSION['name']; ?></b></p>
            <p class="logout"><a id="exit" href="#">Exit Chat</a></p>
            <div style="clear:both"></div>
        </div>   
        <div id="chatbox"></div>
        
        <form name="message" action="">
            <input name="usermsg" type="text" id="usermsg" size="63" />
            <input name="submitmsg" type="submit"  id="submitmsg" value="Send" />
        </form>
    </div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script type="text/javascript">
    // jQuery Document
    $(document).ready(function(){
    });
    </script>
    <?php
    }
    ?>
    [​IMG]

    Menu Chào mừng và Đăng xuất
    Chúng ta vẫn chưa hoàn tất việc tạo hệ thống đăng nhập cho ứng dụng chat này. Chúng ta vẫn cần phải cho phép người dùng đăng xuất, và kết thúc session chat. Nếu bạn còn nhớ, markup HTML ban đầu của chúng ta bao gồm một menu đơn giản. Hãy quay trở lại và thêm một số code PHP sẽ cung cấp thêm chức năng cho menu.

    Trước hết, hãy thêm tên người dùng vào thông điệp chào mừng. Chúng ta làm điều này bằng cách xuất ra tên của người dùng ở trong session.

    PHP:
    <p class="welcome">Welcome, <b><?php echo $_SESSION['name']; ?></b></p>
    [​IMG]

    Để cho phép người dùng đăng xuất và kết thúc session, chúng ta sẽ sử dụng một jQuery ngắn gọn.

    Mã:
    <script type="text/javascript">
    // jQuery Document
    $(document).ready(function(){
        //If user wants to end session
        $("#exit").click(function(){
            var exit = confirm("Are you sure you want to end the session?");
            if(exit==true){window.location = 'index.php?logout=true';}       
        });
    });
    </script>
    Code jquery ở trên đơn giản là hiển thị một cảnh báo xác nhận nếu người dùng nhấp vào liên kết #exit. Nếu người dùng xác nhận việc đăng xuất, từ đó kết thúc session, thì chúng ta chuyển hướng đến index.php?logout=true. Việc đơn giản này tạo ra một biến gọi là logout với giá trị true. Chúng ta cần phải catch biến này với PHP:

    [​IMG]

    Mã:
    if(isset($_GET['logout'])){
        
        //Simple exit message
        $fp = fopen("log.html", 'a');
        fwrite($fp, "<div class='msgln'><i>User ". $_SESSION['name'] ." has left the chat session.</i><br></div>");
        fclose($fp);
        
        session_destroy();
        header("Location: index.php"); //Redirect the user
    }
    Bây giờ chúng ta xem một biến "logout" có tồn tại hay không bằng cách sử dụng hàm isset(). Nếu biến đã được truyền vào một địa chỉ url, chẳng hạn như liên kết nêu trên, chúng ta tiến hành kết thúc session của tên người dùng đó.

    Trước khi hủy session tên của người dùng với hàm session_destroy(), chúng ta cần viết một thông điệp thoát đơn giản vào chat log. Nó sẽ nói rằng người dùng đã rời session chat. Chúng ta làm điều này bằng cách sử dụng hàm fopen(), fwrite(), và fclose() để thao tác trên tập tin log.html, như chúng ta sẽ thấy sau đây, sẽ được tạo ra như là chat log của chúng ta. Xin lưu ý rằng chúng ta đã thêm một lớp 'msgln' vào div. Chúng ta đã xác định phong cách css cho div này.

    Sau khi làm điều này, chúng ta huỷ session, và chuyển hướng người dùng đến cùng một trang nơi mà form đăng nhập sẽ xuất hiện.

    Bước 4: Xử lý Input
    Sau khi một người dùng submit form, chúng ta cần lấy input của người đó và ghi nó vào chat log của chúng ta. Để làm điều này, chúng ta phải sử dụng jQuery và PHP để làm việc đồng bộ trên client và server.

    jQuery
    Hầu như tất cả mọi thứ mà chúng ta sẽ làm với jQuery để xử lý dữ liệu, sẽ xoay quanh yêu cầu POST jQuery.

    Mã:
    //If user submits the form
        $("#submitmsg").click(function(){   
            var clientmsg = $("#usermsg").val();
            $.post("post.php", {text: clientmsg});               
            $("#usermsg").attr("value", "");
            return false;
        });
    1. Trước khi chúng ta làm bất cứ điều gì, chúng ta phải lấy input của người dùng, hoặc những gì mà người đó đã nhập vào input #submitmsg. Điều này có thể đạt được với hàm val(), nó sẽ lấy giá trị thiết lập trong một trường của form. Bây giờ chúng ta lưu trữ giá trị này vào biến clientmsg.
    2. Ở đây là phần quan trọng nhất của chúng ta: yêu cầu POST trong jQuery. Điều này sẽ gửi một yêu cầu POST đến tập tin post.php mà chúng ta sẽ tạo ra trong một lát nữa. Nó post input của client, hoặc những gì đã được lưu vào biến clientmsg.
    3. Cuối cùng, chúng ta xoá input #usermsg bằng cách thiết lập thuộc tính value thành rỗng.
    Xin lưu ý rằng code ở trên sẽ nằm trong thẻ script của chúng ta, nơi chúng ta đặt code logout bằng jQuery.

    PHP - post.php
    Tại thời điểm này dữ liệu POST đang được gửi đến tập tin post.php mỗi khi người dùng submit form, và gửi một thông báo mới. Mục tiêu của chúng ta bây giờ là lấy dữ liệu này, và ghhi nó vào chat log của chúng ta.

    PHP:
    <?
    session_start();
    if(isset(
    $_SESSION['name'])){
        
    $text $_POST['text'];
        
        
    $fp fopen("log.html"'a');
        
    fwrite($fp"<div class='msgln'>(".date("g:i A").") <b>".$_SESSION['name']."</b>: ".stripslashes(htmlspecialchars($text))."<br></div>");
        
    fclose($fp);
    }
    ?
    1. Trước khi chúng ta làm bất cứ điều gì, chúng ta phải bắt đầu tập tin post.php với hàm session_start() vì chúng ta sẽ sử dụng session tên của người dùng trong tập tin này.
    2. Sử dụng boolean isset, chúng ta kiểm tra xem session cho 'name' có tồn tại hay không trước khi làm bất cứ điều gì khác.
    3. Bây giờ chúng ta lấy dữ liệu POST được gửi đến tập tin này bằng jQuery. Chúng ta lưu trữ dữ liệu này vào biến $text.
    4. Dữ liệu này, cũng như tổng thể tất cả các dữ liệu của người dùng, sẽ được lưu trữ vào tập tin log.html. Để làm điều này, chúng ta mở tập tin với chế độ 'a' trong hàm fopen, mà theo php.net mở tập tin để chỉ ghi; đặt con trỏ tập tin ở phần cuối của tập tin. Nếu tập tin không tồn tại, hãy cố gắng tạo ra nó. Sau đó chúng ta ghi thông điệp của chúng ta vào tập tin bằng cách sử dụng hàm fwrite().
      • Thông điệp mà chúng ta sẽ ghi sẽ được gắn vào bên trong div .msgln. Nó sẽ chứa ngày tháng và thời gian được tạo ra bằng hàm date(), session tên của người dùng, và văn bản, nó còn được bao quanh bởi hàm htmlspecialchars() để ngăn chặn tấn công XSS.
      Cuối cùng, chúng ta đóng trình xử lý tập tin của chúng ta sử dụng hàm fclose().
    Bước 5: Hiển thị Nội dung Chat Log (log.html)
    Tất cả những gì người dùng đã submit được xử lý và post bằng jQuery; nó được ghi vào chat log với PHP. Điều duy nhất còn lại để làm là hiển thị chat log được cập nhật đến người dùng.

    Để tiết kiệm thời gian, chúng ta sẽ tải trước chat log vào div #chatbox nếu có sẵn nội dung.

    Mã:
    <div id="chatbox"><?php
    if(file_exists("log.html") && filesize("log.html") > 0){
        $handle = fopen("log.html", "r");
        $contents = fread($handle, filesize("log.html"));
        fclose($handle);
        
        echo $contents;
    }
    ?></div>
    Chúng ta sử dụng một công việc tương tự như chúng ta đã sử dụng tập tin post.php, ngoại trừ lần này chúng ta chỉ đọc và xuất ra nội dung của tập tin.

    Yêu cầu jQuery.ajax
    Yêu cầu ajax là cốt lõi của tất cả mọi thứ mà chúng ta đang làm. Yêu cầu này không chỉ cho phép chúng ta gửi và nhận dữ liệu thông qua form mà không làm mới trang web, mà còn cho phép chúng ta xử lý dữ liệu được yêu cầu.

    Mã:
    //Load the file containing the chat log
        function loadLog(){       
    
            $.ajax({
                url: "log.html",
                cache: false,
                success: function(html){       
                    $("#chatbox").html(html); //Insert chat log into the #chatbox div               
                  },
            });
        }
    Chúng ta đặt yêu cầu ajax bên trong một hàm Bạn sẽ thấy lý do trong một lát nữa. Như bạn thấy ở trên, chúng ta sẽ chỉ sử dụng ba đối tượng yêu cầu ajax của jQuery.

    • url: Một chuỗi URL để yêu cầu. Chúng ta sẽ sử dụng tên tập tin log.html của chat log.
    • cache: Cái này sẽ ngăn chặn tập tin của chúng ta khỏi bị cache. Nó sẽ đảm bảo rằng chúng ta nhận được một cập nhật chat log mỗi khi chúng ta gửi một yêu cầu.
    • sucess: Cái này sẽ cho phép chúng ta đính kèm một hàm sẽ chuyển dữ liệu mà chúng ta yêu cầu.
    Như bạn thấy, chúng ta sau đó di chuyển dữ liệu mà chúng ta yêu cầu (html) vào div #chatbox.

    Tự động cuộn
    Như bạn có thể nhìn thấy trong các ứng dụng chat khác, nội dung tự động cuộn xuống nếu container chat log (#chatbox) bị tràn. Chúng ta sẽ cài đặt một tính năng đơn giản và tương tự, mà sẽ so sánh chiều cao cuộn của container trước và sau khi chúng ta thực hiện yêu cầu ajax. Nếu chiều cao cuộn lớn sau khi yêu cầu, chúng ta sẽ sử dụng hiệu ứng động của jQuery để cộn div #chatbox.

    Mã:
    //Load the file containing the chat log
        function loadLog(){       
            var oldscrollHeight = $("#chatbox").attr("scrollHeight") - 20; //Scroll height before the request
            $.ajax({
                url: "log.html",
                cache: false,
                success: function(html){       
                    $("#chatbox").html(html); //Insert chat log into the #chatbox div   
                    
                    //Auto-scroll           
                    var newscrollHeight = $("#chatbox").attr("scrollHeight") - 20; //Scroll height after the request
                    if(newscrollHeight > oldscrollHeight){
                        $("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal'); //Autoscroll to bottom of div
                    }               
                  },
            });
        }
    • Đầu tiên chúng ta lưu trữ chiều cao cuộn của div #chatbox vào biến oldscrollHeight trước khi chúng ta thực hiện yêu cầu.
    • Sau khi yêu cầu của chúng ta đã trả về thành công, chúng ta lưu trữ chiều cao scrollbar của div #chatbox vào biến newscrollHeight.
    • Sau đó chúng ta so sánh cả hai biến chiều cao cuộn sử dụng một câu lệnh if. Nếu newscrollHeight lớn hơn oldscrollHeight, chúng ta sử dụng hiệu ứng động để cuộn div #chatbox.
    Liên tục Cập nhật Chat Log
    Giờ đây, nảy sinh thêm một câu hỏi, làm thế nào chúng ta liên tục cập nhật dữ liệu mới được gửi qua lại giữa những người dùng? Hoặc diễn đạt lại câu hỏi, làm thế nào chúng ta giữ cho việc gửi yêu cầu cập nhật dữ liệu một cách liên tục?

    Mã:
    setInterval (loadLog, 2500);
    [​IMG]

    Hoàn tất
    Chúng ta đã hoàn thành nó! Tôi hy vọng rằng bạn đã học được cách một hệ thống chat cơ bản hoạt động, và nếu bạn có bất kỳ đề xuất về bất cứ điều gì, tôi rất vui mừng được thấy chúng. Hệ thống chat này là một hệ thống đơn giản mà bạn có được với một ứng dụng chat. Bạn có thể nâng cao cái này và xây dựng một ứng dụng nhiều phòng chat, thêm một back-end quản lý, thêm các biểu tượng cảm xúc, vv. Không có giới hạn cho bạn.

    [​IMG]

    Nguồn xem chi tiết hơn tại đây
    Tải source file đính kèm ở dưới
     

    File đính kèm :

  2. haiily2001

    haiily2001 Thành viên mới

    Tham gia:
    5/9/19
    Bài viết:
    26
    Thích đã nhận:
    0
    Điểm thành tích:
    1
    Dây chuyền mặt Phật hay còn gọi là bản mệnh Phật có tác dụng gặp dữ hóa lành, bảo hộ bình an, che chở chủ nhân khỏi điều tà ác.

    Phật bản mệnh được biết đến như một trong những vị hộ mệnh, người đem đến điều tốt lành, bình an, sức khỏe, may mắn và giúp bảo vệ mọi người trong cuộc sống.

    Phật bản mệnh được biết đến như một trong những vị hộ mệnh, người đem đến điều tốt lành, bình an, sức khỏe, may mắn và giúp bảo vệ mọi người trong cuộc sống. Phật bản mệnh của mỗi tuổi, mỗi giới là một vị riêng, mỗi vị có nhiều công đức mang tính chất đặc thù khác nhau. Vì thế nên chọn và tu hành theo Phật bản mệnh tương ứng với tuổi của mình để đạt được những nhiệm màu tốt đẹp.

    Mỗi cầm tinh đều có một Thủ Hộ Thần, đây chính là bản mệnh Phật, có tác dụng bảo đảm bình an, tránh tai tà. Đeo bản mệnh Phật bên người sẽ gặp nhiều may mắn, phúc đức và kết được thiện duyên.
    http://phat-ban-menh-tuoi-than.dienthoaicohanoi.net/


    Bản mệnh Phật vừa là vật phẩm phong thủy cát tường lại có ý nghĩa tâm linh. Người gặp năm khó khăn, trắc trở, mọi việc không thuận, công việc bất định, rung chuyển bất an, thị phi nhiều, khổ nạn lắm hay có tai ương, gây khó dễ, cãi vã về tiền bạc, tình cảm, quan hệ giao tiếp hao tổn thì nên thỉnh bản mệnh Phật về đeo.

    Mỗi cầm tinh đều có một bản mệnh Phật riêng, bản mệnh thiếu hụt cái gì sẽ được bù đắp, che chở cái đó. Đặc biệt trong năm bản mệnh phạm Thái Tuế, vận trình hung hiểm, năm hạn kéo đến thì bản mệnh Phật có thể khơi thông năm hạn, gặp dữ hóa lành, vượt khổ đến vui.

    [​IMG]
     

trang này