Template Parsing Rules

Panduan lengkap untuk membuat template HTML yang dapat di-parse dengan benar oleh sistem IMUII.

💡 Tips: Baca Quick Start terlebih dahulu untuk contoh minimal yang bisa langsung dicoba!

🚀 Quick Start (5 Menit)

Template minimal yang bisa langsung digunakan:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Portfolio - {{name}}</title>
</head>
<body>
  <!-- [HERO] Hero Section -->
  <section>
    <h1>{{name}}</h1>
    <p>{{email}}</p>
    <p>{{bio}}</p>
  </section>

  <!-- [SKILLS] [OPTIONAL] My Skills -->
  <section>
    <h2>Skills</h2>
    {{skills}}
  </section>

  <!-- [FOOTER] -->
  <footer>
    <p>&copy; 2024 {{name}}</p>
  </footer>
</body>
</html>

Yang perlu diingat:

✅ Setiap section diawali dengan comment: (TYPE dalam bracket)
✅ Section harus di dalam tag
✅ Gunakan [OPTIONAL] untuk section yang tidak wajib
✅ Placeholder format: {{variable}}

🎯 Sudah siap? Copy template di atas, upload di halaman [Upload Template](/templates/upload), dan lihat hasilnya!

📚 Daftar Isi

Dasar-dasar

