Dynamic Interfaces using Livewire and Laravel for Registration and Login Forms

Image for post
Image for post
Image from https://laravel-livewire.com

Are you’re a Laravel developer? If so, what comes in your mind if I said about the “Laravel Front-end”? The blade files? Static interfaces? or something else? Yeah, Laravel is an excellent tool for building full-stack development, but the front-end itself is a static one. As you might know, the Laravel front-end is being rendered by the server and cannot be changed on the client-side, so that the pages/interfaces are static if we are using the pure Laravel front-end/blade files.

Here it comes! The good news is, we can use various JS frameworks/libraries inside the blade files. So, as a full-stack developer, we can create better and dynamic interfaces because today, people/your users will choose the dynamic one. You can use vanilla JS, JQuery, or the most popular one, such as Vue.JS or React. But of course, learning a front-end framework (mostly using Javascript) like Vue.JS requires a learning curve. Take an example of VueJS. It’s a very excellent front-end framework! (I’ve created some articles about Laravel & Vue if you’re curious). But it would be best if you had a deep understanding of using it in a real-life project. As I said before, it requires you to learn how VueJS, the API that Vue has, or maybe you need to learn the Javascript itself. So the next question, is there a tool where we can build dynamic interfaces/pages without coding any Javascript thing? Maybe we can just use the PHP/Laravel syntax?

The answer is yes! You can use Livewire! You can read the full documentation/explanation here, but for the recap, with Livewire, you can create the dynamic interfaces without code any Javascript codes. The syntax that Livewire use is very (very) similar to Laravel (PHP), so you don’t need to spare a lot of time for learning some new languages. Trust me; it’s never been easy creating dynamic interfaces with Livewire.

So enough chit-chat, in this article, I’ll show you how we can create a Registration & Login form using Livewire. The forms will be fully dynamic with real-time validations. For the sake of the beautiful front-end, we’ll use some TailwindUI free components (and modify it), some bootstrap components, and the AlpineJS. Here we go!

Content Overview:

  • Our Goals
  • Livewire & Tailwind Installation
  • Create your First Livewire Components: Registration and Login
  • Notification Blade Component (AlpineJS)
  • Registration Component
  • Login Component
  • Summary

#1 Our Goals

As I said before, we’ll build the registration and login pages using Livewire. So, what’s it going to be like in the end?

Image for post
Image for post
Image 1. Our Goals

As you can see, we’ll have a real-time validation when a user types in the input elements and save the data without any refreshing pages. Of course, we need to give the user some feedback on whether the process succeeds or failed, that we’ll create it with AlpineJS.

I hope you’re excited to read my article below, but if you want the code and not my explanation 😢, you’re free to clone my Github repository at the bottom of this article. Happy reading ;)

#2 Livewire & Tailwind Installation

If you need to install the fresh Laravel project, use this command:

composer create-project laravel/laravel --prefer-dist livewire-demo

If you have the Laravel project, then install the Livewire using:

composer require livewire/livewire

That’s it! Now, your Laravel has all the Livewire features. For this article, we need to install the Tailwind CSS because we’ll use some boilerplate from TailwindUI to build the registration/login forms. It literally saves our time :).

To Install the Tailwind, we have two options here. First, the simplest one, you can use the CDN. But for this article, I’ll show you how to install the Tailwind via NPM.

npm install tailwindcss
npx tailwind init

The first command is we pull out the Tailwind library into our project. Then the second command, we pull out the config that the Tailwind has.

Then open your sass file in resources/sass/app.scss (if there’s no file exist, you can manually create one) and type these:

resources/sass/app.scss

Next, open your webpack.mix.js and modify it become:

webpack.mix.js

All right, the last thing we need is compiling the Tailwind CSS.

npm install && npm run dev

#3 Create your First Livewire Components: Registration and Login

It’s time for us to create our first Livewire component. Let’s create the components using the artisan command.

php artisan livewire:make Registration
php artisan livewire:make Login

When we create the Livewire component, it’ll create two separate files in App\Http\Livewire and Resources\Views\Livewire folders. Before we dive into the Livewire components, let’s make the layouts that later will base for all of our views.

resources/views/layouts/base.blade.php

The base.blade.php file will become our layout base for every view we have. On lines 9 and 11, we import the bootstrap and AlpineJS library that we’ll use later. On line 12, we import the Tailwind CSS that have been compiled before.

On lines 8 and 20 is a directive where we pull out the Livewire library so that any Livewire components that render inside those two directives will able to work.

Next, we need another layout that Livewire will (by default) use it. Of course, the layout will extend the base layout that we’ve created.

