Pengenalan Web Development dan Setup Environment

Pada pertemuan pertama ini kita akan memahami gambaran umum bagaimana sebuah website bekerja serta menyiapkan lingkungan pengembangan yang akan digunakan selama perkuliahan.

Tujuan Pembelajaran

Setelah mengikuti materi ini mahasiswa diharapkan mampu:

  • Memahami konsep dasar web development
  • Memahami perbedaan client dan server
  • Mengenal teknologi dasar web (HTML, CSS, PHP)
  • Menyiapkan lingkungan pengembangan web

1. Apa itu Web Development?

Web Development adalah proses pembuatan aplikasi atau website yang dapat diakses melalui browser.

Website yang kita akses setiap hari seperti:

  • Google
  • Instagram
  • Wikipedia
  • Portal berita
  • Sistem akademik kampus

dibangun menggunakan teknologi web.

2. Cara Kerja Website

Secara sederhana website bekerja dengan model Client – Server.

Alurnya seperti berikut:

  1. User membuka browser
  2. User mengakses alamat website
  3. Browser mengirim request ke server
  4. Server mengirimkan halaman web
  5. Browser menampilkan halaman tersebut

Cara kerja website

3. Teknologi Dasar Web

Dalam pengembangan web terdapat beberapa teknologi utama.

HTML

HTML digunakan untuk membuat struktur halaman web.

Contoh:

  • Judul
  • Paragraf
  • Gambar
  • Link

CSS

CSS digunakan untuk mengatur tampilan halaman web.

Contoh:

  • Warna
  • Layout
  • Font
  • Spacing

PHP

PHP adalah bahasa pemrograman server-side yang digunakan untuk membuat website menjadi dinamis.

Contoh:

  • Login
  • Sistem komentar
  • Penyimpanan data
  • Pengolahan form

4. Tools yang Digunakan

Dalam mata kuliah ini kita akan menggunakan beberapa tools berikut.

1. Text Editor

Digunakan untuk menulis kode program.

Rekomendasi:

  • Visual Studio Code

VS Code

sumber: code.visualstudio.com

2. Web Browser

Digunakan untuk menjalankan dan melihat hasil website.

Contoh:

  • Google Chrome
  • Mozilla Firefox

3. Web Server Lokal

Karena kita akan menggunakan PHP, kita membutuhkan web server lokal.

Beberapa pilihan:

  • XAMPP
  • Laragon

Dalam perkuliahan ini kita akan menggunakan Laragon.

XAMPP Control Panel sumber: www.ahmadsanusi.com

5. Instalasi Laragon

Langkah instalasi:

  1. Download Laragon dari website resmi

https://laragon.org/

  1. Jalankan installer

  2. Install komponen:

    • Apache
    • MySQL
    • PHP

  3. Jalankan Laragon dari Laragon Control Panel

6. Struktur Folder Web

Pada XAMPP terdapat folder utama untuk menyimpan project web yaitu:

htdocs

Contoh struktur project:

htdocs/
web-dasar/
index.html

7. Membuat Halaman Web Pertama

Buat file:

index.html

Isi dengan kode berikut:

<!DOCTYPE html>
<html>
<head>
    <title>Website Pertama</title>
</head>
<body>

<h1>Hello World</h1>
<p>Ini adalah website pertama saya.</p>

</body>
</html>

Simpan file tersebut di folder:

htdocs/web-dasar/

Kemudian buka di browser:

http://localhost/web-dasar

Hasil yang Akan Ditampilkan

Hello world example

Latihan

  1. Buat folder project bernama belajar-web
  2. Buat file index.html
  3. Tampilkan:
Nama
NIM
Program Studi
  1. Tambahkan judul halaman.

Ringkasan

Pada pertemuan ini kita telah mempelajari:

  • Konsep dasar web development
  • Cara kerja website
  • Teknologi dasar web
  • Instalasi tools pengembangan
  • Membuat halaman web pertama

Pada pertemuan berikutnya kita akan mempelajari dasar-dasar HTML.