 Okay, so last week we started working on this application. It's a simple little form, and we're going to be submitting stuff to a Google Doc. So this is the basic Google Doc form that you can create in a couple of minutes, which is great for a lot of scenarios. You can click submit here after filling out the form. It gives you a little message that you can customize, and it automatically goes into a spreadsheet like this, which is great for an end user, and in this particular case we're writing an application. I work for the fire department, and currently once a week, well, every day we check our air bottles, but once a week we've got to fill out paperwork on it. This paperwork basically allows the person who is in charge of maintenance on the bottles to know where the bottles are, because sometimes they get switched from truck to truck, and whether the bottles' pressure is good or not. We want bottles to be over 4,500 psi for our particular type of bottles, so we just need to know in this case whether they're full or low, and maybe have a section for comments, which we do, and this way if the person constantly sees a particular bottle based on its ID number, because each bottle has its own inventory ID, if it's constantly low they can go and check on it and see if it has a leak. Currently my department uses paperwork that gets shoved in a file that probably very rarely ever gets looked at, or someone has to type it all in manually. We created the form in Google Docs which is nice, simple, can be done in a couple of minutes, but really you're not going to be typing this in at a computer because you're out at the trucks walking around the bay and putting information, so although you could do this on the phone, we want it to be as efficient as possible. So we're using jQuery mobile to create an application which we started last week, and this is what our application looks like so far, and this is probably what it looks like on a phone. We have a number input here, so when you click that on a phone, since it's a number input automatically brings up a number pad rather than a keypad, you can choose who you are, what station you are, what truck you're at, and you can leave a comment, and then you can click whether the PSI is over 4500 or not, and now the form is completely done, the look and feel of it is done, which for me is the tedious part, and now we're going to get into the coding, the actual functionality of it. So let's jump into our code here, and up in the header, we're going to create a script, script close our tag there, and we already have jQuery imported here, so we can right away start using jQuery, which is just, it's javascript, but it makes your code a little bit shorter and cleaner looking, some people like using it, some people don't. Everything that's done with jQuery can be done with javascript, because jQuery is just javascript, but it allows you as an end user to clean up, in my opinion, clean up your code a little bit. So we're going to say here, first thing we're going to say is document.ready, and what this is saying is wait till the document is done, wait till the whole page loads before you run anything in this code, and we'll open the parentheses there, and close them here, and actually, before we get into the javascript, I just realized something else I want to do. No, I'll save that till later on, let's just get going with the javascript. So once the page is done loading, let's start to run a function, that closing bracket there. Okay, so what do we want to do? We want to be able to submit this information when a button is clicked. But there's two buttons that can be clicked. We have our no button and our yes button, and we want either of these, whichever one is clicked, because you can only choose one, once that's clicked, it submits the form. So let's create something here, we're going to say, if we look at our code down here, our html code, we have an id for one button called low, and id for the other one called full. So, what we're going to do is we're going to say here, dollar sign, parentheses, inside quotations, pound, which means id, full. So, when something of an id of full is .clicked, click is what you type, clicked is what happened, we're going to run another function. Let's close that before we forget. Now, what is this function going to do? Well, we're going to create another function here in a second that is our send function. And so we want to call that send function, and we're going to pass it a variable of full. There might be a better way to do this, but this is how I'm doing it. I'm going to, to save time, I'm going to copy that, I'm going to paste it here, and I'm going to say here, low, and here, low. So now, this one's saying when something with the id of full is clicked, run this function, and inside this function we're just calling another function. So once again, there's probably a better way to do that. I am not the cleanest JavaScript coder in the world. This one's saying the same thing, but instead of when something with an id of full, we're saying when something of an id of low, which is our other button, our no button is clicked, then we're all going to run the same function, but this time we're going to pass it a string to become a variable in that function called send. So now we need to create the send function. So I'm going to say function send, and the strings that are passed, whether it's full or low, we're going to put it into a variable called psi. Now, we've got to grab some other information. So we're going to create a variable, and that variable we could be called bottle, and what will that bottle variable equal? Well, when you use jQuery again, we're going to say look at the item, the elements with the id of bottle, and get dot its val, which is its value. So real quick, let's scroll down. I wish you don't have to scroll down. It's right here. We have an input, a number input, with the id of bottle, which is our bottle inventory number. So this is saying create a variable, call the variable bottle, then look for the element that has the id, that's what the pound symbol means there, of bottle and get its value, and we're putting it into that variable there. We're going to do the same thing for each element here. We're going to say create a variable for user, and same thing, we're going to say val pound user, let's say variable station equals the element with the id of station, get its value, then we're going to say variable for truck equals, look at the elements with the id of truck, get its value, and then look at the element that has the id of comments, get its value. Okay, so now we got, if we look at our form here, we've got the id, we've got the user, we've got the station, we've got the truck, we've got the comments, and we've got the PSI all put into variables. So now what we need to do is get ready to actually send that to our form, our Google form, and to do that we need to get the Google form URL for the submission, and we're going to put that into a variable here in a second called URL, so let's create a variable called URL, and now let's go back to here, and if I look at, this is our form we created with Google, control U to bring up its, well control U in Chrome and Firefox, think if you're Internet Explorer, well I ask, why are you using Internet Explorer? But I think you have to go up to edit to view the source, but look at the source code of the page. Right down here we can see form, action, here's the URL that we're submitting, you can see it's a post submit, method post, that's good to know. So we'll go back to our code here and paste that in there. Now that that's pasted in there, and we have our URL, well now we can start looking at using the post option from jQuery, this uses Ajax to submit information, so we're going to say dollar sign dot post, and then we're going to say were we posting to, we're posting to the variable of the URL, which is that long URL we just created there, comma, and then we're going to say open squiggly braces, curly braces, whatever you want to call them, close that function there, and now we need to give each element, each, the form is looking for certain variables that are going to be posted to it, and the value for those. Now those values are the variables we created up here, bottle, user, PSI, station, truck, comments, but what are those variables called on the Google Doc side? Well once again we'll go to our Google Doc form here and look at its code, and we can see right here name, entry, and that is the entry value for user, for station it's going to be this entry, it's always going to be called entry dot some number, truck, PSI, so we're looking right here then we're looking at the code there, if you need to you can search for your elements like I can control f station, up there station, and I know that right here it says for I can just change that to a dot, or I can just go down two lines and see its entry, so we're going to have to do some copy and pasting here, so for user we're going to copy that, and we're going to say inside quotations, don't always have to have the quotations for this, but since there's a dot I found that it throws it off if you don't put the quotations there, colon user comma, and we're going to do the same thing for each line, but once again changing the entry for each one, so this is what this URL is looking for as far as a variable name, and this is the value on this side which is the variable from up there, so next we're going to say, and it does not matter what order you put these in because the server side code is going to look at whatever it's called and its value, regardless of what order they come in, just make sure you connect them properly here, like that's the entry for station comma, once again we're doing it this way for multiple reasons, one to keep it simple, fire departments tend to be very low tech, they really love office products, so spreadsheets is a great way, they're going to ask you to put it in a spreadsheet, even if you put it in your own database, they're going to want to open it up in a spreadsheet format, so this is simple that way, this information does not need to be modified by any code, so we don't have to worry about that if you need to modify the code, the entries with code you definitely don't want to use this technique, you want to use your own database, but also the fire department, you may not have a server, even though you can get yourself a little web server, something like this a pogo plug would work fine, make sure you're linking these to what the variables are here, not from the html code on the other form, so even though you can get a pogo plug for 15-20 bucks, and my department has five stations, and we could all be entering stuff at the same time, it's not going to overload the pogo plug, but if you don't have a good it department, they have no clue what they're doing, they don't know how to simply open up a port and forward stuff to the pogo plug, and if you don't have a real website to put this information on, this is a good way to do this, you can actually put this code on the different devices, because it's all locally running, well, except for this last part that I'm going to do with the PHP, in which case you would need a server, but still it's just simplifying stuff, even if I had done something like this for my department when I left, I want to keep it as simple as possible for them, and having it go straight to a spreadsheet like this is great, okay, so now, let me save all this, I haven't done that in a while, let's go to our form, refresh our page, let's type in something here, let's go 5555, let's choose Sam Johnson, let's go station 22, engine 22, this is my test, yes, okay, you don't see anything used here because we haven't finished our code yet, but I should be able to go to our spreadsheet here, give it a second here, maybe hit F5 to refresh if it hasn't come up yet, okay, something went wrong somewhere, I typed something wrong, and this is where you need to start troubleshooting stuff, so first thing I'm going to do is I'm going to look at, well, I'm going to go to our website, hit F12 if you're in Chrome, go to console, comment is not defined, right there, tell me the problem, code is stopping, I think about JavaScript is it fails silently, which is good in some cases because you don't want, necessarily want errors popping up on your website, but you can quickly look at a log there, if you're in Chrome, hit F12, if you're in Firefox, install Firebug, and then I believe it's still F12, and it brings up a similar thing, so now that we've changed out the comments instead of comment because there was no variable called comment, we saved it, no, we saved it, and go back here, refresh, I can once again always just say 6, 6, 7, 7, Mike Jones, I can go station 22, engine 22, this is my new test, I can click either yes or no, once again we don't see anything here, but if we go to our form here, if everything is all right, there we go, it showed up, so we're submitting properly, that's great, we could say, hey, we're done, but there's a few things we want to do to make this more efficient, and that's what I'll be going over next week, and I'll give you a little thing, one, we're going to be grabbing the ID using PHP and a get submit, that way we can have those QR codes I keep on talking about, little bar codes, you can scan with anything with a webcam, and automatically have this application pop up and put in the ID number, we're also going to clear out when you submit, we're going to clear out the inventory ID and the comments, so you're ready to go, it will retain your username, station, and engine, so you have four or five packs on each truck with four or five spares, you can go from one to the next, without having to restart the application and refill all the information, we're also going to put these three things, your username, station, and truck, into local storage on your device, so that if you exit out of the program, you come back on the same device, it retains that information, you can still change it, but you don't have to re-enter it, because if I'm using my phone, I'm always going to be Chris, I don't have to change it every time, so once I put in the information on my phone once, it stores locally, this is Chris' phone, it comes in, automatically puts in Chris, I'm almost always at the same station, boom, puts in the same station, truck, once again there might be more than one truck at each station, but if I'm checking out the truck during the day and I exit out of the program and I go back to continue checking out the truck, I want that all to come back up, so we'll do all that with local storage, so those are the next three things we're going to do, we're going to use PHP to grab the bottle number, inside the URL using a get form submit, so you can use QR codes, when you submit it will clear out the ID number and the comments, so your writer will go ready to put in the next one, store this information locally, and we'll also have a little alert box pop up so the user knows things were submitted, so that's what we'll be working on next week, join me one week from today and we will finish up this code, thank you very much for watching, next one shouldn't be too long, I thank you for watching, please visit my website, filmsbychris.com, that's Chris with the K, check out the website, there should be a link in the description, comment below, let me know what you think of this application, you know this tutorial, not necessarily the application itself, it's pretty simple, and I hope that you have a great day!