لاراول

Livewire Basics

Livewire Basics

Livewire has quickly become one of the most popular package for building Laravel applications. It allows you to create dynamic components within PHP, which often results in allowing you to skip the JavaScript layer entirely.

In this series, we’ll go over the basics of Livewire and why/when you might reach for it. We’ll then build and test several practical Livewire components.

سطح مبتدی 14 جلسه آموزشی 03:02:00 ساعت
01
قسمت 1

How it Works

To get started, let's review the basics of Livewire and build the obligatory counter example. Next, we'll take a brief look at the request/response lifecycle of a Livewire component.

02
قسمت 2

Contact Form With Validation

Let's convert a vanilla contact form to use Livewire. This will give us the opportunity to also review real-time validation. This component should give you a solid understanding of the basics of Livewire, including binding data with wire:model, calling methods on the server, and re-rendering views.

03
قسمت 3

Contact Form Testing

Testing Livewire components is a breeze. Let's have a look at testing our contact form and all of its features.

04
قسمت 4

Search Dropdown

Next up, let's use the iTunes API to build a search dropdown that allows us to search for songs and artists. As part of this example, we'll also review how to test it.

05
قسمت 5

Pagination

Pagination in Livewire is quite similar to pagination within a vanilla Laravel. Let's review everything you need to know in this episode.

06
قسمت 6

Datatables

Let's build a datatables component that allows a person to search, filter, sort and manipulate the query string. This component will demonstrate the power of Livewire, as building a datatables component the traditional way would require a significant amount of JavaScript.

07
قسمت 7

Datatable Testing

Continuing from the previous episode, let's now write a series of tests for our datatable component.

08
قسمت 8

Comments Component

In this lesson, we'll convert the comments functionality from vanilla Laravel to a Livewire component. Components like these are great use-cases for Livewire components, where we don’t want to trigger a full page-refresh after submitting a form.

09
قسمت 9

Comments Component Testing

Let's continue with the comments component we wrote in the previous episode, and learn how to test it.

10
قسمت 10

Livewire Polling

Let's have a look at an example that uses polling in Livewire. Polling can prove useful when your components should continuously refresh to display the latest data.

11
قسمت 11

File Uploads

Moving on, let's explore file uploading in Livewire. Livewire makes use of temporary uploads which allows us to perform real-time validation and image previews. Let's take a look at these with an example using posts with a cover image.

12
قسمت 12

File Uploads Testing

Now, let's learn how to test the file upload component that we wrote in the previous episode.

13
قسمت 13

Events With Tags Example

Let's review Livewire's event system by playing with a third-party tagging library. Livewire allows you to fire and listen for events in the front-end or the back-end, which makes component communication a cinch.

14
قسمت 14

Tags Component Testing

Once again, let's test our tags component, as well as the Livewire events.