Hai, sobat IDN! Di era yang sudah sangat mengandalkan Internet ini, sudah sangat banyak sekali berbagai Website dari mulai blog, academy, pemerintahan bahkan games. Web juga memiliki dua perbedaan yaitu ada Website dan juga Web Aplikasi yang dimana situs web (website) bertujuan untuk memberikan informasi dan menampilkan konten kepada pengguna, sementara aplikasi web bertujuan untuk menyediakan fitur dan interaksi yang lebih kompleks. Dengan kata lain, situs web dan aplikasi web memiliki perbedaan yang signifikan dalam fungsi, user interface, pemrosesan, skalabilitas, keamanan, dan kebutuhan developer. Situs web cocok untuk mempublikasikan informasi dan konten, sementara aplikasi web cocok untuk menyediakan fitur dan interaksi yang lebih kompleks.
Pemahaman Materi
Website adalah sebuah platform digital yang menampilkan informasi dan konten seperti teks, gambar, video, dan lainnya melalui internet. Website dapat diakses melalui browser web seperti Google Chrome, Mozilla Firefox, atau Safari, dan biasanya ditempatkan pada server web. Website dapat dibuat dan dikelola oleh individu, organisasi, atau perusahaan. Web biasanya dibangun menggunakan bahasa pemrograman seperti HTML, CSS, JavaScript atau menggunakan framework tambahan dari CSS seperti bootstrap, tailwind, bulma dan sebagainya
WEB DESIGN DAN APLIKASI
Web Aplikasi adalah suatu Web yang berjalan melalui browser web dan diakses melalui internet. Web aplikasi memiliki fungsi yang lebih interaktif dan memberikan layanan seperti pemesanan produk, manajemen proyek, dan pemrosesan data Web aplikasi biasanya dibangun menggunakan bahasa pemrograman seperti HTML, CSS, JavaScript, dan PHP, dan membutuhkan database untuk menyimpan dan mengelola data.
Web Design proses pembuatan dan pengembangan tampilan visual dan interaksi sebuah website. Web design meliputi pemilihan warna, tipografi, layout, dan elemen grafis lainnya untuk membuat website yang atraktif, mudah digunakan, dan efektif dalam menyampaikan pesan. Web design juga memperhatikan aspek aksesibilitas, responsivitas, dan kompatibilitas dengan berbagai perangkat dan browser web. Web designer bekerja sama dengan tim pengembang web untuk memastikan bahwa website berfungsi dengan baik dan memenuhi tujuan bisnis atau organisasi.
Tetapi pembahasan yang akan mimin bahas kali ini hanya akan membahas mengenai bagaimana caranya memadukan bahasa pemrograman yang biasa dibuat untuk menjadi sebuah Website. Sebelum pembahasan terlalu jauh ada beberapa hal yang perlu sobat idn perlu ketahui mengenai cara pembuatan website dengan menggunakan bahasa pemrograman HTML, CSS dan juga Javascript
Hypertext Markup Language (HTML)
Banyak programmer yang mengatakan bahwa HTML ini bukanlah bahasa pemrograman karena tidak memerlukan sebuah logika atau algoritma pada saat proses pembuatan nya seperti bahasa pemrograman yang lain yaitu C++, Javascript, Python, Java dan semacamnya itu baru bisa disebut sebagai bahasa pemrograman karena membutuhkan sebuah logika pada saat proses pembuatan. HTML bisa dikatakan adalah sebagai blue print atau kerangka struktur dari proses perancangan Website. Dan proses perancangan Website tersebut HTML menggunakan sebuah tag HTML yang sering kali digunakan pada perancangan Website diantaranya adalah <div>, <p>, <h1> , <img>, <a>, <nav> , <ol> , <ul> dan masih banyak lagi.
Cascading Style Sheet (CSS)
Bahasa presentasi yang digunakan untuk mengatur tampilan visual dari halaman web. CSS memungkinkan pengembang web untuk membuat halaman web yang terlihat indah dan menarik, mengatur bagaimana elemen seperti teks, gambar, dan form ditampilkan. CSS juga memungkinkan pengembang web untuk mengatasi masalah aksesibilitas, seperti membuat font yang mudah dibaca untuk pengguna dengan kebutuhan khusus. Dengan CSS, pengembang web dapat membuat halaman web yang terlihat sama di semua browser dan perangkat, membuat pengalaman pengguna yang lebih baik dan membuat pemeliharaan halaman web lebih mudah.
Menurut mimin, CSS sangat berguna dalam mempercantik tampilan Website agar tampilan Web lebih menarik perhatian sehingga end-user dapat terus mengunjungi Website tersebut.
Javascript (JS)
bahasa scripting yang populer yang digunakan untuk membuat aplikasi web dinamis. JavaScript memungkinkan pengembang web untuk menambahkan interaksi, animasi, dan efek visual ke halaman web. JavaScript juga memungkinkan pengembang untuk memvalidasi input form, membuat pop-up, dan menambahkan konten secara real-time tanpa memuat ulang halaman. JavaScript dapat berjalan di banyak browser dan perangkat, membuat pengalaman pengguna yang lebih baik dan membuat pengembangan web lebih mudah. JavaScript dapat digunakan bersama dengan HTML dan CSS untuk membuat aplikasi web yang kompleks. Untuk menjadi seorang Javascript Advanced Programming ada 2 hal yang harus sobat idn pelajari dan kuasai diantaranya adalah Object Oriented Programming (OOP) dan juga Javascript DOM, dan mimin akan menjelaskan sedikit mengenai keduanya karena sangat penting dalam proses perancangan Website
Object Oriented Programming (OOP)
paradigma pemrograman yang menggunakan objek untuk menyelesaikan masalah. Dalam Javascript, OOP memungkinkan pengembang web untuk membuat objek yang memiliki properti dan metode yang dapat digunakan secara berulang. Ini membuat kode lebih mudah dikelola, dipelihara dan diterapkan dalam proyek yang lebih besar. Dalam OOP, objek dapat memiliki hubungan satu sama lain dan dapat memiliki akses ke properti dan metode yang dimilikinya. Ini membantu mengurangi ketergantungan kode satu sama lain dan membuat kode lebih terstruktur dan mudah dipahami. JavaScript OOP juga memungkinkan pengembang untuk membuat class, yang merupakan cetak biru untuk objek yang akan dibuat. Class dapat digunakan untuk membuat objek baru yang memiliki properti dan metode yang sama.
class Mahasiswa {
constructor(nama, npm, jurusan) {
this.nama = nama;
this.npm = npm;
this.jurusan = jurusan;
}
// menampilkan object melalui console menggunakan method info()
info() {
console.log(`Nama: ${this.nama}`);
console.log(`NPM: ${this.npm}`);
console.log(`Jurusan: ${this.jurusan}`);
}
}
// membuat object
const mahasiswa1 = new Mahasiswa(“John Doe”, “1234567890”, “Teknik Informatika”);
const mahasiswa2 = new Mahasiswa(“Jane Doe”, “0987654321”, “Sastra Inggris”);
// memanggil
mahasiswa1.info();
mahasiswa2.info();
Pemahaman dengan contoh
Dalam contoh di atas, kita membuat class Mahasiswa dengan constructor yang menerima nama, npm, dan jurusan sebagai parameter. Kita juga membuat method info yang menampilkan informasi mahasiswa. Kemudian, kita membuat objek mahasiswa1 dan mahasiswa2 dengan memanggil constructor Mahasiswa. Terakhir, kita memanggil method info pada objek mahasiswa1 dan mahasiswa2 untuk menampilkan informasi mahasiswa.
Javascript DOM
adalah representasi elemen HTML dalam bentuk pohon. DOM menyediakan cara bagi JavaScript untuk mengakses dan memanipulasi elemen HTML dalam halaman web. Setiap elemen HTML memiliki node dalam DOM yang dapat diakses oleh JavaScript. DOM memungkinkan pengembang web untuk membuat interaksi yang dinamis dengan halaman web dan membuat aplikasi web yang lebih baik. JavaScript dapat digunakan untuk menambahkan, menghapus, atau memodifikasi elemen HTML dan membuat halaman web lebih responsif. DOM juga memungkinkan pengembang web untuk membuat aplikasi web yang lebih mudah dipelihara dan dikembangkan.
<!DOCTYPE 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>DOM Versi IDN</title>
</head>
<body>
<h1 id=”judul”>Judul Halaman</h1>
<p id=”paragraf”>Paragraf Pertama</p>
<button id=”btn”>Ganti Judul dan Paragraf</button>
<script>
const judul = document.getElementById(“judul”);
const paragraf = document.getElementById(“paragraf”);
const btn = document.getElementById(“btn”);
btn.addEventListener(“click”, function () {
judul.innerHTML = “Javascript DOM”;
paragraf.innerHTML = “Hello sobat Idn!”;
});
</script>
</body>
</html>
Dalam contoh di atas, kita memiliki sebuah halaman HTML dengan judul, paragraf, dan tombol. Kita menggunakan JavaScript untuk mengakses elemen HTML berdasarkan id-nya dengan menggunakan document.getElementById. Kemudian, kita menambahkan event listener pada tombol untuk memanggil fungsi yang akan mengubah isi judul dan paragraf. Setelah tombol diklik, judul dan paragraf akan berubah menjadi “Judul Baru” dan “Paragraf Baru”.
Penjelasan Sederhana dalam Memadukan HTML, CSS dan Javascript
HTML, CSS, dan JavaScript biasanya digabungkan untuk membuat halaman web yang dinamis dan interaktif. HTML digunakan untuk menentukan struktur dan konten halaman web, CSS digunakan untuk memformat dan mempercantik tampilan halaman web, dan JavaScript digunakan untuk menambahkan interaksi dan fungsi.
Anda dapat menambahkan CSS ke halaman HTML dengan menyertakan tag `<style>` di header halaman atau dengan menggunakan file eksternal CSS. Anda juga dapat menambahkan JavaScript ke halaman HTML dengan menyertakan tag `<script>` di body halaman atau dengan menggunakan file eksternal JavaScript.
Dengan memadukan HTML, CSS, dan JavaScript, Anda dapat membuat halaman web yang memiliki tampilan yang menarik dan memiliki interaksi yang kaya. Ini adalah cara yang umum digunakan dalam pengembangan halaman web modern dan memungkinkan Anda untuk membuat halaman web yang dapat dioptimalkan untuk segala jenis perangkat, dari desktop hingga mobile.
HTML menyediakan struktur halaman web, CSS mengatur tampilan dan format, dan JavaScript membuat halaman interaktif dan dinamis. Untuk memadukan ketiganya, tambahkan tag HTML untuk membuat elemen halaman, CSS untuk mengatur tampilannya, dan JavaScript untuk menambahkan interaksi. Misalnya:
HTML:
<button id=”myButton”>Click me</button>
CSS:
#myButton {
background-color: lightblue;
padding: 10px 20px;
border-radius: 5px;
}
Javascript:
const button = document.querySelector(“#myButton”);
button.addEventListener(“click”, function() {
alert(“Button was clicked!”);
});
Ini hanya sebagai contoh sederhana. Anda dapat menggabungkan HTML, CSS, dan JavaScript untuk membuat halaman web yang kompleks dan interaktif.
CARA MEMBUAT WEB SEDERHANA VERSI IDN
- Membuat Folder Project
- Membuat Struktur HTML
Buat halaman HTML dengan menentukan elemen-elemen seperti header, body, judul, paragraf, tabel, dll. dengan menggunakan tag HTML yang sesuai. Struktur code di bawah ini diisi di dalam file bernama index.html
<!DOCTYPE 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>DOM Versi IDN</title>
<link rel=”stylesheet” href=”style.css” />
</head>
<body>
<div class=”sidebar”>
<a class=”active” href=”#home”>Home</a>
<a href=”#blog”>Blog</a>
<a href=”#contact”>Contact</a>
<a href=”#about”>About</a>
</div>
<main class=”content”>
<div class=”container”>
<h1>Website IDN</h1>
<hr />
<p>
platform digital yang menampilkan informasi dan konten seperti teks,
gambar, video, dan lainnya melalui internet. Website dapat diakses
melalui browser web seperti Google Chrome, Mozilla Firefox, atau
Safari, dan biasanya ditempatkan pada server web. Website memiliki
ukuran responsive website untuk mobile, Tablet, dan desktop
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error eaque
cum omnis consequuntur ex enim, ratione quidem at expedita officia
corrupti architecto veniam velit! Facere quod repellendus id quae
ratione officia nobis. Illo iste id, nemo necessitatibus vitae rerum
sed, nostrum illum velit eos nisi maiores aut officia ut laborum.
</p>
<button type=”button” class=”btn”>Click Here !</button>
</div>
</main>
</body>
</html>
Design Website
Membuat file bernama style.css
body {
margin: 0;
font-family: Cambria, Cochin, Georgia, Times, ‘Times New Roman’, serif
}
.sidebar {
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f12b;
position: fixed;
height: 100%;
overflow: auto;
box-shadow: 1px 0 10px black;
}
.sidebar a {
display: block;
color: black;
padding: 16px;
text-decoration: none;
}
.sidebar a.active {
background-color: #aa0404;
color: white;
}
.sidebar a:hover:not(.active) {
background-color: #aa0404;
color: white;
}
main.content {
margin-left: 200px;
padding: 1px 16px;
height: 1000px;
}
.btn {
padding: 14px 14px;
background-color: #aa0404;
border: none;
border-radius: 8px;
color: white;
font-weight: bold;
box-shadow: 0 4px black;
}
button.btn:hover {
background-color: #c60606;
}
button.btn:active {
margin-top: 3px;
box-shadow: none;
}
@media screen and (max-width: 700px) {
.sidebar {
width: 100%;
height: auto;
position: relative;
}
.sidebar a {
float: left;
}
main.content {
margin-left: 0;
}
}
@media screen and (max-width: 400px) {
.sidebar a {
text-align: center;
float: none;
}
}
Menambahkan Javascript
Tambahkan JavaScript untuk menambahkan interaksi dan fungsi ke halaman HTML. Anda dapat menyertakan JavaScript dalam tag `<script>` di body halaman HTML atau menggunakan file eksternal JavaScript. Berikut ini membuat file javascript bernama index.js
const btn = document.getElementsByClassName(‘btn’)[0];
btn.addEventListener(‘click’, function () {
alert(‘Welcome to IDN’);
})
- Test and Debug: Setelah menyelesaikan kode HTML, CSS, dan JavaScript, lakukan pengujian (test) dan debug halaman web untuk memastikan bahwa semuanya berfungsi dengan baik dan ditampilkan dengan benar.
- Hasil Ukuran Dekstop
- Hasil Ukuran Tablet
- Hasil Ukuran Mobile
Tertarik mengikuti kursus web programming? CEK DISINI