Portal Berita Laract (Laract News Portal)

Aplikasi blog berita sederhana yang dibangun dengan Laravel 11 dan React, mendemonstrasikan kombinasi ampuh backend Laravel dengan frontend React menggunakan Inertia.js. Proyek pembelajaran ini menampilkan praktik pengembangan fullstack modern.

📋 Ringkasan

Proyek ini dibuat sebagai latihan pembelajaran untuk memahami cara mengintegrasikan Laravel 11 dengan React menggunakan Inertia.js. Berdasarkan tutorial luar biasa oleh Dea Afrizal, implementasi ini meningkatkan stack ke Laravel 11 sambil mempertahankan semua fungsionalitas inti.

✨ Fitur

Manajemen Berita (CRUD)
- Membuat artikel berita dengan konten kaya.
- Membaca berita dengan tata letak yang bersih dan responsif.
- Memperbarui artikel yang sudah ada.
- Menghapus artikel dengan konfirmasi.
Integrasi Stack Modern
- Pengalaman SPA yang mulus dengan Inertia.js.
- Komponen React untuk UI interaktif.
- Laravel Breeze untuk autentikasi.
- Reaktivitas waktu nyata tanpa endpoint API tradisional.
Pengalaman Pengguna
- Desain responsif dengan Tailwind CSS.
- Transisi halaman yang cepat.
- Tanpa muat ulang halaman (perilaku SPA).
- Antarmuka yang bersih dan modern.

🛠️ Tech Stack

Teknologi	Versi	Tujuan
Laravel	11.x	Framework backend
React	19.x	Library frontend
Inertia.js	-	Penghubung antara Laravel & React
Laravel Breeze	-	Perancah (scaffolding) autentikasi
Tailwind CSS	-	Styling utility-first
Vite	-	Alat bantu frontend
MySQL	-	Database

📁 Struktur Proyek

learn-laract-news/
├── app/
│   ├── Http/Controllers/      # Controller Laravel
│   └── Models/                # Model Eloquent
├── database/
│   ├── migrations/            # Migrasi database
│   └── seeders/              # NewsSeeder.php
├── resources/
│   ├── js/
│   │   ├── Pages/            # Komponen halaman React
│   │   ├── Components/       # Komponen React yang dapat digunakan kembali
│   │   └── app.jsx          # Titik masuk React
│   └── css/
│       └── app.css          # Gaya Tailwind
├── routes/
│   └── web.php              # Rute Inertia
└── tailwind.config.js       # Konfigurasi Tailwind

🚀 Memulai

Prasyarat

PHP 8.2 atau lebih tinggi.
Composer.
Node.js & npm.
MySQL.

Langkah Instalasi

Clone Repositori

git clone <repository-url>
cd learn-laract-news

Instal Dependensi PHP
```
composer install
```
Instal Dependensi Node
```
npm install
```

Pengaturan Environment

cp .env.example .env
php artisan key:generate

Konfigurasi Database

Buat database bernama laract-news di MySQL, lalu perbarui .env:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laract-news
DB_USERNAME=root
DB_PASSWORD=password_anda

Jalankan Migrasi
```
php artisan migrate
```
Isi Data Sampel (Seeding)
```
php artisan db:seed --class=NewsSeeder
```
Jalankan Server Pengembangan

Terminal 1 - Frontend:
```
npm run dev
```
Terminal 2 - Backend:
```
php artisan serve
```
Akses Aplikasi

Buka browser: http://localhost:8000

💻 Penggunaan

Melihat Berita

Halaman beranda menampilkan semua artikel berita.
Klik pada artikel untuk membaca konten lengkap.
Tata letak grid yang responsif.

Mengelola Berita (Admin)

Daftar/Login untuk mengakses fitur admin.
Navigasi ke "Create News".
Isi detail artikel:
- Judul
- Konten
- Penulis
- Kategori
- Gambar unggulan
Kirim untuk memublikasikan.

Mengedit Berita

Klik "Edit" pada artikel mana pun (khusus admin).
Ubah konten sesuai kebutuhan.
Simpan perubahan.

Menghapus Berita

Klik tombol "Delete".
Konfirmasi penghapusan.
Artikel dihapus dari database.

🎓 Tujuan Pembelajaran

Proyek ini mengajarkan:

Frontend (React + Inertia)

Komposisi komponen React.
Komponen halaman Inertia.js.
Penanganan formulir dengan Inertia.
Routing sisi klien.
Manajemen state.

Backend (Laravel)

Fitur Laravel 11 terbaru.
Respons Inertia.
Operasi CRUD.
Relasi database.
Unggah file.
Autentikasi dengan Breeze.

Integrasi Full Stack

Mengirim data dari Laravel ke React.
Pengiriman formulir tanpa API tradisional.
Data bersama (shared data) di berbagai komponen.
Pesan flash dan notifikasi.

🔧 Konfigurasi

Setup Inertia

Aplikasi dikonfigurasi menggunakan Inertia.js untuk integrasi yang mulus:

// Contoh Controller
use Inertia\Inertia;

public function index()
{
    return Inertia::render('News/Index', [
        'news' => News::all()
    ]);
}

Contoh Komponen React

// resources/js/Pages/News/Index.jsx
import React from 'react';
import { Head, Link } from '@inertiajs/react';

export default function Index({ news }) {
    return (
        <>
            <Head title="News" />
            <div className="grid grid-cols-3 gap-4">
                {news.map(article => (
                    <div key={article.id} className="p-4 border">
                        <h2>{article.title}</h2>
                        <p>{article.excerpt}</p>
                        <Link href={`/news/${article.id}`}>
                            Baca Selengkapnya
                        </Link>
                    </div>
                ))}
            </div>
        </>
    );
}

📡 API vs Inertia

Berbeda dengan SPA tradisional, proyek ini tidak menggunakan API terpisah:

Tidak perlu endpoint API.
Tidak ada panggilan Axios/Fetch.
Aliran data langsung dari controller ke komponen.
Perlindungan CSRF otomatis.

🎨 Styling

Tailwind CSS sudah dikonfigurasi dan siap pakai:

<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  <h1 className="text-3xl font-bold text-gray-900">
    Portal Berita
  </h1>
</div>

🐛 Pemecahan Masalah

Vite tidak berjalan?

npm run dev

Versi Inertia tidak cocok?

composer update inertiajs/inertia-laravel
npm install @inertiajs/react@latest

CSS tidak terpemuat?

npm run build
php artisan optimize:clear

🙏 Ucapan Terima Kasih

Proyek ini didasarkan pada tutorial oleh Dea Afrizal:

Repo asli: laract9-crud-basic-portal-berita
Saluran YouTube untuk tutorial.

Terima kasih banyak kepada Dea Afrizal atas sumber belajar yang luar biasa! 🙏

Perbedaan dari Versi Asli

Meningkatkan ke Laravel 11 (aslinya menggunakan Laravel 9).
Memperbarui React ke versi 19.
Konfigurasi Vite modern.
Implementasi Breeze terbaru.
Peningkatan setup Tailwind.

📚 Sumber Daya

🤝 Kontribusi

Ini adalah proyek pembelajaran. Jangan ragu untuk melakukan fork dan bereksperimen!

📄 Lisensi

Open source - tersedia untuk tujuan pendidikan.

Selamat Belajar! 📚✨
Dibangun sambil mempelajari Laravel + React dengan Inertia.js

Portal Berita Laract

Bagikan proyek ini:

Tentang Proyek