Untitled

<!DOCTYPE html>
<html>
<head>
    <title>Testing Ajax</title>
        <link rel="shortcut icon" href="aku.jpg"/>
    <link rel="stylesheet" href="home.css">

</head>
<header>
            <div class="nav">
                <a href="index.html">Home</a> |
                <a href="Tugas 8.html">Kategori</a> |
                <a href="riltaim.html">RealTime</a> |
                <a href="timeline.html">TimeLine</a>
            </div>
        </header>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
        <div class="isi1">

<body onload="loadDoc('http://api.babyhanana.com/index.php/home/pesan', 'chat', 7); loadDoc('http://api.babyhanana.com/index.php/home/pesan_with_id_bigger_than?last_id=0', 'timeline', 8)">

<button type="button" onclick="loadDoc('http://api.babyhanana.com/index.php/home/judul', 'konten')">Judul</button>
<h1 id="konten"></h1>

<button type="button" onclick="loadDoc('http://api.babyhanana.com/index.php/home/gambar', 'gambar', 2)">Gambarnya</button>
<p><img id="gambar" src=""></p>

<button type="button" onclick="loadDoc('http://api.babyhanana.com/index.php/home/kategori', 'kategori', 3)">List Kategori</button>
<ul id="kategori"></ul>

<button type="button" onclick="loadDoc('http://api.babyhanana.com/index.php/home/kategori_json', 'kategori_json', 4)">Kategori</button>
<ul id="kategori_json"></ul>

<button type="button" onclick="loadDoc('http://api.babyhanana.com/index.php/home/kategori_produk', 'kategori_produk', 5)">Kategori dan Produk</button>
<ul id="kategori_produk"></ul>

<input type="text" id="input">
<button type="button" onclick="cari()">Cari kategori</button>
<ul id="cari"></ul>


<script>
    var last_id = 0;
    var konten_chat ='';
function loadDoc(url, target, tipe = 1) {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            if(tipe == 1) {
                document.getElementById(target).innerHTML = this.responseText;
            } else if(tipe == 2) {
                document.getElementById(target).src = this.responseText;
            } else if (tipe == 3) {
                var data = this.responseText;
                var data_kategori = data.split(', ');

                document.getElementById(target).innerHTML = '';
                data_kategori.forEach(function(item){
                    document.getElementById(target).innerHTML += '<li>' + item + '</li>';
                });
            } else if (tipe == 4) {
                var data = this.responseText;
                var data_kategori = JSON.parse(data);

                document.getElementById(target).innerHTML = '';
                data_kategori.forEach(function(item){
                    document.getElementById(target).innerHTML += '<li>' + item + '</li>';
                });
            } else if (tipe == 5) {
                var data = this.responseText;
                var data_kategori = JSON.parse(data);
                var output  = '';

                data_kategori.forEach(function(item){
                    var data_produk = item['produk'];

                    output += '<li>';
                    output += item['kategori'];
                    output += '<ul>';
                    data_produk.forEach(function(item_produk){
                        output += '<li>' + item_produk + '</li>';
                    });
                    output += '</ul>';
                    output += '</li>';
                });
                document.getElementById(target).innerHTML = output;
            } else if (tipe == 6) {
                var data = this.responseText;
                var data_produk = JSON.parse(data);

                if (data_produk.status) {
                    document.getElementById(target).innerHTML = data_produk.status;
                } else {
                    document.getElementById(target).innerHTML = '';
                    data_produk.forEach(function(item){
                        document.getElementById(target).innerHTML += '<li>' + item.nama + '</li>';
                    });
                }
            } else if(tipe == 7) {
                var data = this.responseText;
                var data_chat = JSON.parse(data);
                var output_chat = '';
                data_chat.forEach(function(chat){
                    output_chat += '<li>';
                    output_chat += '<small>' + chat.timestamp + '</small>';
                    output_chat += '<div class="isi_pesan">' + chat.pesan + '</div>';
                    output_chat += '</li>';
                });
                document.getElementById(target).innerHTML = output_chat;

                console.log(data_chat);
            } else if(tipe == 8) {
                var data = this.responseText;
                var data_chat = JSON.parse(data);

                var output_chat_realtime    = '';
                data_chat.forEach(function(chat){
                    if (parseInt(chat.id) > last_id) {
                        last_id = parseInt(chat.id);
                    }
                    output_chat_realtime += '<li>';
                    output_chat_realtime += '<small>' + chat.timestamp + '</small>';
                    output_chat_realtime += '<div class="isi_pesan">' + chat.pesan + '</div>';
                    output_chat_realtime += '</li>';
                });
                console.log(last_id);
                konten_chat = output_chat_realtime + konten_chat;

                if ( konten_chat != document.getElementById(target).innerHTM) {
                    document.getElementById(target).innerHTML = konten_chat;
                }
                setTimeout(function(){
                    loadDoc('http://api.babyhanana.com/index.php/home/pesan_with_id_bigger_than?last_id='+last_id, 'timeline', 8)
                },
                5000);
            }
        }
    }
    xhttp.open("GET", url, true);
    xhttp.send();
}
function cari(){
    var url = "http://api.babyhanana.com/index.php/home/produk_by_kategori?kategori=";
    var kategori = document.getElementById('input').value;

    loadDoc(url+kategori, 'cari', 6);
}
function kirim(){
    var url = 'http://api.babyhanana.com/index.php/home/kirim_pesan';

    var isi = document.getElementById('pesan').value;
    var parameter = 'pesan='+isi;

    var http = new XMLHttpRequest();
    http.open("POST", url, true);

    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

    http.onreadystatechange = function() {
        if(this.readyState == 4 && this.status == 200) {
            var data = JSON.parse(this.responseText);
            alert(data.status);
            document.getElementById('pesan').value = '';
        }
    }
    http.send(parameter);
}
</script>
        <footer><marquee>Copyright &copy; <strong>yunushedi</strong></marquee></footer>

</body>
</html>