Langsung ke konten utama

TUGAS 9 PWEB D

 PHP adalah singkatan dari Hypertext Preprocessor, yaitu bahasa pemrograman yang sebenarnya mirip dengan JavaScript dan Python. Perbedaannya adalah, PHP sering kali digunakan untuk komunikasi sisi server, sedangkan JavaScript bisa digunakan untuk frontend dan backend. Sementara itu, Python hanya untuk sisi server (backend).

 Berikut adalah source code :

index.html

<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pendaftaran SMAN 1 Ponorogo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="front-page">
<header>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href=".">
Pendaftaran Siswa Baru SMAN 1 Ponorogo
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item">
<a class="nav-link" href="daftar.html">Daftar Baru</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pendaftar.html">Lihat Pendaftar</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="row mb-4">
<div class="col-sm-12">
<div class="card text-center">
<div class="card-body">
<h4 class="card-title">Selamat datang</h4>
<h5 class="card-title">di website Pendaftaran Siswa Baru SMAN 1 Ponorogo</h5>
</div>
</div>
</div>
</div>
<div class="row text-center">
<div class="col-sm-6">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title"><strong>Daftar Baru</strong></h5>
<p class="card-text">Klik tombol di bawah<br>untuk melakukan pendaftaran siswa baru.</p>
<a href="daftar.html" class="btn btn-primary">Daftar</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title"><strong>Lihat Pendaftar</strong></h5>
<p class="card-text">Klik tombol di bawah<br>untuk melihat seluruh pendaftar.</p>
<a href="pendaftar.html" class="btn btn-primary">Lihat Pendaftar</a>
</div>
</div>
</div>
</div>
</main>
<footer class="text-muted">
<div class="container">
<p class="text-dark">
&copy; SMAN 1 Ponorogo 2021
</p>
</div>
</footer>
<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>
</body>
</html>

 register.html

<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pendaftaran Siswa - SMAN 1 Ponorogo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="form-daftar">
<header>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href=".">
Pendaftaran Siswa Baru SMAN 1 Ponorogo
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item">
<a class="nav-link active" href="daftar.html">Daftar Baru</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pendaftar.html">Lihat Pendaftar</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<form id="form-daftar">
<h2 class="h3 mb-3 fw-normal text-center">
Formulir Pendaftaran Siswa Baru<br>SMAN 1 Ponorogo
</h2>
<div class="form-floating mb-3">
<input type="text" class="form-control" name="nama" id="nama" placeholder="Nama lengkap Anda" required>
<label for="nama">Nama Lengkap</label>
</div>
<div class="row">
<div class="col-md-6">
<label for="jenis_kelamin">Jenis Kelamin</label>
<select class="form-select form-floating mb-3" name="jenis_kelamin" id="jenis_kelamin" required>
<option label="Pilih jenis kelamin" hidden></option>
<option value="L">Laki-Laki</option>
<option value="P">Perempuan</option>
</select>
</div>
<div class="col-md-6">
<label for="agama">Agama</label>
<select class="form-select form-floating mb-3" name="agama" id="agama" required>
<option label="Pilih agama" hidden></option>
<option value="Islam">Islam</option>
<option value="Kristen">Kristen</option>
<option value="Katolik">Katolik</option>
<option value="Hindu">Hindu</option>
<option value="Buddha">Buddha</option>
<option value="Khonghucu">Khonghucu</option>
</select>
</div>
</div>
<div class="form-floating mb-3">
<input type="text" class="form-control" name="sekolah_asal" id="sekolah_asal" placeholder="Sekolah asal Anda" required>
<label for="sekolah_asal">Sekolah Asal</label>
</div>
<div class="form-floating mb-3">
<textarea class="form-control" placeholder="Alamat Anda" name="alamat" id="alamat" style="height: 100px" required></textarea>
<label for="alamat">Alamat</label>
</div>
<button id="submit-btn" type="button" class="btn btn-primary w-100 pt-2 btn-block">Daftar</input>
</form>
</main>
<footer class="text-muted">
<div class="container">
<p class="text-dark">
&copy; SMAN 1 Ponorogo 2021
</p>
</div>
</footer>
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script type="text/javascript">
$('#submit-btn').on('click', () => {
var form = $('#form-daftar')[0];
var fd = new FormData(form);
let dataSiswa = {
nama: $('#nama').val(),
jenis_kelamin: $('#jenis_kelamin').val(),
agama: $('#agama').val(),
sekolah_asal: $('#sekolah_asal').val(),
alamat: $('#alamat').val(),
}
let flag = false;
if(!dataSiswa.nama.length ||
!dataSiswa.jenis_kelamin.length ||
!dataSiswa.agama.length ||
!dataSiswa.sekolah_asal.length ||
!dataSiswa.alamat.length) flag = true
if(!flag){
fd.append('nama', dataSiswa.nama);
fd.append('jenis_kelamin', dataSiswa.jenis_kelamin);
fd.append('agama', dataSiswa.agama);
fd.append('sekolah_asal', dataSiswa.sekolah_asal);
fd.append('alamat', dataSiswa.alamat);
$.ajax({
type: 'POST',
enctype: 'multipart/form-data',
processData: false,
contentType: false,
url: "php/create_daftar.php",
data: fd,
success: function(resultData) {
Swal.fire({
icon: 'success',
title: 'Pendaftaran berhasil',
text: 'Data Anda berhasil terkirim',
heightAuto: false
})
form.reset();
}
});
}else{
Swal.fire({
icon: 'error',
title: 'Terjadi kesalahan',
text: 'Periksa kembali data yang Anda masukkan',
heightAuto: false
});
}
});
</script>
</body>
</html>

 register2.html

