Lets Build a Savings Plan Calculator in Laravel | Arturo Rojas | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Lets Build a Savings Plan Calculator in Laravel

teacher avatar Arturo Rojas

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

10 Lessons (1h 16m)
    • 1. Intro

      1:23
    • 2. New project

      2:11
    • 3. Layouts 1

      11:40
    • 4. Layouts 2

      4:03
    • 5. Wizard 1

      13:48
    • 6. Wizard 2

      16:41
    • 7. Wizard 3

      4:18
    • 8. Create items

      10:51
    • 9. Home

      10:15
    • 10. End

      0:27
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

20

Students

--

Projects

About This Class

Building new projects from scratch can take time. Why not make use of the many free resources available to you. Take advantage of a free admin template and integrate it into Laravel.

Meet Your Teacher

Teacher Profile Image

Arturo Rojas

Teacher

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Intro: Hello and welcome to my new course. This is a rather short course where we're going to build a small project in which we are going to incorporate a few different things. First, we're going to mix JavaScript in PHP, using J Query in a few other different third party JavaScript libraries. This libraries will come packed in another thing that we are going to incorporate into our project, which is a free dashboard theme called gentle Ella. Using this technique, you will reduce the time you spend trying to lay out the sign of your project by using 1/3 party already build theme, which comes back with a lot of functionalities that you can just using your project and create a good looking project in a shorter amount of the project will focus mainly on building the layers of our project, using the pages that come from the gentle L. A dash work. Then we are going to also incorporate some third party vendor scripts made in JavaScript and finally give the projects some functionality in PHP, specifically using lauraville 5.4. I really hope that this techniques will help you improve your development time and also help you create better looking projects 2. New project: Let's start by creating a new project using composer, and we're going to call this project saving split for the version of a lot of Well, we're going to use 5.4 now that the project has been created. What I'm going to the next East to set up a veritable host or a Web based that I can use to see my application. I'm using Homestead. So to do this, I have to exit out off the military machine and then edit a file cold homestead dot Yeah mo in the sights section. I'm going to add a new entry cold map, and this will be the name off the site locally. So let's call it something like savings, not local. And we're going to map these new site to home vagrant code and then the name of our Project folder, which is savings plan forward slash public. Let's save and close, and now we have to re provisioned my beautiful machine using vagrant reload de stash provision. Once this is ready, the last step will be to edit a file called forward slash E. T. C. Forward slash hosts. And here I'm going to add a new entry for our website using the I P address off the veritable machine, which is 1 90 to 1 68 the 10 dot then, and the name of our website, which is savings dot local safe and exit. Now we can move to the browser and typing savings, local forward slash and we are able to see the level welcome page, which means that we have a working website for our product. In the next video, we're going to download the Dutch port template files and use those to create our application layers. 3. Layouts 1: for this project, we are going to use a free boots wrapped three l mean template called gentle Ella are Make sure to leave a link for the Kid Hope repository in the resources section of this video. Here you can have access to a demo for the thing as well as the complete documentation. What I'm going to do is to simply download the entire project using clone or download and then download sip. After that, I'm going to unseat the project and open it in my editor. And as you can see, I have the complete project opening my editor. And as you can see, this gentle L. A project comes with Appeals folder, the documentation in some production files, as well as a complete set or vendor scripts off, which we are only going to use a few of them. Now let's open our new project in the editor. We're going to create a new global layer for R A P occassion using as a base the files from the gentle L. A project. First, let's go into resource is views and create a new folder called Layers and within layouts create a new PHP file called a PP that blade about PHP. You can access the entire demo of the gentle L. A project by simply opened their files in the browser. In this case, I open index dot html, which is located in the production folder. We are not going to be using all of the aspects of the demo. For example, we're not going to have this folder here with not occassions. And we're not going to have any use of avatars for pictures for our global lady. And I'm going to use a file located inside extras playing page. If you access that, you can see that this is a very simple page, and we can use this page as a baseline for the layers of our project. So let's open plain on their score page that HTML in our area. Here's a file, and what I'm going to do is to simply copy all of the contents of the file based it in our layouts. Violet, we just created and then start removing things that we are not going to use. So let's copy. This moved to a project and then based I'm pacing this inside app. The blade of beach being Now let's start fixing this file and turn it into a layout file that we can extend from in the rest of our application. For example, this section right here will define the language of the entire page. We can do this programmatically by using, Yeah, get look up. That way, if we want to change the language future, we can simply added the settings file over project for the title of the page. Maybe we can use the application name step, and we can access that using FIC at May. Next, we can see that we are using a few vendor scripts. So what we're going to do is to copy these vendor scripts that are using globally throughout the application and then modify the bath to those files. So back to our gentle L. A project, I'm going to look for the vendor folder and then copy the folders that I'm going to need. In this case, I'm looking for the Bootstrap fund, awesome and in progress folders. I'm going to select all of those three folders and then copy. Now let's move to our project and within the public folder, I'm going to create a new folder cold Bendel's and I'm going to paste the folders that argue Skopje Inside this folder. As you can see now, I have bootstrapped Sean awesome and in progress inside my Vendors folder within the public folder of our project. Now all I have to do is to modify the path in our Leggett's file and simply remove these two dots at the beginning off the path. We are also going to need this custom CSS file, which is located within the Build CSS folder. So let's go back to the gentle L A project and let's look for that build further, which is right here. I'm going to go be the entire build folder and then paste it in our project. We're going to face it directly in the public folder right here. Now I have a built folder here with a few other folders inside. Now I can see we've come here to our layout's file and remove these two dots from the beginning. Okay, let's move on to the body of our layer. If you study the structure of this page, we can see that it is made up of a top navigation bar, a left menu, the main page content and also a footer. So let's go back to the gentle l. A project and start identifying those sparks so we can split them apart and create smaller layouts that we can then use in our main layer. Fire back to the gentle L. A project. Right after the body. We can see that we have a main body contained attack, which is a deep. This will contain the entire page. And then we have a main container death, which serves as a rapper for the content of the page. Now, this next Steve will contain the entire side menu of our application. This one right here. So I think we can take this Steve in, put it inside a smaller layout file. So let's go ahead and create a new file inside resources to use layouts. This will be a PHP file cold navigation about laid that beach be And let's take this entire dif from over here, caught it and then baste it inside. Navigation that played a peach pink. Now back to our main layout we can use include an ad that smaller layer two are mainly out file. We seem clippers and name layouts navigation. Now, as the common says, this next Deve will contain the entire top navigation, which is this one right here. This whole grave are So let's create a new layout file inside layouts. And let's call it Heather. Don't blame. Got pH being analysts status entire deep. And we'll throw in the comments as well. I caught it and then based it inside here, there that play that beach mean back in our main layout file, we can simply include layouts not headed. As you can see, this next Dief is the one that contains the page content. So what I'm going to do is to create a small demo page that we can use to test out our new layer. So I'm going to grab the contents of these dif over here starting from here all the way down to here and then cut bet, create a new file within views and call it demo that blade that PHP. And just to clarify, this is not a layout file. This is an actual template that will use the layup file so that we can test it out. That is why I'm not putting it inside layers folder putting it in the views for and finally , let's space the content that which is Scott, which will be the actual content, but for the template. And there are a few extra steps that we have to do on this file, but we'll come back to it in just a moment. For now, let's just go back to our layout's file. Then in here I'm going to say yield content, which will output the content author template files. And finally, we have the food or content that we can actually separate into a smaller lay out. But for now, we're just gonna live like that and remove this section from here and simply at the application name again, again, you can actually take base and move it into a new file and you smaller template files, just like we did with navigation and Heather. But given the size of it, I'm just gonna leave it there for now. Okay, let's go back to our template file the demo that Leda pH being and finished anything that's final. First of all, we need to wrap this entire content using section content. I had one here and then another one of the end Khaled End section. This will be note all of the content section that we specified in our layout file here. So whatever is in the content section of the template file will be displayed right here. Next, we need to let the template file know that we're extending from the main layer from so we use extent layouts, jpp. Now, if we scroll a little bit more down, we can see that we still have some work to do because we have some. You have a script file that are going to be used globally throughout the application, and we need to bring those in from the vendors colder. We already have bootstrapped in progress in thes custom Js file. So all we need is J query in fastly. Let's go back to our gentle l A project in From the Vendors folder. Let's look for J Query and also fastly Let's go pee those Let's go back to a project and based him inside public fenders. Now we can remove these two extra dots from the path. Okay, To test this out, let's open the Rouch file, which is located inside the Routes folder, and I'm going to modify this route here too quickly. Test our new template show instead of returning view. Welcome. Which is this one right here. I'm going to return. Are they move you? So if we go back to the browser to this welcome page that we had before and simply refresh , we can see that our layout file is working. And it looks exactly like the one in the gentle L A project minus some images that we didn't bring it, and we are not going to need anyway, from here, you can start modifying the content, removing anything that you don't need and get the template ready for the rest of the application. And we're going to do that in the next video. 4. Layouts 2: let's finalize our templates by removing anything that we don't need. For example, we can see that we are not going to need any navigation on the top Heather. So let's start by removing those this open D heather file located inside views layouts and remove anything within this u L tax. Make sure your file looks like this. If we go back to our browser and refresh now, let's move on to the side navigation. For now, I'm just gonna leave one link, which is called home. It's not going to be a drop them. It's just going to be a simple link. Also, let's make sure that this also matches with our application name. And let's remove this section here, which contains the user data. We're not going to have any user authentication of any sorts, so let's hope in the navigation that bladed PHP file and starting from the top. This section right here is the one that the signs the project name. So let's change this a drift to just go to home and this over here we can remove and simply at our application name. Now let's remove this section here, which is the menu profile. Quick info is removed that completely and from the side by the menu we can remove these age three from here in this first list item, we can just leave it the same. Let's remove this span, which is the drop down arrow can remove these you well section from here, which is the child menu that we don't have. Finally, let's remove all of the other least items. Also, we can get rid of these other many section here. So the cyber many will simply look like this. Finally, let's get rid of this menu. Food or buttons. Let's go back to browser and see our changes. All right, that looks better. Finally, I'm going to remove this title here in that search bar, and I think that is located in the actual template files. So let's open they murdered later. Beach means this removed its title from here and also this Dave that contains the search bar. I think we can get rid of the page title altogether, which will leave us only with a panel and panel title, which is basically this panel over here. That's refresh in that looks much better now that we have our lady out file. We can begin building our application, and the first thing we're going to build is the form wizard, which I'm going to show you here. They have an example. We're going to build page with a former wizard similar like this, using thieve vendor scripts that are already included in the gentle A project. So I'll see you in the next video. 5. Wizard 1: this video, we're going to create a form that has a similar structure like this. What this form with her that we're looking here that comes packed with the gentle L. A project. So we are going to import some of the event or scripts and give a layer to the page. Then we will move on to the functionality. First of all, let's create a new folder within views. Let's call it Itit's. This is because the things we're going to create with these for Wizard are going to be financial items that will be categories within certain financial goals can. Within the items full there, let's create a new PHP file cold create, not blade that pH. I'm going to copy the contents of the demo page that we created for, so that we can save some time with the's scaffolding of the 10 so select all copy and then face it here can. We are going to add our for wizard in this section where says at content to the page here. But first we have to import some of the vendor scripts there. We are going to need to create this page since this scripts are not global toe, the whole application. It is best to keep them on a template basis. So we can do this by adding a new section here in the template, let's call it script and then and section and in our main layout file, right after all of the scripts that needed globally, I'm going to add a yield script, and actually, I need this to go after the custom themes script right there, back to the template file, I'm going toe import three scripts for these templates. The 1st 1 is called J Query Smart Wizard, which is the scream that creates the form with Second, it's called J query input mask that we are going to use to give the inputs a numeric mask. And the 3rd 1 is called Validator, which we will be using to do so client side validation to the inputs. So I'm going to go through the gentle L A project and bring thes three scripts or these three folders into my project. So, as I said, we're going to need the J queries Lord Wizard J query input mask and the validator folders . GOP those and place them inside public vendors. Let's begin with the content of our page. I think we can start by changing this title here. Let's say we put in something like saving goals. I can also get rid of this panel. Toolbox. We're not going to need that. And here lets out a form attack. For now, let's just leave it empty. And within this, it's a deep class form. Weezer. We, sir Horizontal. And let's give the Steve and I d off with her. Sounds like this. We're going to need a UL class with our steps and each of the least items within this UL will be an actual step number. We're going to need three of those, so I'm going to create three list items. Okay, let's start with the 1st 1 Is that a link here? We do know that IHS hashtag Step one, which we are going to create in just a moment. Knicks. We create a spun class step number or step and oh, in this case will be one. And after that, another to spend class step description or the e. C. R. And the description will be financial stability. It's a break here in red. Below it. Let's at a small tax, something that reads your basic monthly expenses. Now let's go pee this link and placed it in the second list item for step number two. Actually, step underscore. Let's change this on the score for cash. Better understanding, Step Dash one stepped up to step number two, and the description will be financial independence and, for the smaller description, monthly amount to support your current lifestyle. And finally, it's copy this again and paste it on the last least item for Step number three. And the 3rd 1 will be financial freedom. And in this section, you are going to add any luxury items in there mostly costs. Now let's move on to the content off each step. So after the U. N let's at a dif with the i d off step bash one in this three of those for each step Steph Dash one step tush to in Step Dash three. Let's start with the contents of Step number one. This had a DIF class ro and within that a dif player school MD to and also Cole M. D. Upset to and let's have an H three here with the title monthly expenses right after the road. Dave. Let's add another thief with an i D off items. Contain it. And here's where we are going to a every item container or every item that we're going to create once we submit the fourth. But before we move on, let's try and have a look at how the pages looking right now. First thing we need is a route. So let's open the roach file, which is located on the roads. This one web dot PHP and let's add a new route. Get Let's give the US well off items create and let's start using controllers so they should be handled inside the items controller at the create method. Now let's create that controller. We can do this in the terminal, and here I can say PHP artisan, Make controlling items Control back to the editor. Let's open that items Controller has had a new method cold create, and for the implementation of this, let's simply return a view. Items create. Let's go in testers on the browser here, we only have to introduce the u R L items create. And as you can see, we have a similar looking wizard, which comes with next in previous buttons. If you click on next, we moved to next step number two. If you keep pushing next, we get to the last one where the next story with the finish, but enabled. And you can navigate through any of the steps, either by clicking on it or using the buttons. Also, as you can see, we have some content for the first step already, so it is looking good. Just move on to adding some of the items or the form items to the wizard in step number one within the items container. Let's start another thief class Ro. I ate it, and in here I'm going to add a thief class call MD to form Dash Group, and here I'm going to add an input type text class for control and for the name. Let's give it a name off items, and I'm going to create an array of items because when I submit this form, I expect the PHP script to handle this as an array of items, and each item is going to have a label and amount and also the goal to which they belong. So, in this case, this will be the label so items this will be the 1st 1 of the array. So Index zero label. I'm also going to make this require now for the placeholder. Let's say item labor, and I'm going to give it full value to this, which is going to be rent slash mortgage. Now let's copy this deep in at another one below. In this case, it'll be an input type text class for control. The name is going to be items in the zero amount for the placeholder. Let's at a solar saying. And since we already have a input masks creep already loaded, we can simply say data that input mask. And here we can define the mask for this input like this. Quote, quote, single quotes mask Kahlan and again inside single quotes and the mass will be something like dollar mask. And in fact, let me bring this down here for better viewing so the mass will be a dollar sign, then three numbers, then a comma, then another three numbers, another promise and finally another three digits. And after that, every comma. And since this is a numeric input, let's add that setting us well under single quotes nomadic input and said that too true. Finally, let's copy this first if again and paste it below this one. Now, in this case, I am not going to need an input. I'm going to add a button with a class B TN et en danger. Remove dash. But let's make this to be a tight button, and the content of that will be simply a Nikon A minus. Aiken. So e class. If a if a dash minus. And finally, let's add a hidden feel. You hit an input with the name off items. Zero go i d. And let's give that a value off. What? No, I'm going to add another item. So I'm going to copy this TIF row item. Copy that based and right below it, and I'm going to make some changes. For example, this is no longer first item, so whatever I see I zero I'm going to replace that with one. Also, I am not going to add any default value, and I can see I made a mistake on the first item. You can remove the value. In fact, in the 1st 1 it's well, pianos film chicken. The button class is not going to be BT in danger, but Bt and so faith and also instead of removed dash button is going to be, uh, cash. But in this class here, instead of f a dash minus is going to be f a dash plus Okay, let's go ahead and see how this looks like inside the browser. If you refresh looks like the form is looking well, but it's not aligned with the title. So let me fix that. Going back to the project, I'm going to add another leave at the beginning and simply leave that empty. This will be a deep class called MD to form group. Go back to your house and refresh that work for the 1st 1 I have to the same for the 2nd 1 So let's copy this one and in the next road ate them this ad that as well, Alright, looking better as you can see, we have a couple of items here. The idea here is that if you press the plus button, we should have another item and you compress that as many times as you want providing the item label in the amount. Also, if you present minus button, you can remove an item from the list. I am going to provide a few that fault items here so the user can have a set up the full items to fill it. Also, the functionality for this form adding and removing items. We're going to add that in the next few. 6. Wizard 2: let's add the functionality that will allow us to add new items to this list of monthly expenses by pressing on this button right here, the plus button. So let's go back to our project. And right now I have the create not blade of PHP file open, and I'm going to add a script act over here, and I'm going to create a JavaScript object using virus items equals function and too great to make this an object. I simply at a opening close parenthesis at the end right after I closed the brackets here. Now, in here, I'm going to return an object, and here I'm going to define than you need function, which is a function. And here's where I'm going to initialize the functionality to add new items to that list. To do that, I'm going to say document. And this here is just to the note that I'm using JavaScript J query to be precise. So document on click, and then I define what on the document, I'm going to tie that click event, too, and I'm going to tie it to anything that has a class that button well, here I to find the event handler with a function and dysfunction is going to receive the event object, and the first thing I want to do is to prevent the full behavior of the event we prevent default. Next, I went to identify the items container using, but and I'm going to store these into a variable called items Container equals this, which will refer to the button that I just clicked with the class at button, and I'm going to look for the first pairing that has the i. D. Items contain it. Nights I went to identify and store the current item in a variable cold current. Fight them and I can find this using this, which is a button, and then look for the parent using parents. And I'm going to find the first parent with a class ro. And to make sure that I only get the 1st 1 I have this first bite into fire. So I'm looking for the first element that has a low class starting from the button that I just clicked, going upward. Now I don't want to add items if you have not written anything or you haven't provided any value inside the inputs of that item. So I'm going to make sure that I don't do that using if I already know that I do have only two inputs on every item. So I'm going to look for the first and second item, can make sure that they have a value in them. So I'm going to say current item find input. And I know that this find will give me an array with two inputs and I'm interested in the 1st 1 for this case. So I'm going to add this open and close square brackets zero, which will refers to the first input on the list. Now I want to validate their value of that input. In order to do that, I have to wrap this in. But in theses And then, at a dollar sign to the know Tate Jake weary. So everything in side this parenthesis will be h. A query will be treated as a J query object. So now I can say involved, which will return value of that input. And if that value is different than empty or an empty string, then I can move on. I'm going to do the same thing with the other input on the item. So I'm going to say and in less copy this entire condition from here to here and paste it over here in extra the And instead of the first item, I'm going to refer to the second input on the current item. So if both inputs have values in them, then I can add another item to the list. So to add a new item, I'm going to. First of all, I'm going to store the new item for the new entry into a variable called new entry. And that will be equal to And I'm going to say Jay Query. And in here I'm going to use current entry Corcoran Item clone. So what I'm saying, basically, I'm gonna make a clone of the current entry and then treat that as a J query object and that I'm going to append to nytimes Container after the new entry has been added or appended to the items container. I want to clear the values that the current item already had. So the new entry will be with no values will be empty. So maybe I can copy this from the validation of here. Copy this entire thing and pasted here. But instead of Corrine item, let's use new entry. So in the new NT, I'm going to find the first input. And then in the Val, I'm going to pass an empty string, which will clear any value that that input has, and I'm going to do the same for the second. Now, for that second input, I have to do one more step, because if you remember, that input has a mask for numeric values. So I have to reattach that mask to the new entry, And I'm going to do that by adding another call function here called Input Mask. In the first parameter is the actual mask that I want, which is a dollar sign, three digits, another three digits in a coma and finally another three digits. So that's a mask for the American put in. Also, this is an American put. So the second parameter is a set of options where I say numeric input set to true. Next, I want to re fix the we sort hate because the wizard hate since it's created using the vendor script is gonna have a set height, depending on the content that the the step has. So if I'm adding a new step or a new entry on that content, I have to tell the wizard to re adjust the height. To do that, I simply refer to the element that has an I. D off wizard and then called Smart Whizzer and a method name which is called fix Height. The next thing I want to do is to readjust the index off each item. This number over here has to be unique in order to work with BHP. So what I'm going to do to readjust the index off all of the items in the least is to go through each and one of them using a function called each. So I'm going to reference the Wizard with wizard and on that wizard, I'm going to find all the elements that have a class road, right? And then I'm going to call each and this will receive a call back, which is a function that passes scene and index, which is the index of the Korean item I'm working on. So for each of these elements that have a class RO item, I'm going to make a go to this function right here. So first of all, let's find the first input. We can do that by using this. Find input, and we're going to refer to the first input on the list first, and then refer to the first item on the list of inputs. Now on this input, I want to make a change to the name attributes. So to do that, I'm going to wrap this around. But entities in a dollar sign to treat anything inside this assay JavaScript for Ajay query option. And then on that I'm going to call a t t R, which is short for attributes. The attribute name will be name, and I'm going to set that, too. Items something label in that something is going to be the index I'm currently working on. So I'm going to close and reopen quotes. Can Captain eight Index and let's do the same for the second input. So instead of zero, let's use one and instead for the name instead of label, we're going to use someone and let's not forget about the colliding. We also have to modify the index for that one. So let's copy this one more time. Then let's use the third item with the least, instead of oneness used to and the attribute name will be items index, Goal i. D. The last thing I want to do is to make sure that all of the items in the least except the last one has a miner's button red minus. But to do that, I'm going to say items container. And within that I'm going to find all of the elements that have row class except the last one to do that. I use not and inside parentheses last. So this will give me all of the row elements, but the last one. And within those row elements, I'm going to need the act button so effectively this will only give me the second to last button on the items list. And on that I'm going to remove class that button in at class. Remove. But so what I'm saying is give me the button that has an ad part in class, which is second to last in the least. Remove that class and at a new class cold remove button that we're going to later time into the remove functionality. Also, to make it red, I'm going to copy this in at a new statement here, and in this case I'm going to remove the BT and Success Class, which makes the button looks green and at a class called BT and Danger. And finally, to make the content of that button to be a minus sign, I'm going to call HTML, which will override the content of that button element. And I'm going to fasten. And I'm going to passing I class. If a if a minus and then close that. Okay, I think that should be enough. The last thing I want to do is to actually call this innit function somewhere. So right about here, I'm going to say document on ready. And then he's a callback function. This basically means once the document has finished loading what the page has seen its loading execute this callback function in here. I can call items in it. Okay, let's go back to the browser and test this out. First of all, let's refresh to reflect the changes, and let's feel in this with another label is call it test. And at a number, as you can see, this is the mask working. Let's add a number maybe $1000. And if we click on the plus sign, it worked. Varsha Lever Looks like the remove in at class didn't work. Soul is going review that. I'm going to refresh this first and then go back to project. And this is the part of didn't Oh, I see you don't have to include a dot in this removed class calls. So let's do it like this. Remove all the dots from here. Go back to, but I was set and refresh the analyst right that again, just $1000. God. And there you go. Now it's sorted. So as you can see, I can add as many items as I want on this list. And if we review the elements, I'm going to use the inspect option In Google Chrome, you can see that each item has a unique index. This one will be number two, which is zero want to. And then the last one which is thes over here, has an index of three, which means that all of the items have unique in Texas, which is exactly what we want Now. Let's quickly add the functionality to remove items from the list Oh, and by the way, if you don't add any values to this, you can at the value itself. Also, you can see that there is some local validation working already. So let's go back to a project. And right below this, uh, right here, I'm going to add a new one cold document phone click. This time I'm going to tie it into removed. But so here is where we are going to handle removing items from the list to remove it. We can simply say this, which will be the button. We just rest. And then we look for the first parent, which is a row. So parents, anything with a class row and make sure we only get 1st 1 So first into that we call removed. So what I'm saying is, from the button, we just click, find the first row parent and then remove that from the page. Also, let's not forget to stop beautiful behavior of the event, so prevent before Now we also want to readjust the wizard height. So look for the element within I d wizard and then call smart. We said in fast e method name fix. Hi. And lastly we want to readjust all of the index's of the items in the list. And we can do that by simply copy and paste these section Here could be that and based it right here. Okay, lets go and test it back to the browser. Let's refresh this very new. I tinkle best, maybe $1000 and click at now. We have a new one. This one has an index of two in this one has indexes three. Now, let's examine this This expect thes input which has an index off to, which means that we have 012 Now, if we click the minus sign in this one here, we remove that item from the list. And also, this input here that we were looking at now has an index of one. So zero what? Which means that it's working OK, so we can add items to the list. We can remove items to the least, and we cannot add any item that doesn't have a value. And we have some nice validation here in the next video. I'm going to finalize this first step on the form wizard. I'm going to add some default values here for the user and then move on to step number two and finally step number three. After that, we're going to move to the functionality where we're actually going to create those items in the database. 7. Wizard 3: Let's finish this format a beautiful valleys here for the user to have, and also at the rest of the inputs for Step two and step three back in the template file. I'm going to look for this first item here, the row item with in Tuxedo, and I'm going to copy that based it right here, right below it. And let's make the value for the item label food. That index will be one. And let's change the index for coal treating puts in the road item. Let's add one more right below it. I'm just gonna based again. This time the label will be utilities. The index will be, too. And I'm going to continue at a few more items, and I assure you the end result. Okay, I'm done adding items I've added the rent, food, utilities and then transportation and insurance. All of them have a different index, starting with zero and ending with five. As you can see here from the code in the page, the last one has an index of five. That's the one that has no value in the family. Now let's move on to step number two. For this. I'm going to copy from here at the beginning of seven. Number one, I'm going to copy this deep row with the title monthly expenses. And also, I'm going to copy two of their own items going to copy that and moved down to step number two and based it here and once a place. Dad, I need to add an extra dif closing. This, which is the one that closes the diff with I D items container instead of monthly expenses , has changed that for your income sources. And for the first item in the list, I'm going to change the label to cellar. Now that index, we have to keep counting. The last one was fired, so this one would be six. What? Each you know. So the last one with no value will be Indyk seven and this button is going to be a green button. So instead of beauty and danger, beauty and success and at but also the I can will be a plus item and looks like I copied one extra road item that I'm not going to use. Solis, take that off Now. The call I d for all of these items is going to be two because we're in the second goal, which is the second step of their form with her. Now let's move on to the brow said, and see how it looks once we refresh and moved to step number two, we have two items that we just had it to finish things up. I'm going to our one more item to the list this time on step number three. So going back to a project, I'm going to copy the title from Step number two. Copy that, and then move on to step number three in Pace. That and I know I'm going to need another leave with an I. D items container and inside here I'm just going to could be the last row item from step number two, which is the one that has the green button. Copy that, Steve, and based it right here. Don't forget to change the index. The last one in Step two with Index seven. So we move on to index eight on all of the inputs. Here you go back to the bounce it and see it. Let's refresh we have the items in step number one, step number two, and finally Mr Number Three. And in each step, you can just add more items to the list, maybe other 100 you can add one more and all of the items on each step Step number 12 and three. They will be re indexed to make room for this new item. And with that, I think we're done with the form wizard. And we're ready to move on to the actual functionality where we are going to store all of the items inside the database as soon as we press it finished. What? And we're going to do that in the next video? 8. Create items: in this video, we're going to create a functionality to store all of the items in this form wizard into a table in the database which we are going to use later in this project. So let's go back to our project and open up the items controller. And I'm going to create one more public function here called Store. And for now, I'm just going to die and dumb. Whatever comes inside the request items just to make sure that I can understand the content of the payload before moving on. Now, if you remember in the page that we were anything for Wizard Page here this entire form or this all of these item containers and all of the inputs were wrapped around a form right at the beginning right here. Now we need to give this form some action. So this is going to go to items and the method will be post. And don't forget to add the CSR if field, otherwise it's going to fail. We do this using a function called CS R F Field. Now this form is going to post to this u r l but we need to add this year L to the list of routes. So it is open web dot PHP, which is located in the Routes folder. And let's are one more item route post items, and this will be handled inside items controller at the store. Myth it now with these changes, let's go back to the form refresh and then posted to see what we're receiving in the store method. I'm going to refresh this and add some information here so that we have a complete payload , moved to step number two at some numbers here. Then step number three and maybe had one more and then submit. We do that by pressing the finish. But so now in the store method, what we are actually receiving. It's an array composed off aid items or nine items from 0 to 8. And each of those items will be Honore with label amount in God Lady. So we're going to create a table in the database that will be able to hold this information . So let's go back to the terminal and it's created a database migration with beach Be artisan make migration. Let's call this create height them stable. Best ash create equals heightens now back to our project. Let's open that migration and let's edit this up function so that we can match these table blueprint to the information we're receiving. First of all, we're going to need a label. So table string label. After that, we're going to need an amount, so table integer amount and finally, we need a goal. I d table unsigned. Integer go. I d okay with that. Ready? Let's go back to the terminal and run this migration. PHP. How did send my great? But before we do that, we have to actually have a database to work with. So let's do that first. Since I am using Homestead, I can log into the default my SQL database using my SQL minus you for you, sir. Route minus p for bass. Work in the password is secret. Here. I can simply say create database. Let's call this database cock, baby. All right, now we have a database, and the next thing we have to do is to tell our project to connect to this database. Phyllis, exit out of here and let's go back to our project to modify the connection properties or we have to do is open one file code. Daddy and B, which is located at the root of our project right here. And instead of the database name being homestead, let's use our own database Cold cock Devi. Now let's go back to the terminal in Run the Migrations with BHP Artisan. My great. It created our items stable and also some password and use a disabled that come by the Ford with laudable. But we're not going to use those, so we don't have to worry about that. I am using Sequel Pro A free program to examine the database that we just created. Well, we have to do is choose the database from the drop down conch TV. And, as you can see, the migration created a'right unstable and also a couple of other tables. This migration table is only to keep track of all of the migrations that we're running. But the one table that were interested on Is this the item stable? Now we go back to our project, and now we can actually work in saving those items into the database. Let's go back to the controller, the items control it, and the first thing I want to do is to make sure that once I am saving the new items, I make sure that there are no other items in the table because we are only going to have one set of items for the home product. So, before saving anything, I'm going to make sure to clean the database or clean the table first. Now I can do that using items truncate. The truncate method is going to eliminate all of the contents of the table. Now, if you notice this items is actually a model, but we need to create a model first in order to use it. Luckily, this is very easy. We simply go back to the terminal in use Ph B artisan make model items. Then we go back to our project, open the items model and we say protected table equals items. This actually say viral protected table, equal items. So now this items model, it's linked to the item stable back to the controller. Just make sure we import this new class items, and with this we make sure that the titans stable is clean before moving on. Now all I have to do is run through each of the items that came in the payload using for each request items. Uh, heighten now, if you remember from the payload, we have to do some work to this amount number because it looks like it's scaring a lot of extra characters from the mask. So we need to clean that up before saving it into the database because the Arab is only accept integers. So let's do that real quick. I'm going to modify the item amount, and this will be equal to, and I'm going to use be wreck, replace to take off any items or any characters from the value that I don't need. To do this, we're going to use a regular expression, which is going to look like this. Forward slash forward slash and inside those forward slashes open and close square brackets . And we're going to use this character which the notes, a negation and then cereal dash night. After that, we put a coma, and this is the value we're going to use as a replacement, which is going to be an empty string. And finally, there regional value, which is actually item amount. So what I'm saying here is take the value from item amount. And this regular expression is saying, Find anything that it's not a number between zero and nine and replace that with an empty strength. Now we have to be careful not to add all of the items because if I'm not mistaken, one of thes will be empty. This one right here, this one doesn't have a label or an amount. If we try to add it like this, it's going to give me an error from the database. So we have to make sure we don't add any item that has no label or amount. We can do that easily by simply saying, If item, label and item amount, then we add the item to the database. And in here we can simply say items create heightened. And once we're done creating all of the items, I'm going to redirect the user to the home page, which is going to be our main page that is going to have some numbers and information for the user to view. All right, let's give this a try. Let's go back to our browser and this refresh this and is going to ask me if I want to reset, meet the form, so he'd continue. Now it's giving me an error about mass assignment, and that's because the model is still locked for mice assignments. Or let's fix that right away. Go back to a project, open the items model and up here, let's say public guard, it equals empty arrays, not a fixed issue. What I'm saying is to this model, do not guard any of the fields for my society. So it's completely open. Go back to the browser and refresh streets of meat form, and it redirects me to this plane page that we already had set up as a demo. So it's working. If we go back to our database and study the contents of it in the Items table, we can see that all of the items were created successfully in the next video. We are going to create or ah, give more detail to the home page because for every goal, every financial goal we're going to create a mathematical function that is going to tell the user how much money he has to save in order to leave off off his investment after he retires based on the amount off money expenses that he has in each go and we're going to display those at the top of the page 9. Home: now that we managed to save all of the financial items in the database. Now we're going to use those items to make some calculations about the amount of money you have to save up in order to live off of your investment, your savings and that will be divided into each of the financial goals financial security, independence in financial freedom. I'm going to present those in a matter like this with 123 squares at the top of page in. Each of those will have will not have the icon, but they will have a number here, and that'll be the amount of money that, based on your monthly expenses, is the amount that you have to save up in order to live off your savings. Let's start by creating a home controller. If we go back to the terminal, you can do PHP Arkansan Make controller home. Control it. Let's open the home controller in at a new public function called Index and he we're going to return a view called Home Index. Once again, I'm going to copy the contents of the memo pate we created. Once again, we are going to copy the contents of the demo page that we created at the beginning of the course. Copy everything and paste it, copy everything and inside the use, let's create a new folder called Home Called Home and Inside Home. Let's create in your beach be file called Index that played the beach mean and it's based on the contents here. Let's start giving the page some layout, and then we will move up to the Let's start by giving the layout of the page, and then we will move on to the controller to give the functionality. In this case, we're going to add the content or the three blocks on the top page right over here, before these rodef right over here before this deep class clear fix. And let's create a deep class through top tiles in here. And let's create another the glass animated flip in. Why? To greet a sense of animation of the flip in Why Coal Ash MD. Bash three Inside Flood And inside that one, another thief Class tile stats and in here another day if class count class count and this would have the big numbers. So let's just put a placeholder for now and below that an H three, which will be the Tyler, which will be the title of the block. And for now, let's put and this is the 1st 1 So that would be financial security. Now let's have another two. Now let's add the other two blocks. Just copy the first leave class, and he made it fleet. Why just copy the first day of the class Animated flipping? Why column The three? Copy that Dave and based it right below it. 12 times. The second block will be financial independence, and the 3rd 1 will be financial freedom. Now let's go to the routes. Now let's go to the Routes file to make sure that we have a route for the homepage. Now let's go to the routes foul to make sure that we have a route through this home page. In this case, this is a home page. So instead of using a function here, we're going to use the home controller at the index function. Let's go back to the hotel said in tested out. Let's refresh this page, and as you can see, we have three blocks at the top with numbers, and they look a suspect. Now it's time to actually make the calculation for these three numbers. Let's go back to the home controller. And here I'm going to make a select. I'm going to store the values in maybe the variable called Monthly Goals monthly. Go. And this will be equal to I. Thames. And I just realized the model is not named correctly. Should be item, not items. So I'm gonna fix that real quick. Just go and look for that model real quick called items. And I'm going to rename that and I'm going to rename this to items. When you rename a class, make sure that you also rename the file name and back in the home controller and back in the items controller, make sure that the import is also correct. Back to home. Control it. I was saying that we're going to make a select item. Select Gold I D and D B Ray some amount as and that then I'm going to group by Go lady and then I call get Oh, this will basically give me the some of the amount for each of the gold ladies in the database. Now I'm going to initialize an array, which is the goals, and this array will be composed of three keys, which is key number one, he said. That zero and it's May 2 more key number two n three. These are the three goals that we have to find. Now. Let's go over the monthly goals from the query above. For each monthly cold as go, I will say goals. So I will reference the gold Serey on the index defined by Good Gold I D. And that will be equal to the goal amount, which is a monthly amount multiplied by 12. To make it a yearly amount, I will reference the gold terrain under the goal index. Under the index defined by Goal Gold I D. And this will be equal to the goal amount, which is these which is a monthly amount multiplied by 12 to make a dearly and file, um, and finally multiplied by 25 which is the amount of the which is the amount of the years were, which is the amount of years respect to leave off the investment, respect the investment, or the total savings to last us a total of 25 years. Now we simply passed down the goals array down to the view and in the view, we're going to replace these placeholders with number format growth. One that'll be for the first style. I'm gonna I'm going to copy this and based it down here in the second tile in reference T second goal and the same goes for the 3rd 1 Now let's go and see if this actually works out in the browser. Looks like we have an error. We forgot to import the item class. That's easily fixable. Go back to the home controller. Make sure to import this class. Let's try that again. Pain. As you can see, the numbers are calculated. We didn't have any information for the last goal, which is the number three, so that one stayed at zero. But the 1st 2 did work out. Now. If we were to modify those numbers, for example, let's go again into items create. And it's at different numbers. Maybe $100 each in for the salary, let's say 1000. And for the salary or the second step, that's 3000. And in the last step, that's add one. Maybe something like this, and it's finished that. And it appears that we have a problem because the last item it's still not being calculated . If we check the database real quick, let me refresh this contents. Looks like the goal i d. For the last item is not being set properly. It's still been set to when it should be three. So let's go back to our project. And it's fixed that real quick in the create that play that PHP is go to the last step. And, yeah, it probably was a problem with a copy and paste this go lady here has to be three. So let's run the wizard one more time to see the results. Yeah, items create again. Let's go with slightly different numbers under 50 maybe for step number two, maybe 1500 in for step for the final step and for the final step, maybe for 1005 100. And now it's working as expected, you can see that the numbers change based on the input from the form Wizard 10. End: and with that, we come to the end of this course. Like I said, it is a rather short course, which focuses mainly on incorporating different things into your project. A free bootstrap template. For example, JavaScript mixing JavaScript would be HB, etcetera, etcetera, while also giving you some starters on how to develop projects more quickly. I hope you enjoy this project, and I'll see you in the next one.