ETS Pemrograman Web

Nama : Afel Allaric Absor
NRP : 5025231140
Kelas : Pemrograman Web (E)

ETS Pemrograman Web

1). Apa yang dimaksud dengan domain dan hosting dalam konteks aplikasi web? Berikan contoh bagaimana keduanya berfungsi bersama!

- Domain adalah suatu alamat website yang akan digunakan sebagai alamat utama dari suatu website biasanya adalah nama website (terdiri dari huruf) sebenarnya domain ini berupa suatu IP tetapi IP ini akan dikonversikan oleh DNS menjadi nama website tersebut.

- Hosting adalah Komponen pembuat website yang menyimpan file-file yang dibutuhkan oleh website agar berjalan.

Contohnya adalah jika saya membuat website berita www.ValinNews.com dan menggunakan hostinger untuk melakukan hosting. Maka domain website saya adalah ValinNews dan hosting yang saya gunakan adalah hostinger yang akan menjadi perantara antar file-file website saya berisi rincian website ValinNews.

2). Apa peran DNS dalam arsitektur aplikasi web dan bagaimana proses resolusi nama domain bekerja?

- Peran DNS dalam arsitektur aplikasi web adalah sebagai protokol yang akan mengubah IP menjadi nama domain suatu website dan sebaliknya. Proses resolusi nama domain adalah dengan melakukan setting pada folder-folder yang ada di dalam DNS untuk melakukan setting IP apa yang akan dikonversi menjadi nama Domain apa, begitu juga sebaliknya.

3). Seorang klien ingin anda membuat formulir kontak yang mengumpulkan nama, email, nomor telepon, dan pesa. Selain itu, formulir harus memiliki validasi untuk memastikan bahwa semua bidang diisi dan email diisi dalam format yang benar. Buatlah struktur HTML untuk formulir ini dan tambahkan JavaScript untuk melakukan validasi.

- index.html :

___________________________________________________________________________________

<!DOCTYPE html>

<html>

<head>

<title>Formulir Kontak</title>

</head>

<legend>Formulir Kontak</legend>

<p>

<label>Nama Lengkap:</label>

</p>

<p>

<label>Nomor Telepon:</label>

</p>

<p>

<label>Pesan:</label>

</p>

<p>

<label>Email:</label>

</p>

<p>

</p>

</fieldset>

</form>

___________________________________________________________________________________

- Validasi.js :

___________________________________________________________________________________

document.getElementById('contactForm').addEventListener('submit', function(event) {

var name = document.getElementsByName('Nama_Lengkap')[0].value;

var email = document.getElementsByName('email')[0].value;

var phone = document.getElementsByName('Nomor_Telepon')[0].value;

var message = document.getElementsByName('Pesan')[0].value;

if (!name || !email || !phone || !message) {

alert('Semua bidang harus diisi!');

event.preventDefault();

}

var emailPattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;

if (!email.match(emailPattern)) {

alert('Email tidak valid!');

event.preventDefault();

}

});

___________________________________________________________________________________

Java script tersebut berguna untuk mengecek apakah format email sudah benar dan apakah seluruh isian dari form telah diisi

- Berikut adalah tampilan webnya

4). Desainlah dan implementasikan halaman detail berita yang menampilkan konten lengkap sebuah berita. Halaman harus mencakup judul berita, gambar utama, tanggal publikasi, konten berita, dan tombol untuk kembali ke daftar berita.

- index.html :

<!DOCTYPE html>

<html>

<head>

<title>Belajar Membuat Layout dengan HTML dan css</title>

</head>

<body>

<h2>Valin News</h2>

</div>

<ul>

</ul>

</div>

<h3>Ditemukan Unsur Baru yang Memiliki Potensi Sebagai Sumber Daya Baru</h3>

<p>23 Oktober 2024</p>

<p>Unsur VLN ditemukan oleh ilmuwan asal Indonesia.....</p>

<a href="blog1.html"><button class="btn">Baca Lebih Lanjut ..</button></a>

