» » Membuat Aplikasi Chat Dengan PHP

Membuat Aplikasi Chat Dengan PHP

14:43


Assalamualaikum semuanya ,, kumaha daramang ? bah haha
Okeh kali ini saya akan share Membuat Aplikasi Chat Dengan PHP Dan jQuery
menggunakan jquery sebagai alternatif programnya Nerd
Langsung aja yuk ahh cekbrot Request

File yang akan dibuat :
~Iindex.php
~log.html
~post.php
~style.css

~Pertama buatlah file dengan nama log.html ,, biarkan kosongkan saja ,, nantinya itu sebagai penyimpanan data log chat

~Kedua buatlah script php dengan nama post.php nantinya itu untuk mengeksekusi data dari chat ke log.html
Spoiler for script post.php
PHP Code:
<?
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);
}
?>

~Kemudian kita tinggal membuat index.php nya ,, index.php ini yang akan menampilkan data sekaligus dari hasil eksekusi proses.php dan log.html tadi
Spoiler for script index.php

PHP Code:
<?
session_start();

if(isset($_GET['logout'])){

    //Simple exit message
    $fp = fopen("log.html", 'a');
    fwrite($fp, "<div class='msgln'><i>User ". $_SESSION['name'] ." telah meninggalkan ruang obrolan.</i><br></div>");
    fclose($fp);

    session_destroy();
    header("Location: index.php"); //Redirect the user
}

function loginForm(){
    echo'
    <div id="loginform">
    <form action="index.php" method="post">
        <p>Silakan ketikkan nama anda untuk mulai:</p>
        <label for="name">Nama:</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']));
            $fp = fopen("log.html", 'a');
        fwrite($fp, "<div class='msgln'><i>User ". $_SESSION['name'] ." masuk ruang obrolan.</i><br></div>");
        fclose($fp);
    }
    else{
        echo '<span class="error">Silakan tulis nama dulu</span>';
    }
}
?>
<!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 - Peluru Kertas</title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<font color='#4169E1' type='comic sans ms' size='4'>WebChat App.<align='center'></align></font>
<font color='#4169E1' type='arrial narrow' size='1'>Version 1.0<align='center'></align></font></br></br>
<?phpif(!isset($_SESSION['name'])){
    loginForm();
}
else{?><div id="wrapper">
    <div id="menu">
        <p class="welcome">Selamat Datang, <b><?php echo $_SESSION['name']; ?></b></p>
        <p class="logout"><a id="exit" href="#">Keluar Chat</a></p>
        <div style="clear:both"></div>
    </div>
    <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>

    <form name="message" action="">
        <input name="usermsg" type="text" id="usermsg" size="63" />
        <input name="submitmsg" type="submit"  id="submitmsg" value="Kirim" />
    </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(){
    //If user submits the form
    $("#submitmsg").click(function(){
        var clientmsg = $("#usermsg").val();
        $.post("post.php", {text: clientmsg});            
        $("#usermsg").attr("value", "");
        return false;
    });

    //Load the file containing the chat log
    function loadLog(){    
        var oldscrollHeight = $("#chatbox").attr("scrollHeight") - 20;
        $.ajax({
            url: "log.html",
            cache: false,
            success: function(html){    
                $("#chatbox").html(html); //Insert chat log into the #chatbox div            
                var newscrollHeight = $("#chatbox").attr("scrollHeight") - 20;
                if(newscrollHeight > oldscrollHeight){
                    $("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal'); //Autoscroll to bottom of div
                }            
              },
        });
    }
    setInterval (loadLog, 2500);    //Reload file every 2.5 seconds

    //If user wants to end session
    $("#exit").click(function(){
        var exit = confirm("Apakah anda yakin mengakhiri obrolan ini?");
        if(exit==true){window.location = 'index.php?logout=true';}    
    });
});
</script>
<?php}?></body>
</html> 

~Nahh yang terakhir ini adalah style.css ,, gunanya untuk memperindah penampilan aplikasi ini ,, untuk desainnya lah bah haha
Spoiler for script style.css

PHP Code:
/* CSS Document */body {
    font:12px arial;
    color: #222;
    text-align:center;
    padding:35px; }
 form, p, span {
    margin:0;
    padding:0; }
 input {&bbsp;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; } 


Gimana nih ? mantep bukan Ngakak haha
sisanya ulik ulik sendiri lagi deh tuh haha

Spoiler for demo download

Demo : http://chat.peluru-cms.cf/
Download : http://www.tusfiles.net/8as92qcgqbxd

catatan : untuk login chat username jangan pake spasi


Nah mungkin sampai disini perjumpaan kita kali ini ,,
Terimakasih atas perhatiannya wassalam ^_^

BAGIKAN:

Subscribe To Get Best Articles!

Jika menurut kalian artikel di blog ini berkualitas dan bermanfaat, silahkan berlangganan artikel terbaru melalui pesan masuk email anda secara gratis.

7 comments:

  1. Loker Ilmu IT5 November 2014 at 13:09

    Tambahan nih : saya menggunakan jquery dari google ,, jadi pake aplikasi ini harus sedang keadaan konek internet ,, jika mau nyoba offline ,, buka aja jquery googlenya terus save deh jquery.min.js << edit lagi scriptnya ,, thanks

    ReplyDelete
  2. Unknown3 March 2015 at 08:12

    tq admin..aq respect kamu..from Malaysia

    ReplyDelete
  3. Unknown25 September 2015 at 04:28

    Gak bisa di download gan :-b mohon perbaikin linknya :-d

    ReplyDelete
    Replies
    1. Loker Ilmu IT28 September 2015 at 02:17

      copas copas aja scriptnya kan tertera untuk sementara :'v

      Delete
  4. Unknown28 November 2015 at 23:45

    di demo agan bisa, kok saya coba di localhost saya gamuncul yg diketik gan..
    please help

    ReplyDelete
    Replies
    1. Anonymous30 November 2015 at 20:27

      emang ini gak suport dilocalhost apalagi dixampp sekarang ,, coba dihosting gratis dulu aja

      Delete
  5. Kelvin Yuli Andrian17 December 2016 at 00:34

    nice post..
    ku tunggu kunjungan baliknya

    ReplyDelete

" Terimakasih telah mengunjungi blog kami ,, silahkan tinggalkan komentar untuk menghargai jerit payah penulis ^_^ "

Subscribe to: Post Comments ( Atom)