Site icon agussuratna.net

Tutorial Membuat Aplikasi CRUD dengan Laravel dan Reactjs

Tutorial ini difokuskan sebagai contoh membuat aplikasi CRUD dengan Laravel dan Reactjs. Kita dapat memahami konsep contoh CRUD Reactjs  dengan API Laravel dengan Vite.

Kita dapat menggunakan contoh ini dengan Laravel versi 6, 7, 8, 9, 10 dan 11. Dalam tutorial ini, kita akan menggunakan Laravel versi 11, Laravel Breeze, Inertia.js, Vite dan Tailwind CSS untuk membuat CRUD Reactjs dengan Laravel. Kita akan membuat tabel tbl_post” dengan kolom judul dan deskripsi. Kemudian kita akan membuat insert, update dan delete menggunakan Reactjs dengan API Laravel.

Berikut langkah-langkah untuk melakukan CRUD Reactjs dengan Laravel Vite :

Langkah 1: Install Laravel

Jika sudah menginstall Laravel bisa menggunakan Laravel yang sudah terinstall. Jika belum menginstall Laravel, maka kita install dulu Laravel-nya.
Buka CMD/Terminal dan gunakan perintah di bawah ini :

composer create-project laravel/laravel react-laravel-app

Sintak di atas akan menginstall Laravel versi terbaru, pada saat tutorial ini dibuat menggunakan Laravel 11. Jika menginginkan Laravel versi sebelumnya dunakan perintah :

composer create-project laravel/laravel:^10.0 react-laravel-app

Perhatikan sintak di atas, terdapat ^10.0 yang menunjukan versi Laravel yang akan diinstall.

Tunggu beberapa saat hingga prosess instalasi selesai. Perhatikan sintak di atas, react-laravel-app merupakan nama project/folder yang kita buat.

Langkah 2: Membuat Auth dengan Breeze

Laravel Breeze adalah paket yang menyediakan implementasi otentikasi sederhana untuk Laravel, termasuk register, login, reset password, dan fungsi terkait otentikasi lainnya. Paket ini biasanya digunakan selama pengembangan untuk mengatur otentikasi dengan cepat.

Sebelum mengginstal Breeze, jika belum berada di dalam path project kita pindahkan dulu path kerja ke path/folder project yang sudah kita install dengan perintah :

cd react-laravel-app

Pada langkah selanjutnya kita perlu menggunakan perintah composer untuk menginstal breeze, silahkan jalankan perintah di bawah ini untuk menginstall library Breeze.

composer require laravel/breeze --dev

Perintah tersebut akan menginstal paket Breeze dalam Laravel yang sudah kita install, dan akan menambahkan 1 baris secara otomatis di bagian “require-dev” di file composer.json.

"laravel/breeze": "^2.2",

^2.2 merupakan versi Breeze yang diinstal, jika sudah muncul versi baru pada saat install kemungkinan angkanya akan berbeda.

Sekarang, kita perlu membuat autentikasi menggunakan perintah di bawah ini. Kita dapat membuat login dasar, registrasi, dan verifikasi email menggunakan react js, dengan perintah di bawah ini :

php artisan breeze:install react

Jika perintah di atas berhasil diinstall, maka akan terbentuk folder baru dengan nama node_modules di dalam folder project react-laravel-app.

Sekarang, mari kita paket node.js dengan sintak :

npm install

Jika berhasil akan seperti berikut ini :

Sekarang kita jalankan vite, dengan menjalankan perintah ini :

npm run dev

Langkah 3: Install Inertia

Inertia.js adalah sebuah framework yang membantu membangun aplikasi web yang modern dengan menggabungkan frontend framework seperti Vue.js, React, atau Svelte dengan backend framework seperti Laravel, Rails, atau Django tanpa perlu membuat API yang terpisah. Dengan kata lain, Inertia.js memungkinkan pengembang untuk membuat aplikasi Single Page Application (SPA) menggunakan framework server-side tradisional.

