Membangun Dunia Digital, Panduan Lengkap Bahasa & Framework Pemrograman Web

Dimas Novianto Agustus 22, 2025

 Membangun Dunia Digital,
Panduan Lengkap Bahasa & Framework Pemrograman Web


Halo semua! Kali ini aku mau berbagi cerita tentang keseharianku sebagai anak PKL. Biar nggak terlalu kaku, aku coba tulis dengan gaya santai, siapa tahu ada yang relate dengan keseharian kalian juga. Yuk, langsung aja!


Pagi yang Sibuk, tapi Menyenangkan

Hari ini aku mulai bangun tidur agak pagi, tepatnya pukul 05.20. Walaupun masih sedikit ngantuk, aku langsung bangkit dan bersiap untuk shalat Subuh. Setelah itu, sekitar pukul 05.40, aku mandi biar segar dan siap menghadapi hari.

Nah, bagian favoritku datang di jam 06.00—sarapan! Pagi ini aku menikmati nasi goreng hangat ditemani dengan segelas teh hangat. Sederhana, tapi nikmatnya luar biasa.

Selesai sarapan, aku langsung menyiapkan perlengkapan yang dibutuhkan untuk kegiatan PKL.

Perjalanan Menuju Tempat PKL

Sekitar pukul 07.00, aku berangkat ke tempat PKL dengan motor kesayangan. Perjalanan lancar, dan akhirnya aku sampai dengan selamat pukul 07.40. Rasanya lega banget bisa sampai tepat waktu.

Aktivitas di Lab

Pukul 08.00, kegiatan dimulai. Seperti biasa, ada piket pagi. Hari ini tugasku adalah menyapu. Walaupun sederhana, kegiatan ini bikin suasana lab jadi lebih nyaman.

(foto saya Piket)

(foto saya piket)

Selesai piket, pukul 08.30, aku dan teman-teman diberi tugas mencari materi tentang bahasa pemrograman yang digunakan untuk membuat website. Tugasnya cukup seru, karena aku bisa belajar hal baru sekaligus memperdalam pemahaman tentang dunia web. berikut akan saya jelaskan singkat dan mudah di pahami.

Bahasa Pemrograman dalam Pembuatan Web

(ilustrasi web)

Pembuatan sebuah website bukanlah pekerjaan satu bahasa pemrograman saja, melainkan hasil kerja sama berbagai bahasa yang punya tugas masing-masing. Website bisa dibagi menjadi tiga bagian utama:

  1. Front-End (Client Side) → yang terlihat langsung oleh pengguna.
  2. Back-End (Server Side) → bagian "belakang layar", berisi logika, pemrosesan data, dan                                                            koneksi ke database.
  3. Database                         → tempat penyimpanan data agar website bisa menyimpan dan                                                            mengelola informasi.

1. HTML (HyperText Markup Language)

(ilustrasi HTML)

HTML adalah pondasi dasar dari setiap web. Semua konten (teks, gambar, video, tabel, form) diatur strukturnya oleh HTML.

Fungsi Utama

  • Membuat struktur halaman.
  • Menyusun layout (judul, paragraf, list, tabel).
  • Menghubungkan antar halaman melalui hyperlink.
  • Menyematkan media (gambar, video, audio).

Perintah Penting

  • <!DOCTYPE html>       → Mendefinisikan dokumen HTML.
  • <html>...</html>    → Elemen utama, membungkus seluruh isi web.
  • <head>               → Informasi meta, judul, link ke CSS/JS.
  • <body>                       → Isi utama halaman web.
  • <h1> - <h6>         → Heading/judul, semakin kecil angka semakin kecil ukuran teks.
  • <p>                 → Paragraf teks.
  • <a href="url">      → Membuat hyperlink.
  • <img src="gambar.jpg"
    alt="gambar">           → Menyisipkan gambar.
  • <form>                → Membuat form input (login, registrasi, komentar).
  • <table>, <tr>, <td>   → Menyusun tabel.
Contoh:

<!DOCTYPE html>
<html>
<head>
  <title>Website Pertama</title>
</head>
<body>
  <h1>Selamat Datang</h1>
  <p>Ini adalah website pertama saya.</p>
  <a href="https://google.com">Kunjungi Google</a>
