(Finale) 30 Days to Learn Laravel, Ep 30 - The Everything Episode

[Music] okay all right is this thing running recording we're good I don't know how much time we have well I need to close those curtains too they could be here any minute but I didn't want to leave you hang in we can't have a 30 days course with only 29 days so here's the deal if anybody knocks on your door we never met you don't know lar Cass okay we met may have to go quick but let's get started now I do have one compromise we need to make in order to fit all of this in to a single video and I'll show you now here is my larel herd rout directory and yeah you can see pixel positions but I also have a backup version where I've been working behind the scenes to save us just a little bit of time so we're going to go into resources views components and just this once I'm going to ask forgiveness for copying a bunch of form related components so that I don't have to manually type them out trust me we'll quickly go over it but you've seen this before you're already familiar with it let's skip over this process so I will copy this directory switch back to our real project in resources views components and I will paste it in and yeah we'll talk about this more in a moment cool so now let's start with authentication I'm going to go into my routes file and let's set up our endpoints and I'm going to do these all at once again just save a bit of time so register we'll hit a how about registered user controller again this is a recap of the authentication episodes and this will hit a create action next when you post that endpoint that will hit a store so we are storing a new registered user and of course ignore the squiggly lens just for a minute uh next login so if you make a get request to login this will hit uh again off controller login controller session controller whatever you want uh this will hit a create action because we are creating a new session that's how I think of it next when you post to that endpoint that will hit a store action and then finally let's do a delete request to SL log out and yeah that will hit a destroy action all right let's create these controllers now PHP Artis make me a controller called session controller and let's set up a full resource for it and then let's do another one but this time for registered user controller all right so yeah let's import these and let's start with registration all right and later of course we will remove any actions that we don't make use of all right so this is going to load how about off. register in this case I'm going to use a different directory name and that's fine and also again in the spirit of saving time I'm going to make use of my editor a bit more so in this case I can option click and create the view all at once and you'll see it automatically creates the auth directory in that file and that's going to help us a lot all right so let's create a layout and yeah let's start with a page heading we'll call it register and yeah how about font bold let's Center the text I want it pretty big so how about text for Excel and a little margin below it okay so I can imagine that this is a standard page heading which means why don't we move it into its own component like this page heading. blade. PHP and paste it in all right now this will be our slot cool so now if I switch back we can swap it out with page heading okay now I'm going to use some of these form components so again yeah if you take a look at them you've done these before right this is what a button looks like and mostly we're just uh extracting Tailwind classes but we do have a couple things that might be nice so I have one component called form and this will create a form it adds some default classes and then it also handles uh figuring out whether to add the csrf hidden field and the method field so notice it defaults to a method of get but if we change that to post or put or patch as long as it's not get it knows that we always need to include these two things which you learned about in the forms lesson but yeah other than that here's an input so I create a field and a field is just a wrapper for an input it contains a layer it contains the input itself and it contains an error you've seen this a million times and if you want visit GitHub and you can inspect it and copy it over to your project okay yeah once again it's going to save us so much time just give me this one all right so let's build up our forms and do note whenever you have a component within a directory you need to do the directory name Dot and then the component name all right so the method in this case is going to be post and the action is going to be register all right so first step I'm going to need an input and for my inputs I accept a label and a name and it takes care of the rest so the label is going to be your name and then also the name for the input which just happens to be name in this case all right let me show you what this looks like in the browser if I visit SL register yeah there we go looks good to me all right back to PHP storm all right next actually real quick let's just stick with name that way this one can be email now in this case the type for the input should not be uh text it should be email all right next I want two more so we will have one for the password and then also you have to confirm your password so password confirmation all right password and type for the input is also password and this is password confirmation and make sure it takes the the same shape all right next down at the bottom we could have a form button and this could say create account and let's have a look yeah name email password and create account but notice there's no padding at the bottom maybe I could add a little padding to the body here I think that's okay pb10 just to push it down a little bit and that's fine maybe even a little more actually yeah that's good now think about it when you register you also need to create an employer so I have a divider component and that just creates a little line uh as you can see right right here yeah just a little divider and then we're going to have a section for the employer details for example let's copy this I need a name for your employer so how about employer name and the name for this input will be employer and then also we need one for the logo so I will call that logo and this is a file input so I'm going to set type to file in this case so yeah notice any attributes I provide here of course will be uh passed through here and that's how attributes Works in this case I'm just extracting the defaults into its own array so that it's easier to consume and that's a good approach you might want to take all right back to Arc so we have all of this and then the employer name and logo all right next as you probably know anytime you have a form that will accept a file upload on the form tag itself you need to set the ink type to uh multiart SL form-data and that's just how it will be encoded in this situ situation pretty standard HTML stuff there all right so let's go to registered user controller and when we submit that form we will now hit this endpoint so let's die and dump all of the request data all right magic I'm going to fill out this form all right let's create the account and there we go we have our attributes while we're here notice that logo is actually an instance of a larel class called uploaded file and you're going to love this it's going to make it as easy as possible to store this image where ever it needs to go whether it's publicly available or even uploaded to Amazon S3 or something like that all right let's get to work so this time why don't we use request not as a helper function but instead using an object instance like this so we're going to validate and by the way the API is identical okay uh let's see if my editor can help me a little bit with the rules we want to save time anywhere that we can yeah it's not perfect but it'll get us going okay so validate the name the email email verified at is not required nor is remember token password is required and it should be confirmed and then I'm going to use the password validation rule make sure you don't accidentally grab the password facade you want to illuminate validation rules password and I'll set the only requirement is it needs to be at least six characters next what else uh email Let's ignore the maximum for now uh and it should be unique on the user's table and specifically on the email mail uh column this is actually automatic because it will fetch that from the name but if you want to be explicit yeah this is just saying hey look in the users table and see if there's any email field that has the current uh email and if there is that's a no-go we can't have two users in the system with the exact same email address it needs to be unique okay but next you remember we also have employer specific validation so we have a couple options we could group them all together or what if we tried this let's say user attributes and then I will do another one for the employer like this employer attributes and this can change to and actually let's get uh PHP storm to do it some rules for the employer and yeah we just need this here all right so you have to give us a name and you have to give us a logo we'll make that required for now but also I want to ensure that this logo is in fact uh an image for that I can use a file rule illuminate validation rules file and let's set the available types and yeah you can give us a PNG whatever you want here jpg webp anything you want to add there maybe webp too and that'll be enough now here's why we split it up I can now do things like this user create user attributes whereas otherwise I'd have to do something like uh array accept or something like that to Omit these from being passed to user create and the same for uh updating the employer so this just makes it a little bit easier create a new user then log in the user off log in the user and then yeah let's create the employer yeah we'll do that right here so we'll say user employer create and yeah because we are accessing the create method in this way it will automatically assign the user ID uh to the employee record that way I don't have to manually set it it happens automatically now we could do something like like this where we set employer attributes but in this case we need to do a bit of work first for the logo I need to store the logo in the proper location and then wherever that path is I want that to be referenced within the employer uh table record so here's what we'll do now you'll remember that the uh request logo field when we saw it in the browser actually was an instance of ll's uploaded file class and that's really cool because now we have some behavior on that class to store or the image wherever it needs to go I'm going to put it in a folder called logos okay let's talk about this uh if I go up into my config directory there is a file systems configuration file so this is for storage do we want to store files locally or with FTP or S3 uh it just depends on what you want to do and I can see the settings for each of those uh discs or drivers here so yeah in our case these will be publicly accessible avatars so I want to use the public dis by by default so I can set that within my environment file and yeah notice file system disk I will update this to public all right and that's it believe it or not you're really going to love this so when we upload the image it will be saved within the storage app public and it will create a new logos folder and then we will create a symbolic link from here to uh the public directory so that any person can access these images that's the way that works all right now once it uploads image it will save a path to where that logo is located so I can then pass that uh to our create Method All right so the employer's name will be employer attributes name or of course you can grab it right off the request and then the logo will be uh assuming we did everything properly the logo path all right so validate all of the attributes create a user store the logo create a new employer and then how about redirect to the homepage all right let me take a look at this good good good good and create oh actually no employer attributes should be employer that was the name of the input we assigned within the view other than that I think that looks pretty good all right so it looks like we have only two actions here so I can get rid of this and this and yeah from now on I will do this behind the scenes after the video again to save us a little time let's give it a shot all right create the account and it fails oh maybe it wasn't called employer let's have a look let's go into register employer name yeah employer logo all right let's go back to registered user controller ah yes I bet you saw that all right so of course that key wasn't available all right try it one more time all right and there we go so yeah I'd like to see a little more feedback and we can do that through flash messaging but if I switch to users sure enough I have a new John Doe account the password is hashed and we also have an employer who uh belongs to that user so I think we're all set for registration next I will switch over to login and log out so let's go into session controller for create this will hit off. log in and let's create that all right so let's steal a little bit of the code here so this will say login and this time we will post to log in and there is no uh file input there okay I think all we need is uh an email address and a password all right how's that look I think that's right all right back to session controller that will now hit a store action and you know what we already wrote this functionality in the authentication episode so if I switch to GitHub where we have the source code for the entire series if I go into app HTTP session controller I bet yeah let's take a look at this it's all the same stuff right show the login view validate the request so let's take the raw data here copy it and see if we can just paste it in here all right so yeah that looks pretty good we try to log the user n if we couldn't then we attach a validation error to email we regenerate the token as we learned that's a good practice and then we redirect again to the homepage in this case and then finally for Dory yeah you just do off log out and redirect and you're done so that saves us a bit of time which we needed let's have a look let's go to slash login let's try to log in John example.com and we're in all right very cool but yeah notice how if I visit SL login I still see that form which doesn't make sense so let's do a little bit of authorization if you think about it to access this page you should be a guest same for this one but not for this one actually in this case you need to be signed in so let's say middleware off and then for these two and actually also for these two you need to be a guest if you're signed in it doesn't make sense to visit a register page so I'm going to use a route group but first add a middleware and we'll say you got to be a guest in order for this to work okay so now any route nested within this closure will receive the guest middleware and this is a wrapper or instead for each of these routes we could do something like this and that would do the same thing all right very good next let's go into our layout file and here is our nav section so yeah right here why don't we tweak this I only want to see this post- a Job Link if you're signed in so I'm going to use this off directive like so and then I'm going to add another one here called guest now I could do off else and off but sometimes I think this reads a little bit better if you're a guest show this if you're signed in show that and actually while we're here why don't we say job slre uh for the posted Job Link because we know that's what it's going to be ultimately okay now if you're instead a guest let's repeat some of this here all right so we will have two links to sign up or log in all right so sign up would be SL register and login would be SL login let's have a look okay so if I refresh yeah I still see post a job because of course I'm signed in but let's open up an incognito window and yeah now because we're not signed in I do see sign up and login and those do work perfect all right so let's close those out and I'm back to the view where I'm signed in all right 5sec breather real quick I get it I know I'm going really fast sorry it's got to be that way it's day 30 we got to wrap up okay back to work what should we work on next uh how about this big search bar here yeah okay let's go into job SL index and let's see what we have yeah right now we have standard form tags but I'm going to replace this with our new X forms. form tag and this will make a get request which is the default but I want to send it to how about search and we will Implement that route all right next within here let's add and input the name will be Q for query that's really common the placeholder can be something like web developer and let's have a look in the browser ah I get undefined variable label yeah so my input component is expecting a label but in this case we don't actually want one so if I switch through we can see that the uh label is passed to this field component and the field component checks whether lab is truy okay so if I switch back all I need to do is set label to false all right switch back and that solves that problem okay I think I need a little more Breathing Room below the title so why don't we say class of mt6 and yeah we kind of reproduced what we had before cool so now yeah take a look if I search for how about laracast and I hit submit I do get a 404 because I haven't yet implemented that routes all right let's do it now let's duplicate this if you visit SL search again keep it very simple let's load uh a search controller and actually this time I'm going to show you invocable controllers so every once in a while you will have a controller that will only ever have one action in these cases rather than passing an array and the action name you can just pass uh the the path to the class itself and then an invoke magic method will be called on that class it's pretty cool let's do that now PHP Artis make me a controller called search controller and oh you know what that's interfering with my route declaration so let's do that first and then uncomment this okay now I can import it and I will command click through and yeah if I create a magic uncore invoke method now this will be called and yeah this is this is great for situations where a controller only ever needs to have one action so I'll show you come back give it a refresh and we now have hit that invoke uh method okay so there should be a q um query within the request refresh and now that is set to lass and of course we can control that here cool so now we have everything we need to search our jobs table and this will be fairly primitive we're not going to use full text search or anything special uh we'll just say look for any job where the title is like uh this search uh pram and that should be enough so let's say job where the title is like the request query but then I'm going to say yeah any number of characters can come before that query and any number of characters can come after it so as long as this search query exists somewhere within the title I want it included in the result set so we will fetch that and then why don't we return that as Jason so we can have a look in the browser let's start from scratch let's look for something related to how about teacher all right we run it let's do pretty print and we get one result all right so now we just need to render A View to display those results and that should be pretty easy let's return a view and this could be like a generic view like results anytime you want to show jobs we can use this View and I'll pass through our list of jobs nice and easy all right let's have my editor create the view we'll have our layout we will have a page heading results and then let's do this let's go into job SL index and yeah we want this right here so I'm going to copy this and paste it in and I don't think we need that mt6 in this case all right uh yeah let's have a look back to the browser refresh and we have only one result but it does seem to be working let's try try one more time uh something related to TX and once again we have one result but yeah that's working cool search is now done at least the Primitive form of search is now complete we should also look for tags and things like that uh but you can work on that on your own so now think about it if we go back to our routes file let's set up another route for tagging so I could say visit tags slash and then some kind of tag name that will hit a tag controller and I will create that so make me a controller called tag controller cool and let's import that and yeah this will be the exact same thing so in fact if I go to search controller let's just copy that switch back to tag paste it in and now we aren't searching the database we are finding all jobs associated with a given tag something like that okay so let's go to our tag model and we don't yet have a relationship between a tag and a job but I think we do in Reverse yes so let's copy this bring it over to tag paste it in and now if I have a tag and I want to find all jobs it's also a belongs to relationship we just have to reverse it like that all right back to tag controller all right well now I'm going to ask for the tag and you learned about this through route model binding just as a five 5 Second recap yeah right here because we have this wild card here that's called tag and then we have a parameter name also of tag Lille is going to try to track down this tag for us but by default it's going to expect this wild card to be an ID so I can add a colon and say no actually the identifier here is name so if I visit tag slf frontend yeah I I basically want LEL to say select star from tags where name equals front end without that it would default to this and yeah we already reviewed this so that should be a recap all right so now I should have the tag I should be able to get the jobs for the tag right so why don't we just do this load the results and pass through all of the jobs associated with this particular tag all right let's clean up and it's so easy isn't it it kind of blows me away it's so simple all right back to the browser and let's visit some random tag how about UT oot all right and here are all of the jobs that are associated with that particular tag yeah cool so now yeah all of these tags should be clickable so if I click here that will show me all the jobs so that I can further filter things down that's great okay final thing and then I promise we're going to be done of course we need to implement the form to post a job so let's do that now let's go to my R file and we'll say right up here how about this let's duplicate this uh job SLC create we'll hit job controller at create and then I'll do another one here when you make a post request to SL jobs that should store a new job in the database and of course these need to have the proper middleware in order to post a job you need to be signed in all right let's take care of it so we have our create action that will return jobs. create let's have my editor create The View X layout notice how quick we can be um when we when we have our systems in order right let's do a page heading new job and say any check let's load the page job SLC create that works and further if I click right here it should load it cool let's build our form now this is going to make a post request to/ jobs and let's do this again I'm going to save ourselves some time you've already seen the basic process of creating a form input so I will paste in a few at once so we have one input for the title and a salary and a location next we need one for the URL so this is the URL to view the actual job page on your company's website next when you create a job you can optionally add a number of tags so I'm going to keep this very simple it's just an input and if you provide a comma separated list we will turn those into tags maybe not ideal de but it'll get the job done in this case next I'm going to have a button to publish the job and then I'm going to introduce a new one which is a select uh field so if I have a look at it real quick yeah notice it's just deferring to an HTML select all right so our options are part-time and full-time and this is where you specify what the schedule for the job is next right down here let's add it uh I'm going to add a checkbox once again input and type equals checkbox very basic stuff okay so the label for the checkbox is feature and cost extra yeah presumably if you built this on your own in order to feature a job you're going to be charged $100 or $20 whatever it is um we would want to note that but yeah we're not going to deal with billing or stripe in this series it's far beyond uh the scope of this course anyways I think that's it so the only thing I might do is add a divider to separate the main fields from the optional tags all right let's have a look in the browser and here we go to create a new job you got to give us all of this junk here and then you can publish it all right so that's going to make a post request to SL jobs that will hit our job controller and that will load this action now you can see here we have a form request I actually didn't review that uh in this course some people like them some people don't uh I would encourage you to take a look at them but for now I'm not going to dig into anything new so let's stick with the standard illuminate HTTP request all right let's get to work we will validate the request let's see what my editor can do for me I'm going to add a new job yeah pretty good I will take care of the employer ID so you need to give us a title a salary a location a schedule and then for our demo at least we're saying well the schedule needs to be either part-time or full-time so one way we can do that is through the illuminate validation rule class and I can say it needs to be the attribute value needs to be included in one of these and we can also set this up as an enum if we want but I'm not going to all right Next Step the URL is required and it should be a URL or if you want to make sure it's an active URL you could do that as well which is cool and then featured I will handle that a little differently finally we have tags and we'll keep it here and let's say tags actually can be nullable all right next I will save that to attributes and then I will manually handle the featured status so I could say Okay attributes add a new one called featured and that will be true or false depending on whether the request has a value for that featured checkbox remember if that input isn't checked I don't think anything gets passed right but if it is checked it's set to on or something like that all I want in this case is a Boolean so we will use that all right this looks good to me so let's go through the authenticated user let's grab the the employer we'll reference the jobs relationship and create a new one there and again to be Crystal Clear when we take this pathway when we create the job the employer ID will automatically be set in the process and further when we access the employer through the authenticated user we remove any opportunity to to fake who the current user is unless you're signed in you have no ability to create a job under a different employer okay so it sounds like we just need all of these attributes maybe accept the tags so here's what I'll do this time array accept and I'll provide the attributes and then the one that I want to exclude we could do that or we could access it through the request I think there's a request unless or request accepts a method as well so either of those would work all right now we have a new job record the final step is tags so why don't we do this let's see do we have any tags at all and what we'll say is if we don't have anything there let's just assume false I'm not sure if that's necessary we might be able to remove that but I'm going to keep it then what I'm going to do is basically explode that list of tags using a comma as a separator something like this so now larl backend front end that will turn into an array right of LL backend you get the idea let's then Loop over it so for each of those as tag then let's create a new tag so I need a job instance we got it here and I can say job tag and yeah you'll remember using tdd we implemented this tag method and this will try to find a tag with the name and attach it otherwise it'll create a brand new tag in the database with that name so yeah on this note keep in mind this is fairly primitive we could end up in situations where for example you have a tag called front end in the table but then this uh as well and and we should consolidate that as much as we can but we're going to take a shortcut where we can find it all right let's pass it in and I think we're done so let's redirect to the home page when we're done okay let's get rid of all of these and this is our let's clean this up this is our job controller all right let's go post a job I'll fill this out like magic like so all right so we have a position for a laracast video editor pays 90 grand here's the link to the work page and here are some optional tags let's publish it all right I would expect to see it right here right let's see where is it ah it's at the end of recent jobs here's what I think I did wrong let's go into job controller and maybe I got the order wrong maybe uh recent jobs is actually first and featured is second yeah I bet that's what I did okay back to Arc give it a refresh and again I don't see it here but I do see it at the end okay so we just need to reverse the order why don't we say the newest jobs show up top job I want the latest ones and give me the results and group them uh according to whether they are featured or not and that should do it come back refresh and there we go we have our brand new job so let's see can I view all jobs associated with that tag yes I can now I should be able to click on the job and it will take me to the job listing page let's fix that and then I promise we are done all right so here is the H3 it's now going to be an anchor tag that links to the jobs URL like so so let's do the same thing for job card wide like so and cross your fingers refresh click on this and it load the lay cast page where you can view more details the only thing you might want to do is set a target of blank uh for both of these switch over to this one as well and that way some people don't like this but in this scenario I think it's okay that way the user doesn't completely abandon your job's page it instead opens the job within a new tab so again imagine you're looking for jobs related to video work all right here we go click on it and now we can review more and ladies and gentlemen that is all I'm going to cover today oh wait actually no no no I have two more things sorry two more things to show you we have to update the job card to show the new employer logo and then I also want to display a logout link and make a couple tweaks to make our query performance better all right let's go into employer logo and yeah right now we are hardcoding the path but now we can swap it out with the employer logo okay so now let's ask for an employer when you load this component okay I believe we referen it in job card yep let's pass through the employer job employer and then I think we do the exact same thing in job card wide so I will paste that in and remove the width okay so now let's switch into our component and I'm going to pass this to laravel's asset function and that will prepare a full URL to the asset and remember when you upload a logo it goes into the storage app public logos directory so here's one of the logos I uploaded and now all you have to do is Sim link it into your public folder which is globally accessible so for that you can say PHP Artisan storage link all right so now notice we have a symbolic link right here yeah there it is and now they're accessible all right let's go to Arc and we see it but the size is wrong all right let's go into employer logo and yep we accept a width but we never used it so let's do that now come back and that looks good to me all right next let's go into job controller and remember to always optimize your queries if we have a job and we're going to access tags and employer information off it if we're not careful that's going to lead to an N plus1 problem as we learned about so let's always use the wi method to eer load any relationships we require such as Employer and tag and yeah you would also do the same thing for example in uh search controller so make sure you say with employer and tags and whatever else you happen to reference and when these queries get a little long yeah make sure you can put them on their own line and if you want you can even call this query method to start a new query and that allows you to keep all of your U your your primary filter methods on their own lines and that does the same thing all right last thing and then I promise this time I'm letting you go uh if we switch to Arc yes we have sign up and log in but if I log in as John there's no link to log out so that's my final step if you're signed in I'm going to add a form to log out that'll hit the log outout endpoint and it's going to make a post request but of course we need to add the csrf and Method tags and yeah we're not using the form component because that has some styling for the form itself and the button and we don't need that in this case Okay so yeah now let's do a display of flex and yeah it looks good to me so I can post a job or I can log out and this time ladies and gentlemen I'm done I can't do any more in this course well I can't believe it but we are now officially positively undeniably indisputably irreversibly done with 30 days to learn larel it has been a massive effort for both you and me so if you have made it through all of these 30 days trust me I've watched a lot of courses myself and rarely do I complete them so whether you intended it or not I'm going to take that as a compliment all right so let's talk about this come here I have recorded iterations of this course for about 10 years now it goes all the way back to 2013 with larel 3 from scratch if you can believe it and yeah it never fails every single time people will complain that we didn't cover such and such topic you know there's there's nothing here about package development what about apis what about events you didn't talk about live wire or inertia how come and I'm going to tell you the answer to that question right now the reason is because we didn't well okay you know as the saying goes your learning doesn't conclude the moment you finish a beginner related course I'm sorry to say it has only just begun so yes I would encourage you to learn more about lifewire and we have a course for that on lass yes you should learn more about API development and we have a course for that yes you should learn more about Aura JS and we have a course for that but do they belong in a beginner specific course well that's up for you to decide but I chose no uh there is such a thing as giving people too much all at once and I would rather you complete the course and then move on versus become overwhelmed by the material in one course okay so this is somewhat of a Bittersweet moment for me because I know most of you are watching this as a free course maybe even on YouTube and you're never going to sign up for larc cast even though did you know that you can sign up for lar cast for $115 a month 15 bucks I went to Subway yesterday and it was 15 bucks you could access everything we have ever created for 15 bucks a month but I already know most of you won't some of you will and I immensely appreciate it but most of you won't you'll finish this video you're probably already done you're probably not even listening to me at this point you've already moved on to something else and we'll never see each other again and that is a Bittersweet moment so I'm going to finish up with a song to show you how I feel when you don't sign up for lass let me show you [Applause] is [Music] [Music] the [Music] the [Music] [Music] [Music] [Music] [Music] d [Music] [Music] hen's oh my God they're here P me on [Applause] [Music]

Channel: Laracasts

Views: 4,163

Keywords: web development, php, programming, laravel, laracasts, jeffrey way, coding

Id: B0zimPfuznw

Length: 43min 20sec (2600 seconds)

Published: Tue May 28 2024