Berikut adalah konsep inti dari Inertia.js:

  1. Bukan API, tapi SPA-like routing : Inertia.js memungkinkan pengembang membuat aplikasi yang terasa seperti SPA tanpa harus membangun API JSON atau menggunakan client-side routing yang kompleks. Ini menjaga arsitektur aplikasi tetap sederhana, seperti halnya aplikasi server-side tradisional.
  2. Server-side rendering dengan respons JSON : Alih-alih merender seluruh halaman di server, Inertia.js mengirimkan respons dalam bentuk JSON yang berisi halaman (komponen) yang akan dirender oleh framework frontend di sisi klien. Ini memungkinkan interaksi cepat seperti pada SPA, tetapi tanpa kehilangan kemampuan untuk memanfaatkan framework server-side.
  3. Transisi halaman tanpa refresh : Inertia.js menyediakan transisi halaman yang mulus, dengan cara mengganti konten halaman tanpa perlu melakukan refresh penuh (full page reload). Ini memberikan pengalaman pengguna yang lebih lancar dan responsif.
  4. Integrasi dengan framework populer : Inertia.js biasanya digunakan bersama Laravel di sisi backend dan Vue.js, React, atau Svelte di sisi frontend. Ini menjadikannya tool yang fleksibel dan populer di kalangan pengembang yang ingin menggunakan keduanya dalam satu aplikasi.

Intinya, Inertia.js bertindak sebagai jembatan antara backend dan frontend, memungkinkan pengembang membangun aplikasi yang lebih dinamis tanpa harus mengubah pola kerja yang biasa mereka gunakan pada framework server-side.

Untuk install Inertia.js gunakan perintah berikut ini :

npm install @inertiajs/inertia-react

Hasilnya :

Langkah 4: Membuat Migrasi dan Model

Sebelum membuat migrasi dan model kita konfigurasi dulu koneksi database pada file .env, cari baris sintak berikut ini :

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=

Ubah menjadi :

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=react-laravel-app
DB_USERNAME=root
DB_PASSWORD=

react-laravel-app merupakan nama database yang akan kita buat, jika tidak berkenan dengan nama tersebut silahkan bisa menggantinya.

Selanjutnya kita perlu membuat migrasi database untuk membuat tabel tbl_berita dan juga kita akan membuat model untuk menanngani data dari tabel tbl_berita.

php artisan make:model Berita -m

Perintah di atas akan menghasilkan file model dengan nama Berita.php di dalam folder app/Models dan perintah -m akan membuat file migration dengan nama 2024_12_01_125811_create_beritas_table.php di dalam folder database/migrations, nama file migration kemungkinan besar akan berbeda, hal tersebut tergantung tahun, bulan, tanggal dan nomor unik.

Selanjutnya kita buka file migration 2024_12_01_125811_create_beritas_table.php di dalam folder database/migrations tersebut dan ubah sintaknya pada method public function up(): void seperti berikut ini :

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::create('tbl_berita', function (Blueprint $table) {
            $table->id();
            $table->string('judul');
            $table->text('deskripsi');
            $table->string('kategori');
            $table->string('penulis');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::dropIfExists('tbl_post');
    }
};

Perhatikan sintak di atas,sintak di atas kan membuat table pada database dengan nama table tbl_berita, dengan field terdiri dari id, judul, deskripsi, kategori, penulis, create_at dan update_at.

Selanjutnya kita eksekusi migration tersebut dengan perintah :

php artisan migrate

Maka akan menghasilkan table seperti berikut ini :

Sekarang kita buka model Berita.php dan ubah sintaknya menjadi seperti berikut ini :

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Berita extends Model
{
    use HasFactory;

    protected $table = "tbl_berita";
    protected $fillable = [
                            'judul', 
                            'deskripsi',
                            'kategori',
                            'penulis'
                        ];
}

Perhatikan sintak di atas :

protected $table = "tbl_berita";

Akan mendeklarasikan bahwa table yang ditangani oleh model Berita.php bernama tbl_berita, karena pada dasarnya model Berita.php akan menangani table secara default bernama Beritas, jadi kita perlu mendklarasikan nama table yang kita buat bernama tbl_berita.