<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pendaftar - SMAN 1 Ponorogo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="lihat-pendaftar">
<header>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href=".">
Pendaftaran Siswa Baru SMAN 1 Ponorogo
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item">
<a class="nav-link" href="daftar.html">Daftar Baru</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="pendaftar.html">Lihat Pendaftar</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row mb-3">
<div class="col-sm-6">
<h2>Siswa yang sudah mendaftar</h2>
</div>
<div class="col-sm-6 float-end">
<a href="daftar.html" class="btn btn-primary mb-2 float-end">Daftar baru</a>
</div>
</div>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">No</th>
<th scope="col">Nama</th>
<th scope="col">Alamat</th>
<th scope="col">Jenis Kelamin</th>
<th scope="col">Agama</th>
<th scope="col">Sekolah Asal</th>
<th scope="col">Aksi</th>
</tr>
</thead>
<tbody id="listSiswa">
</tbody>
</table>
</div>
</div>
</div>
<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="editModalLabel">Edit Data Pendaftar</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form id="form-edit">
<div class="modal-body">
<div class="form-floating mb-3">
<input type="text" class="form-control" name="nama" id="nama" placeholder="Nama lengkap Anda" required>
<label for="nama">Nama Lengkap</label>
</div>
<div class="row">
<div class="col-md-6">
<label for="jenis_kelamin">Jenis Kelamin</label>
<select class="form-select form-floating mb-3" name="jenis_kelamin" id="jenis_kelamin" required>
<option label="Pilih jenis kelamin" hidden></option>
<option value="L">Laki-Laki</option>
<option value="P">Perempuan</option>
</select>
</div>
<div class="col-md-6">
<label for="agama">Agama</label>
<select class="form-select form-floating mb-3" name="agama" id="agama" required>
<option label="Pilih agama" hidden></option>
<option value="Islam">Islam</option>
<option value="Kristen">Kristen</option>
<option value="Katolik">Katolik</option>
<option value="Hindu">Hindu</option>
<option value="Buddha">Buddha</option>
<option value="Khonghucu">Khonghucu</option>
</select>
</div>
</div>
<div class="form-floating mb-3">
<input type="text" class="form-control" name="sekolah_asal" id="sekolah_asal" placeholder="Sekolah asal Anda" required>
<label for="sekolah_asal">Sekolah Asal</label>
</div>
<div class="form-floating mb-3">
<textarea class="form-control" placeholder="Alamat Anda" name="alamat" id="alamat" style="height: 100px" required></textarea>
<label for="alamat">Alamat</label>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
<button type="button" class="btn btn-primary" id="edit-btn">Simpan</button>
</div>
</form>
</div>
</div>
</div>
<footer class="text-muted text-center">
<div class="container">
<p class="text-dark">
&copy; SMAN 1 Ponorogo 2021
</p>
</div>
</footer>
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
$(document).ready( () =>{
$.ajax({
type: 'GET',
url: "php/read_list.php",
success: function(resultData) {
// console.log(resultData)
resultData.split("\n").forEach(element => {
if(element){
let data = JSON.parse(element);
if(!data) return;
$('#listSiswa').append(`
<tr>
<td>${data.id}</td>
<td>${data.nama}</td>
<td>${data.alamat}</td>
<td>${data.jenis_kelamin}</td>
<td>${data.agama}</td>
<td>${data.sekolah_asal}</td>
<td>
<button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#editModal" onclick="getDataSiswa(${data.id})">Edit</button>&nbsp;
<button class="btn btn-danger btn-sm" onclick="deleteDataSiswa(${data.id})">Hapus</button>
</td>
</tr>
`)
}
});
}
});
});
const getDataSiswa = (id => {
$.ajax({
type: 'GET',
url: "php/read_data_siswa.php?id=" + id,
success: function(resultData) {
let data = JSON.parse(resultData);
$('#edit-btn').data('id', id);
$('#nama').val(data.nama);
$('#jenis_kelamin option[value='+data.jenis_kelamin+']').attr('selected','selected');
$('#agama option[value='+data.agama+']').attr('selected','selected');
$('#sekolah_asal').val(data.sekolah_asal);
$('#alamat').val(data.alamat);
}
});
});
$('#edit-btn').on('click', () => {
let dataSiswa = {
id: $('#edit-btn').data('id'),
nama: $('#nama').val(),
jenis_kelamin: $('#jenis_kelamin').val(),
agama: $('#agama').val(),
sekolah_asal: $('#sekolah_asal').val(),
alamat: $('#alamat').val(),
}
let flag = false;
if(!dataSiswa.nama.length ||
!dataSiswa.jenis_kelamin.length ||
!dataSiswa.agama.length ||
!dataSiswa.sekolah_asal.length ||
!dataSiswa.alamat.length) flag = true
if(!flag){
$.ajax({
type: 'POST',
url: "php/update.php",
data: dataSiswa,
success: function(resultData) {
Swal.fire({
icon: 'success',
title: 'Edit data berhasil',
text: 'Data Anda berhasil diperbarui',
heightAuto: false
}).then((result) => {
if (result.isConfirmed) {
location.reload();
}
})
}
});
}else{
Swal.fire({
icon: 'error',
title: 'Terjadi kesalahan',
text: 'Periksa kembali data yang Anda masukkan',
heightAuto: false
});
}
});
const deleteDataSiswa = (id => {
Swal.fire({
title: 'Apakah Anda yakin akan menghapus data pendaftaran?',
text: "Tindakan ini tidak bisa dibatalkan.",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#dc3545',
cancelButtonColor: '#0d6efd',
confirmButtonText: 'Hapus',
cancelButtonText: 'Batal',
reverseButtons: true
}).then((result) => {
if (result.isConfirmed) {
$.ajax({
type: 'GET',
url: "php/delete.php?id=" + id,
success: function(resultData) {
Swal.fire({
icon: 'success',
title: 'Hapus data berhasil',
text: 'Data Anda berhasil dihapus',
heightAuto: false
}).then((result) => {
if (result.isConfirmed) {
location.reload();
}
})
}
});
}
})
});
</script>
</body>
</html>