resources/views/layouts/app.blade.php

The app.blade.php will automatically be called when we call the Livewire component directly inside the web routes. So, let’s configure our routes.

routes/web.blade.php

On lines 9 and 10 of the web.blade.php, we call the Livewire component directly. Ok, so here’s the important thing, please be notice. If you’re calling the Livewire component directly inside the routes file, then the components will automatically (by default, of course, you can configure it) use app.blade.php layouts that we’ve created. The Livewire components will replace the {{$slot}}. But if you don’t want to call the Livewire inside web routes, you can instead call the Livewire component inside the regular blade files using the ‘@livewire(‘registration’)’ directive. In this tutorial, I’m showing you how we can call the component directly from the routes.

#4 Notification Blade Component (AlpineJS)

I promise, one last thing before we dive into the Livewire thing. To make that our dynamic interfaces working correctly, we need some feedback, right? We don’t want the page to be refreshed and give the users feedback on the output we have in the back-end. So, we need some notifications that we’ll create with the blade component.

resources/views/components/notifications/notify.blade.php

The notify.blade.php will use the AlpineJS to make this thing works. If you don’t know anything about AlpineJS, you can read the documentation here. The important thing about the notification above is that the alert will be shown if there’s a Javascript event named ‘notify’. So, when the ‘notify’ event is being emitted (by something), then the alert will be shown, set the message, and set the timeout for 2.5 seconds to hide again.

#5 Registration Component

So far, so good? We have the components, layouts, routes, and notification/alert components already configured. Now it’s time for us to dive into the Livewire. First, open the resources/views/livewire/registration.blade.php.

resources/views/livewire/registration.blade.php

Before I explain the model binding above, let’s modify one more file app/Http/Livewire/Registration.php.

app/Http/Livewire/Registration.php

Notice on lines 23, 31, and 36 in our registration.blade files. We bind those values into our public variables inside the Registration.php. Any changes inside the input type elements, the Livewire will automatically send an AJAX request to the server, informing that the value has been changed. So, the wire:model API binds the values/variables between the front-end and back-end. We use wire:model.lazy because we only want to send an AJAX request to the server when there’s a change event from the input elements.

In this example, we’ll validate every change that happens to our public variables inside Registration.php. Notice on line 21 in Registration.php; we have an updated() function where it’ll be triggered if there are any changes in any variables we have. If the validation failed, for example, if the user didn’t give any valid emails, then Livewire will throw some error bags, and it’ll be caught on lines 26 and 41 in registration.blade.php files. Of course, we don’t want the page is being refreshed so that Livewire will update the components dynamically.

The next question is, how we submit the form? All right here’s the next important thing about the post request of a form. In Livewire, we have two options here. First, we can post a form with the default behaviour. We must set the method and action in the form elements. Or the second one, you can utilize the Livewire API. Notice on line 19; we have wire:submit.prevent attributes that are calling the save() function in the Registration.php files. If you take a look at the Registration.php files, you’ll find the save() function that will validate the request and save your form.

One more thing, on lines 37 and 42 in the Registration.php, we call $this->dispatchBrowserEvent() either after the form is successfully saved or there’s an error occurred, that’ll trigger the notification we’ve created before. Remember, if there’s a ‘notify’ event emitted, then the notification will automatically appear. Interesting right?

#5 Login Component

Last thing to do, and it’s very similar to the previous one. Let’s create the login page.

resources/views/livewire/login.blade.php

Nothing unusual in login.blade.php, we have to wire the models (on lines 23 and 31) and call the save() function (on line 19). Remember, we need to import our notification component (on line 2), it will appear if login fails. Let’s create the public variables for the models used in blade files and the save() function.

app/Http/Livewire/Login.php

The explanation for the login component has been covered on the registration component above. There’s one thing that interesting to me on line 28, where we can redirect inside the Livewire if the login succeeds. I leave it to you where the redirection will go.

Summary

So far, so good? We’ve finally made the dynamic interfaces for registration and login forms with Livewire. If you’re not following, it’s okay. You can clone the GitHub repository below. Of course, Livewire has a lot of APIs you can use, and I recommend you to take a look at the Livewire screencast here. In the end, I’ll say that using Livewire makes developers life easier. We can easily create some dynamic interfaces/pages without any JS/Frontend framework that require us to focus on both things (Backend + Frontend). So, thank you for reading and see you next time :)

References:
https://laravel-livewire.com/screencasts
https://laravel-livewire.com/docs
https://tailwindui.com/components
https://github.com/alpinejs/alpine

PHP/Backend Engineer at Undercurrent Capital Pte Ltd — Data Science Enthusiast

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store