- Apa Itu Laravel Livewire ?
- Belajar Laravel Livewire : Menginstal Laravel Livewire
- Belajar Laravel Livewire : Menampilkan Data
- Belajar Laravel Livewire : Menampilkan Data Dengan Component
- Belajar Laravel Livewire : Menambahkan Data Tanpa Reload Halaman
- Belajar Laravel Livewire : Membuat Validasi Form Livewire
- Belajar Laravel Livewire : Membuat Pagination Tanpa Reload
- Belajar Laravel Livewire : Membuat Pencarian Realtime
Assalamualaikum Warohmatulloh Wabarokatuh, melanjutkan artikel menampilkan data, sekarang kita akan memisahkan tampilan menjadi komponen yang lebih kecil lagi agar lebih mudah digunakan ulang atau reusable. Pertama mari kita ubah resources/views/livewire/student-index.blade.php menjadi seperti ini untuk menampilkan data menggunakan component student-single.
<div>
@foreach ($students as $student)
<livewire:student-single/>
@endforeach
</div>Berikutnya kita ubah resources/views/livewire/student-single.blade.php menjadi seperti ini ketika menampilkan data dengan blade biasanya.
<div class="media mb-3">
<div class="media-body">
<h5 class="mt-0">{{ $student->name }}</h5>
</div>
</div>Kemudian kita coba akses lagi http://localhost:8000/students dan lihatlah apa yang terjadi, BOOMMM!!!
ERROR!! haha, dikira segampang itu, kita harus mengirimkan variabel ke component student-single dulu untuk menampilkannya. Untuk mengirimkan data ke component Livewire bisa menggunakan tag :variabel="$data" dan :key="$key", jadi kita akan ubah component student-index jadi seperti ini.
<div>
@foreach ($students as $student)
<livewire:student-single :student="$student" :key="$student->id"/>
@endforeach
</div>Untuk Laravel di bawah versi 7, gunakan syntax ini.
@livewire('student-single', ['student' => $student, 'key' => $student->key])Setelah itu kita coba refresh halamannya, kita masih menemui error, tapi kali ini error yang berbeda.
Nah untuk menggunakan variabel ke dalam component student-single kita gunakan method mount() pada file app/Http/Livewire/StudentSingle.php dan kita gunakan property dengan visibilty public dan mengeset nilainya lewat method mount().
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class StudentSingle extends Component
{
public $student;
public function mount($student)
{
$this->student = $student;
}
public function render()
{
return view('livewire.student-single');
}
}
Kita bisa mengirimkan beberapa variabel, tinggal ulangi dan sesuaikan prosesnya, oke, setelah disimpan, coba akses kembali halamannya, dan akhirnya datanya tampil :p.
Masih belum nemu istimewanya ya? malah ribet ya mau nampilin data gitu doang ribet amat, nah di artikel “Menambahkan Data Tanpa Reload Halaman” ini kawan kawan bisa menemukan kerennya Livewire.
Wassalamualaikum Warohmatulloh Wabarokatuh.
Mas itu tidak passing data stundent ta ? Ke tender saya liat codenya, terus passing data student lewat mana ? Ke tender mas, terimakasih
passing data student lewat method mount() di Class mas, dari view gunakan :student=”$student”, terima kasih koreksinya, tadi ada beberapa yang salah tulis mestinya student jadi post dalam file viewnya.
Saya baru ngerti ternyata component dalam component karena saya masih yg laravel v ,5.8 biasanya @(student singgle,$student) lalu d panggil dalam mount, lanjutkan mas ,
Oh iya mas, untuk Laravel 7 yang bisa gunakan tag
Mantap sekali artikelnya!
eits, ada typo penulisan `moumt()` di artikelnya.
Siap terima kasih mas ryan, saya perbarui 😀
mantap mas, sy mau bertanya, berdasarkan dokumentasi livewire method render hanya boleh dipakai satu kali untuk menampilkan satu view pada sebuah component misalnya view index.blade.php.
Pertanyaan saya bagaimana caranya membuat satu component tersebut bisa menampilkan lebih dari satu view ya ? misalnya view add.blade.php / edit.blade.php. Karena pada laravel tradisional hal tersebut bisa dilakukan dengan menggunakan helper view() pada method create() atau edit().
karena component maka dia 1 component konsepnya, bukan seperti controller, kalau kebutuhan seperti itu pakai controller saja .
Assalamualaikum mas, mau nanya apakah laravel liveware ini bisa digunakan untuk membuat apk chat tanpa soket(pusher)?
belum pernah coba. mungkin bisa karena ada yang pernah nulis menggantikan semua aplikasinya yang menggunakan websocket dengan livewire.tapi karena belum pernah explore sejauh itu saya gabisa jamin 😀