🏠 Halaman Utama › Laman Utama › Modul › Git & GitHub — Latihan
Latihan Hands-On

Git & GitHub — Latihan Praktikal

5 latihan hands-on untuk menguasai Git dan GitHub. Selesaikan mengikut urutan — setiap latihan membina kemahiran untuk latihan seterusnya.

1 Init & Commit
2 Push ke GitHub
3 Branch & Merge
4 Pull Request
5 GitHub MCP
1
Init Repo & First Commit (Lokal)
Mudah 10-15 minit
▼

🎯 Objektif

Cipta repositori Git tempatan, tambah fail, dan buat commit pertama. Latihan asas untuk biasakan diri dengan workflow Git.

📝 Arahan Langkah-demi-Langkah

  1. Buka terminal / command prompt
  2. Buat folder baru: mkdir latihan-git
  3. Masuk ke folder: cd latihan-git
  4. Init repo: git init
  5. Cipta README.md: echo "# Latihan Git Saya" > README.md
  6. Cipta .gitignore: echo "node_modules/" > .gitignore
  7. Check status: git status
  8. Stage fail: git add README.md .gitignore
  9. Buat commit: git commit -m "commit pertama: README dan gitignore"
  10. Semak log: git log --oneline

✅ Hasil Yang Dijangka

✓ Anda nampak output "Initialized empty Git repository"
✓ git status menunjukkan "nothing to commit, working tree clean"
✓ git log menunjukkan 1 commit dengan hash seperti abc1234

💡 Tip

Ingat: Guna git status sekerap mungkin. Ia adalah command paling penting dalam Git — sentiasa tahu state repo anda.
2
Push ke GitHub & Lihat Repo Online
Mudah 10-15 minit
▼

🎯 Objektif

Sambung repo tempatan dari Latihan 1 ke GitHub dan push kod. Lepas ni, kod anda boleh diakses dari mana-mana.

📝 Arahan

  1. Buka github.com dan login
  2. Klik "+" → "New repository"
  3. Nama repo: latihan-git
  4. Description: "Repo untuk latihan Git saya"
  5. Pilih Public, JANGAN tick README
  6. Klik "Create repository"
  7. Dalam terminal (folder latihan-git): git remote add origin https://github.com/username/latihan-git.git
  8. Semak remote: git remote -v
  9. Push ke GitHub: git push -u origin main
  10. Refresh GitHub — nampak README.md dan .gitignore online!

✅ Hasil Yang Dijangka

✓ git remote -v menunjukkan fetch dan push origin
✓ git push berjaya — output "main -> main"
✓ Di GitHub, anda nampak fail README.md dan .gitignore

⚠️ Masalah Biasa

Push Rejected? Mungkin repo GitHub ada fail yang tempatan tak ada (contoh: README jika ter-tick). Solution: git pull origin main --rebase then git push.
3
Buat Branch, Edit, Commit, Merge
Sederhana 15-20 minit
▼

🎯 Objektif

Praktikkan workflow branch — cipta branch baru, buat perubahan, commit, dan merge balik ke main. Ini adalah workflow harian developer.

📝 Arahan

  1. Pastikan dalam folder latihan-git dan branch main
  2. Semak branch semasa: git branch (tanda * pada main)
  3. Buat branch baru: git checkout -b feature-profil
  4. Cipta fail profil: echo "Nama: [Nama Anda]" > profil.txt
  5. Stage dan commit: git add profil.txt && git commit -m "tambah profil"
  6. Edit README.md — tambah baris baru: echo "Ini projek latihan Git saya." >> README.md
  7. Stage dan commit: git add README.md && git commit -m "update README"
  8. Semak log: git log --oneline — nampak 3 commit total?
  9. Balik ke main: git checkout main
  10. Merge branch feature: git merge feature-profil
  11. Semak log lagi — semua commit dah ada di main
  12. Padam branch: git branch -d feature-profil

✅ Hasil Yang Dijangka

✓ git log --oneline --graph menunjukkan garisan merge
✓ profil.txt wujud dan README dah diupdate
✓ git branch dah tak ada feature-profil
Sebelum merge: main: A───B │ feature: └───C───D Selepas merge: main: A───B───E (merge commit) │ / feature: └───C───D
4
Buat Pull Request (Pair dengan Pelajar Lain)
Sederhana 20-25 minit
▼

