Uncategories Pemrograman Web 1 - Tools Pengembangan Web

Pemrograman Web 1 - Tools Pengembangan Web

3:00 PM
https://www.binar.co.id/blog/apa-itu-client-server

Tujuan

Setelah mengikuti pertemuan ini, mahasiswa diharapkan mampu:

  1. Menjelaskan konsep client-server dalam pemrograman web.

  2. Mengidentifikasi perbedaan antara front-end dan back-end.

  3. Mengenal dan menginstal tools pengembangan web (VS Code, XAMPP/Laragon, Browser DevTools).

  4. Memahami struktur dasar aplikasi web.

Materi Pembelajaran

1. Konsep Client-Server

  • Client: perangkat atau aplikasi yang meminta layanan (browser: Chrome, Firefox, Edge).

  • Server: komputer atau aplikasi yang memberikan layanan (web server: Apache, Nginx).

  • Alur komunikasi:

    • Client mengirim request (misalnya membuka URL).

    • Server memproses dan mengirim response (halaman HTML, data JSON, dsb).

  • Contoh sederhana:

    • Mahasiswa membuka http://localhost/index.php di browser → client.

    • XAMPP/Laragon menjalankan Apache + PHP + MySQL → server.

2. Front-End vs Back-End

  • Front-End (Client-Side):

    • Bahasa: HTML, CSS, JavaScript.

    • Bertugas menampilkan tampilan antarmuka (UI).

    • Contoh: layout halaman, warna, font, tombol, navigasi.

  • Back-End (Server-Side):

    • Bahasa: PHP, Python, Node.js, dsb.

    • Bertugas memproses logika, mengakses database, autentikasi.

    • Contoh: memproses login, menyimpan data pendaftaran, menampilkan data produk dari database.

3. Tools untuk Pengembangan Web

  • Code Editor – Visual Studio Code

    • Fitur: syntax highlighting, extensions (PHP, Bootstrap, Prettier), Git integration.

    • Praktikum: membuka VS Code, membuat file index.html.

  • Web Server – XAMPP/Laragon

    • XAMPP: Apache (server), MySQL (database), PHP.

    • Laragon: ringan, auto virtual host, mendukung PHP/MySQL.

    • Praktikum: install XAMPP/Laragon, menjalankan Apache & MySQL.

  • Browser DevTools

    • Tersedia di Chrome/Firefox (klik kanan > Inspect).

    • Fitur: melihat struktur HTML, CSS, network request, debugging error.

    • Praktikum: inspect sebuah website sederhana (misalnya google.com).

4. Struktur Dasar Aplikasi Web

  • Folder utama (htdocs di XAMPP / www di Laragon).

    • index.html → halaman utama.

    • style.css → file styling.

    • script.js → file JavaScript.

    • config.php → konfigurasi database (jika ada).

  • Contoh struktur project sederhana:

    myproject/
├── index.html
├── about.html
├── css/
│   └── style.css
├── js/
│   └── script.js
├── images/
│   └── logo.png
└── php/
    └── process.php

  • Alur kerja sederhana:

    • User membuka index.html.

    • File HTML memanggil CSS/JS.

    • Jika ada interaksi (form), data dikirim ke process.php.

    • process.php memproses data ke database MySQL.

    • Hasil dikirim kembali ke user dalam bentuk halaman.

Latihan 

  1. Buat folder project di htdocs (misalnya: web1).

  2. Buat file index.html dengan konten sederhana:

    <!DOCTYPE html>
<html>
<head>
    <title>Pertemuan 1</title>
</head>
<body>
    <h1>Halo, ini halaman pertama saya!</h1>
    <p>Belajar Web Programming - Pertemuan 1</p>
</body>
</html>

  3. Jalankan di browser dengan http://localhost/web1/index.html.

Fajar Baskoro

Share this

Related Posts

Next
« Prev Post
Previous
Next Post »
Subscribe to: Post Comments (Atom)