01. Pendahuluan

Selamat datang di Laravel Bootcamp! Dalam panduan ini, kita akan mempelajari cara membangun aplikasi Laravel modern dari awal. Untuk mengeksplorasi framework ini, kita akan membangun platform microblogging bernama Chirper.

#Pilih petualanganmu sendiri:
Blade, Livewire, atau JavaScript

Laravel sangat fleksibel, memungkinkan Anda untuk membangun front-end dengan berbagai macam teknologi sesuai kebutuhan. Untuk tutorial ini, kami telah menyiapkan beberapa pilihan untuk Anda.

#Blade

Blade adalah engine templating sederhana nan powerful yang sudah terdapat di dalam Laravel. HTML Anda akan di-render di sisi server (server-side), sehingga sangat mudah untuk menyertakan konten dinamis dari database. Kita juga akan menggunakan Tailwind CSS agar tampilannya terlihat menarik!

Jika Anda tidak yakin harus mulai dari mana, menurut kami Blade adalah pilihan yang paling mudah dipahami. Anda selalu bisa kembali lagi dan membangun ulang Chirper menggunakan Livewire atau JavaScript.

Salam {{ $teman }}, Mari kita bangun Chirper dengan Blade!

#Livewire

Livewire adalah cara ampuh untuk membangun UI front-end yang dinamis dan reaktif hanya dengan menggunakan PHP. Terus terang, Anda tidak akan percaya bahwa ini bukan JavaScript. Jika Anda adalah pengembang Laravel, Anda akan merasa "seperti di rumah".

<?php
 
use Livewire\Volt\Component;
 
new class extends Component
{
    public int $jumlah = 0;
 
    public function tambah(): void
    {
        $this->jumlah++;
    }
}; ?>
 
<div>
    <h1>{{ $jumlah }}</h1>
    <button wire:click="tambah">+</button>
</div>

<?php
 
use function Livewire\Volt\{state};
 
state(['jumlah' => 0]);
 
$tambah = fn () => $this->jumlah++;
 
?>
 
<div>
    <h1>{{ $jumlah }}</h1>
    <button wire:click="tambah">+</button>
</div>

#JavaScript & Inertia

Jika Anda ingin menggunakan JavaScript, kami akan menyediakan contoh kode untuk Vue dan React. Kami juga akan menggunakan Inertia untuk menghubungkan semuanya dan Tailwind CSS agar tampilannya memukau!

Jika Anda tidak yakin mana yang harus dipilih, kami sangat menyukai Vue karena ramah bagi pemula dan sangat andal. Setelah Anda menyelesaikan Bootcamp ini, Anda selalu dapat mengulangi lagi dengan stack yang lain.

Silakan pilih stack Anda:

<template>
<Welcome>
    Hai {{ teman }}, Mari membangun Chirper with Vue!
</Welcome>
</template>

<Welcome>
    Senang berjumpa denganmu {friend}, mari membangun Chirper dengan React!
</Welcome>

Anda dapat melihat kode untuk framework lainnya kapan saja untuk mengetahui bagaimana rasanya menggunakan framework tersebut, pastikan saja untuk tidak mencampur kode dalam proyek Anda.