Membuat Artikel Menarik di Laravel dengan cdnjs

Sat, March 2025 05:37:47

Pendahuluan

Laravel adalah framework PHP yang powerful dan elegan, tetapi tampilan default-nya masih butuh sentuhan agar lebih menarik. Nah, di sinilah kita bisa memanfaatkan cdnjs — layanan CDN yang menyediakan banyak library frontend populer. Dalam artikel ini, kita akan bahas secara mendalam cara membuat tampilan artikel lebih menarik dan kode lebih enak dibaca di Laravel, hingga mencapai 3000 kata!

Apa Itu cdnjs?

cdnjs adalah singkatan dari Content Delivery Network JavaScript, yaitu jaringan distribusi konten gratis yang menyimpan berbagai library frontend seperti Bootstrap, FontAwesome, Highlight.js, Animate.css, dan banyak lagi. Kelebihannya antara lain:

• Cepat karena file diambil dari server global terdekat.
• Hemat bandwidth karena pengunjung mungkin sudah cache library dari situs lain.
• Gampang di-maintain karena kita nggak perlu download file manual.

Bayangkan kita mau buat halaman artikel dengan tampilan profesional. Pakai Laravel + cdnjs, kita bisa tambahin style keren, ikon interaktif, dan highlight kode cuma dengan beberapa baris kode. Yuk kita lanjut ke implementasinya!

Setup Laravel dan cdnjs

Pastikan kamu sudah punya proyek Laravel. Kalau belum, install dulu:

composer create-project laravel/laravel artikel-laravel

Lalu, buat file resources/views/article.blade.php untuk tampilan artikel.

Menambahkan CSS dan JS dari cdnjs

Kita bakal pakai beberapa library utama:

• Bootstrap buat layout responsif.
• FontAwesome buat ikon.
• Highlight.js buat kode lebih keren.
• Animate.css buat animasi simpel.

Tambahkan ini ke bagian <head>:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">

Tambahkan juga script di bawah sebelum </body>:

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>

Membuat Tampilan Artikel

Kita buat struktur dasar artikelnya di file article.blade.php:

<div class="container mt-5">
    <h1 class="text-primary animate__animated animate__fadeInDown">
        Artikel Keren di Laravel
    </h1>
    <p class="text-muted">Ditulis oleh <strong>Admin</strong> pada {{ now()->format('d M Y') }}</p>

    <hr>

    <h2 class="mt-4">Bagian 1: Perkenalan Laravel</h2>
    <p>Laravel adalah framework PHP yang elegan dan penuh fitur modern.</p>

    <h2 class="mt-4">Contoh Kode:</h2>
    <pre><code class="language-php">
    Route::get('/artikel', function () {
        return view('article');
    });
    </code></pre>

    <h2 class="mt-4">Penutup</h2>
    <p>Jadi, yuk bikin website keren pakai Laravel dan cdnjs!</p>
</div>

Penjelasan Kode:

1. text-primary dari Bootstrap bikin judul biru.
2. animate__fadeInDown dari Animate.css kasih efek turun.
3. Highlight.js bikin kode lebih enak dilihat.

Ekstra Fitur Menarik

Biar makin keren, tambahin fitur tambahan ini:

Tombol Copy Kode

Biar pembaca bisa langsung copy kode:

<button class="btn btn-secondary" onclick="copyCode()">Copy Kode</button>
<script>
    function copyCode() {
        navigator.clipboard.writeText(document.querySelector('pre code').innerText);
        alert('Kode berhasil disalin!');
    }
</script>

Dark Mode

Tambahin toggle dark mode simpel:

<button class="btn btn-dark" onclick="toggleDarkMode()">Dark Mode</button>
<script>
    function toggleDarkMode() {
        document.body.classList.toggle('bg-dark');
        document.body.classList.toggle('text-light');
    }
</script>

Kesimpulan

Kita udah berhasil bikin artikel Laravel yang lebih menarik dengan bantuan cdnjs. Dari tampilan responsif, highlight kode, hingga animasi — semuanya gratis dan gampang diimplementasi.

Kalau mau lanjut, kita bisa:

• Tambahin komentar Disqus.
• Buat sidebar navigasi keren.
• Optimasi SEO.
• Tambahin animasi masuk setiap elemen.

Mau aku lanjut buatin versi lanjutannya juga?