protected $fillable = [ 
                        'judul', 
                        'deskripsi',
                        'kategori',
                        'penulis' 
                    ];

Sintak di atas akan mendklarasikan field apa saja yang bisa di isi pada table tbl_berita, yaitu judul, deskripsi, kategori dan penulis.

 

Langkah 5: Isi data tbl_post dengan Seeder dan Faker

Untuk memudahkan isi data ke dalam table tbl_post kita gunakan seeder dan faker. Data tersebut bukanlah data sebenarnya melainkan data dummy untuk uji coba saja.

Buat seeder dengan perintah :

php artisan make:seeder BeritaSeeder

Jika berhasil maka akan otomatis terbuat file baru dengan nama BeritaSeeder.php di dalam folder database/seeders.

Buka file BeritaSeeder.php dan isi method public function run(): void sehingga sintaknya menjadi :

<?php

namespace Database\Seeders; 
use Illuminate\Database\Seeder; 
use Illuminate\Support\Facades\DB;

class BeritaSeeder extends Seeder
{
    /**
     * Run the database seeds.
     */
    public function run(): void
    {
        for($i=0;$i<20;$i++){
            DB::table('tbl_berita')->insert([
                'judul' => fake()->title(),
                'deskripsi' => fake()->paragraph(2,true),
                'kategori' => fake()->sentence(),
                'penulis' => fake()->email(),
            ]);
        }
    }
}

Jalankan seeder di CMD/Terminal dengan perintah :

php artisan db:seed --class=BeritaSeeder

Jika berhasil, maka di dalam table tbl_berita akan terisi data sebanyak 20 data.

 

 

Langkah 6 : Membuat Controller

Pada langkah ini, kita akan membuat file BeritaController, pada Visual Studio Code silahkan buat file BeritaController.php dengan cara tekan Ctrl+Shift+P, sehingga akan muncul :

Pilih Artisan: Make Controller, kemudian ketikan nama controller yang akan kita buat, misal BeritaController, kemudian tekan Enter.

 

Setelah itu pilih Resource, kemudian tekan Enter

Setelah itu pilih Yes, jika sudah dibuat Modelnya atau mau membuat Model sekalian, kemudian tekan Enter

Setelah itu pilih ketikan nama model yang sudah dibuat atau yang akan dibuat, misal ketikan Berita karena sebelumnya kita sudah membuat model dengan nama Berita.php dan akan mengunakan model tersebut, kemudian tekan Enter.

 

Jika berhasil maka akan terbentuk file BeritatController.php di dalam folder app/Http/Controllers.

Selajutnya silahkan buka file BeritaController.php dan di dalam method index() tambahkan sintak seperti berikut :

$ambildataberita = Berita::all(); 
        
        return Inertia::render('Homepage', [
            'namatitle' => 'Web Portal Berita',
            'databerita' => $ambildataberita
        ]);

Perhatikan sintak di atas! Pertama kita mengambil semua data dari table tbl_post melalui model yang bernama Berita (Berita::all();), kemudian disimpan ke dalam variable $ambildataberita.

Selanjutnya akan mengirimkan data yang ada pada $ambildataberita melalui variable databerita dan akan mengirimkan juga string Web Portal Berita melalui variable namatitle ke frontend yang bernama Homepage.jsx yang ada dalam folder resources/js/Pages.

 

Langkah 7 : Membuat Route

Pada langkah ini kita akan membuat rute untuk aplikasi CRUD Reactjs, silahkan buka file web.php di dalam folder routes, dan tambahkan route baru :

Route::resource('/', BeritaController::class);

Sehingga sintaknya menjadi seperti berikut ;

<?php

use App\Http\Controllers\ProfileController;
use Illuminate\Foundation\Application;
use Illuminate\Support\Facades\Route;
use Inertia\Inertia;

use App\Http\Controllers\BeritaController;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::resource('/', BeritaController::class);


Route::get('/dashboard', function () {
    return Inertia::render('Dashboard');
})->middleware(['auth', 'verified'])->name('dashboard');