🎯 Objektif

Bekerjasama dengan rakan sekelas — buat fork, clone, buat PR, dan merge. Latihan ini MEMERLUKAN pasangan.

👥 Setup Pasangan

Cari seorang rakan. Tentukan siapa Pemilik Repo A dan siapa Pembuat PR B. Kemudian tukar peranan.

📝 Arahan untuk Pemilik Repo (A)

  1. Push repo latihan-git ke GitHub (dari Exercise 2/3)
  2. Buka repo di GitHub → Settings → Collaborators → Add People
  3. Masukkan username GitHub rakan (B) sebagai collaborator
  4. Bila B buat PR, buka PR → review "Files changed"
  5. Tinggalkan komen pada line tertentu
  6. Approve PR: "Review changes" → "Approve"
  7. Merge PR: "Merge pull request" → "Confirm merge"

📝 Arahan untuk Pembuat PR (B)

  1. Clone repo A: git clone https://github.com/A/latihan-git.git
  2. Masuk folder: cd latihan-git
  3. Buat branch baru: git checkout -b feature-tambah-style
  4. Cipta fail baru: echo "body { font-family: sans-serif; }" > style.css
  5. Commit: git add style.css && git commit -m "tambah style.css asas"
  6. Push: git push -u origin feature-tambah-style
  7. Buka GitHub → nampak banner "Compare & pull request"
  8. Klik "Create pull request" — isi title dan description
  9. Tunggu A review dan merge
  10. Lepas merge, sync main: git checkout main && git pull

🔄 Tukar Peranan

Sekarang, tukar — B jadi pemilik repo, A buat PR. Ulang langkah di atas.

✅ Hasil Yang Dijangka

✓ Kedua-dua pelajar berjaya buat sekurang-kurangnya 1 PR
✓ PR di-review dengan komen yang bermakna
✓ PR berjaya di-merge
✓ Kedua-dua faham workflow kolaborasi
5
Guna GitHub MCP dalam Claude Code untuk Semak PR
Maju 15-20 minit
▼

🎯 Objektif

Gunakan kuasa AI — sambung Claude Code ke GitHub melalui MCP untuk review Pull Request secara automatik.

📝 Prasyarat

  • Claude Code dipasang dan boleh diakses dari terminal
  • GitHub MCP perlu diautentikasi (guna mcp__github__authenticate)
  • Ada sekurang-kurangnya 1 PR dalam repo latihan-git (dari Exercise 4)

📝 Arahan

  1. Buka terminal dan mula Claude Code: claude
  2. Taip: "Sambung GitHub MCP" atau "Guna mcp__github__authenticate"
  3. Ikut proses OAuth — login ke GitHub di browser
  4. Sekarang tanya Claude: "Senaraikan semua open pull request dalam repo latihan-git"
  5. Tanya: "Review PR #[nombor PR] dan bagi ringkasan perubahan"
  6. Tanya: "Check files changed dalam PR ni — apa yang berubah?"
  7. Tanya: "Buat issue baru: 'Tambah fungsi dark mode ke aplikasi'"
  8. Tanya: "Assign issue #1 kepada saya"
  9. Tanya: "Tutup issue #1"

💡 Idea Cabaran Tambahan

  • Minta Claude buat code review lengkap dengan checklist
  • Minta Claude cadangkan penambahbaikan untuk kod dalam PR
  • Minta Claude auto-label issues berdasarkan description
  • Guna Sequential Thinking + GitHub MCP untuk analisis PR yang mendalam

✅ Hasil Yang Dijangka

✓ Claude berjaya authenticate dengan GitHub
✓ Claude boleh senaraikan PR dan isu
✓ Claude bagi code review yang bermakna
✓ Claude berjaya buat, assign, dan tutup isu
✓ Anda faham potensi MCP untuk workflow developer
Pro Tip: GitHub MCP bukan hanya untuk review — ia boleh guna untuk automasi penuh workflow: buat branch, buat PR, review, merge — semua dari Claude Code!
🏁

Checklist Penguasaan

Tandakan bila anda dah kuasai setiap kemahiran.

