Asset Path Management

Cara mudah menggunakan asset (CSS, JS, gambar) dalam template Nexa Framework.

info Penting: Gunakan sintaks asset untuk menghindari hardcode path dan memudahkan maintenance.

Cara Penggunaan Dasar

Ganti path manual dengan sintaks asset yang lebih mudah:

❌ Jangan Gunakan (Hardcode)


<link rel="stylesheet" href="/assets/css/style.css">
<script src="/assets/js/app.js"></script>
<img src="/assets/images/logo.png" alt="Logo">

✅ Gunakan (Asset Syntax)


<link rel="stylesheet" href="{css/style.css}">
<script src="{js/app.js}"></script>
<img src="{img/logo.png}" alt="Logo">

Jenis Asset yang Didukung

Jenis Sintaks Contoh Penggunaan
CSS {css/filename} {css/bootstrap.css}
JavaScript {js/filename} {js/jquery.js}
Gambar {img/filename} {img/logo.png}
Font {font/filename} {font/roboto.ttf}
File Upload {drive/filename} {drive/document.pdf}

Contoh Penggunaan Praktis

1. Layout Template Sederhana


<!DOCTYPE html>
<html>
<head>
    <title>{page_title}</title>
    
    <!-- CSS -->
    <link rel="stylesheet" href="{css/bootstrap.min.css}">
    <link rel="stylesheet" href="{css/style.css}">
    
    <!-- Favicon -->
    <link rel="icon" href="{img/favicon.ico}">
</head>
<body>
    <!-- Header -->
    <header>
        <img src="{img/logo.png}" alt="Logo">
    </header>
    
    <main>
        {content}
    </main>
    
    <!-- JavaScript -->
    <script src="{js/jquery.min.js}"></script>
    <script src="{js/app.js}"></script>
</body>
</html>

2. Dalam Loop/Blok Template


<!-- NEXA products -->
<div class="product">
    <img src="{img/{product.image}}" alt="{product.name}">
    <h3>{product.name}</h3>
    <p>{product.description}</p>
    
    <!-- File attachment -->
    <a href="{drive/{product.manual}}" target="_blank">
        Download Manual
    </a>
</div>
<!-- END products -->

3. Dengan Filter


<!-- CSS dengan filter minify -->
<link rel="stylesheet" href="{css/style.css|minify}">

<!-- Gambar dengan filter resize -->
<img src="{img/photo.jpg|resize:300,200}" alt="Photo">

<!-- JavaScript dengan filter escape -->
<script src="{js/script.js|escape}"></script>

Fitur Khusus

1. Variabel Dinamis (Hanya untuk Drive)

Untuk file upload, Anda bisa menggunakan variabel dari database:


<!-- NEXA users -->
<div class="user-profile">
    <img src="{drive/{user.avatar}}" alt="Avatar">
    <a href="{drive/{user.cv}}" target="_blank">Download CV</a>
</div>
<!-- END users -->

2. Responsive Images


<!-- Desktop -->
<img src="{img/banner.jpg}" alt="Banner" class="d-none d-md-block">

<!-- Mobile -->
<img src="{img/banner-mobile.jpg}" alt="Banner" class="d-md-none">

Tips Praktis

✅ Yang Harus Dilakukan

  • Selalu gunakan sintaks asset
  • Gunakan filter untuk optimasi
  • Gunakan variabel untuk file dinamis
  • Test di berbagai environment

❌ Yang Tidak Boleh

  • Jangan hardcode path
  • Jangan gunakan path absolut
  • Jangan lupa escape output
  • Jangan upload file besar

Penyelesaian Masalah

1. Asset Tidak Muncul

Kemungkinan penyebab:
  • File tidak ada di folder assets
  • Nama file salah (case sensitive)
  • Path tidak sesuai struktur folder

2. Error di Console


<!-- Jika muncul error seperti ini -->
<!-- ASSET_ERROR: css/nonexistent.css -->

<!-- Periksa apakah file ada di: -->
assets/css/nonexistent.css

Struktur Folder yang Benar


project/
├── assets/
│   ├── css/
│   │   ├── style.css
│   │   └── bootstrap.css
│   ├── js/
│   │   ├── app.js
│   │   └── jquery.js
│   ├── images/
│   │   ├── logo.png
│   │   └── banner.jpg
│   ├── fonts/
│   │   └── roboto.ttf
│   └── drive/
│       ├── documents/
│       └── uploads/

Kesimpulan

Gunakan sintaks asset untuk kemudahan maintenance dan konsistensi. Jangan lupa untuk selalu test di berbagai environment.

check_circle Siap Digunakan: Sekarang Anda bisa menggunakan asset path management dengan mudah dalam template Nexa Framework.