Halo teman-teman semuanya, pada kesempatan kali ini kita akan belajar bagaimana cara installasi Livewire di dalam project laravel kita. Livewire merupakan Full-Stack Framework untuk Laravel, dengan Livewire kita bisa membuat website modern tanpa harus menggunakan JavaScript dan kita bisa fokus dengan kode Back-End.
Livewire memungkinkan kita membuat Two-way Data Binding atau rective blade layaknya aplikasi yang dikembangkan menggunakan JavaScript Framework seperti Vue Js dan React Js. Dan enaknya kita tidak perlu susah payah memahami JavaScript. Langsung saja kita mulai.
Langkah 1 - Installasi Livewire
Silahkan masuk ke folder project kemudian jalankan perintah di bawah ini :
composer require livewire/livewire:^1.3.3
Silahkan tunggu proses installasi Livewire sampai selesai, pastikan teman-teman terhubung dengan internet, karena package ini akan diunduh secara online.
Langkah 2 - Membuat Layout Project
Setelah proses installasi Livewire selesai, sekarang kita lanjutkan untuk memanggil Livewire di dalam layout project kita. Silahkan buat sebuah folder baru dengan nama layouts di dalam folder resources/views. Kemudian di dalam folder layouts dilahkan buat file baru dengan nama app.blade.php dan masukkan kode berikut ini :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Laravel Livewire Authentication</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600&display=swap" rel="stylesheet">
@livewireStyles
@livewireScripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script src="{{ mix('js/app.js') }}"></script>
<style>
body {
font-family: 'Quicksand', sans-serif;
background: #e0ebf3
}
</style>
</head>
<body>
@yield('content')
<script>
@if(session()->has('success'))
toastr.success('{{ session('success') }}')
@elseif(session()->has('error'))
toastr.error('{{ session('error') }}')
@endif
</script>
</body>
</html>
Di atas kita menambahkan beberapa plugin untuk kebutuhan project kita nanti, diantaranya adalah :
-
Bootstrap - digunakan untuk membuat tampilan responsive dan cepat.
-
Font Awesome - digunakan untuk membuat icon pada project.
-
Toastr - digunakan untuk membuat alert dengan elegan.
Di atas untuk installasi Livewire di dalam project, teman-teman bisa perhatikan pada sintaks :
@livewireStyles
@livewireScripts
Kemudian untuk kode berikut ini. digunakan untuk menampilkan content dari project kita.
@yield('content')
Dan untuk alert nanti kita menggunakan Toastr dengan kode seperti berikut ini :
@if(session()->has('success'))
toastr.success('{{ session('success') }}')
@elseif(session()->has('error'))
toastr.error('{{ session('error') }}')
@endif
EBOOK MEMBANGUN TOKO ONLINE DENGAN LARAVEL DAN LIVEWIRE : https://bit.ly/ebook-laravel-livewire