Route::middleware('auth')->group(function () {
    Route::get('/profile', [ProfileController::class, 'edit'])->name('profile.edit');
    Route::patch('/profile', [ProfileController::class, 'update'])->name('profile.update');
    Route::delete('/profile', [ProfileController::class, 'destroy'])->name('profile.destroy');
});

require __DIR__.'/auth.php';

 

 

Langkah 8: Membuat Halaman React untuk menampilkan Data

Selanjutnya kita buat halaman Homepage,jsx di dalam folder resources/js/Pages, dengan sintak :

import React from 'react';
import { Head } from '@inertiajs/react';

export default function Homepage(props){

    console.log(props);
    return(
        <div className='flex justify-center items-center min-h-screen bg-slate-50'>
            <Head title={props.namatitle}/>
            
            <div>
                {props.databerita ? props.databerita.map((data,i)=>{
                    return(
                        <div key={i} className='p-4 m-2 bg-white text-black shadow-md rounded-md'>
                            <p className='text-2xl'>{data.judul}</p>
                            <p>{data.deskripsi}</p>
                            <p className='text-sm'>{data.kategori}</p>
                            <p className='text-sm'>{data.penulis}</p>
                        </div>
                    )
                }):<p>Saat ini belum ada data</p>}
            </div>
        </div>
    )
}

Perhatikan sintak di atas :

<Head title={props.namatitle}/>

Sintak tersebut akan membuat title web pada browser menjadi Web Portal Berita – Laravel, yang dikirim dari BeritaController melalui variable bernama namatitle.

{props.databerita ? props.databerita.map((data,i)=>{
    return(
        <div key={i} className='p-4 m-2 bg-white text-black shadow-md rounded-md'>
            <p className='text-2xl'>{data.judul}</p>
            <p>{data.deskripsi}</p>
            <p className='text-sm'>{data.kategori}</p>
            <p className='text-sm'>{data.penulis}</p>
        </div>
    )
}):<p>Saat ini belum ada data</p>}

Sintak di atas merupakan operator ternary, dimana jika props.databerita ada datanya maka akan menampilkan data tersebut dihalaman Homepage.jsx dengan cara looping :

