 Okay, last two weeks we've been working on this little application here. Basically, it's just a form submit which we originally created in about five minutes. We're now spending probably between all three videos, 45 minutes to an hour, working on this, mainly making it nice for mobile devices. That's something I find about most programming. Actual functionality can be done pretty quickly, but making it look nice and the user interface usually takes more time to create than the functionality. Luckily, we have tools, libraries out there like jQuery and jQuery mobile to make things look nice, especially for mobile devices and also work on desktops. As we're working in a desktop here, this can be brought up in a mobile device, probably look more like this and it's very easy to click. This gives you a little drop down on a phone automatically. It will bring up a larger buttons because the phone mobile browsers tend to default to that. Although we could also, using jQuery mobile, make larger buttons for those drop-downs on a desktop as well. I prefer having the regular drop-downs because if you have a long list, you can always start typing on the keyboard and jump if everything is alphabetically, which it should be if you're writing code. Also, things like this input here is a number input. When you click it on a mobile device, it will bring up a number pad rather than the keyboard, which allows you to easily put in numbers. If we did a regular form submit, HTML5 will check if there's letters like that in there. It will say no, you can't have that. Unfortunately, we're using our own JavaScript to submit it, so I think it ignores that because we're just getting a value in submitting rather than submitting a form. All depends on how you do it, but if you were submitting a regular form, this would do error checks for you if there's not a regular number in there. What we're going to work on today is once we fill out the information and we click Submit, either yes or no, for is the PSI over 4500, which actually is very full, it's actually over 4000, is actually the cutoff. That's my bad, we can actually just change that in the text, but it doesn't matter since this isn't really being used. You can see we just submitted that information, but when we submit it, it doesn't clear out this information, which would be nice, the comments and the ID number, so you can right away go into typing the next one. It doesn't give the user really any information, oh, this was sent, so we'll create an alert box that does that, and also we're going to throw in a little PHP to grab an inventory number through a get form submit, which would be nice because then we can create QR codes, which I have tutorials on if I remember. Maybe I'll put an annotation somewhere that will link to my QR code video, and you can create QR codes, put them on the bottles. I think the hardest part about that is making a sticker that would be water resistant since these bottles get wet. I don't think heat would be too much of a problem because even though we go into fires, hopefully the bottles don't get too hot. In fact, as air comes out of them, they get kind of cold moist, which would be, I think, more of a problem for the stickers. Anyway, hopefully I remember to put the annotation somewhere on the screen. If not, I'm sure someone will comment, and then I will, and that will just basically allow you to scan with your phone or anything with a webcam and will automatically bring up this application and input the inventory number for that bottle, and so you would have that option as well. So that's what we're working on today. Let's get started. We'll go to our code here, and the first thing we'll do is a simple thing. We will add an alert box here, and we will just say sent. You can have whatever message. Oh, thank you for submitting sent, thank you. Smiley face. Okay, we'll save that. Now, when we go back to our page here, type in the bottle number, tester, and whether we click the yes or no button, we should get, oh, refresh the page first. Type in an inventory number, obviously choose your information. Notice when I refresh the page, it lost who we were, and that's what we're going to work on here in a moment. We'll just say blah, blah, blah. It says sent, thank you. Yes, and it still says sent, thank you. You know, you get the same information. So we're done with that. That's just, and if we go here, you can see that information was sent. Next, let's work on clearing out the comment box and the ID so you can start inputting anew. So I'm working on this for efficiency. I want you to be able to go from one bottle to the next bottle to the next bottle and just type in this information fast and get it done and over with, unlike what we're working with now at work where we have paperwork that you fill out, you got to find a pen and fill in this information. Sometimes it's hard to read the ID number, so it'd be nice if there was a QR code that also had the ID number written under it in a visible place. So just get things done a little bit faster, a little bit more efficient. What I'm going to work on now though, as I said, is clearing out the information from the bottle. We're going to say look at, this is after we do our post submit. We're going to say, and before our, well it doesn't really matter if it goes before or after our alert, I'm going to put it before. We're going to say look at the elements with pound, which means the ID of, in this case, bottle. If we scroll down here a little bit, you can see our input here for our ID bottle. The number input is bottle, so we're saying look at that element. And before we said dot, oops, said dot val, like so, and that was retrieving the value. Well, if we put anything inside these parentheses instead of retrieving, it's replacing. So we're just going to put two parentheses, I'm sorry, two quotation marks inside the parentheses, and that will say set the value to, in this case, nothing. And we will do the same thing, look for the element with the ID of comments and set its value to nothing. So now we'll save that, go to our form here, let's refresh the page, which updates the code. And another nice thing about doing things on the web is you can update the code, and next time the person goes to the page it will be updated. We'll say 899 for the inventory number, choose a user, oops, choose a engine, type whatever for comments, or just leave comments blank. And when we click submit, we get sent a thank you. It cleared out those two things, so I can start putting in the next bottle. Comments and, I mean, if there's no problems, I don't need to put comments, so I can just keep going like so. And if we go to, oops, that was it, to here you can see all those by Mike Jones, station 21 into 21 with different ID numbers, they're all full, everything's good. Once again, Google automatically puts time and date, which is nice, you don't have to worry about putting that into your code. And so we're doing good so far. Also, we're not really putting any error check here because if for some reason there is some sort of connection error and this isn't submitted, they're still getting an alert saying sent thank you. And I'm actually not sure how to do an error check in this case. If I was submitting to my own PHP code, I could, you know, detect, retrieve information and say did it connect. I'm sure there's a way to post check error. I'm not going to worry about this since this is just a tutorial, but in real world situations you probably would want to have some sort of check to make sure it's actually sent to the server. You know, if you lost interconnection, you click the button and we're not going to get any errors here on the screen saying that, you know, not available. And since everything here so far is running locally, you would not know that this connection error is happening. Once again, just for tutorial uses I'm mentioning that, but not going to do that. But once again, as long as you have an interconnection, that shouldn't be an issue. Going back up to the very top of our code here. So once again, with our jQuery, we're saying once the document is ready, once the page is loaded, is when we start running all our JavaScript. So what we want to do is we want to store, we want to retrieve local storage, which actually we should probably create the local storage first. So what I'm going to do is I'm going to scroll down here. Oops. And right here, what I'm going to do, local storage is so simple. In the past, I've played with cookies a little bit and they were kind of a pain in the butt. Local storage just seems so much easier because all I have to do is type in local storage dot and the dot is what it's going to be stored as. Oops. So we want to store to the local device, whether it be your computer, phone, tablet, whatever, a variable called user, and it's storing it for your site. So if they go to another site that has user, it's not going to affect that. So here, we're going to set it equal to a variable called user, which we created up here, which you chose from the dropdown. Same thing will say local storage dot user, station equals station local storage dot truck equals truck. So again, we're saying store locally a variable called user and the value we're putting into there is our variable, which we created up here, which is the user or station or truck that's chosen from the dropdown. So we'll save that and refresh this page. So you notice when we refreshed it, we lost our information. So I can say Mike Jones, station 22, engine 22, put in a number there, click submit, it's submitted. Right now our information is saved, so if I press F5 to refresh the page you can see, so if I exit out of the program or refresh the page, it loses that value. But we did just write so it's stored locally, so what we need to do now is call it locally, call the local data. So now that we've stored that, I'm going to go up here and we're going to, when the page loads, retrieve that information. So I'm going to say, find the element with the ID of user, set the value equal to local storage dot user. I'm going to do the same thing for the station. So look at the element with the ID of station and set its value to local storage dot station, dollar sign, parentheses, quotation, ID. We're looking at the element truck and replace its value with local storage dot truck. And now if I spelled everything right, wait, something's not color coded properly. What am I missing? Someone at home now is going, ah, I know what it is. But I'm not, oh, because I put these in quotations they're not supposed to be in quotations. Thank you. Thank you viewer at home that was yelling that at me. Okay, so now when document or page is ready, meaning it's done loading, first things we're going to do is we're going to look at the local storage and set the values. Let's go see how that works. I'm going to tell you right now a little secret. We're not. Okay, so refresh this page. We'll say four, five, eight, eight. We're going to say Mike Jones station 22. Now you notice when I'm clicking the drop down, it's highlighting the proper things, but it's not changing the values here when we refresh the page. So Mike Jones, station 20, engine 20, submit. Okay, refresh the page. Well, station 20, I shouldn't have done that because that was the first one on the list. So let's do that again. We'll say Mike Jones, station 22, engine 22, bottle, blah, blah, blah. Yes, sent. Thank you. Now if I refresh the page, you'll see that it says John Smith, station 20, engine 20. We go to our form here. You can see that Mike Jones, station 22, engine 22, submit the last one. Let's just go 9, 9, 0, 0. Submit that. Thank you. Go here. Wait for it to appear. 9, 9, 0, 0. You can see it says Mike Jones, station 22, engine 22. Coming back here, though, that's not what it says. And that's because it's setting those values but not updating the drop-down box default view. This is simple to fix. But a lot of things in jQuery Mobile, since it's adding these CSS themes and making it look nice to update them, you need to refresh them. So what we're going to say here is, once again, look at the elements with the ID of user.selectMenu. So we're looking at that element. We're looking at SelectMenu. And what we're going to tell it to do is simply refresh. It's that simple if you spell menu right. SelectMenu. So we'll do the same thing for the two other elements. So we'll say dollar sign, parentheses, quotations, pound for the ID of station, dot select menu, refresh. And here we're going to say the same thing for the truck, pound. There might be an option to refresh all. I don't know. And that would shorten our code up a little bit. I should look into that. I'm sure if there is someone who will comment below. If not, I'm sure you could write out a little code that does it. But for a simple little application like this, we'll just do it this way. Now, if I spelt everything right, we come back here and we hit F5 to refresh the page. Oh, look. It brought up our local storage, Mike Jones, station 22. No matter how many times I hit F5, it brings up that information. If I fill out our form, put an ID number, I'll choose Sam Johnson, station 24, engine 24, and click Submit. Now if I refresh the page, oh, it saved that information. I can even change that stuff. And if I don't submit the form and I hit F5, it brings back the local storage stuff. Great. We are almost done with this code. We've got one thing left to do. And that is I want to be able to pass it information. So let's go to our code here. Now you'll notice that we called this index.html. I'm going to exit out of the program here. And what I'm going to do is I'm actually going to move the index.html. Now we could move that to index.php because we want this to be a php file, but I'm actually going to call it something else because we're in our scba folder. Self-contained breathing apparatus, by the way, is what that stands for. We have our bottle checklist, but we also have our pack checklist for scba. So we're going to have different forms here. So we're not going to make this the default index. We'll just call this bottle.php. So now if I go back here and hit F5, in my case, because I have indexing on my web server, you'll see that we have our php instead of index.html. I'm going to click that. And the form looks the same. It'll work the same at this point. But since it's php now, we can now pass it some variables. And actually, I guess technically you could leave it as an HTML and pull apart the location to get variables. I've never seen a clean way of doing that. So we're going to do it with php. So obviously in this case, you would need a server running php. To do this, you couldn't do this locally because php is a server-side scripting language. So I'm going to say vim going to our bottle php here. And what I'm going to do is I'm going to put some very simple little php code here at the top. So you say greater than... I'll make this bigger so you can read it. Sorry, less than dollar sign php. Close it with a dollar sign. And then a greater than symbol. Actually, this is going to be one line, so we can actually put all this on one line here. What I'm going to do is I'm going to create a variable called bottle. We're going to say equals dollar sign underscore get inside some brackets here, inside quotations, bottle. And then don't forget our semicolon there. So what we're doing here is in the php code, we're creating a variable called bottle. This has nothing to do with the JavaScript, so the JavaScript is not going to see this, recognize this variable at all. What it's going to do is it's going to look for a get submit variable called bottle and put its value into the php variable of bottle. So what we can do now is come down here to our HTML code where we have our bottle inventory number here. And we can give it a default value. If we say value equals, we can say here one, two, three, four. If we were to save that and go in here and refresh, every time you start this application, it's going to put one, two, three, four there. Obviously we don't want that because the bottle isn't always going to be one, two, three, four. What we can do though is we can pass it some information here. So what we're going to do is we're going to once again put our tags for php code. We're going to say echo dollar sign bottle. Technically you could do this all in this one line rather than two separate spots, but in other cases you may have more than one variable and it's good to have that up at the top in my opinion. So if I did this properly, what it's going to do is we save that. If we hit F5 to refresh, nothing. We don't get anything in here. But up here if we say dollar sign bottle equals 5599 and hit enter, it puts that value in there. So now we can take this address for bottle 5599, make a QR code. Once again I'll try to remember to put an annotation or in the description of the video to my video on QR codes. I'll put that on each bottle, but with a different inventory number for each one and when you scan it, it brings up this, automatically puts in that number. Now technically this works if there's no bottle information there. It will just leave it blank. Technically I guess if you want to be technical about stuff, you probably could do an if then statement, but I don't see a problem with it. I thought maybe it might create an error log here, but apparently it didn't, a PHP error log, and I do have error logs turned on on my server. So it's not even going to fill up an error log or anything, which would be my one concern. So that's it. We are done. We can now either open up this application with no bottle number and have it be blank, or we can scan a bottle and have it put in the bottle number using a get form submit. And what I can do is I can scan the first barcode, submit it, and I can either close this out and go and scan the next one, or I could just type in the next barcode and keep going, or inventory number and keep going. So that's it for this tutorial. I think it took me three tutorials to do this, probably 45 minutes an hour for this entire application, really the main functionality as far as the form submit was done in the first five minutes. We spent the next 45 minutes an hour creating this, and a lot of that was explaining. So probably half an hour to 45 minutes, you could have had this application done and save your work a lot of paperwork, because paperwork builds up, and lots of times that paperwork has to be entered into a computer anyway. So this is my first real tutorial on jQuery mobile, at least this last first series on it. Once again, let me know what you think. Did you like this kind of longer tutorials showing more, which I think with jQuery mobile might be a good thing. We kind of got some jQuery, jQuery mobile, JavaScript, PHP, HTML, HTML5, all in this. Or do you prefer when I do simple little individual tutorials, which I will always do because that's what I prefer. I prefer a tutorial on this is how you create a dropdown box. This is a tutorial on how you create a comment box that you can submit rather than longer tutorials. But some people have asked me once again to do real world scenario applications, which is just putting together this stuff from the small tutorials, but maybe their minds just work different than me, where I much rather just see I need to do this, show me how to do this, I can figure out the rest, or watch other videos on the rest. Anyway, comment below, let me know what you think. I hope you enjoy this. I'll try to put a link in the description to this application online so you can play with it. Once again, thank you for watching FilmsByChris.com. That's Chris with the K, and I hope that you have a great day.