</div>

<h3>Penjual Kebab Ayam Meraup Keuntungan Sebesar 15 Juta Setiap Bulannya</h3>

<p>23 Oktober 2024</p>

<p>Seorang Penjual Kebab Kaki Lima Bernama Bapak Valin Telah Membuka Usahanya Selama.....</p>

<a href="blog2.html"><button class="btn">Baca Lebih Lanjut ..</button></a>

</div>

<h3>Pensil Baru</h3>

<p>23 Oktober 2024</p>

<p>Ditemukannya Pensil tipe Baru oleh Ilmuwan Indonesia.....</p>

<a href="blog3.html"><button class="btn">Baca Lebih Lanjut ..</button></a>

</div>

<h3>Bolpoin Tipe Baru</h3>

<p>23 Oktober 2024</p>

<p>Ditemukannya Bolpoin tipe baru oleh Ilmuwan Indonesia.....</p>

<a href="blog4.html"><button class="btn">Baca Lebih Lanjut ..</button></a>

</div>

</div>

<h3>List Berita</h3>

<hr />

<p><a href="blog1.html" class="undecor">Ditemukan Unsur Baru yang Memiliki Potensi Sebagai Sumber Daya Baru</a></p>

<p><a href="blog2.html" class="undecor">Penjual Kebab Ayam Meraup Keuntungan Sebesar 15 Juta Setiap Bulannya</a></p>

<p><a href="blog3.html" class="undecor">Bolpoin Tipe Baru</a></p>

<p><a href="blog4.html" class="undecor">Pensil Tipe Baru</a></p>

</div>

</div>

</body>

</html>

- blog1.html :

<!DOCTYPE html>

<html>

<head>

<title>Belajar Membuat Layout dengan HTML dan css</title>

</head>

<body>

<h2>Valin News</h2>

</div>

<ul>

</ul>

</div>

<h3>Ditemukan Unsur Baru yang Memiliki Potensi Sebagai Sumber Daya Baru</h3>

<p>23 Oktober 2024</p>

<p>Unsur VLN ditemukan oleh ilmuwan asal Indonesia</p>

</div>

<h3>List Berita</h3>

<hr />

<p><a href="blog1.html" class="undecor">Ditemukan Unsur Baru yang Memiliki Potensi Sebagai Sumber Daya Baru</a></p>

<p><a href="blog2.html" class="undecor">Penjual Kebab Ayam Meraup Keuntungan Sebesar 15 Juta Setiap Bulannya</a></p>

<p><a href="blog3.html" class="undecor">Bolpoin Tipe Baru</a></p>

<p><a href="blog4.html" class="undecor">Pensil Tipe Baru</a></p>

</div>

</div>

</body>

</html>

- blog2.html :

<!DOCTYPE html>

<html>

<head>

<title>Belajar Membuat Layout dengan HTML dan css</title>

</head>

<body>

<h2>Valin News</h2>

</div>

<ul>

</ul>

</div>

<h3>Penjual Kebab Ayam Meraup Keuntungan Sebesar 15 Juta Setiap Bulannya</h3>

<p>23 Oktober 2024</p>

<p>Seorang Penjual Kebab Kaki Lima Bernama Bapak Valin Telah Membuka Usahanya Selama 5 Tahun.</p>

</div>

<h3>List Berita</h3>

<hr />

<p><a href="blog1.html" class="undecor">Ditemukan Unsur Baru yang Memiliki Potensi Sebagai Sumber Daya Baru</a></p>

<p><a href="blog2.html" class="undecor">Penjual Kebab Ayam Meraup Keuntungan Sebesar 15 Juta Setiap Bulannya</a></p>

<p><a href="blog3.html" class="undecor">Bolpoin Tipe Baru</a></p>

<p><a href="blog4.html" class="undecor">Pensil Tipe Baru</a></p>

</div>

</div>

</body>

</html>

- blog3.html:

<!DOCTYPE html>

