Pemrograman Web Vs Mobile?

Modul Lengkap Pemrograman Web & Perangkat Bergerak Kelas XII

Modul ini dirancang sebagai bahan ajar lengkap untuk siswa SMK kelas XII pada mata pelajaran Pemrograman Web dan Perangkat Bergerak. Materi mencakup teori, praktik, contoh kode, serta persiapan lingkungan pengembangan profesional.

---

Pengenalan Pemrograman Web & Perangkat Bergerak

1. Pengertian Pemrograman Web

Pemrograman web adalah proses pembuatan aplikasi atau sistem yang berjalan melalui browser internet dengan menggunakan teknologi web seperti HTML, CSS, dan JavaScript. Aplikasi web dapat diakses menggunakan berbagai perangkat tanpa perlu instalasi khusus.

Contoh aplikasi web:

• Website sekolah
• Sistem informasi akademik
• Marketplace online
• Dashboard admin

2. Pengertian Pemrograman Perangkat Bergerak

Pemrograman perangkat bergerak (mobile programming) adalah proses pembuatan aplikasi yang dijalankan pada perangkat mobile seperti smartphone dan tablet. Aplikasi ini biasanya dibuat khusus untuk sistem operasi tertentu.

Contoh aplikasi mobile:

• Aplikasi e-learning
• Aplikasi kasir (POS)
• Aplikasi pesan instan

3. Perbedaan Web dan Mobile

Aspek	Web	Mobile
Cara Akses	Browser	Aplikasi
Instalasi	Tidak perlu	Perlu
Akses Hardware	Terbatas	Penuh

---

Bahasa Pemrograman dan Perbedaannya

1. HTML

HTML bukan bahasa pemrograman, melainkan bahasa markup untuk membangun struktur halaman web.

<h1>Halo Dunia</h1>
<p>Ini paragraf pertama</p>

2. CSS

CSS digunakan untuk mengatur tampilan dan desain halaman web.

body {
  background-color: lightblue;
}

3. JavaScript

JavaScript adalah bahasa pemrograman yang membuat web menjadi interaktif.

alert("Halo dari JavaScript");

4. PHP

PHP adalah bahasa server-side yang sering digunakan untuk aplikasi web dinamis.

<?php
echo "Halo dari PHP";
?>

5. Python

Python terkenal mudah dipelajari dan sering digunakan untuk backend, AI, dan data science.

print("Halo dari Python")

6. Java

Java adalah bahasa pemrograman populer untuk aplikasi enterprise dan Android.

System.out.println("Halo dari Java");

7. Kotlin

Kotlin adalah bahasa modern pengganti Java untuk Android.

println("Halo dari Kotlin")

8. Dart

Dart digunakan untuk framework Flutter agar satu kode bisa berjalan di Android, iOS, dan Web.

print("Halo dari Dart");

9. C#

C# digunakan pada platform .NET, game (Unity), dan aplikasi desktop.

Console.WriteLine("Halo dari C#");

---

Instalasi Tools & Lingkungan Pengembangan

1. Android Studio

Android Studio adalah IDE resmi untuk membuat aplikasi Android.

2. Visual Studio Code (VS Code)

Visual Studio Code adalah editor kode ringan, cepat, dan mendukung banyak bahasa pemrograman.

Kelebihan VS Code:

• Gratis & open source
• Ringan dan cepat
• Banyak ekstensi

3. XAMPP

XAMPP digunakan untuk menjalankan server web lokal.

4. Node.js

Node.js memungkinkan JavaScript berjalan di sisi server.

node server.js

---

Studi Kasus Sederhana

Siswa diminta membuat halaman web sederhana yang menampilkan data sekolah, lalu dikembangkan menjadi aplikasi mobile di pertemuan lanjutan.

Tugas Siswa – Pemrograman Web & Perangkat Bergerak

Petunjuk Umum:
Kerjakan tugas berikut secara mandiri. Setiap tugas bertujuan untuk melatih pemahaman konsep, logika berpikir, serta kemampuan praktik dasar pemrograman web dan perangkat bergerak.

Tugas 1 – Pemahaman Konsep (Pertemuan 1)

Jawablah pertanyaan berikut dengan bahasa sendiri di buku catatan atau dokumen digital:

1. Apa yang dimaksud dengan pemrograman web?
2. Apa yang dimaksud dengan pemrograman mobile?
3. Sebutkan minimal 3 perbedaan antara aplikasi web dan aplikasi mobile.
4. Mengapa HTML tidak disebut sebagai bahasa pemrograman?
5. Sebutkan contoh aplikasi web dan aplikasi mobile yang sering kamu gunakan!

Tugas 2 – Identifikasi Bahasa Pemrograman

Lengkapi tabel berikut berdasarkan pemahamanmu:

• HTML → Digunakan untuk: …
• CSS → Digunakan untuk: …
• JavaScript → Digunakan untuk: …
• PHP → Digunakan untuk: …
• Kotlin → Digunakan untuk: …
• Python → Digunakan untuk: …

Tujuan tugas: Agar siswa memahami fungsi dan perbedaan setiap bahasa pemrograman.

Tugas 3 – Praktik HTML Dasar

Buatlah sebuah file bernama index.html yang berisi:

• Judul halaman bertuliskan nama lengkap kamu
• 1 paragraf tentang cita-cita kamu
• 1 tombol yang ketika diklik menampilkan pesan (gunakan JavaScript)

Contoh minimal:

<h1>Nama Lengkap</h1>
<p>Saya bercita-cita menjadi...</p>
<button onclick="alert('Halo!')">Klik Saya</button>

Tugas 4 – Instalasi Tools

Lakukan instalasi software berikut di komputer atau laptop kamu:

1. Visual Studio Code
2. Android Studio
3. XAMPP atau Node.js

Setelah instalasi, buat laporan singkat berisi:

• Nama software yang diinstal
• Versi software
• Screenshot hasil instalasi
• Kendala yang dialami (jika ada)

Tugas 5 – Refleksi Pembelajaran

Jawablah pertanyaan refleksi berikut:

1. Apa materi yang paling kamu pahami dari pertemuan ini?
2. Bagian mana yang masih sulit dipahami?
3. Bahasa pemrograman apa yang paling menarik menurut kamu? Mengapa?

Kriteria Penilaian:

• Kelengkapan jawaban
• Kesesuaian dengan materi
• Kerapian dan kejelasan penulisan
• Ketepatan waktu pengumpulan