[Format Section Comment](#format-section-comment) - Cara menulis comment yang benar
[Section Types](#section-types) - Daftar semua tipe section yang valid
[Placeholder Variables](#placeholder-variables) - Variabel yang bisa digunakan

Konsep Lanjutan

[Optional Sections](#optional-sections) - Section yang hanya muncul jika ada data
[Struktur Template](#struktur-template) - Struktur HTML yang benar

Referensi

[Contoh Template Lengkap](#contoh-template-lengkap) - Template siap pakai
[Best Practices](#best-practices) - Tips dan trik
[Common Mistakes](#common-mistakes) - Kesalahan yang sering terjadi
[Troubleshooting](#troubleshooting) - Solusi masalah umum

📝 Format Section Comment

Setiap section HARUS diawali dengan comment HTML dengan format berikut:

<!-- [TYPE] [OPTIONAL] Section Name -->

Format Detail:

Bagian	Status	Deskripsi
`[TYPE]`	WAJIB	Salah satu dari section types yang valid (lihat di bawah), HARUS dalam bracket `[]`
`[OPTIONAL]`	Opsional	Tambahkan jika section hanya ditampilkan jika data tersedia
`Section Name`	Opsional	Nama deskriptif untuk section

✅ Contoh Format yang Benar:

<!-- [HERO] Hero Section -->
<!-- [SKILLS] [OPTIONAL] My Skills -->
<!-- [EXPERIENCE] [OPTIONAL] Work Experience -->
<!-- [FOOTER] -->

❌ Contoh Format yang Salah:

<!-- hero section -->                    ❌ Type harus UPPERCASE dan dalam bracket
<!-- HERO Hero Section -->               ❌ Type harus dalam bracket [HERO]
<!-- [ HERO ] Hero Section -->            ❌ Tidak boleh ada spasi di dalam bracket
<!-- [HERO]Hero Section -->              ❌ Harus ada spasi setelah bracket
<!-- [HERO] Hero Section -->             ✅ BENAR

⚠️ Aturan Penting:

Comment HARUS tepat sebelum section dimulai
Format case-sensitive untuk TYPE (gunakan UPPERCASE)
Spasi di dalam bracket [TYPE] tidak diperbolehkan
Section content harus berada di dalam tag

🎯 Visual Guide:

<!-- ✅ BENAR: Comment tepat sebelum section, TYPE dalam bracket -->
<!-- [HERO] Hero Section -->
<section>
  <h1>{{name}}</h1>
</section>

<!-- ❌ SALAH: Ada elemen lain sebelum section -->
<!-- [HERO] Hero Section -->
<div>Some wrapper</div>
<section>
  <h1>{{name}}</h1>
</section>

🏷️ Section Types

Berikut adalah daftar section types yang VALID:

Type	Deskripsi	Contoh Penggunaan
`HEADER`	Navigation bar atau header	Menu navigasi, logo, top bar
`HERO`	Hero section dengan intro	Nama, bio, intro utama
`ABOUT`	About me section	Deskripsi tentang diri, background
`EXPERIENCE`	Work experience section	Riwayat pekerjaan
`EDUCATION`	Education section	Riwayat pendidikan
`SKILLS`	Skills section	Daftar keahlian
`PROJECTS`	Projects section	Portfolio projects
`FOOTER`	Footer section	Footer dengan links, copyright
`CUSTOM`	Custom section	Section khusus yang tidak termasuk kategori di atas

Contoh Penggunaan:

<!-- [HEADER] Navigation -->
<nav>
  <a href="#home">Home</a>
  <a href="#about">About</a>
</nav>

<!-- [HERO] Hero Section -->
<section class="hero">
  <h1>{{name}}</h1>
  <p>{{bio}}</p>
</section>

🔤 Placeholder Variables

Gunakan format {{variable}} untuk placeholder yang akan diisi dengan data CV.

Personal Info Variables:

Variable	Deskripsi
`{{name}}`	Nama lengkap
`{{email}}`	Alamat email
`{{phone}}`	Nomor telepon
`{{address}}`	Alamat lengkap
`{{website}}`	Website personal URL
`{{linkedin}}`	LinkedIn profile URL
`{{github}}`	GitHub profile URL
`{{bio}}`	Bio atau summary

Array Variables (Auto-rendered):

Variable	Deskripsi
`{{skills}}`	List skills (auto-rendered sebagai badges/tags)
`{{experience}}`	List experience (auto-rendered sebagai cards)
`{{education}}`	List education (auto-rendered sebagai cards)
`{{projects}}`	List projects (auto-rendered sebagai cards)
`{{languages}}`	List languages
`{{certifications}}`	List certifications

Contoh Penggunaan:

<h1>{{name}}</h1>
<p>Email: {{email}}</p>
<p>Phone: {{phone}}</p>
<a href="{{linkedin}}">LinkedIn</a>

<div>
  <h2>Skills</h2>
  {{skills}}
</div>

<div>
  <h2>Experience</h2>
  {{experience}}
</div>

🔄 Optional Sections

Section yang bersifat optional hanya akan ditampilkan jika data tersedia.

Cara Membuat Optional Section:

Tambahkan marker [OPTIONAL] di comment:

<!-- [EXPERIENCE] [OPTIONAL] Work Experience -->
<section>
  <h2>Experience</h2>
  <div>{{experience}}</div>
</section>

Auto-Detection:

Parser akan otomatis mendeteksi section sebagai optional jika:

Marker [OPTIONAL] ada di comment, ATAU
Section mengandung placeholder array seperti {{experience}}, {{projects}}, {{skills}}, dll.

Placeholder yang Auto-Optional:

{{experience}}
{{projects}}
{{education}}
{{skills}}
{{languages}}
{{certifications}}

💡 Tips: Jika section menggunakan placeholder array, tidak perlu menambahkan [OPTIONAL] secara manual.

🏗️ Struktur Template

Template harus memiliki struktur HTML yang valid:

<!DOCTYPE html>
<html lang="id">
<head>
  <!-- Head content: meta, title, scripts, styles -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Portfolio - {{name}}</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    /* Custom styles */
  </style>
</head>
<body>
  <!-- [HEADER] Navigation -->
  <nav>...</nav>

  <!-- [HERO] Hero Section -->
  <section>...</section>

  <!-- [SKILLS] [OPTIONAL] My Skills -->
  <section>...</section>

  <!-- [EXPERIENCE] [OPTIONAL] Work Experience -->
  <section>...</section>

  <!-- [FOOTER] -->
  <footer>...</footer>
</body>
</html>

⚠️ Requirements:

WAJIB memiliki dan tag
Sections hanya di-extract dari dalam
Head content (meta, styles, scripts) akan di-extract terpisah
Body attributes akan di-extract untuk wrapper

📄 Contoh Template Lengkap

Berikut contoh template lengkap yang mengikuti semua rules:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Portfolio - {{name}}</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    body {
      font-family: 'Arial', sans-serif;
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body class="bg-gray-100">
  
  <!-- [HEADER] Navigation -->
  <nav class="bg-white shadow-md">
    <div class="container mx-auto px-4 py-4">
      <div class="flex justify-between items-center">
        <h1 class="text-xl font-bold">{{name}}</h1>
        <div class="flex gap-4">
          <a href="#about">About</a>
          <a href="#experience">Experience</a>
          <a href="#projects">Projects</a>
        </div>
      </div>
    </div>
  </nav>

  <!-- [HERO] Hero Section -->
  <section class="container mx-auto px-4 py-16 text-center">
    <h1 class="text-4xl font-bold mb-4">{{name}}</h1>
    <p class="text-xl text-gray-600 mb-2">{{email}}</p>
    <p class="text-lg text-gray-500">{{bio}}</p>
    <div class="mt-6 flex justify-center gap-4">
      <a href="{{linkedin}}" class="text-blue-600">LinkedIn</a>
      <a href="{{github}}" class="text-gray-800">GitHub</a>
    </div>
  </section>

  <!-- [ABOUT] [OPTIONAL] About Me -->
  <section id="about" class="container mx-auto px-4 py-16">
    <h2 class="text-3xl font-bold mb-6">About Me</h2>
    <p class="text-gray-700">{{bio}}</p>
  </section>

  <!-- [SKILLS] [OPTIONAL] My Skills -->
  <section class="container mx-auto px-4 py-16 bg-white">
    <h2 class="text-3xl font-bold mb-6">Skills</h2>
    <div class="flex flex-wrap gap-2">
      {{skills}}
    </div>
  </section>

  <!-- [EXPERIENCE] [OPTIONAL] Work Experience -->
  <section id="experience" class="container mx-auto px-4 py-16">
    <h2 class="text-3xl font-bold mb-6">Experience</h2>
    <div class="space-y-6">
      {{experience}}
    </div>
  </section>

  <!-- [EDUCATION] [OPTIONAL] Education -->
  <section class="container mx-auto px-4 py-16 bg-white">
    <h2 class="text-3xl font-bold mb-6">Education</h2>
    <div class="space-y-4">
      {{education}}
    </div>
  </section>

  <!-- [PROJECTS] [OPTIONAL] My Projects -->
  <section id="projects" class="container mx-auto px-4 py-16">
    <h2 class="text-3xl font-bold mb-6">Projects</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      {{projects}}
    </div>
  </section>

  <!-- [FOOTER] -->
  <footer class="bg-gray-800 text-white py-8">
    <div class="container mx-auto px-4 text-center">
      <p>&copy; 2024 {{name}}. All rights reserved.</p>
      <div class="mt-4 flex justify-center gap-4">
        <a href="{{linkedin}}">LinkedIn</a>
        <a href="{{github}}">GitHub</a>
        <a href="mailto:{{email}}">Email</a>
      </div>
    </div>
  </footer>

</body>
</html>

✅ Best Practices

1. Gunakan Comment Marker yang Jelas

<!-- [HERO] Hero Section --> ✅ BENAR
<!-- hero section --> ❌ SALAH (type harus uppercase dan dalam bracket)
<!-- HERO Hero Section --> ❌ SALAH (type harus dalam bracket)

2. Urutkan Sections Secara Logis

Urutan yang disarankan:

Header → Hero → About → Skills → Experience → Education → Projects → Footer

3. Gunakan [OPTIONAL] untuk Sections yang Bergantung pada Data

<!-- [PROJECTS] [OPTIONAL] My Projects --> ✅

4. Pastikan Section Content Tidak Kosong

<!-- [SKILLS] [OPTIONAL] My Skills -->
<section>
  <h2>Skills</h2>
  {{skills}}
</section> ✅ BENAR

<!-- [SKILLS] [OPTIONAL] My Skills -->
❌ SALAH (tidak ada content)

5. Gunakan Semantic HTML

Gunakan
,
,
untuk struktur yang jelas

6. Test Template dengan Dummy Data

Pastikan semua placeholder ter-render dengan benar
Gunakan fitur preview di halaman [Upload Template](/templates/upload)

❌ Common Mistakes

1. Format Comment Salah

<!-- hero section --> ❌ SALAH (type harus uppercase dan dalam bracket)
<!-- HERO Hero Section --> ❌ SALAH (type harus dalam bracket)
<!-- [HERO] Hero Section --> ✅ BENAR

2. Type Tidak Valid

<!-- [INTRO] Introduction --> ❌ SALAH (INTRO tidak valid)
<!-- [HERO] Introduction --> ✅ BENAR

3. Comment Tidak Tepat Sebelum Section

<!-- [HERO] Hero Section -->
<div>Some content</div>
<section>...</section> ❌ SALAH (section dimulai setelah div)

<!-- [HERO] Hero Section -->
<section>...</section> ✅ BENAR

4. Missing Body Tag

<html>
<head>...</head>
<section>...</section> ❌ SALAH (tidak ada body tag)
</html>

<html>
<head>...</head>
<body>
  <section>...</section> ✅ BENAR
</body>
</html>

5. Section Content Kosong

<!-- [SKILLS] [OPTIONAL] My Skills -->
<!-- End of skills --> ❌ SALAH (tidak ada content HTML)

🔧 Troubleshooting

Problem: Template tidak ter-parse menjadi sections

Solusi:

Pastikan format comment benar: (TYPE dalam bracket)
Pastikan comment tepat sebelum section dimulai
Pastikan section berada di dalam tag
Cek apakah type yang digunakan valid

Problem: Section tidak muncul di preview

Solusi:

Jika section optional, pastikan data tersedia
Cek condition section (misal: if:experience)
Pastikan placeholder variable benar (misal: {{experience}} bukan {{experiences}})

Problem: Warning "Tidak ada section markers ditemukan"

Solusi:

Tambahkan comment markers untuk setiap section
Gunakan format: (TYPE dalam bracket)
Pastikan format case-sensitive (TYPE harus UPPERCASE)

Problem: Section content hilang atau terpotong

Solusi:

Pastikan section content berada di antara comment marker dan comment berikutnya
Jangan letakkan comment di tengah-tengah section content
Pastikan tag HTML ditutup dengan benar

📞 Checklist Sebelum Upload

Sebelum mengupload template, pastikan:

[ ] ✅ Format comment mengikuti rules di atas
[ ] ✅ Section types yang digunakan valid
[ ] ✅ Template memiliki struktur HTML yang valid
[ ] ✅ Semua sections berada di dalam tag
[ ] ✅ Placeholder variables menggunakan format {{variable}}
[ ] ✅ Template sudah di-test dengan preview di halaman upload

Last Updated: 2024 Version: 1.0.0