Panduan Pengajar — Git & GitHub

📋

Ringkasan Sesi (2-3 Jam)

Aliran sesi langkah demi langkah — dari konsep Git hingga kolaborasi dengan Pull Request.

15 min

1. Konsep Git & GitHub (Teori)

Git sebagai sistem kawalan versi. GitHub sebagai platform awan. Analogi "save points" dan "time machine".

20 min

2. Repo Pertama & Local Workflow

git init, git add, git commit. Demo langsung bersama pelajar buat repo pertama.

15 min

3. Push ke GitHub

Cipta repo di GitHub. git remote add, git push. Lihat hasil online.

15 min

4. Breaks & Stretch

Q&A pantas. Semak pelajar yang tertinggal.

25 min

5. Branch & Merge

Konsep branch sebagai "dunia selari". git branch, git checkout, git merge.

25 min

6. Pull Request & Kolaborasi

Fork, clone, buat PR, review, merge. Demo pasangan.

15 min

7. GitHub MCP dalam Claude Code

Cara guna GitHub MCP plugin untuk semak PR, buat isu, dan kolaborasi.

10 min

8. Q&A & Recap

Soalan, cabaran, perbincangan terbuka.

🎬

Demo Script Langkah-demi-Langkah

Script demonstrasi langsung — tunjuk sambil pelajar ikut.

1️⃣

Demo 1: Init, Add, Commit

Repo tempatan pertama — git init → add → commit

▼

🎯 Objektif

Pelajar buat repo git pertama, tambah fail, dan buat commit.

📖 Script

# 1. Buka terminal
mkdir projek-pertama
cd projek-pertama

# 2. Init repositori git
git init

# 3. Check status
git status

# 4. Cipta fail pertama
echo "# Projek Pertama Saya" > README.md
echo "node_modules/" > .gitignore

# 5. Stage fail
git add README.md .gitignore
# Atau add semua: git add .

# 6. Commit dengan mesej
git commit -m "commit pertama: tambah README dan gitignore"

# 7. Semak log
git log --oneline

💡 Apa Yang Berlaku?

git init — cipta folder .git (database repo). git add — stage perubahan. git commit — simpan snapshot ke sejarah.

Tip Pengajar: Suruh pelajar guna git status setiap kali lepas add dan commit. Biasakan mereka tengok status — ini tabiat paling penting dalam Git.

2️⃣

Demo 2: Push ke GitHub

Sambung repo tempatan ke GitHub dan push

▼

🎯 Objektif

Pelajar cipta repo di GitHub dan push kod tempatan ke remote.

📖 Script

# 1. Buka github.com → New repository
# Nama: projek-pertama
# Jangan tick README (dah ada)
# Klik "Create repository"

# 2. Sambung remote
git remote add origin https://github.com/username/projek-pertama.git

# 3. Push ke GitHub
git push -u origin main
# guna 'master' kalau branch utama masih guna master

# 4. Refresh GitHub — kod dah online!

🔄 Kalau Guna Branch Master

# Rename branch ke main (consistency)
git branch -M main
git push -u origin main

Amaran Biasa: Pelajar sering lupa git remote add atau tersalah URL. Ajar mereka guna git remote -v untuk semak remote yang dah ada.

3️⃣

Demo 3: Branch & Merge

Buat branch baru, edit, commit, merge balik

▼

🎯 Objektif

Pelajar faham konsep branch — kerja dalam "dunia selari" tanpa ganggu branch utama.

📖 Script

# 1. Semak branch semasa
git branch

# 2. Buat branch baru
git branch update-readme

# 3. Tukar ke branch baru
git checkout update-readme
# atau satu command: git checkout -b update-readme

# 4. Edit README.md (guna VS Code atau echo)
echo "# Projek Pertama Saya" > README.md
echo "Ini adalah projek pertama saya belajar Git!" >> README.md

# 5. Stage dan commit
git add README.md
git commit -m "update README dengan description"

# 6. Balik ke main
git checkout main

