Pertemuan 03

Siklus Add-Commit, .gitignore, dan Git Log

Tujuan Pembelajaran

Menguasai siklus kerja: edit -> add -> commit
Mampu menulis pesan commit yang baik
Memahami dan membuat file .gitignore
Mampu melihat history dengan git log

Agenda (60 menit)

Waktu	Aktivitas	Durasi
00:00	Review pertemuan 2	5 min
00:05	Materi: Commit & pesan commit	10 min
00:15	Materi: .gitignore	5 min
00:20	Materi: git log	5 min
00:25	Demonstrasi live	10 min
00:35	Latihan LGB + Terminal	20 min
00:55	Rangkuman	5 min

Materi Inti

A. Git Commit — Menyimpan Snapshot

# Commit semua file yang sudah di-staging
git commit -m "pesan yang menjelaskan perubahan"

# Contoh pesan commit yang BAIK:
git commit -m "Tambah halaman login dengan validasi email"
git commit -m "Perbaiki bug tombol submit tidak berfungsi di Safari"
git commit -m "Hapus file CSS yang tidak terpakai"

# Contoh pesan commit yang BURUK:
git commit -m "update"
git commit -m "fix"
git commit -m "asdfgh"

Tips menulis pesan commit:

Gunakan kata kerja imperatif: “Tambah”, “Perbaiki”, “Hapus”, “Ubah”
Jelaskan APA yang berubah, bukan BAGAIMANA
Maksimal 50 karakter untuk baris pertama
Jika perlu penjelasan lebih, tambahkan baris kosong lalu paragraf

B. File .gitignore

File .gitignore memberitahu Git file/folder mana yang harus diabaikan (tidak di-track).

# Contoh .gitignore untuk project Node.js

# Folder dependencies
node_modules/

# File environment (berisi password/API key — RAHASIA!)
.env
.env.local

# File build/output
dist/
build/

# File sistem operasi
.DS_Store          # macOS
Thumbs.db          # Windows

# File editor
.vscode/
.idea/

# File log
*.log

Mengapa perlu .gitignore?

Keamanan: File .env berisi password dan API key — JANGAN pernah di-commit!
Efisiensi: node_modules/ bisa berisi ribuan file — tidak perlu di-track
Kebersihan: File temporary dan cache tidak relevan untuk di-share

C. Git Log — Melihat History

# Tampilkan history lengkap
git log

# Format ringkas (1 baris per commit)
git log --oneline

# Dengan visualisasi cabang/branch
git log --oneline --graph

# Batasi jumlah commit yang ditampilkan
git log --oneline -5

Demonstrasi Live

cd latihan-git

# Buat beberapa file
echo "# Proyek Latihan Git" > README.md
echo "DATABASE_URL=rahasia123" > .env
echo "console.log('hello')" > app.js

# Buat .gitignore
echo ".env" > .gitignore
echo "node_modules/" >> .gitignore

# Cek status — .env TIDAK muncul karena sudah di-ignore
git status

# Add dan commit
git add .
git commit -m "Tambah README, app.js, dan .gitignore"

# Edit file
echo "## Deskripsi" >> README.md
echo "console.log('world')" >> app.js

# Add dan commit lagi
git add .
git commit -m "Tambah deskripsi di README dan update app.js"

# Lihat history
git log --oneline

💡 Tips: Gunakan git log --oneline --graph untuk melihat visualisasi history yang lebih menarik.

Latihan Interaktif (20 menit)

A. Latihan Visualisasi — Learn Git Branching

Buka: https://learngitbranching.js.org/?locale=id_ID

Level: “Pengenalan Git Commit” (Introduction Sequence - Level 1)

Klik level pertama “Introduction to Git Commits”
Baca dialog pengenalan (klik Next untuk lanjut)
Tantangan: Buat 2 commit untuk mencapai goal state
Solusi: Ketik di terminal LGB:
```
git commit
git commit
```
Perhatikan bagaimana setiap commit membuat node baru di visualisasi graph!

Konsep yang dipelajari dari level ini:

Setiap commit adalah snapshot dari semua file
Commit baru menunjuk ke commit sebelumnya (parent)
Branch main otomatis bergerak maju ke commit terbaru

B. Latihan Terminal (Hands-on)

Langkah 1: Buat project baru

mkdir proyek-website
cd proyek-website
git init

Langkah 2: Buat file-file awal

echo "<!DOCTYPE html><html><body><h1>Website Saya</h1></body></html>" > index.html
echo "body { font-family: Arial; }" > style.css
echo "API_KEY=abc123" > .env

Langkah 3: Buat .gitignore

echo ".env" > .gitignore

Langkah 4: Commit pertama

git add .
git commit -m "Inisialisasi project website"

Langkah 5: Edit dan commit lagi (lakukan 3 kali)

# Edit 1
echo "<p>Selamat datang!</p>" >> index.html
git add index.html
git commit -m "Tambah paragraf selamat datang"

# Edit 2
echo "h1 { color: blue; }" >> style.css
git add style.css
git commit -m "Tambah warna biru untuk heading"

# Edit 3
echo "console.log('loaded')" > script.js
git add script.js
git commit -m "Tambah file JavaScript"

Langkah 6: Lihat history

git log --oneline
# Harus muncul 4 commit

💡 Tips: Pastikan git log --oneline menampilkan tepat 4 commit sebelum lanjut.

Tugas Mandiri

Buat project baru portofolio-saya dengan minimal 5 commit
Buat .gitignore yang sesuai untuk project web (HTML/CSS/JS)
Latihan di LGB: Selesaikan level 1 “Introduction to Git Commits”
Coba git log --oneline --graph dan pahami outputnya

Praktik Interaktif

Selesaikan level berikut untuk memperkuat pemahaman kamu.

Learn Git Branching — Level: intro1

Buka di tab baru

Memuat Learn Git Branching...