this 1hour Crush course is the perfect starting point if you have decent knowledge in object-oriented programming and PHP and want to dive into Lal during this course we will learn the most important concepts of Lal and build small personal Notes application where we can register verify our email address login create read update or delete our personal notes from the database during this course you will get familiar with lal's file and folder structure learn how to change its configuration how to define roles how to generate models and migrations how to define factories and create seed data in the database how to generate controllers how to implement Crow operations how to define rules and Views how to create components how to add registration and login to your existing lateral applications how to validate the data and Save in the database how to use sessions to show success notifications to the user users how to use csrf tokens to securely submit the data on the server hello everyone my name is Zur and I'm the codol on this channel I share my 12 plus years of experience working as a professional software developer at the moment I'm also working on the complete laravel course which will be multiple hours long including big project quizzes challenges lessons in written form alongside with the video content with several more benefits whenever the course is ready I will announce it here on YouTube so if you don't want to miss that you should consider subscribing and enable notifications when you are watching this in the future maybe the course is already released so check the video description no further Ado let's jump into this Crush course before we jump into the course let's talk about few dependencies and how to set up the working environment first of all we need PHP working on your operating system for this I recommend examp which is a package and it contains Maria DB PHP and Apache we don't need MySQL or Maria DB we don't need Apachi we only need PHP and this is the good choice we also need composer which is PHP package manager make sure you have composer commment globally available in the terminal we're going to also need node.js and mpm because Lal uses V and we're going to use the v as well I also recommend to download and set up kit and kitbash because kitbash is much more intelligent terminal than uh CMD or Powershell and I'm going to use gitbash to create the project this particular course I'm going to develop on vs code sometimes I use vs code for PHP sometimes I use PHP store but for this specific course I want my working environment to be as close to your working environment as possible that's why I decided to develop this on uh yes code so that you can follow with me exactly as I'm doing Pro probably you are also using vs code and you'll be just H close to my environment and you can easily debug the issues I'm going to also mention several extensions which I'm using in the vs code and make sure you have these extensions now because sometimes things might not work on your machine like it's working on mine so we're going to have first of all the following PHP extensions this is my um favorite extension on vs code for PHP we're going to also install LEL blade format a l blade Snippets Lal extra intelligence we're going to install Lal go to view and we're going to do install auto rename tag highlight matching tag great here intellisense for CSS class names in HML and Talon CSS intelligence make sure you have everything installed what I just mentioned and then we can create LEL project now let's install the L project and I'm going to execute the following command in terminal composer create create d project ll/ laravel and then here I'm going to provide the local folder name inside which I'm going to create my LEL project and I'm going to call this laravel 11- crash D course let's hit the enter on this while the LEL is being installed let me tell you how you can deploy your Lal projects on production environment in this course we're going to learn the most basic things of Lal create simple project and Implement registration and login but if you are interested to deploy your Lal projects on production environment and assign custom domain to it I do have separate dedicated videos on these topics I have a video how you can deploy laral on shared hosting as well as on VPS hosting how you can do the deployment with manual steps or how to automate your deployment through GitHub actions and cicd pipelines so that whenever you push something on the main branch that's going to be deployed on production my choice of Hosting provider is hostinger let's check how the Lal installation goes okay it is downloading packages and progressing I have been personally using hostinger services for past three years and have been extremely happy with their services they provide shared hosting VPS hosting Cloud hosting and even email hosting their prices are very affordable and servers are pretty fast let's go back to the lateral installation okay it finished and now let's open it using vs code now let's collaps the left side and I'm going to open new terminal and I'm going to execute the following commment PHP Artisan serve this will start php's built-in server and we will be able to browse the application in the browser let's hit the enter and here we see that the application now is running on Local Host Port 8000 now let's open the browser and I'm going to reload the page and we're going to see laral 11's default welcome page so this is how looks like laral 11's default welcome page which in my opinion is looking great now let's open vs code again I'm going to open one more terminal and we're going to install mpm packages by executing mpm install hostinger shared hosting services start at $2.99 per month and that includes free domain free unlimited SSL certificates unlimited number of databases and there are a lot more than this go to the website hostinger.com zurc explore your desired hosting service type and if you decide to grab it use the coupon code zura TC which will give you extra 10% off on already discounted price now let's go back to our project and see if mpm install finished mpm install was successfully completed and and now we're going to execute mpm run Dev right now we just spin up the new V server which listens for the asset changes such as CSS or JavaScript and will update our web application based on the new changes so we are going to modify CSS at the later section of this course and we will need this V server running in order our CSS changes to be reflected on the website now let's explore Lal 11's file and folder structure there are several key folders in Lal 11 project inside which we're going to do most of our work one of them is the app folder app folder contains right now three main folders HTTP models and providers this is how it comes by default on the installation but if we execute certain Artisan commments it's going to create more folders and more files inside the app folder that's going to be one one of the most important folders inside which we're going to do most of our work inside HTTP we have controllers and inside controllers we have only single controller inside models we have only user model and inside providers we have only app service provider but again as I mentioned after running certain commments we are going to create more files and folders inside the app folder inside boot drop we have two main files up PHP and providers PHP app PHP is responsible to create the application configure routing configure the middle we exception create and return that and that returned application is going to be used into other files providers PHP is just an array which Returns the um service providers defined in our project inside config we have all the configuration files necessary for all the services that is available in LEL such as database cache authentication application and so on we are going to talk more more about configuration in later sessions in the database we have three main folders factories migrations and ceders and we have the database. sqte file if you choose to use SQ light as your choice of database for LEL projects it's going to create the following file when you execute migrations so that contains all the data all that single file is all the database okay inside factories we have one Factory for each model and the purpose of the factory is to define the structure of each Fields whenever we generate the CED data how that c data should be generated and in this case the name is a fake name email is fake uh email and so on inside migrations we have all the migrations files um and we're going to even create more migration files right here inside Cedars we're going to have all the Cedars and we have only one Cedar by default the database CED you can put all your seeding into a single file or you can create more seeders right here inside public we have the index PHP which is the entry script that index PHP is responsible to take the request and do all the necessary steps okay so it Imports this autoload PHP it Imports that bootstrap up PHP which is the application and it calls this handle request that public folder is a single web accessor folder in our project everything whatever you put in the public folder can be accessed through the browser so you should be careful uh don't put any sensitive information in the public folder the second mostly used folder by us is going to be resources the first is app and second is going to be resources and we're going to work mostly inside these two folders that contains CSS JavaScript and it contains views and that views will be all the h HTML Associated to Roots okay right now we have only one view inside roads we're going to have all the roads for console commands as well as for the browser inside storage we're going to have generated files and inside app folder we're going to have a files generated by our application by our code whatever we write okay and the framework and logs is going to contain the files which will be generated by framework for example inside framework we have sessions cache um cached views and so on and inside logs we have all the log files inside tests there are only tests and we are not going to write any tests in this course and the vendor obviously contains all the third party packages inside Ian we have all the configuration um options like the name and the database credentials and the session configuration and the email and so on uh and any example is just an example file and if you scroll down below this Artisan is a file which contains which is a common line interface we're going to talk more about Artisan in the next lessons but this is very similar to public index PHP it includes this autoload it creates the application and calls this handle command that's very useful file and we're going to need that a lot then obviously these are clear and PHP unit is for unit tests and we have this vit config JS which is the configuration file for V server now let's do Artisan overview I'm going to bring up the terminal open new terminal and I'm going to type PHP Artisan list let's expand this and have a look so it gives us all the available list um the commments that is available in the Artis and these commments are also grouped by its own category for example we can see all the Q related commments uh right here if we scroll up we can see all the make commments right here let me zoom out slightly okay and we see all the make commments right here we see um event commments and DB commments and so on so U just feel free to pause and have a look or just type PHP Artisan list in your terminal and you're going to see all the available Artisan comments we're going to use uh many many such type of commments during this course such as make for example make controller or make model or Etc now let's talk about configuration in LEL 11 when you expand the config folder you're going to see the default configuration files for different services such as for application caching authentication and so on these configuration files might not be all that is available in Lal 11 to publish more configuration files we just need to open Terminal I'm going to open a new terminal and we're going to execute PHP Artisan config column publish when we hit the enter Artisan will ask us which configuration file we would like to publish if you pay attention broadcasting for example is a file which doesn't exist by default in LEL 11's config folder okay so you just need to provide the configuration file name to publish new configuration file or for example if you decide that you want to delete a specific configuration file for example up then you can republish that configuration file I'm going to also mention that if you don't need those configuration files and if the default values those configuration files are absolutely okay for you you can feel free to delete all of them and they exist in vendor they exist in Lal core and the default values will be taken from the Lal core or for example if you only need one configuration option let's say that you only need application name to customize feel free to delete every other configuration option from that file and LEL will merge all the default options with those ones you just modified so the whole thing in Lal ecosystem goes to a way that whatever you don't need in your project you can delete whether this is going to be a file or configuration option you can delete because the default values exist and those default values will be taken from the Lal core if you know exactly which configuration file you want to publish you can provide that configuration file name exactly right here for example I can provide broadcasting right here I'm going to hit the enter and it's going to publish the broadcasting configuration file which will be now available right here now let's open web PHP from roads folder so this is the main file uh from the roads folder which contains which should contain all the routings in our browser okay at the moment we have only one route on slash it's going to render this welcome view but where is this welcome view all the views are located under resources views and right here we see this welcome. blade PHP whenever rendering a view we don't need to provide this . blade. PHP we just provide the view name and Lal will resolve the following file let's open this welcome blade PHP and we're going to see it's a very standard HTML um and we have some um PHP and uh blade related things for example here we are outputting the application's current language and down below we have um down below we have some directives which we're going to talk more about this later but what I'm going to do is just delete everything from here and inside H1 probably just write welcome okay whenever I save this reload we see this welcome and if I inspect this right now and just check a page Source we just see H1 we don't see the stock type HTML or anything like this so let me undo this and now I'm going to do the following I'm going to create now a new controller and render this welcome blade from that controller okay instead of this closure function I'm going to pass controller and its own action so for this let me bring up the terminal and I'm going to execute the following common PHP artisan make controller so I'm just creating new controller I'm going to call this welcome controller and I'm going to hit the enter now the output tells me that under up HTTP controllers welcome controller was created so I can hit a control on my keyboard and mouse and it's going to open this welcome controller which is an empty class it extends this controller okay I'm going to Define now public function right here let's call this function welcome and then from here I'm going to return the result of the view and I'm going to render welcome so I'm rendering the same view as it is written right here just now I'm going to remove this closure and I'm going to replace this with controller welcome controller class and the method name welcome methods are also called action so I'm going to mention this as action so then I'm going to provide right here name as well each Road can have optionally can have name but it's very good practice to associate name on every road I'm going to call this welcome now I save this and reload the page and we see the exact same welcome page now I'm going to generate eloquent model and its related migration let's bring up the terminal I'm going to execute PHP artisan make model and I'm going to give the name to the model I'm going to call this note and I'm going to provide d m flag which indicates that I want to generate migration file as well so as soon as I hit the enter I see two files generated up models node PHP and database migrations and the new migration file first let's open this node PHP and have a look it's nothing complicated right here this class extends from the eloquent model and it has Factory now let's open this migration file and have a look based on the model name uh the following migration was generated and here we see this notes so the following migration is going to create notes table and the table will have ID and it's going to have time stamps column right there uh so whenever I click control and mouse right here we follow we see two columns create dat and update dat so this time stamp method basically adds two columns to the database table created it and updated it we're going to add uh two more columns right here so first I'm going to provide long text note the note itself that's going to be the long content of the note then I'm going to provide right here foring ID column user ID and that needs to be constrained on users basically using this this line I'm telling uh LEL to create the user ID col colum which will be uh foring ID to users tables primary key okay which will be ID in this case so uh except that long text and foring ID there are much more U methods like we can provide integer we can add a Boolean columns we can do even much more we can provide string where are the first argument of this string is the column name the second argument is the length of um the column and so on like me revert this into long text once we have this migration ready we can bring up the terminal again and execute PHP Artisan migrate which will apply this new migration uh it's going to apply basically all unapplied migrations okay uh to the database and now we have this notes table created in the database if I try to execute PHP and migrate we see that nothing to migrate now I'm going to create Factory and write the code in the Cedar to create C data in the database first of all let's execute PHP artisan make Factory and I'm going to call my factory note Factory and I'm going to also provide D- model equals note this will tell the Lal that the note model is the model for the node Factory so I'm going to hit the enter the node Factory was created I'm going to control and click on this it's going to open this and now we're going to adjust this definition okay so I'm going to Define that the note is going to be fake text but with some real text not Laura msum but some real text and I'm going to provide the length of this real text so every time whenever we want to create new node it's going to generate a new fake real text okay so and the user ID is going to be at the moment hardcoded is one so this is my node Factory now let's open database Cedar and here is code which creates a single user in the database now I'm going to do two things to this user first I'm going to provide the ID to be always one and then I'm going to provide password here as well and I'm going to use bcrypt right now to encrypt the password in the database so let's just provide some very secure and random password don't tell anyone please okay and after this I'm going to generate um 100 uh random content notes in the database for this I'm going to use note model and make sure that up model's note is imported so it should be imported right here at the top note Factory we're going to pass some number 100 in this case I'm going to create 100 Factory and and then I'm going to execute create okay so then we need to apply this we need to execute this Cedar to create the C data so there are a couple of ways to uh apply the Ceder first is to uh directly apply this only seed command PHP Artisan DB column seed this will uh execute this database Cedar uh run command and it's going to create the user and 100 notes in the database there is other ways to execute the Ceder alongside with the migration more specifically so if we want to apply some migrations alongside with the cedar we can do like a PHP Artisan migrate d d seed so it will apply all un applied migrations plus it's going to execute this DBC command and there's another one to First roll back all the migrations like phps and migrate refresh is going to roll back back then reapply and then it's going to execute the cedar okay we can do any like those three have different meanings you should know which one you're going to use in our specific case all of them will do the same thing so if you just do this it's going to just roll back the migrations reapply them and then it's going to see the database so at the end of the day we have one user and 100 random nodes in the database now we have the database schema already we have some C data now we're going to start working on working with this data for this we need node controller I'm going to bring up the terminal and execute PHP artisan make controller note controller and I'm want to specify D- resource flag which indicates that I want this controller to serve as a resource controller for my uh note uh object we're going to provide WR um as well right here D- model equals note so that's going to be resource controller for the node modu as soon as I hit the enter it creates this node controller let's open this and have a look the node controller has the following seven methods to display all the nodes to display the form to create node to create new Noe to show specific node to show form to update one node to update node and to delete the Noe pay attention that um in some of the methods like in destroy or in update right here or in edit and show we're accepting an instance of the Noe model note um eloquent model which what we just generated okay so we're going to talk more about this but at the moment let's do the following from index from from create from show and from edit I'm going to use multic cursor functionality and I'm going to return just the name of the method so let's use this multi cursor functionality and just return edit show create and index so we have the controller ready now let's open web.php and we need to Define roads corresponding roads for these actions first let's import node controller we need we we're going to need that right here then let's start defining rades on get requests whenever get request is made on slash node we are going to use node controllers index method to handle that I'm going to also associate name to that specific Cod and this going to be note. index okay in the similar IL way whenever the get request is made on Note SLC create we are going to pass these into note controller create action to handle this and I'm going to associate name to it note. create is going to be the name okay now whenever post request is made on SL node we're going to pass this node controller store method and let's associate uh this uh name to it as well okay and we're going to keep doing like this and Define all these seven rules for different seven actions so here we're going to have whenever get request is made on Note sspecific ID okay it will be passed into note controller show and this is the root name whenever the get request is made on nodeid sledit it will be handled by this edit method and here's the name whenever put request is made on note SL ID it will be handled by this update and here's the um name and whenever delete request is made on nodeid it will be handled by this um destroy method and this is the um this is the name of the route now let's save this and have a look in the browser so we are going to just access to note and we see index if we try to access slash create we see create if we try to access uh no/ some specific ID we see show let me talk more about what is this so this is Road parameter so this will be converted into a variable and pass that into node controller okay so in the node controller for this uh show method we have we expect right now node um instance of the node class but we can change this and um call this string for example ID and then we can simply print that ID as well so now if I reload we see show one so we take that ID and use that ID however Lal provides this um root model binding functionality which means that system will automatically try to find note based on the following ID and then resolve this uh function uh passing the instance of that model so in this case we already have this note an instance of the note model okay which is pretty awesome in my opinion so the same thing happens right here here and U here okay so every rout is going to work now I want to tell you that there is a shorthand of doing this um SE instead of this seven line of code we can do this in a single line line basically in LEL I just wanted to show this to you so for this we're going to use Road resource we're going to pass the resource name and we're going to pass the controller which is going to be Noe controller class okay so this single line generates these seven roots with these seven corresponding root names so we can comment this and now this this is going to work in the same way like index slash create and you get the idea we have the controller ready we have data in the database now let's create the views for uh rendering the content so we have four main uh four main actions which requires views like index create show and edit we're going to generate those views under resources views but I'm going to generate them into a single folder and I'm going to call the folder note so it's a common practice to create new folder and put all the uh views Associated to a specific resource in that folder I'm going to generate this through Artisan so let's bring up the terminal and execute PHP artisan make View and I'm going to call the view note do index whenever I introduce Dot right here which means this means that it should put that index view inside note folder okay so I hit the enter and look at this resources views note SL index plate PHP was created now the second view is note create third view is going to be note edit and we're going to have note show as well so four views we are generated all of them can be found right here under views note and let me quickly write um some texts inside so edit okay so I modified all those four views now let's open node controller and I'm going to render these views so right here here here and here I'm going to use again multic cursor functionality View and pass string The View name but we're going to also pass the folder name so it cannot found views like this inside resource resources views the views are inside note folder so now whenever type note. show note. edit um it's going to resolve those views so I'm going to save this and now let's have a look reload now this is inside H1 now this is inside H1 as well and we can check the page source as well as you can see this is very basic HTML it doesn't have layout it doesn't have doct type HTML head body Etc the same thing happens on every road what we have just described we need layout we uh we can obviously put this doc type HTML right here and here but we're going to have repeated code we want a single file which going to be the layout file and use that in other um blade files now let's define layout I'm going to do this under views and inside views I'm going to create new folder called components and inside components I'm going to create layout. blade. PHP so lell has a separate section of components uh UI components and whenever we put a blade file inside components that can be used slightly differently inside blade files for example because we put layout blade inside components now we can use that layout file in the following way x-h layout so X prefix right here is um means that we are trying to get the component which has name layout this is exactly what we have right here obviously our layout blade uh actually I shouldn't do this right here oops um our layout blade is actually empty okay so let me copy some content from this welcome blade I'm going to copy actually everything inside layout blade but I'm going to modify that let's scroll up uh I'm going to remove these Styles and I'm going to remove everything from this body okay so this is my layout but we to render the actual blade view content we need to specify this inside the layout I want this to be rendered inside the body and there's a special um variable for this uh to Output all kind of variables inside blade we're going to use double curly braces okay so inside double curly braces we're going to Output the variables and the special variable for the view content is called slot so this is the place where I want the view content to be output now let's open index plate for example and I'm going to change this div into x- layout using which now this tells Lal that hey there is a component called layout let's use this and whatever is the child of this x layout is going to be pushed into this slot variable in output right here now if we just open Index right here we're going to see the following HTML and right here is the actual content okay if we try to access slash create it still renders the following HTML so let's go into create and we're going to change this into x- layout and here we go so we have this and let's go into edit and change this into X layer out and let's do the same thing for show as well X layout and just like this we have defined layout and we are using now this in every blade file for our resource now we have roads defined we have database and we have content in the database we have views created and now let's select the content from the database and pass that into views and render them inside views let's start with the index first I'm going to create a variable notes then I'm going to use the app models note model and I'm going to execute query method on this which will return the instance of the query Builder which has a lot of methods a lot of methods actually and I'm going to apply order by for example I want to order uh all the nodes by created at in descending order and I want if I uh simply get right here it's going to give me all the available nodes from the database okay let's leave get right now and I'm going to dump right now all these noes this DND D is a helper function which uh prints the variable and it dies right here so it doesn't continue actually now let's open this index and reload and we're going to see that the variable we are printing is an instance of eloquent collection this one and it has 100 items inside its array and all of them is an instance of up models note and we can expand each um model and have a look at more details to it so what I want is to implement also pagination so instead of getting all 100 I'm going to call pinate right here by default the pagination has 15 as a default value but we can provide 10 or uh whatever number you want basically I'm going to actually leave this into 15 because I'm going to show three columns and five rows totally of my notes and now I have this notes and if I print this previously this is the eloquent collection if I reload this page now this is length a we paginator so this is actually an instance of pagination which has how many items we have on per page uh here are all the items we see 15 items totally and we see um the U pagination link on each page and we have the total number of items and what's the last page and it has even more information internally okay so now we're going to take these nodes and pass it into node index and use it to pass some variables to the view we're going to pass the second argument into the view which should be an array okay and inside this array the key will be the variable name inside the blade file and the value will be what we are going to pass there so I'm passing uh let's call this notes so I'm passing the following variable which should be created as a notes variable inside this note index as well we can even use compact function for this but I generally prefer to write this um as an associative array okay awesome while we are in the controller we need to pass additional information so I'm going to scroll down below on the show method and I'm going to pass note right here here and right here as well so let's use this multic cursor and I'm going to pass note variable in these two places okay now this is awesome let's go into index blade PHP of our um noes and we have to work on on this file so I want to focus more on leral functionality and not spend time on HTML and CSS so I'm just going to copy and paste this very basic HTML markup and this is it it's a very basic HTML we have this div we have this add new note button we have the container for the notes and inside there we have a single note which should be iterated for each note okay that should be iterated and you can just uh go ahead and type this pause right now and go ahead and type this or you can get the following template uh from the GitHub repository okay so now what I'm going to do is just to iterate over the notes what we passed from here and we're going to render each individual note so in Blade we have directives we have a lot of directives for if else statements for switch case for sessions and for for everything so in this case I'm going to use a for each directive every directive in Blade starts with Ed symbol and here the autoc comption gives me all the available directives you can see that there's a lot so in this specific case I'm going to use for each directive and I'm going to pass notes the first is note okay so this for each Loop is very similar how you would write in vanilla PHP okay so we're iterating our notes creating a loop variable Noe and then I can use that Noe variable to render some content so let's use it right here instead of this hardcoded lurm ipsum I'm going to actually render note objects note column okay so this note is an instance of up models note but the note itself has note column which we gave when we Define the migration so I want to Output that column information so now I save this and have a look in the browser reload the page and let's zoom out slightly right now and have a look so here are notes so this is the first note we see view edit and delete this is the second note this is the third note and we see 15 notes totally so we have a lot of content right here which I'm going to reduce I'm going to zoom in also to reduce the content I'm going to use St Str helper class in LEL and with words method so that words method accepts two arguments first is the content and second is how many words do I want to take I want to take 30 words out of this content so if I save this and reload the page we're going to see that the content for each note is now shrinked okay we are taking only 30 words for each note the links what we see right here new note view edit those links are just broken they don't work because we have hashes everywh to make this working we need to uh we we have two ways BAS Bally one option is to link this into note slash create like this and whenever we click on this um new node it's going to open this node create but this is not the perfect solution in LEL so it's always good practice to generate your roots based on the root names and this is in my opinion the main purpose why you should give names to every root so in our case I'm going to use root and here we need to provide the root name that's going to be note. create okay now if I save this and reload the page whenever I click this new note it's going to open the following URL so in the same way we're going to generate links for a view and for edit however View and edit rotes require variables if we open web.php we can see that um show which is the same as View and edit both require the ID of the note we want to see so from here when we use note. show we need to pass note ID or we can even pass the entire note object and L will resolve this based on the primary key of the model so here we can pass the note and here we need to change this into edit it and pass the note also now we save this go back into note listing we click on view it's going to open the view for the specific note we click on edit and it's going to open the edit page of that specific note now I want to apply some CSS styles to the following notes because you agree this doesn't look great let's open this code and I'm going to open resources CSS app CSS so this is the file inside which we're going to put the CSS I'm going to copy and paste my CSS this is very basic CSS you you don't need to type this because it's a long you can find the link of the CSS in the description of the video or in the uh project repository and you can grab that and put this in the project okay so but whenever we put this it is not included automatically it's uh so we have to make sure that this CSS file is included and is included properly as well so if if we open layout blade uh we see that um basically no CSS files are included these are the fonts which were copied from the welcome so I think we're going to remove this I'm going to remove this okay but no CSS file is included how to make this working so in order the CSS file to be included it needs to be actually inside this public folder okay the only files that can be included did inside this layout plate should be inside the public folder it needs to be web accessible and the only folder which is web accessible is this public folder so one option would be to copy this app CSS into public and then we will be able to access in the following way SL up. CSS but this is not going to be ideal this is not how we should do this this is the case where V server is coming and we're going to use V server to properly include UD this uh CSS file uh right here so we're going to use V directive and we're going to pass right here an array and specify that which files I want to be included okay and let's first check V configuration file right here so V config file has two input files resources CSS app CSS and resources JS upjs so these are the files which are input for V server so we can just copy them and put them right here okay as soon as we do this now these files are included using vit just make sure that the vit server is up and running right here so now let's go in the browser reload it and voila we see the following output I'm going to zoom out slightly so now here we see all these tiles and let's see also page source so so here we have this vit server vit client and we have the following CSS so this is our CSS it is coming from the vit server vit is actually that is serving this file as well as this file and the CSS as well as the JavaScript are included from the V server okay but if you want to build your application on production I'm going to stop this right now using contrl and C if you want to build your application on production you need to build those asset files for this we're going to execute mpm run build where when we hit the enter it's going to generate the following files under public build so now those files are bib accessible we can see them under public folder public build assets okay and you can put this on your server and they will be served now if we check if we reload in the browser we're going to see that they are coming from the larel server from build assets they are not coming anymore from the V server which is actually correct because we have the built version but as soon as we execute mpm excuse me mpm run dev then the V server starts running we reload the page and they are coming from the V server okay during development I recommend to have this V server up and running and you should only execute mpm run build if you want to put the project on production this is our note create file now let's define proper HTML for create blade show blade or edit blade I have this very basic HTML prepared for each of the uh these files I'm just going to copy and paste again you can pause right here and type this this is not too much HTML if you also don't want to spend time on this you can grab this from the Repository very basic HTML page title we have basic form with action method post class text area and buttons okay let's now get this code for show as well I'm going to put this right here again container we have this node header we are displaying right here note and I'm going to display right here the note statee as well then we have the edit and delete buttons and this is the place where the actual note should be displayed and lastly we're going to have this edit blade I'm just going to paste right here it's very similar to to the uh create blade we have this edit title we have this form with post we have this text area and this is the content which uh should be updated and we have these note buttons since we have this basic HTML now let's make this live and let's actually output the correct things right here so for example whenever we submit this form it needs to go to the proper controller action proper root and the root needs to be note. store so this is this is the uh root name or which needs to be executed when we submit this okay this is awesome uh whenever we cancel this we can go back into no. index now let's go into to show blade so this is the place where the note date needs to be outputed inside double Cur braces we can use note created at this is the date column and we can output that uh on the edit we can use root note. edit and we're going to pass as an argument entire note object or the note ID and right here we're going to Output note note so in the index we are outputting only first 30 words of the note but here on the show we're going to Output the entire content of this note let's go in the edit uh right here in this place we're going to Output the note itself that's going to be note note right here whenever we hit the cancel we can go into to note. index and on the action we're going to execute note. update and we're going to provide the note object here as well okay awesome let's have a look now in the browser so this is create new note we can type our content right here when we click on cancel we go back into note list whenever I click on view the follow following view file is opened we can zoom out slightly we see the note date we see these two buttons and this is actually the view of the note we click edit we are redirected to the edit page where we can change our note and we're going to implement later to hit the submit button and update that now let's Implement creating new note let's go again in the create blade and we have almost everything ready just one thing is missing and and that thing is the csrf token okay first of all let me show you what it's going to look like if we don't have csrf token so let's open node controller let's find the store method and we're going to implement the backend side so we're going to take the request and we're going to call validate on this request and the validate accepts an associative array so the key inside this associative array needs to be the input name and our uh input is called uh note right here so we're going to pass note right here then we're going to provide the validation rules uh the note needs to be required and it needs to be also string okay we don't have any uh length restriction on the note so once the validation is finished it's going to return the validated data this is going to be that data we're going to take the data and pass it into note create function once the note is created it's going to return this a note model okay and this will be already created node in the database and then we are going to redirect user to some road for example note. show and we're going to pass the just created note right here and I'm want to additionally provide message to be note was create okay what is this message this message is a session message which we're going to take out and use that in the layout file but I'm going to mention one additional thing right here so first when uh the note is created the note requires user ID as well so inside data for user ID key I'm going to push at the moment hardcoded one but later we're going to implement to take that uh one from the currently auth indicated user but even this is not going to work because whenever we pass that associative type of array in the node the node needs to know what Fields uh it needs to take from that associative array okay what needs what columns needs to be filled from that associative array for this there is um protected array protected pable array which does exact the exact same thing where I just described so we're going to provide right here note and user ID which means that whenever we pass associative array inside the create function it's going to take note and user ID from them and just like this whenever this code is executed the note is going to be created now let's take care of displaying this message I'm going to open layout blade and right here above the slot above where page content is displayed I am going to use session directive okay session we're going to pass the session message name um right here message and we're going to have end session okay and inside there we are going to generate div let's give it class success message and inside the div I'm going to use session function to out output an actual message that message will be whatever we pass from here now if I go in the create reload this I type something test content and hit the submit button we see this page expired and that happens because of this csrf token okay we need to go into create blade and we need to add the csrf token csrf it's a c cross-side request forgery methodology to prevent submission of forms from somebody else's website to your website that's why we need this csrf token okay now if I go back reload test note hit the submit button the test note was created note was created message was also displayed and if we go back now into note list we're going to see this test note right here now let's take care of the note update we click edit right here we change something and we want whenever we submit we want it to be updated let's go into edit blade and I'm going to close everything else and here we have almost everything ready except two things first we have to provide csrf token right here as well and second is that uh the update is handled through the method put if we open web.php and see the rotes we defined previously like this one for example put request is necessary to update specific note okay but we are sending post request this is not going to work however in LEL there exists a directive called method and whatever we provide right here for example in this case we're going to provide put this will override the method post right here and lell will have a look at this if this is put okay so then this route will be matched and node controllers update will be executed okay now it's time to open node controllers update and implement this part actually I'm going to copy everything from create put this in the update and adjust few things so we're going to still validate the data get the node we don't want to put the user ID right here because we don't never change the user ID of the Noe however instead of node create we're going to call on existing on existing node update we're going to pass entire data and then once this is updated we're going to redirect into Noe show and note was updated now I save this let's Pro provide some text updated and hit the submit button and we see note was updated and the message right here tells the same thing now we're going to handle note delete as well and we have two places where this delete button is displayed one is right here and second is in the note listing let's open ES code and go into first let's open index blade and show blade so these are the two files inside Index plade right here we have this pattern so whenever we want to delete something based on the roots delete request needs to be sent okay to the following rout so we are going to replace this button with a four which has proper root the root needs to be node. destroy but we're going to provide also right right here note which needs to be destroyed we're going to also provide method right here to be post because we're modifying something but we are going to provide right here two directives one is going to be for csrf and second is going to be for method with delete method and then I'm going to put this button right here okay so this is all what you need now I'm going to get this form and put this in the show blade in this Place let's open node controller scroll down below and implement this part on the note I am going to call delete and then I'm going to redirect user to some Road in this case let's redirect into note index we don't want this variable here with message note was deleted so I'm going to save this whenever I click delete right here I'm redirected into index page where the message note was deleted if I click delete right here then this will become the first note okay let's try this click on delete here and now this became the first note so we have the listing we display 15 items but we don't display these pagination links which is super easy to display in Lael let's go in the index plade and let's put this uh right here maybe after notes so this nodes variable is an instance of paginator and it can be iterated but it also has different methods on notes I'm going to call links which will generate all the pagination links and information that is necessary so once I save this and reload the page if I scroll down below we see right here preview and next we see some sort of summary of the pagination and we also see huge left arrow button and huge right arrow button so those are very unstyled and looking ugly but this is because lel's pagination component by default is looking for talin CSS um classes um to properly be styled okay we're going to add the tyon CSS later when we implement the registration and login but right now this is ugly but it's going to work so if I click on next we see that it opens the second page if I scroll down below we're going to see that now we are on the second page I'm going to click on six and it's going to go to the six page and just like this the pagination is actually working now let's add login and registration into our application with email verification as well for this we're going to use Breeze lateral Breeze is a starter kit package for setting up the login and registration into your project with profile management and password recovery as well it's a super uh useful package I use it almost all the time whenever I want to implement login and registration in my application before we install lateral Breeze make sure you back up these two files app. CSS from resources CSS app CSS and web.php where all your roads are located because those two files will be updated by after installing larel Breeze and if you don't have them back up you're going to lose the content right there so make sure you back up this on secure place uh because we need to recover this after we install laravel Brie to install this we're going to execute composer require laravel SL Breeze D- Dev to install this as a Dev dependency the package was installed and now we're going to execute PP Artisan Breeze colum install command which asks a couple of questions which Breeze Tech we want to install and I'm going to choose the first one which is blade hit the enter whether we want to enable the dark mode or not I'm just going to type no here and which testing framework do you prefer I'm just going to hit the enter because I'm not going to write any test at the moment pre install command finished successfully and now let's have a look in the browser how it looks like our roots not working anymore because as I mentioned if we open web.php all our roots are gone we don't have note related Roots right here we're going to recover them soon I hope you saved that as I mentioned you you need needed to save that okay now let's go into user.php and I'm going to do one more thing so at the moment if I try to go into dashboard or if I try to go on login maybe let's just go to this SL welcome so we see this login and register right here whenever we register we are automatically uh verified at the moment okay in order email verification to be sent for for email verification basically we need to implement the following interface from the user class okay so here is must verify email let me uncomment this and that user implements must verify email now if we try to register it sends the email verification but where is that email received that emails are saved under storage logs Lal log because based on the in file the mailer is set on the log so for local development all the emails are sent into log file we can find this at the very bottom um somewhere right here or we can clear this entire L log file we can click this resend verification email and then we're going to find this as a very first thing verify email address this is the subject scroll down below this is actual link I'm going to hit control and click on this link it's going to open in the background and look at this so we have been verified and we see the dashboard page right now let's close this and reload this and we will be authenticated here as well now let's try to recover web.php but first of all let's explore what what's what's going on right here so this is pretty obvious it doesn't need any explanation so on SL dashboard it is rendering this dashboard but here's the middle we as well the name the name is clear but what is Middle wear middle wear is a special class that sits in between the user's request and the actual um action the controller or the closure function and the purpose of the middle wear is to either block the request and don't reach to the destination or even modify returned response so in this specific case there are two midle we attached to this slash and they are checked one by one so first the out middle wear is checked um is executed and it is checking if the user is authenticated on the website if the user is authenticated on the website then the second middle middle we will be checked H if the user's email is actually verified if one of them is not satisfied then we will not be able to access the dashboard page okay right here the middle wear group is created and uh the user needs to be authen authenticated in order to be able to access the profile page so this is all good now we need to recover and maybe slightly adjust few things right here so I'm going to um delete that part I'm going to also delete this dashboard part and I'm going to create Road Middle wear I'm going to pass out here and verify it then I'm I'm going to execute group passing function and inside here I'm going to paste all my rules which I pick up okay and make sure that the node controller is imported right here so now this means that I need to be authenticated and verified in order to be able to access all the um all the note um rots so if I right now try to go into note this lists all the note this tiles are lost which we need to recover next but you see that the new note is right here view edit delete all the buttons are right here and the styles are completely gone also talwin CSS resets all the Styles but if we check the HTML markup we're going to see the same type of structure what we had before okay now I'm going to copy this CSS and open up. CSS file from resources and these are Talan CSS components we're going to put this after that okay so I'm just going to save this and reload the page it does not seem to be working if that doesn't work probably something is wrong with the V server we're going to open the second terminal and as I guessed the V server is actually killed when we install new packages in this case um the breeze lateral Breeze installed ton CSS and that simply uh broke the V server we're going to execute mpm run Dev and once we do this andv server is up and running we reload the page and we are going to see our styles are actually back now the last thing what I'm going to do right here is that I'm going to change the layout of my notes to the layout what is for the dashboard well actually I have deleted right now the dashboard root and we don't see the dashboard um root layout but the dashboard view is there right here the dashboard view is using X up layout X up layout is the component located under views layouts up blade PHP okay this is the layout what is used inside the dashboard what we can do is just open this note for example index and instead of X layout change this into X up layout and let's do the same thing for create X up layout for edit and for show as well once we do this we go back into notes reload the page and now we are going to see something okay first of all we see an error Road dashboard is not defined which is something expected the uh road with name dashboard is used in multiple places in Lal Breeze and because we completely deleted that rout from here now we have the following error so what we are going to do is just describe that road so I'm going to do the following root uh let's do actually redirect so when on slash we're going to redirect into slash note and I'm going to give this also name called dashboard so this means that the slash now is dashboard whenever the Lal or Breeze um whenever the code tries to redirect to the dashboard it's going to redirect into slash and on slash it's going to redirect into note so we are probably doing a double redirect but this is a quick hack so that we are always uh the dashboard is right now our note application if I log out for example and try to log in with my account then I'm redirected to the dashboard page which is right now note the currently authenticated user is zura and zura actually doesn't have any notes at all and zura should not be seeing these noes right here okay and why does this happen because actually we don't filter nodes based on the currently authenticated user so let's close all the files and I'm going to open node controller and if we scroll up right here we need to add the we condition to filter noes by the currently authenticated user where user ID is re Quest user ID okay and using this approach we will be able to filter notes uh by the currently authenticated authenticated user if I scroll down below we need to make some changes right here in the store as well we are assigning the hardcoded one right here we're going to use the request user ID as well but in this case I'm going to use this request variable just showing to you that you can do the same thing in different ways request user ID okay we save that now we reload this page and we don't see any notes because Zora doesn't have any notes at all now I'm just going to try to create new test note um hit and submit what just happened test Noe get on submit okay we were red right here let's go into slash Noe and we see these two test notes uh why the second one was created probably it was a kind of I double clicked on the submit button anyway not a big deal one very important thing right now I have two notes one has ID 103 and this one has 102 but there exist node which has id1 and whenever I click on this I'm able to see this node which has id1 which belongs to somebody else and I should not be able to see that we need to restrict this from this show to restrict this we're going to add an if statement right here if note user ID does not equal to request user ID D we are going to call abort with 403 so which means that I'm going to show forbidden error now if I reload this I see forbidden so this means that if the node doesn't belong to me then I should not be able to see that and we need this if statement when about to view um the uh notes to update it or during update or even during delete delete we need that security check in every place now let's add final touches on our um project we're going to change this dashboard into notes and let's add a little bit of CSS pings and so on so let's open layout which is the app layout um resources views layout we can actually delete this layout plate PHP we don't need this anymore okay we need this up blade PHP and and right here we have excuse me it is not up blade PHP it is a navigation blade which contains that dashboard right here so dashboard here here and here those are root names and for instead of dashboard we're going to use Ro Index right here we're going to use notes as a text if you scroll down below I think we have a second navigation which is for for responsive and here we see this dashboard note index and notes right here I'm going to save this and now we see notes right here and now let's add this small padding I'm going to open index blade and let's add pting Y2 for example save this and we have this ping if I click on view we're going to open show blade and first of all let's give this H1 text 3 Excel 3 Excel and maybe ping y4 to create some vertical ping this is more like it when we click on edit we need to go into edit blade and we need to give this text three Excel pting y4 so here we go and I think that's that's it let's check the pagination side I scroll down below uh actually I'm going to log in with a second user who has more items this is test let login if I scroll down below here here's the pagination and we probably need to give it some sort of div with pting of six maybe and put this pagination inside there okay and the pagination obviously works and now this is styled um using tan CSS and that's why it looks nice and the last thing what I'm going to explain is that to customize this forbidden error message so if the test user is trying to access the node 103 which belongs to user zura he sees this uh forbidden okay which we can easily customize for this we need to create new file under views inside views let's create errors folder and inside errors folder we're going to create the file with the corresponding status code in this case 403 blade PHP inside there we can use EX app layout and then maybe inside H1 we can write forbidden once this file is created if we just reload we're going to see this our own a custom error message obviously you need to define something which is more nice and more descriptive than this is this is the end of the course and I hope you learned something new please let me know in the comment section what you think if you if you like the video hit the like button if you want to see more LEL related content courses or projects hit the Subscribe button liking the video and subscribe is the best support but if you want to do even more you can check my website the cool.com and consider buying my premium course or maybe even consider becoming a patreon check the videos what you see on the screen right now for more Lal related content thanks for your time and I will see you in the next video