# 7. Merge branch
git merge update-readme

# 8. Padam branch (optional)
git branch -d update-readme

Visual Tip: Lukis papan putih dengan dua garisan — main (garisan utama) dan branch (garisan bercabang). Tunjukkan titik commit di persimpangan merge.

4️⃣

Demo 4: Pull Request

Buat PR, review, dan merge di GitHub

▼

🎯 Objektif

Pelajar buat pull request di GitHub dan merge melalui interface web.

📖 Script

# 1. Buat branch baru
git checkout -b tambah-style

# 2. Cipta fail CSS
echo "body { background: #0b0d17; color: white; }" > style.css

# 3. Commit
git add style.css
git commit -m "tambah style.css asas"

# 4. Push branch ke GitHub
git push -u origin tambah-style

# 5. Buka GitHub → repositori
#    → Akan nampak banner "tambah-style had recent pushes"
#    → Klik "Compare & pull request"

# 6. Isi PR:
#    Title: "Tambah style.css untuk dark theme"
#    Description: "Menambah CSS asas dengan dark theme"
#    → Klik "Create pull request"

# 7. Review PR:
#    → Tab "Files changed" — lihat perubahan
#    → Komen pada line tertentu jika perlu
#    → Klik "Review changes" → "Approve"

# 8. Merge:
#    → Klik "Merge pull request"
#    → Klik "Confirm merge"
#    → "Delete branch" (optional)

Ingatkan Pelajar: PR bukan untuk kod sempurna — ia untuk ajak berbincang. Guna PR awal-awal, bukan tunggu siap semua.

5️⃣

Demo 5: GitHub MCP dalam Claude Code

Guna GitHub MCP plugin untuk semak PR dan urus isu

▼

🎯 Objektif

Tunjukkan bagaimana Claude Code boleh berintegrasi dengan GitHub melalui MCP.

📖 Script

# Dalam Claude Code, pastikan GitHub MCP dah authenticate:
# 1. mcp__github__authenticate
# 2. Login OAuth

# Lepas tu, guna commands macam:

# Semak PR terkini
"Tunjukkan ringkasan pull request terbaru dalam repo ini"

# Buat code review
"Review PR #3 dan bagi feedback berstruktur"

# Cari isu
"List semua open issues dalam repo ini"

# Buat isu baru
"Buat isu baru: 'Tambah dokumentasi cara install'"

# Semak status CI/CD
"Semak status checks untuk PR #3"

⚡ Kenapa Guna MCP?

MCP membolehkan Claude baca kod dalam PR, bagi komen automatik, dan urus isu tanpa perlu buka GitHub — terus dari terminal!

Demo Live: Buka Claude Code, buat PR dummy, dan tunjuk Claude review PR secara langsung. Ini sangat impressive untuk pelajar!

🎬

Demo Script Lengkap — Siap Cakap & Taip

Script demonstrasi penuh dengan apa yang pengajar cakap dan taip — sesuai untuk pengajar yang mahu panduan terperinci.

🧪

Demo 1: First Repo — Dari Init ke Push (15 min)

Demo penuh — dari folder kosong hingga repo live di GitHub

▼

🗣️ Apa Pengajar Cakap

"Version control macam save point dalam game — anda boleh kembali ke mana-mana titik."

⌨️ Apa Pengajar Taip

# 1. Buka terminal — buat folder projek
mkdir repo-pertama
cd repo-pertama

# 2. Init repositori git
git init
# Output: Initialized empty Git repository

# 3. Cipta fail pertama
echo "# Projek Pertama Saya" > README.md
echo "node_modules/" > .gitignore

# 4. Stage fail
git add README.md .gitignore

# 5. Commit pertama
git commit -m "first commit: add README and gitignore"

# 6. Buka browser → github.com → New repository
#    Nama: repo-pertama → Create repository

# 7. Sambung remote
git remote add origin https://github.com/username/repo-pertama.git

# 8. Push ke GitHub
git push -u origin main

✅ Hasil Yang Dijangka

