Panduan Praktikum

# Git untuk Kolaborasi
Tim Web Development

Version Control & Workflow Mahasiswa
Program Studi Informatika — UNTAN
Mata Kuliah Pemrograman Web
Semester Genap 2025/2026

## Agenda Materi

Overview
1

### Apa itu Git?

Konsep dasar version control & mengapa penting

2

### Perintah Utama Git

init, clone, add, commit, push, pull, branch, merge

3

### Branch & Workflow

Strategi branch per kelompok, feature branch

4

### Pull Request & Review

Cara submit tugas via PR di GitHub

5

### Konflik & Cara Selesaikannya

Merge conflict, cara baca dan resolve

6

### Praktik: Tugas Kelompok

Setup repo, clone starter kit, submit PR

02 / 14

## Apa itu Git?

Konsep Dasar
Definisi

Git adalah sistem version control terdistribusi yang mencatat setiap perubahan pada file sehingga banyak orang bisa bekerja di proyek yang sama secara bersamaan tanpa saling menimpa pekerjaan satu sama lain.

— Linus Torvalds, 2005 (awalnya dibuat untuk kernel Linux)
📸

### Snapshot

Setiap commit = foto kondisi seluruh project di waktu tersebut. Bisa kembali ke mana saja.

🌐

### Terdistribusi

Setiap anggota punya salinan penuh riwayat. Tidak bergantung pada satu server pusat.

🔀

### Branch

Kerjakan fitur di branch terpisah, lalu gabungkan ke branch utama tanpa risiko merusak.

03 / 14

## Kenapa Perlu Git?

Motivasi

Aspek | ❌ Tanpa Git | ✅ Dengan Git
--- | --- | ---
Kolaborasi | Kirim file via WhatsApp, saling tindih | Push ke repo, merge via PR
Riwayat perubahan | index_v1.html, index_v2_fix.html… | git log — riwayat lengkap dengan pesan
Rollback | Tidak bisa, file sudah ditimpa | git checkout <commit> kapan saja
Paralelisme | Harus menunggu giliran mengerjakan | Tiap orang kerja di branch sendiri
Review kode | Tidak ada mekanisme formal | Pull Request + komentar per baris

04 / 14

## Tiga Area Git

Konsep
📝

### Working Directory

Folder di komputer kamu. Tempat kamu mengedit file secara langsung. Perubahan di sini belum "diketahui" Git.

Belum dilacak
📦

### Staging Area

Area "antrian" sebelum commit. Kamu memilih file mana yang akan masuk ke snapshot berikutnya.

git add
🗄️

### Repository (.git)

Database permanen Git. Setelah commit, snapshot tersimpan di sini dan tidak hilang.

git commit
💡

#### Alur dasar

`edit file` → `git add` → `git commit` → `git push`

05 / 14

## Perintah Utama Git

Command Reference
# 1. Ambil repo dari GitHub git clone https://github.com/org/repo.git # 2. Lihat status perubahan git status # 3. Tambah ke staging git add index.html style.css git add . # semua file # 4. Simpan snapshot git commit -m "feat: tambah halaman profil" # 5. Kirim ke GitHub git push origin feature/kelompok-02
# 6. Ambil update dari remote git pull origin main # 7. Buat branch baru git checkout -b feature/kelompok-02 # 8. Pindah branch git checkout main # 9. Lihat riwayat commit git log --oneline # 10. Lihat perbedaan git diff
06 / 14

## Strategi Branch

Workflow Tim
main
← tag: v1.0
group-01
→ PR → merge ke main
group-02
→ PR → merge ke main
✅

#### Aturan Branch

Setiap kelompok kerja di branch group-XX. Jangan pernah push langsung ke `main`.

⚠️

#### Batasan Edit

Hanya edit file di folder `groups/group-XX/`. File lain adalah tanggung jawab dosen.

07 / 14

## Pesan Commit yang Baik

Konvensi
Format Conventional Commits

`<type>(scope): deskripsi singkat`

Type | Digunakan untuk
--- | ---
`feat` | Menambah fitur baru
`fix` | Memperbaiki bug
`docs` | Mengubah dokumentasi
`style` | Format/CSS (bukan logika)
`chore` | Maintenance, update aset

# ✅ BAIK — spesifik dan bermakna feat(group-02): tambah tabel jadwal kuliah fix(group-02): perbaiki link gambar hero style(group-02): sesuaikan warna heading # ❌ BURUK — tidak informatif update fix bug asdfgh coba commit lagi
💡

#### Tips Praktis

Bayangkan melengkapi kalimat: "Jika commit ini diterapkan, ia akan ____"

08 / 14

## Pull Request — Cara Submit Tugas

GitHub Workflow
1

#### Fork atau Clone Repo Starter Kit

`git clone https://github.com/if-untan/web-tugas-kelompok.git` — lalu masuk ke folder project

2

#### Buat Branch Kelompok

