d80baff1e1
- Update index.html launcher: tambah Group 06-10 (ACAAB, LimaEm, RODA, Tapops, ApeNameTeamE) - Semua 10 halaman grup kini pakai navbar & footer identik dengan prod (Tailwind, mega menu, mobile menu) - Tambah assets/global/output.css dan localization.js untuk dukungan Tailwind dan toggle ID/EN - Buat folder dan index.html untuk Group 06-10 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1094 lines
51 KiB
HTML
1094 lines
51 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Materi Git — Kolaborasi Tim Web Development</title>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Source+Code+Pro:wght@400;500&display=swap');
|
|
|
|
:root {
|
|
--navy-dark: #0a1628;
|
|
--navy-primary: #1a365d;
|
|
--navy-light: #2d4a6f;
|
|
--gold-primary: #d4a847;
|
|
--gold-light: #e8c56d;
|
|
--gold-dark: #b8922e;
|
|
--white: #ffffff;
|
|
--gray-light: #e8ecf1;
|
|
--gray-text: #a0aec0;
|
|
--accent-blue: #4299e1;
|
|
--accent-green: #48bb78;
|
|
--accent-red: #fc8181;
|
|
--accent-purple: #9f7aea;
|
|
--accent-orange: #ed8936;
|
|
}
|
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
body {
|
|
font-family: 'Montserrat', sans-serif;
|
|
background: var(--navy-dark);
|
|
color: var(--white);
|
|
}
|
|
|
|
/* ─── SLIDE BASE ─── */
|
|
.slide {
|
|
width: 1280px;
|
|
height: 720px;
|
|
margin: 20px auto;
|
|
background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy-primary) 100%);
|
|
position: relative;
|
|
overflow: hidden;
|
|
page-break-after: always;
|
|
box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
|
|
}
|
|
|
|
.slide::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -100px; right: -100px;
|
|
width: 400px; height: 400px;
|
|
background: radial-gradient(circle, rgba(212,168,71,0.1) 0%, transparent 70%);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.corner-accent {
|
|
position: absolute;
|
|
width: 150px; height: 150px;
|
|
border: 3px solid var(--gold-primary);
|
|
opacity: 0.3;
|
|
}
|
|
.corner-accent.top-left { top:20px; left:20px; border-right:none; border-bottom:none; }
|
|
.corner-accent.bottom-right { bottom:20px; right:20px; border-left:none; border-top:none; }
|
|
|
|
.slide-number {
|
|
position: absolute;
|
|
bottom: 30px; right: 40px;
|
|
font-size: 14px; color: var(--gold-primary); font-weight: 600;
|
|
}
|
|
|
|
.progress-bar {
|
|
position: absolute;
|
|
bottom: 0; left: 0;
|
|
height: 4px;
|
|
background: linear-gradient(90deg, var(--gold-primary), var(--gold-light));
|
|
}
|
|
|
|
/* ─── TITLE SLIDE ─── */
|
|
.title-slide {
|
|
display: flex; flex-direction: column;
|
|
justify-content: center; align-items: center;
|
|
text-align: center; padding: 60px;
|
|
}
|
|
.title-slide .meeting-badge {
|
|
background: linear-gradient(135deg, var(--gold-primary), var(--gold-dark));
|
|
color: var(--navy-dark);
|
|
padding: 12px 40px; border-radius: 50px;
|
|
font-size: 16px; font-weight: 700;
|
|
margin-bottom: 36px;
|
|
text-transform: uppercase; letter-spacing: 3px;
|
|
}
|
|
.title-slide h1 {
|
|
font-size: 52px; font-weight: 800;
|
|
margin-bottom: 16px;
|
|
background: linear-gradient(135deg, var(--white), var(--gray-light));
|
|
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
|
background-clip: text; line-height: 1.2;
|
|
}
|
|
.title-slide .subtitle {
|
|
font-size: 24px; color: var(--gold-light);
|
|
font-weight: 500; margin-bottom: 50px;
|
|
}
|
|
.title-slide .lecturer-info {
|
|
display: flex; flex-direction: column;
|
|
align-items: center; gap: 8px;
|
|
}
|
|
.title-slide .lecturer-name { font-size: 20px; font-weight: 600; }
|
|
.title-slide .lecturer-title { font-size: 14px; color: var(--gray-text); }
|
|
.title-slide .semester {
|
|
margin-top: 18px; padding: 10px 30px;
|
|
border: 2px solid var(--gold-primary); border-radius: 30px;
|
|
font-size: 13px; color: var(--gold-primary);
|
|
}
|
|
|
|
/* ─── CONTENT SLIDE ─── */
|
|
.content-slide { padding: 50px 60px; }
|
|
.content-slide .slide-header {
|
|
display: flex; justify-content: space-between; align-items: center;
|
|
margin-bottom: 36px; padding-bottom: 18px;
|
|
border-bottom: 2px solid rgba(212,168,71,0.3);
|
|
}
|
|
.content-slide h2 { font-size: 34px; font-weight: 700; }
|
|
.content-slide h2 span { color: var(--gold-primary); }
|
|
.topic-badge {
|
|
background: rgba(212,168,71,0.2); color: var(--gold-light);
|
|
padding: 8px 20px; border-radius: 20px;
|
|
font-size: 12px; font-weight: 600;
|
|
text-transform: uppercase; letter-spacing: 1px;
|
|
}
|
|
|
|
/* ─── CARD GRID ─── */
|
|
.card-grid {
|
|
display: grid; grid-template-columns: repeat(3,1fr);
|
|
gap: 22px; margin-top: 24px;
|
|
}
|
|
.card-grid.two-col { grid-template-columns: repeat(2,1fr); }
|
|
.card-grid.four-col { grid-template-columns: repeat(4,1fr); }
|
|
.card {
|
|
background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.02));
|
|
border-radius: 16px; padding: 28px;
|
|
text-align: center;
|
|
border: 1px solid rgba(255,255,255,0.1);
|
|
}
|
|
.card-icon { font-size: 44px; margin-bottom: 16px; }
|
|
.card h3 { font-size: 17px; font-weight: 700; margin-bottom: 10px; color: var(--gold-light); }
|
|
.card p { font-size: 12px; color: var(--gray-text); line-height: 1.55; }
|
|
|
|
/* ─── DEFINITION BOX ─── */
|
|
.definition-box {
|
|
background: linear-gradient(135deg, rgba(212,168,71,0.15), rgba(212,168,71,0.05));
|
|
border: 2px solid rgba(212,168,71,0.3); border-radius: 20px;
|
|
padding: 30px 36px; margin: 24px 0;
|
|
}
|
|
.definition-box .label {
|
|
color: var(--gold-primary); font-size: 11px; font-weight: 700;
|
|
text-transform: uppercase; letter-spacing: 2px; margin-bottom: 12px;
|
|
}
|
|
.definition-box p { font-size: 19px; line-height: 1.65; }
|
|
.definition-box .source { margin-top: 12px; font-size: 12px; color: var(--gray-text); font-style: italic; }
|
|
|
|
/* ─── AGENDA ─── */
|
|
.agenda-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; margin-top: 24px; }
|
|
.agenda-item {
|
|
background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
|
|
border-radius: 16px; padding: 22px 26px;
|
|
display: flex; align-items: center; gap: 18px;
|
|
border-left: 4px solid var(--gold-primary);
|
|
}
|
|
.agenda-number {
|
|
width: 46px; height: 46px; flex-shrink: 0;
|
|
background: linear-gradient(135deg, var(--gold-primary), var(--gold-dark));
|
|
border-radius: 12px; display: flex; align-items: center; justify-content: center;
|
|
font-size: 22px; font-weight: 800; color: var(--navy-dark);
|
|
}
|
|
.agenda-text h3 { font-size: 17px; font-weight: 600; margin-bottom: 4px; }
|
|
.agenda-text p { font-size: 12px; color: var(--gray-text); }
|
|
|
|
/* ─── CODE BLOCK ─── */
|
|
.code-block {
|
|
background: #0d1117; border-radius: 12px;
|
|
padding: 22px 26px; margin: 16px 0;
|
|
font-family: 'Source Code Pro', monospace;
|
|
font-size: 14px; line-height: 1.7;
|
|
border: 1px solid #30363d;
|
|
}
|
|
.code-block .comment { color: #8b949e; }
|
|
.code-block .cmd { color: #ffa657; }
|
|
.code-block .string { color: #a5d6ff; }
|
|
.code-block .keyword { color: #ff7b72; }
|
|
.code-block .ok { color: #56d364; }
|
|
|
|
/* ─── STEPS LIST ─── */
|
|
.steps { margin-top: 22px; display: flex; flex-direction: column; gap: 14px; }
|
|
.step {
|
|
display: flex; align-items: flex-start; gap: 18px;
|
|
background: rgba(255,255,255,0.05); border-radius: 12px; padding: 18px 22px;
|
|
}
|
|
.step-num {
|
|
width: 36px; height: 36px; flex-shrink: 0;
|
|
background: linear-gradient(135deg, var(--gold-primary), var(--gold-dark));
|
|
border-radius: 50%; display: flex; align-items: center; justify-content: center;
|
|
font-size: 15px; font-weight: 800; color: var(--navy-dark);
|
|
}
|
|
.step-body h4 { font-size: 15px; font-weight: 700; margin-bottom: 4px; color: var(--gold-light); }
|
|
.step-body p { font-size: 13px; color: var(--gray-text); line-height: 1.5; }
|
|
|
|
/* ─── TWO-COLUMN ─── */
|
|
.two-col-layout {
|
|
display: grid; grid-template-columns: 1fr 1fr; gap: 36px; margin-top: 24px;
|
|
}
|
|
.col-section h3 {
|
|
font-size: 16px; font-weight: 700; color: var(--gold-primary);
|
|
margin-bottom: 14px; text-transform: uppercase; letter-spacing: 1px;
|
|
}
|
|
|
|
/* ─── COMPARISON TABLE ─── */
|
|
.comparison-table { width: 100%; border-collapse: collapse; margin-top: 22px; }
|
|
.comparison-table th {
|
|
background: linear-gradient(135deg, var(--gold-primary), var(--gold-dark));
|
|
color: var(--navy-dark); padding: 16px 18px;
|
|
text-align: left; font-size: 13px; font-weight: 700;
|
|
}
|
|
.comparison-table th:first-child { border-radius: 12px 0 0 0; }
|
|
.comparison-table th:last-child { border-radius: 0 12px 0 0; }
|
|
.comparison-table td {
|
|
padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,0.1);
|
|
font-size: 13px; color: var(--gray-light);
|
|
}
|
|
.comparison-table tr:nth-child(even) { background: rgba(255,255,255,0.03); }
|
|
.comparison-table tr:hover { background: rgba(212,168,71,0.1); }
|
|
|
|
/* ─── HIGHLIGHT PILL ─── */
|
|
.tag-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
|
|
.tag {
|
|
background: rgba(255,255,255,0.1);
|
|
padding: 8px 18px; border-radius: 25px;
|
|
font-size: 13px; font-weight: 500;
|
|
border: 1px solid rgba(255,255,255,0.2);
|
|
}
|
|
.tag.gold {
|
|
background: linear-gradient(135deg, var(--gold-primary), var(--gold-dark));
|
|
color: var(--navy-dark); border: none; font-weight: 700;
|
|
}
|
|
.tag.green { background: rgba(72,187,120,0.2); color: var(--accent-green); border-color: rgba(72,187,120,0.3); }
|
|
.tag.blue { background: rgba(66,153,225,0.2); color: var(--accent-blue); border-color: rgba(66,153,225,0.3); }
|
|
.tag.red { background: rgba(252,129,129,0.2); color: var(--accent-red); border-color: rgba(252,129,129,0.3); }
|
|
|
|
/* ─── CALLOUT BOX ─── */
|
|
.callout {
|
|
display: flex; align-items: flex-start; gap: 16px;
|
|
border-radius: 14px; padding: 20px 24px; margin: 16px 0;
|
|
}
|
|
.callout.info { background: rgba(66,153,225,0.1); border-left: 4px solid var(--accent-blue); }
|
|
.callout.warn { background: rgba(237,137,54,0.1); border-left: 4px solid var(--accent-orange); }
|
|
.callout.success { background: rgba(72,187,120,0.1); border-left: 4px solid var(--accent-green); }
|
|
.callout-icon { font-size: 26px; flex-shrink: 0; margin-top: 2px; }
|
|
.callout-body h4 { font-size: 14px; font-weight: 700; margin-bottom: 6px; color: var(--white); }
|
|
.callout-body p { font-size: 13px; color: var(--gray-text); line-height: 1.5; }
|
|
|
|
/* ─── BRANCH DIAGRAM ─── */
|
|
.branch-diagram {
|
|
margin: 24px 0; padding: 24px;
|
|
background: #0d1117; border-radius: 14px;
|
|
border: 1px solid #30363d; overflow: hidden;
|
|
}
|
|
.branch-row { display: flex; align-items: center; gap: 0; margin: 8px 0; }
|
|
.branch-label {
|
|
width: 80px; font-size: 12px; font-weight: 700;
|
|
font-family: 'Source Code Pro', monospace; flex-shrink: 0;
|
|
}
|
|
.branch-label.main { color: #79c0ff; }
|
|
.branch-label.develop { color: #56d364; }
|
|
.branch-label.feature { color: #ffa657; }
|
|
.commit-dot {
|
|
width: 18px; height: 18px; border-radius: 50%;
|
|
border: 3px solid; flex-shrink: 0; margin: 0 4px;
|
|
}
|
|
.commit-dot.main { border-color: #79c0ff; background: #0d1117; }
|
|
.commit-dot.develop { border-color: #56d364; background: #0d1117; }
|
|
.commit-dot.feature { border-color: #ffa657; background: #0d1117; }
|
|
.commit-dot.filled.main { background: #79c0ff; }
|
|
.commit-dot.filled.develop { background: #56d364; }
|
|
.commit-dot.filled.feature { background: #ffa657; }
|
|
.commit-line {
|
|
height: 3px; flex: 1;
|
|
}
|
|
.commit-line.main { background: #79c0ff; }
|
|
.commit-line.develop { background: #56d364; }
|
|
.commit-line.feature { background: #ffa657; }
|
|
.commit-line.gap { background: transparent; max-width: 26px; }
|
|
|
|
/* ─── SMALL LIST ─── */
|
|
.bullet-list { list-style: none; margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
|
|
.bullet-list li {
|
|
display: flex; align-items: flex-start; gap: 12px;
|
|
font-size: 14px; color: var(--gray-light); line-height: 1.5;
|
|
}
|
|
.bullet-list li::before {
|
|
content: '▸'; color: var(--gold-primary); font-size: 12px; flex-shrink: 0; margin-top: 3px;
|
|
}
|
|
|
|
/* ─── PRINT ─── */
|
|
@media print {
|
|
body { background: white; }
|
|
.slide { margin: 0; box-shadow: none; page-break-after: always; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- ════════════════════════════════════════════════
|
|
SLIDE 1 — COVER
|
|
════════════════════════════════════════════════ -->
|
|
<div class="slide title-slide">
|
|
<div class="corner-accent top-left"></div>
|
|
<div class="corner-accent bottom-right"></div>
|
|
|
|
<div class="meeting-badge">Panduan Praktikum</div>
|
|
<h1>Git untuk Kolaborasi<br>Tim Web Development</h1>
|
|
<div class="subtitle">Version Control & Workflow Mahasiswa</div>
|
|
|
|
<div class="lecturer-info">
|
|
<div class="lecturer-name">Program Studi Informatika — UNTAN</div>
|
|
<div class="lecturer-title">Mata Kuliah Pemrograman Web</div>
|
|
<div class="semester">Semester Genap 2025/2026</div>
|
|
</div>
|
|
|
|
<div class="progress-bar" style="width:4%"></div>
|
|
</div>
|
|
|
|
|
|
<!-- ════════════════════════════════════════════════
|
|
SLIDE 2 — AGENDA
|
|
════════════════════════════════════════════════ -->
|
|
<div class="slide content-slide">
|
|
<div class="corner-accent top-left"></div>
|
|
|
|
<div class="slide-header">
|
|
<h2>Agenda <span>Materi</span></h2>
|
|
<span class="topic-badge">Overview</span>
|
|
</div>
|
|
|
|
<div class="agenda-grid">
|
|
<div class="agenda-item">
|
|
<div class="agenda-number">1</div>
|
|
<div class="agenda-text">
|
|
<h3>Apa itu Git?</h3>
|
|
<p>Konsep dasar version control & mengapa penting</p>
|
|
</div>
|
|
</div>
|
|
<div class="agenda-item">
|
|
<div class="agenda-number">2</div>
|
|
<div class="agenda-text">
|
|
<h3>Perintah Utama Git</h3>
|
|
<p>init, clone, add, commit, push, pull, branch, merge</p>
|
|
</div>
|
|
</div>
|
|
<div class="agenda-item">
|
|
<div class="agenda-number">3</div>
|
|
<div class="agenda-text">
|
|
<h3>Branch & Workflow</h3>
|
|
<p>Strategi branch per kelompok, feature branch</p>
|
|
</div>
|
|
</div>
|
|
<div class="agenda-item">
|
|
<div class="agenda-number">4</div>
|
|
<div class="agenda-text">
|
|
<h3>Pull Request & Review</h3>
|
|
<p>Cara submit tugas via PR di GitHub</p>
|
|
</div>
|
|
</div>
|
|
<div class="agenda-item">
|
|
<div class="agenda-number">5</div>
|
|
<div class="agenda-text">
|
|
<h3>Konflik & Cara Selesaikannya</h3>
|
|
<p>Merge conflict, cara baca dan resolve</p>
|
|
</div>
|
|
</div>
|
|
<div class="agenda-item">
|
|
<div class="agenda-number">6</div>
|
|
<div class="agenda-text">
|
|
<h3>Praktik: Tugas Kelompok</h3>
|
|
<p>Setup repo, clone starter kit, submit PR</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="slide-number">02 / 14</div>
|
|
<div class="progress-bar" style="width:14%"></div>
|
|
</div>
|
|
|
|
|
|
<!-- ════════════════════════════════════════════════
|
|
SLIDE 3 — APA ITU GIT
|
|
════════════════════════════════════════════════ -->
|
|
<div class="slide content-slide">
|
|
<div class="corner-accent top-left"></div>
|
|
|
|
<div class="slide-header">
|
|
<h2>Apa itu <span>Git?</span></h2>
|
|
<span class="topic-badge">Konsep Dasar</span>
|
|
</div>
|
|
|
|
<div class="definition-box">
|
|
<div class="label">Definisi</div>
|
|
<p>Git adalah sistem <strong style="color:var(--gold-light)">version control terdistribusi</strong> yang mencatat setiap perubahan pada file sehingga banyak orang bisa bekerja di proyek yang sama secara bersamaan tanpa saling menimpa pekerjaan satu sama lain.</p>
|
|
<div class="source">— Linus Torvalds, 2005 (awalnya dibuat untuk kernel Linux)</div>
|
|
</div>
|
|
|
|
<div class="card-grid" style="grid-template-columns:repeat(3,1fr);margin-top:18px">
|
|
<div class="card">
|
|
<div class="card-icon">📸</div>
|
|
<h3>Snapshot</h3>
|
|
<p>Setiap commit = foto kondisi seluruh project di waktu tersebut. Bisa kembali ke mana saja.</p>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-icon">🌐</div>
|
|
<h3>Terdistribusi</h3>
|
|
<p>Setiap anggota punya salinan penuh riwayat. Tidak bergantung pada satu server pusat.</p>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-icon">🔀</div>
|
|
<h3>Branch</h3>
|
|
<p>Kerjakan fitur di branch terpisah, lalu gabungkan ke branch utama tanpa risiko merusak.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="slide-number">03 / 14</div>
|
|
<div class="progress-bar" style="width:21%"></div>
|
|
</div>
|
|
|
|
|
|
<!-- ════════════════════════════════════════════════
|
|
SLIDE 4 — GIT vs TANPA GIT
|
|
════════════════════════════════════════════════ -->
|
|
<div class="slide content-slide">
|
|
<div class="corner-accent top-left"></div>
|
|
|
|
<div class="slide-header">
|
|
<h2>Kenapa <span>Perlu Git?</span></h2>
|
|
<span class="topic-badge">Motivasi</span>
|
|
</div>
|
|
|
|
<table class="comparison-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Aspek</th>
|
|
<th>❌ Tanpa Git</th>
|
|
<th>✅ Dengan Git</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Kolaborasi</td>
|
|
<td>Kirim file via WhatsApp, saling tindih</td>
|
|
<td>Push ke repo, merge via PR</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Riwayat perubahan</td>
|
|
<td>index_v1.html, index_v2_fix.html…</td>
|
|
<td>git log — riwayat lengkap dengan pesan</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Rollback</td>
|
|
<td>Tidak bisa, file sudah ditimpa</td>
|
|
<td>git checkout <commit> kapan saja</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Paralelisme</td>
|
|
<td>Harus menunggu giliran mengerjakan</td>
|
|
<td>Tiap orang kerja di branch sendiri</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Review kode</td>
|
|
<td>Tidak ada mekanisme formal</td>
|
|
<td>Pull Request + komentar per baris</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<div class="slide-number">04 / 14</div>
|
|
<div class="progress-bar" style="width:28%"></div>
|
|
</div>
|
|
|
|
|
|
<!-- ════════════════════════════════════════════════
|
|
SLIDE 5 — KONSEP AREA GIT
|
|
════════════════════════════════════════════════ -->
|
|
<div class="slide content-slide">
|
|
<div class="corner-accent top-left"></div>
|
|
|
|
<div class="slide-header">
|
|
<h2>Tiga <span>Area Git</span></h2>
|
|
<span class="topic-badge">Konsep</span>
|
|
</div>
|
|
|
|
<div class="card-grid" style="grid-template-columns:repeat(3,1fr);margin-top:28px">
|
|
<div class="card" style="border-color:rgba(252,129,129,0.4)">
|
|
<div class="card-icon">📝</div>
|
|
<h3 style="color:var(--accent-red)">Working Directory</h3>
|
|
<p>Folder di komputer kamu. Tempat kamu mengedit file secara langsung. Perubahan di sini belum "diketahui" Git.</p>
|
|
<div class="tag-row" style="justify-content:center;margin-top:12px">
|
|
<span class="tag red">Belum dilacak</span>
|
|
</div>
|
|
</div>
|
|
<div class="card" style="border-color:rgba(237,137,54,0.4)">
|
|
<div class="card-icon">📦</div>
|
|
<h3 style="color:var(--accent-orange)">Staging Area</h3>
|
|
<p>Area "antrian" sebelum commit. Kamu memilih file mana yang akan masuk ke snapshot berikutnya.</p>
|
|
<div class="tag-row" style="justify-content:center;margin-top:12px">
|
|
<span class="tag" style="color:var(--accent-orange);border-color:rgba(237,137,54,0.3)">git add</span>
|
|
</div>
|
|
</div>
|
|
<div class="card" style="border-color:rgba(72,187,120,0.4)">
|
|
<div class="card-icon">🗄️</div>
|
|
<h3 style="color:var(--accent-green)">Repository (.git)</h3>
|
|
<p>Database permanen Git. Setelah commit, snapshot tersimpan di sini dan tidak hilang.</p>
|
|
<div class="tag-row" style="justify-content:center;margin-top:12px">
|
|
<span class="tag green">git commit</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="callout info" style="margin-top:20px">
|
|
<div class="callout-icon">💡</div>
|
|
<div class="callout-body">
|
|
<h4>Alur dasar</h4>
|
|
<p><code style="background:#1a2332;padding:2px 8px;border-radius:4px;color:#ffa657">edit file</code> → <code style="background:#1a2332;padding:2px 8px;border-radius:4px;color:#ffa657">git add</code> → <code style="background:#1a2332;padding:2px 8px;border-radius:4px;color:#ffa657">git commit</code> → <code style="background:#1a2332;padding:2px 8px;border-radius:4px;color:#ffa657">git push</code></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="slide-number">05 / 14</div>
|
|
<div class="progress-bar" style="width:35%"></div>
|
|
</div>
|
|
|
|
|
|
<!-- ════════════════════════════════════════════════
|
|
SLIDE 6 — PERINTAH UTAMA
|
|
════════════════════════════════════════════════ -->
|
|
<div class="slide content-slide">
|
|
<div class="corner-accent top-left"></div>
|
|
|
|
<div class="slide-header">
|
|
<h2>Perintah <span>Utama Git</span></h2>
|
|
<span class="topic-badge">Command Reference</span>
|
|
</div>
|
|
|
|
<div class="two-col-layout">
|
|
<div>
|
|
<div class="code-block">
|
|
<span class="comment"># 1. Ambil repo dari GitHub</span>
|
|
<span class="cmd">git clone</span> <span class="string">https://github.com/org/repo.git</span>
|
|
|
|
<span class="comment"># 2. Lihat status perubahan</span>
|
|
<span class="cmd">git status</span>
|
|
|
|
<span class="comment"># 3. Tambah ke staging</span>
|
|
<span class="cmd">git add</span> index.html style.css
|
|
<span class="cmd">git add</span> . <span class="comment"># semua file</span>
|
|
|
|
<span class="comment"># 4. Simpan snapshot</span>
|
|
<span class="cmd">git commit</span> -m <span class="string">"feat: tambah halaman profil"</span>
|
|
|
|
<span class="comment"># 5. Kirim ke GitHub</span>
|
|
<span class="cmd">git push</span> origin feature/kelompok-02
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="code-block">
|
|
<span class="comment"># 6. Ambil update dari remote</span>
|
|
<span class="cmd">git pull</span> origin main
|
|
|
|
<span class="comment"># 7. Buat branch baru</span>
|
|
<span class="cmd">git checkout</span> -b feature/kelompok-02
|
|
|
|
<span class="comment"># 8. Pindah branch</span>
|
|
<span class="cmd">git checkout</span> main
|
|
|
|
<span class="comment"># 9. Lihat riwayat commit</span>
|
|
<span class="cmd">git log</span> --oneline
|
|
|
|
<span class="comment"># 10. Lihat perbedaan</span>
|
|
<span class="cmd">git diff</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="slide-number">06 / 14</div>
|
|
<div class="progress-bar" style="width:42%"></div>
|
|
</div>
|
|
|
|
|
|
<!-- ════════════════════════════════════════════════
|
|
SLIDE 7 — BRANCH STRATEGY
|
|
════════════════════════════════════════════════ -->
|
|
<div class="slide content-slide">
|
|
<div class="corner-accent top-left"></div>
|
|
|
|
<div class="slide-header">
|
|
<h2>Strategi <span>Branch</span></h2>
|
|
<span class="topic-badge">Workflow Tim</span>
|
|
</div>
|
|
|
|
<div class="branch-diagram">
|
|
<!-- main -->
|
|
<div class="branch-row">
|
|
<div class="branch-label main">main</div>
|
|
<div class="commit-dot filled main"></div>
|
|
<div class="commit-line main" style="max-width:80px"></div>
|
|
<div class="commit-dot filled main"></div>
|
|
<div class="commit-line main" style="max-width:120px"></div>
|
|
<div class="commit-dot filled main"></div>
|
|
<div class="commit-line main" style="max-width:160px"></div>
|
|
<div class="commit-dot filled main"></div>
|
|
<div class="commit-line main" style="flex:1"></div>
|
|
<div class="commit-dot filled main"></div>
|
|
<span style="margin-left:12px;font-size:11px;color:#8b949e">← tag: v1.0</span>
|
|
</div>
|
|
<!-- group-01 -->
|
|
<div class="branch-row" style="margin-left:180px">
|
|
<div class="branch-label feature" style="width:120px">group-01</div>
|
|
<div class="commit-dot filled feature"></div>
|
|
<div class="commit-line feature" style="max-width:80px"></div>
|
|
<div class="commit-dot filled feature"></div>
|
|
<div class="commit-line feature" style="max-width:80px"></div>
|
|
<div class="commit-dot filled feature"></div>
|
|
<span style="margin-left:12px;font-size:11px;color:#8b949e">→ PR → merge ke main</span>
|
|
</div>
|
|
<!-- group-02 -->
|
|
<div class="branch-row" style="margin-left:260px">
|
|
<div class="branch-label feature" style="width:120px">group-02</div>
|
|
<div class="commit-dot filled feature"></div>
|
|
<div class="commit-line feature" style="max-width:80px"></div>
|
|
<div class="commit-dot filled feature"></div>
|
|
<span style="margin-left:12px;font-size:11px;color:#8b949e">→ PR → merge ke main</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="two-col-layout" style="margin-top:16px;gap:20px">
|
|
<div class="callout success">
|
|
<div class="callout-icon">✅</div>
|
|
<div class="callout-body">
|
|
<h4>Aturan Branch</h4>
|
|
<p>Setiap kelompok kerja di branch <strong>group-XX</strong>. Jangan pernah push langsung ke <code style="background:#1a2332;padding:1px 6px;border-radius:3px">main</code>.</p>
|
|
</div>
|
|
</div>
|
|
<div class="callout warn">
|
|
<div class="callout-icon">⚠️</div>
|
|
<div class="callout-body">
|
|
<h4>Batasan Edit</h4>
|
|
<p>Hanya edit file di folder <code style="background:#1a2332;padding:1px 6px;border-radius:3px">groups/group-XX/</code>. File lain adalah tanggung jawab dosen.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="slide-number">07 / 14</div>
|
|
<div class="progress-bar" style="width:50%"></div>
|
|
</div>
|
|
|
|
|
|
<!-- ════════════════════════════════════════════════
|
|
SLIDE 8 — COMMIT MESSAGE CONVENTION
|
|
════════════════════════════════════════════════ -->
|
|
<div class="slide content-slide">
|
|
<div class="corner-accent top-left"></div>
|
|
|
|
<div class="slide-header">
|
|
<h2>Pesan <span>Commit yang Baik</span></h2>
|
|
<span class="topic-badge">Konvensi</span>
|
|
</div>
|
|
|
|
<div class="two-col-layout">
|
|
<div>
|
|
<div class="definition-box" style="padding:22px 28px;margin:0 0 16px">
|
|
<div class="label">Format Conventional Commits</div>
|
|
<p style="font-size:17px"><code style="color:var(--gold-light)"><type>(scope): deskripsi singkat</code></p>
|
|
</div>
|
|
<table class="comparison-table" style="margin-top:0">
|
|
<thead>
|
|
<tr><th>Type</th><th>Digunakan untuk</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td><code style="color:#56d364">feat</code></td><td>Menambah fitur baru</td></tr>
|
|
<tr><td><code style="color:var(--accent-red)">fix</code></td><td>Memperbaiki bug</td></tr>
|
|
<tr><td><code style="color:var(--accent-blue)">docs</code></td><td>Mengubah dokumentasi</td></tr>
|
|
<tr><td><code style="color:var(--accent-orange)">style</code></td><td>Format/CSS (bukan logika)</td></tr>
|
|
<tr><td><code style="color:var(--gray-text)">chore</code></td><td>Maintenance, update aset</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div>
|
|
<div class="code-block" style="margin:0">
|
|
<span class="comment"># ✅ BAIK — spesifik dan bermakna</span>
|
|
<span class="ok">feat(group-02): tambah tabel jadwal kuliah</span>
|
|
<span class="ok">fix(group-02): perbaiki link gambar hero</span>
|
|
<span class="ok">style(group-02): sesuaikan warna heading</span>
|
|
|
|
<span class="comment">
|
|
# ❌ BURUK — tidak informatif</span>
|
|
<span class="keyword">update</span>
|
|
<span class="keyword">fix bug</span>
|
|
<span class="keyword">asdfgh</span>
|
|
<span class="keyword">coba commit lagi</span>
|
|
</div>
|
|
|
|
<div class="callout info" style="margin-top:14px">
|
|
<div class="callout-icon">💡</div>
|
|
<div class="callout-body">
|
|
<h4>Tips Praktis</h4>
|
|
<p>Bayangkan melengkapi kalimat: <em>"Jika commit ini diterapkan, ia akan <strong style="color:var(--gold-light)">____</strong>"</em></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="slide-number">08 / 14</div>
|
|
<div class="progress-bar" style="width:57%"></div>
|
|
</div>
|
|
|
|
|
|
<!-- ════════════════════════════════════════════════
|
|
SLIDE 9 — PULL REQUEST
|
|
════════════════════════════════════════════════ -->
|
|
<div class="slide content-slide">
|
|
<div class="corner-accent top-left"></div>
|
|
|
|
<div class="slide-header">
|
|
<h2>Pull Request — <span>Cara Submit Tugas</span></h2>
|
|
<span class="topic-badge">GitHub Workflow</span>
|
|
</div>
|
|
|
|
<div class="steps">
|
|
<div class="step">
|
|
<div class="step-num">1</div>
|
|
<div class="step-body">
|
|
<h4>Fork atau Clone Repo Starter Kit</h4>
|
|
<p><code style="background:#1a2332;padding:2px 8px;border-radius:4px;color:#ffa657">git clone https://github.com/if-untan/web-tugas-kelompok.git</code> — lalu masuk ke folder project</p>
|
|
</div>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step-num">2</div>
|
|
<div class="step-body">
|
|
<h4>Buat Branch Kelompok</h4>
|
|
<p><code style="background:#1a2332;padding:2px 8px;border-radius:4px;color:#ffa657">git checkout -b group-02</code> — satu branch per kelompok, jangan share branch</p>
|
|
</div>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step-num">3</div>
|
|
<div class="step-body">
|
|
<h4>Edit di Folder Kelompok & Commit</h4>
|
|
<p>Edit <code style="background:#1a2332;padding:2px 8px;border-radius:4px;color:#a5d6ff">groups/group-02/index.html</code>, kemudian <code style="background:#1a2332;padding:2px 8px;border-radius:4px;color:#ffa657">git add . && git commit -m "feat(group-02): …"</code></p>
|
|
</div>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step-num">4</div>
|
|
<div class="step-body">
|
|
<h4>Push ke GitHub</h4>
|
|
<p><code style="background:#1a2332;padding:2px 8px;border-radius:4px;color:#ffa657">git push origin group-02</code> — lalu buka GitHub, klik <strong style="color:var(--gold-light)">"Compare & pull request"</strong></p>
|
|
</div>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step-num">5</div>
|
|
<div class="step-body">
|
|
<h4>Isi Deskripsi PR & Submit</h4>
|
|
<p>Sebutkan nama kelompok, anggota, dan ringkasan halaman yang dibuat. Dosen akan review & merge.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="slide-number">09 / 14</div>
|
|
<div class="progress-bar" style="width:64%"></div>
|
|
</div>
|
|
|
|
|
|
<!-- ════════════════════════════════════════════════
|
|
SLIDE 10 — MERGE CONFLICT
|
|
════════════════════════════════════════════════ -->
|
|
<div class="slide content-slide">
|
|
<div class="corner-accent top-left"></div>
|
|
|
|
<div class="slide-header">
|
|
<h2>Merge <span>Conflict</span></h2>
|
|
<span class="topic-badge">Problem Solving</span>
|
|
</div>
|
|
|
|
<div class="two-col-layout">
|
|
<div>
|
|
<div class="definition-box" style="padding:20px 24px;margin:0 0 16px">
|
|
<div class="label">Apa itu?</div>
|
|
<p style="font-size:16px">Conflict terjadi ketika dua orang mengubah <strong style="color:var(--gold-light)">baris yang sama</strong> di file yang sama secara bersamaan.</p>
|
|
</div>
|
|
<div class="code-block" style="font-size:13px">
|
|
<span class="comment"><<<<<<< HEAD (perubahan kamu)</span>
|
|
<span class="ok"><h1>Judul Versi Saya</h1></span>
|
|
<span class="comment">=======</span>
|
|
<span class="keyword"><h1>Judul Versi Teman</h1></span>
|
|
<span class="comment">>>>>>>> group-03/edit-halaman</span>
|
|
</div>
|
|
<p style="font-size:12px;color:var(--gray-text);margin-top:10px">Git tidak tahu mana yang benar — kamu yang memutuskan.</p>
|
|
</div>
|
|
<div>
|
|
<div class="col-section">
|
|
<h3>Langkah Resolve</h3>
|
|
<div class="steps" style="gap:10px">
|
|
<div class="step" style="padding:14px 18px">
|
|
<div class="step-num" style="width:28px;height:28px;font-size:13px">1</div>
|
|
<div class="step-body">
|
|
<h4>Buka file yang conflict</h4>
|
|
<p>Cari tanda <code style="background:#1a2332;padding:1px 6px;border-radius:3px"><<<<<<<</code> di editor</p>
|
|
</div>
|
|
</div>
|
|
<div class="step" style="padding:14px 18px">
|
|
<div class="step-num" style="width:28px;height:28px;font-size:13px">2</div>
|
|
<div class="step-body">
|
|
<h4>Pilih atau gabungkan keduanya</h4>
|
|
<p>Hapus marker conflict, tulis versi final yang disepakati</p>
|
|
</div>
|
|
</div>
|
|
<div class="step" style="padding:14px 18px">
|
|
<div class="step-num" style="width:28px;height:28px;font-size:13px">3</div>
|
|
<div class="step-body">
|
|
<h4>Add & commit ulang</h4>
|
|
<p><code style="background:#1a2332;padding:1px 6px;border-radius:3px">git add . && git commit -m "fix: resolve conflict"</code></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="callout success" style="margin-top:12px">
|
|
<div class="callout-icon">🛡️</div>
|
|
<div class="callout-body">
|
|
<h4>Pencegahan terbaik</h4>
|
|
<p>Tiap kelompok hanya edit folder <code style="background:#1a2332;padding:1px 6px;border-radius:3px">group-XX</code>-nya sendiri → conflict tidak mungkin terjadi.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="slide-number">10 / 14</div>
|
|
<div class="progress-bar" style="width:71%"></div>
|
|
</div>
|
|
|
|
|
|
<!-- ════════════════════════════════════════════════
|
|
SLIDE 11 — .GITIGNORE
|
|
════════════════════════════════════════════════ -->
|
|
<div class="slide content-slide">
|
|
<div class="corner-accent top-left"></div>
|
|
|
|
<div class="slide-header">
|
|
<h2>File <span>.gitignore</span></h2>
|
|
<span class="topic-badge">Best Practice</span>
|
|
</div>
|
|
|
|
<div class="two-col-layout">
|
|
<div>
|
|
<div class="definition-box" style="padding:20px 24px;margin:0 0 16px">
|
|
<div class="label">Fungsi</div>
|
|
<p style="font-size:16px">Memberitahu Git <strong style="color:var(--gold-light)">file apa yang tidak perlu dilacak</strong> — biasanya file besar, file generated, atau file rahasia.</p>
|
|
</div>
|
|
<div class="code-block" style="font-size:13px">
|
|
<span class="comment"># File sistem / editor</span>
|
|
<span class="ok">.DS_Store</span>
|
|
<span class="ok">.vscode/</span>
|
|
<span class="ok">Thumbs.db</span>
|
|
|
|
<span class="comment"># Dependensi (bisa di-install ulang)</span>
|
|
<span class="ok">node_modules/</span>
|
|
|
|
<span class="comment"># File build/generated</span>
|
|
<span class="ok">dist/</span>
|
|
<span class="ok">*.min.js</span>
|
|
|
|
<span class="comment"># Jangan commit password!</span>
|
|
<span class="ok">.env</span>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="col-section">
|
|
<h3>Aturan Penulisan</h3>
|
|
<ul class="bullet-list">
|
|
<li><code style="background:#1a2332;padding:1px 6px;border-radius:3px">*.log</code> — abaikan semua file <code>.log</code></li>
|
|
<li><code style="background:#1a2332;padding:1px 6px;border-radius:3px">folder/</code> — abaikan seluruh folder</li>
|
|
<li><code style="background:#1a2332;padding:1px 6px;border-radius:3px">!penting.log</code> — pengecualian (tetap track)</li>
|
|
<li><code style="background:#1a2332;padding:1px 6px;border-radius:3px">#</code> — baris komentar</li>
|
|
</ul>
|
|
|
|
<div class="callout warn" style="margin-top:20px">
|
|
<div class="callout-icon">⚠️</div>
|
|
<div class="callout-body">
|
|
<h4>File sudah terlanjur di-commit?</h4>
|
|
<p>Menambahkan ke .gitignore tidak menghapusnya dari riwayat. Gunakan <code style="background:#1a2332;padding:1px 6px;border-radius:3px">git rm --cached nama-file</code> lalu commit.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="callout info" style="margin-top:12px">
|
|
<div class="callout-icon">🔗</div>
|
|
<div class="callout-body">
|
|
<h4>Template siap pakai</h4>
|
|
<p>github.com/github/gitignore — template untuk berbagai bahasa & framework</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="slide-number">11 / 14</div>
|
|
<div class="progress-bar" style="width:78%"></div>
|
|
</div>
|
|
|
|
|
|
<!-- ════════════════════════════════════════════════
|
|
SLIDE 12 — SETUP PRAKTIKUM
|
|
════════════════════════════════════════════════ -->
|
|
<div class="slide content-slide">
|
|
<div class="corner-accent top-left"></div>
|
|
|
|
<div class="slide-header">
|
|
<h2>Setup <span>Praktikum Hari Ini</span></h2>
|
|
<span class="topic-badge">Hands-On</span>
|
|
</div>
|
|
|
|
<div class="two-col-layout">
|
|
<div>
|
|
<div class="col-section">
|
|
<h3>Langkah Persiapan</h3>
|
|
<div class="steps" style="gap:10px">
|
|
<div class="step" style="padding:14px 18px">
|
|
<div class="step-num" style="width:28px;height:28px;font-size:13px">1</div>
|
|
<div class="step-body">
|
|
<h4>Install Git</h4>
|
|
<p>git-scm.com/downloads — cek dengan <code style="background:#1a2332;padding:1px 6px;border-radius:3px">git --version</code></p>
|
|
</div>
|
|
</div>
|
|
<div class="step" style="padding:14px 18px">
|
|
<div class="step-num" style="width:28px;height:28px;font-size:13px">2</div>
|
|
<div class="step-body">
|
|
<h4>Konfigurasi Identitas</h4>
|
|
<p><code style="background:#1a2332;padding:1px 6px;border-radius:3px">git config --global user.name "Nama"</code><br><code style="background:#1a2332;padding:1px 6px;border-radius:3px">git config --global user.email "email@untan.ac.id"</code></p>
|
|
</div>
|
|
</div>
|
|
<div class="step" style="padding:14px 18px">
|
|
<div class="step-num" style="width:28px;height:28px;font-size:13px">3</div>
|
|
<div class="step-body">
|
|
<h4>Daftar / Login GitHub</h4>
|
|
<p>Buka github.com, buat akun dengan email kampus</p>
|
|
</div>
|
|
</div>
|
|
<div class="step" style="padding:14px 18px">
|
|
<div class="step-num" style="width:28px;height:28px;font-size:13px">4</div>
|
|
<div class="step-body">
|
|
<h4>Clone Starter Kit</h4>
|
|
<p>Link repo akan dibagikan dosen — gunakan <code style="background:#1a2332;padding:1px 6px;border-radius:3px">git clone <url></code></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="col-section">
|
|
<h3>Struktur Starter Kit</h3>
|
|
<div class="code-block" style="font-size:13px;margin:0">
|
|
<span class="ok">web-tugas-kelompok/</span>
|
|
<span class="string">├── assets/</span>
|
|
<span class="string">│ └── global/</span>
|
|
<span class="string">│ ├── hero.webp</span>
|
|
<span class="string">│ ├── logo.png</span>
|
|
<span class="string">│ └── footer.png</span>
|
|
<span class="string">├── groups/</span>
|
|
<span class="string">│ ├── group-01/</span>
|
|
<span class="string">│ │ ├── index.html ← edit di sini</span>
|
|
<span class="string">│ │ └── style.css ← styling tambahan</span>
|
|
<span class="string">│ ├── group-02/ ...</span>
|
|
<span class="string">│ └── group-05/ ...</span>
|
|
<span class="comment">├── .gitignore</span>
|
|
<span class="comment">├── package.json (vite dev server)</span>
|
|
<span class="ok">└── README.md</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="slide-number">12 / 14</div>
|
|
<div class="progress-bar" style="width:85%"></div>
|
|
</div>
|
|
|
|
|
|
<!-- ════════════════════════════════════════════════
|
|
SLIDE 13 — CHEAT SHEET
|
|
════════════════════════════════════════════════ -->
|
|
<div class="slide content-slide">
|
|
<div class="corner-accent top-left"></div>
|
|
|
|
<div class="slide-header">
|
|
<h2>Git <span>Cheat Sheet</span></h2>
|
|
<span class="topic-badge">Referensi Cepat</span>
|
|
</div>
|
|
|
|
<div class="two-col-layout" style="gap:24px">
|
|
<div>
|
|
<table class="comparison-table" style="margin-top:0">
|
|
<thead><tr><th>Perintah</th><th>Fungsi</th></tr></thead>
|
|
<tbody>
|
|
<tr><td><code style="color:#ffa657">git clone <url></code></td><td>Unduh repo dari GitHub</td></tr>
|
|
<tr><td><code style="color:#ffa657">git status</code></td><td>Lihat file yang berubah</td></tr>
|
|
<tr><td><code style="color:#ffa657">git add .</code></td><td>Staging semua perubahan</td></tr>
|
|
<tr><td><code style="color:#ffa657">git commit -m "…"</code></td><td>Simpan snapshot</td></tr>
|
|
<tr><td><code style="color:#ffa657">git push origin <branch></code></td><td>Kirim ke GitHub</td></tr>
|
|
<tr><td><code style="color:#ffa657">git pull origin main</code></td><td>Update dari remote</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div>
|
|
<table class="comparison-table" style="margin-top:0">
|
|
<thead><tr><th>Perintah</th><th>Fungsi</th></tr></thead>
|
|
<tbody>
|
|
<tr><td><code style="color:#ffa657">git checkout -b <nama></code></td><td>Buat & pindah branch</td></tr>
|
|
<tr><td><code style="color:#ffa657">git branch</code></td><td>Lihat daftar branch</td></tr>
|
|
<tr><td><code style="color:#ffa657">git log --oneline</code></td><td>Riwayat commit ringkas</td></tr>
|
|
<tr><td><code style="color:#ffa657">git diff</code></td><td>Lihat perbedaan belum di-stage</td></tr>
|
|
<tr><td><code style="color:#ffa657">git stash</code></td><td>Simpan sementara perubahan</td></tr>
|
|
<tr><td><code style="color:#ffa657">git restore <file></code></td><td>Batalkan perubahan file</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tag-row" style="margin-top:16px">
|
|
<span class="tag gold">📖 Pro Git Book: git-scm.com/book</span>
|
|
<span class="tag blue">🎮 Latihan Interaktif: learngitbranching.js.org</span>
|
|
<span class="tag green">🐙 Referensi: docs.github.com</span>
|
|
</div>
|
|
|
|
<div class="slide-number">13 / 14</div>
|
|
<div class="progress-bar" style="width:92%"></div>
|
|
</div>
|
|
|
|
|
|
<!-- ════════════════════════════════════════════════
|
|
SLIDE 14 — PENUTUP / TUGAS
|
|
════════════════════════════════════════════════ -->
|
|
<div class="slide content-slide">
|
|
<div class="corner-accent top-left"></div>
|
|
<div class="corner-accent bottom-right"></div>
|
|
|
|
<div class="slide-header">
|
|
<h2>Tugas <span>Kelompok</span></h2>
|
|
<span class="topic-badge">Assessment</span>
|
|
</div>
|
|
|
|
<div class="two-col-layout">
|
|
<div>
|
|
<div class="col-section">
|
|
<h3>Yang Harus Dikerjakan</h3>
|
|
<ul class="bullet-list" style="gap:14px">
|
|
<li>Clone starter kit yang diberikan dosen</li>
|
|
<li>Buat branch dengan nama <strong style="color:var(--gold-light)">group-XX</strong> sesuai nomor kelompok</li>
|
|
<li>Edit konten di <code style="background:#1a2332;padding:1px 6px;border-radius:3px">groups/group-XX/index.html</code> dalam area <code style="background:#1a2332;padding:1px 6px;border-radius:3px">#assignment-body</code></li>
|
|
<li>Buat minimal <strong style="color:var(--gold-light)">3 commit</strong> dengan pesan yang bermakna</li>
|
|
<li>Push branch ke GitHub dan buat <strong style="color:var(--gold-light)">Pull Request</strong></li>
|
|
<li>Isi deskripsi PR dengan nama anggota & ringkasan konten</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="col-section">
|
|
<h3>Kriteria Penilaian</h3>
|
|
<table class="comparison-table" style="margin-top:0">
|
|
<thead><tr><th>Aspek</th><th>Bobot</th></tr></thead>
|
|
<tbody>
|
|
<tr><td>Kualitas konten HTML</td><td><strong style="color:var(--gold-light)">40%</strong></td></tr>
|
|
<tr><td>Commit message yang baik</td><td><strong style="color:var(--gold-light)">20%</strong></td></tr>
|
|
<tr><td>Jumlah commit (≥ 3)</td><td><strong style="color:var(--gold-light)">20%</strong></td></tr>
|
|
<tr><td>PR description lengkap</td><td><strong style="color:var(--gold-light)">20%</strong></td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="callout info" style="margin-top:16px">
|
|
<div class="callout-icon">📅</div>
|
|
<div class="callout-body">
|
|
<h4>Deadline</h4>
|
|
<p>PR harus disubmit sebelum pertemuan berikutnya. Late submission tidak diterima.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="slide-number">14 / 14</div>
|
|
<div class="progress-bar" style="width:100%"></div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|