ETS Pemrograman WEB E
Nama : Moh. Rizky Rahmadian Makkani
NRP : 5025231035
Kelas : PWEB E
ETS PWEB E
1. Apa yang dimaksud dengan domain dan hosting dalam konteks aplikasi web? berikan contoh bagaimana keduanya berfungsi bersama.
Domain adalah alamat unik dari website yang menggantikan IP, contoh dari domain adalah google.com. Sedangakn Hosting adalah tempat dimana file dan data dari website disimpan.
Bagaimana keduanya bekerja adalah ketika kita ingin melakukan deploy untuk web kita, semisal dengan nama tokosaya.com, maka kita memerlukan penyewaan layanan hosting seperti hostinger untuk melakukannya. Sehingga ketika seseorang mengetikkan tokosaya.com di browser, maka akan ditujukan menuju website kita yang telah dideploy sebelumnya.
2. Apa peran DNS dalam arsitektur aplikasi web dan bagaimana prosses resolusi nama domain bekerja?
DNS bisa dikatakan sebagai "buku kontak" dari internet. karena sulit untuk menghafalkan angka dari alamat IP, dibuatalah DNS untuk mempermuadah kita mgnhafalnya, sevagai contoh google.com. Untuk prosesenya, ketika kita memasukkan nama domain, maka OS akan mencari IP yang cocok dengan domain yang kita cari di dalam cache browser, jika tidak ditemukan maka akan mencarinya ke DNS server, dan ketika telah ditemukan alamat IP dikirimkan menuju browser kita dan dengan IP tersebut kita dapat mengakses website dan data-datanya.
3. Seorang klien ingin anda membuat formulir kontak yang mengumpulkan nama, email, nomor telepon, dana pesan. selain itu, formulir harus memiliki validasi untuk memastikan bahwa semua bidan diisi dan email diisi dalam format yang benar. Buatlah sturuktur HTML untuk formulir ini dan tambhakan Javascript untuk melakukan validasi.
Code index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Document</title>
</head>
<body>
<form>
<div class="container">
<h1>Contact Us</h1>
<p>Please fill in this form to contact us.</p>
<hr>
<label for="name"><b>Name</b></label>
<input type="text" placeholder="Enter Name" name="name" id="name" required>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" id="email" required>
<label for="phone"><b>Phone Number</b></label>
<input type="text" placeholder="Enter Phone Number" name="phone" id="phone" required>
<label for="message"><b>Message</b></label>
<input type="text" placeholder="Enter Message" name="message" id="message" required>
<button type="send" class="registerbtn">Send</button>
</div>
</form>
</body>
<script src="js/validation.js"></script>
</html>
* {box-sizing: border-box}
.container {
padding: 16px;
}
input[type=text], input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
input[type=text]:focus, input[type=password]:focus {
background-color: #ddd;
outline: none;
}
hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
.registerbtn {
background-color: #04AA6D;
color: white;
padding: 16px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
.registerbtn:hover {
opacity:1;
}
a {
color: dodgerblue;
}
.signin {
background-color: #f1f1f1;
text-align: center;
}
Code Validation.js :
document.querySelector('form').onsubmit = function(event) {
var name = document.getElementById('name').value;
var email = document.getElementById('email').value;
var phone = document.getElementById('phone').value;
var message = document.getElementById('message').value;
if (!name || !email || !phone || !message) {
alert('All fields are required!');
event.preventDefault();
return false;
}
var emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
if (!emailPattern.test(email)) {
alert('Please enter a valid email address!');
event.preventDefault();
return false;
}
var phonePattern = /^[0-9]+$/;
if (!phonePattern.test(phone)) {
alert('Please enter a valid phone number (digits only)!');
event.preventDefault();
return false;
}
};
4.Desainlah dan implementasikan halaman detail berita yang menampilkan konten lengkap sebuah berita. Halaman mencakup:
- Judul berita
- Gambar utama
- Tanggal publikasi
- Konten berita
- Tombol untuk kembali ke daftar berita
Home Page :
Code home.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page</title>
<link rel="stylesheet" type="text/css" href="css/home.css">
</head>
<body>
<div class="navigation">
<nav>
<h1>Rizzz News</h1>
<ul>
<li>
<a href="home.html"><b>Home</b></a>
</li>
<li>
<a href="#about"><b>About</b></a>
</li>
<li>
<a href="#news"><b>News</b></a>
</li>
</ul>
</nav>
</div>
<div class="container">
<div class="main">
<div class="content">
<div class="contentimage">
<img src="src\Berita.jpg" width="120px">
</div>
<div class="contenttext">
<h2><a href="index.html"><b>Gold Medals Surge in Gemastik XVII 2024</b></a></h2>
<p>The ITS contingent after attending the medal award night at Gemastik XVII 2024 at Semarang State University (Unnes)</p>
</div>
</div>
<div class="content">
<div class="contentimage">
<img src="src\Berita.jpg" width="120px">
</div>
<div class="contenttext">
<h2><a href="#"><b>Pekan ETS ITS</b></a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit and consequ sit amet, consectetur adip sapien </p>
</div>
</div>
<div class="content">
<div class="contentimage">
<img src="src\Berita.jpg" width="120px">
</div>
<div class="contenttext">
<h2><a href="#"><b>Pekan ETS ITS</b></a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit and consequ sit amet, consectetur adip sapien </p>
</div>
</div>
<div class="content">
<div class="contentimage">
<img src="src\Berita.jpg" width="120px">
</div>
<div class="contenttext">
<h2><a href="#"><b>Pekan ETS ITS</b></a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit and consequ sit amet, consectetur adip sapien </p>
</div>
</div>
</div>
<div class="sidemenu">
<div class="sidebar">
<h2>Popular News</h2>
<ul>
<li><a href="#"><b>Gemastik ITS</b></a></li>
<li><a href="#"><b>Pekan ETS ITS</b></a></li>
<li><a href="#"><b>Lorem ipsum</b></a></li>
<li><a href="#"><b>Lorem ipsum</b></a></li>
</ul>
</div>
<div class="contacts">
<h2>Contact Us</h2>
<ul>
<li>WA : <a href="#">wa.me/628123456789</a></li>
<li>Instagram :<a href="#">@abcde</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Code home.css :
* {
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
background-color: #E8DDBF;
margin: 0;
height: 100%;
justify-content: center; /* Centers horizontally */
align-items: center; /* Centers vertically */
}
nav {
display: flex;
justify-content: space-evenly;
background-color: #412F21;
padding: 10px;
font-family: sans-serif;
align-items: center;
opacity: 60%;
}
nav h1{
margin-right: 20%;
color: #e0dbd8;
}
nav ul {
display: flex;
justify-content: space-between;
list-style: none;
margin-left: 25%;
margin-right: 10%;
}
nav li {
margin-left: 30px;
}
nav a {
text-decoration: none;
color: #e0dbd8;
}
nav a:hover,
td a:hover{
text-decoration: none;
color:#E8DDBF;
border-bottom: 2px solid white;
}
.container {
display: flex;
}
.main{
max-width: 800px;
/* margin: 30px auto; */
margin: 30px 0px 30px 200px;
background-color: white;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.sidemenu {
height: 100vh;
width: 20%;
text-align: center;
display: flex;
/* justify-content: center; */
align-items: center;
flex-direction: column;
}
.content{
text-align: left;
align-items: center;
margin-left: 5%;
margin-top: 5%;
display:flex
}
.contenttext {
margin-left: 20px;
margin-right: 100px;
/* border: 2px solid black; */
}
.sidebar, .contacts {
justify-content: space-between;
list-style: none;
margin-top: 10%;
margin-left: 15%;
margin-bottom: 15%;
/* border: 2px solid black; */
}
.sidebar ul {
list-style: none;
}
.sidebar li,
.sidebar a, .contacts a {
/* border: 1px solid black; */
font-size: 17px;
margin: 10px;
text-decoration: none;
color: #513423;
}
.sidebar a:hover, .contacts a:hover{
border-bottom: 2px solid rgba(129, 41, 41, 0.804);
}
.contacts li{
list-style: none;
text-align: center;
margin: 10px;
font-weight: bold;
}
Detail Berita :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gemastik ITS</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="navigation">
<nav>
<h1>Rizzz News</h1>
<ul>
<li>
<a href="home.html"><b>Home</b></a>
</li>
<li>
<a href="#about"><b>About</b></a>
</li>
<li>
<a href="#news"><b>News</b></a>
</li>
</ul>
</nav>
</div>
<div class="container">
<div class="news-container">
<h1 class="news-title">ITS Gold Medals Surge in Gemastik XVII 2024</h1>
<p class="news-date">October 23, 2024</p>
<img src="src\Berita.jpg" alt="Gambar Berita" class="news-image">
<div class="news-content">
<p>
The ITS contingent after attending the medal award night at Gemastik XVII 2024 at Semarang State University (Unnes)
</p>
<p>
ITS Campus, ITS News – Demonstrating its growing excellence in the field of information technology, Institut Teknologi Sepuluh Nopember (ITS) secured four gold medals at the 2024 National Student Competition in Information and Communication Technology (Gemastik XVII) held at Universitas Negeri Semarang (Unnes). This remarkable achievement propelled ITS to second place overall, as announced during the closing ceremony of Gemastik XVII on Wednesday night (26/9).
</p>
<p>
Yogantara S. Dharmawan, S.Kom., M.BusProcessMgt, the coordinator of ITS’ Gemastik 2024 team, expressed that ITS’ accomplishments in this event significantly improved compared to the previous year, with the university collecting a total of eight medals. “Additionally, we won two Best Paper awards from two competition divisions, a significant leap from our previous achievements,” he proudly stated.
</p>
<p>
In particular, ITS clinched four gold medals across several divisions. These include the Memory Reboot team in the Embedded Systems & IoT Division, the Timses Aities team in the User Experience Design Division, the Go Gangster team in the Smart City Division, and the We Can team in the ICT Paper Writing Division. Moreover, both the Memory Reboot and Timses Aities teams also earned Best Paper awards in their respective divisions.
</p>
<p>
Additionally, two ITS teams secured bronze medals: the Frequency Freaks team from the Smart City Division and the Pixel team from the User Experience Design Division. In the Cybersecurity and Embedded Systems & IoT Divisions, the ITS teams HCS Kos0ng Fans Club and Sambel Telur respectively won the title of Honorable Mention.
</p>
<p>
Commenting on this achievement, the ITS Information Systems Department lecturer expressed immense pride. He highlighted that ITS’ success at Gemastik XVII 2024 was not an instant outcome, but rather the result of the concerted efforts and support of the entire ITS academic community.
</p>
<p>
Looking ahead, Yoga emphasized that the ITS academic community must continue to foster enthusiasm and passion for the development of information and communication technology (ICT) in Indonesia. “This year has seen an increased enthusiasm from students to participate in the competition,” he remarked.
</p>
<p>
In closing, Yoga extended his appreciation to the entire ITS academic community for this outstanding achievement. The Queensland University of Technology, Australia alumnus expressed hope that ITS will continue to maintain its impressive performance in the future. “Keep up the spirit and continue working together to uphold the honorable name of our alma mater, ITS,” he concluded optimistically. (ITS Public Relations)
</p>
</div>
<a href="home.html" class="back-button">Back to News List</a>
</div>
<div class="sidemenu">
<div class="sidebar">
<h2>Popular News</h2>
<ul>
<li><a href="#"><b>Gemastik ITS</b></a></li>
<li><a href="#"><b>Pekan ETS ITS</b></a></li>
<li><a href="#"><b>Lorem ipsum</b></a></li>
<li><a href="#"><b>Lorem ipsum</b></a></li>
</ul>
</div>
<div class="contacts">
<h2>Contact Us</h2>
<ul>
<li>WA : <a href="#">wa.me/628123456789</a></li>
<li>Instagram :<a href="#">@abcde</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Code style.css :
* {
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
background-color: #E8DDBF;
margin: 0;
padding: 0;
}
nav {
display: flex;
justify-content: space-evenly;
background-color: #412F21;
padding: 10px;
font-family: sans-serif;
align-items: center;
opacity: 60%;
}
nav h1{
margin-right: 20%;
color: #e0dbd8;
}
nav ul {
display: flex;
justify-content: space-between;
list-style: none;
margin-left: 25%;
margin-right: 10%;
}
nav li {
margin-left: 30px;
}
nav a {
text-decoration: none;
color: #e0dbd8;
}
nav a:hover,
td a:hover{
text-decoration: none;
color:#E8DDBF;
border-bottom: 2px solid white;
}
.container {
display: flex;
}
.news-container {
max-width: 800px;
/* margin: 30px auto; */
margin: 30px 0px 30px 200px;
background-color: white;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.news-title {
font-size: 28px;
font-weight: bold;
margin-bottom: 10px;
}
.news-date {
color: gray;
font-size: 14px;
margin-bottom: 20px;
}
.news-image {
width: 100%;
height: auto;
margin-bottom: 20px;
}
.news-content {
font-size: 13px;
line-height: 1.6;
margin-bottom: 30px;
text-align: justify;
}
.news-content p {
margin-top: 7px;
}
.back-button {
display: inline-block;
padding: 10px 20px;
background-color: #8093a8;
color: white;
text-decoration: none;
border-radius: 5px;
}
.back-button:hover {
background-color: #50667d;
}
.sidemenu {
height: 100vh;
width: 20%;
text-align: center;
display: flex;
/* justify-content: center; */
align-items: center;
flex-direction: column;
}
.sidebar, .contacts {
justify-content: space-between;
list-style: none;
margin-top: 10%;
margin-left: 15%;
margin-bottom: 15%;
/* border: 2px solid black; */
}
.sidebar ul {
list-style: none;
}
.sidebar li,
.sidebar a, .contacts a {
/* border: 1px solid black; */
font-size: 17px;
margin: 10px;
text-decoration: none;
color: #513423;
}
.sidebar a:hover, .contacts a:hover{
border-bottom: 2px solid rgba(129, 41, 41, 0.804);
}
.contacts li{
list-style: none;
text-align: center;
margin: 10px;
font-weight: bold;
}
Link Video : Video Demo YouTube
Komentar
Posting Komentar