</body>
</html>

2. CSS (Cascading Style Sheets)
(ilustrasi CSS)

Jika HTML adalah kerangka, maka CSS adalah kulit dan make-up yang membuat web terlihat cantik. CSS mengatur warna, ukuran, tata letak, bahkan animasi.

Fungsi Utama

  • Mengatur tampilan visual.
  • Menentukan tata letak halaman.
  • Membuat halaman responsif di berbagai perangkat.
  • Memberi animasi sederhana.

Perintah Penting

  • Selector → Menentukan elemen yang ingin diubah (h1, p, .class, #id).
  • Property → Hal yang diatur (warna, ukuran, jarak).
  • Value → Nilai dari property.

Contoh properti CSS:

  • color: red;               → warna teks.
  • background-color: yellow; → warna latar belakang.
  • font-size: 20px;          → ukuran teks.
  • margin: 10px;             → jarak luar elemen.
  • padding: 5px;             → jarak dalam elemen.
  • border: 1px solid black;  → garis tepi hitam.

Contoh

body {
  background-color: lightblue;
}
h1 {
  color: darkblue;
  text-align: center;
}
p {
  font-size: 18px;
  margin: 10px;
}


3. JavaScript
(ilustrasi Javascript)

JavaScript membuat halaman web hidup dan interaktif. Tanpa JavaScript, web hanya halaman statis. Dengan JavaScript, web bisa merespons klik, menampilkan pop-up, validasi form, hingga aplikasi modern seperti Gmail atau Facebook.

Fungsi Utama

  • Membuat interaktivitas.
  • Mengontrol event (klik, ketik, scroll).
  • Manipulasi elemen HTML secara dinamis.
  • Menghubungkan dengan server melalui AJAX/Fetch API.
  • Dasar framework populer (React, Vue, Angular).

Perintah Penting
  • Variabel            → let nama = "Andi";
  • Fungsi              → function hitung(){}
  • Kondisi             → if (x > 5) { ... } else { ... }
  • Looping            → for, while, do...while.
  • Event Listener  → onclick, onchange, addEventListener.

Contoh

  let nama = "Andi";

if (nama == "Andi") {

  alert("Halo, Andi!");

}


function kali(a, b) {

  return a * b;

}

console.log(kali(4, 5)); // Output: 20


4. PHP (Hypertext Preprocessor)

Bahasa paling populer untuk server-side scripting. Banyak website besar (Facebook, Wikipedia, WordPress) awalnya dibangun dengan PHP.

Fungsi Utama

  • Menghubungkan web dengan database.
  • Memproses form (login, registrasi, komentar).
  • Membuat halaman dinamis.
  • Menyusun konten otomatis (CMS, e-commerce).

Perintah Penting

  • Variabel           → $nama = "Budi";
  • Menampilkan output → echo "Hello";
  • Kondisi            → if, else, elseif.
  • Perulangan         → for, while, foreach.
  • Array              → ["apel", "jeruk", "mangga"].
  • Fungsi             → function hitung($a, $b){ return $a + $b; }

CONTOH

<?php
$nama = "Budi";
echo "Halo, " . $nama;

for ($i=1; $i<=5; $i++) {
  echo "Nomor: $i <br>";

}
?>

5. Python (Django & Flask)

(ilustrasi pyhton)

Python dikenal sederhana, namun sangat kuat. Dengan framework Django dan Flask, Python menjadi salah satu bahasa favorit dalam pengembangan web modern.
Fungsi Utama

  • Backend aplikasi modern.
  • Menghubungkan web dengan database.
  • Integrasi dengan AI & Machine Learning.
  • REST API untuk aplikasi mobile & web.
Perintah Penting
  • Variabel → x = 10
  • Fungsi → def salam():
  • Kondisi → if, elif, else.
  • Looping → for, while.
  • Import library → import flask

Contoh

from flask import Flask
app = Flask(__name__)

@app.route("/")
def home():
     return "Halo dari Flask!"

6. Ruby (Ruby on Rails)

(ilustrasi Ruby)

Ruby terkenal dengan framework Rails, cepat untuk membangun aplikasi startup.

Fungsi Utama

  • Membuat web cepat dengan pola MVC.
  • Fokus pada developer-friendly (mudah dipelajari).
  • Banyak digunakan startup.

Perintah Penting

  • Variabel  → nama = "Andi"
  • Fungsi    → def salam; puts "Halo"; end
  • Kondisi   → if ... else ... end
  • Looping  → for i in 1..5

7. Java (Spring Boot)

(ilustrasi Java)

Java dipakai di aplikasi enterprise (perbankan, e-commerce besar, sistem perusahaan).

Fungsi Utama

  • Backend aplikasi besar.
  • Aplikasi berbasis keamanan tinggi.
  • REST API untuk sistem skala besar.

Perintah Penting

  • Variabel            → int x = 10;
  • Class & Object → class Siswa {}
  • Kondisi             → if, else.
  • Looping             → for, while.

8. C# (ASP.NET)
(ilustrasi C#)

Bahasa milik Microsoft, dipakai untuk aplikasi web dan enterprise.

Fungsi Utama

  • Backend website dengan ASP.NET.
  • Aplikasi bisnis perusahaan.
  • Integrasi dengan produk Microsoft (Azure, SQL Server).

Perintah Penting

  • Variabel → string nama = "Andi";
  • Fungsi → public void salam(){}
  • Kondisi → if (x > 5) { ... }
  • Looping → for, foreach, while.

9. SQL (Structured Query Language)

(ilustrasi SQL)

Bahasa khusus database. Hampir semua aplikasi web memakai SQL.

Fungsi Utama

  • Membuat database.
  • Menyimpan data (user, produk, transaksi).
  • Mengambil data untuk ditampilkan.
  • Mengupdate dan menghapus data.

Perintah Penting

  • CREATE TABLE → membuat tabel.
  • INSERT INTO → memasukkan data.
  • SELECT → mengambil data.
  • UPDATE → memperbarui data.
  • DELETE → menghapus data.

Contoh

CREATE TABLE pengguna (
  id INT PRIMARY KEY,
  nama VARCHAR(50),
  umur INT
);

INSERT INTO pengguna (id, nama, umur) VALUES (1, 'Andi', 20);

SELECT * FROM pengguna;

10. Laravel (Framework PHP)

(ilustrasi LARAVEL)

Laravel adalah framework PHP modern yang sangat populer. Dibuat agar proses membangun web lebih cepat, aman, dan rapi dengan konsep MVC (Model-View-Controller).

Fungsi Utama

  • Membuat aplikasi web dengan struktur rapi.
  • Mendukung routing, middleware, autentikasi, keamanan.
  • ORM (Eloquent) untuk interaksi dengan database.
  • Blade templating engine untuk membuat tampilan dinamis.
  • Artisan CLI (Command Line Interface) untuk otomasi tugas.

Perintah/Fitur Penting

  • Routing: Mengatur URL dan aksi.

        Route::get('/home', function () {
            return view('home');
        });
  • Controller: Menangani logika bisnis.
        class UserController extends Controller {
            public function index() {
                return User::all();
            }
        }
  • Blade Template: Membuat tampilan.
    <h1>Halo, {{ $nama }}</h1>Migration: Mengelola struktur database.
    php artisan make:migration create_users_table

10. CODEIGNITER (Framework PHP)

(ilustrasi Codeigniter)
CodeIgniter adalah framework PHP ringan yang mudah dipelajari. Cocok untuk pemula yang ingin membangun web dengan cepat.

Fungsi Utama

  • Membuat aplikasi web cepat dengan footprint kecil.
  • Mendukung pola MVC.
  • Dokumentasi sederhana dan mudah dipahami.
  • Sangat ringan dibanding Laravel.

Perintah/Fitur Penting

  • Routing: Mengatur URL ke controller.
    $route['default_controller'] = 'Welcome';

  • Controller: Logika aplikasi.

    class Hello extends CI_Controller {

        public function index() {

            echo "Halo dari CodeIgniter!";

        }

    }

  • View: Menampilkan data.
    <h1>Halo, <?= $nama; ?></h1>
  • Model: Interaksi dengan database.

    class User_model extends CI_Model {
        public function getUsers() {
            return $this->db->get('users')->result_array();
        }
    }

12. React.js (Library JavaScript)

(ilustrasi react.js)

React.js adalah library JavaScript yang dibuat oleh Facebook. Digunakan untuk membangun antarmuka pengguna (UI) yang interaktif dengan konsep komponen.

Fungsi Utama

  • Membuat UI interaktif dengan Virtual DOM.
  • Konsep komponen → tampilan dibangun dari potongan kecil.
  • Mendukung SPA (Single Page Application).
  • Banyak dipakai di aplikasi modern (Instagram, Facebook, Netflix).

Perintah/Fitur Penting

  • Komponen: Bagian kecil UI yang bisa digunakan ulang.

    function Halo(props) {
      return <h1>Halo, {props.nama}</h1>;
    }

  • State: Menyimpan data dinamis.

    const [count, setCount] = useState(0);

  • Props: Mengirim data antar komponen.

    <Halo nama="Andi" />

  • Event Handling: Menangani klik, input, dll.

    <button onClick={() => setCount(count + 1)}>Tambah</button>

13. Vue.js (Framework JavaScript)

(ilustrasi vue.js)

Vue.js adalah framework front-end yang sederhana, ringan, dan mudah dipelajari. Cocok untuk membangun UI interaktif.

Fungsi Utama

  • Lebih mudah dipelajari dibanding React/Angular.
  • Menggunakan template berbasis HTML.
  • Mendukung reaktivitas data otomatis.

Contoh

<div id="app">

  <p>{{ pesan }}</p>

</div>


<script>

new Vue({

  el: '#app',

  data: {

    pesan: 'Halo dari Vue!'

  }

});

</script>


Manfaat & Dampak bagi Manusia 

Manfaatnya:


  1. Akses informasi tanpa batas→ dengan web, semua orang bisa belajar apa                               saja dari mana saja.
  2. Pendidikan                 → platform e-learning memperluaskesempatan                               belajar.
  3. Ekonomi digital            → e-commerce, fintech, dan startup membuka                               peluang usaha.
  4. Komunikasi global          → media sosial & aplikasi web mempercepat                                 interaksi.
  5. Lapangan kerja             → profesi baru muncul: web developer, data                               scientist, UI/UX designer.
  6. Efisiensi kerja            → sistem web mempercepat administrasi,                                   bisnis, pemerintahan.

Dampak

Positif

  • Inovasi teknologi semakin cepat.
  • Dunia semakin terhubung.
  • Ekonomi digital tumbuh pesat.

Negatif

  • Ketergantungan teknologi, manusia cenderung malas interaksi langsung.
  • Ancaman keamanan (hacking, pencurian data).
  • Penyebaran konten negatif (hoaks, penipuan, cyberbullying).

Kesimpulan

Pembuatan web adalah hasil kolaborasi berbagai bahasa, Setiap bahasa memiliki perintah dasar (variabel, fungsi, kondisi, looping) yang harus dipahami. Web membawa manfaat besar dalam pendidikan, ekonomi, komunikasi, dan pekerjaan, tetapi juga punya dampak negatif yang harus diantisipasi dengan literasi digital dan keamanan siber.

  • HTML, CSS, JavaScript → tampilan (Front-End).
  • PHP, Python, Ruby, Java, C# → logika & server (Back-End).
  • SQL → penyimpanan data (Database).

Waktu untuk Shalat Jumat

Tidak terasa, waktu menunjukkan pukul 11.30. Kami pun bersiap-siap menuju masjid untuk melaksanakan shalat Jumat berjamaah. Rasanya tenang sekali bisa meluangkan waktu sejenak untuk ibadah di tengah padatnya kegiatan.

Tugas Siang Hari

Setelah istirahat, pukul 13.00 kami diberi tugas untuk membuat laporan kegiatan dari pagi hingga sore. Tugas ini cukup menantang karena harus detail, tapi di sisi lain juga bermanfaat untuk melatih keterampilan menulis laporan.

Waktu berjalan cepat, hingga akhirnya pukul 16.00 kami beres-beres lab dan bersiap untuk pulang.

Dimas Novianto

Diposting oleh Dimas Novianto

Posting Komentar

0 Komentar