`git checkout -b group-02` — satu branch per kelompok, jangan share branch

3

#### Edit di Folder Kelompok & Commit

Edit `groups/group-02/index.html`, kemudian `git add . && git commit -m "feat(group-02): …"`

4

#### Push ke GitHub

`git push origin group-02` — lalu buka GitHub, klik "Compare & pull request"

5

#### Isi Deskripsi PR & Submit

Sebutkan nama kelompok, anggota, dan ringkasan halaman yang dibuat. Dosen akan review & merge.

09 / 14

## Merge Conflict

Problem Solving
Apa itu?

Conflict terjadi ketika dua orang mengubah baris yang sama di file yang sama secara bersamaan.

<<<<<<< HEAD (perubahan kamu) <h1>Judul Versi Saya</h1> ======= <h1>Judul Versi Teman</h1> >>>>>>> group-03/edit-halaman

Git tidak tahu mana yang benar — kamu yang memutuskan.

### Langkah Resolve

1

#### Buka file yang conflict

Cari tanda `<<<<<<<` di editor

2

#### Pilih atau gabungkan keduanya

Hapus marker conflict, tulis versi final yang disepakati

3

#### Add & commit ulang

`git add . && git commit -m "fix: resolve conflict"`

🛡️

#### Pencegahan terbaik

Tiap kelompok hanya edit folder `group-XX`-nya sendiri → conflict tidak mungkin terjadi.

10 / 14

## File .gitignore

Best Practice
Fungsi

Memberitahu Git file apa yang tidak perlu dilacak — biasanya file besar, file generated, atau file rahasia.

# File sistem / editor .DS_Store .vscode/ Thumbs.db # Dependensi (bisa di-install ulang) node_modules/ # File build/generated dist/ *.min.js # Jangan commit password! .env

### Aturan Penulisan

- `*.log` — abaikan semua file `.log`
- `folder/` — abaikan seluruh folder
- `!penting.log` — pengecualian (tetap track)
- `#` — baris komentar

⚠️

#### File sudah terlanjur di-commit?

Menambahkan ke .gitignore tidak menghapusnya dari riwayat. Gunakan `git rm --cached nama-file` lalu commit.

🔗

#### Template siap pakai

github.com/github/gitignore — template untuk berbagai bahasa & framework

11 / 14

## Setup Praktikum Hari Ini

Hands-On

### Langkah Persiapan

1

#### Install Git

git-scm.com/downloads — cek dengan `git --version`

2

#### Konfigurasi Identitas

`git config --global user.name "Nama"`
`git config --global user.email "email@untan.ac.id"`

3

#### Daftar / Login GitHub

Buka github.com, buat akun dengan email kampus

4

#### Clone Starter Kit

Link repo akan dibagikan dosen — gunakan `git clone <url>`

### Struktur Starter Kit

web-tugas-kelompok/ ├── assets/ │ └── global/ │ ├── hero.webp │ ├── logo.png │ └── footer.png ├── groups/ │ ├── group-01/ │ │ ├── index.html ← edit di sini │ │ └── style.css ← styling tambahan │ ├── group-02/ ... │ └── group-05/ ... ├── .gitignore ├── package.json (vite dev server) └── README.md
12 / 14

## Git Cheat Sheet

Referensi Cepat

Perintah | Fungsi
--- | ---
`git clone <url>` | Unduh repo dari GitHub
`git status` | Lihat file yang berubah
`git add .` | Staging semua perubahan
`git commit -m "…"` | Simpan snapshot
`git push origin <branch>` | Kirim ke GitHub
`git pull origin main` | Update dari remote

Perintah | Fungsi
--- | ---
`git checkout -b <nama>` | Buat & pindah branch
`git branch` | Lihat daftar branch
`git log --oneline` | Riwayat commit ringkas
`git diff` | Lihat perbedaan belum di-stage
`git stash` | Simpan sementara perubahan
`git restore <file>` | Batalkan perubahan file

📖 Pro Git Book: git-scm.com/book 🎮 Latihan Interaktif: learngitbranching.js.org 🐙 Referensi: docs.github.com
13 / 14

## Tugas Kelompok

Assessment

### Yang Harus Dikerjakan

- Clone starter kit yang diberikan dosen
- Buat branch dengan nama group-XX sesuai nomor kelompok
- Edit konten di `groups/group-XX/index.html` dalam area `#assignment-body`
- Buat minimal 3 commit dengan pesan yang bermakna
- Push branch ke GitHub dan buat Pull Request
- Isi deskripsi PR dengan nama anggota & ringkasan konten

### Kriteria Penilaian

Aspek | Bobot
--- | ---
Kualitas konten HTML | 40%
Commit message yang baik | 20%
Jumlah commit (≥ 3) | 20%
PR description lengkap | 20%

📅

#### Deadline

PR harus disubmit sebelum pertemuan berikutnya. Late submission tidak diterima.

14 / 14