✓ Repo live di GitHub — pelajar boleh lihat dalam browser
✓ README.md dan .gitignore kelihatan di GitHub repo page
✓ Semua fail berjaya diupload ke remote

👀 Apa Yang Ditunjuk

GitHub repo page — tunjuk semua fail dah online
Tab "Code" — tunjuk URL clone
Tab "Commits" — tunjuk sejarah ada 1 commit

💬 Script Alternatif (BM)

"Git ni macam save point dalam game. Setiap kali kau commit,
kau simpan progress. Nak balik ke save point lama? Boleh.
Git pulak, lepas push, simpanan kau ada di GitHub — cloud.
Boleh access dari mana-mana."
          

🧪

Demo 2: Branch & Pull Request (15 min)

Demo penuh — branch, edit, push, PR, review, merge

▼

🗣️ Apa Pengajar Cakap

"Branch macam salinan buku — boleh conteng tanpa rosakkan yang asal."

⌨️ Apa Pengajar Taip

# 1. Pastikan dalam repo dan branch main
cd repo-pertama
git checkout main

# 2. Buat branch baru dan terus tukar
git checkout -b feature-navbar

# 3. Cipta fail baru
echo "nav { background: #333; }" > nav.css
echo 'Home | About' > index.html

# 4. Stage dan commit
git add nav.css index.html
git commit -m "feat: add navbar CSS and HTML"

# 5. Push branch ke GitHub (kali pertama)
git push -u origin feature-navbar

# 6. Buka GitHub → repositori
#    → Akan nampak banner "feature-navbar had recent pushes"
#    → Klik "Compare & pull request"

# 7. Isi PR:
#    Title: "Tambah navbar komponen"
#    Description: "Menambah navigasi asas dengan CSS styling"
#    → Klik "Create pull request"

# 8. Review PR di GitHub:
#    → Tab "Files changed" — lihat perubahan
#    → Klik line tertentu untuk komen
#    → Contoh komen: "Bagus! Maybe tambah hover effect?"
#    → Klik "Review changes" → "Approve"

# 9. Merge:
#    → Klik "Merge pull request"
#    → Klik "Confirm merge"
#    → Klik "Delete branch" (optional)

✅ Hasil Yang Dijangka

✓ PR berjaya dibuat dengan title dan description
✓ Boleh review PR, tengok files changed
✓ Boleh tinggalkan comment pada line tertentu
✓ Merge button berfungsi — kod masuk ke main

👀 Apa Yang Ditunjuk

Tab "Files changed" — tunjuk perbezaan kod sebelum dan selepas
Inline comment — klik line, tulis feedback
Review changes dropdown — Comment / Approve / Request changes
Merge button dan confirm dialog
Branch dah merge — tunjuk branch boleh dipadam

💬 Script Alternatif (BM)

"Branch ni macam kau fotostat buku. Buku asal tetap selamat.
Kau contenglah fotostat tu apa pun. Dah puas hati?
Kau gabungkan balik dengan yang asal — tu namanya merge.
Pull Request pula macam kau hantar draf untuk disemak
sebelum digabungkan. Biasalah dalam pasukan — kena ada
quality control."
          

🧠

Cara Terangkan Git kepada Pemula

Analogi dan pendekatan untuk memudahkan pemahaman konsep abstrak Git.

🎮

Analogi "Save Points dalam Game"

Git sebagai sistem save game — setiap commit adalah save point

▼

"Bayangkan korang main game macam Zelda atau GTA. Dalam game, korang boleh simpan progress — lepas tu kalau mati, boleh load balik. Git adalah macam tu juga, tapi untuk kod."

┌─────────────────────────────────────────────┐
│  🎮 Save Points dalam Game vs Git          │
├─────────────────────────────────────────────┤
│  Save game  = git commit                    │
│  Load save  = git checkout / git restore    │
│  New game+  = branch baru                   │
│  Save di cloud = git push                   │
│  Load dari cloud = git pull / git clone     │
│  Multiple save slots = branch berbeza       │
│  Game mod = fork repo                       │
└─────────────────────────────────────────────┘

