ETS PWEB
Nama : Kadek Fajar Pramartha Yasodana
NRP : 5025231185
NRP : 5025231185
Kelas : PWEB E
ETS PWEB
1. Apa yang dimaksud dengan domain dan hosting dalam konteks aplikasi web? Berikan contoh bagaimana keduanya berfungsi bersama.
Domain merupakan sebuah alamat dalam bentuk teks yang mudah dibaca oleh manusia yang nantinya akan digunakan untuk mendapatkan ip address dari server aplikasi website kita. Domain berfungsi agar kita tidak perlu menghafalkan ip address dari masing masing server yang ingin kita tuju melainkan kita hanya perlu menghafalkan nama domain dari website tersebut seperti google.com. Hal ini bertujuan agar kita lebih mudah untuk mengingat ip tujuan dari website tersebut, dan juga membuat kita agar tidak perlu mencari ip address tujuan website yang sudah kita ingat jika terjadi adanya perubahan ip dari website tersebut
Hosting dalam konteks aplikasi merupakan sebuah konsep dimana kita menjalankan server aplikasi website kita untuk mulai memberikan layanan kepada client yang menghubungi website kita dengan membuka akses internet website kita ke seluruh dunia sehingga bisa diakses oleh sembarang client. Website akan melakukan hosting pada sebuah server yang dimana server tersebut akan memiliki sebuah public ip address yang bisa digunakan untuk mengakses website kita. contohnya 172.253.118.100 (google.com)
Hubungan dari Domain dan Hosting adalah domain yang memberikan layanan untuk mengubah sebuah text contohnya google.com menjadi sebuah ip address tujuan contohnya adalah 172.253.118.100. Setelah domain memberikan ip address tersebut, nantinya browser akan melakukan koneksi menuju ip tujuan yang diberikan, sehingga browser dapat terkoneksi dan melakukan request dari ip tujuan. Setelah server memproeses request, server akan memberikan response menuju ip client dan nantinya client (browser) akan menampilkan response yang diberikan dari server
2. Apa peran DNS dalam arsitektur aplikasi web dan bagaimana proses resolusi nama domain bekerja?
DNS merupakan Domain Name Server yang berfungsi menerjemahkan nama domain yang mudah diingat menjadi alamat IP yang dapat dibaca komputer. peran DNS adalah DNS untuk memungkinkan pengguna untuk mengakses situs web dan layanan online dengan mudah, tanpa harus mengingat alamat IP yang rumit.
Untuk proses resolusi nama domain, akan terbagi menjadi beberapa tahap sebagai berikut
- Client akan menghubungi DNS server melalui ip yang terdaftar pada nameserver di client seperti linux adalah /etc/resolv.conf. Client akan menghubungi DNS Server dengan melakukan request yang berisi alamat website dalam bentuk text. Contoh dari DNS Server adalah 8.8.8.8 (DNS Google)
- Setelah DNS Server mendapatkan request dari client, DNS Server akan mencoba mencari ip address yang sudah termapping dengan nama domain yang diberikan pada request dari client.
- Jika alamat domain terdapat dalam DNS Server, maka DNS Server akan mengolah alamat domain menjadi alamat ip yang terdaftar pada DNS Server. Setelah itu DNS Server akan memberikan alamat ip tersebut kembali ke Client.
- Jika alamat domain tidak terdapat dalam DNS Server, maka DNS Server akan mencoba menghubungi DNS Server lainnya dan melakukan request nama domain yang didapatkan dari Client. Hal ini akan terus berlanjut hingga alamat ip sudah ditemukan atau pencarian alamat gagal/timeout.
- Setelah client mendapatkan alamat IP dari DNS Server, maka client akan melanjutkan koneksi menuju alamat IP langsung
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./styles.css">
<script defer src="./script.js"></script>
</head>
<body>
<form>
<label for="name">Name</label>
<input type="text" id="name" name="name"><br>
<label for="email">Email</label>
<input type="email" id="email" name="email"><br>
<label for="telephone">Telephone</label>
<input type="tel" id="telephone" name="telephone" pattern="\+?[0-9\-]{7,15}"><br>
<label for="message">Message</label>
<textarea name="message" rows="10" cols="30"></textarea><br>
<input type="submit" id="submit" name="submit" value="submit">
</form>
</body>
</html>
Javascript
const nameInput = document.getElementById('name');
const emailInput = document.getElementById('email');
const telInput = document.getElementById('telephone');
const messageInput = document.getElementById('message');
const submit = document.getElementById('submit');
submit.addEventListener('click', function(event)
{
if(nameInput.value == '' || emailInput.value == '' || telInput.value == '')
{
event.preventDefault();
alert("Name, Email, or Telephone cannot be empty!");
}
});
4. Desainlah dan implementasikan halaman detail berita yang menampilkan konten lengkap sebuah berita. Halaman harus mencakup:
- Judul berita
- Gambar utama
- Tanggal publikasi
- Konten berita
- Tombol untuk kembali ke daftar berita
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./styles.css">
</head>
<body>
<nav>
<div class="nav-header">
BeritaKini
</div>
<div class="nav-button" onclick="window.location.href='/'">
Home
</div>
</nav>
<main class="list-berita">
<h1>
Berita
</h1>
<div class="list-berita-container">
<div class="list-berita-item">
<h2>Audi Membuat Mobil SUV Keluarga V12 Diesel</h2>
<div>
<img src="./images/audiv12.jpg">
</div>
<p>Audi V12 TDI adalah mesin diesel legendaris yang pertama kali diperkenalkan pada tahun 2008 melalui model SUV mewah Audi Q7.</p>
<button class="button-main" onclick="window.location.href='./berita/audiv12.html'">Learn More</button>
</div>
<div class="list-berita-item">
<h2>Innova 2.8L Diesel Masuk Ke Indonesia</h2>
<div>
<img src="./images/innova.webp">
</div>
<p>Toyota Innova 2.8L Diesel dengan mesin 1GD-FTV adalah varian yang sangat populer di kalangan penggemar kendaraan keluarga karena keseimbangan antara performa, efisiensi, dan ketangguhan.</p>
<button class="button-main" onclick="window.location.href='./berita/innova.html'">Learn More</button>
</div>
</div>
</main>
</body>
</html>
audiv12.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/styles.css">
</head>
<body>
<nav>
<div class="nav-header">
BeritaKini
</div>
<div class="nav-button" onclick="window.location.href='/'">
Home
</div>
</nav>
<main class="berita">
<div>
<h1>Audi Membuat Mobil SUV Keluarga V12 Diesel</h1>
<div>
<img src="../images/audiv12.jpg">
</div>
<h3>23/10/2024</h3>
<p>
Audi V12 TDI adalah mesin diesel legendaris yang pertama kali diperkenalkan pada tahun 2008 melalui model SUV mewah Audi Q7. Mesin ini memiliki kapasitas 6.0 liter dengan konfigurasi V12, yang terdiri dari 12 silinder yang disusun dalam dua baris pada sudut 60 derajat. Dengan tenaga sekitar 500 hp dan torsi besar mencapai 1000 Nm, mesin ini menawarkan performa yang luar biasa, bahkan untuk kendaraan berbobot besar seperti Audi Q7. Keunggulan lain dari mesin ini adalah efisiensi bahan bakar diesel yang dikombinasikan dengan kekuatan besar, sehingga memberikan keseimbangan ideal antara performa tinggi dan hemat energi. Mesin V12 TDI ini juga dilengkapi dengan teknologi turbocharger ganda, yang memungkinkan peningkatan performa dengan respons yang cepat. Meskipun bertenaga, Audi memastikan bahwa mesin ini tetap memenuhi standar emisi yang ketat dengan teknologi injeksi langsung dan sistem pengendalian emisi canggih, menjadikannya salah satu inovasi mesin diesel paling kuat dan ramah lingkungan pada masanya.
</p>
</div>
</main>
</body>
</html>
innova.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/styles.css">
</head>
<body>
<nav>
<div class="nav-header">
BeritaKini
</div>
<div class="nav-button" onclick="window.location.href='/'">
Home
</div>
</nav>
<main class="berita">
<div>
<h1>Innova 2.8L Diesel Masuk Ke Indonesia</h1>
<div>
<img src="../images/innova.webp">
</div>
<h3>24/10/2024</h3>
<p>
Toyota Innova 2.8L Diesel dengan mesin 1GD-FTV adalah varian yang sangat populer di kalangan penggemar kendaraan keluarga karena keseimbangan antara performa, efisiensi, dan ketangguhan. Mesin 1GD-FTV berkapasitas 2.8 liter merupakan mesin diesel 4-silinder segaris dengan turbocharger yang dirancang untuk menghasilkan tenaga yang kuat, namun tetap hemat bahan bakar. Mesin ini mampu menghasilkan tenaga sekitar 172 hingga 177 hp, dengan torsi besar mencapai 360 hingga 450 Nm, tergantung pada varian. Torsi yang besar ini sangat berguna dalam memberikan akselerasi yang halus meskipun mengangkut penumpang dan barang dalam jumlah banyak.
<br><br>
Dikenal karena durabilitasnya, mesin 1GD-FTV menggunakan teknologi common-rail direct fuel injection yang meningkatkan efisiensi pembakaran dan mereduksi emisi. Selain itu, turbocharger dengan variable geometry (VNT) membantu mesin menghasilkan tenaga yang lebih baik di berbagai putaran mesin, menjadikan Innova tangguh di berbagai kondisi jalan, baik di perkotaan maupun di area pegunungan. Meskipun memiliki tenaga yang besar, mesin ini tetap hemat bahan bakar, menjadikannya pilihan yang ideal untuk perjalanan jauh maupun sehari-hari. Toyota Innova dengan mesin 2.8L Diesel 1GD ini menawarkan kenyamanan, kekuatan, dan efisiensi yang solid, menjadikannya pilihan utama bagi banyak keluarga di berbagai negara.
</p>
</div>
</main>
</body>
</html>
styles.css
*
{
box-sizing: border-box;
}
html, body
{
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
background-color: rgb(255, 255, 255);
}
nav
{
width: 100%;
height: fit-content;
background-color: black;
display: flex;
flex-direction: row;
align-items: center;
}
.nav-header
{
font-weight: bolder;
color: white;
padding: 16px;
}
.nav-button
{
transition: all 0.15s ease-in-out;
width: fit-content;
padding: 16px;
color: white;
background-color: black;
font-weight: bold;
user-select: none;
cursor: pointer;
}
.nav-button:hover
{
color: black;
background-color: white;
}
.list-berita
{
padding: 16px;
}
.list-berita-container
{
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 16px;
}
.list-berita-item
{
display: flex;
border-radius: 8px;
flex-direction: column;
justify-content: center;
align-items: start;
border: solid black 2px;
padding: 16px;
div
{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
img
{
border-radius: 4px;
width: 350px;
height: auto;
}
}
}
.button-main
{
all: unset;
background-color: rgb(94, 177, 255);
color: white;
border-radius: 8px;
padding: 8px;
padding-inline: 12px;
font-weight: bold;
transition: all 0.15s ease-in-out;
cursor: pointer;
}
.button-main:hover
{
background-color: rgb(163, 208, 250);
color: white;
}
.berita
{
padding: 16px;
div
{
border: solid 2px black;
border-radius: 8px;
display: flex;
flex-direction: column;
h1
{
text-align: center;
}
div
{
width: 100%;
border: none;
display: flex;
justify-content: center;
align-items: center;
img
{
width: 500px;
height: auto;
}
}
h3
{
text-align: center;
}
p
{
padding: 16px;
text-align: justify;
}
}
}
Hasil
Link Code : GitHub
Comments
Post a Comment