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

Git untuk KolaborasiTim Web Development

Agenda Materi

Apa itu Git?

Perintah Utama Git

Branch & Workflow

Pull Request & Review

Konflik & Cara Selesaikannya

Praktik: Tugas Kelompok

Apa itu Git?

Snapshot

Terdistribusi

Branch

Kenapa Perlu Git?

Tiga Area Git

Working Directory

Staging Area

Repository (.git)

Alur dasar

Perintah Utama Git

Strategi Branch

Aturan Branch

Batasan Edit

Pesan Commit yang Baik

Tips Praktis

Pull Request — Cara Submit Tugas

Fork atau Clone Repo Starter Kit

Buat Branch Kelompok

Edit di Folder Kelompok & Commit

Push ke GitHub

Isi Deskripsi PR & Submit

Merge Conflict

Langkah Resolve

Buka file yang conflict

Pilih atau gabungkan keduanya

Add & commit ulang

Pencegahan terbaik

File .gitignore

Aturan Penulisan

File sudah terlanjur di-commit?

Template siap pakai

Setup Praktikum Hari Ini

Langkah Persiapan

Install Git

Konfigurasi Identitas

Daftar / Login GitHub

Clone Starter Kit

Struktur Starter Kit

Git Cheat Sheet

Tugas Kelompok

Yang Harus Dikerjakan

Kriteria Penilaian

Deadline

Git untuk Kolaborasi
Tim Web Development