✅
Saya Dah Boleh...
Checklist kemahiran — tandakan yang dah dikuasai
▼
  • Terangkan apa itu Git dan GitHub dengan analogi sendiri
  • Init repositori Git (git init)
  • Stage dan commit perubahan (git add, git commit)
  • Semak status dan sejarah (git status, git log)
  • Cipta repo di GitHub dan push (git remote add, git push)
  • Clone repo dari GitHub (git clone)
  • Buat, tukar, dan padam branch (git branch, git checkout)
  • Merge branch (git merge)
  • Resolve merge conflict
  • Buat Pull Request dan review
  • Guna Issues untuk tracking
  • Setup dan guna GitHub MCP dalam Claude Code
  • Fork repo dan buat PR ke repo asal
📚

Prompt Template Library — Git & GitHub dalam Claude Code

Gunakan prompt-template ini dengan Claude Code untuk mempercepatkan tugasan Git dan GitHub harian anda. Copy-paste dan ubah suai ikut keperluan.

1
Init Repo & Setup GitHub
Setup
▼

📋 Prompt

"Init repo untuk projek [nama]. Tolong tulis arahan git dan GitHub setup lengkap."

💡 Contoh Penggunaan

"Init repo untuk projek portfolio peribadi. Tolong tulis arahan git dan GitHub setup lengkap."

✅ Output Dijangka

  • Langkah demi langkah — dari git init hingga push ke GitHub
  • Arahan setup GitHub remote
  • Template README.md dan .gitignore ikut jenis projek
2
Commit dengan Conventional Commit Format
Commit
▼

📋 Prompt

"Saya ada perubahan baru — tolong commit dengan message ikut conventional commit format."

💡 Penggunaan Lebih Spesifik

"Saya sudah edit README untuk tambah dokumentasi cara install. Tolong commit dengan message ikut conventional commit format. Jenis perubahan: documentation."

✅ Output Dijangka

  • Claude akan analisis perubahan yang dah di-stage
  • Hasilkan git commit -m "docs: add installation guide to README"
  • Ikut format: type(scope): description
Tip: Conventional commit format: feat: (feature baru), fix: (bug fix), docs: (dokumentasi), style: (formatting), refactor: (ubah kod tanpa ubah fungsi), test: (tambah test).
3
Buat Branch, Push & Buka PR
Branch & PR
▼

📋 Prompt

"Buat branch baru untuk feature [X], push ke GitHub, dan buat PR."

💡 Contoh Penggunaan

"Buat branch baru untuk feature dark-mode, push ke GitHub, dan buat PR ke branch main."

✅ Output Dijangka

  • Claude akan execute: git checkout -b feature/dark-mode
  • Push branch: git push -u origin feature/dark-mode
  • Guna GitHub MCP untuk create PR dengan title dan description
  • PR siap untuk di-review
4
Review PR & Beri Feedback
Review
▼

📋 Prompt

"Review PR ini dan berikan feedback: [paste PR URL atau changes]"

💡 Contoh Penggunaan

"Review PR https://github.com/username/projek/pull/3 dan berikan feedback. Semak: 1. Adakah ada isu keselamatan? 2. Adakah coding style konsisten? 3. Apa yang boleh diimprove?"

✅ Output Dijangka

  • Claude guna GitHub MCP untuk fetch PR details
  • Analisis semua files changed
  • Feedback berstruktur — positif dan konstruktif
  • Cadangan spesifik untuk penambahbaikan
Ingat: Review yang baik bukan cari salah — ia bantu rakan sepasukan jadi lebih baik. Guna nada positif dan cadangkan penyelesaian, bukan hanya kritik.
5
Generate .gitignore untuk Projek
Config
▼

📋 Prompt

"Tulis .gitignore untuk projek [jenis: Node.js/HTML/Python]"

💡 Contoh Penggunaan

"Tulis .gitignore untuk projek Node.js/Express dengan MongoDB. Saya guna VS Code dan macOS."

✅ Output Dijangka

  • node_modules/ — dependency folder (paling penting!)
  • .env — environment variables (rahsia!)
  • dist/, build/ — output build
  • .DS_Store — file macOS
  • .vscode/ — editor settings
  • *.log — log files
Ingat: Jangan commit node_modules atau .env ke GitHub! Guna .gitignore untuk elak tersilap commit fail besar atau sensitif.