💬 Cara Sampaikan

"Setiap kali korang git commit, macam korang simpan game. Boleh balik bila-bila masa."
"Branch macam save slot berbeza — satu slot untuk main game biasa, satu slot untuk try mod."
"Merge macam korang decide yang mod tu best, and korang nak update game utama dengan mod tu."
"Git push macam upload save game ke cloud — boleh access dari komputer lain."

📚

Analogi Lain — Buku & Edisi

Git sebagai proses menulis buku dengan multiple drafts

▼

"Git macam korang tulis buku. Setiap commit adalah satu draf yang korang simpan. Branch adalah versi alternatif — maybe korang nak cuba ending berbeza tanpa rosakkan draf utama."

┌─────────────────────────────────────────────┐
│  📚 Buku vs Git                            │
├─────────────────────────────────────────────┤
│  Draf bab 1     = git add bab1.txt         │
│  "Simpan draf"  = git commit -m "bab 1"    │
│  Fotostat buku  = git clone                │
│  Bab baru eksperimen = git branch bab-x    │
│  Masukkan bab baru ke buku = git merge     │
│  Hantar ke penerbit = git push             │
└─────────────────────────────────────────────┘

⏰

Analogi "Time Machine"

Git sebagai mesin masa untuk kod anda

▼

"Git adalah mesin masa untuk folder projek korang. Setiap commit adalah satu 'masa' yang korang rekodkan. Bila-bila masa korang boleh:

Lihat apa yang berubah antara dua masa (git diff)
Balik ke masa lampau (git checkout)
Cuba 'masa alternatif' tanpa ubah sejarah sebenar (branch)
Gabungkan dua garis masa berbeza (merge)

GitHub pulak adalah mesin masa di awan — korang boleh access sejarah dari mana-mana komputer, dan orang lain pun boleh tengok."

Key Takeaway: Tekankan bahawa Git bukan sekadar "simpan kod" — ia bagi keyakinan untuk try benda baru sebab korang tahu ada backup dan boleh undo.

⚙️

Pecahan Command Git Lengkap

Setiap command penting — apa dia buat, bila guna, dan contoh.

Command	Apa Dia Buat	Bila Guna	Contoh
`git init`	Cipta repo git baru dalam folder	Mula projek baru	`git init`
`git add`	Stage perubahan untuk commit	Lepas edit fail	`git add index.html`
`git commit`	Simpan snapshot perubahan	Lepas add — simpan rekod	`git commit -m "mesej"`
`git status`	Tunjuk keadaan semasa repo	Nak tahu apa berubah	`git status`
`git log`	Tunjuk sejarah commit	Semak sejarah	`git log --oneline`
`git push`	Hantar commit ke remote	Nak sync ke GitHub	`git push origin main`
`git pull`	Ambil perubahan dari remote	Nak update repo tempatan	`git pull origin main`
`git clone`	Salin repo dari GitHub	Nak dapatkan repo orang lain	`git clone <url>`
`git branch`	Urus branch (senarai/cipta/padam)	Nak buat branch baru	`git branch feature-x`
`git checkout`	Tukar branch atau restore fail	Nak tukar branch	`git checkout main`
`git merge`	Gabungkan branch lain ke branch semasa	Lepas siap feature	`git merge feature-x`
`git diff`	Tunjuk perubahan yang belum stage	Sebelum add — semak apa berubah	`git diff`
`git remote`	Sambung/urus remote repo	Setup GitHub remote	`git remote add origin <url>`
`git stash`	Simpan sementara perubahan belum siap	Nak tukar branch tapi ada kerja separuh	`git stash`
`git fetch`	Ambil info remote tanpa merge	Nak check status remote dulu	`git fetch origin`

💡

Tips Fasilitasi

Panduan mengendalikan kelas — dari persediaan hingga penyelesaian masalah.

⚠️

Kesilapan Biasa Pelajar & Cara Pulih

