Laravel + Livewire todo app (and so much more)

building a to-do app with laravel is is very easy I'm going to show you one way to do it and it's going to take us just a few minutes but you got to understand this doesn't really make a lot of sense larl is designed to build real applications if you want to build a little you know toy with it you can but that would be like uh using a Lamborghini to go to the grocery store possible but not not really what it's designed for let me show you how to do it we're really starting at the beginning here I'm going to create a brand new project and we'll just call it to-dos this is going to pull down the L Val framework and install it and get it ready to go so now if I change into the to-do directory and use herd to open it well there we go there's our website too. test now what I'm going to do is I'm am going to require laravel breeds which is going to set us up with um just a basic starter kit so I'm going to pull that into the application we'll clear this out and then we can say PHP Artisan Breeze install and this is where it gets fun these are all the different Stacks that we can use for our larel application if you just want plain old larel Blade with alpine JS you can do that there are two live wire options there's a react option A View option and an API only I'm going to go with Livewire functional API because it's kind of fun so we'll do that one dark mode support for free I don't have to pay for this yes let's do dark mode support and I like PHP unit over pest so we'll go with that of course node spit out some nonsense so that makes sense now if I run herd open again and we look here this is our website again remember we haven't touched a line of code yet this is our website again and look off totally built in so we can log in here forgot password I can send a password reset link I can register all of this completely built in already handled for me I don't have to do a thing so that's pretty nice in fact let's go ahead and Seed the database so I'm going to put one user in the database so I'm going to say uh let's clear this out so you can see it a little better let's say PHP Artisan DB seed and that's going to put one user in the database um um and so now I can log in to this app with test example.com and I think the password is password and look now I'm logged in to an application I've got my profile over here I can change anything that I need to change or delete my account and here is my dashboard scaffolding we haven't even written any code yet so I'm going to start writing some code I'm going to create a to do model and a migration laravel has an omm and migrations built in so we're going to create create both of those and then we're going to create the Live Wire component that is the actual to-do list so first thing I'm going to do is create the model I'm going to use the AR shorthand which is just PHP Artisan so I'm going to make the model called to-do and I'm going to add this little flag that says go ahead and create the migration for me cuz I need a database table to back it up right so we've got the model and the migration let's go look at the migration first so if we look at this migration we see laravel's gotten us sof to a pretty good start create a table called to-dos with an ID and timestamps I'm going to go ahead and let's associate every to-do with an authenticated user because that's what a real app would do right so foreign ID for user class and then we'll make a text column and just call it what do you want to call it task let's just call that the task there and I think that's probably good for the table uh we can go ahead and run our migrations now so now that table is in the database and we're ready to go let us c um let's grip for volt I think make volt so we're going to create a new volt component which is um this is the functional API for Livewire so let's clear this out and say AR make volt and it should ask us some questions that's pretty nice let's call This to-dos And there we go so if we open todos over here we see we're given some uh we're given a function called State and then we can do whatever we want first thing I want to do is say hey and figure out how to get this onto the dashboard so if I'm going to open let's look for dashboard this looks right you're logged in so instead of that what I want is Livewire to-dos so I'm going to put that component there so now I see hey on my dashboard so I know that the component is wired up and living on the dashboard now we can start to actually write our little to-do app the first thing I'm going to do is I'm going to use this state function here and I'm going to declare task as a a piece of reactive State and then down here I'm going to start creating the form we'll handle submit in a second first thing I want to do is input type equals text and I am going to bind this input to that task variable so I'll say wire model equals task and then we can let's go ahead and just dump out task down here um let's add a little buffer there and by default this is not going to be reactive let's just go ahead and make it live just for this little demo here so I can say hello and it shows up right there so we have our binding all set up I'm going to remove this live now because I don't need it to be live because what I actually want to do is submit the form not do some sort of live updating here so action equals what what are we going to put in the action here this is one of the great things about about Livewire vault is you can just reference a function we're going to reference an add function that's going to be our Handler and instead of using action we're going to say wire submit equals add you could call this handle you could call it whatever you want so I'm going to put add equals function up here so that is now our form Handler doesn't do anything yet but that's okay and I'll put a button type equals submit down here and we'll say add that should be good enough and if we check back in the browser we see it's not going to do anything that's cuz we haven't let it do anything so first thing we're going to do is let's just clear out um let's just clear out the task and we'll say this task equals nothing so if we do that and we click on it we see okay great our Handler is wired up because we are changing that state that task state is being changed we're just nulling it out but that's not really the thing we're looking to do what we want to do is we want to create a new Todo model and we'll just set task equal to this task and then interestingly it does need to be bound to the user this is the worst way to do it but I'm going to show you um we'll say o and we'll just get the ID from the oth provider and that should create the new to-do this is not the best way to do it and this is not going to work let me show you why so coming back over here test add and we hit this big scary warning this is laravel saying you haven't explicitly defined what attributes are fillable and so to protect you from a mass assignment vulnerability you just can't put anything in there so what I'm going to do is I'm going to hop over to the to-do model I'm going to come over here and I'm going to say I promise I'm being a very good boy and you can just put anything you want in there so by default you could say um you could say like actually I don't want the user ID to be fillable I'm just going to be very careful so I don't need that at all now test great maybe it worked we don't really know let's see if it worked um the other thing we need to do down here is have all of the to-dos so if we say uh we can do for each todos as Todo and then uh end for each and then we can just output what do you want to do we'll do too I think we called it task so that should be something let's go ahead and just do a div here and a div there and then we need to pass this this to-dos we need to pass that into the view so we can do that with another state function called with and we'll just say with um todos at as not that one to-dos as what do you want to do we'll start by doing it wrong so let's start by doing it wrong and say return to-do all return all of the to-dos so now if we oh forgot a there we go so now we see all of the to-dos and it's working so we have our to-do app there are a few glaring errors though this is all of the to-dos not the users to-dos so instead of doing um to do wear user ID any of that let's just go over to the user and let's just say that the user public function to-dos return this has we want to say that the user has many to-dos so we're just going to say has many todos and that should be good so now here we can say uh off user to-dos and that still shows us all of the to-dos because we only have the one user um but this is specifically the user's to-dos now that that relationship is there we can clean this up a little bit we can say off user todos create and now we no longer have to pass that user ID in all we need to pass is the task and we are in good shape so we can continue to add those there and now we have to-dos that are scoped specifically to the user the final thing we're going to do here is we're going to create a way to delete to-dos so we will say that this is um a function that accepts a to-do as to-do and then it just calls to- do delete that's all that's all that this function needs to do we can make this a little bit prettier that's a pretty basic function let's add um div let's just add a button wire click equals delete and the thing that we want to delete is the specific to-do so we'll just put an X there and we'll say uh too ID so we're going to delete by primary key now if we come back out here and we click on Boom now they're gone so those are being deleted from the database just like that is it the prettiest thing in the world it's not but it was very easy to do and we could clean it up with some Tailwind if we wanted now we've created our little toy application this is maybe good Twitter engagement bait but this is not the extent of a real application right so let me show you a few more things larabel can do that will help you if you're building real stuff not just building engagement bait so here we go the first thing we are going to do is we're going to create a new email so we're going to say make mail to do created and so this email will be sent out every time someone creates a new to-do which is kind of annoying but hey that's all right um so now in here we can just say mail to off user send new to-do created and we probably want to pass in the to-do that was just created so that this email message can reference that that's pretty easy we can just say right there and so now anytime a user creates a new to-do an email is going to go out kind of annoying but that's right it works for this example now the problem is we're now sending an email as a part of an HTTP request which is not super ideal so we got to figure out some sort of like background queuing system and well this isn't a very long part of the video you just put cue you just say cue the email to be sent and then it returns immediately and then in the background that email is going to be sent out this is all first party we we Haven an inst anything this is all default larabel now let's imagine we also want to send out an email every morning when there are overdue to-dos we want to we want to bug people and say hey you said you were going to do this it's time to actually do that let's figure out we can do AR make I think it's command so we can make a command and say um let's do call it overdue todos and now we have this overdue Tod do and we can come in here clean up some some of this um and we'll change this signature to to-dos overdo we'll say to-dos where and then you would put your date restrictions in here um and then we could Loop through them and send an email right so for now we're just going to say um this line uh overdo todos and now we can run that by saying to-dos overdue and so now that's going to you know in theory Loop through all the to-dos looking for ones that are overdue and create new emails to send those out kind of a pain right because now I got to come in here every morning I got to ssh in to some server every morning no of course not let's um let's go to the console definition and this just was here already we can go ahead and get rid of that and instead of running this Inspire command we can run overdue todos this way so you can pass it as you can pass it as a class or you can say um to-dos overdue you can reference it by the signature that you set up so whichever one you want we'll stick to this one for now so this is going to run the to-dos overdue command but we want to run it let's run it daily and let's run it at um what do you say let's run it at 6 a.m. but 6:00 a.m. uh central time so we'll say America Chicago and in fact let's only run it on weekdays so we don't annoy people on the weekends now we have set up a schedule to run every single weekday at 6:00 a.m. to mail out overdue to-dos to your users this is the kind of stuff that you would do in a real application right this is why laral is so great because it is batteries included and now you may be thinking like oh well what like what mailer does laravel use well that's interesting because you can use any mailer that you want you can just come in here and you can pick SMTP mail gun SCS postmark you can pick any of these mailers and the configuration is already it's already fully set up there what kind of database do you want well you just pick by default it's set to SQL light but there's SQL light there's my SQL there's Maria there's postgress there's SQL Server if anyone uses that so Lal is set up in a very driver Centric way and that it will handle doing everything for you and then it will call out to the correct mailer or the correct database to do that external service type stuff if you don't like Live Wire that's totally fine this is not the only way to build it you could use view or react with inertia you could use view or react with a pure API you could just use HTML and Alpine if you need minimal interactivity the point is Lille has everything you need to build a real application as well as a little to-do app that you can put on Twitter Twitter if you want to watch a little bit more about laral octane which is a way to run your apps even faster I'll put a video here until the next time see you

Channel: Aaron Francis

Views: 35,273

Keywords:

Id: oAUbpUcgGx0

Length: 16min 41sec (1001 seconds)

Published: Fri May 17 2024