Laravel 8 Livewire Tutorial (Building a Simple CMS) : Create Operation using Jetstream Modal (part2)

hi i'm billy and welcome to jack of traits in this video we are going to proceed in creating a simple content management system this time we will focus on the create functionality and how we will implement the laravel jetstream's modal component in our livewire component and without further ado let's jump right into it before we begin let's prepare a couple of things first let's activate laravel jet stream view so that we will be able to use it in our application when we go to the laravel documentation scroll down and you should see the livewire section under the component subsection we can run this command to publish the jet stream views in our application let's go ahead and copy paste this command in our command line make sure that you are in the root directory of your application after that we should see the jet stream components under our resources views vendor jet stream components there are many ready-made components under jet stream but in this tutorial we will only use its button and modal components let us then prepare our pages model and migration in this database table we are going to save our main pages we will be creating dynamic pages that will be viewed in our front end through the unique url slugs url slugs are the part of the url that comes after the domain name the url slugs will be the unique identifier of our dynamic web pages now let's run the php artisan migrate to create our database table let's go ahead and create our livewire pages component and we will also create a live wire front page component that will handle the display of our web pages from the front end we will be updating the front end in the later videos we will also download tricks editor so that it's easier for us to implement what you see what you get text editor in our livewire component let's go to the tricks editor github page and follow the installation instructions downloading packages via the composer takes time so you can pause this video if you follow along [Music] and don't forget to add the tricks assets in your app.blade.php2 now that everything is set up let's go ahead and update our routes web.php the goal is to group routes that will only be available when the user is authenticated the current setup only has the dashboard being authenticated but we wanted to add another route for the pages here so we're going to do that as well [Music] do [Music] we will create a folder under the admins views and inside we will create a page.blade.php so we will be going to setup the page route like this do [Music] let's just go ahead and copy the dashboard template and change things up to match our pages page let's update the navigation.blade.php so that we will see our pages link above let's also prepare our page model by default laravel doesn't allow you to save things in your model if you don't specify the mass assignments fields fillable variable but by putting guarded as empty we will be able to mass assign all the fields in the database table that is mapped in this model let us display our livewire pages component in the admin page.blade.php [Music] now that we are finished setting things up let's update our pages class component which is located under app.http livewire let's go ahead and add the slug title and content properties which are properties that we will map in our database table fields since we are working with tailwind css by default we will write lots of css classes in your html markup and the first thing we wanted to do here is adding a button create that will show our modal component when working with laravel jet streams there are ready-made samples that are created during the installation of our laravel app so we will just search for the blade files that are using the ready-made jet stream components here for faster development just copy one of the sample implementations this component will display a button with a ready-made tailwind css styling let's add a wire click to this button we will add a function that will show the modal component the trick here is we will add another variable that holds boolean data this variable will control the jet stream modal's visibility in our case we will add the modal form visible variable and set it to false by default because we only wanted to show the modal form when we click the create button so inside our create show modal function we will set the modal form variable to true because this is the function called every time you click the create button from the front end i would also recommend installing php.comment extension to add documentation in each php function you create easily we will be adding documentation for each function that we will create in this tutorial to use the extension highlight the name of the function and press ctrl shift i [Music] do now we will add the jet stream modal form for some reason it seems jet stream components have huge markups it will take us too long if we write them down line by line again let's copy some existing examples that use the dialog modal and paste it into our view component let's change things up a bit to match the component with our goal as you can see we are adding the modal form visible variable in the wire model of the jet stream modal this is how we control the visibility of the modal in our livewire component this is a different implementation than the last time using the jetstream modal component we can avoid the modal being hidden every time the live wire re-renders part of our view component let us then create a function later to the create functionality let's add create to our wireclick action do [Music] let us search for another sample markup for jet stream components that render form elements there are a lot of examples inside your laravel app you don't have to follow the exact markup i'm using here what matters is that you will put the form elements inside the modal and put the wire model for each form element [Music] i know this is a tedious task but once you establish everything it will be all worth it [Music] do at this point i'm just basically copying and pasting the html from the tailwind website i'm going to put the links to the tailwind website and the github repo if you want to follow this tutorial in advance you can download the most updated source code on the github page do [Music] you can also pause the video and copy the implementation on how we put the tricks editor for livewire as you can see we are using wire ignore on this so that livewire doesn't update this element let's also add a bit of styling in our css to change our tricks editor's look we will not need the history tools so we will hide those elements too using our css open up your app.css and add these css code snippets [Music] do when you update any css or javascript in your laravel app you need to run npm rundev in your command line to recompile all the assets in your laravel app do [Music] do now everything is set up let's go ahead and write the create function for our create functionality we will separate the assignment of data in another function so we can have a cleaner look [Music] do [Music] after saving we should also hide the modal button [Music] we also needed to reset all the live wire properties or variables after saving so let's create another function that resets all our live wire properties do do do and let's add that in our create function do do saving data from a form would never be complete without form validations in livewire we can easily specify the validations by creating a public function called rules inside our class just like what we do in laravel we need to have unique slugs so we should validate slugs like this in our form validation and don't forget to add the error messages in the view [Music] we needed to add a bit of improvisation in naming slugs we should just copy the name of the title and add it as a lower case value in our slug but with livewire we can make a function that automatically listens to the changes of a specific property and since we wanted to make something happen each time we change the title's value let's add another function called updated title and put the data manipulation inside it here we will assign the value of the title to the slug variable to see it in action let's test it out a bit now that we see that it's working let's go ahead and make some data manipulation inside our function let's create a function called generate slug inside our generate slug function let's replace all the spaces with a dash symbol in the first process and in the second process let's transform the slug value to lowercase and finally assign the new value to the actual slug livewire public property [Music] let's test it out again as you can see in laravel 8 with livewire we can easily make our laravel app reactive without having to deal with a lot of javascript stuff and with the new jet stream views we can easily add modal components to our livewire components without facing modal component issues in the next videos we are going to tackle the read update and delete functionalities if you enjoyed this video give it a thumbs up comment share and subscribe if you're new to this channel don't forget to hit that notification bell so you'll get notified whenever a new video is up stay tuned and see you in the next video

Channel: Jack of Traits

Views: 32,274

Keywords: laravel livewire tutorial, livewire tutorial, laravel livewire, laravel livewire basics, laravel tutorial for beginners, laravel livewire for beginners, laravel 8 livewire tutorial, laravel 8 livewire tutorial for beginners, laravel 8 livewire jetstreams, laravel 8 with jetstream modal, jetstream modal, create operation jetstream modal, jetstream modal livewire, livewire jetstream modal, livewire modal, modal livewire

Id: xX1qmJwGqg4

Length: 24min 59sec (1499 seconds)

Published: Mon Oct 26 2020