Skip to main content

EAS MPPL - Demo dan Dokumentasi EAS

 EAS MPPL 2021 Pada kesempatan ini kelompok kami akan menjelaskan salah satu produk perangkat lunak milik Zoho yaitu Zoho Marketing Automation yang dikerjakan secara berkelompok yang beranggotakan: Ricky Supriyanto 05111940000036 Arvel Gavrilla R 05111940000040 M Arif Faizin 05111940000060 Zulfiqar Fauzul Akbar 05111940000101 Raihan Alifianto 05111940000213 Dengan hasil sebagai berikut 1. Deskripsi Produk 2. Manajemen Ruang Lingkup 3. Manajemen Waktu 4. Manajemen Biaya 5. Manajemen Resiko 6. Video demo
Post a Comment

Tugas 7 PWEB - Menggunakan AJAX


Pada postingan kali ini, saya akan mencoba menggunakan Ajax dalam sebuah halaman. Ada 2 contoh yang akan saya jelaskan, yang pertama menjelaskan contoh aplikasi AJAX, dan yang kedua menjelaskan aplikasi AJAX di filter alamat-daerah. Oke langsung saja untuk penjelasannya.

Yang pertama adalah contoh aplikasi halaman yang menggunakan AJAX untuk mengubah konten dari halaman tanpa melakukan reload atau berpindah halaman.

Dalam contoh ini, diperlukan dua file untuk mensimulasikannya, file index.html sebagai halaman utama, dan file data-ajax.html sebagai isi dari data yang akan diload.

Kemudian masukkan kode berikut ke file index.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>Request File dengan Ajax</title>
<script language="javascript">
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHttp");
}
function getdata(url, divhasil) {
if (XMLHttpRequestObject) {
const obj = document.getElementById(divhasil);
XMLHttpRequestObject.open("GET", url);
XMLHttpRequestObject.onreadystatechange = () => {
if (XMLHttpRequestObject.readyState === 1) {
obj.innerHTML = "Loading";
}
if (XMLHttpRequestObject.readyState === 4) {
if (XMLHttpRequestObject.status === 200) {
obj.innerHTML = XMLHttpRequestObject.responseText;
} else {
obj.innerHTML = XMLHttpRequestObject.statusText;
}
}
}
XMLHttpRequestObject.send(null);
}
}
</script>
</head>
<body
style="display: flex; flex-direction: column; width: 100vw; height: 100vh; text-align: center; justify-content: center; font-family: Arial, Helvetica, sans-serif;">
<h1>Mengambil data menggunakan AJAX</h1>
<form>
<input type="button" value="Tampilkan Data" onclick="getdata('data-ajax.html','divhasil')">
</form>
<div id="divhasil">
Hasil data yang diambil AJAX akan ditampilkan disini
</div>
</body>
</html>
view raw index.html hosted with ❤ by GitHub

Dan kode berikut ke file data-ajax.html

Text ini diambil dengan <strong>Ajax</strong>
view raw data-ajax.html hosted with ❤ by GitHub
Setelah itu kemudian jalankan halaman, dan ketika menekan tombol Tampilkan Data, maka tulisan di bawahnya akan berubah mengikut isi file dari data-ajax.html

Selain itu, ketika file tujuan tidak tersedia atau error, maka juga menampilkan pesan error dari requestnya

Yang kedua adalah contoh penerapan dari AJAX dalam filter alamat-daerah dalam kolom pencarian. 

Langkah pertama yang harus dilakukan adalah menginputkan file berikut ke dalam database MySQL.

Kemudian isikan kode berikut untuk masing-masing file

koneksi.php

<?php
define('HOST','localhost');
define('USER','root');
define('PASS','');
define('DB1', 'ajax');
// Buat Koneksinya
$db1 = new mysqli(HOST, USER, PASS, DB1);
?>
view raw koneksi.php hosted with ❤ by GitHub

index.php

<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>Menggunakan AJAX dalam Filter</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<nav class="navbar navbar-dark bg-primary fixed-top">
<a class="navbar-brand" href="index.php" style="color: #fff;">
Dewan Komputer
</a>
</nav>
<div class="container mb-5">
<h2 align="center" style="margin: 60px 10px 10px 10px;">Dewan Demo Combobox Bertingkat Daerah Indonesia</h2><hr>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>Provinsi</label>
<select class="form-control" name="provinsi" id="provinsi">
<option value=""> Pilih Provinsi</option>
</select>
</div>
<div class="form-group">
<label>Kabupaten</label>
<select class="form-control" name="kabupaten" id="kabupaten">
<option value=""></option>
</select>
</div>
<div class="form-group">
<label>Kecamatan</label>
<select class="form-control" name="kecamatan" id="kecamatan">
<option value=""></option>
</select>
</div>
<div class="form-group">
<label>Kelurahan</label>
<select class="form-control" name="kelurahan" id="kelurahan">
<option value=""></option>
</select>
</div>
</div>
</div>
<hr>
</div>
<div class="navbar bg-dark fixed-bottom">
<div style="color: #fff;">© <?php echo date('Y'); ?> Copyright:
<a href="https://dewankomputer.com/"> Dewan Komputer</a>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
type: 'POST',
url: "get_provinsi.php",
cache: false,
success: function(msg){
$("#provinsi").html(msg);
}
});
$("#provinsi").change(function(){
var provinsi = $("#provinsi").val();
$.ajax({
type: 'POST',
url: "get_kabupaten.php",
data: {provinsi: provinsi},
cache: false,
success: function(msg){
$("#kabupaten").html(msg);
}
});
});
$("#kabupaten").change(function(){
var kabupaten = $("#kabupaten").val();
$.ajax({
type: 'POST',
url: "get_kecamatan.php",
data: {kabupaten: kabupaten},
cache: false,
success: function(msg){
$("#kecamatan").html(msg);
}
});
});
$("#kecamatan").change(function(){
var kecamatan = $("#kecamatan").val();
$.ajax({
type: 'POST',
url: "get_kelurahan.php",
data: {kecamatan: kecamatan},
cache: false,
success: function(msg){
$("#kelurahan").html(msg);
}
});
});
});
</script>
</body>
</html>
view raw index.php hosted with ❤ by GitHub

