Laravel From Scratch | 4+ Hour Course

hey what's going on guys so my initial plan was to create a laravel crash course about an hour hour and a half but i ended up doing a project that took a lot more time than that so this will be a free four hour course slash project and we're going to be building a job listing application from scratch using laravel 9 in mysql so laravel is a php framework it's honestly one of if not my favorite framework it just includes so much and makes it easy to do just about anything and we will stop and and look at things outside of the scope of the project that we'll be building just so i can kind of show you how things work um now i know that these days it's all about quick content you know youtube shorts and tick tock and so on that's definitely not my style so when you watch something like this i would suggest that you sit down in a quiet place and code along with me and actually build something and immerse yourself into learning and this might take you a week it might take you a month or even longer and that's absolutely fine you know if you get stuck just stop and search google search stack overflow find answers in the comments just don't give up and this project will give you a really great foundation in php and laravel web development and i'll give you a quick demo of the of the final project and then we'll go ahead and get started and i hope you guys enjoy [Music] this laravel crash course is sponsored by lenode the node is one of the most reputable cloud companies and can be used for almost any type of project many cloud hosting companies can get really expensive really quick and one of the great things about lenode is their monthly caps which keeps your bill predictable for example the base plan is three cents per hour with a monthly cap of twenty dollars so you don't end up racking up all these unexpected charges their control panel makes it easy to deploy and manage your projects you have complete freedom to install anything you want you can customize your production environment and also get 24 7 email and phone support so if you want to try the node absolutely free i'm giving out a link with dollar 60-day credit you can visit lenode.com traversie or click the link in the description all right so i just want to give you a quick demo of the project it's called lara giggs it's basically a pa a place to post laravel gigs or jobs listings whatever you want to call them and as you can see we have registration and login so user authentication will be implementing this after and all of our forms have validation as you can see and then we have this hero image which will just uh our hero area where it just takes us to the register page and then we can filter listings as well so basically we have tags that we can add and if i click on one of these like view then it's going to show me all the listings that have the view tag and then we have a filter search here or an input where we can search for whatever we want so we'll say like senior and then anything that has senior in that either the title the description or the tags is going to show up here all right we're also going to implement pagination as you can see here which is pretty easy with laravel um the theme that you're looking at like the design i have that in the github repo so here you'll see lara giggs theme this is all the html files okay so in at some points we're going to just grab some of the html from here and bring it over and we're using tailwind so it's just classes there's no custom css or anything like that now as far as the single listings if i click on this you'll see the image the actually let's use a better example because we will be creating what's called a factory to that will allow us to seed listings so all of these with like the weird names we just simply run a command and it puts those in our database just for development um but let's look at like this listing here so we have an image we have the position we have the company name the tags the location the description and then you also enter the contact email for this button and then the website or application url for this button here okay so that's a single listing now if i go to post a job i have to log in because you do have to be authenticated in order to post listings okay so i do that i'll see this you are logged in which will disappear we're going to be using something called alpine.js to do that to have that interactive type functionality and then up here you'll see it says welcome and then our name we have a manage listings if i click on that it shows us all of our gigs or listings and from here we can edit them okay we have file upload as well and if we go back we can also delete all right so let's just create a post now that i'm logged in we'll just call this test test listing and we'll say laravel developer and location contact email uh url let's just do like we'll just say acme and then we have these tags which are comma separated values and then a logo so i'll just grab the acme logo and then description we'll just say the job description and click create gig we get a message up here listing created successfully and you can see our new listing all right if i go to my manage listings page you'll see that down here i can edit it and i can also delete it all right now go ahead and log out we get our flash message so the functionality is pretty simple overall but this is going to give you a really great foundation into building laravel projects where you'll learn how to do authentication and you know crud functionality filtering pagination creating database seeders and all that we will be using mysql for our database but if you don't want to install mysql and get that set up you could use something like like sqlite so it's up to you um again we're gonna kind of take things slow and really learn how things work so hopefully you guys enjoy this and let's get started all right guys so the very first thing we need to do is get set up so we can run laravel on our local machine so you need a development environment now this is one of the tough things about making laravel tutorials because i'm someone that always likes to start from absolute scratch and it's tough to do that with laravel because there's so many different ways to get set up and it can be different on you know if you're on windows or if you're on mac so it can be tough so what i'm doing what i'm using is something called laravel valet which is as you can see here it's a development environment for mac os minimalists and it basically just allows you to um declare a certain directory as your for your projects for your lateral projects and then you get a local domain like whatever my website dot test and that will you know that will be your laravel site or your local site but again it's only for mac you can't use it on windows so for windows what i usually recommend for beginners is xampp or xampp and this gives you apache which is a web server it gives you php mysql which we will be using in this course php my admin so it just it's one installation and it gives you a complete environment and it's great on windows on mac i usually run into issues i mean it could just be me i don't know but uh i usually wouldn't suggest it for mac users but again for windows it's it's pretty good now i do have a gist i have links to gis in the description i have one for to get set up with valet on a mac so it just takes you through the steps install homebrew install php you need to install composer and then valet then the laravel installer and then you can simply run laravel new and then your project name i also have a gist for zamp and this is for windows and mac so install xampp install composer and then you need to set up what's called the virtual host and you do that with in these specific files for both mac and windows alright so i mean it's up to you on what you want to use there's also a project called homestead which is actually a vagrant box so it's a virtual machine it includes all this different software this is a really good option once you really know what you're doing but i don't think it's good for beginners so if you're just getting started with with laravel and with you know apache and nginx servers and all that i wouldn't really suggest homestead um but it's up to you and then i also have a link in the description to this mysql cheat sheet because we will be dealing with a mysql database later on okay and if you use xampp then you get that mysql installed uh with the with the suite the software suite all right so for me i'm going to go ahead and get started by i'm just in my sites directory here and i have valet already installed and i i don't think i have the laravel installer set up so i'm going to just run composer global require laravel slash installer all right actually i think i did have it installed all right so now i should be able to just run laravel new and then what do i want to call this the app name is lara giggs so i'll just call it that and that's going to get me set up here and i'm just going to go back to the to the gist here for valet so i ran that now since i'm using valet i want to run valet park and that will then give me a um a local domain of lara giggs.test because i called the project lara giggs and then i should be all set so valet is is really great but unfortunately it's only for mac so let's run valet park okay and now let's see ls sites and i have this lara giggs folder i should now be able to close all this up now all right so i should be able to go to http lara giggs dot test and there we go so i have my laravel project set up and i want to open up my my text editor in that lara giggs so let's cd into lara giggs and i'm going to run code dot and that's going to open up vs code and you can see i have all my laravel and files and folders on the side here all right so regardless of how you get set up just get laravel running on your local machine open up your text editor it doesn't have to be bvs code and we should be good to go so let's actually make this a little smaller here now if you're coming from a minimalistic framework like node.js express or python flask something like that this is going to be pretty overwhelming there's a lot of files and folders here but the reason for that is because laravel is very very full feature there's a lot to it so obviously there's going to be a lot of stuff now there's a lot here that you don't actually need to understand at the moment you know at this time when you're getting started so i will focus on the things you do need to know in some cases i'm going to kind of take the long way to do something just so you can understand you know what's kind of what's going on understand the big picture for instance when we get to models i'm not going to just go right into using artisan which is a command line tool to generate our model uh our eloquent model which is an orm and don't let these words scare you i'm going to get into what they are later but what i'm going to do is manually create a model first so you can see you know how we can how we can add uh methods to it and then bring it into the controller or to the to the to the route however we're doing it so in some areas you might be like well why are we doing it this way this takes forever it's just to get you to learn uh like i said the bigger picture and what's going on kind of under the hood all right so i just wanted to mention that just in case at any time you guys feel like that uh this isn't something that i just want to breeze through and you don't know what the hell's going on you're just typing in commands and things just happen um i want to kind of dig in a little bit all right so we're going to start off well first of all what we're seeing here is a view okay so laravel has views and i'm going to get to those a little later after we after we look at routing but the the views are located in this resources folder and then views and you can see there's one view here and it's a blade template blade is a template engine that laravel uses it's great it really cleans things up we'll we'll be really digging into it but you can see it's called welcome.blade.php so every blade template is going to have this blade.php and if we want to change something like let's just search for documentation because that's what we have right here and if i change that to let's just change it to docs if i save that and reload you're going to see that that changes here now this welcome view is going to get completely blown away so don't really worry about this just yet but i want to start with routing so if we go into routes you can see there's a couple files here this web.php is this is what we're going to be working in for the most part when it comes to routes because this is where we load all of our views or controllers which we're going to get to later on if you're creating an api like a back end json api then you would probably be using this api.php and i'll show you a little bit how that works but this is not we're not creating it in api i actually do have a complete laravel 8 api project where we use sanctum which is an authentication library i do have that on my channel if you're interested so let's take a look at the one route we have here so we have this route class which is being brought in up here now a lot of times you're going to see like this illuminate these are just the name spaces that laravel uses if you want to see like exactly what this route is on vs code you can just hold control or command and click on it and it'll actually take you to that class okay if you want to learn more about it you know like this is a class it called route it extends this facade if i click on that i can check that out and you're not expected to know like what any of this stuff does or what it is it's all there to help you now that's being brought in and we can use this route class to call a method called get now i'm assuming that you have some basic knowledge of http you know get requests post put delete etc so we can use any http method here so in this case we're handling a get request and it's going to this is going to take in two things the first is going to be the endpoint that we want to listen for in this case it's just the root just slash and then it takes in a closure which is just a function all right so if you have used like express js before this is pretty similar to how you would you know deal with that and you can actually pass in a request and response object here as well but basically we're just saying a get request to slash we're going to return the view of welcome so that's the welcome view that i just showed you in the resources views welcome.blade.php so we just we don't put on the dotblade.php we just put the name so that's how you can load a view now it doesn't you don't have to load a view you can do a lot of things from creating a route so i'm just going to create a new one let's say get and let's say we want to we want this to be for slash hello all right then we'll add our closure which is simply a function and in here let's say i want to return i'll just return a string of hello world and the stuff i'm doing right now we're not going to keep it's just for learning purposes i would suggest that you just follow along i think that's the best way to learn but you don't have to at this point um so now let's go to slash hello and we should just see our hello world all right so you can you can directly return a string or number or anything like that but there is a response helper that we could use so we can wrap this in response and what this takes in and we can actually click through and see it takes in the content which in our case is just a string and then also the status so status which by default is going to be 200 http status of 200 means everything's okay and then you can you can also add headers all right so let's just go ahead and run that and we can actually wrap this hello world we could put html in here directly so if we do that it should render the html and if we open the network tab and let's just reload that and you can see the file here if we look at the headers you can see it's a get request 200 response and if we go down here you'll see the content type is text slash html now this response remember it takes in the content and it takes in a status by default is 200. if i wanted to make it 404 i could do that and reload and now you can see i get a status of 404 all right but we'll make it 200. now if i want to add some headers onto this i can add let's close this up i can add an arrow here i usually like to put it on the next line but we could then say header and let's say we want the content type so it's it's going to be html by default but let's say we want to make it text slash plain so if we do that and i reload you'll see that now it doesn't render the html and if we look down here in the headers the content type is text plane and then maybe you want to add some custom headers like i don't know we'll just say foo whoops let's say header and then we could do foo and for the value bar and if we come back over here and we look in headers we now have this foo bar so you can have any custom header values that you want all right so let's um let's look at wild cards now so i'm gonna actually create a new route because a lot of times you'll need to pass in like an id or something like that so for instance you might have post slash and then some kind of id like 10. so i'm going to create another route here let's say route get and what we would do is we would say slash post slash and then we'd use what's called the wild card and that's just curly braces and then whatever that param is so in this case an id and then we would have our closure our function and we would pass in a variable with the same name so id and then i could do like let's say return response and we'll say post and then i'll just concatenate on to here the id all right and i need my semicolon so let's go ahead and try that we'll go to post 10 and you'll see it's gonna it's gonna output the 10 that id it's getting passed in as a wild card now we can also add constraints on here usually if it's an id well not usually i shouldn't say that but in a lot of cases it's only going to be numbers so maybe you don't want to be able to pass you know letters or symbols so what we could do is add a constraint onto this by saying where and we can do where the id and then we could put any regular expression that we want in here so for instance let's say we just want from zero you know numbers from zero to nine that's all we want to accept so now if i save that and i reload this we get a 404 not found because this doesn't match the constraints so if i do a number you know 12 then that's gonna work okay so we have that functionality just built right in now there's uh when it comes to debugging and showing values etc there's some helper methods that we can use so one is dd so it's i think it's what is it die die and dump so let's say i want to show the what the id is this will stop everything and show me that whatever i pass in in this case is the id of 12 and it's actually going to be a 500 status because it's not gonna you know it's not going to do anything past that so there's that and then there's also die dump and debug which is you know ddd so if i do that and we reload that actually gives us quite a bit of information so if we look down here it shows us the code it shows us where we shows us the break point where we called the the ddd shows us the entire request any cookies or session values body so if you submit a form we'll see the body um you know version what is this laravel versions things like that um route parameters so here's the id of 12. so dd and ddd are very helpful functions when it comes to just debugging and seeing what things are so we'll be using usually dd i use i don't usually use this unless i have to um but yeah so that's available and now what i want to show you is sometimes we have a value like let's say or let's say we have a route like search and then we have a query string of maybe name so we'll say name equals brad and we can have another one with ampersand we'll say i don't know city city equals boston all right i'm not going to run this just yet but if we have something like this we can get these values through the request so i'm going to just create another route here let's say route get and we want this to be slash search and then we have our function all right now i can pass in here like i said before request response so let's say request and then the name of the variable which is going to be request now to bring this in this request right here has to be brought in and i should have mentioned this earlier but there's a couple vs code extensions that i would recommend so the first one is laravel blade snippets i would definitely recommend that you install this when we get to blade templating it's going to give you highlighting and all that stuff and then also i have this php namespace resolver right here this is very helpful because with laravel you have to import a lot of different there's a lot of different parts of the framework you need to bring in sometimes you don't always know what to bring in but since i have that php name resolver this request right here i can just right click and i can say import class now it's going to show me there's a couple different request classes so sometimes you do need to know which one you're using in this case it's going to be this one here illuminate http requests so if i click that it says the class is imported and you can see it's brought in up here so it saves me from having to know exactly what to bring in and to have to go up and type it so php name resolver i would definitely recommend and as well as php intellifence that's another good extension just for php in general all right so now we have this request object and we could do a dd let's do dd request and that should show us what is in that so if i come over here and let's reload oh shoot i didn't want to reload i wanted to run the search so let's say search name equals brad and the city equals boston all right so now this is showing us uh what the what is in this request object with which is a lot of different things right so for instance if we look at like there's files so if you if you upload files which we'll be doing later cookies headers and you can extend this open like that you can see all the different headers so for these values like the name and city that's going to be in this query right here so query and then parameters and you can see we have name and city okay so if i wanted to access those values directly which you're probably going to want to we can just simply do request name and let's actually yeah we'll do us we'll put a space here let's concatenate that put a space and then we'll do request and city so i'll go ahead and reload and we should see brad boston it doesn't we don't have to do it in this dd we could just simply return that so if i do that all right and you could use those values for for whatever you want all right so i think that we spent enough time just looking at basic routing at least in the web file i do want to show you if we open up api.php this is what you're going to be using if you're building an api so let's create a route here and they're created the same just route we'll do a get request and in here let's do slash posts and then we'll have our function and in this case we're going to want to return json right for building an api so let's say return and then we can use that response helper so response but we can do this we can say we can put an arrow and then jason and here we'll pass in an array and let's say we'll do posts and we want this to point to an array and then each item is going to have brackets around it as well we could say title and just say i don't know post one something like that now since this is in the api.php we have to actually prefix the the route so slash post we're gonna prefix with slash api so slash api slash posts and that will automatically hit this and then you can see we get jason back so if i go to let's reload this and you'll see that we get a content type of application slash json so we pass in a php array and a multi-dimensional array and we're gonna it's gonna get parsed as json and this is how you would create an api all right so none of this stuff we need if you want to keep this for you for reference or whatever you can but i'm going to just get rid of it because actually just yeah i'm just going to get rid of all that and then here yeah we don't need any of this stuff either so we'll just get rid of that and we'll go back to the home page okay so now what i want to do is get started on our application and again i'm going to take it kind of slow and do things the the long way just so you understand exactly what's going on so we have a right now we have a view right resources views of welcome dot blade so we can just clear everything out of here and for now let's just do an h1 and we'll just say listings here so i'm going to save that and i'm going to rename this from welcome i'm actually not even going to use a blade template yet so we'll just call this listings.php because your views don't actually have to be blade templates they will be for the most part but they don't have to be so now in our routes let's come down here we should be able to just return the view of listings all right and that's going to be the home page so if i reload we just see listings now in most cases you're going to want to pass data into your view right and ultimately that's going to come from a database it's going to go through a model but for now just to show you how to pass the data we can pass in a second argument here of an array and then whatever values we want so let's say we want a heading and the value for that will just say i don't know latest latest listings now a listing is a gig the name of the project is lara giggs but instead of using gig as the resource within our code i'm going to i'm going to use listing if you want you can use gigs or jobs or whatever but the resource i'm going to be using is listings all right so i'm going to save that and then in listings.php i should be able to get that i can say php echo and then i should have a listings variable so if we come over here and reload oh never mind it's heading i passed in a value of heading sorry all right so now we get latest listings now as far as the data like i said ultimately that will come from a database but let's pass in here now now we'll have a variable called listings and let's make that an array of listings so the first one let's say i'm not going to put all the fields we're going to use we'll just have like an id and let's do a title so for that we'll just say listing 1 and then we'll have a description oops we'll have a description and i'm just gonna grab some dummy text for now so let's see where is it let me just grab that and paste that in all right and then we'll have one more so this right here i'm just going to copy that down let's make sure we put a comma here and then we'll just change the id to 2 and the title will be listing 2. so now we're passing this this array into our view and i want to show each listing so what we could do is a four each so i could say four each and let's say for each listings as listing and we go like that and then we want to php end for each and then in here we'll do an h2 and that's where we'll go ahead and php echo and it's going to be listing and since it's an array we want to do this so we want the title and then let's do a paragraph and we'll do php echo and let's get the listing whoops later on we'll be dealing with collections so it'll be this syntax but for now it'll be like this all right so and that okay so if i come over here and i reload now we see listing one and listing two so now what i want to do is is change this listing template or view to a blade view or a blade template so i'm going to rename this so now it's going to be listings.blade.php and you'll notice that it'll still work like i can still use this regular regular old php syntax but since we're using blade we can clean it up quite a bit and one of the common uh common i guess negatives of php is it can be kind of an ugly language you know with all the tags so instead of like php echo we can now clean this up and just use curly braces around this and that will output that variable so if i go ahead and reload we get the same thing it's still showing us that heading so it's similar to the syntax of jsx or an angular or view template and it really cleans things up now we also have something called directives where we can use loops and conditionals and all types of stuff so there's a for each directive so we can get rid of that and directives are going to start with the at symbol we can also get rid of that and then down here get rid of that and the php tag and just put our at symbol here again if we reload that's going to show us the same thing and then here we can also clean this up by getting rid of that and this one as well let's get rid of that and use our curly braces here and here okay so that gives us the same result and it looks much better now there's uh just a lot of different directives you can use with blade i'm not going to go over all of them if you want you can look at the documentation we even have a php directive so we could do at php and then end it down here and nphp and then you could do whatever you want in here so for instance actually let's just set like test we'll say test equals one and then outside here i should be able to use that test variable and you can see now i get one all right so and that's useful for like filtering things like that if you can't if it's something you can't do in your controller or within your route then you could do it directly in your view now there are conditionals we can use so let's say if we have no listings we just want to show a paragraph that says no listings so we could do our if statement and i'm going to say if count of listings we'll say if that is equal to zero then let's go down here and we'll end this so it's just going to be end if so if that's true then let's say no no listings found all right and then what we'll do is come over here and i'll just temporarily empty this array like that and then if i reload we get no listings found now there's another way to do this and that's using the unless directive so it's really up to you it's all preference on how you want to do this but we could do unless so we'll say unless count listings is equal to zero then we're going to do our four each and then we could have an else and and of course with your if statements you can have an else as well and then we want to end the unless and then in here we'll do our paragraph and say no listings found maybe space that okay so if we reload we get the same same result but i'm going to put those listings back and now we're going to see those now at the moment we have the data just hard-coded right here in our route and usually this your data is going to come through what's called a model and in laravel we have something called eloquent which is an orm an object relational mapper and it gives us a very um eloquent way to deal with our database so we can do like the model name such as listing and then find or find all or whatever and we have all all types of filtering and sorting available to us and to create an eloquent model in your terminal i'm not don't run this right now but we could just do php artisan which is the command line tool to do a lot of different things but one of them is make we could say make model listing all right and that would create put a model file called listing with some with just a basic class but it'll have access to all the eloquent stuff now before we get into that i'd like to just manually create a model so in app so there's an app folder and you'll see models there's already a user model here because laravel again it's a very full-featured framework and you get user functionality right out of the box when you run your migrations it'll automatically create a user table which we'll get into later but right now let's just create a listing dot php file here and that's the convention is just a singular name of the resource all right and then we want a namespace so that we can access it from other files as you can see here the user model uses uh app slash models so we'll do the same thing let's say php and let's say namespace app models and then we're just going to create a class with the same name so class listing and then let's create a function we're going to create a public static function and we'll call it all because we want this to get all listings and then obviously i mean this would come from a database but just for now let's go ahead and return and i'm going to grab from this file here i'm going to grab this and let's return that put a semicolon there all right so now we have this method of all that returns these listings so to get this let's actually get rid of that and then we want to bring in our model so remember the namespace we used was app slash models and then slash listing and then down here we should be able to use the listing model and to use the method the all method we're going to use double colon because it's a static method so this is the php syntax and we want to get uh all all right so we'll go ahead and save that and if i reload again we should see the same thing all right so but but now we have our data is coming from our model so now let's go back into our model let's create a function to just fetch a single listing so come down here and let's say public static function and we'll call this one find and it's going to take in an id because we want to find it by its id and again when we use eloquent it's it's going to be a lot easier than this we don't have to you don't even have to write code to to find a listing because it's all you already have an eloquent method but for us for now let's just say listings we want to get all the listings first which we can get from the method right above the al all method so i could use self so when you have a class and you want to call another method or property you can use self in a static function here or to call a static function and let's say self all so that'll get all the listings then we're going to loop through the listings so we'll say as listing all right and then what we want to do is get the one with the id that's passed in so we'll say if the current listing the current listings id is equal to the id that's passed in to find then of course that's the one we want so we'll return that listing all right now let's use this in our routes file we'll create a new route let's just say single listing and let's add a comment here and we'll say all listings all right and if you want you can at any time you know like right now you could pause the video and going by what we just did you can try to create this route yourself and get the the single listing showing but basically we want to create a route and let's do slash listings slash and remember i showed you how to use a wild card because now we're passing in an id right and then we're going to say function and that's going to take in an id okay and then let's return a view now we don't have a listing a single listing view yet but we'll create it so we'll say listing and then we want to pass in an array that has a listing value and that value is going to come from the listing model and then find and we're going to pass in the id semicolon there all right uh let's see what am i missing here semicolon okay now let's create our route so in views we're going to create i'm sorry create our view let's call it listing singular.blade.php and then for now um what we could do is just copy from listings exactly what we have within the for each and here let's paste that in and save and now we should be able to go to listing slash and then the id but let's actually in the listings we'll make the heading a link so let's say a and we'll set that to slash slash and then the listing id right yeah like that and we'll end that a tag and then we want to wrap that around okay so it's going to go to listing slash and then whatever that current id is so let's save that reload now these are links if i click one and let's just look at the url so it's listings slash one if i click on this one it's listing slash two okay so i think next we should set up our database now i'm going to be using mysql so there's a few different ways to get that set up if you're using xampp or xampp then you already have it installed on your machine if you want to install it separately if you're on windows you could go to mysql.com and just pull this out and you can go to downloads and then you want the community so community downloads and you can download the installer for windows okay that's if you're using windows and you're not using xampp and you want to install it separately all right now if you're using mac then you can install it with homebrew like you can just say brew install mysql and that's what i did so i already have it installed and basically we're going to want to create a database but before we do that i just want to show you if you don't want to use mysql if you can't get it set up or something like that you can use sqlite and that's basically just creating a file so if we go to config and you go to database.php this is where you define the database you're using right here this this connection so it's mysql by default but if you go down here you have options for sqlite you have options for postgres for sql server so you can use any of these excuse me if you do want to use sqlite where you don't have to actually install anything on your system you can just change this to sqlite and then what you would do is in the database directory you would create a new file called database.sqlite okay like that i'm not going to do that so i'm going to delete it but i just want to show you you can do that and then all you would have to do is then go to your environment variables so your dot env and then right here no not there right here where it says db database you would put in your you know your database dot sql lite and you don't need a username and password now for me since i'm using mysql i do need to set up my database and i need to enter these these values all right so as i said i already have it on my system so i'm going to come over here and i'm just going to log in for now as my root user so say root and i don't actually have a password for my root user but i want to create a new user let me just clear this all right so i want to create a new user and i have a mysql cheat sheet i'm going to put that link in the description if you guys want to use this and it's pretty much everything i mean to show my users i could run this so that shows i have you know my root user but what i want to do is create a new one so i'm going to grab this and i'm just going to change so this will be whatever password i want to use i'll just use password and then let's see so some user i'm going to change that to brad so we'll create the user now we want to grant privileges for that user so we would run this so let's pass that in and just change the user name here to brad or whatever you used so basically granting all privileges for everything then we just want to run this flush privileges and you can create users from phpmyadmin or if you want to use some other program as well so i'm going to clear that up actually i'm going to exit out because i want to now excuse me i want to log in with the brad user so i'll say mysql mysql dash u i want to log in as brad with a password and my password okay so now i'm logged in as brad so let's create a new database and if you look down here it shows you how to do that so create database i'm going to call it lara giggs yeah create database lara giggs and that's it we don't have to create tables or columns or anything like that because with laravel we have something called migrations which are just files that we can run that will do all that stuff for us all right so if i say show databases we should see lara gigs okay and then the the credentials for my database i'm going to put in here i already have lara gigs as the database username for me is going to be brad and password is going to be password all right so we should be all set up for um for mysql so let me let's just exit out of here and we should be good now like i said i think i said it we don't have to set up any tables or columns or anything like that with mysql itself you know through the command line or through phpmyadmin or anything like that because we could do it through laravel with what are called migrations so i'm just going to close this stuff up for now and if you look in the database folder let's close that up if you look in database you'll see a folder called migrations and there's already some stuff in here so if you look at the the name of the files you can kind of tell what they do so create users table create password resets table create failed jobs table create personal access tokens so if we look at the create users table which is here by default it's going to be a class so all migrations are a class that have an up method and a down method so up in this case you can see it's going to create a user schema and a user's table and it's going to include all these fields an id a name an email a timestamp a password so it'll create all of these columns for us all right if we if we roll back the migration it'll run this excuse me it'll run this down method which will just drop the users table so basically you know how it was before the migration ran now this is going to run when we run my php artisan migrate and it will create a user's table and if you wanted to like maybe you want a username field you could go ahead and add that in here or whatever fields you want in the users table but what we want to do is create a migration for our listings now we don't have to manually create it we can use artisans so let's open up let's open up a terminal here and what we want to do is run php artisan make colon migration and we're going to call this create underscore listings underscore table okay so let's run that and then you'll see it'll actually create that file so let's go ahead and open that up so right here create listings table and by default we're going to have our class and the up and down method now it will create the listings table and right now we just will have an id and timestamps and obviously we want more than that so let's go ahead and add the fields we're going to want so we can just say table and then the type so let's say string and oops we're going to want a listing a title for our listing so let's say title all right and then we're going to copy this down a bunch of times and we want in addition to title we're going to want tags we're going to want the company name so company we're going to want location and these are all strings so we can leave it at table string and email so that's going to be the contact email website maybe they have an application on their website and description now description is going to be longer so instead of string we're going to use long text for that that'll allow for more characters and also later on we're going to add to this we're going to add a logo field which is going to be the location of an image because we will have the functionality to upload images or upload a logo to a gig or a listing but this is all we need for now so let's save it and now if we open up our terminal here the way that we can because nothing has been done to the database yet right there's no tables added nothing we need to actually run the migrate command to do that and when we run migrate it's going to run all the migrations that are in that folder including the users table including the listings all that so let's go ahead and try it so php artisan and we're going to run migrate okay so no errors that's good let's uh i'm going to check it now you can open up like phpmyadmin i'm going to use workbench in a few minutes but we can check it through here as well so let's say let's see mysql i want to open i want to use the user brad and enter my password okay and let's say i'm going to say use and then the name of my database which is lara giggs all right and then i'm going to say show let's say show tables okay so now we can see all the tables including users including all this other stuff that came with laravel and our listings table all right and obviously there's nothing there i mean we could say select you could say select all from listings and it's empty of course but we know that the migration worked out so let's exit that now we should probably talk about seeding data and factories because that's how we can quickly get stuff in the database just to test things with so if we look in the database folder there's a seeders folder and there's this database seeder file so this will run if we run php artisan db colon seed and by default so you see there's this run method and by default there's this factory this users factory and what this will do if we uncomment this if we run this it'll actually create 10 dummy users okay using the user factory where this comes from is in factories you'll see a userfactory.php it creates the users with something called faker which is a library to just create fake names emails you could see this is a hashed password you can use now for like the current time you can use different string methods and stuff so it'll actually use this to create users and we can pass in a number of users we want created so let's just try this out we're going to uncomment this and save it and then we'll come down here and let's run let's run php artisan and then db colon seed so it says seeding completed successfully and if i check my database now i could log in but i'm actually going to open up mysql workbench and you can download this from mysql.com it's absolutely free so let's see i'm actually going to create let's do um i actually haven't used this in a long time let's create a new connection and i'm going to call this lara giggs and then let's see the user i'm going to use my brad user that i created and then for password put my password in there okay and let's try to connect okay so if i click on this it's going to open up an interface like this and if we click on schemas we should see lara giggs and we have tables and you can see all the tables users and all that so let's look at users and let's see to actually see the data we can click on this little icon and now you see we have 10 different users they have an id a name and email and a password which is hashed i can't i want to make this bigger so you guys can see it but i'm not sure how yeah it doesn't really matter i mean you could use mysql workbench you can use the terminal you can use phpmyadmin just check it out and see if you have those users if it ran successfully chances are that they were um that they are there now if you're using sqlite there are programs that you can use i think there's even a vs code extension where you can see the data in your sqlite database so you can you can use that if you want um what's the one i use i think it's sqlite explorer or something like that but anyway so what i'd like to do is be able to seed some listings okay we don't even need these users now to get rid of these users to basically uh to refresh the database i could comment this back out and actually we don't even have to comment it out but let's run php and we want to run migrate uh migrate colon refresh so if i do that whoops sorry php artisan migrate refresh now that's going to just run the migrations again and this should be cleared out so if i refresh this somehow how do i refresh this let's say refresh all and click that again and now you can see there's no users in the database all right so anytime you want to refresh you can do that now you can also refresh and run the seeder and you can do that by i'm actually going to uncomment this you can do that by the same command we just did migrate refresh but then you can do dash dash seed and it will refresh and seed so if i go ahead and refresh this again and click this icon now there's 10 more users now i'd like to make it so that we can seed some listings however the model we have we don't want to keep this model we want an eloquent model which will have a whole bunch of methods like this like all and find and so on so what we're going to do is just completely delete this listing this model of listing and then we're going to create a model with php artisan so let's say artisan make colon model and we want to call it listing and you'll see if we run that it creates a listing.php now this class itself doesn't have anything in it it doesn't have any methods but it extends model okay so we have if you look at the side here look how big this file is so we have all of these uh you know all these methods that do all kinds of things and we don't have to really touch this file much i mean when we add relationships and stuff this this there's a couple things to add but for the most part we don't have to really do much to the model and if we come back to our site let's close the cheat sheet up if we come back here and i reload we don't get any errors or anything because if i go back to our view so our web.php there's nothing we have to change here all is actually part of eloquent so we can actually click on it and you'll see that it actually gets all the queries all right so really cool so if we did have listings in the database they would they would show here because all and find are both valid um you know valid methods so let's now go back to our database folder here and in the seeders i'm going to show you first how we can just add some some static data with our seeder and then i'm going to show you how we can actually create a listing factory and use faker much like the the user does now i have a file called data.php which i'm going to just put in the root here and it's not going to be used by our app in any way it's just some some sample data some sample listings that we can use so i'm going to grab this first item with the brackets here just copy that and in our seeder i'm going to go under where we bring in the users and let's take the listing model and we're going to call the create method which obviously you know creates in the database that's going to take in that item that i just copied now we need to bring in the model we could do this app models user or we could just import the class okay so now you can see that the listing model is being brought in we're going to call create it's going to create this one item now i want to create two so i'm just going to grab that actually i'm not going to grab it we'll just do listing create because we're going to copy it from from that data right here data php we'll just grab the second item here and copy that and put that in there so now when we run seed it's going to create 10 users and you can change this we could do like five users and then it's going to manually create these two listings with our hard-coded data so let's try it out i'm going to come down here we're going to run the same thing migrate refresh dash dash seed make sure you do the seed or it's not going to add the data so we get database seeded database seeding completed successfully so now i'm going to open up a workbench here and for this is the users right here if i refresh this we should have five users now okay so there's our five if i go to listings and let's click on the little table icon there we go so we have our laravel full stack developer or senior developer full stack engineer our tags our company so all that data is now filled in and if we go to our application now and i reload we're going to see those two listings because this is coming from the database and if i click on this it'll take me to the first one and the second one all right so pretty cool now that what i'm going to do now is is completely optional but i'm going to show you how we can create our own factory just like we have a user factory so down here in the terminal let's say php artisan and we're going to say make factory and let's call this listing yeah we'll call it listing factory okay so now if we look over here in factories we have our listing factory and it's just uh it's just gonna have this public function definition and then here we can put you know whatever fields we want and we can also use faker just like uh the user is here so we if we wanted a fake name uh an email there's there's all types of stuff that that you can use so where is it our listing factory let's see we want a title and these are just going to it's going to look weird like we're not going to get titles like this it's just going to be like dummy text laura mipsum or whatever and if you don't want to use this of course you don't have to now this uh with faker we can say this faker this faker and then i'm going to make this a sentence okay so that'll be our title and then tags tags i'm actually going to put these in just just hard code in i'll say laravel because i don't think there's a comma separated value method to create with faker so we'll just manually put those in and let's see we have our company and there's actually a company method we can use so let's say this faker and company all right and we'll just copy this down a little bit so then we also have email and there's actually a company email method that we can use just cool uh let's see website so website and there's a method called url and then what else do we have location so location and there's a city that we can generate and then description now description is going to be longer so what we can do is we can use paragraph and then what we pass in here i believe is the number of sentences in the paragraph so we'll say five and that should do it i believe that's all the fields right so title tags company location yeah now to use this we want to go into our seeder and i'm going to leave this these two here and just comment them out and again you can do this however you want if you want these to be the two that are added that's fine but i do want to show you how we can create uh you know how we can use a factory so we can say listing and factory the number of listings we want let's do we'll do six and then we should be able to just do create just like that yeah so same thing that we did up here and we'll save that and now let's run the same command the migrate refresh seed let's run that and if i come over here and reload now we have six entries okay and the title like i said this stuff is gonna look weird but it's gonna add it you know we can get six entries really quick um and then this it's only going to show the description and the title because that's all we put in the template but we'll obviously change that up so now we have a way to quickly add fields to the database and at any time we can refresh it and reseed it so let's close this stuff up alright so now that we we kind of have our model set up we have our database we have you know seeders now i think we can start to build out the site you know build out the layout now before we open up the theme and start bringing in you know all the html and and the tailwind classes and all that i first want to show you how we can create a layout because obviously when you have your html head you have your menu and stuff like that that's going to be on every page the footer that stuff is going to go in your layout and then you're going to show your views depending on what the url is inside of that layout so what we'll do now is in views let's create a layout.blade.php file and like i said we're going to deal with the theme in in a little bit in a few minutes but for now let's just put like a basic wrapper here basic uh template and i don't know we'll just say we'll say lara giggs ultimately we're gonna copy from the theme but for now let's take that and what i want to do is render let's just put an h1 here and we'll say lara giggs and i want to render my my view here right so this is where my view should output so here i want to use the yield directive so i'm going to say yield and then content okay now my views i want to extend this layout and put my view here so that all this so this stuff is all around it which would be like your style sheet anything in the head you could have your menu here as well anything you want on every page and then in the individual views let's go to listings and up here we can now say extends we want to extend the layout and then we want to wrap this in a section directive so we'll say section and the section is going to be the content so whatever this is should match this okay so both content and then we also want to end the section so and section and later on i'm going to show you how we can use components and we can actually use a we can make our layout a component which makes it easier to extend without having to do this you know but for now we'll do it this way and if i reload we should now see you can see we have a title up here and we see the h1 of lara gigs because that's what's in our layout and then let's do the same thing with the listing view so i'm going to copy those two lines and we're going to paste that in here and then we just want to end our section and now if i go to the listing view same thing we have the title so we have that layout wrapper now this part is going to be a little frustrating because we have to bring a lot of the layout a lot of the um the theme that i created into these views and into the layout so you're gonna have to copy some html and bring it in and kind of do it exact so it doesn't look screwed up so just try to bear with me so in the repo i'm going to have a folder called lara giggs theme which is going to be just the html theme it has if i open up the index html just pull this out here so this is just the html and css and it uses tailwind so there's not even any custom css all right so we have the index page each listing is going to look like this so ultimately this this right here this list of listings is going to look like this and then we have this hero we have the search bar here we have um the footer with the poster job link the post poster job or listing form the register form login form uh if we click on a single listing ultimately that's what this is going to be the single listing and then just some buttons here and yeah that's pretty much it so our layout has to have obviously the head title stuff all that and then also the header with the logo and the links the hero is going to be what we call a partial because we're just putting it on the home page and also the search we'll probably make that a component because blade does have a component feature where you can actually pass in props so for instance each of these listings will be a blade component we pass in the listing as a prop to show the data so pretty cool it's almost it's almost like working with a front-end framework so blade is is a really really cool thing to work with um and then to make it dynamic you could use something like alpine js which we're gonna get into a little bit later on so yeah that's what this is going to look like now as far as the files go here the first thing we should do let's just take this step by step so there's a couple images like the logo the this laravel logo this is a background image for the hero and then this is what i'm using when listings don't have an image will just be the laravel logo so let's go over here and you'll see there's a public folder and that's going to be our public assets so i'm going to create a folder in there called images so let's do that and then let's bring over those three logo png laravel logo and no image we're going to bring those over to public and images all right so that's the first step now these html files i'm actually going to open up this whole folder within sublime text and i'm opening it in sublime text so you know the difference you know that if i'm in sublime text i'm working within the html theme and if i'm in vs code obviously that's our project so let's see here for the layout it's ultimately that's going to have all this stuff but if we look down here we have our hero which that will be a partial then we have in the main tag we have our search form which will ultimately be a component and then this grid this div with the grid and this is going to have all the um all the items you can see item one item two it's just they're just hard-coded so i think what i want to do is let's see i think we should do the listings page first which is basically this this whole div um yeah let's take this div just just this first div right here nothing else let's go to listings yeah listings.blade and we want that to be outside of the for each and the unless actually we can replace this heading let's get rid of that and then we want to make sure we end this so under the unless let's do a slash div okay so now everything's in there now i'm going to take just the first item here so the div starts there and ends here because we just need one of these because remember where this is going to be dynamic so let's copy that and then we're going to we loop through the listings and instead of this i'm going to paste this in okay so if i were to just save this now and take a look at our project you can see it's still it's going to show six items because it's still coming from the database right for each listing which are six in our database it's gonna show this html now the title here let's change this from being hard-coded to dynamic so we have our listing and then we could do this syntax like we were doing before like listing title that should work let's try it out yeah but when we're dealing with eloquent models it actually gives us what's called a collection and with collections we can actually do this syntax with the arrow so that should work as well which i i prefer i think that looks much cleaner so that is the title this is going to be the company so let's replace this with title company okay so if we reload that we sh whoops title company what the hell is wrong with me listing company all right and these are just from the database it's the dummy data now the this right here the ul this is all the tags um i'm just gonna leave that for now because that's we're gonna have to do something different with that so just leave that as hard coded tags for now and then the location is gonna go here so this will be listing location so now we should see these dummy locations all right so that's all we have to change here for now and the reason we're not seeing it styled is because we didn't put the head with the tailwind link and all that stuff in the layout yet right the layout is just this so now let's go back in here and let's take from the very top so the doctype and let's go down to let's see we have the hero that's actually going to be a partial and this this div right here that's already in the listings so yeah all we really have to do right now is go down to the nav all right so the very top of the file down down to the nav i'm going to put that in the layout above the yield okay so we'll paste that in and then for under the yield we're going to get let's go down to the bottom here we're going to get from the h closing html and let's go up to the footer actually let's also put the main tag we actually want main wrapped around this so that'll be the ending main tag and then everything under that which is the footer down like that all right so let's save that see what we get all right cool let's make this a little bigger so we can see okay now see the reason we're not seeing the images here in the listings is because if we look in our listings blade it's trying to show acme png what i want to show is the no image png alright so if we say no dash image png now those images are going to show and they don't show on very small screens so this it's fine if you don't see them when it's smaller now there is an asset helper that we can use to show public images like this which you probably should use so we're going to wrap this let's close that up for a second we're going to wrap this in curly braces and we can say asset and then pass in the path like this so that will wrap that and then do that so that should work let's see reload all right that still works and we're going to do that for the logo which is in the layout up at the top here so the logo image right here i'm going to wrap that let's see logo.png we want to close that up let's make sure that still works and then also whoops well i was going to say the hero but we didn't put that in yet now the hero is going to be a partial right because we have the search bar we have the hero if we go back to the index html let's go up here and see so the hero section i tried to label everything nicely so you can tell where everything is but this section right here i'm going to copy that and then what we're going to do is use a partial so in the views folder we're going to create a folder called partials and inside partials we'll create a file now the the convention is to use an underscore so we're going to call this underscore dot hero.blade.php and then we can just paste that in okay we don't need the comment here so yeah we'll paste that in close it up and then i'm also going to put the search ultimately we'll probably use a component for this but for now we'll just take that search form and in partials we'll create an underscore search.blade.php paste that in save it good now the hero i only want to show on the home page which is the listings page so in listings.blade let's go right above you know we'll go right above the the div the grid div and we can say include and we want to include underscore hero or i'm sorry we want partials because it's in the partials folder dot underscore hero i believe that should work okay so now that shows there and if i go to the listing single listing okay so that's not working because it's going to show html so we just want to make sure we change this now actually it's going to be slash listings slash and then in here the listing id all right so now if i click on that that'll go to the single listing which isn't styled yet but that's fine we'll handle that after all right so yeah we have that now the search that's only going to show i want that to show on both the listings the home page and the single listing so what we'll do is go up here and let's see we have our partials coming in here let's put the search right under it so i'm also going to include i'm not putting it in the layout because i don't want these to show on every single page so this is going to be partials dot underscore search so if i reload that now we have the search here all right now i'm also going to put that on the single listing so let's go to listing and put that there and if we go to the single listing now we see the search again let me just stretch it out make sure that that oops i keep hitting the logo we should probably fix the logo link yeah because i can't get back so in the layout the logo link is index html we're going to just change that to slash so now if i click on the logo it should take us home all right cool and again let's just check it out okay i think that looks all right so we have our layout and i know this it's kind of frustrating when you're copying like a bunch of html and classes and all that but i do want this to look decent so i think next we should do the single listing formatting because right now you know if we go to listing.blade it's just this so if we open up our theme and i think we're all set with the with index html so we can close that up and let's go to show html and all we need we don't need like the search and all that it's just this div right here with mx4 and then the the a tag above it the back so let's grab the div and also the a tag okay so we'll just grab that and copy it and then paste it in here if we save that and reload it should look like that but this is all obviously it's all hard coded so we want to replace some stuff in here for the image i'm gonna use the asset helper so we'll say asset we'll wrap this images slash and let's use no image no dash image and make sure we add the ending on here and that should show the laravel logo now for the title right here let's change that to listing title let's change the company name so oops that's going to be listing company we'll leave the again leave the ul the tags for now and then the location so listing location and here we have the description so we're going to replace paragraphs here with the listing description uh subscription description jesus i can't type or spell all right and then let's see we have the male 2 here we want to just take this email right here we want to put in the contact email which is going to be listing email and then for the website let's replace this so that'll be the listing website and i think that should do it so let's save it reload and now we have it's all dynamic except for the tags here which we'll we'll get to and oh the back we should probably change that link to let's see instead of index html it's just going to go slash so reload now we should be able to click back all right so now we have all of our listings and we can go to each page good now next thing i'd like to do is actually one other thing i want to show you in the routes file since we're now using eloquent um since we're using eloquent models we can use something called route model binding now here right we have listing slash id we're passing in the id we're getting the listing by that id if i were to go to you know listing slash and then something that doesn't exist i'm going to get this error now one thing we could do if we do it this way is we could put a variable we could have a listing and we would take this cut that and put that in here right and then what we could do is check to see we'll say if listing so if listing then we'll take this and whoops wrong button we'll take this and put that in here and then set listing to listing right and then else else then we could handle this how we want we could do an abort and do 404 right so now if i come back over here and i reload now what's cool is when we use eloquent models we can use something called route model binding so instead of passing an id here i could pass in listing and in the function here we could do our we pass in our listing model and then a variable of listing and these should match this in this variable and then instead of having to do find id the listing will just be available in here so i can just pass it into the view like this and i don't have to do this check because it'll automatically have this 404 functionality so what i'll do is copy this return right here and just replace all this right so that all we have is you know uh reloading our view passing in the listing this is coming from here from this function so now if i go over here and reload we still get the 404 and if i go to a listing that actually does exist then that works okay so much cleaner now i think what we should do next is look at components so i'm going to close up the view for now i'm sorry the routes for now the single listing page and in the well we'll close the layout too but in the listings right so this page here i want each of these to be a component so we have the grid right here and then we're looping through the listings and then this here is what we're see each one of these are so i want this to be a component so what we can do is grab this div right here and let's cut that and then in the views folder we're going to create another folder called components okay and then in components let's create a new file here and we'll call this let's call it a listing dash card component so it's going to be dot blade dot php all right and then here i'm going to go ahead and and paste this in now we need access to listing right so this component is actually going to take in a prop and we define our props up here we say at props and then we can pass in here an array of props and we want the listing prop that's going to be passed in so back in our listings in this for each the way we can access that component is like this we could say x dash and then the name of the component which is listing dash card and we can end it like that now if i wanted to pass in just like a regular string i could say listing and you know i could do this however since i want to pass in a variable like that listing then to bind that to this this prop we have to add this uh this colon right here okay so if you're going to pass in a variable then you want to have this prefixed with a colon so let's go ahead and save that let's make sure our component is saved and let's reload this and you can see we get the same result now what i'd also like to do if we look in the listing card there's this div with the the background gray the border the border gray and rounded and padding six so that's this right here this gray background we also have this in some other areas on the listing page you can see it's around this whole thing and we don't have the form set up yet but those will also have that background so i think what we should do is have a card component that wraps around whatever we want so in components in that folder let's create another file and we'll just call it card dot blade dot php all right and then what we're going to do is take this div just this div right here and grab that paste that in close it now if you want a component where you know you want to wrap it and have cause because with the card we just did it it's just it's self-closing but if we want to be able to do something like this x card and wrap it and have a closing tag and then put something in it what we can do is use a slot all right so inside here we're just gonna have a variable called slot and whatever we pass in whatever we surround the tags with will be output here all right so let me show you if we go back to listing card and we replace this div here with let's say x dash card and then we want to make sure that we close it down here so let's see we have that div so this right here we want to get rid of that and we want to have our ending x card and save and we should have the same thing all right and now we should be also be able to go to our listing page so let's go over to views and then listing and right here you can see it's the same kind of thing now it does have a little more padding so i'm going to show you how we can also we can pass in extra classes if we want but let's just get rid of actually this whole thing so this div ends right here right it's a second to last div i believe yep so we have this mx4 around it so what we'll do is replace this with x dash card and down here that's already replaced for me so i'm going to save that and let's reload and we get basically the same thing the padding is a little less though now if i want to pass in a class so like for this x card if i want to do this and do p dash 10 actually let's make it a little bigger so we can actually see the difference so we'll do like p24 for now if i save and reload that's not going to do anything if we want to be able to add attributes in here and have them actually work then we need to go into the component and we need to add to this all right so on this div right here what we'll do is open up our curly braces and we're going to say attributes so we have this uh attributes variable and then we can say attributes merge and then we pass in here an array and whatever attribute we want so class and then we can set that to whatever we want which in our case is going to be this these classes here so i'm going to just copy those and then we can completely get rid of the class attribute here and then put the classes in here as this array value so now what will happen is it'll use these classes by default but it'll also merge any any other classes excuse me any other classes that we add so now if i come over here and reload it breaks let's see attributes did i misspell oh i did misspell it all right so let's try that again and now you can see we have that wide padding because in the listing i passed in uh where is it was it this no it's a listing right here because i passed in this i don't actually want it that big i just wanted to make sure that we could tell the difference so i'm going to make it p10 all right and i could pass any class that i want into this i could do like bg black into this card component and that would work all right so hopefully that makes sense and we're going to be using this this card component for like our forms and in a few places around the site so hopefully that gives you an idea of how you can use components how you can pass in props how you can use this slot if you want to surround you know surround something with the component tags so pretty cool so what i'd like to do next before we get into controllers is handle the uh tags so this on the listing page as well as the listing card component we have these tags right that's coming from here listing card well we have it in two places right we have um we have it in listing card and we have it on the single listing page this ul right here so i want to make a component for this so what i'll do is in listing card i'm going to grab that ul and i'm just going to cut that for now and then in components let's create a new file here and let's call this uh what do we want to call this let's call it listing dash tags.blade.php and we'll paste this in here now at the moment this is just a hard-coded list with just you know just laravel api back-end view we want this to come from the database and in the database we have a if we take a look let's see i'll open up mysql workbench and let's see listings if we refresh this so if we look at tags right now i mean they're all the same but they're it's a comma separated value list right so we have laravel comma api comma back end and we want to display it like this we want to display it in an unordered list so what we'll do is we'll take in the categories right or not categories the tags as props so let's say at props and that's going to take in an array and let's call the prop tags csv because that's what what it's going to get passed in it's coming from the database it's going to be a comma separated value list now i actually want to turn that into an array so i can loop through and then display it as you see here all right so basically for a list item i want to be able to loop through so i'm going to actually use my php directive so let's say nphp and we can put whatever we want in here so let's say tags we'll create a variable and then we're going to use the explode function which is going to take in as a first param where do we want to split the string we want to split it by the comma all right and what we want to pass in here as a second argument is going to be the prop so tags what is it tag csv all right so it's going to turn that comma separated value list into an array and put it into this variable so now down here let's get rid of all but one of these list items and then let's go ahead and do a for each and we're going to say for each tags as tag and let's go ahead and add the end for each and then we should be able to just switch this out and in here we're going to put the tag and then i also want to be able to click on it and filter by that tag filter the post or filter the listings by that tag so for the href here let's say slash and then we'll pass in as a query param tag and set that to whatever the tag is all right so now let's save this and then let's go to our listing card where we had that ul and now we can use our component so x dash listing dash tags and then we want to pass in here want to pass in tags csv and set that to what do we want to set that to the listing so listing and tags all right so let's save that let's check it out and there we go so now we can see laravel api backend and they're all going to have that because that's what is in the database now i also want the same thing on the single listing so right here so all we have to do is use this component in there as well so copy this go to the listing page where is it list listing right here replace this whole ul with that component and kind of split this up a little bit and that's that so if i save we come back over here and reload now these are coming from the database so we were able to clean that up quite a bit with a component and you can put you can really separate things out into components you know even like with form fields and you can really clean it up so i i really like the blade components feature so let's see we have this page pretty much all set and then we have all of these so i think the next thing i want to do is is create our controller because right now let's close up the views for now and let's open up our routes so yeah we'll just close these up so we want to go into web php and right now i mean we don't have much functionality and this heading this we should have got rid of that a long time ago we don't need that this stuff here returning the view we could keep it this way but usually you're going to have a controller for all your resources so we'll have a listing controller when we start to deal with authentication and users we'll have a user controller so that's what we're going to do let's go down to our terminal and we can use artisan to create a controller so we'll say php artisan make controller and we're going to call it listing alright so if we run that that's going to create up here in app and then in http you'll see there's a controllers folder and then there's a listing controller and it creates the class and everything for us now we're going to have some methods in here right now we're going to have let's say public we're going to say public function index okay so we wanna have index we're also gonna have public function show and the purpose of both of these so we'll just put a comment here so this is to show all listings or get and show all listings and then here will be show single listing and all we want to do here is in the in the routes file i'm going to grab this return view listings and cut that and i'm going to put that into the index and then this here i'm going to grab this and put that into the show and show is going to take in a listing so i'm going to pass in listing and then the variable name of listing and we just wanted to bring this in so i'm going to import the class the model so that it imports that up here and then let's save that now instead of having these functions here we're going to replace these with the controller so let's just grab this and delete that and we want so what we're saying here is we want this slash we want that to go to the listing controller and the index method so we can pass in here some brackets and we'll say listing controller and then the way that we do this is we do class and then we pass in the method which in this case is going to be index all right and then we want to do the same here so we want to get rid of this function and pass in some brackets and say listing controller class and then we want to pass in the method name which is going to be show and now if we save that hopefully if i reload now we get the same exact thing we just move the functionality into a controller now i want to talk a little bit about naming conventions so i'm going to paste something in here so when we have a resource like a blog post a user a listing an employee whatever that resource is there's seven common resource routes that we have routes and methods that we have to deal with those and they do specific things so we already have index and show index will show all listings show will show a single listing we also have create so that will show that will display the form on the page to create a new listing when you submit the form that will be the store that stores the new listing then you also have an edit page which will show the edit form on the page and then an update to actually update the listing so you'll submit the edit form to update and then destroy to delete the listing okay we're using listings but this could be absolutely any kind of resource so it's actually a better convention for us with our views which are let's go into resources views instead of having these called listing.blade and listings.blade what i'm going to do is create a folder called listings right and then i'm going to move the listing and listings into the listings folder so i'm going to move those and i'm going to rename the listings right so this right here listings we're going to rename that to index.blade.php and then listing which is the single listing we're going to rename that to as you probably guessed show.blade now this is going to break because in our controller we're loading the view of listings and listing which don't exist anymore so what we can do is actually say listings.index because we have it in a listings folder and then a file called index and then here this would be actually listings dot show so if we go ahead and reload now that should work so that's the the convention that you're going to see a lot of for these different these common resource control nut controllers methods and views all right now before we get into filtering because i think the the next big thing i want to do is be able to filter through the search form as well as clicking on these tags before we get to that though i want to show you another option that you can use for your layout so right now we're using in our layout we have this yield and then whenever we have a page where we want to use the layout we have to extend it and then we have this section that wraps around it so section end section a way that i like to do it that i think is easier especially if you're going to have a lot of different views a lot of pages instead of having to keep doing all this another way to do it is to have your layout be an actual component so what i mean is we can take this layout and you don't have to do this i mean if you want to put it back to how we have it that's absolutely fine there is no better or worse way but i'm going to move layout to components and instead of the yield here since it's a component remember we can do this slot so if we want to wrap you know wrap this around something so we'll put a slot here and then in the views that we want to use so in listings we have index and show instead of instead of doing this like extends and then the section and the end section we'll just wrap the layout component around that so x layout oops x dash layout and then down here x layout okay and then the same thing on the show page instead of doing the extends and section we'll just simply do x layout and down here get rid of that and x layout and now if i come over and i reload we should have the same exact thing all right so again it's just another way of doing things this way anytime you add a new view all you have to do to use the layout is wrap it in this instead of extending and all that all right just make sure that you instead of the yield you put the slot here okay so now let's close all this up um let's see i'm just going to keep this stuff here so that you guys have it for reference actually we'll put it let's put this up here because we are going to be creating all of these views and methods or routes to the routes to the method that loads the view but now what i'd like to work on is filtering so we'll start off let's start off with the tags right so if i click on one of these it takes me to i'm on the same page but now i have this this query string up here of tag and it's equal to laravel because that's what i clicked on if i click on api or backend it'll show those so i want to be able to then filter the post by only posts that have that that's that particular tag so there's quite a few ways we can do this just like with with most things um what i want to do is what's called a scope filter now first do you remember how we get this how do we get this value from here we went over it in the very beginning when we were looking at routes well we're going to go into the controller now since we have since we're working in the controller and this is the index page here that we're on but we have this query string of tag so the way that we get this let's go above the return and let's use our dd remember the die dump function and in here we want the request and there's a few ways we can do this we can use dependency injection and we can say request request like that and then let's show the request right and i believe yeah we no this is already being brought in this request so let's save that and then let's come over here and reload all right and now if we look at query right here we should have this tag and right now it's equal to laravel so that's how we can get it now there is a request helper so you actually don't have to pass this in and what we can do is just remove the money sign and it's going to be a function so we can do that let's see what that gives us so if i reload we get the same thing if we look at query we get tag laravel so it's really it's up to you if you want to do it the dependency injection or if you want to use the helper again it's preference there really is no right or wrong i mean some people might say different but there really isn't it's it's just preference so now we know how to get our request right now to get the actual tag there's a couple ways we can do it we can do it like this so if i reload you'll see that or what i'm going to do is we can just pass in tag like this and reload we get the same thing so we know we can get whatever that tag is now we want to filter the the listings by that tag and we can do that with a scope filter so in our model we actually want to create a function so let's say public public function and we're going to call this scope filter and what this is going to take in is a query so let's say query and then it's going to take in an array of filters all right now i'm not going to put anything in here just yet but what this will allow us to do just by creating this is on our listing model we'll now be able to filter and by the way instead of just doing all here we can do listing latest and then and let this latest is a function so add our parentheses and then we can do get so if i do latest get let's uh let's actually get rid of this die dump and reload it's going to do the same thing except now it's actually it's it's sorted by the latest to get the latest first and it's sorted as opposed to just uh i don't know i think all is just random order but it's basically the same thing as all it's just sorted now since i created that scope filter um what i should be able to do is add on to this and say filter like that all right and what i want to pass in here is going to be the request and then in here we want to pass in tag and that is going to get passed in as this this filters now this it has to be an array so we actually just want to wrap tag here in bracket so we're going to get an error all right and then in i'll save that and then in listing let's just close this up for the scope filter what we can do is first of all check actually i'm just going to do a die dump here real quick and pass in filters um this should be filters tag like that that should give us the tag so let's reload this and yeah we get laravel so let's actually check for this because we want to make sure this only happens if there's actually a tag so i'm going to put an if statement here and we'll use the null coalescing operator which is double question mark and say false so so what this is saying is you know if the if this is not false then move on if there is a tag then do it what is in here if not it'll just it just won't do anything so let's take that query that we have and we can say where and essentially what we're doing here is an sql like query and we want to look in the tags column in the database so we'll say tags like and we want to have a the request that comes in we want to or i should say the tag whatever this is that comes in we want it can be before or after and or anything can be before or after it and that's represented with a percent sign so we're going to put in here a percent and then we're going to concatenate in here the uh whatever the request tag is so request tag and then we just want to concatenate we want to put another percent sign after it so it's just going to search for whatever that tag is in this tags column all right and if it matches then that will get returned so let's go ahead and save that and yeah we should be all set so if i reload this now if i click on like any of these we're still going to see all the posts because right now in the database they all have these same three tags but we can test it out if we change one of those tags so i'm going to go into mysql workbench and i know this is really tiny sorry for that i just don't know how to zoom in on this so i'm going to change one of these so instead of api in the middle here and you guys probably can't see this but i'm going to change i can barely see it so i'm going to change it to view and hit enter and then let's see i'll change another one it's this one here instead of back end let's do um uh i don't know let's say engineer all right enter now i do have to click apply for that to actually stick so i'm going to click apply and then close and now that should be updated in the database so if i come back here and for now let's just get rid of the tag up here and now we should see let's see yeah we see view right here and then this one has engineer so i'm going to click on the view and you'll see we only get back this this listing because this is the only one with view all right if i click on laravel then we're going to see all of them because they all have laravel if i click on engineer then i'm only going to see this one so we're now able to filter by these tags and that was pretty damn easy as far as the amount of code that we wrote just creating this little function allowed us to add on the this filter here and we were able to just pass in pass in the query string or the param of tag coming through the you know coming through the url so pretty cool now i want to do the same thing with search so if i if i search for something here i want it i want to be able to find it if it's in the title or description or whatever so we're actually going to create another scope filter or not another scope filter but we're going to add to the current one now before we do that we have to set this form up if i put something in here now and search oh it actually does show up here because all we need is for it to show up here but let me just check the um let me just check that search form real quick so if we go to our views what do we have it in a partial yeah we have a partial right here and i mean action yeah it's just going to go to the home page and you just want to make sure i mean if you copied the the template then this should be fine but you want to make sure that it has a name because that's what is actually showing up here the name of search and it's going to be a get request by default we don't have to specify the method all right cool so i mean if we search for laravel search and then that's going to show up here so that we don't have to do anything else to that what we do have to do is in our controller this is actually going to be pretty simple as far as the controller because with this request now we can just pass in in addition to tag we can pass in search save that and now let's go into our model where we have our scope filter and we're pretty much going to do the same thing let's copy this and now on filters we should also have search okay or or we shouldn't you know if we submit the form we should have a search on it and this should be available then we want to do query where and then decide where do we want to actually search for this search term so let's say for the title so title and it's going to be a like so we'll say like request search because that's what we're matching and i do want to look in other fields as well not just the title so what we can do is add on to this i'm going to go on the next line here and let's say or where and in here let's look in the description i'm just going to actually copy this and paste that in and let's say description okay so it's going to search description for the search term and then we'll do one more or where so i'll just copy that go on the next line here paste that in and let's also we'll do the tags as well so if you type something in and it matches one of the tags and that should actually do it so let's save that let's uh just clear this out for now and then let's grab a word one of these dummy words so we have nemo here let's type that in so nemo and let's search and there we go nemo now it must be somewhere else in here too remember it searches the description so if we click in here we should see nemo somewhere in here um just search for nemo yep there it is all right so if you type something in and it matches either the title description or the tags if i search for view that should show me this one because i am searching for the tags and if you want to add another field here to search for that's absolutely fine all right so i mean i i think it's really cool how freaking easy this is if you try to do this with a minimalist framework i mean it's definitely not as easy especially when you're dealing with sql queries and stuff now another thing that i wanted to do is install something called clockwork which you can install with composer and then you also need the chrome extension so let's grab the chrome extension first so clockwork and the reason i like this is because it can show you the exact queries that are being run let's say clockwork chrome it's also available for firefox if you're using firefox all right so i actually already have it installed but if you can go ahead and install that and then we want to install it into our project with composer so let's say composer require um shoot i forget what the package is called let's just say laravel clockwork it's it's going d slash clockwork all right it's going d slash clockwork you don't have to do this it's just it's just a nice little tool all right so now i'm gonna come over here and i'm gonna open up my dev tools and let's see should i put them i'll put it on the side and then we should have a clockwork tab close that up okay so i'm just going to do a reload here and you'll see that we just we made a get request to slash it shows the controller and the method it shows the status the time it takes but it also shows that let's just make this bigger if we go to database it actually shows the query so select all from listings and the the latest get that we remember we changed the all to latest get that added this order by created at and descending now if i click on one of these one of these tags here and it filters it and if we look up here it doesn't it doesn't automatically show you when you when you load another page you have to look for it up here and click on it but notice what we're seeing now select all from listings where tags like laravel order by created ad so that like here this is that filter that's the scope filter that we created so i don't know pretty cool and i just recently learned about this this extension but it really comes in handy all right so now we have our filter going trying to figure out what i want to do next i think we're just about ready to be able to create jobs uh jobs listings gigs whatever the hell you want to call them posts but yeah i think we should probably do that next so let's close that up we'll keep the listing controller what we're going to want to do is create a new route a new controller method and a new view that's basically like the the workflow when you're gonna add a new piece of functionality so let's see let's add down here we'll say show show create form so we're gonna do actually i'll just grab one of these i'll just copy this all right so the actual route is going to be slash listings slash create okay and this is this is a common convention you always want to do you want to prefix anything that has to do with listings with listings and you don't want to mix it up like for one do listings plural and for one do singular you want to stick to listings to plural so slash create and then that's going to be the listing controller and we'll have a method called create alright so let's go to our controller now and let's say show create form and let's say public function create and all we really want to do here is simply return a view and that's going to be listings dot create all right and then we're going to go into our views and let's close that up we have our listings folder here let's create a new file and we'll call it create dot blade dot php okay so if i just uh i don't know just say create here and we come over now this button isn't going to work you can see it actually goes to create.html so we want to change that and that button is in the footer in the layout so let's go to our layout component and down here where we see post job instead of this let's have it go to slash listing slash create all right we'll come over here now and if we click that let's see that's still not working so we hit that route right so get to get requests to listing slash create it loads the listing controller create method and we have that here public function create we're returning the listings dot create view what is going on did i not save something listings create a blade huh all right i don't know what the hell is going on let me just check something real quick oh i do know what's going on so what's happening is when we go to listing slash create it's actually looking at this it creates looking at create as this so you want to make sure that this particular route is at the bottom so let's move that yeah we want to move that down okay so now let's reload that and now we see the create view so for the form we can go to our theme and there's a create.html and you don't want to copy the whole thing obviously because you don't want the parts of the layout what we do want is let's see i think we just want like the uh yeah this right here so remember this is actually the stuff that we have in our card component so this div ends right here so it's the second to last div we're gonna grab that and that's gonna be this yep so we're gonna grab that and copy it and let's go into our create view paste that in and we're just gonna instead of using this div with this class i mean we can save this and reload the reason it's not sure it doesn't have the styling is because we need to wrap this in remember we have a layout component so we just simply need to say x layout and wrap this whole thing next layout now if we come over here and reload there we go now this uh the styling here is very similar to what we have in our card remember our card component there are some extra things here like max with lg that's what's making this really narrow mx auto is pushing it to the middle mt 24 is pushing it down we have padding 10. so what i'm going to do here is uh see i'm going to just replace this div with x dash card and say class equals and yeah except rounded is already in there these are the new classes that are not currently in the card component and then down here let's make sure we have the ending yeah so that's going to be x dash card and then if i reload we should see the same thing all right cool so this form that we have can i make this smaller yeah so this form that we have we want this to submit to the store remember in our routes here create shows the form but stores is the function and the route that will actually store the listing so whenever you have a form you definitely want to make sure that every field has a name for one thing because that's how we can access the the data in the form so we have name company we have name title etc and this action right here we want this to submit to slash listings but we want it to be a post request all right so form we want to set the method equal to post now with laravel you have a directive that you want to use anytime you have a post form you want to use this directive and it's going to be at csrf what this does is it prevents cross-site scripting attacks so it stops people from being able to to have a form on their website to submit to your endpoint all right so you definitely want to have this in fact i think you have to have it or you get an error so yeah we're going to submit this to slash listings post request so we'll save that and then let's go into our routes and we want to create our store route so i don't know just um i'll just copy this and this is going to be actually remember we want the single listing to be at the end so let's just put that down there so i don't forget so this will will say this will store listing data and remember it's a post request all we've been dealing with up to this point is get so this is actually going to be changed to post and it's going to be just slash listings so let's get rid of that and it's just going to be slash listings and then listing controller and we're going to do show not show store okay so we submit this form to this route and it's going to call the store method which now we have to create and this this workflow that i'm doing here is going to be the exact same for other resources where you have like basic crud functionality so now let's create let's say store listing data and we'll say public function store all right now store we're going to need the request so we again we could use the request method but i'm actually going to do the dependency injection here request and we need to do some validation now before we do that let's just do a let's do a die dump and in here let's pass in request so we'll say actually we're not we don't need that so we'll do request all i just want to show you something so if we actually company name we'll do traversing media um job title it doesn't matter i'm just gonna this has to be a url i believe tags do that actually the file i want to comment that out for now we're going to do the file upload later so let's just comment that out actually and then we'll just all right so if i click create you can see what we get here is an array we have our our token when we submit a form we're going to get a token we have all of our form fields as well so you can get that with request all now for validation it's really cool how laravel does this because there's very there's very minimal code that we actually have to write to to both validate and submit the data so we're going to create a variable here called form fields and or you can call it whatever you want and we're going to set that to request and then validate all right now this validate is going to take in an array we can specify what what rules we want for certain fields so let's say title and for title i want this to be required and to see all the different available rules and stuff of course you can check the documentation company so company pretty much everything is going to be required now i will actually want this to have a rule that the company has to be unique so if you have more than one rule then you can use an array so one is going to be required and then we can we also have this rule that we can use this rule class and then we want to use unique now we can pass in here the name of the table that we're using which is listings all right and then we can pass in the name of the field that this should be unique for which is going to be company okay so and and when we get to like authentication or when we get to registration of course the email should be unique if you have a username that should be unique all right location let's see location let's make that required what am i missing here rule required why do we have this error oh there we go all right location required let's see what else we got website and i mean you don't have to make everything required email so email i'm actually going to set that to we'll do required but let's also set it to email meaning it has to be formatted as an email and then let's do uh tags and let's do what else description all right so now form fields if any of these fail when we submit the form it'll actually send back an error to the view so let me just show you we're going to save this um you know what we'll do is just return let's return redirect and we're going to redirect slash just by having this this block of code here let's go back um actually we'll just reload the submission we just did and it's just telling me rule isn't found so this we actually have to bring this in so we want to import that class and it's going to be this illuminate validation rule all right so let's reload again now the form just it's just showing us the form again it didn't redirect so that means that something failed here now to show the error we can just go into our view so our create view and we can just go under each field let's go to the top here so company name we're going to go under the input and there's an error directive that we can use and then we pass in the name of the field which in this case is company and then we do an end so end error and here we can do whatever we want if this fails so what i'm going to have here is a paragraph let's do a paragraph we'll do text dash red dash 500. let's do text dash xs these are just tailwind classes and then margin top one and then inside here we'll have access to a message now we just want to do this for every field and then if that field has an error it'll show it right underneath so let's grab this let's go to this what is this the title so we just simply want to change that to title so really simple first for you know in depth pretty in-depth validation so this is location this one is website this one is what tags so tags description all right so now let's just try and submit this we'll say create gig and look at that the company field is required title is required so these messages are generated and automatically we can just output them with this and it's only it's just from from this block of code so what else do we have here like uh email so let's let's go to the where's the email do we not have an email field i don't okay looks like i'm gonna have to add that i'll actually i'll make sure that i add that to the the theme before you guys act before i upload this so in create i just want to make sure let's see go right under website or right above website and let's say or let's say contact email and we'll change uh this and this to email and of course this and then let's see i'm going to reload this if i click um create all right now if i put something in here that's not an email i'm going to get the email field must be a valid email address because i used this right here all right cool so that's validation and if it passes of course we want to create it we want to um we want to have that created in the database and that's as easy as just simply taking our model and using create and we we use create back when we did the the database seeder so we want to pass in here form fields which will contain all of the all of our data all right now once we submit this actually let's just try it out first before we deal with flash messages so we'll add something here let's just say actually let's do um let's do acme acme corp job title laravel senior developer boston email let's just do test test at test.com and we'll say acme tags say laravel mysql and i don't know and nginx and job description i'm gonna actually grab some dummy data for that yeah just throw this alarm ipsum in all right so let's click create everything should be good or not okay so this is something that we need to talk about so it says add title to fillable property to allow mass assignment now by default we have some protections where in order to add fields to the database they have to be put into they have to be massive um they've been put into a fillable property in the model so there's a couple ways we can handle this we can go to our model which uh is right here listing and we can add the fillable property so i could go right here and i could say protected and we want to call this fillable and then what we want to do is set that to an array and have any properties that we want to allow mass assignment to which is what we're doing so let's say title let's say company location what else website email description and i think that's it all right oh tags all right so let's save that and then i'm just going to reload the phone the form being submitted and now we get redirected which is a good sign if we look down here you'll see laravel senior developer if i click on it takes us to the description has all the field everything that i entered all right now any resource you create you can add this this protected fillable to if you want to be able to have forms to submit like that now there is something else you could do which is not have to worry about this at all so if i comment this out we can go to i'm just going to search for a file i think it's in the app service provider which is in app slash providers and then in this boot function right here we can actually do model and then we can say unguard all right and we have to bring that model in so let's just import that class so if we do this what we're saying is that we we're allowing the mass assignment and we no longer need to require you to add or us to add this fillable here so even though i don't have the fillable i should still i should be able to post another gig let's do stock industries job title junior developer we'll say i don't know newark new jersey website stockindustries.com [Music] uh let's say laravel epi and job description we still have that yet so let's create this and you'll see that that works all right even without the fillable because i have this i had that modeling guard now something really important to mention if you do do it this way make sure that you know exactly what's going into the database and you have it set up correctly like don't just cr don't create and then do something like uh request request all like that you know just be aware of of what is going into the database if you're going to use that on guard all right so now i want to show you how we can create what's called the flash message so once we add a new uh listing here i want to show a message that says listing created or something like that so it's called a flash message because it's actually stored in memory for one page load okay so once it shows if you reload the page or you go to a different page it's not going to show anymore it's going to be gone it's just stored a memory for that one page load and there's a couple ways we can do it so one we could use we could say session and then flash uh actually is that i believe that's how we do it i don't usually use this but i'm pretty sure we would go like that and say message and then like listing created or whatever you want the message and you would have to import this but another way we can do it is directly directly on the redirect we can just say with so we can say with and then pass in message and say listing say listing created successfully okay and this can be anything you want you might have like different types of alerts maybe you have one for errors one for successful message messages so you might put success or error but i'm just gonna use message just a general message all right now if i save that if we were to create a new listing we're not going to see anything because this just fires off the message we now need somewhere in our view to actually show it so what i'd like to do is create a component for that so in our components folder let's create a new file and we'll call it flash dash message or yeah message.blade.php all right and then what we need to do here is check for the message so we'll say if and then we have a session helper so we can say session has and then in here you would put in whatever you used i used message but you might have again success or error or something like that but i used message that's what i'm going to put here and then let's do our end if and then in here of course you can format it however you want i'm just going to have a div with the class of fixed i want it to be fixed to the top so i'm going to say fixed top dash 0 and let's do left actually i need to do left half i don't know if i can use emmett with that so i'll add that after and then i also want transform and let's do a bg laravel so that's the laravel color for the background and then text dash white and let's do uh padding on the x-axis we'll do 48 and then padding on the y so p y will do three all right so we have this div here i just want to add on to this let's see we have top zero let's also do left and say dash one half because i wanted to i wanted to be in the middle and then i want it to translate so i have to transform we can do this negative or minus translate on the x-axis and then one-half okay and this is just how i'm choosing to style it you can do whatever you'd like and then what we do in here is i'm actually going to use a paragraph and then we can say session and just passion pass in message or whatever you used all right so we have that and then we can put that inside of our layout component so let's go to components and let's go to our layout let's just put it down it doesn't really matter because it's it's position fixed so i'm just going to put it right above the body tag here so x dash flash dash message and that should do it all right so let's save that let's try it out so i'm just going to reload this page and um let's add let's see if we look at the data that i have here we'll add uh what's this wayne enterprises yeah we'll go ahead and use this so wayne enterprises say laravel developer and job location [Music] miami fl test website app let's say http s wayne what i call it wayne enterprises tags job description i'll just grab this all right so let's create gig and there we go listing created successfully now it's going to stay there until i reload the page or if i go to a different page now it's gone now i don't like that the case that it just stays there so what we can do is implement something called alpine js which is really really cool it's a it's a very minimal framework to do just simple things like if you want to click a button and have something pop up somewhere else and just have some interactive functionality but you don't want to reach for a full framework like react or view and it's awesome to work with with laravel and with blade so let's say alpine i don't know the domain alpine js.dev and all we have to do is grab this script right here and you can see an example basically you have an element and you have some state so x data that's the data they have open false and then on a button they can simply do at click and they can set open to true and then whatever whatever element has x show equals open this right here will respond to that so really really cool um and we're gonna yeah let's go ahead and put that cdn in our layout we're gonna put this right uh we'll go right above the tailwind and now we should be able to use that so back in our flash message here let's add on to so this this div right here i'm going to say x dash data and we want to set that to some curly braces and we're going to have a value of show and that's going to be set to true and basically what we want to happen is when this is initialized this message we want it to disappear after a certain amount of time excuse me so there's an attribute called x init all right so basically when this initializes i want to run set timeout so set timeout takes in a function let's close that up so i'll pass in an arrow function here and this isn't we're actually not going to pass anything in here we just want to say show is going to be equal to false all right and then it takes in a second parameter which is going to be the number of milliseconds where we want to wait until it goes away i'm going to say 3 000 which is three seconds and then we just need to add an x show onto this so x dash show and we want to set that to the show value right to this right here so after three seconds that show will turn to false and since we have x show equals that show value this will no longer show it'll disappear all right so hopefully that makes sense let's go to post a job and for the company we'll say skynet systems and job title say web developer location um let's say boston mass and then contact email test website doesn't matter description all right so i'm gonna go ahead and create the gig we see listing created successfully and there it goes okay so three seconds later it goes away and obviously you can change that if you want it to be shorter or longer you can change this value so that is flash messages so one other thing before we move on um if we posted if we try to post a job we filled some stuff in here and we get an error like if i leave some of these blank and i submit we get the error but the the data the text in here goes away so we don't want that we want the the whatever we put in the fields to stay there so let's go to our create and this is really simple laravel makes this really easy all we have to do is go to the input and we're going to put a value here so let's say value and then we're going to open up our curly braces and we can have we can have this old helper so we can say old and then pass in whatever the field is in this case company so now if i come over here and i fill in the company actually let's just reload this if i come over here and i fill in the company and we have an error now you can see the company the text stays in there alright so we just want to do this for all of these so i'm going to grab that value and on here let's paste that in we just want to change that to title and for the input i'm sorry the what is this the location oops location and let's see email so we're going to put that here and then we have the website and then we have the tags and then for the description this is a text area so we don't want to use a value we just want to go in between the text area tags and we just want that all right so now if i fill in let's say all of these except the location you can see all the text stays in there which is what we want good so one more thing i want to do before we do the edit and the update is pagination that's something that i forgot to add because if you have like you know 50 listings you're not going to want to fetch them all and list them all on the page so pagination is just insanely easy with laravel especially if you're using tailwind because by default it actually the the view of the pagination already uses tail in classes so let's go to our controller and up to the index and what we're doing right now is we're calling latest okay so we get them latest descending then we're filtering if if there's a search or tag then we filter it and then we get the listings well instead of get we can actually change this to paginate if i just go ahead and save that and reload that's going to work all right it's going to do the same thing now paginate takes in a number and that's going to be the the number that we want per page so just for now just to test things out i'm going to say paginate 2 and i'm going to go ahead and reload this and now you'll see we only get two listings all right now since we used paginate this actually gives us a couple other things so i want to just i want to just grab this entire thing right here you guys don't have to do this but i'm going to grab that and then i'm just going to do a die dump of that so this is actually what we're getting if i reload that you'll see in addition to just getting the items we also get like per page we get the current page so we get the total that's from using paginate if we just do get like if i just do get like we had it before then we don't get that stuff we just get items so that's what paginate gives us so let's get rid of that i just wanted to show you that now obviously um we need a way to get to the next page and the way it works is there's just if we go to the url bar here we can just say page equals let's say page equals two that gives us page two okay but like i said we need a way to actually um see the numbers to click on the page numbers down here and that's really really easy all we have to do is go into let's see we're going to do this in where should we where should we put this in the index yeah so let's go to listings and in our index all right so we have our end unless so we want to put this right after after the last div yeah so let's go under here and i'm just going to have a div here i'm just going to do margin top to push it down a little bit so margin top six and then let's do padding four and then all we have to do to show the pagination links is simply do listings and then we have this links oops links and that's actually a function all right so let's save that and then come over here and reload and there we go so we have it shows us the results showing 1 to 2 of 10 results if i click on two you'll see up here it takes me to page equals two now we're showing three to four of ten results click on page three and there we go now there's also a simple paginate if you don't want to show the numbers and you just want like a next and previous we can do this it's a simple paginate and if i reload that now we just have next and previous so i mean it's up to you on the the style you want but i'm going to go back to paginate i'm going to change it to 6. all right and if i reload that we're not seeing any because page 3 doesn't exist anymore because i put 6 per page all right so now we just have these two that's page two that's page one all right i think we have ten listings or i have ten listings all together now if you do wanna change the styling like i said it uses tailwind by default that's why it looks good for us but if you weren't using tailwind you would have to style this and the pack the pagination package isn't direct it's not available to us right now to be able to to change this so what you need to do is publish it and there's an artisan command we can use to do that so it would be php artisan and then we want to use vendor colon and then publish all right so if we run that we're actually going to get some choices here because you can publish all these different packages if you need to change them for any reason so we want the pagination provider which is uh right here pagination service provider for me is number five just make sure that um you know you find the right number so i'm gonna hit five enter and then what happens is it gives me this vendor directory and actually it's vendor slash paginate and you can see that there's different templates let me just make this smaller so there's different templates such as tailwind.blade simpletailwind.com so those are the two that that we've seen this the one we're using right now is this tailwind.blade you can see it has the tailwind classes and you can also use bootstrap you can use semantic ui and of course you could edit this as well if you want to use your own custom css now to change the template i believe if we do a controller command p and we we search for app service provider i believe what we do is in boot we can do like paginator um yeah it would be paginator and we could say use bootstrap 5 or something like that and it would use the bootstrap template but you'll have to look in the documentation to look into that further all right so now we have pagination the next thing we're going to do i'm just going to close everything up for now except for the route and one thing that i meant to do earlier is the file upload because right now we don't have the ability to upload an image so what we'll do is go into back into our create and i have it commented out right here let's just make that a little bigger so i have this commented out i'm gonna uncomment it and we just have our label we have an input make sure it's the type of file and let's see what else do we want to add here we do want to put an error so in case there's an arrow let's grab that and the name so input should have a name i have a name of logo so we're going to change that to logo and then whenever you have a file input of course you have to add an attribute to the form so we have to add an attribute of ink type and we want to set that to multipart slash form data so i'm going to save that now let's go into our controller where this is submitted to so listing controller and we have our store all right so this this is where it's actually submitted and before i do anything let's just do a die dump and i want to show you that we can use requests you can either use the helper or you can use dependency injection here and we're going to say request and let's look at file and then whatever we called that file which is logo so i'm going to save that and then we can just put whatever in here oops we have to reload because we need the file yeah there we go all right let's just put whatever in here this is kind of a pain in the ass i could use a browser extension to fill this stuff in and should have did that but um let's see i'm going to choose a file now i do have like all the images for the companies that i'm using is it on my desktop yeah i have the theme on my desktop images and you could upload any image but i'm going to grab i'm just going to grab this sky net and let's say open create and then what it's showing us is what we get from that request file logo so we have the the name of the file we have the type which in this case is image slash png we have the file size so we can get all that data now to store it there's actually a method called store okay so we can go like that and the default location for this if we come down here there's a folder called storage and then there's a folder called app so by default that's where it's going to go but i just want to show you we can get rid of this right here and then i want to show you in the config folder there's a file called file called filesystems.php now there's different disks we can use and the default is local and if we come down here you'll see for local the route the location is going to be that storage folder and then that app folder now if you want your images to be public then you're going to want to put it in the storage app public folder and that's what this is so public will go in that app public folder you can also use like amazon s3 if you want you just need to set it up and get your api keys and so on but what we're going to do is change local the default disk from local to public all right so go ahead and save that now before we can actually upload it we need a field in the database for the path right because in our view we want to be able to say image source and then have you know listings logo or image or whatever you want to call it so let's go into our migrations close uh let's see close this up i know this can get confusing because it's such a large file structure but if we go to databases migrations and we want the create listings table that we did a long time ago it seems and we want to add another field here let's put it uh company location we'll just copy this title down and we're going to change that to logo and we can keep it as a string because it's just going to be the file path we don't we don't actually store the the image the file in the database it's just a path to the file all right so yeah we'll actually let's add nullable to this so if we say that it's nullable that means that if it doesn't have an image that's fine this this can be um you know this can be null all right so now let's save this and we're going to need to run our migration okay get rid of that so what i'm going to do is actually run refresh and i'm going to recede the database again too let's see right here so php artisan migrate refresh and we're going to seed it's going to get rid of the the listings that we've added but that's fine so let's run that and now if we look at our database so you can use whatever i'm going to use workbench and in listings i'm going to refresh and then click this icon and you can see we have all of our sample data and then we also have an additional field of logo which right now all the sample data is null okay so now our database is ready for file uploads now we just need to actually get them to upload to the folder and we need to say you know that path needs to go in the database which is really easy so right here let's first check um we want to check to see if there was an image uploaded and we can do that with uh we'll say request so we have our request and there's a method we can use called has file and passing here logo all right so if a logo is uploaded then we want to add to our form fields we want to add logo just like we have form fields title form fields company all this we also want form fields logo and we can set it to to the path and upload it at the same time by using request file and logo or whatever you call the name of the image and then we can call that store method all right so we want to call store and in here i'm going to pass in logos because i want to have a folder called logos okay in that storage app public i want a folder called logos and then we also just have to add here public and that should do it we should be able now to upload an image and it'll get the path will get stored in the database so here let's just reload the create form and i'm going to add here acme so acme corp and job title laravel senior developer and location contact email um yeah we'll just do test and then website let's say http acme and we'll just use this and then here i'm going to choose an image so i have an image for acme i'm going to click open and then for the description let's see i'll just let me just find some dummy text here all right so i'll paste that in and create gig now let's look over here in the storage folder so storage app public and now you'll see that there's a folder called logos and then we have the image it doesn't keep the same image name and if you take a look we have our acme image now let's look in the database so i'm going to come here and let's refresh listings and let's take a look and here you'll see under logo this listing has a path of logos slash and then the image now this isn't publicly accessible yet what we need to do is create a sim link from the storage public folder to this public folder right here because these images are directly accessible and we do that by just running a simple artisan command so down here we're going to say php artisan and then we can just do storage colon and then link and it says yeah the links have been created so now i should be able to view it if i go to our website and then let's say slash slash i think it will be logos and then the name of the file let me just grab that real quick um i'll get it from the database you know actually i'll just copy this whole thing and let's see storage slash logos and there it is all right so that is the path to our logo now we need to change the reason it's not showing up here is because we need to change we need to do it in two areas the card where the images and also on the the single page here so let's open up the card component or the i should say the listing card and this is where we have the image now i do want the the dummy image or the the laravel logo i want that to show if uh you know if there is no image so we'll use a ternary so let's i'll just clear this out yeah we'll just clear this out and do this from scratch so for the source of the image let's say if there is a listing logo then we'll have we'll use the asset helper and we want to load that so that's going to be for the path it's going to be storage slash and then we need to concatenate onto that the path that's in the database which is listing logo all right and then else if it's not there then let's show slash images slash actually we can use the asset helper here as well asset and then that's going to be slash images slash no dash image dot and i think it's yeah png all right so let's save that let's come over here and reload and now we should see acme for this one and see the no image for the rest all right now for the single page we basically want to do the same thing so i'm just going to copy the source here and then let's go to our single listing which is in views listings show and for the image here let's replace the source with that and then i think that should work yep and if we go to another listing that doesn't have an image it'll show the laravel and of course you can change that that laravel logo to whatever you want okay so i think we got everything now so that we can start on the edit and update functionality so let's do that close that up so the route for this let's say show edit form and actually let's stick with convention here and do capital all right so we're going to do route get and the end point that we want is going to be slash listings slash and then we can use route model binding here so listing and then edit and then we want to do the listing controller class and the method we want is is called edit all right so save that and let's go to the um let's go to the should we do the controller first now let's create the edit link so ultimately we're going to have a link up here to go to all of our gigs or all of our listings and we'll have an edit and delete there but just for now because we don't have user authentication yet we're just going to put an edit and delete down at the bottom of the show page so let's go to our show and let's see right under the x card i'm going to create another x card all right and then we're going to just pass in a couple extra classes here so let's do mt 4 and padding 2 will display as flex and let's do space between everything on the x-axis we'll do six and then we'll have an a tag here it's gonna go to slash listing slash and then we wanna get the listing id and then slash edit and then in here i'm actually going to put a font awesome icon so i'm going to do f a dash solid and what is it f a f a dash pencil i believe and then next to that we'll say edit and the font awesome cdn is is being brought in in the layout all right so if i click that right now we're going to get this the controller method doesn't exist so let's create that and go to listing controller and let's say show edit form and this is going to be a public function called edit it's going to take in a listing with the variable name of listing and then all we want to do is return a view so let's return we'll say listings.edit which we haven't created just yet and then we're going to pass in here the listing itself which is going to come from here all right so let's save that actually let's do a die dump of listing just so we can see if this is hooked up yep okay looks good we should be able to get specific fields like title all right cool so now we want the view which is going to be in views and then we have the listings folder we're going to create a file there called edit.blade.php now i think the easiest thing to do here is going to be to just copy the whole create form and paste that in and then let's just change some stuff up here so this will be edit gig and here we could say like edit colon and then the title because remember we have access to this listing and let's see for the form the action is going to be listing slash and then we want the id um yeah so listings is that right uh yeah we will listings and then the id so listing id now we can't we want this to be a put request because it's a it's an update however we can't just in the method we can't do put right we can only do get and post so laravel gives us a very handy directive called method so right under our csrf directive let's say method and then we're going to pass in here we want this to be a put request okay so then it will get sent as a put now we want the the form to be pre-filled so instead of these old values here we're going to replace that with listing and then whatever the field so in this case company all right then i'll just copy this and we're going to do that to all of these so this one here is going to be the title and let's see this one let's replace that with location then we have email email and then what else website and tags logo i'm going to skip that for a minute and then description is going to go in here for the logo i'm actually going to show the current image so let's go right under the input and i'll copy from the show i'll copy the image so this right here let's grab that and we'll put that right here save that and then let's reload all right so we have all the fields here and you can see the the logo the current logo is also showing all right cool so in order to submit this we need to have another route so let's go to our web routes and let's see let's put this right here we'll say um just say edit submit to update and let's say row now this is going to be a put remember the form is a put request so we want to do route put and let's see the actual endpoint that we're going to want is just going to be listings and listing like that so put requests to that and then let's do our listing controller and class and then the method is going to be called update all right because remember we're following these these resource routes so edit shows the form update will actually do the update actually let's just call this i'll just say update listing all right now we have to create that method so let's go into our controller and from here we should probably just copy yeah let's just copy the um the store so this right here and let's say update listing data we're going to change the name of the function to update and then we also want to pass in the listing so listing and then let's see we want to we want to do the validation i think we should move let's get rid of this rule here because if you're editing and you try to submit a company you know this your same company this is gonna fire off and we're not gonna be able to because it's already there so you wanna make sure you get rid of that and i think that should do it and then as far as as far as the logo goes we'll just keep that so the logo can be updated and then instead of listing instead of taking listing and create we need the the current listing which we can get from right here so instead of using that and then a static method we're going to do listing and then a regular regular method all right and then here let's do redirect instead of redirecting to the home page we can actually do redirect back actually no we want to return we want to return back like that and then with the message we'll say listing updated successfully so we should see a flash message and then it should go away just like you know before because we used alpine js so i believe that should do it so i'm going to come back here to edit and let's change it to acme corpse and [Music] i don't know what else we'll add something else in here like back end so let's click create we'll change the create so listing updated successfully except it didn't because this should be acme corpse that doesn't sound right acme corpse so i don't know why that didn't work um oh yes i do because this should be update not create all right so let's try that again and here i'll do back end updated successfully now we get acme corpse and back end good so let's change the the text of the create gig so in our edit let's go down here and we'll change that to update gig i'm going to change it back to corp all right awesome so now we have our edit functionality the last thing we want to do before we get to you know user authentication and all that is going to be the delete so i'm just going to have a delete wait a minute oh you know what happened is when i did have that create there it actually created a new a new uh listing here acme corpse all right so that's fine we'll just we'll just keep that one to delete now i just want to make sure it doesn't do that again it shouldn't because we change it to update but just to make sure let's uh we'll get rid of back end and let's click update listing updated successfully we'll come back here and good all right now for the delete this is going to be a little different if we go to our show we have our edit link here the delete however is going to be a form because we're not just navigating to a page like we are with the edit we're actually submitting a delete request so we need to create a form and then we need to use the method directive and use the the type of delete so let's go under this link here and let's create a form and the the action is going to be slash listings slash and then we want the id id and we'll create the route in a minute um actually i'm sorry this is going to be listing id and we do want to add method post so method equals post however oops what am i doing however we want to add um we want to add two directives csrf for cross site protection and then let's do method and we're going to do delete so ultimately this is going to make a delete request all right and then we'll have a button let's do we'll do a class here of text dash red dash 500 and i'm going to put an icon in here as well so let's do fa solid and then f a dash trash and then next to that we'll say delete save that take a look go to show and there we go so we have this delete and it's going to submit um it's going to submit to listing slash listing id as a delete so let's go to our routes and let's add that in here so i'm just going to copy one of these okay so this will be delete delete listing and we want to change that to delete and then the endpoint is going to be the same so listing slash and then that particular listing listing and then let's change that to delete okay so now we need to go to our controller and we just need to add the destroy method so say delete listing and public function destroy sticking to the naming conventions you could call it something else um let's see uh i'm gonna pass in here the listing wait did i put destroy in here or delete yeah i put delete so this is actually gonna be destroy all right so now uh in here this is going to be really simple all we have to do is take that listing and just call delete and then we'll go ahead and just redirect semicolon and then we'll return redirect and let's just redirect to the home page and we want to do that with a flash message so let's say with and say message i will say listing uh listing deleted successfully all right actually let's not use uppercase here so let's try that out i'm going to come over to this this is the the one i created by accident acme corpse click delete and listing deleted successfully and you can see it's no longer here okay so we now have complete crud functionality we also have the ability to filter by these tags filter by the search so now i think we can move on to user authentication now we already have a users table let's just close all this up so we can talk about what we're going to do next so we know we have a users table because of that migration that laravel comes with we don't need to add any extra fields or anything we already have email password name and so on so that's all set now we want this register to go to slash register right now it goes to register.html but we'll change that and then we'll show the form to register we'll be able to create a new user and then we'll move on to the login and the relationship with the listings and so on all right so let's start off in our routes web file and let's say show register create form so route get and the endpoint that i want is going to be slash register and then we're going to have a user's user controller which we don't have yet but we will and let's say class and then the the method that we're going to have for this is going to be called create you can call it register if you want but i like to try to stick to these if i can now let's create the user controller so we're going to say php artisan make uh controller and let's call it user controller all right so we have that created and we need to make sure we bring that in so let's uh import class okay looks like it was already imported just make sure you have that there alright now let's uh let's go into our layout and change the the link for this register so layout and right here should get rid of the dot html slash register let's do the same for login get rid of that okay and now if we come over here and reload click that just says create does not exist so we need to go now into our controller user controller and let's say show register slash create form and uh this is going to be public function crea did i call it yeah create again you can call it register if you want it's up to you and then from here all we want to do is return the view and the view is going to be users dot and i'm going to call it register okay and then in our views where are we views let's create a folder called users and then here we're going to have a file called register dot blade.php all right we need our layout so x dash layout this is why i like using a layout component is because it's so easy to to add all right so if we save that now we come back over here there we go now we have the form i'm going to copy you could copy one of the posts for our listing forms if you want but i'm just going to grab from the register html this div right here that has the bg gray and the border and stuff i want that whole div which ends right here all right so we're going to grab that copy it and then put that within the layout and then this div this is actually going to be that card component but there are some extra classes here so let's see rounded is included in the thing in the in the card component so these classes are not i'm going to copy those and then i'm going to replace that with x dash card and then for classes i'm going to paste in those new ones and let's make sure down here that the ending div is x card all right so let's save that let's reload take a look okay good and then as far as what we're submitting to let's go to the form the action is going to be slash let's do slash [Music] trying to think of what i want this to be let's do users we'll stick to kind of the rest api convention um it's going to be a post request to users so yeah let's do that and then method is going to be post and we need to add our cs csrf directive and make sure that the inputs have a name which they do and then for errors so we'll do our at error oops error and then end error and then in here let's do our paragraph we'll do text dash red 500 and text dash extra small and margin top one and here is going to be the message all right so we want to do this for all of these i'm sorry this needs to be this needs to be passed in the name all right so let's copy that so we have name we have email this error example we can just replace that with that then we have the password oh i'm sorry we want to change this to email we want to change this to password uh then we have the password confirmation see actually you know what i want to change the name from password 2 to password underscore confirmation i believe this is the convention we need to use for our validation for this for the confirm functionality so let's do that and then this right here password underscore confirmation and i think i think that should do it now this right here already have an account then we want this to go to slash login which obviously doesn't exist just yet okay so that looks good to me let's save it make sure that it works that it displays right so now we want to handle the actual submission so we know it's going to get it's a post post request to slash users so let's handle that in our routes we'll say create new user so this is going to be route and it's going to be post to just slash users and let's see you're going to have user controller user controller class and then as far as the method let's use the store because that's what it's doing it's storing a new user save that and then we're going to go over to the the user controller and now we need to create our store store or um yeah we'll say create new user whoops let's see public function store okay now the store is going to take in let's see the store is going to take in well no i'll just use the request helper or actually what did i do in the listings i want to try to stay consistent so in store for the listings no i use this all right so we'll do that here as well okay and then we want to do our validation so we'll say form fields set that to request let's do request and then validate and this is going to take in an array and we're going to pass in our fields that we want so let's say a name name is going to be required and let's also make it a min we'll do a minimum so we can say min colon three that means it has to be at least three characters then we have email so email is going to be required and we also want it to be unique actually we want to be an email as well so let's say email and then we want it to be unique so we can add in here a rule of unique and let's say it's going to be unique to the users table yes we want to pass that into the users table we don't need this and also to to the email column or email field which we need that all right what do they mess up here we don't need that all right so the next thing i want is the password confirmation so with laravel we can actually say password because that's the field we want to validate and then we can say first of all let's say required but then we can also do confirmed so what this does is it'll make sure that it matches another field called whatever this is underscore confirmation and that's why i use that as the name here so right here name password underscore confirmation you want to stick to that convention if you want that confirmed and then let's see what else do we want here let's do a minimum we'll do a minimum of six characters all right so that's our validation and then of course you want to hash your password right you never want to store a plain text password so we use something called bcrypt and if you've if you've done you know express node.js and express tutorials with me then you've probably worked with bcrypt or bcrypt.js really simple all we're going to do is take the form fields password value which is the plain text and set it to bcrypt and pass in here that exact thing so form fields and password all right so we're just setting it to be to be the hashed password now the way that i'm going to do this is create the user and then automatically log in all right so it'll create the session and all that so let's say user equals and then user which is our model and then there we're going to do create just like we did listings create and pass in the form fields all right so that will actually create the user and then actually i'll put a so create user and then we want to then log in so we can do that with the auth helper and then we can call login and pass in that user that was just created then we just want to redirect so let's return redirect and we want to return with a message so we'll say with and message and then that message will say user user created and logged in all right so let's save that let's come back over here and let's try let's make sure our validation works uh old rule not found that needs to be brought in so right here and we might need to bring in the um do we bring in user no we didn't so user we have to bring that in okay and let's try that again what's this method validate required confirmed min does not exist hmm uh oh you know what we might have to do it this way so we can do required or confirmed or min six i think i think that might work let's try it okay good so the name is required the email is required now let's test out the password confirmation so i'm gonna do it has to be six characters so i'll do one two three four five six and then this one one two three four five six seven so the passwords don't match okay this has to be an email the password confirmation does not match good now one other thing we want to keep the fields obviously we don't want them all to blank out so remember how we do that we use that old that old helper so let's go to the input right here the name and we'll say value and set that to old and then name all right so we just want to do this for all of these so for email let's see password all right so now we shouldn't lose the value so i'll try it again good so now let's actually try and register a user i'm going to register me say brad at gmail password sign up user not found all right so we didn't bring in user i thought we did no we didn't bring in user to the controller meaning we didn't bring the model in so we just want to do that at models user all right so i'm just going to reload to submit and we get user created and logged in good so now we're logged in the session's been created i want to show different links up here if we're logged in we can also put like a hello or a welcome message so what we can do is go into our layout register.blade should be all set so we can close that up and then let's go into our views components and our layout all right so we want to go to where we have the links which is right here and let's see we can use there's a directive called auth which is really cool because we can just wrap anything we want in auth and it'll only show if we're logged in now these um we want to show if we're not logged in but there's going to be two others is it two no we'll have a welcome message and then a link to manage our gigs or manage our listings so i'm just going to copy both of these and i'm going to go right above here and paste these both of these in and uh this second one that i paste in this is gonna be to manage our listings all right and the the route for this is gonna be slash listings slash manage and we'll we'll do that in a little bit and for the icon let's do a gear icon so fa solid and then fa gear and then this one here i just want to be like a welcome so i don't want it to be a link let's just get rid of everything in the li and we're going to have a span let's make it we'll say font dash bold and let's make it uppercase and then inside the span we'll say welcome and now we have access to this auth helper and we can say user and then we can get from this user we can get whatever field we want let's get the name all right so laravel makes it really easy to to just do stuff like this now i only want this shown if we're logged in so i'm going to go right above this li and just say off and then right here above the links that are for guests i'm going to do an else and then after those two links or list items we're going to do at end off and that's it let's save come back over here and reload and there we go so we see welcome we see our name and then the manage listings link all right oh we need a logout link too forgot about that um that's obviously gonna go up here where um our auth links are and i think that's probably what we should do next is the log out um yeah let's do that now the logo it's not going to be a link it's going to be a form because it needs to be a post request or we're going to make it a post request so after this list item of the manage let's create another one and then this is going to be a form and actually i'm going to give it a class of inline and the method so method is going to be post and then the action let's do we'll do slash logo all right now inside the form tags we're going to have first of all we need our csrf and then we're going to have a button and let's see let's let's actually make this a type of submit and we'll put an icon here as well let's do f a dash solid dot f a dash door dash closed and then next to that we'll say log out all right let's check that okay so now we have a log out link now we need to handle that route so let's go to our routes and then say log user out so route get all right and then that's gonna be slash logout and then from there we want the user controller class and then the method that we're going to use is going to be call logout as well now in the controller we're going to create a logout all right so let's say public function log out all right and then this is going to take in the request and there's a couple things we want to do so first off we want to call off we can just simply say auth logout so that will uh whoops this should be a small arrow so this will remove the authentication information from the the user session okay so that addition so that other requests are not authenticated then in addition to that it is recommended that we invalidate the users session and regenerate their uh token their their csrf token so to do that we can say request let's say request what is it session yeah request session and then invalidate all right so we want to do that and then we want to do regenerate token as well so let's change that to regenerate yeah this one regenerate token all right so the user will be logged out then we just want to redirect so let's return redirect and let's go to the home page and let's add a message as well we'll say with with a message and we'll just say you have been logged out all right so let's try that out come back over here and let's just refresh this and click log out the post method is not supported for this route wait a minute oh this should be post sorry there we go you have been logged out and notice that the navigation links now change back to register and login cool so now of course we want to be able to log in with a user that is already created so that's what we're going to do next so we need a way to show the login form so let's create a new route and we'll say show login form it's going to be a get request and that's just going to be slash login and user controller class and the method we're going to have for this is going to be yeah we'll call it login and let's create now in our user controller show login form public function login and then we just want to return the view which we haven't created yet but we'll do users.login all right and then let's create that so down here we have users and let's create a file called login.blade.php all right and then for this we can copy the register form because it's very similar so we'll grab that paste that in let's change this to login instead of create an account to post gigs let's say log into your account and then post request and it's going to go to uh now login is a little different because it's not part of like crud functionality so i think what we'll do here is just users slash login all right and then we don't need the name so we can get rid of that we just need the email and password so we also want to get rid of the confirm the password confirmation and then instead of sign up we can say sign in and down here instead of already have an account let's say don't have an account then register all right so if we come over here and click login we see our form what is that why do we have see email oh you know why this happened to me before so with the value where we have the old this should have quotes around it and we'll probably yeah we're gonna have to do that on the other on the register as well so yeah let's just make sure that these have quotes around it i don't know why it does that why it puts a slash in there but i had this problem before so let's see if that worked yeah so let's make sure that in the register we do the same thing so anywhere we have value equals old we should have the quotes here confirmation all right all right cool so let's see this is going to get submitted to user slash login so now we need to create that route so log in user route gonna be post and it's gonna be slash users slash let's see actually should we do let's actually do users slash authenticate yeah we'll do that and then the login i mean it's really it's preference it's up to you you can do whatever you want but i'm going to do yeah user slash authenticate and then in the method we'll have i'm sorry in the controller we'll have a method call authenticate because we already have one called login that loads the login form yeah so users authenticate and user controller class and then we'll have a method called authenticate okay so let's create that let's go into our controller authenticate user public function authenticate all right so now we want to be able to log our user in let's pass in the request or use the request helper whatever you want to do and then our validation so let's say actually let's just create copy this okay and then all we need we don't need the name so we just have the email and then password this here we can get rid of this and then for the password let's just do required all right and then we need to attempt to log the user in so there's there's a method called attempt so this will go into an if statement we're going to say if auth attempt and then pass in our form fields all right now if that's true then we want to generate a session id or regenerate a session id so let's take our request object and let's say session and then regenerate okay and then we'll go ahead and just redirect yeah let's return redirect and we'll go to the home page with a message and let's see we'll just say you are now logged in okay now if this doesn't if the attempt is it fails then down here let's just return return back and we can do we can do this we can say with errors because what i want to do is instead of you know because we have the errors under here if the login fails i just wanted to show under here and say invalid credentials okay whether the email or password is wrong just you don't really want to let the person know that a person that that email exists that can be a security risk so whether the email is there or not or the password fails you just want just one message that says invalid so with errors that's going to take in an array and we want to put it in the email okay and then we'll say invalid credentials okay and then uh like i said we want it to just show in the in the email so we can do only input and then in here pass in email all right so now if i come over here and i try to log in with something that doesn't exist okay i get invalid credentials now we know that i have a user of brad at gmail if i get the wrong password i still get invalid credentials okay so it's not like they can come and see if the user exists or not they're not going to be able to tell that which is what we want so let's log in with the correct password you are now logged in just ignore this thing and you can see up here now we get our welcome message all right so we have register functionality we're able to log in log out so it's exactly what we want log out cool so just what we've done so far there's a lot of potential in in things you can build i mean just having the ability to authenticate create users and then have some kind of resource like a listing or a blog post or whatever and we have full crud functionality we can also you know filter down so i think we're doing pretty good i know this is a long long video it's basically a course you know this is more than a crash course but right now there's there's not really purpose any purpose of logging in because everything is public we can add and delete it doesn't matter and obviously that's not what we want so now we want to work on having a relationship between users and listings and ultimately the user that creates the listing is the only one that should be able to edit it and delete so that's what we're going to start to work on next now at the moment i'm not logged in and i can click on post job and i see this create a gig form i don't want that only authenticated users should see this and of course if i go and i click on edit we don't want this to be shown to guests either and then on the other hand when i'm logged in i don't want to be able to go to register or log in so laravel has middleware that we can use to prevent this from happening and it's really simple to use we can just go to the routes and let's say for this create form i only want authenticated users i can just put an arrow here and then middleware and then the middleware that i want to use for that route which is off all right now i'm going to save this and i'm going to run into a small issue if i click on post job it says route login not defined all right and i'm going to show you where this middleware is it's in your app folder middleware and then authenticate it uses this function called redirect 2. now here it's saying return route login now we do have a an endpoint called slash login but what this means route login is a route that's named login now we haven't used names but to add a name to your route is really simple if we come down to the login so show login form if we go to the end here we can say an arrow name and we can name this so we can call it login now if i come back and reload we're going to see the login page so if i try to go to post job we get redirected to login if you wanted to change the functionality to do something else you could edit this file but yeah so now let's add the auth middleware to wherever we don't want guests to access so i'm going to just copy this so we have store listings we don't want you know you want to be authenticated for that show the edit form yes update listing yes delete listing yes single listing no guests can see that register obviously no because you need to be a guest to register create new register a new user nope log out user yes and yeah so that should be good now the same goes for guests i'm going to show you if i log in now so i'm logged in now the the register and login links do not show but if i go to slash register i can access this so what we can do is on the register form route we can go ahead and add middleware and then we can add in here guest because there's a guest middleware all right so i'm going to put that on the show register and let's also put it on the um the show login which is right here yeah and even though we did name you can still chain it on to this chain the middleware on so now if i reload this while i'm logged in now what happens is it really it redirects me to slash home okay because it thinks that that's my home route now we can change that in the route service provider so up here i know there's a lot of folders here and it can be a little overwhelming but in providers route service provider right here you can see slash home our home is just slash so i'm going to do that and now again if i'm logged in and i try to go to slash register now i get redirected to the home page okay so yeah i think we're good on at least protecting our routes now what we want to do is create a relationship between our listings and users because a listing is going to belong to a user so there's a couple steps we need to take first off we need to handle the database so in our database migrations where we created the listings table this right here we need to add another field for the user id so we can know which user created that listing so right after the table id which is the primary key we're going to create what's called a foreign key or foreign id so let's say foreign id and then for the field name let's say user underscore id and then we want to also make this constrained so constrained and then i'm also going to make it so that on delete let's say on delete we're going to pass in here cascade what that means is that if we have a user that creates a bunch of listings and then that user is is deleted for some reason then the listings will also cascade those will also delete okay so let's save that and this isn't gonna nothing's gonna happen until we run our migration again what i would like to do is do our migrate refresh and seed the data like we have been however now we need to account for that user id so what we'll do is in the database seeder instead of because we were just creating five users and then creating six listings instead of that i'm going to create a single user and have that user own all six listings so let's uh let's call let's comment that out and i'm going to set a variable here of user set to user factory so the same thing that we did above it's just going to create a single user and and since i'm just doing user and not including app models user then i do have to bring that in so just make sure that you import that up here okay now this will create one user but i do want to take control of some of the fields like the the name and the email so i could add on to this create and you can pass in here an array of whatever fields you want to actually control or or define so let's define the name of john doe and we'll do the password not not pat we don't even need the password because we don't really have to log in as this user but let's do the email i will say john gmail.com alright so now down here when we create the listings i'm going to pass in here i'm going to pass in the user id because that's what i want to define and i'm going to define it as the user that was just created i'm going to define it as their id all right so now let's save it and let's go ahead and refresh and seed our database so we can do that with php artisan let's do artisan deep not db we want to do migrate and then refresh and then dash dash seed okay so completed successfully now let's take a look at our database i'm going to use mysql workbench so if we look in list actually let's look in users first i'm going to refresh this and then look at the table and you'll see that there's one user the name john doe the email of john gmail and the id is obviously one now if we go to our listings and we check those out you'll see that now there's a user id field and there's a one for all of these so that john doe user owns all of these listings now so anytime you do a refresh and then a seed that's that's what's going to happen now this acme this is going to go away obviously because our database gets you know refreshed so if you're working in production you want to be really careful that you don't do stuff like this this is something just for development refreshing our database because if you do it and you're in production you're going to get rid of all your data all right so now that we've done that we need to create a relationship with an eloquent within laravel so we need to go actually go into the model so let's first go into let's see let's go into app models and listing so here we need to define a relationship so the way that we do that is create a function so down here let's say relationship to user and we're going to say public function and call it user and then the relationship is going to be belongs to because a a listing belongs to a user that's the type of relationship so let's say return and then this and then we're going to use belongs to and here is where we want to tell it well what what does this belong to you know so we'll say user class and then the name of the field user i underscore id now i don't think that this is actually necessary because the default we used was user id but if you if you had a different you know in our migration if we used a different name here like i don't know user identifier or something like that then we would have to specify this but i'm just going to specify it anyway all right so all this is doing is saying that a listing or in the listing model it belongs to a user and then this is where that id is going to be stored so let's save that now we have to do the same thing on the user side so let's go to the user model and now we can just add down here let's say relationship with listings so now we create a function here called listings just like in in list in the listings model we created a function called users and here we want to specify the relationship so return this and the relationship is going to be has many okay so a a listing has many users so we want to do here i'm sorry listing has many listings so listing class and we can specify that user id is the field in the database all right so when you think about it you just look at the file and the file name is listing so the relationship to a user is listing belongs to a user and then user has many listings all right and there's other relationships as well and of course you can look at the eloquent uh documentation for that now since we did that we can now easily get a users listings or we can easily get the user of a specific listing and i'm going to show you that within a tool called tinker so tinker is uh is a command line tool that we can use to work with models you can even create you can write queries you can create uh you know add add things to the database you can pretty much do anything you can do within within your code so let's uh let's do that let's say php artisan tinker and you're going to see this this shell open here let's say we want to get the first listing so we could say app models listing so from the listing model let's use the first method so if i go ahead and run that you'll see it'll actually get me the first listing so this has the id of one if i wanted to find a specific listing i could do find and let's say i want to find the one with the id of three so this returns the one with the id of three now what's cool is we can take the listing now let's say this this particular listing we want to know the user and we want to get all the data of the user that owns it we can now go like this and it's going to give me the specific user that owns that listing and that's because of what we just did within the models creating that relationship and then if we have a user we can get all the listings of that user and with tinker i can do this so i could do app um let's say app models slash user and then i could run methods on this or i could even create a variable so we could do like user equals let's say that and then colon colon first so we'll get the first user there's only one in the database all right now if i say whoops if i say user you can see i have john doe here and if i want to get john doe's listings i can say user and then listings and now it's going to give me all of them all five because he owns all five in the database right now so tinker is a really really nice tool to just mess around with i would suggest looking more into it but i just wanted to show you now that we have those relationships what what that gives us okay so let's see just trying to think of where we want to go next now that we have the relationship i guess we should make it so that when we create a listing the user id gets put into the database right because as it is now our form just it doesn't when we submit it it doesn't let the database know which user uh that listing belongs to or who submitted it so let's go ahead and log in first of all i'm gonna log in as my actually i don't have the brad user anymore so i need to register it because we refresh the database okay so now let's close both of those up and let's go to let's see let's go to our listing controller which is going to be http controllers listing controller and then this is the the store form right here this is what we want to look at and it's going to be pretty easy we just need to add to the database so here's where we check for the file and we add the file path let's go right under that and now let's say form fields and we want a user underscore id right and we want to set that to the user that's currently logged in that's submitting the form so we can use the auth helper and get the id from that so we can just say id and that should do it so let's try it out we'll save this and we'll come over here and let's go to create a new listing and we'll just do um we'll do the acme again so senior laravel developer okay and then contact just do test website tags all right company logo i'll grab the acme job description [Music] i'm just going to grab some dummy data all right so create gig so it gets created now let's look at the database there's a couple ways we can check for this but let's first just check the database we'll go to listings refresh again i apologize for the small text i just don't know how to make it bigger and right here so senior laravel developer and if you look at the user id it's 2 which is the user the id of my user the brad user and then we could also go into tinker so let's go into tinker and let's say um slash what should we do should we get the user yeah let's get models slash user find and we'll get the id of two and then let's see if we can get the listing um oh listing sorry there we go and now we should see the acme listing so it's an array but the only one in it is the senior laravel developer acme corp all right awesome so let's exit okay so that's taken care of now we we should probably create our manage listings page which is going to show the listings of just you know just the logged in user and then ultimately i want to get rid of these links down here you can keep them if you want you can put a conditional around them saying it has to be you know the owner but yeah let's take care of this manage listings so this is going to go to listings slash manage so let's uh let's take care of that route come down here and uh say manage listings and that's going to be a get request to slash listing slash manage and that's going to be listing controller we should probably move this up with the other listing stuff class and let's see let's do um say manage and then let's put this up here put it right above sync single listing and this we want the auth middleware on this as well because guests shouldn't be able to go to this so let's say middleware off okay and then let's go into our listing controller and then from here we're going to want to create a manage manage function so public function manage all right and then we're gonna return our view which we haven't created yet and let's see the view is going to be listings dot manage now we have to pass in the users listings okay so let's pass in here we'll call it listings and then the way we can do this this is where you know creating our relationships in with eloquent it comes in handy we can do off and then user what that does is it gives us the logged in user and then we can simply do listings and then get all right so that should get all the the currently logged in users listings and pass them in to pass them into this view as listings so let's save that now we need to create the view so let's come down here into resources views listings and let's create manage.blade.php all right so this we could probably grab from the theme let's put our layout in here first so x layout and let's grab that so there's a manage.html and we want to grab this div with the card stuff the background gray it's actually a table and it ends let's see i think it ends here right yeah wait let me just make sure so that ends here all right so i'm going to grab that and i want to use the card component so let's see what is what's different here i think just the padding 10. so let's take um this div and let's say x dash card and just add a class of p dash 10 and down here okay it already replaced for me so let's save that and it should just show the static table now okay these these um are just hard-coded so what we can do is inside the the table body you see there's two table rows here that are just hard coded what we want to do is loop through the the listings remember we're passing in listings and they're only the listings that this that this uh user the logged in user has so let's see we'll go let's delete one of these table rows because we only need one to wrap the four each around oops so we'll get rid of this one and then let's go right above this table row here and we'll do an unless so unless let's say listings and we have an is empty method that we can use so unless is empty then we're going to loop through this so for each listings as listings okay and then we want to end that under the table row we want to end the four each and then we'll do an else so if there isn't any then i'm going to have a table row still i'll just let's do table row border border dash gray dash 300 and let's do a td so a column with the class of px-4 and p-y-8 let's do border top and border dash bottom border dash let's do gray 300 and let's do text dash lg okay and then in here we'll just have a paragraph with text dash center and i'm just going to say no listings found okay and then after the after that we just want to end the unless and we should be good i'm sorry and unless so let's check that out and still this this is still hard-coded but we're only seeing we're seeing one here because there's one in the database right we only have one gig one listing in the database so let's just replace this now we want to replace that with listing title right which is the same title actually so we're not gonna oh no senior laravel developer okay and then let's see what else the edit is gonna be a link to see it's gonna be slash listing slash and then the id so listing id and then slash edit okay and then for the form [Music] to delete is gonna be actually no we can just copy it from uh from the show so the show right here this form and i'm just gonna comment out you can like i said you can do what you want with this i'm to comment it out i don't want this on show pages so let's go back to the manage and just replace this form with that okay so it's going to have an action of listings and then the id it's going to be a delete request good so let's see if we reload good if i click edit it should take me to that page all right now we we only want the logged in user to be able to edit and delete their own posts right so let's um let's go to our controller listing control and this this should be pretty easy and we're going to want to go to let's see update so update this is where obviously where it updates so it's gonna do the checks and we update right here so let's put this let's just let's put this before anything so before the validation and stuff like that yeah let's say make sure logged in user is owner and we can do that simply by doing an if statement and we'll say if the listing if the listing user underscore id if that field is not equal to auth id right because that's the logged in user's id so if that is if that's not equal then let's do an abort so we'll abort let's say 403 and we'll give a message of unauthorized or unauthorized action all right so it's as easy as that to protect this and we can do the same thing with the delete so if i copy that and come down to the listing destroy before anything we just want to check that all right cool so that's it i think we're pretty much done see if we can edit this see that should be uppercase a updated successfully yep if i post another one let's just do whatever uh must be a valid email create gig okay there it is if i go to manage listings i'm going to see it if i delete it it's deleted good so that's it guys got our pagination so i think that in this i mean i know that this is a four four-hour video for our course but we did a lot like the stuff that we did here you can take into a lot of other potential projects and build something cool and of course you're going to want to add more features and do more to it but i think that this is a really good foundation for laravel for you guys and and you might go into building apis and but a lot of the stuff that you learned in this video it goes for the same with apis or you have your models and controllers you just don't render views you render json instead and there are other packages that you're probably going to use for like authentication you have breeze you have sanctum there's there's all types of tools that you can use to to make things faster but i think that doing the authentication the way we did is more helpful for you know for you guys than for me to just show you how to use a package and type type in a few commands um but a lot of those packages do give you more like reset password functionality stuff like that but i try to get as low level as possible that's why we did like the models the way we did and in the beginning we looked at all like how to make responses how to get responses from the routes and i don't know i hope that you guys can appreciate the way that we did those things i know it wasn't the quickest took a while but hopefully you get a better understanding of things but that's it guys if you follow this through all the way i really appreciate it and congratulations on finishing your app um i will be doing a deployment video soon with lenode it might be this project it might be a different one i'm not sure but that should be coming up soon as well alright thanks guys and i will see you later

Channel: Traversy Media

Views: 1,014,381

Keywords: laravel, php, laravel 9, laravel tutorial

Id: MYyJ4PuL4pY

Length: 258min 52sec (15532 seconds)

Published: Tue Apr 26 2022