Materi GitHub Kolaborasi (2–3 Orang)
Studi Kasus: Proyek Website Sekolah
Tujuan Pembelajaran
Setelah mempelajari materi ini, peserta mampu:
- Bekerja kolaborasi menggunakan GitHub
- Membuat dan menggunakan branch masing-masing
- Push & pull perubahan kode
- Mengatasi merge conflict
- Melakukan merge ke branch utama
- Bekerja tim dalam proyek website sekolah
Pembagian Peran Tim (Contoh 3 Orang)
| Nama | Peran |
|---|---|
| Anggota 1 | Repository Owner / Leader |
| Anggota 2 | Frontend Developer |
| Anggota 3 | Content / Page Developer |
Jika hanya 2 orang, Anggota 2 & 3 bisa digabung perannya.
Studi Kasus Proyek
Membuat Website Sekolah Sederhana dengan halaman:
index.html(Beranda)profil.html(Profil Sekolah)kontak.html(Kontak)style.css
STEP 1 – Menentukan Repository Owner
Anggota 1 (Leader)
- Login ke GitHub
- Klik New Repository
- Isi:
- Repository name:
website-sekolah - Public
- Add README
- Repository name:
- Klik Create Repository
STEP 2 – Clone Repository ke Laptop
Semua Anggota
git clone https://github.com/username/website-sekolah.git
cd website-sekolah
STEP 3 – Leader Menambahkan Kolaborator
Anggota 1
- Masuk repo → Settings
- Klik Collaborators
- Tambahkan username GitHub Anggota 2 & 3
- Mereka Accept Invitation
Berikut tampilan collaborators, klik add people dan cari username teman/anggota tim
Setelah itu cek email masing-masing, dan klik link email tersebut untuk masuk tampilan accept invitation
klik tombol accept invitation dan selamat anda sudah berhasil bergabung ke repository owner/leader anda
STEP 4 – Membuat Branch Masing-masing
Setiap Anggota
Anggota 1 (Leader)
git checkout -b leader
Anggota 2
git checkout -b frontend
Anggota 3
git checkout -b konten
Cek branch:
git branch
STEP 5 – Membuat Struktur Awal (Leader)
Anggota 1
touch index.html profil.html kontak.html style.css
Commit & push:
git add .
git commit -m "Inisialisasi struktur website sekolah"
git push origin leader
STEP 6 – Sinkronisasi Repository (WAJIB)
SEMUA ANGGOTA (di branch masing-masing)
⚠️ Aturan wajib sebelum ngoding:
👉 SELALU git pull dulu sebelum edit file
Supaya kode lokal kita sinkron dengan GitHub dan menghindari conflict tidak perlu.
git pull origin leader
kenapa kita git pull origin ke branch leader dulu ? supaya repo lokal kita sama dengan punya leader (ada file html nya)
git add .
git commit -m "update repo ke branch di github"
git push origin (ketikan branch masing-masing)STEP 7 – Mengerjakan File Berbeda (Aman Tanpa Conflict)
Anggota 2 (Frontend)
git checkout frontend
git pull origin frontend
Edit index.html:
<h1>Selamat Datang di Website Sekolah</h1>
<p>Sekolah unggulan berbasis teknologi</p>
git add index.html
git commit -m "Menambahkan konten beranda"
git push origin frontend
Anggota 3 (Konten)
git checkout konten
git pull origin konten
Edit profil.html:
<h2>Profil Sekolah</h2>
<p>Sekolah berdiri sejak tahun 2000</p>
git add profil.html
git commit -m "Menambahkan profil sekolah"
git push origin konten
STEP 8 – Sinkronisasi ke Main Sebelum Edit File yang Sama
Akan mengedit file yang sama (index.html)
Semua anggota WAJIB update dari main
git checkout -b main
git pull origin main
Kembali ke branch masing-masing dan merge main:
Anggota 2
git checkout frontend
git merge main
Anggota 3
git checkout konten
git merge main
STEP 9 – Mengedit File yang Sama (Simulasi Conflict)
Anggota 2
Edit index.html:
<h1>Website Resmi SMA Cendikia</h1>
git add index.html
git commit -m "Update judul website"
git push origin frontend
Anggota 3
Edit index.html:
<h1>Selamat Datang di SMA Cendikia Learning</h1>
git add index.html
git commit -m "Perubahan judul versi konten"
git push origin konten
STEP 10 – Leader Pull & Merge (Conflict Muncul)
👤 Anggota 1 (Leader)
git checkout -b frontend
git pull origin frontend
git checkout -b konten
git pull origin konten
git checkout main
git pull origin main
git merge frontend
git merge konten
💥 Merge conflict terjadi di index.html
STEP 11 – Menyelesaikan Merge Conflict (Detail)
Buka index.html:
<<<<<<< HEAD
<h1>Website Resmi SMA Cendikia</h1>
=======
<h1>Selamat Datang di SMA Cendikia Learning</h1>
>>>>>>> konten
✍️ Perbaiki menjadi:
<h1>Website Resmi SMA Cendikia Learning</h1>
Simpan lalu:
git add index.html
git commit -m "Resolve conflict pada index.html"
STEP 12 – Push Final ke GitHub
git push origin main🎉 Proyek kolaborasi berhasil dengan alur profesional
🧠 CATATAN PENTING
✔️ git pull = ambil update terbaru
✔️ Jangan edit sebelum pull
✔️ Conflict = hal normal dalam tim
✔️ Branch = penyelamat kerja tim
✔️ Merge = penggabungan hasil kerja
Rangkuman Alur GitHub Kolaborasi
- Buat repository
- Tambah kolaborator
- Buat branch masing-masing
- Kerja terpisah
- Push ke GitHub
- Merge ke main
- Tangani conflict
- Proyek selesai
TUGAS STUDI KASUS (UNTUK KELOMPOK)
Kerjakan secara berkelompok (2–3 orang)
Ketentuan:
- Wajib menggunakan branch berbeda
- Minimal 2 file dikerjakan bersama
- Harus terjadi merge conflict
- Sertakan screenshot:
- Branch
- Commit history
- Conflict resolution
Output:
- Link repository GitHub
- Website sekolah sederhana
