Baca Juga
🧐 Apa Itu Git Branch?
Git Branch adalah fitur yang memungkinkan kita membuat cabang dari kode utama (main/master) untuk mengembangkan fitur baru tanpa mengganggu kode utama.
🔥 Git Branch: Mana yang Paling Baik? 🔥📌 Fungsi Branch dalam Pengembangan:
- 🛠 Membuat fitur baru tanpa mengganggu kode utama.
- ✅ Menghindari konflik kode dalam tim pengembang.
- 🔄 Mengembangkan dan menguji fitur sebelum digabungkan ke main.
🚀 Step-by-Step: Git Workflow dengan Branch
📌 1. Inisialisasi Proyek & Git Repository
1️⃣ Buka VS Code & Terminal
2️⃣ Buat Folder & Masuk ke dalamnya
mkdir bootstrap-company-profile
cd bootstrap-company-profile
3️⃣ Inisialisasi Git Repository
git init
4️⃣ Buat File Proyek
touch index.html style.css
📌 2. Buat Tampilan Website dengan Bootstrap
✍ index.html (Halaman Utama)
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Company Profile</title>
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="#">Perusahaan Kami</a>
</div>
</nav>
<header class="text-center p-5 bg-light">
<h1>Selamat Datang di Perusahaan Kami</h1>
<p>Kami menyediakan layanan terbaik untuk Anda.</p>
</header>
<div class="container text-center p-4">
<a href="services.html" class="btn btn-primary">Lihat Layanan Kami</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
✍ style.css
body {
font-family: Arial, sans-serif;
}
📌 3. Simpan Kode dalam Git & Buat Commit Pertama
git add .
git commit -m "Initial commit: Company Profile dengan Bootstrap"
📌 4. Buat Branch untuk Fitur Baru
Branch 1: Halaman Layanan
1️⃣ Buat Branch Baru untuk "Layanan"
git branch add-services
git checkout add-services
2️⃣ Tambahkan File services.html
touch services.html
✍ services.html
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Layanan Kami</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container text-center p-5">
<h1>Layanan Kami</h1>
<ul class="list-group">
<li class="list-group-item">Konsultasi IT</li>
<li class="list-group-item">Pembuatan Website</li>
<li class="list-group-item">Manajemen Digital</li>
</ul>
</div>
</body>
</html>
3️⃣ Tambahkan Link ke index.html
<a href="services.html" class="btn btn-primary">Lihat Layanan Kami</a>
4️⃣ Commit Perubahan
git add .
git commit -m "Menambahkan halaman layanan"
📌 5. Branch 2: Halaman Tentang Kami
1️⃣ Buat Branch Baru
git branch add-about
git checkout add-about
2️⃣ Tambahkan File about.html
touch about.html
✍ about.html
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tentang Kami</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container text-center p-5">
<h1>Tentang Kami</h1>
<p>Kami adalah perusahaan yang berfokus pada solusi digital.</p>
</div>
</body>
</html>
3️⃣ Commit Perubahan
git add .
git commit -m "Menambahkan halaman Tentang Kami"
📌 6. Merge Semua Branch ke main
1️⃣ Kembali ke main
git checkout main
2️⃣ Gabungkan Branch add-services
git merge add-services
3️⃣ Gabungkan Branch add-about
git merge add-about
4️⃣ Hapus Branch Lama
git branch -d add-services
git branch -d add-about
📌 7. Push ke GitHub
1️⃣ Buat Repository di GitHub
- Masuk ke GitHub → New Repository
- Nama:
bootstrap-company-profile - Pilih Public atau Private
- Klik Create Repository
2️⃣ Tambahkan Remote & Push
git remote add origin https://github.com/username/bootstrap-company-profile.git
git branch -M main
git push -u origin main
🎉 8. Selesai!
.png)
🚀 Website Company Profile sudah dibuat dengan Bootstrap dan Git Branch. Kamu sekarang bisa mengembangkan fitur lebih lanjut seperti form kontak, animasi, atau integrasi API.
Tidak ada komentar:
Posting Komentar