 Hello and welcome this month. I'm just I'm not doing like little tutorials on how to do Basic little things what I'm doing is is I'm actually just going to sit down and write applications and have you guys watch me write these applications So you can see the process and I'm going to go kind of quick especially in this one because it might be a little bit longer But quickly to review we're going over a different interface for basically what we did last week Or last video which was this little bash script this little shell script here Which when I run it asks me who I am which I have a filter roles search list here using fuzzy finder I can choose who I am and then it's going to start going through a predetermined list of Checklist items, which I can just easily go through if there's a problem I can mark it if there's not applicable not applicable I can make it not applicable and I go through and then that adds all that to a log file That's CSV Which can also be opened up in a spreadsheet program like excel or Libre offices calc But we're going to do one that is a gooey interface today So let's go ahead and get started with that and again I'm going to go kind of quick and I'm going to be using a lot of Templates I've created because when you do programming you do a lot of repetitive stuff Especially when it comes to user interfaces So whatever you use I use Vim as my my text editor whatever you use Hopefully it allows you to create shortcuts to simplify stuff And I'm not just talking about like auto completion of a line or a tag But you should be able to have it hit a couple of keys and just dump in templates that you've created Let me back out of here and for example I have a little script. I wrote that pulls a template a base template for HTML projects And I can pull that with get dot or get our HTML get is named my script This is up on my get lab page As well as all my other shortcuts are mainly for VIM you can find it on my get lab page Check out the links in the description of this video or my website films by chris.com and it's my VIM templates and set up is called my VIM Setup I think is what I call it. So you should be able to search for it there But basically I just type in HTML get and the name of my project which in this case I'm just going to call checklist underscore two because we already did checklist underscore one And what that's going to do is it's going to pull down some templates and put it in a folder called that and I can now move into that and Here we go. This is my base HTML with some Twitter bootstrap and jQuery scripts as well some CSS That I use regularly. Let's go to my web browser here and this is my web server. It's a blank page Let's go ahead and open up our index page and I'm going to go down here first Let's give the page a title. We'll just call it checklist We'll call check this to checklist Version 2.0 just to be cool. Okay Come down here to my little center main class row And I'm just gonna put a simple little header in here So I'm just gonna say h1 for my tags with nice big words and we're just gonna say checklist Now if I come back here and refresh you can see we have checklist. I'm gonna come in here and again I'm going fast Just this is more of a demonstration anything. I did a horizontal line breaks. We have a little line there Right there should show up in the video And now let's start creating a checklist now. You can very simply Make a checkbox, but we want just any regular checkbox We want nice looking checkboxes that are easy to click they're big so you can click them with your finger on a phone So let's go ahead and do that and this is where some of my templates come into play So this is a bootstrap. So I'm gonna say BT and I'm going to go to my checkbox here boom Dense everything properly and there is my primary checkbox check Okay, it's checked now. We need to be able to submit that and we need to submit it somewhere So I'm just gonna create a quick little PHP Script here that should basically when we submit it's just gonna echo back out. This is what was submitted We're not gonna be worrying about putting in a database or a log file or anything at this point We're just gonna show that what was submitted. So I'm going to create a little script here called get dot PHP and Of course, it's going to be PHP application for my server side here and I am going to say Get form. Yeah, that's what I want And so what this is doing is it's looking at anything that's submitted as a form get submit and these first two lines are just Stripping out any unwanted characters. Hopefully avoiding mess with special characters and or malicious stuff and then we're just gonna loop through each item that's submitted and Print it out to the screen along with its value So we've done that. Let's go ahead back into our index here And we want this checkbox to be part of a form. So let's go in here and I'm going to say Form we're gonna need an Action and a method and We're gonna just do a basic little get method and we're gonna submit it to our get dot PHP down here Let's see Right here. We should be able to say Form let's close our form tag and everything should look good and it's a form But we need to submit buttons. Let's go in here and we'll just add in a basic button. So Just a button like so and I'm just gonna type in submit for the Wording on the button and this type isn't just gonna be a regular button. It's going to be a submit So it will submit the form for us. There it is now if I click this We get nothing because we didn't check anything if we check our checkbox here. Hey, it says this is my test is on Which is the name of our checkbox even though it says primary checkbox in label Now we can obviously Grab this so I'm gonna like 14 and I can copy and paste that and we can now have two checkboxes We can modify them. They each have to have a unique ID Otherwise the checking doesn't work properly. You can see I check down here. It checks that first one It's because of the ID, but we're gonna give each item its own random ID, but we need items So let's go ahead and just copy from our last project our Names dot list our name dot list. I don't know why I call it name It should be names. In fact, I'm going to change that so that Name is now names dot list because there's multiple names in there Oh, that's actually our employee list. What we actually want to copy is our checklist one one Items list and again, I'm gonna move that to items dot list okay let's go back into our HTML here and I'm going to delete our little checkboxes and I'm going to open up another file, which is our main JS script right there and Oh when I pasted in our thing there was a link to a CSS file Hey, let me undo our my my deletion here This link file should go up here to be proper plus we don't want it there more than once and now I come back down here and delete our tags save that What I just do and Now I'm going to open up our main JS Which has a ready function here and let's go ahead and create a function called get items And this will get our list of items and hopefully put them where they belong Save that real quick. I'm going to go back into our index file here And we want some place to put those so I'm going to create an empty div tag a div tag is just an area That we're going to place some things We need to give it an ID so we know which div tag we're talking about and we'll just call this Checks because this is where all our checkboxes are going to go. We just need to remember. That's what we named it And we're going to come back in here and we are going to now say We're going to do a jQuery request that function and Instead of posts. I'm just going to do a Get that I don't think it matters in this particular case, but that's how I'm going to do it We're not going to add anything to it and we're going to get our Items dot list perfect now We need to also call that when the page is done loading. We're going to say get items We will refresh this and we don't have any checkboxes because we haven't added checkboxes left yet But if I open up my console here, you can see that it outputted outputted Everything that's inside that that text file to our console here. We don't want it in the console We want it in checkboxes. So let's go ahead and go back here and what we're going to do is instead of echoing it to the console here We're going to say take that data because right now. It's not format. Lots of times you'll get stuff in JSON format This is just a plain text file with each item on its own list So what we need to do is break them up into an array It's like a list of things and we're going to say each item is based on each new line So what I'm going to do here is I am going to say that our items Equal our data that we grabbed and we're going to split it split it split it Based on the new line character. So each item is a new line and then we're going to do a for loop here change this to items And this one to say Items, but we don't want to print out the console. We already did that We're going to do here is going to say var item equals format that a little bit better so now we have a variable with our item in it and what we want to be able to do is take that item and Put it into our checkbox template. So I'm going to come here and I'm going to say BT for bootstrap and I'm going to go down to checkbox boom we don't need this CSS because we have that our main HTML and we're going to say var and we're going to call this box And we're going to say equals and I'm going to do a back tick and a back tick at the end here That allows you to easily making multi-line multi-line string variable here and Then in here for name, we're going to replace this with the item. So we're going to say dollar sign squiggly brackets Spaghetti braces whatever you want to call them item and we're going to do the same thing down here So that the person knows what they're checking So the name is what's submitted down here is what the user sees they don't have to be the same thing But in this particular case we probably want them to be now We also want each item to have its own unique ID and We can do that multiple different ways But I'm just going to generate a random string for each one because we really don't care about the ID here As long as it matches for the box and the labels. So what I'm going to do here is I'm going to say Javascript and I actually have a template for a function We'll give you a random string based on length to give it you don't give it length It will give you a 10 character random string So we want to make sure but this is inside our for loop because we want each one to have its own unique ID and we're going to say random string and Then here for our ID. We're going to say ID and The label for that is the ID This is the label for that same dollar sign stability. Whoops Now if we We have that as a variable. We need to now append that to our div tag. So we're going to find I Think we called it checks and we're going to append to that our box And if you're fresh Something's not right. What do we do wrong here data split items items? item Let's go ahead and Split it new line What did I do wrong console? Log Data and let's open up our console log here It's outputting it Did we call it checks or checks? What did we call? Checks and what did I put that I put checks? I think I put checks checks append box Box is our oh we're outside the for loop. That would be our issue right there Gotta make sure we're in the for loop for the appending here We can go ahead and remove our console log here and here we can go ahead and get rid of The console window and if we refresh this boom We now can check different items and when we click submit it will give us a list of the ones that we checked Perfect except for what's this? What's this is a little funny looking thing here? Well, what that is is because There is a blank line Inside our text file so what we're gonna do here is we're going to Check for that with an if then statement What we're gonna do here is we're gonna say if this Else that Okay, copy this line here. Let's go ahead and dent all that We're gonna say okay if our item Equals nothing. What are we gonna do? We can tell it to just ignore empty lines But I thought it'd be nice if we add it to our formatting So we're gonna do it if it's blank. We're instead of repending our box. We're gonna append a horizontal line If I could type that properly So now you'll see when I do that at the end here There is a horizontal line very light but you might see that so why would we do that? Well, let's go back into our items list and We have up here tire stuff, and then we have light stuff. What if I put in a blank line here? You can see there's now a line dividing up the sections. You can go a little bit further and add You know headers but again the point of these tutorials as I said the last one is just to show That you can continuously add to a program and improve it We can make a program pretty quick and prove it right now. We're pretty much done We could pretty much stop here and we have a checklist again We can check this and this and this and click submit and it shows those things if I was to check all of them It's going to submit all of them again We'd be dumping that into a database or a log if you would but database would be a better option And here we but we still need to find out who is submitting this And again really in a real-life situation You should never enter your name because you should be logged in as yourself and the computer should know who you are already I hate when I'm logged in and it asks me who I am or in some cases some businesses will have one login for everybody Which is just horrible Okay, you don't know who's doing what but let's go ahead just to expand on this tutorial even though we could stop here Let's add in a name selection now We could just put in an input box where a person types their name Which again as I said in the last video if you can avoid people typing in information You really should because you never know what they're gonna type And they let like my name's Christopher, but I usually go by Chris But sometimes I write Christopher sometimes I write Chris and that could be very confusing or maybe I'm just typing fast I miss spell my name. I do that quite often There's a lot of eyes in my last name and when I type fast I tend to always miss the second to last I I'm not joking. I mean just all the time for years now and that can mess up your your database so you don't want people that you want to be able to check from a a list of names and And you can just have a regular drop-down list But the issue with that is In my opinion any time you have a list it's more than 20 items long Which if you have a lot of employees that could be more than 20 you want that list to be filterable or at least at least You know searchable in some ways a regular drop-down list You can usually type the first few characters and jump to it But it'd be nice if you had a list that actually looked so I mean if my name show up in the list as Chris Occupanti I can type K. R. K. R. I in a you know regular drop-down list and would jump to it But if I typed an OCC it wouldn't we're gonna create using template area have a Dropdown a button that gives us a list that we can search through the names and check a name And then that will put that into an input field that's read only so that we can't edit that We can only check names that are in the list. So again, we have already copied over our names list here with employee numbers and everything So let's go ahead and go back into our code here and Inside our form. I want to create an input box That has that we're gonna input to but then outside of the form I'm gonna have my drop-down box. So I'm just gonna go here and I'm going to type in BT and Choose from my list here. I should have drop-down search box. Okay. That looks like a lot Let's go over this. This is CSS to make it look right. We'll move that up to our header So again, it dumps it all here, but then we're gonna put stuff where it belongs We have this drop-down list with items in it already Which we will be replacing And then we want this as it says in my little note here You want that to be in the form for submission? So I'm gonna go ahead and copy those lines or cut those lines come down to our form And I'll just go ahead and paste it in here and up here, of course I just formatted in something that's not a json JavaScript so it's going it's messed up my format here, but we're gonna move this into our Code, so let's go ahead our our JavaScript code. I'm just gonna come up here. I'm gonna look I have 25 lines 25 DD and then I'm going to open up our Main JS I'm gonna go to the bottom and I'm just gonna paste in those lines Right here. That's six should format that all for me And we're gonna want this one, so we're gonna copy these four lines or cut them and put them up here okay, so now we have our When we click the button it should show or toggle our drop-down list on and off Down here we have when an item is selected do something and here is the filter Okay, so we should be able to save that and right now see it functioning No Let's go back to our oops Why is that's why I didn't save this there we go now we have this I should be able to click this it gives me The list that we currently have in there I checked that and it adds what I selected to this box Which I cannot change other than by selecting something else in the list And I can also do something like if I do you it's only showing things with you Yes, so now I have custom and I can select that from the list Let's go back and now modify this so that it's going to grab from our list of names and put them in there so let's go ahead and just delete each one of these and Delete that you'll save that and I will go back into my js Javascript here, and I'm going to create a function called get Names and I'm going to paste in that line. We just copied and then up here. We want to make sure that we call this get names and Exit out of that. Let's go back into our main JS Okay, so what are we gonna do here? Well similar to what we did down here So what I'm gonna do here is I'm going to use my template here for my jQuery post Delete the function out of that and we are going to grab our name that list name list Actually, I made it names didn't I that's right and now we're not going to pass it any information And it doesn't matter where this is supposed to get but I'm going to change it to get just to be consistent with what I'm doing Let's move this up here and again we can output all that to the console But we're going to do here is we're going to create a an array called Names equals data dot split based on again This is a plain text file each line is a new thing and we're going to say here. We're going to say If Name does not equal Blank so we're making sure that it's not a blank name the last line of the file We're going to then do something and what are we going to do? We're going to say We're going to append this But what are we going to append it to? We're going to Append it to what do we call our thing here? We're going to append it to our my drop-down or yeah my drop-down I'm back to my main JS so I'm going to say And that should be the thing that is the ID of So we're saying check each name in the list. Oh, actually we need to make our for loop. Don't we? JS Array loop that delete that That Dent everything properly Yes, everything looks right and here for Names we're gonna go through the loop here and we're gonna say name var name equals Names with that occurrence loop now. We're checking now. We're appending but we don't just append blank stuff We are going to let's go ahead and do back tick just because I like the way this looks better So putting that in back ticks and instead of about here. We're gonna say our name and We're just putting some basic HTML here saying when this item is clicked do this and So items select if we go down here items select what it's going to do is it's going to toggle off the list So we'll hide the list and we're going to then change the items input They are input to be the value of what we just selected. You'll see Obviously, I typed something wrong On line 20 we have a character that we don't want So let's go back up here line 20 it said which Something's not right We got back ticks. Oh, we need to Move this. Oh Let's undo that. I think I just have my curly. There we go. Okay Now I can check this list. We have a long list. I can come in here. I can say Foster I can choose foster and he's added there now I can check rear tires and headlights are good submit and you can see that it was submitted by employee number 25 Oliver foster and That's he checked the front or the rear driver side tire pressure and the headlights and as our application we can make this look a little bit nicer if we wanted to We can hide this input here, but I put it there so they know what name is checked We could also probably change the name of the button if we wanted, but let's just real quick go Into our index PHP. I'm just gonna add in a little bit of spacing here. So Right here. I'm gonna add in a line break and above the form I'm gonna add in another horizontal line just to make things look a little bit nicer and you know what? This did not take very long. Let's add in another line break We could really probably should use CSS to make this look nicer But I like to cheat with line breaks like that and we have our application. Here's our checklist We choose who we are from the list which we can filter if we want We can check items off the list if they are checked as good They will be submitted obviously there's other things you can do which again It's the point of this tutorial is that you can continue on to on but it all this Wall explaining stuff and it only took me 26 minutes in the first five minutes was demonstrating last thing So this didn't take as much longer than our last application and we have this and on a mobile device It would look something like this So it still look very usable And you should be able to click you don't even click the blue here You can click the words so anywhere inside these boxes making it very quick easy click with your fingers But again if you have a list with like a hundred things you might want to do the reverse You might have every item or a checked and then you uncheck Items that have problems or maybe you're only checking items that are problems Are you checking off that you checked it? Are you checking off that it's good? You also might want to add a comment box so people can add comments, which is always a good idea For the comment box again There's certain things like name or station or wherever wherever information like that You want to use a list but comments having a comment box is always a good idea for things that you might not think of But again, this list can be hundreds items long You can also have section checklists or you check and a section gets checked off But again, we create a base application submits it to the server the server right now is just echoing it back to us To put it into a database it would take another five minutes to create the database And then I have templates for submitting stuff into databases So yeah in a half an hour we less than a half an hour we created this application for checking things So super simple again, I went quick because it's more of a demonstration than a tutorial and Again the main point of this just to be a little repetitive because when you're teaching people stuff repetitive stuff is is good for Engraining it in their brains is that as I said in the first tutorial I don't know if I said in this tutorial is that Programming is like artwork as they say with artwork art is never complete only abandoned the same with this I could continue every day adding new features making this better tweaking it a little bit making it look nice Or making it perform better making it more efficient making it easier for the user changing where things are and you go on and on and on And on but to create a base application like this Does not take long, you know So I do thank you for watching and I ask you to visit films by Chris calm That's Chris the K. There's a link in the description of the video. Go ahead and check that out I do thank you for watching there. You can search through all my videos This the this video was a little more in-depth in all my tutorials usually I go over like one thing like this is how you make a Checkbox, this is how you create an input. This is how you submit a form, you know But this this again this this month this whole month I'm gonna be going over just creating random applications just to show you the full process of how things go together and again I did a lot of template inputs because I Regularly use check boxes. I regularly make buttons that look like this. I regularly use drop-downs like this So it'd be stupid to type those things out every single time So I've created my templates to where with a few key presses I can choose my templates and dump them into my applications. So I hope you've learned something Comment below. Let me know what you think. Did I explain things well for a quick overview? Was I horrible? What would you do different? I know a lot people like I wouldn't use JavaScript and HTML and well, you know making things Like this are super simple and cross-platform and literally I can give someone the URL to this and it's now on their Their device whether it be a phone tablet Desktop laptop regardless of operating system if they have a modern browser, which you should be using a modern browser So for security reasons you should be good to go and it's all already connected to the server Which you would need to be connected to a server anyway to submit the stuff so I've been talking long enough. Hope that you have a great day One more thing I will throw this up on my web server because right now it's running on my desktop computer, but I'll throw it up there and go ahead and Check it out. There'll be a link in the description of this video. So go ahead and click on that and you can use this use this to to look at it and also Link to the source code so that you can get a copy of this if you want to use it as a template for your project Anyway, I thank you for watching and as a hope as always. I hope you have a great day