<html>

<head>

<title>Belajar Membuat Layout dengan HTML dan css</title>

</head>

<body>

<h2>Valin News</h2>

</div>

<ul>

</ul>

</div>

<h3>Pensil Baru</h3>

<p>23 Oktober 2024</p>

<p>Ditemukannya Pensil tipe Baru oleh Ilmuwan Indonesia.</p>

</div>

<h3>List Berita</h3>

<hr />

<p><a href="blog1.html" class="undecor">Ditemukan Unsur Baru yang Memiliki Potensi Sebagai Sumber Daya Baru</a></p>

<p><a href="blog2.html" class="undecor">Penjual Kebab Ayam Meraup Keuntungan Sebesar 15 Juta Setiap Bulannya</a></p>

<p><a href="blog3.html" class="undecor">Bolpoin Tipe Baru</a></p>

<p><a href="blog4.html" class="undecor">Pensil Tipe Baru</a></p>

</div>

</div>

</body>

</html>

- blog4.html :

<!DOCTYPE html>

<html>

<head>

<title>Belajar Membuat Layout dengan HTML dan css</title>

</head>

<body>

<h2>Valin News</h2>

</div>

<ul>

</ul>

</div>

<h3>Bolpoin Tipe Baru</h3>

<p>23 Oktober 2024</p>

<p>Ditemukannya Bolpoin tipe baru oleh Ilmuwan Indonesia.</p>

</div>

<h3>List Berita</h3>

<hr />

<p><a href="blog1.html" class="undecor">Ditemukan Unsur Baru yang Memiliki Potensi Sebagai Sumber Daya Baru</a></p>

<p><a href="blog2.html" class="undecor">Penjual Kebab Ayam Meraup Keuntungan Sebesar 15 Juta Setiap Bulannya</a></p>

<p><a href="blog3.html" class="undecor">Bolpoin Tipe Baru</a></p>

<p><a href="blog4.html" class="undecor">Pensil Tipe Baru</a></p>

</div>

</div>

</body>

</html>

- style.css :

body{

background:#f3f3f3;

color:#333;

width:100%;

font-family:sans-serif;

margin: 0 auto;

}

.header{

width:90%;

margin:auto;

height:120px;

line-height:120px;

background:#41A85F;

color:#fff;

}

.content{

width:90%;

margin:auto;

height: 1000px;

padding:0.1px;

background:#fff;

color:#333;

}

.kiri{

width:70%;

float:left;

margin:auto;

background:#fff;

height:auto;

}

.kanan{

width:30%;

float:left;

margin:auto;

background:#fff;

height:420px;

}

.border{

border:2px solid #74C599;

margin-top:1pc;

padding-bottom:1pc;

padding-left:2pc;

padding-right:2pc;

}

.undercor{

text-decoration:none;

}

.footer{

width:90%;

margin:auto;

height:40px;

line-height:40px;

background:#41A85F;

color:#fff;

}

.menu{

background-color:#53bd84;

height:50px;

line-height:50px;

position:relative;

width:90%;

margin:0 auto;

padding: 0 auto;

}

.jarak{

padding:0 2pc;

}

.menu ul{

list-style:none;

}

.menu ul li a{

float:left;

width:70px;

display:block;

text-align:center;

color:#fff;

text-decoration:none;

}

.menu ul li a:hover{

background-color:#74C599;

display:block;

}

-Berikut adalah hasil dari web :

- Foto saaat berita telah ditekan tombol "Baca Lebih Lanjut..."

Link video youtube : https://youtu.be/UEYOeYo4ti0

Cari Blog Ini

Tugas Pertemuan 1 PBO (A) Meningkatkan Skill Typewriter

ETS Pemrograman Web

Komentar

Posting Komentar

Postingan populer dari blog ini

PWEB 15 Desain Final Project

Tugas 8 Pemrograman Web (E) Membuat Form Register & Login Menggunakan Bootstrap

Tugas PBO 14 GUI & Panel Login