style.css

html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.front-page, .form-daftar{
width: 100%;
max-width: 1000px;
padding: 15px;
margin: 2rem auto;
}
.lihat-pendaftar {
width: 100%;
padding: 15px;
margin: 2rem auto;
}
.swal2-container{
z-index: 100000;
}
.swal2-popup{
z-index: 99995;

}

 

config.php

<?php
$server = "localhost";
$user = "id18158808_pendaftar";
$password = "ya%{NO6<LAJB/iJW";
$nama_database = "id18158808_pendaftar_db";
$db = mysqli_connect($server, $user, $password, $nama_database);
if (!$db) {
die("Gagal terhubung dengan database: " . mysqli_connect_error());
}

 createRegister.php

<?php
include("config.php");
if($_SERVER['REQUEST_METHOD'] == 'POST'){
$nama = str_replace("'", "\'", $_POST['nama']);
$jenis_kelamin = str_replace("'", "\'", $_POST['jenis_kelamin']);
$agama = str_replace("'", "\'", $_POST['agama']);
$sekolah_asal = str_replace("'", "\'", $_POST['sekolah_asal']);
$alamat = str_replace("'", "\'", $_POST['alamat']);
$sql = "INSERT INTO calon_siswa (nama, jenis_kelamin, agama, sekolah_asal, alamat)
VALUE ('$nama', '$jenis_kelamin', '$agama', '$sekolah_asal', '$alamat')";
$query = mysqli_query($db, $sql);
if ($query) {
die(json_encode([
"error" => 0,
"status" => "OK"
]));
} else {
die(json_encode([
"error" => 500,
"status" => "Internal Server Error"
]));
}
}else{
die("Method not allowed");
}

readData.php

