BLANTERVIO104
Home› coding› Coding Pertemuan 2

Coding Pertemuan 2

Coding Pertemuan 2
Kamis, 05 Februari 2026

PERTEMUAN 2

Pengantar Pemrograman Web Berbasis AI (Untuk Pemula)

Identitas Pertemuan

  • Mata Kuliah: Coding & Computational Thingking

  • Pertemuan: 2

  • Durasi: 2 × 50 menit (100 menit)

  • Capaian Pembelajaran:
    Mahasiswa mampu memahami alur perkuliahan, konsep dasar web, serta peran AI Tools dalam membantu proses belajar dan pengembangan aplikasi web sederhana.

A. Pendahuluan

Pada pertemuan pertama ini, mahasiswa belum dituntut menulis kode secara kompleks. Fokus utama adalah membangun mindset, pemahaman konsep, dan kesiapan tools.

Web programming adalah fondasi utama dari banyak sistem digital saat ini, seperti:

  • Sistem PPDB

  • Website sekolah/kampus

  • Sistem absensi online

  • Aplikasi ujian dan penilaian

Dengan bantuan AI Tools, proses belajar pemrograman menjadi:

  • Lebih cepat

  • Lebih terarah

  • Lebih mudah dipahami oleh pemula

B. Kontrak Kuliah

1. Aturan Umum Perkuliahan

  • Kehadiran minimal 75%

  • Tugas dan project wajib dikumpulkan

  • Tidak ada plagiarisme (AI boleh, menyalin mentah tidak boleh)

  • Aktif bertanya dan berdiskusi

2. Sistem Penilaian

  • Tugas & Praktik Mingguan: 40%

  • UTS: 10%

  • Project Akhir: 30%

  • UAS / Presentasi: 20%

3. Peran AI dalam Perkuliahan

AI digunakan sebagai:

  • Asisten belajar

  • Pembantu debugging

  • Generator ide & struktur kode

AI bukan pengganti mahasiswa, tetapi alat bantu.

C. Konsep Dasar Website

1. Apa itu Website?

Website adalah kumpulan halaman digital yang dapat diakses melalui internet menggunakan browser.

Contoh website:

  • Google.com

  • Sistem akademik kampus

  • Website sekolah

2. Komponen Utama Website

a. Frontend (Tampilan)

Bagian yang dilihat oleh pengguna

  • HTML → Struktur

  • CSS → Tampilan

  • JavaScript → Interaksi

b. Backend (Logika & Data)

Bagian yang berjalan di server

  • PHP, Node.js, Python, dll

  • Database (MySQL, Firebase, dll)

Pada mata kuliah ini, fokus utama adalah Frontend + logika dasar, lalu bertahap ke integrasi data.

D. Cara Kerja Website (Alur Sederhana)

  1. User membuka browser

  2. User mengetik alamat website

  3. Browser meminta data ke server

  4. Server mengirim HTML, CSS, dan JavaScript

  5. Browser menampilkan halaman

Ilustrasi sederhana:

User → Browser → Server → Browser → Tampilan

E. Pengenalan Bahasa Dasar Web

1. HTML (HyperText Markup Language)

  • Digunakan untuk membuat struktur halaman

  • Contoh elemen: judul, paragraf, form

Contoh sederhana:

<h1>Halo Dunia</h1>
<p>Ini adalah website pertama saya</p>

2. CSS (Cascading Style Sheets)

  • Mengatur warna, ukuran, dan tata letak

Contoh:

h1 {
  color: blue;
}

3. JavaScript

  • Membuat website interaktif

Contoh:

<script>
alert('Selamat datang');
</script>

F. Apa itu AI Tools dalam Pemrograman?

1. Definisi AI Tools

AI Tools adalah alat berbasis kecerdasan buatan yang membantu manusia menyelesaikan tugas, termasuk menulis dan memahami kode.

2. Contoh AI Tools

  • ChatGPT

  • GitHub Copilot

  • Google Gemini

  • Deepseek AI

3. Manfaat AI untuk Pemula

  • Menjelaskan kode dengan bahasa sederhana

  • Membantu memperbaiki error

  • Membuat contoh program

