AJAX PWEB

  Nama: Taqarra Rayhan Irfandianto


NRP: 05111940000121

Kelas: PWEB-B




Link Source Code: https://github.com/EEB12/AJAX-PWEB

Link Website: https://eeb12.github.io/AJAX-PWEB/


    Pada tugas ke 7 ini, saya membuat aplikasi web yang menerapkan AJAX sederhana menggunakan XMLHttpRequest untuk menampilkan tampilan sesuai dengan yang dipilih oleh pengguna pada button.

    Asynchronous JavaScript and XMLHTTP, atau disingkat AJaX, adalah suatu teknik pemrograman berbasis web untuk menciptakan aplikasi web interaktif. Tujuannya adalah untuk memindahkan sebagian besar interaksi pada komputer web surfer, melakukan pertukaran data dengan server di belakang layar, sehingga halaman web tidak harus dibaca ulang secara keseluruhan setiap kali seorang pengguna melakukan perubahan. Hal ini akan meningkatkan interaktivitas, kecepatan, dan usability.



Tampilan Awal

tampilan pertama ketika membuka halaman


<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Tugas AJAX</title>
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg fixed-top">
<a class="navbar-brand mx-5" href="index.html" style="font-size: 2rem;">Tugas AJAX</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto mx-5">
<li class="nav-item active ml-4">
<a class="nav-link" href="tugas1.html"> Tugas 1 </a>
</li>
<li class="nav-item ml-4">
<a class="nav-link" href="tugas2.html"> Tugas 2 </a>
</li>
</ul>
</div>
</nav>
</header>
<main>
<div class="template_bg d-flex" style="height: 92.1vh;">
<div class="container align-self-center">
<div class="m-auto">
<div class="card text-center">
<h1>Website AJAX Sederhana</h1>
<p style="font-size: 1.5rem;">
Taqarra Rayhan Irfandianto <br> 05111940000121
</p>
</div>
</div>
</div>
</div>
</main>
<footer class="d-flex">
<div class="container text-center"><h5>Copyright &copy;Taqarra Rayhan</h4></div>
</footer>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>
view raw index.html hosted with ❤ by GitHub


Tampilan Memilih Fakultas dan Jurusan


<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<title>Tugas AJAX</title>
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg fixed-top">
<a class="navbar-brand mx-5" href="index.html" style="font-size: 2rem;">Tugas AJAX</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto mx-5">
<li class="nav-item active ml-4">
<a class="nav-link" href="tugas1.html"> Tugas 1 </a>
</li>
<li class="nav-item ml-4">
<a class="nav-link disabled" href="tugas2.html"> Tugas 2 </a>
</li>
</ul>
</div>
</nav>
</header>
<main>
<div class="template_bg d-flex" style="height: 92.1vh;">
<div class="container align-self-center">
<div class="m-auto">
<div class="card text-center">
<div class="row">
<h1 class="text-center">Faculty Filter</h1>
<div class="col">
<div class="form-group mb-2">
<h2>Faculty</h2>
<select class="form-select" name="fakultas" id="fakultas" onchange="getDept()">
<option value=""></option>
</select>
</div>
<div class="form-group mb-2">
<h2>Departement</h2>
<select class="form-select" name="departemen" id="departemen">
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="d-flex">
<div class="container text-center"><h5>Copyright &copy; Taqarra Rayhan 2021</h4></div>
</footer>
<!-- Optional JavaScript; choose one of the two! -->
<script src="script.js"></script>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>
view raw tugas 2.html hosted with ❤ by GitHub

Tampilan menampilkan ajax


<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<title>Tugas AJAX</title>
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg fixed-top">
<a class="navbar-brand mx-5" href="index.html" style="font-size: 2rem;">Tugas AJAX</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto mx-5">
<li class="nav-item active ml-4">
<a class="nav-link disabled" href="tugas1.html"> Tugas 1 </a>
</li>
<li class="nav-item ml-4">
<a class="nav-link" href="tugas2.html"> Tugas 2 </a>
</li>
</ul>
</div>
</nav>
</header>
<main>
<div class="template_bg d-flex" style="height: 92.1vh;">
<div class="container align-self-center">
<div class="m-auto">
<div class="card text-center">
<h1>Menampilkan teks AJAX</h1>
<div>
<button id="triggerButton" type="button" class="btn btn-light">Trigger</button>
</div>
</div>
<div class="card text-center mt-2 flex-column">
<div id="text-container" style="font-size: 1.25rem;"></div>
</div>
</div>
</div>
</div>
</main>
<footer class="d-flex">
<div class="container text-center"><h5>Copyright &copy; Taqarra Rayhan 2021</h4></div>
</footer>
<!-- Optional JavaScript; choose one of the two! -->
<script src="script.js"></script>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>
view raw tugas1.html hosted with ❤ by GitHub


Comments

Post a Comment

Popular posts from this blog

Login Boootstrap

Image
  TUGAS 6 : MEMBUAT FORM LOGIN DAN CONTACT US Nama : Taqarra Rayhan Irfandianto NRP : 05111940000121 Kelas : PWEB - B untuk source code dapat diliat pada link  Github  dan untuk halaman website dapat diliat pada  Web Login dan contact Berikut adalah tampilan dari halaman login dan contact
Read more

Tugas 3 RK D

Maneuvering Characteristics Augmentation System (MCAS) adalah sistem otomatis yang diproduksi oleh Boeing untuk menstabilkan pesawat. Sistem ini akan mencoba untuk mencounter pergerakan hidung pesawat yang cenderung keatas ketika beberapa manuver yang diakibatkan oleh besarnya ukuran mesin pesawat. Pergerakan ini dapat membahaakan pesawat karena berisiko membuat pesawat kehilangan daya angkat Cara Kerja Sistem MCAS akan menurunkan hidung pesawat dengan cara mengatur roda penyesuaian (trim) agar horizontal stabilizer (sayap kecil di ekor pesawat) berputar, membuat hidung pesawat turun. Sistem ini akan aktif saat: Angle of attack besar Autopilot off Flap (sirip tambahan di sayap) tidak menjulur keluar Berbelok terlalu tajam (miring).      MCAS akan menggerakkan horizontal stabilizer ke atas sebesar 0,27 derajat oer detik. Sudut terbesar yang bisa dibuat adalah 2,5 derajat yang membutuhkan waktu 9,26 detik. Sistem ini baru akan non-aktif saat angle of attack mengecil, a...
Read more
Image
Membuat Validasi Form Nama : Taqarra Rayhan Irfandianto NRP : 05111940000121 Kelas : PWEB - B Link Source Code : eeb12/PWEB-tugasJS Website : Website Form pendaftaran Pada kesempatan kali ini saya mendapatkan tugas untuk mengimplementasikan Javascript dan HTML dalam pembuatan validasi form. Berikut adalah tampilan websitenya :
Read more