<?php
include("config.php");
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: *");
header("Access-Control-Allow-Methods: *");
if($_SERVER['REQUEST_METHOD'] == 'GET'){
$id = str_replace("'", "\'", $_GET['id']);
$sql = "SELECT * FROM calon_siswa WHERE id = $id";
$query = mysqli_query($db, $sql);
while ($siswa = mysqli_fetch_array($query)) {
echo json_encode([
"id" => $siswa["id"],
"nama" => $siswa["nama"],
"jenis_kelamin" => $siswa["jenis_kelamin"],
"agama" => $siswa["agama"],
"sekolah_asal" => $siswa["sekolah_asal"],
"alamat" => $siswa["alamat"],
]);
echo "\n";
break;
}
}else{
die("Method not allowed");

} 

deleteData.php

<?php
include("config.php");
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: *");
header("Access-Control-Allow-Methods: *");
if($_SERVER['REQUEST_METHOD'] == 'GET'){
$id = str_replace("'", "\'", $_GET['id']);
$sql = "DELETE FROM calon_siswa
WHERE id=$id";
$query = mysqli_query($db, $sql);
if ($query) {
die(json_encode([
"error" => 0,
"status" => "OK"
]));
} else {
die(json_encode([
"error" => 500,
"status" => "Internal Server Error"
]));
}
}else{
die("Method not allowed");
}

 updateData.php

<?php
include("config.php");
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: *");
header("Access-Control-Allow-Methods: *");
if($_SERVER['REQUEST_METHOD'] == 'POST'){
$id = str_replace("'", "\'", $_POST['id']);
$nama = str_replace("'", "\'", $_POST['nama']);
$jenis_kelamin = str_replace("'", "\'", $_POST['jenis_kelamin']);
$agama = str_replace("'", "\'", $_POST['agama']);
$sekolah_asal = str_replace("'", "\'", $_POST['sekolah_asal']);
$alamat = str_replace("'", "\'", $_POST['alamat']);
$sql = "UPDATE calon_siswa
SET nama='$nama', jenis_kelamin='$jenis_kelamin', agama='$agama', sekolah_asal='$sekolah_asal', alamat='$alamat'
WHERE id=$id";
$query = mysqli_query($db, $sql);
if ($query) {
die(json_encode([
"error" => 0,
"status" => "OK"
]));
} else {
die(json_encode([
"error" => 500,
"status" => "Internal Server Error"
]));
}
}else{
die("Method not allowed");

}

 

 Sekian artikel pada kesempatan kali sampai jumpa di artikel selanjutnya, terimakasih. 

 

Komentar

Postingan populer dari blog ini

FP Pemrograman Berorientasi Objek A

Game Java Tebak Gambar Kami dari kelompok FP PBO kelas A yang beranggotakan : Junaedi Akbar  05111940000041 Ifanu Antoni 05111940000064 Pada kesempatan kali ini kami akan menjelaskan mengenai game Tebak Gambar yang telah kita buat menggunakan permrograman Java. Dalam game ini nantinya pengguna akan diberi 2 pasang gambar di setiap stagenya lalu pengguna harus menebak kata apa yang sesuai dengan gambar yang telah diperlihatkan. Agar lanjut ke stage berikutnya pengguna harus menebak dengan tepat kata apa yang sesuai dengan jawaban.  Untuk mengakses game Tebak Gambar ini bisa mengunjungi : http://bit.ly/3bsyGqw Diagram class Dalam pembuatan, Game ini menggunakan 3 jenis class yaitu : Class Start : start.java berfungsi untuk menampilkan halaman awal, yang nantinya user diminta untuk menginputkan nama pemain dan sebuah tombol untuk melanjutkan ke pertanyaan pertama Class Soal: gambar1.java,gambar2.java dst.... berisi tampilan 2 buah gambar dan sebuah kolom input untuk mengisikan jawaban. Da

Tugas 6 PWEB D

Login page dan Contact Me      Pada kesempatan kali ini saya akan membagikan artikel mengenai pembuatan login page dan contact me dengan menggunakan bantuan bootsrap.      login page dan contact me menggunakan bahasa pemrograman html dan css dan js. berikut adalah tampilannya.                       Login page & Contact Me Berikut adalah link aksesnya : https://ianm27.github.io/login-contact_me/ Source Code Berikut adalah source code dari login page dan contact me HTML <! DOCTYPE html > < html > < head > < meta charset = "utf-8" /> < meta name = "viewport" content = "width=device-width, initial-scale=1" /> < link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" /> < link rel = "stylesheet" href = "https://unpkg.com/aos@2.3.1/dist/aos.css" /> < link rel = "stylesheet" href =