get_provinsi.php

<?php
include 'koneksi.php';
echo "<option value=''>Pilih Provinsi</option>";
$query = "SELECT * FROM provinsi ORDER BY nama ASC";
$dewan1 = $db1->prepare($query);
$dewan1->execute();
$res1 = $dewan1->get_result();
while ($row = $res1->fetch_assoc()) {
echo "<option value='" . $row['id_prov'] . "'>" . $row['nama'] . "</option>";
}
?>
view raw get_provinsi.php hosted with ❤ by GitHub

get_kabupaten.php

<?php
include 'koneksi.php';
$provinsi = $_POST['provinsi'];
echo "<option value=''>Pilih Kabupaten</option>";
$query = "SELECT * FROM kabupaten WHERE id_prov=? ORDER BY nama ASC";
$dewan1 = $db1->prepare($query);
$dewan1->bind_param("i", $provinsi);
$dewan1->execute();
$res1 = $dewan1->get_result();
while ($row = $res1->fetch_assoc()) {
echo "<option value='" . $row['id_kab'] . "'>" . $row['nama'] . "</option>";
}
?>
view raw get_kabupaten.php hosted with ❤ by GitHub

get_kecamatan.php

<?php
include 'koneksi.php';
$kabupaten = $_POST['kabupaten'];
echo "<option value=''>Pilih Kecamatan</option>";
$query = "SELECT * FROM kecamatan WHERE id_kab=? ORDER BY nama ASC";
$dewan1 = $db1->prepare($query);
$dewan1->bind_param("i", $kabupaten);
$dewan1->execute();
$res1 = $dewan1->get_result();
while ($row = $res1->fetch_assoc()) {
echo "<option value='" . $row['id_kec'] . "'>" . $row['nama'] . "</option>";
}
?>
view raw get_kecamatan.php hosted with ❤ by GitHub

get_kelurahan.php

<?php
include 'koneksi.php';
$kecamatan = $_POST['kecamatan'];
echo "<option value=''>Pilih Kelurahan</option>";
$query = "SELECT * FROM kelurahan WHERE id_kec=? ORDER BY nama ASC";
$dewan1 = $db1->prepare($query);
$dewan1->bind_param("i", $kecamatan);
$dewan1->execute();
$res1 = $dewan1->get_result();
while ($row = $res1->fetch_assoc()) {
echo "<option value='" . $row['id_kel'] . "'>" . $row['nama'] . "</option>";
}
?>
view raw get_kelurahan.php hosted with ❤ by GitHub

Lalu, jalankan halaman dengan menggunakan XAMPP, maka hasilnya akan seperti berikut


 Sekian postingan kali ini, semoga bermanfaat



Comments

Post a Comment

Popular posts from this blog

Tugas 1 PBKK - Portofolio Aplikasi Framework

Berikut beberapa aplikasi yang pernah dibuat menggunakan bantuan framework : Kulturan Link Website Kulturan merupakan aplikasi berbasis website yang dapat digunakan oleh pekerja seni, drama, dan tari untuk mempromosikan serta memperjualbelikan karyanya secara online. Pengguna dapat membeli hasil karya pekerja seni berupa hasil pementasan atau pertunjukkan seniman di Indonesia. Framework : ReactJS, ExpressJS, Node.js dan Material UI Screenshot tampilan :  Medify.id Link Website Medify.id merupakan salah satu aplikasi berbasis website yang merupakan website dari perusahaan Medify. Website ini menyediakan informasi-informasi penting serta fitur-fitur yang ditawarkan oleh Medify. Framework : Bootstrap, Laravel 8 Screenshot tampilan : Presto Link Website Presto merupakan aplikasi berbasis website yang berisi daftar restoran terdekat beserta detailnya. Dalam website ini, pengguna juga bisa berkomentar di masing-masing restoran, dan juga menambahkan restoran ke dalam daftar favoritnya. Fr...
Post a Comment
Read more

EAS PWEB - Pemrograman Web

  Pada postingan ini, saya akan menjelaskan hasil pengerjaan EAS yang telah saya kerjakan   Dan berikut adalah hasil desain rancangan prototipe dari aplikasi yang akan dibuat
Post a Comment
Read more

Tugas 9 PBKK - Laravel : Membuat Landing Page

Pada postingan kali ini, akan membahas membuat landing page menggunakan Laravel 8. Pada postingan ini saya akan mencoba membuat Landing Page dari Dicoding Indonesia ( dicoding.com ) dengan tampilan yang berbeda. Langsung saja ikuti langkah-langkah berikut: Pertama, buat sebuah view baru pada resources/views/ dengan nama homepage.blade.php lalu isi dengan kode berikut: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 <!DOCTYPE html> <html lang= "{{ str_replace('_', '-', app()->getLocale()) }}" > <head> <meta charset= "utf-8" > <meta name= "viewport" content= "width=device-width, initial-scale=1" > <title> Dicoding - Bangun Karirmu sebagai Developer Profesional </title> <!-- Fonts --> <link href= "https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" r...
Post a Comment
Read more