Praktik: Mengelola proyek web menggunakan Git dan GitHub

Tujuan Pembelajaran

Setelah menyelesaikan modul ini, peserta akan mampu:

Menginisialisasi proyek web menggunakan Git
Mengelola versi proyek secara lokal
Melakukan sinkronisasi ke GitHub
Berkolaborasi dengan tim dalam pengembangan proyek web

Persiapan

1. Instalasi Git di Ubuntu

Buka Terminal:

sudo apt update
sudo apt install git -y

2. Konfigurasi Git

git config --global user.name "Nama Kamu"
git config --global user.email "emailkamu@example.com"

Menyiapkan Proyek Web

3. Buat Folder Proyek

mkdir webku
cd webku

4. Tambahkan File HTML Dasar

 echo "<!DOCTYPE html>
 <html>
 <head><title>Webku</title></head>
 <body><h1>Halo Dunia!</h1></body>
 </html>" > index.html

Inisialisasi Git Lokal

5. Inisialisasi Git

git init

6. Menambahkan dan Commit File

git add .
git commit -m "Inisialisasi proyek web"

Menghubungkan ke GitHub

7. Buat Repositori GitHub

Login ke [1](https://github.com)
Klik **New Repository**
Masukkan nama, contoh: `webku`
Klik **Create repository**

8. Hubungkan Repositori Git Lokal ke GitHub

git remote add origin https://github.com/username/webku.git
git branch -M main
git push -u origin main

> Gantilah `username` dengan nama akun GitHub-mu.

Bekerja dengan Proyek

9. Membuat Perubahan

Misalnya edit `index.html`:

nano index.html

Setelah selesai:

git add index.html
git commit -m "Perbaikan halaman utama"
git push

Menggunakan Branch untuk Fitur Baru

10. Buat Branch Baru untuk Fitur

git checkout -b fitur-kontak

Tambahkan file:

echo "

Kontak: email@example.com

" >> index.html

git add index.html
git commit -m "Menambahkan info kontak"
git push origin fitur-kontak

Kolaborasi dan Pull Request

11. Membuat Pull Request

Buka GitHub
Akan muncul notifikasi **Compare & pull request**
Klik dan isi deskripsi perubahan
Klik **Create pull request**

Setelah disetujui dan di-merge oleh tim, branch dapat dihapus:

git branch -d fitur-kontak
git push origin --delete fitur-kontak

Menarik Perubahan Terbaru

Jika ada perubahan oleh rekan tim:

git pull origin main

Mengabaikan File Tertentu

12. Tambahkan `.gitignore`

echo "node_modules/" >> .gitignore
echo "*.log" >> .gitignore
git add .gitignore
git commit -m "Menambahkan file .gitignore"
git push

Latihan Proyek Web

Buat folder proyek `latihan-web`
Tambahkan file `index.html` dan `style.css`
Inisialisasi Git dan commit
Push ke GitHub
Buat branch `fitur-galeri` → tambahkan `galeri.html`
Push, buat pull request, dan merge ke `main`

Tips Tambahan

Gunakan `git status` untuk melihat status file
Gunakan `git log` untuk melihat riwayat commit
Gunakan `git diff` untuk melihat perubahan sebelum commit

Pranala Menarik

web Programming