props.databerita.map((data,i)=>{
return(
    <div key={i} className='p-4 m-2 bg-white text-black shadow-md rounded-md'>
        <p className='text-2xl'>{data.judul}</p>
        <p>{data.deskripsi}</p>
        <p className='text-sm'>{data.kategori}</p>
        <p className='text-sm'>{data.penulis}</p>
    </div>
)

Tetapi jika props.databerita tidak ada datanya, maka akan menampilkan :

Saat ini belum ada data

 

Untuk mengeceknya kita jalankan dulu laravelnya dengan perintah :

php artisan serve

Build reactjs nya dengan perintah :

npm run build

dan jalanjan reactjsnya :

npm run dev

Kemudian akses melalui browser dengan alamat http://localhost:8000, jika berhasil maka akan tampil seperti berikut :

 

Langkah 9: Mempercantik tampilan

Untuk mempercantik tampilan kita akan menggunakan Daisy UI. Daisy UI adalah library komponen gratis dan open-source untuk Tailwind CSS. Daisy UI berfungsi sebagai plugin untuk Tailwind CSS, yaitu framework CSS yang sangat dapat dikustomisasi.

Daisy UI menyediakan:

Tailwind CSS adalah framework Cascading Style Sheet yang digunakan untuk mendesain user interface pada sebuah web. Tailwind CSS berbasis utility yang hanya terdiri dari utility class.

Langkah pertama penggunaan Daisy UI yaitu install dulu melalui CMD/Terminal dengan sintak :

npm i daisyui

Kemudian Tambahkan require di tailwind.config.js dengan sintak :

plugins: [require('@tailwindcss/forms'), require('daisyui')],

sehingga tailwind.config.js menjadi :

import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './resources/js/**/*.jsx',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    plugins: [require('@tailwindcss/forms'), require('daisyui')],
};

Selanjutnya untuk menggunakan Daisy UI silahkan buka web resminya dengan alamat https://daisyui.com/, pertama kita akan membuat Navigasi menu, maka kita cari Navbar pada kolom search.

Kemudian pilih tampilan Navbar yang kita inginkan. Pada contoh ini memilih Navbar with search input and dropdown. Kita buka tab JSX dan copy sintaknya.

Selanjutnya kita buat folder baru file baru di dalam folder resources/Pages/ dengan nama folder Halamanberita. Di dalam folder Halamanberita kita buat file baru dengan nama Navbar,jsx dengan sintak :

const Navbar = () => {
    return (

    )
}

export default Navbar

Kemudian di dalam return ( ) isi dengan sintak yang sudah kita copy tadi, sehingga file Navbar.jsx menjadi seperti berikut :

const Navbar = () => {
    return (
        <div className="navbar bg-base-100">
            <div className="flex-1">
                <a className="btn btn-ghost text-xl">Portal Berita</a>
            </div>
            <div className="flex-none gap-2">
                <div className="form-control">
                    <input
                        type="text"
                        placeholder="Search"
                        className="input input-bordered w-24 md:w-auto"
                    />
                </div>
                <div className="dropdown dropdown-end">
                    <div
                        tabIndex={0}
                        role="button"
                        className="btn btn-ghost btn-circle avatar"
                    >
                        <div className="w-10 rounded-full">
                            <img
                                alt="Tailwind CSS Navbar component"
                                src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp"
                            />
                        </div>
                    </div>
                    <ul
                        tabIndex={0}
                        className="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow"
                    >
                        <li>
                            <a className="justify-between">
                                Profile
                                <span className="badge">New</span>
                            </a>
                        </li>
                        <li>
                            <a>Settings</a>
                        </li>
                        <li>
                            <a>Logout</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    )
}

export default Navbar

Selanjutnya kita buat file baru di dalam folder Halamanberita dengan nama file Listdata.jsx, kita buat sintak :

const Navbar = () => { 
    return ( 

    ) 
} 
export default Navbar

di dalam return kita buat sintak dari Daisy UI, kita cari Card di Data display, pada contoh ini kita pilih Card with badge, kita buka tab JSX dan copy sintaknya.

Selanjutnya kita buka Listdata.jsx dan pate sintak daisy ui di dalam return ( ), sehingga sintaknya menjadi :

const Listdata = (props) => { 

    return (
        <div className="card bg-base-100 w-96 shadow-xl">
            <figure>
                <img
                src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp"
                alt="Shoes" />
            </figure>
            <div className="card-body">
                <h2 className="card-title">
                Shoes!
                <div className="badge badge-secondary">NEW</div>
                </h2>
                <p>If a dog chews shoes whose shoes does he choose?</p>
                <div className="card-actions justify-end">
                <div className="badge badge-outline">Fashion</div>
                <div className="badge badge-outline">Products</div>
                </div>
            </div>
        </div> 
    )
}

export default Listdata;

 

Kemudian kita ubah sintak Listdata.jsx tersebut untuk menampilkan data dari table tbl_berita menjadi seperti berikut :

const Listdata = (props) => {
    console.log('data props', props); // For debugging, can be removed later

    return (
        <div className="flex flex-wrap gap-4 justify-center">
            {props.databerita && props.databerita.length > 0 ? (
                props.databerita.map((data, i) => (
                    <div key={i} className="card bg-base-100 w-96 shadow-xl">
                        <figure>
                            <img
                                src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp"
                                alt="Example"
                            />
                        </figure>
                        <div className="card-body">
                            <h2 className="card-title">
                                {data.judul}
                                <div className="badge badge-secondary">NEW</div>
                            </h2>
                            <p>{data.deskripsi}</p>
                            <div className="card-actions justify-end">
                                <div className="badge badge-inline">{data.kategori}</div>
                                <div className="badge badge-outline">{data.penulis}</div>
                            </div>
                        </div>
                    </div>
                ))
            ) : 
                <p>Saat ini belum ada data</p>
            }
        </div>
    );
};

export default Listdata;

 

Selanjutnya buka kembali halaman Homepage.jsx dan panggil Navbar.jsx dan Listdata.jsx, sehingga sintak Homepage.jsx menjadi seperti berikut :

import React from 'react';
import { Head } from '@inertiajs/react';
import Navbar from './Halamanberita/Navbar';
import Listdata from './Halamanberita/Listdata';

export default function Homepage(props){

    console.log(props);
    return(
        <div className='min-h-screen bg-slate-50'>
            <Head title={props.namatitle}/>
    
            <Navbar/>
            <div className=' lg:flex-row lg:flex-wrap lg:items-stretch gap-4 p-4'>
                <Listdata  databerita={props.databerita} />
            </div>
        </div>
    )
}

Sehingga hasilnya seperti berikut :

 

Sampai di sini kita sudah berhasil menampilkan data dari database dengan Laravel dan Reactjs, tetapi akan jadi masalah jika data nya banyak, maka kita harus scrol data sampai ke bawah. Untuk mengatasinya kita buatkan tampilan data perhalaman (pagination).

Untuk membuat pagination langkah yang harus kita buat yaitu kita ubah method index() yang ada dalam BeritaController.php dan pada method index() isi dengan :

public function index()
{
    $ambildataberita= Berita::paginate(10); 
    return Inertia::render('Homepage', [
        'namatitle' => 'Web Portal Berita',
        'databerita' => $ambildataberita,
    ]);
}

Kita hanya mengubah $ambildataberita= Berita::all(); menjadi $ambildataberita= Berita::paginate(10);, yang artinya kita akan menampilkan data perhalaman sebanyal 10 data, kita bisa ubah parameter 10 menjadi berapapun data perhalaman yang kita inginkan.

Selanjutnya file Listdata.jsx kita ubah menjadi :

const Listdata = (props) => {
    console.log('data props', props); // For debugging, can be removed later

    return (
        <div className="flex flex-col items-center">

            <div className="flex flex-wrap gap-4 justify-center">
                {
                    props.databerita.data && props.databerita.data.length > 0 
                    ? 
                        (
                            props.databerita.data.map((data, i) => (
                                <div key={i} className="card bg-base-100 w-96 shadow-xl">
                                    <figure>
                                        <img
                                            src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp"
                                            alt="Example"
                                        />
                                    </figure>
                                    <div className="card-body">
                                        <h2 className="card-title">
                                            {data.judul}
                                            <div className="badge badge-secondary">NEW</div>
                                        </h2>
                                        <p>{data.deskripsi}</p>
                                        <div className="card-actions justify-end">
                                            <div className="badge badge-inline">{data.kategori}</div>
                                            <div className="badge badge-outline">{data.penulis}</div>
                                        </div>
                                    </div>
                                </div>
                            ))
                        )    
                    : 
                        (
                            <p>Saat ini belum ada data</p>
                        )
                }

            </div>

            {/* Pagination */}
            <div className="mt-6">
                {props.databerita.links.map((link, i) => (
                    <button
                        key={i}
                        onClick={() => {
                            if (link.url) {
                                window.location.href = link.url;
                            }
                        }}
                        className={`btn ${link.active ? 'btn-primary' : 'btn-outline'} mx-1`}
                        dangerouslySetInnerHTML={{ __html: link.label }}
                    ></button>
                ))}
            </div>

        </div>
    );
};

export default Listdata;

Perhatikan sintak di atas, kita menambahkan sintak untuk membuat tombol-tombol untuk navigasi halaman :

{/* Pagination */}
<div className="mt-6">
    {props.databerita.links.map((link, i) => (
        <button
            key={i}
            onClick={() => {
                if (link.url) {
                    window.location.href = link.url;
                }
            }}
            className={`btn ${link.active ? 'btn-primary' : 'btn-outline'} mx-1`}
            dangerouslySetInnerHTML={{ __html: link.label }}
        ></button>
    ))}
</div>

 

 

Langkah 10: Membuat Halaman Login dan Register

Ketika kita menginstall Breeze, halaman Login dan Register secara otomatis sudah terbentuk. Untuk mengakses halaman Login kita ketikan alamat http://localhost:8000/login dan halaman Register dengan alamat http://localhost:8000/register.

Untuk memudahkan pengguna pada saat mengakses kedua alamat tersebut, kita buatkan link pada halaman depan. Sekarang kita buka file Navbar.jsx yang sudah kita buat di dalam folder resources/js/Pages/Halamanberita, sintak Navbar.jsx sebelumnya sepeti berikut ini :

const Navbar = () => {
    return (
        <div className="navbar bg-base-100">
            <div className="flex-1">
                <a className="btn btn-ghost text-xl">Portal Berita</a>
            </div>
            <div className="flex-none gap-2">
                <div className="form-control">
                    <input
                        type="text"
                        placeholder="Search"
                        className="input input-bordered w-24 md:w-auto"
                    />
                </div>
                <div className="dropdown dropdown-end">
                    <div
                        tabIndex={0}
                        role="button"
                        className="btn btn-ghost btn-circle avatar"
                    >
                        <div className="w-10 rounded-full">
                            <img
                                alt="Tailwind CSS Navbar component"
                                src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp"
                            />
                        </div>
                    </div>
                    <ul
                        tabIndex={0}
                        className="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow"
                    >
                        <li>
                            <a className="justify-between">
                                Profile
                                <span className="badge">New</span>
                            </a>
                        </li>
                        <li>
                            <a>Settings</a>
                        </li>
                        <li>
                            <a>Logout</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    )
}

export default Navbar

Perhatikan sintak di atas! Pada baris 23-43 kita akan mengubahnya untuk membuat link Login dan Register serta validasinya.

Sebelum mengubah file Navbar.jsx, kita buuka dulu file Homepage.jsx yang ada dalam folder resources/js/Pages/, kita ubah sintaknya menjadi seperti berikut :

import React from 'react';
import { Head } from '@inertiajs/react';
import Navbar from './Halamanberita/Navbar';
import Listdata from './Halamanberita/Listdata';

export default function Homepage(props){

    console.log(props);
    return(
        <div className='min-h-screen bg-slate-50'>
            <Head title={props.namatitle}/>
    
            <Navbar pengguna={props.auth.user}/>
            
            <div className=' lg:flex-row lg:flex-wrap lg:items-stretch gap-4 p-4'>
                <Listdata  databerita={props.databerita} />
            </div>
        </div>
    )
}

Perhatikan sintak di atas, pada bagian :

<Navbar pengguna={props.auth.user}/>

Itu artinya file Homepage.jsx memanggil file Navbar.jsx (jangan lupa import Navbar from ‘./Halamanberita/Navbar’; disertakan juga) dengan mengirimkan data user ({props.auth.user}) melalui variable pengguna.

Sekarang kita ubah sintak Navbar.jsx menjadi seperti berikut :

import { Link } from "@inertiajs/react"

const Navbar = ({pengguna}) => {
    // console.log('Data pengguna',pengguna)

    return (
        <div className="navbar bg-base-100">
            <div className="flex-1">
                <a className="btn btn-ghost text-xl">Portal Berita</a>
            </div>
            <div className="flex-none gap-2">
                <div className="form-control">
                    <input
                        type="text"
                        placeholder="Search"
                        className="input input-bordered w-24 md:w-auto"
                    />
                </div>
                <div className="dropdown dropdown-end">
                    <div
                        tabIndex={0}
                        role="button"
                        className="btn btn-ghost btn-circle avatar"
                    >
                        <div className="w-10 rounded-full">
                            <img
                                alt="Tailwind CSS Navbar component"
                                src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp"
                            />
                        </div>
                    </div>
                    <ul
                        tabIndex={0}
                        className="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow"
                    >
                        {
                            !pengguna 
                            ?
                            <>
                                <li><Link href={route('login')} as="button">Login</Link></li>
                                <li><Link href={route('register')} as="button">Register</Link></li>
                            </> 
                            : 
                            <>
                                <li>
                                    <Link href={route('dashboard')} as="button" className="justify-between">
                                        Dashboard
                                        <span className="badge">New</span>
                                    </Link>
                                </li>
                                <li><Link>Settings</Link></li>
                                <li><Link href={route('logout')} method="post" as="button">Logout</Link></li>
                            </>
                        }
                    </ul>
                </div>
            </div>
        </div>
    )
}

export default Navbar

Perhatikan sintak di atas, pada bagian :

const Navbar = ({pengguna}) => {

Di situ terdapat variable pengguna, yang berfungsi manangkap data dari Homepagae.jsx pada saat pemanggilan Navbar.jsx (<Navbar pengguna={props.auth.user}/>).

Selanjutnya pada sintak :

{
    !pengguna 
    ?
    <>
        <li><Link href={route('login')} as="button">Login</Link></li>
        <li><Link href={route('register')} as="button">Register</Link></li>
    </> 
    : 
    <>
        <li>
            <Link href={route('dashboard')} as="button" className="justify-between">
                Dashboard
                <span className="badge">New</span>
            </Link>
        </li>
        <li><Link>Settings</Link></li>
        <li><Link href={route('logout')} method="post" as="button">Logout</Link></li>
    </>
}

Yang artinya, jika tidak ada user yang login (!pengguna), maka tampilkan Login dan Register. Tetapi jika ada user yang login, tampilkan Dashboard, Setting dan Logout.

Maka hasilnya seperti berikut ini :

 

Selanjutnya kita coba register, pada percobaan ini kita masukan :

 

Setelah register berhasil, kita coba login dengan Email dan Password yang sudah ddaftarkan pada register tadi. Setelah berhasil login maka halaman akan langsung di arahkan ke halaman Dashboard.

 

 

Langkah 11: Membuat Halaman Tambah Data

Setelah berhasil login maka, halaman akan diarahkan ke halaman Dasboard. Sekarang kita modifikasi halaman Dashboard menjadi form untuk tambah data.

Untuk sintak formnya kita ambil dari Daisy UI, kita cari Text input dan pilih Text input with border. Selanjutnya klik tab JSX dan copykan sintaknya ke Dashboard.jsx. KIta buat formnya sesuai dengan field apa saja yang akan kita insert datanya, sehingga Dashboard.jsx menjadi seperti berikut :

import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import { Head } from '@inertiajs/react';

export default function Dashboard({ auth }) {

    // console.log('Auth User:', auth.user);

    return (
        <AuthenticatedLayout
            user={auth.user}
            header={<h2 className="font-semibold text-xl text-gray-800 leading-tight">Portal Berita</h2>}
        >
            <div className="py-12">
                <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
                    <div className="p-6 bg-white overflow-hidden shadow-sm sm:rounded-lg">
                        <input type="text" placeholder="Judul" className="m-2 input input-bordered w-full" />
                        <input type="text" placeholder="Deskripsi" className="m-2 input input-bordered w-full" />
                        <input type="text" placeholder="Kategori" className="m-2 input input-bordered w-full" />
                        <button className='m-2 btn btn-primary'>Tambah Berita</button>
                    </div>
                </div>
            </div>
        </AuthenticatedLayout>

    );
}

dan hasilnya seperti berikut :

 

Untuk proses penambahan datanya kita buatkan route baru di web.php dengan sintak :

Route::post('/news',[BeritaController::class,'store'])->middleware(['auth', 'verified'])->name('createnews');

 

Selanjutnya pada method store() di BeritaController.php buat sintak seperti berikut :

public function store(Request $request)
{
    $news = new Berita();

    $news->title        = $request->title;
    $news->description  = $request->description;
    $news->category     = $request->category;
    $news->author       = auth()->user()->email;
    $news->save();
    return redirect()->back()->with('message','Berita berhasil dibuat');
}

Selanjutnya kita coba input data, maka hasilnya seperti berikut :

 

Kita lihat pada databasenya datanya sudah berhasil diinput, tetapi pada tampilannya tidak ada notifikasi apapun, apakah sudah berhasil diinput atau belum. Maka kita ubah sintak Dashboard.jsx menjadi seperti berikut :

 

 

 

 

 

 

 

Jika ada pertanyaan silahkan tuliskan di kolom komentar, terima kasih dan semoga bermanfaat. Anda dapat mengunduh contoh lengkap dari Github: Unduh

Referensi :

Exit mobile version