4. Contoh Prompt yang Benar

❌ Salah:

Buatkan program

✅ Benar:

Buatkan contoh HTML sederhana untuk form pendaftaran siswa dengan penjelasan

G. Etika dan Strategi Menggunakan AI

1. Etika

  • Pahami kode yang diberikan AI

  • Jangan copy–paste tanpa belajar

  • Modifikasi hasil AI sesuai kebutuhan

2. Strategi Efektif

  • Tanyakan satu masalah spesifik

  • Minta penjelasan langkah demi langkah

  • Gunakan AI sebagai tutor, bukan mesin jawaban

H. Tools yang Digunakan

1. Browser

  • Google Chrome (disarankan)

2. Code Editor

  • Visual Studio Code

  • Notepad ++

3. Akun Pendukung

  • Akun Google

  • Akun ChatGPT

I. Praktik Awal (Hands-On Ringan)

Latihan 1: Mengenal File HTML

  1. Unduh Notepad++ lalu instal dan buka aplikasinya

  2. Ketik kode berikut:

        <!DOCTYPE html>
        <html>
        <head>
          <title>Website Pertamaku</title>
        </head>
        <body>
          <h1>Halo Mahasiswa</h1>
          <p>Saya siap belajar web dengan AI</p>
        </body>
        </html>

  1. Save file ketik nama file dan pilih type HTML

  2. Buka file dengan browser untuk review

  3. editlah sesuai keinginan.

  4. Penambahan kode css dan script ;

    <!DOCTYPE html>
<html>
<head>
    <title>Website Pertamaku</title>

    <!-- ===== BAGIAN STYLE / CSS ===== -->
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f6f8;
            text-align: center;
            padding-top: 50px;
        }

        h1 {
            color: #2c3e50;
        }

        p {
            color: #555;
            font-size: 16px;
        }

        .box {
            background: white;
            width: 60%;
            margin: auto;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }

        button {
            margin-top: 15px;
            padding: 10px 20px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        button:hover {
            background-color: #2980b9;
        }
    </style>
    <!-- ===== AKHIR STYLE / CSS ===== -->
</head>

<body>

    <!-- ===== BAGIAN HTML ===== -->
    <div class="box">
        <h1>Halo Mahasiswa</h1>
        <p>Saya siap belajar web dengan AI</p>
        <p>Hai perkenalkan saya adalah seorang penggemar blog</p>

        <button onclick="tampilkanPesan()">Klik Saya</button>
    </div>
    <!-- ===== AKHIR HTML ===== -->

    <!-- ===== BAGIAN JAVASCRIPT ===== -->
    <script>
        function tampilkanPesan() {
            alert("Terima kasih! Anda sudah menjalankan JavaScript 😊");
        }
    </script>
    <!-- ===== AKHIR JAVASCRIPT ===== -->

</body>
</html>

J. Evaluasi Pertemuan 2

Mahasiswa mampu:

  • Menjelaskan apa itu website

  • Menyebutkan fungsi HTML, CSS, JavaScript

  • Menjelaskan peran AI dalam pemrograman

  • Membuat file HTML sederhana

K. Tugas Mandiri

  1. Buat rangkuman materi pertemuan 1 (minimal 1 halaman)

  2. Buat 1 file HTML berisi:

    • Judul

    • Paragraf perkenalan diri

  3. Jelaskan (dengan bahasa sendiri):

    Bagaimana AI dapat membantu saya belajar pemrograman web

L. Penutup

Pertemuan pertama adalah fondasi. Tidak perlu takut dengan kode.

Prinsip utama: pahami konsep → latihan → bertanya → ulangi

Pada pertemuan selanjutnya, mahasiswa mulai membangun form web sederhana secara nyata.

Share This Article :
M. Abdun Jamil, M.Pd

Saya adalah seorang peminat designer blog/website, maklum masih tahap belajar. Seorang designer blog membutuhkan proses yang panjang, butuh ketelitian, kesabaran, keuletan dan yang pasti jangan menyerah, do the best.

Tambah Komentar

5784226817459633728