Membuat Tampilan Chat Dengan HTML dan CSS
Web Developer | Blogger | Creator of RubyPedia.com
16 Oktober 2017

Chatting adalah salah satu fasilitas untuk berkomunikasi antar sesame pemakai internet dengan menggunakan media tulis secara online dan real time. Atau Chating adalah hubungan komunikasi antar pengguna komputer dalam Internet secara online yang umumnya berupa teks.

Chating itu bentuknya seperti obrolan tapi dengan tulisan secara online. Chating biasa dilakukan dengan menggunakan jejaring social seperti Yahoo Messenger, Facebook, Google + atau yang lainnya.

Gambaran lebih jelasnya seperti ini saya ambil contoh saja facebook, ketika anda online dan ada teman facebook anda yang onlin juga, kemudian anda menulis pesan untuk teman anda tadi dan teman anda membalasnya itu dianamakan Chatting.

Pada tutorial kali ini kita bersama-sama akan belajar cara membuat tampilan chatting dengan menggunakan HTML dan CSS, dan JavaScript, oke langsung saja.

Buatlah sebuah folder baru didalam folder htdocs (jika menggunakan xampp), misalkan namanya simple-chat, kemudian didalam folder tersebut, buatlah 3 buah file, yaitu:

  • index.html
  • style.css
  • app.js

Setelah itu masukkan kode berikut ini kedalam file index.html, berikut source codenya:

<!DOCTYPE html>
<html>
    <head>
        <title>SImple Chat</title>
        <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body style="background-color: #F3F3F3">
        <div class="col-md-3 col-sm-offset-4 frame" style="margin-top: 100px">
            <ul></ul>
            <div>
                <div class="msj-rta macro" style="margin:auto;margin-bottom: 10px">                        
                    <div class="text text-r" style="background:whitesmoke !important">
                        <input class="mytext" placeholder="Type a message"/>
                    </div> 
                </div>
            </div>
        </div>    
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script type="text/javascript" src="app.js"></script>    
    </body>
</html>

Simpanlah file index.html tersebut, selanjutnya buke dan edit file style.css dan masukkan kode berikut ini:

.mytext{
    border:0;padding:10px;background:whitesmoke;
}
.text{
    width:75%;display:flex;flex-direction:column;
}
.text > p:first-of-type{
    width:100%;margin-top:0;margin-bottom:auto;line-height: 13px;font-size: 12px;
}
.text > p:last-of-type{
    width:100%;text-align:right;color:silver;margin-bottom:-7px;margin-top:auto;
}
.text-l{
    float:left;padding-right:10px;
}        
.text-r{
    float:right;padding-left:10px;
}
.avatar{
    display:flex;
    justify-content:center;
    align-items:center;
    width:25%;
    float:left;
    padding-right:10px;
}
.macro{
    margin-top:5px;width:85%;border-radius:5px;padding:5px;display:flex;
}
.msj-rta{
    float:right;background:whitesmoke;
    margin-bottom: 10px;
    margin-top: 10px;
}
.msj{
    float:left;background:white;
        margin-bottom: 10px;
    margin-top: 10px;
}
.frame{
    background:#e0e0de;
    height:450px;
    overflow:hidden;
    padding:0;
    -moz-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
    webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
}
.frame > div:last-of-type{
    position:absolute;bottom:5px;width:100%;display:flex;
}
ul {
    width:100%;
    list-style-type: none;
    padding:18px;
    position:absolute;
    bottom:32px;
    display:flex;
    flex-direction: column;

}
.msj:before{
    width: 0;
    height: 0;
    content:"";
    top:-5px;
    left:-14px;
    position:relative;
    border-style: solid;
    border-width: 0 13px 13px 0;
    border-color: transparent #ffffff transparent transparent;            
}
.msj-rta:after{
    width: 0;
    height: 0;
    content:"";
    top:-5px;
    left:14px;
    position:relative;
    border-style: solid;
    border-width: 13px 13px 0 0;
    border-color: whitesmoke transparent transparent transparent;           
}  
input:focus{
    outline: none;
}        
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #d4d4d4;
}
::-moz-placeholder { /* Firefox 19+ */
    color: #d4d4d4;
}
:-ms-input-placeholder { /* IE 10+ */
    color: #d4d4d4;
}
:-moz-placeholder { /* Firefox 18- */
    color: #d4d4d4;
}   

Simpan file style.css dan selanjutnya buka dan masukkan kode berikut ini kedalam file app.js, berikut source codenya:

var me = {};
me.avatar = "https://avatars2.githubusercontent.com/u/11194525?s=460&v=4?sz=48";

var you = {};
you.avatar = "https://a11.t26.net/taringa/avatares/9/1/2/F/7/8/Demon_King1/48x48_5C5.jpg";

function formatAMPM(date) {
    var hours = date.getHours();
    var minutes = date.getMinutes();
    var ampm = hours >= 12 ? 'PM' : 'AM';
    hours = hours % 12;
    hours = hours ? hours : 12; // the hour '0' should be '12'
    minutes = minutes < 10 ? '0'+minutes : minutes;
    var strTime = hours + ':' + minutes + ' ' + ampm;
    return strTime;
}            

//-- No use time. It is a javaScript effect.
function insertChat(who, text, time = 0){
    var control = "";
    var date = formatAMPM(new Date());

    if (who == "me"){

        control = '<li style="width:100%">' +
                        '<div class="msj macro">' +
                        '<div class="avatar"><img class="img-circle" style="width:100%;" src="'+ me.avatar +'" /></div>' +
                            '<div class="text text-l">' +
                                '<p>'+ text +'</p>' +
                                '<p><small>'+date+'</small></p>' +
                            '</div>' +
                        '</div>' +
                    '</li>';                    
    }else{
        control = '<li style="width:100%;">' +
                        '<div class="msj-rta macro">' +
                            '<div class="text text-r">' +
                                '<p>'+text+'</p>' +
                                '<p><small>'+date+'</small></p>' +
                            '</div>' +
                        '<div class="avatar" style="padding:0px 0px 0px 10px !important"><img class="img-circle" style="width:100%;" src="'+you.avatar+'" /></div>' +                                
                  '</li>';
    }
    setTimeout(
        function(){                        
            $("ul").append(control);

        }, time);

}

function resetChat(){
    $("ul").empty();
}

$(".mytext").on("keyup", function(e){
    if (e.which == 13){
        var text = $(this).val();
        if (text !== ""){
            insertChat("me", text);              
            $(this).val('');
        }
    }
});

//-- Clear Chat
resetChat();

//-- Print Messages
insertChat("me", "Selamat Pagi...", 0);  
insertChat("you", "Selamat Pagi, Juga Pak", 1500);
insertChat("me", "Apakah hari ini bisa ketemu sebentar?", 3500);
insertChat("you", "Bisa, kita ketemu dimana pak?",7000);
insertChat("me", "di Kantor Ruby Pedia !", 9500);
insertChat("you", "Oke, Siap Pak", 12000);

//-- NOTE: No use time on insertChat.

Setelah semuanya selesai, silahkan jalankan dengan mengetikkan di address bar browser, http://localhost/simple-chat, maka kalian akan melihat tampilanya kurang lebih seperti berikut ini:

Blog ini telah dibaca sebanyak 3473 kali
HTML5 CSS3 Chatting Simple Chat Messager

Sekilas Tentang Penulis

Fika Ridaul Maulayya
Web Developer | Blogger | Creator of RubyPedia.com

KOMENTAR

blog comments powered by Disqus