Scribd Logo
Unggah

Selamat datang di Scribd!

  • Pemrograman Web Tingkat Lanjut - Praktikum 3

    Diunggah oleh

    BetaIndo
    19 tayangan5 halaman

    Judul Asli

    Pemrograman Web Tingkat Lanjut_Praktikum 3

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    19 tayangan5 halaman

    Pemrograman Web Tingkat Lanjut - Praktikum 3

    Diunggah oleh

    BetaIndo

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 5

    LABORATORIUM PEMBELAJARAN

    FAKULTAS ILMU KOMPUTER


    UNIVERSITAS BRAWIJAYA

    NAMA : Muhammad Dhivara Aurian


    NIM : 215150607111001
    KELAS :B
    BAB : Javascript
    ASISTEN : Iqbal Biondy

    1. Langkah-Langkah Praktikum
    a. Membuat direktori baru dan menambahkan file baru kedalamnya, lalu
    menambahkan kode baru seperti dengan yang sudah diberikan.
    b. Membuat direktori baru bernama “chat” dan menambahkan file baru serta
    mengetik kode seperti dengan yang sudah diberikan.
    2. Pembahasan Tugas
    a. Membuat direktori baru dan menambahkan file baru kedalamnya.

    Gambar 1 Kode index.html Didalam Direktori greet-ajax

    Laporan Praktikum Pemrograman Web dan Teknologi Internet PTI 1


    LABORATORIUM PEMBELAJARAN
    FAKULTAS ILMU KOMPUTER
    UNIVERSITAS BRAWIJAYA

    const button = document.querySelector("#greet");


    const message = document.querySelector("#message");
    button.addEventListener("click", () => {
    const name = document.querySelector("#name").value;
    message.textContent = "Please wait...";
    fetch("http://localhost/greet-ajax/greet.php", {
    method: "post",
    headers: {
    "Content-Type": "application/x-www-form-urlencoded",
    },
    body: `name=${name}`
    })
    .then(res => res.text())
    .then(data =>
    message.textContent = data);
    });
    Kode ajax-greet.js

    <?php
    sleep(1);
    $name = $_POST["name"];
    echo "Hello $name!";
    ?>
    Kode greet.php

    Gambar 2 Tampilan Web Setelah Menekan Tombol Greet

    Fungsi dari then pada baris ke 13 dan 14 yaitu untuk mengganti variabel
    message.textContent menjadi sesuai dengan respon dari fungsi fetch dari file php
    sebelumnya. Text yang awalnya bertuliskan Please Wait… berubah menjadi Hello Beta!
    setelah satu detik dikarenakan pada file php ada fungsi sleep yang berjalan ketika kode
    dikompilasi. Cara bekerjanya yaitu merubah respon dari php tersebut menjadi sebuah
    text dan memasukkannya kedalam variabel data, lalu isi variabel message.textContent
    diubah sesuai dengan isi variabel data.

    Laporan Praktikum Pemrograman Web dan Teknologi Internet PTI 2


    LABORATORIUM PEMBELAJARAN
    FAKULTAS ILMU KOMPUTER
    UNIVERSITAS BRAWIJAYA

    b. Membuat aplikasi chat

    Gambar 3 Tampilan VSCode pada direktori chat

    const chat = document.querySelector("#chat");


    const message = document.querySelector("#message");
    const baseUrl = "http://localhost/chat";
    function readChat() {
    fetch(`${baseUrl}/chat-read.php`)
    .then((res) => res.text())
    .then((data) => {
    chat.value = data;
    });
    setTimeout(readChat, 1000);
    }
    readChat();
    message.addEventListener("keyup", (e) => {
    if (e.keyCode === 13) {
    fetch(`${baseUrl}/chat-write.php`, {
    method: "post",
    headers: {
    "Content-Type": "application/x-www-form-urlencoded",
    },
    body: `text=${message.value}`,
    });
    message.value = "";
    }
    });
    Kode pada chat.js

    Laporan Praktikum Pemrograman Web dan Teknologi Internet PTI 3


    LABORATORIUM PEMBELAJARAN
    FAKULTAS ILMU KOMPUTER
    UNIVERSITAS BRAWIJAYA

    <!DOCTYPE html>
    <html lang="en">

    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-
    scale=1.0">
    <title>AJAX Chat App</title>
    </head>

    <body>
    <textarea id="chat" rows="20" cols="31"></textarea><br>
    <label>
    Message: <input type="text" id="message">
    </label>
    <script src="chat.js"></script>
    </body>

    </html>
    Kode pada index.html

    <?php
    $message = $_POST['text'];
    file_put_contents('chat.txt', "$message\n", FILE_APPEND);
    Kode chat-write.php

    <?php
    echo file_get_contents('chat.txt');
    Kode chat-read.php

    Laporan Praktikum Pemrograman Web dan Teknologi Internet PTI 4


    LABORATORIUM PEMBELAJARAN
    FAKULTAS ILMU KOMPUTER
    UNIVERSITAS BRAWIJAYA

    Gambar 4 Tambilan dari Web Chat

    Dikarenakan 2 tab browser yang kita buka menuju ke alamat yang sama, yaitu
    http://localhost/chat, maka pesan yang ditampilkan dari 2 tab tersebut sama karena
    menerima informasi dari web server yang sama.

    Fungsi dari setTimeout(readChat, 1000); adalah untuk membatasi pesan yang dapat
    dikirim dalam jangka waktu tertentu, dalam hal ini 1000ms atau 1 detik, jika kita
    mengaturnya menjadi setTimeout(readChat, 100); maka kita dapat melakukan spam
    pesan dengan lebih mudah dikarenakan jangka waktu antara pesan yang dapat dikirim
    menjadi jauh lebih cepat.

    Jika kita menghapus bagian FILE APPEND, maka web hanya menampilkan pesan terbaru
    yang dikirim. Ini dikarenakan fungsi dari FILE APPEND sendiri adalah menggabungkan
    textyang sudah ada sebelumnya dengan text baru yang akan ditampilkan sehingga kita
    bisa melihat seluruh riwayat pesan yang sudah dikirim.

    Laporan Praktikum Pemrograman Web dan Teknologi Internet PTI 5

    Anda mungkin juga menyukai