Home Page | Build Blog with Laravel, Livewire & Filament #4

hey guys welcome back on today's episode we are going to work on our homepage so let's get started on the previous episode we created all our models and migration so now we have enough data to actually show something on the screen so we don't have a home page at the moment so let's go ahead and actually create that I'm going to open up our web. php file which is going to be our route file so it's going to be inside route web and we already have a route which is going to be our welcome route right this page over here so I'm going to reuse this so let's start off by actually renaming this welcome. blade.

php to home so I'm going to name it home. blade. php now let's update this to also home okay and so now for now we're going to keep this as is so let's open up this home.

blade. php file so this is the welcome page we have over here and I don't think we actually need any of the code inside so let's just go ahead and delete everything and we can actually start off by adding our application layout so I'm going to copy it from our dashboard page so we don't have to type it in and then get rid of all the dashboard related stuff so all the things in the middle let's format this so now we should be able to see our header and foot over here so let me reload and as you guys can see we actually have the layout over here so now that we have this we can actually go ahead and move the home page content inside so I have the GitHub here guys and the link is always in description so I'm going to go ahead and copy the entire homepage code so in order to copy it you can click on this copyraw file on the right side so I'm just going to hit and copy it and to make things a bit easier I'm going to actually first open it up on a new file and the vs code automatically detects is HTML so and I'm going to get rid of all the parts that we don't need which is going to be the header we don't need that so this is the hero section okay so I'm going to copy this or cut this and I'm going to put it over here so let's see if we can actually see that we do so this is the hero section and then under it we have our main section which is this main tag right we don't actually need to copy that main tag because we already have it inside our layout so if you guys check out the app. blade we already have this main tag right so it's a share thing across all the pages but we need to actually copy whatever is inside of it so I'm going to minimize the content inside which is this margin bottom 10 whatever I'm going to copy that go back to our layout and I'm going to paste that in okay now if you go ahead and we try to see it it looks all over the place it has kind of been divided into two sections now the main reason this is happening is this hero section isn't actually supposed to be inside this main tag right so whatever we put inside our layout it goes inside is replaced with this slot right so it's going to be inside the main but if you guys remember from the original kind of template this hero section is actually outside main right so we need a way to actually basically put the code above here right so there are a couple of ways of doing it you can actually use a blade component slots or we can also use the yield if you guys have user yield I'm going to just go ahead and use it because this I think everyone knows how to use it so and I'm going to name it hero section okay so now we can actually put some sort of code inside here so in order to do that all you have to do is we can wrap this hero section with a section directive and then give it a hero name it hero and this will go ahead and hopefully fix the issue so let's format this and let's reload and as you guys can see it got fixed so now this hero section is actually placed above the main tag so that's good I'm going to go ahead and close this new file we created so now that we have this page and it seems to be working some of the images are not loading that's okay we don't need to worry about them so let's start off we're actually first implementing this future post section okay now there is quite a lot of HTML obviously a lot of duplicates so I'm going to first actually clean it up a little bit so we're going to go inside this kind of div we have another day of then we have an H2 which is future post so it's this H2 here and then inside it we have a div with full width and then under that we have a grid right so this grid contains all these kind of cards right which is going to be our blog post right so if you look at it there was a div with columns right so if I minimize this we have multiple columns right so basically each of these is going to be our postcard right so I'm going to actually go ahead and delete these other two so I'm going to only keep one and if you reload we now have only one card right so this is basically that's how we know that we actually have the right HTML and if you take a look the latest post is exactly identical to the Future post right so the HTML is exactly the same it just is showing more posts and then it has yeah different posts but it's just more of them so I'm actually going to go ahead and completely remove all the the grid inside latest post so let's go ahead and delete that the main reason I'm doing it is because making it is making our HTML too big so it makes it harder to work with so now that we have this guys let's go ahead and actually try to load some data inside this view file now if we could actually do it over here inside the route file but I think it's better if you extract it into its own controller so let's go ahead and create a new controller for our homepage so we can go ahead and open up terminal and type in PHP artisan make controller and then I'm going to name mine home controller okay hit enter now one thing I would also like to do beforehand is I'm going to go ahead and make it an invokable controller so you can go ahead and do invokable or do Dash I and this will go ahead and make any workable controller it's basically a single use case or single use type of control and I show you guys how it works in a second if you haven't used it hit enter so let's open up this controller basically an invocable controller is a controller that has an invoke method that's it that is kind of in the name and it's basically used for handling for use cases where your controller only performs one task right so in our case we only have a home page we don't really have any other functionality surrounding it so now that we have this I'm going to move this return view home inside our controller and I'm gonna go ahead and replace this function so in for invokable controllers all you have to do is just pass in the class so we have we can go ahead and say home controller class and that's all we have to do okay so that's how you use invocable control or how you know this is an invokable controller you don't need to pass in for example something like index or whatever okay so that's how you generally Define it with invoke World controllers you just pass in the class so now that we have this let's make sure everything works it does we can go ahead and actually pass in some data to our view so I'm going to go ahead and pass in an array and the first part is going to be obviously our futures post so I'm going to pass in a variable of featured posts and I post the capital p and we can go ahead for now just pass in some random data later on we'll update it so I'm going to say post take three and then let's just take some three posts we're not going to worry about if it's actually featured or not I just want to first get the logic of displaying it done so let's go back to our homepage so this is our card right so I'm going to wrap it with a for each Loop so we can say for each featured posts as post and we need to add this for each under here so now if we reload we should see three posts as you guys can see we are actually seeing that that's very good however we don't have the images actually it seems like I broke something unintentionally let's see what did I do I'm actually not sure what did I do was it because of the for each Loop nope something else let's see why so I think the reason this is happening is because we no longer have any content it's not taking the full width so I think we should be able to fix this by giving this W fool so go ahead and guys you can add this W full to your top div element and hopefully that will fix the issue it seems to have yeah it has fixed the issue so I'm going to go ahead and uncomment the for each Loop and now we should actually have three posts right obviously it's showing random data it's okay so let's go ahead open it up and as a matter of fact I'm going to go ahead and extract this into its own blade component so because I don't want this home blade get too big so let's go ahead open up our terminal and we can go ahead and create a new blade component now because we already have a lot of components provided by jet stream I'm not going to be actually putting it here I'm going to put inside components uh maybe blog okay or something like that components post I think would be a bit better because right now it's very big and it's a bit unorganized so I'm not a big fan of it so let's go ahead and do that we can go ahead and say PHP artisan make component and I'm going to name it a postcard because it is basically a card right so that's I'm going to name it so I'm going to say under posts and then let's go posts slash post card okay so let's hit enter and I seem to have had a typo somewhere yep that's a typo component and also you generally uh blade components also have a PHP file so we can go ahead and say dash dash View and this should only make a viewer file for us so let's go ahead let's take a look we now should have a post folder and then inside of it we have a postcard right so I'm going to open up this postcard and move all the kind of content related to a card inside of it although I don't want to pass in these uh MD whatever column related stuff okay so one way up we can fix that is actually we can kind of cut this out and wrap it with another div let's go ahead and do that and the reason I'm doing this is maybe later on we want to maybe show two cards per page something like that we want to change the layout I don't want this to be actually controlled from the card itself so now we can copy whatever is inside and move it over here paste it in so now we have our postcard let me close the terminal and as you can see it's a lot easier to work with it here than it was in this page but now we can go ahead and include it and it's very easy to do we can do X hosts dot postcard and then that's it okay now we don't need to pass in a prop so in order to define the problems are basically a way to quickly pass data to your blade components we can go ahead and say props and I have two of them and here I'm going to go ahead and Define a post prop okay and let's go ahead and pass it over we can say this post equals post now this colon here makes it so the quotation marks are interpreted as PHP code so if you remove this you would have to go ahead and do it like this okay just something to keep in mind so it's kind of a shortcut of defining it so now that we have this hopefully everything should work and now we should be able to access this ports variable from inside our postcard so the first one we have an a tag which is going to be our image over here and this should basically point to our show post page we don't have that page yet so I'm going to for now leave it empty next up we have the post image so now since we are using Faker it's returning actually in image URL so we can actually just go ahead and say post image to view it now this will later on give us some issues for the posts we are actually uploading on our server we will go ahead and fix it later on for now this should be enough next up we have a link for categories so here we have like a lot of Old Tag over here for categories so I'm gonna go ahead and also leave this be an empty tag I think I will later on once we actually uh are creating categories I'm going to go ahead and extract this into its own kind of badge component but for now this is okay and we have the date let's go ahead and display that as well we can go ahead and here say post dot published at and now we have actually we already are seeing some information and then last but not least we need to update the post title so let's go ahead and do that we can go ahead here say post title now this is an atax I'm going to go ahead and give it an empty itchre for now later on we will update it once we have created our kind of a show post page so let's save this guys let's go back and as you guys can see you're now able to actually see all of these now the tags are not correct that's because we don't even have any tags on these totally okay we'll update that later on for now I think this is pretty good so let's go ahead and also do the same thing for latest posts as well so we can go ahead on our controller and also pass in I'm going to say latest posts and instead of take three I think on the latest post we were showing nine I could be wrong but I think it was so let's go ahead and display nine of them we can also add pagination if you want but I think this is enough you are not using Live Wire so this should be enough let's do a nine and then that's it let's go ahead and display it so the logic will be actually identical to Future posts I'm just going to go ahead and copy this move it over here and let's format this and instead of this future posts in the loop we are going to say latest posts now let's see if it's working it is something is completely off and I think it's because we forgot the grid right I think I deleted the grid as well so I need to also copy the grid so let's go ahead and do that the grid should be above the for each Loop and also we need a div for the closing so let's format this again let's go back and now we have latest post as well now the data is obviously not actually correct so let's go ahead and Implement that so we will start off with future posts and then we'll go ahead and write the logic for the latest post so for future post obviously it needs to be published and also we need to get featured ones right so let's go ahead and start over start off over here so first we need to make sure the post is published and in order to do that we can go ahead and write a simple uh where statement and say published at because it is a timestamp a post that is published is always going to be the published ad is going to be in the past right so we can do a simple check and say if published ad is smaller or equal to now then we know that the post is published right now instead of now I'm going to go ahead and also use carbon which is basically a package to manage or work with time and the reason I use a carbon a lot is because it's actually easier to test it we can also fake this or set the time to any any date you like if you're writing unit tests so that's what I'm going to be using it so that's how we can check if a post is published or not okay let's see if these changes have a results it did actually do something so that's going to be the one now I don't personally like to write these long kind of queries on our controllers if we can avoid them so let's go ahead and actually extract this into scope so the way we're going to do that is I'm going to go ahead open up our post model and we can go ahead and Define a scope that we can say public function scope published and Scopes are a way to basically extract these eloquent queries into a very nice syntax I'm going to copy this and one thing we can do with the scope is it's going to pass it's going to accept the query and then we can perform some operation on that query so we can say query there okay so this scope allows us to basically do the same thing but Define this logic here and make it reusable everywhere else right so now here instead of whatever we had before we can say published and that's it right it's going to be the exact same as the code we had before now make sure you always add this scope prefix it's important that's how a lot of well knows that this publish is actually a scope right but when you're accessing it you don't need to pass that scope variable so if you reload we should say the exact same results and one more thing I would like to do as well guys is we also need to make sure the post is a future so if we open up our migration or post we added a Boolean feature that's how we know a post should be featured or it's like an important post or whatever so we can do a simple verse statement here I'm going to also go ahead and create actually let's go for that as well so I'm going to copy this and instead of let's go publish I'm going to say featured and where we're going to do it very similar thing featured if the future is true basically that's the check we are going to do okay so let's go ahead and test this out as well I'm going to come open up our home controller and also say uh featured so get all the published featured and then take three of them now we also need to sort these so I'm going to say latest Now by default this latest will sort descendingly by created that so we can actually pass in a published ads so it's sorted by published app so we get the latest by that order and that should be basically all we have to do guys let's do a Reload and that's it seems to be working fine okay so now that we have this uh we can go ahead and use the same code for our latest post so let's go ahead and try this out I'm going to open it up copy this exact same code except actually the take three and so for latest post it's basically the same as future posts except we are removing this Future Part right and that should get the job now so let's go ahead and do a Reload and it seems to be working right and we're not getting the exact same posts even though we are sorting by publish by right so this concept tour I'm not sure whatever it is it's not future same as UT but this Nemo one is right so we have gone ahead and implemented the homepage functionality guys for today's episode now one more thing I would like to do before we end the episode is on our login and register page we are still using the jet stream logo so let's go ahead and actually fix that before we end the video so if you look at the login page it's actually using a blade component called authentication card logo so I'm actually going to go ahead and update this so let's go ahead and find this it should be inside our components authentication card logo should be at the top is over here so this is it so this is basically an SVG icon I'm going to go ahead and replace this actually with the icon we have like the logo we had at the top left so let's open up our header I'm going to search for it using a command P or control P if you're on Windows and at the top the logo should be somewhere around here I believe this is the logo as you guys can see so I'm going to go ahead and copy it and put it inside this authentication logo now don't get rid of the a tag I'm just going to basically put it inside the a tag and that should get the job done so let's go ahead to reload and now we get yellow code very nice now I like it to be a little bit bigger so instead of a text Excel I'm going to say 2XL so it's a little bit bigger on the log image actually let's go 3XL let's see how it looks yeah looks nice so now that we have it over here I'm also going to go ahead and update it at the top of the page so uh let's see yeah there's actually another logo it's called application logo if you guys can see over here right so we have authentication card logo when an application logo and seems to be basically the same maybe application logo is the smaller version I'm not sure so I'm going to go ahead and update this application logo as well because I want to use it on our application so uh on the header I'm going to go ahead and copy the exact same thing putting this on application logo and now I'm going to actually go ahead and replace what we have inside have inside our header with application logo I'm going to pass into a tag first because I do like that so we can say X application logo and I forgot to oh and let's go ahead reload and it seems to be working on the top bar I'm actually going to get rid of the code I'm just going to have yellow so let's go ahead and update the application logo and I'm going to get rid of the code so let's reload and it seems to be working now one more thing I'm going to do is I'm going to add basically redirect the user to our homepage if they click on this so let's go ahead and add the route I'm going to say route home now we don't have this route yet so we should get an error so let's go ahead and Define it inside our web.

php so let me close all these files open up web.