Selasa, 17 Oktober 2017

Tutorial Membuat Tampilan Chat dengan Html dan CSS

Assalamualaikum sahabat lupacode semuanya...

Bagaimana kabar kalian sekarang ? Semoga kita tetap berada didalam perlindungan allah swt.

lama rasanya admin tidak uodate tutorial maupun source code diblog kesayangan ini hihii...

Berhubung pada akhir - akhir ini admin banyak sekali kesibukan diluar sana jadi belum sempet update lagi ..

Namun sekarang admin akan mencoba kembali menyempatkan waktu untuk dapat berbagi kepada sahabat lupacode semuanya yang senantiasa menantikan update materi terbaru dari blog lupacode - Tutorial pemrograman

Tutorial Cara Membuat Tampilan Chat dengan Html dan CSS

Tutorial Cara Membuat Tampilan Chat dengan Html dan CSS

Pada kesempatan kali ini admin akan memberikan sebuah tutorial cara membuat tampilan chatting yang dapat kalian buat dengan menggunakan html dan css saja.

Chatting merupakan sebuah istilah yang sering kali terdengar sangat tidak asing lagi di telinga kita...

Tentu saja, karena pada saat sekarang ini pastinya setiap orang telah mengetahui apa itu istilah chatting ...

Nah bagi sahabat lupacode yang saat ini penasaran bagaimana cara membuat sebuah halaman chatting dengan menggunakan Html dan css ...

Maka tidak ada salahnya jika sahabat semuanya mencoba untuk membuatnya pada localhost sahabat masing-masing.

Baiklah sekarang kita langsung saja kepada inti pembahasan dari tutorial kali ini yaitu Belajar membuat tampilan halaman chatting dengan menggunakan Html dan css.

Silahkan sahabat semua ikuti tutorialnya dibawah ini :

  1. Pertama kita buat dulu sebuah folder didalam HTDOCS jika sahabat semua menggunakan Xampp.. Buat sebuah folder dengan Nama Simple-Chat
  2. Kemudian selanjutnya kita buat 3 buah file didalam folder tersebut diantaranya :
  • index.html
  • style.css
  • app.js
Setelah sahabat semua membuat sebuah folder serta ke-tiga file yang admin sebutkan diatas, maka saatnya sekarang kita memasukan codingan kita kedalam masing-masing file tersebut.

Untuk file yang pertama yaitu index.html silahkan sahabat semua masukan code dibawah ini :

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


Kemudian jangan lupa untuk menyimpan code yang telah masukan tersebut.

Selanjutnya pada file yang ke-dua yaitu style.css dimana pada file ini kita akan mengatur desain pada tampilan chatting kita nantinya...
Sahabat semua juga bisa untuk memodifikasi kembali kode css pada file tersebut.

Silahkan masukan kode berikut pada file style.css :

.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;
}   

Jangan lupa kembali untuk menyimpan kode yang telah masukan tersebut.

Selanjutnya untuk file yang ke-tiga atau yang terakhir didalam folder simple-chat diatas...

Silahkan sahabat semua masukan kode berikut pada file app.js :


xvar 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 Lupacode !", 9500);
insertChat("you", "Oke, Siap Pak", 12000);

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

Baiklah ketiga file tersebut sekarang sudah ada isinya hihih...

Maka saatnya sekarang kita cek hasil yang telah kita buat ... yaitu dengan mengakses http://localhost/simple-chat pada addres bar kita secara langsung ...

Silahkan sahabat semua kembangkan lagi ... ini hanya untuk atau sekedar latihan saja ...

Jangan takut untuk selalu berkreasi ...

Sering-sering lah kita ngoprek karna dengan begitu kita akan lebih cepat tau akan kesalahan - kesalahan yang kita dapat ambil hikmah nya.

Baiklah mungkin itu saja materi tutorial pada kesempatan kali ini ...

Sampai berjumpa kembali pada materi tutorial selanjutnya dari blog lupacode ...

jangan lupa untuk selalu berkunjung kedalam blog lupacode guna untuk mendapatkan materi - materi terbaru yang dapat sahabat semua pelajari.

Saya admin dari blog lupacode undur diri, see you ...

Wassalamualaium Wr. Wb.

Silahkan berkomentar yang baik dan menarik sesuai dengan isi konten.
Komentar yang tidak diperbolehkan :

1. Berbau penghinaan SARA & PXXN
2. Komentar dengan Link hidup ( akan dianggap spam )
3. Komentar tidak nyambung dengan isi postingan
EmoticonEmoticon