Masalah yang selalu berlaku dan cara penyelesaiannya

▼

Kesilapan	Simptom	Penyelesaian
Lupa `git add`	Commit tak termasuk fail yang diedit	`git add .` → `git commit --amend`
Commit dengan mesej kosong/teruk	commit -m tanpa mesej bermakna	`git commit --amend -m "mesej baru"`
Edit dalam branch salah	Nampak perubahan padahal nak guna branch lain	`git stash` → checkout branch betul → `git stash pop`
Conflict merge	Git cakap "merge conflict"	Buka fail → cari <<< === >>> → manual resolve
Push rejected	Remote ada commit baru yang tempatan tak ada	`git pull` dulu → resolve conflict → `git push`
Tersalah delete branch	Branch dah takde	`git reflog` → cari commit terakhir → `git branch fix`
Git tak kenal user	"Please tell me who you are"	`git config --global user.name "Nama"` dan `user.email`
Terlupa guna `-u` masa push pertama	"fatal: The current branch has no upstream"	`git push -u origin nama-branch`

🎯

Tips Persiapan Sebelum Sesi

Apa yang perlu disediakan sebelum sesi bermula

▼

✅ Checklist Pra-Sesi

Pastikan semua pelajar ada Git installed (git --version)
Pastikan akaun GitHub sudah dibuat (github.com/signup)
Sediakan projek contoh untuk demo
Uji internet dan akses GitHub dari jaringan tempatan
Sediakan fail README.md template untuk pelajar
Sediakan .gitignore template
Uji semua command demo dari awal hingga akhir
Sediakan backup — offline notes kalau internet putus

🎤 Tips Penyampaian

Jangan guna slides terlalu banyak — guna live coding sebenarnya lebih berkesan untuk Git
Minta pelajar type, bukan copy-paste — mereka akan ingat lebih lama
Buat kesalahan sengaja — tunjuk macam mana resolve conflict, supaya mereka nampak ia normal
Pair programming — suruh pelajar duduk berpasangan dan ajar satu sama lain
Guna papan putih — lukis graf commit, branch, merge — visual sangat membantu
Jeda setiap 30 minit — tanya "ada sesiapa lost?" dan semak satu persatu

🆘

Rescue Protocol — Bila Pelajar Tersangkut

Langkah penyelamatan untuk pelajar yang "lost"

▼

Golden Rule: Jangan panik. Git sangat susah untuk "rosakkan" repo betul-betul. Ajar pelajar: Git almost everything is undoable.

📋 Rescue Steps

Langkah 1: Minta pelajar run git status — beritahu apa dia nampak
Langkah 2: Tanya apa yang mereka EXPECT untuk nampak — bantu bandingkan actual vs expected
Langkah 3: Guna git log --oneline --graph — tunjuk visual branch
Langkah 4: Kalau betul-betul lost, guna git reflog untuk cari di mana mereka berada
Langkah 5: Last resort — copy kod ke folder lain, delete repo, git clone balik

Pro Tip: Kalau 3-4 pelajar stuck pada masalah sama, hentikan sesi dan tunjuk penyelesaian dekat semua orang sekali — jangan selesaikan satu persatu sebab akan makan masa.

❓

Soalan Refleksi & Penutup

Soalan untuk menguji kefahaman dan merumus sesi.

💬

Soalan Refleksi untuk Pelajar

Guna soalan ini untuk mengakhiri sesi

▼

Apa perbezaan antara Git dan GitHub?
Kenapa kita guna branch? Bila sesuai guna branch?
Apa maksud "staging area" dalam Git?
Bila berlaku merge conflict dan macam mana nak settle?
Apa fungsi Pull Request dalam kolaborasi?
Macam mana GitHub MCP membantu workflow developer?
Apa yang paling penting untuk diingat tentang Git?

Takeaway Utama: Git bukan alat "simpan kod" — ia alat kolaborasi dan eksperimen. Guna branch dengan kerap, commit awal dan kerap, dan jangan takut nak buat PR.