 Okay, this little series is just showing you jQuery mobile and at first I was trying to just make jQuery mobile showing you basic features of it but they seemed kind of simple and straightforward. There's a jQuery mobile site that basically shows you everything. So I thought instead of showing you how to do individual things, we'll just start creating real-world applications. I haven't asked to do this in my tutorials in the past. It's something I usually tried to avoid doing. I much rather show you the technique than actual practice because actual practice is going to change from person to person. But basically we're going to create a little application that would work on a desktop, tablet, phone, whatever device and it's going to allow you to, in the end, scan a barcode and it will bring up the application and basically we're going to be taking, with firefighters, we have our air bottles which are called SCBA bottles and this is a little program that will allow us to submit that we've been checked. We've checked them and that the air pressure is okay in them. Where I work, this is something we do. Well we check them every day but we actually fail at paperwork on them once a week so the person in charge of them can keep track of where the bottles are and whether they're maintaining their pressure. Right now all that information is filled out on pieces of paper which just gets shoved in a file. We're going to create the application so it saves it to a spreadsheet and that will allow the user, the person who keeps track of this stuff, to track whether the bottles it can detect, you know, this one keeps becoming low, it probably has a slow leak or something like that or just where the bottles are. And to do this, in most cases when you make an application like this, you'd want to use a database like MySQL or something like that but I'm actually just going to use Google Docs and put them into a spreadsheet. The reason for this is once the information's entered it's not like the end user is going to be modifying that information. It's basically submitting so we don't have to worry about modifying it. Any modifications will be made by the person who keeps track of the bottles and that person is going to be a non-technical person and they're going to want it in a spreadsheet anyway because these type of people love spreadsheets. Plus, you know, with the fire department you may not have a server, you may not, you know, have a website even though those things only cost a few dollars, fire departments tend to be slow when it comes to technology. Google Docs is free to use, you can back it up, it goes right into a spreadsheet and if you need to grab information later on from the application, you can always share it as an SEV and dice through it later on but I don't really see the need for that in this scenario unless you're trying to make an application that charts something out, in which case you could probably just do that within Google Docs as well. Anyway, that was enough talking, not enough talk for like three minutes. Let's dive right in. We're going to go create, we're going to go form and we'll say just get started, choose a theme, doesn't really matter, I'm going to grab the blue header one because I like that. And then Google Docs makes it really easy to make form, I'm going to make a text thing here and there's certain bits of information we need. We need the user, that would be the person who's filling out the form so we know who checked the bottle. We'll add an item here where I'll say what station they are at. We will ask what truck they are checking out because stations can have more than one truck at them. We're going to ask for the pressure of the bottle whether it's good or bad. We like our bottles to be over 4500 psi. So we'll just say psi here and we'll give it either a full or low. And then we also want comments. So that way if there is a problem, we'll make that a paragraph. If there is a problem, they can explain the problem. And I think that's all the information we need. You also would want the time and date but luckily Google Docs automatically time and date stamps all submissions. Let's give this form a name, we'll just call it scba-bottle-check. And we'll say bottle check because there's also the packs the bottles go in that also need to be checked and we'll also make an application for that when we're done with this one. Then we can go live form to see what it looks like and we can say I'm Chris. I'm at station 22. I'm on engine 22. The psi the bottle is full. I can say hello and I can say submit and it submits and it gives you this little screen here. We're gonna go back here and we're gonna go choose response destination. So this is where you decide where the output the submits go. We're just gonna say we're gonna create a spreadsheet that says that it's the scba-bottle-check responses. We'll create that and if we go back to our Google Drive here you can see right here we've got the, oh that's the form. Let's refresh the screen here. There we go. So we have our form. We can go and edit the form anytime and here's the bottles and you can see right there it automatically puts a timestamp. It gives you a nice little view of the user station truck psi and any comments which we can also stretch out because comments might be kind of long. And you're probably going why are you doing a tutorial on this? This is really simple. There's no need for a tutorial. Let's just put another name here. We'll say Mike. We'll say station 23 engine 23. We'll say that this bottle is low. We won't even put a comment here. We'll click submit. I also want to mention that when you're creating the form there's an option to make these certain things required and that would be good if we were actually going to use this form but we're not going to and we don't want to make that required because you're gonna want to do any error checking in your own code. But you can see automatically within a few seconds everything shows up in the spreadsheet here. So people could be submitting stuff and the end user can just see them popping up in here. You know the guy that's maintaining the bottles. So now that we've created this form and it's going into there now what we're actually going to do is go and actually write out our own form for multiple reasons. One because you get this stupid little thanks here and we don't want that. We want this to be very efficient. So we also want to be very efficient for mobile devices. We also want it to be able to scan barcodes where actually our application is not going to scan barcodes but you can scan a QR code that will bring up our application and automatically put in the ID of the bottle which is something I forgot to put into here. So let's add an item. Actually let's edit this one. Make this text will say really this should have been further up. I forgot to put that in here. The reason I'm changing the order here is because I want the comment to be the last thing in our spreadsheet. So here we'll make this a paragraph and we'll say comment done. Okay. So now we can go to our live form and you can see that it's changed there and really it doesn't matter at that point as far as where things are going to put. Because we changed that that's going to mess up our spreadsheet because this is now our bottle ID. So we'll shrink that back down and comments will make up wide. So that was my little mistake there. We can actually delete these first few delete rows. I mean it's not a big deal. We could have put the bottle ID at the end and really I would prefer it to be up here before the username. But not a big deal either way because that's just once again the person who's checking everything with the spreadsheet as far as the actual form. We're going to create one now. So we've done the simple boring part of the tutorial. Now we're going to get into the jQuery HTML5 and JavaScript jQuery mobile part of everything. So let's go to jQuery mobile.com and in here you can go and you can download latest stable version but instead of just downloading that way I like to start is I go to themes which brings up their theme roller which makes it very easy for you to make colored themes and it gives you a little example code to start with. So we're going to say get rolling. So you have different themes here A, B, C. You can create more. I'm going to make B a red theme. Now it's going to look real ugly here but we're never actually going to use this theme in this scenario for the entire form. It's just if we want a red, oops I forgot for some reason that button. That's good enough or maybe this blue. There we go. If we want a red button, a red header, anything red we're going to call theme B. This is the way I do things. You may do things different. I'm going to go blue here, blue here, and blue here. So we have a blue theme because there is a point where I'm going to have a red button and a blue button and I can call different themes. So now also at this point I already have my terminal logged into my web server. I'm in a folder. There's nothing in this folder at this point and what I'm going to do here is I'm going to go download. I'm going to go I can call it whatever I want, scba. I'm going to say download zip. Now this download zip file is temporary so this URL is only temporary so what I want to do is going to grab it here real quick. I'm going to copy the address and I'm going to say wget and paste in that URL and now we just downloaded that zip file. So I'm going to unzip that and you can see an unzipped a couple of folders with the themes and gave us a basic HTML index file to begin with. So at this point what I'm going to do is I am going to go to my website here in my browser. I'm going to click on scba that's our folder. This is what that default theme looks like. So now I can say vim index HTML and I can come in here and I can start editing the example code. Let me knock down the size of that a little bit so things don't wrap around too much and first thing we're going to want to do is change the title. We'll say scba check let's say bottle check. Okay and then in here we have our main page because you can have different pages here and what I'm going to do is I am going to say I'm going to delete a couple of these rows that we don't need and I'm going to change the title here the header here to bottle check form. We'll save that let's go back to our web browser here and refresh. So we got rid of all the stuff in there but we got our main you know header section here which later on we're going to be adding our own JavaScript code to using mostly jQuery and then we have our little content area here and you can see that by default we're using theme A which is our basic gray look. So let's start writing out our code and I'm going to create a label and I'm going to say bottle inventory if I spell everything right ID colon and this is the label for our input so I'm going to say input now the input type here is only going to be a number because it's the bottle inventory number so I'm just going to say the type is number what this does for us is well it gives us a little scroll bar well I'll show you a second let's give this an ID of bottle value equals oh we're not going to give it a value we're going to assign it a value here in a little bit so right now I'm just going to save that and if we come back in here and refresh you can see we have bottle ID inventory ID we have a input box here but you notice as these little scroll bars and it allows you to scroll up and down but another great thing about this is on a mobile device instead of bringing up a regular keyboard it's going to bring up a number pad making it easier to type in that inventory number but we're also going to set it up so we can pass our our information to this page but real quick here let's add in our other stuff now these next few items I'm going to hard code into the code but in reality if you're creating an application like this where you're going to be interacting you're probably going to be writing a lot of small applications where you're going to request some of the same information in this case user station and trucks we would actually create another application before we do this kind of like a contact list with and all the employees all their information and save all that to a database same with the stations and trucks at that point we can request all that information from the database using PHP and then input it here have it automatically alphabetize everything and that way if we have all these different applications you add a user you know a new employee or we build a new station or buy a new truck add that to the database and all your applications automatically update rather than going to have to modify the code but just for this tutorial we're going to manually type in all this stuff so we're going to say select ID equals user and we're going to give it an option with a value we'll say John Smith and it will display John Smith now the value is what's going to be submitted to the form the inner HTML here is actually going to be what the user sees so if you know the information needs to be submitted different you can do that but in this case it's going to be the same because it's just the username before I forget I'm going to close our select tab or tag here and I'm going to paste that three times now obviously probably gonna have more employees than this but once again whoops this is just example and normally you would pull this information from a database Mike Jones I will say Sam Johnson and of course we'll change this information here as well Mike Jones Sam Johnson okay now we're gonna do the same thing for the truck our station and trucks so select ID equals station let's close our select tag before we forget let's say option value equals station 20 the viewer the user will see station 20 in the drop down I could type today and real quick we will so I'm just copy and paste that line a few times change the information for each one and we will do the same things for the truck and this would be example I'm just going to put the truck names as the value but our trucks also have inventory numbers so you could see engine 20 in the drop down but when it passes the information to the form it could put the inventory number instead if that's what you prefer and again all this information would normally come from a database which we don't have in this case what am I doing this should say truck and that should say select not select show that's where color coding comes in handy you can see your mistakes a little bit easier option value equals engine 20 engine 20 why do I keep doing that my fingers are going faster than they should be okay again I'm just gonna put an engine at each station but in reality you could have more than one station might have an attack or a squad truck at a different station not just an engine you could have a pumper as well but just to keep this simple so next we will have well let's save this and have a look at what we're working on here at five to refresh so we have our inventory number that goes here we can go John Smith Mike Jones choose who that is and then choose station and engine next we're going to ask whether the let's ask for a comment at this point so we're going to say label comments label close our tag there and then we'll say text area with an ID of now if you're not familiar with JavaScript and HTML hopefully you know a little bit before you jump into this tutorial I should have said that beginning the reason we're getting everything IDs is because the JavaScript is going to retrieve the information from different elements based on their ID so now we have comment box which by default is resizable which is nice and of course on a mobile device they should be able to hit the microphone and speak a comment in there rather than having to type or you can type using a keyboard if that's what you prefer let's now the last thing we're going to do is we're going to ask whether the bottle is low the pressure is low or if it's full and instead of doing a drop down we're just going to make that two different buttons either it's low or it's full we also want to give it a a different color and that's where different themes come into play so let's give it a label here so the user knows what we're asking we're going to say PSI over and as I said at my department the bottles we use over 4500 PSI label so it's asking is it over and so we're just going to give them yes or no buttons but let's do this first we're going to create a div tag we're gonna say class equals UI dash grid dash a and what that's doing is that's part of the jQuery mobile and it's just going to give the layout of our buttons instead of them going expanding the full width and having a button above and below I figure have each one next to each other because we don't need full width screen width buttons so at this point I'm going to now create our buttons and they're going to be in their own little div tags here div class equals UI dash block dash a say our button as an ID of low we're going to say data dash theme equals B and we'll say no close our button tag and close that div tag as well I'm going to quickly to save time in the toriel just copy and paste what we're going to change is from block a to be instead of low I'm going to say full high might have been a better option but I've already started this so see and we're going to change this from no to yes so if you remember correctly if we go back here and go to our theme roller theme B is red theme theme C is blue so now you can see that our no button is theme B so our no button should be red so it's not over 4500 so that's not good it's low and our yes button will be blue and we are also these buttons are also going to be what's going to submit the form so as soon as they click that boom it's going to submit the form and we'll clear out both the comments and the inventory ID the rest of it not only will it not clear out but we'll also saved local storage on the device so that they can come back later because most time you're at the same station working on the same truck you know if you're working on your phone or whatever of course it always be changed so real quick we'll go here refresh our page so we got our inventory number we can put in here we can say Mike Jones station 20 engine 24 type something here and we can click no or yes right now either button does anything because our form is completely done the visual gooey portion of this tutorial is done next we're going to be working on the actual coding we're going to be working mostly on JavaScript we're also going to throw in a little bit of PHP to allow us to grab the bottle ID from a barcode scan so come back one week from today and the next tutorial will be up and we will complete this application we got kind of the tedious part at least what I would consider the tedious part the design part out of the way for me coding is a lot easier it's making stuff look nice which is the difficult part and on a phone if I take this it would look more oops didn't mean to pull that out but I did on your phone it probably look more like this so alright unless you turn your phone sideways and then it's that way so okay be back in one week as we finish up this little application that will take all this information submit it to our Google doc clear out certain things store certain things to local storage and also grab the information that's passed to it from a QR code thank you for watching and please visit my website filmsbychrist.com that's Chris with the K there should be a link in the description hope this tutorial wasn't too long and boring I try to keep them short which is why I try not to do full applications like this in my tutorials but every once in a while I think some viewers like this sort of thing so let me know below do you prefer short little tutorials on individual items or do you like occasionally having me go through a full small application but something more than just one simple task I personally when I watch tutorials prefer one simple task I hate when I'm looking for figure out how to do one thing I go to a tutorial and it's a half an hour long like this one probably is and I'm like man I just want to see how to do the one thing but based on viewer comments seems like occasionally at least I should do a tutorial like this it's kind of long plus as I said with jQuery mobile I kind of wanted to teach it but it seemed kind of redundant since their website is so well documented I mean so incredibly well documented that I just felt like I was copying their website doing tutorials and I thought maybe a little more practical use of them so I will be doing more on jQuery mobile similar to this with other elements because there's plenty of elements jQuery mobile but probably not a whole lot of them but comment below let me know what you think I hope you enjoy this tutorial be sure to come back next week as we finish up this little program and have a great day