 As some of my viewers may know, my full-time job is a firefighter, and I occasionally like to write software for firefighters out there to make our lives a little bit simpler, and all this software may have purposes in other fields of work as well. And if you go to github.com forward slash metalx1000, that's my username on github metalx1000, and you click on repositories, you'll see all my repositories, and if we type in here fire, you'll see that I have a project called fireware, which is just a collection of a bunch of different programs I wrote, and I try to make them as generic as possible, because all fire departments are different, and I just want to give you something I want to make them functional, but generic at the same time. Now if we click on here, you can see the full project, and like I said there's lots of them that I've shown you bits and pieces of them before. Today we're going to be looking at this one shift exchange, and there's the code there. You can download the whole project in a zip file, or using this github link here, and then just download and unzip it to your desktop. Now this, this particular one I'm still in the middle of working on and improving and tweaking, so it's not, it's functional, but not all the bugs have been worked out. Maybe by the time this video is posted they will be. I have already cloned it over to my web server here, and if I go into fireware here, you can see all the code, and I can go into shift exchange, and there's the code. Just a few files, mostly pretty simple here. Let me first off, for those of you who are not in this field of work explain what a shift exchange is for firefighters, is I normally work 24-hour shifts, and I work on a certain shift, so every third day I work 24 hours. I have a certain number of vacation days, but there's a limited number of people that can be off on certain days, so you may not have the vacation time or you may not be able to take vacation on the days you need, so another option is a shift exchange. You may work on a different shift than me, you know. I'm Bob and you're Charlie, and you work on a different day than me, so I can say, hey, will you work for me next Tuesday, and I'll owe you a day, and then a few months later you need a day off, and I come and work for you. It doesn't affect your pay, you both get your regular paychecks, it's just you work for somebody else, and then they owe you a day. And what this shift exchange log does is sometimes it's hard to keep track of that. We fill out the paperwork and you hold on to the paperwork, and you try to remember, oh, he owes me two days, and I owe this other guy three days, you know, and you just want to make sure that you're evenly balanced. Well, this software here makes it very easy to log everything to a server and easily search through to see how many days you may owe somebody, or they may owe you, or if you're even. So today I'm just going to give you a quick overview of the source code. So here we go. We've got certain files here. The connect file will hold your credentials. So if I cap that out, it has some generic ones in there right now. We'll be connecting to local host. This is all PHP code here. Use name and password is root and root. Obviously, if you're saying this is my real system, you're going to want to change that. That's just what I use for testing. And my database is called test. So obviously, you'll want to change this, this and this to match what you have set up on your MySQL server. Next, we'll look at, let's see, table. I like to put the table I'm working in inside a file. That way, if I decide to change the name of the table, I can change it in one place rather than all the different files. And so I can just include that PHP inside my other PHP files. Now, let's go to our web browser here. And here we have the actual program running. And I gave you more of an overview last week. Let's look at the page here. The first page has some, it's using jQuery mobile and has some jQuery. So I can sit here and I can type in, start typing a name, it'll bring up a hidden list. And then I can click on that and I'll add it to the first column. And next time I click on the name, we'll add it to the second. So, and then we have some date fields and a comment field. Let's go ahead and look at that in the code. Again, this is a quick overview of the source code. I'm not going to go through step by step. That would take too long. But it's all stuff that is fairly simple. And can be gone over in other tutorials. But again, this is an overview. So I'm going to them in my index file, which is that that main page there. And again, you can see there is a include file up here called load. And what that does, it actually has another load files actually, including two other files. Let's actually look at that real quick. Load dot PHP is I'm sorry, I'm getting things mixed up here. Load is actually generating a key or checking your key. So just as an extra security, you should have your web server encrypted, hopefully you should have a login. And then also I like to put these keys inside the URL, which obviously if you're not encrypting it sniffed can be sniffed. But basically, if that key does not match, it's going to redirect to this page. My default, I haven't redirect to my home page. So now let's look at the index file. And so that's what that does before anything else loads. If that key does not match in the URL, it's going to redirect you so you don't even you won't get any further than that. Again, that's not security in itself. It's just one layer of security. Now this generate key don't get that confused. I really should be calling that generate a PID in my databases. I give every entry a individual PID and this will generate an eight digit random key or PID for each entry. Now, we're using some jQuery here. So we're waiting for so we create our PID right here. So it's that variable, the global variable there. And we have our document when the document is ready, we're going to check, you know, is there a user stored? Because you may notice if we go back here, that if I was to say, you know, new entry, it automatically put my name in here remembers what you put in here last on that just one step, you know, making it easier one thing, you don't have to type. So what this is doing is it's saying, you know, check local storage. Does the local storage have a user? If so, change that value to that. Next, we're going to check a file called users dot PHP. Let's go ahead and have a look at that get users dot PHP. And this is just a list of name, list of names. So here I have a static file, you'll probably have this in a database of some sort and have this page generate that code. But it's the list of all the users. And the reason I'm having a list rather than having you type in someone's name, which is an option, you can manually type in someone's name if you want. But the reason I'm having that is to make it easier to search. Let's say someone's name is Michael, you might enter in as Mike. Someone else might enter in as Michael. Later on, you go to search Mike, and the Michaels won't show up. So having a list that has everyone's names prevents that prevents spelling errors just make searching easier. So the user file right now is static, but in a real production system, we'll probably be connecting to a database and outputting the list here. So let's go back to our Vim index and look at what this does. So we're looking at that file, we're saying, you know, use jQuery to in the background, grab that file and grab it as data. Now I'm creating a an array, and we're splitting that into by new line. So each new line is a new element in that array. And then we're going to iterate through that and say for each basically each name on each line of that file, we're going to add to our list output that entry. And then we're going to append it and refresh that list. When we're done, we're going to refresh the list one more time kind of redundant, but I just like to make sure. And then we're going to just add a trigger here for the list. Next, down, we have our submit button. This is what happens when we go to after we have all our entries saved, we're going to submit it. So when that submit button is going based on the ID of that button. And exit equals, we're going to set exit equal to false. We're going to check the comments. Because to make things easy, I iterate through all the items, I've classed each item as item, and just to make sure that they're not blank. But comments can be left blank. So if comments are blank before we check that, I'm just going to add a period. That way it can iterate through all of them, basically ignoring the comments, this could probably be done cleaner, but it's functional like this. So let me show you basically what that does is right now, I have, you know, this person, let's just add in somebody. This person will work for this person on this day, I'll leave this day blank. If I go to submit, we get a button that says exchange date cannot be left blank. So basically instead of saying, look at first user, is it empty, then do this, look at the second user, is it empty, let's do this and writing out the code for all that, I just iterate through all of them as if they're in an array, and we say, hey, let's create a value, a variable for this function, check the value of that item, if it's blank, then you know, check its ID and get an alert based on its ID, exit will equal true, return false, and then down here we'll exit out. It's a little sloppy the way it is, I might clean it up a little bit later, but again, it's functional. And that just is one loop, that way I can add as many items as I want, and it will check it all. Well, if everything's filled out, then we're going to say, okay, look at user two. Because the reason this is an assumption I'm making is that if you're filling out the paperwork, you're filling out for someone to work for you, because you're going, hey, I want you to work for me. So I'm going to assume that your name is going to be the second name. So I'm going to say user two, set user, because on your system, you want to be the user even though it's labeled user two, it can be a little confusing the way I wrote that out, we're going to get that value and save it to the local storage. That's what up here is checking. So once you fill out this once, where was it, right here, next time you refresh it on that device, because it's being stored local, not on the server, it will automatically fill that in, just to help you save one little click of typing in someone's name. So it saves that value. Now we actually submit everything to the server. We're going to say, get update, update is a script I wrote that will check if an entry exists based on the PID will update it, if not, it will create it. And I just called it update because it does updating as well. And we're going to, you know, pass each value, this can actually be done, probably a little bit cleaner using, I'm actually listing out the thing, serializing, you can serialize the form, probably be a little bit shorter, but I actually just list out each item. There's only five items, it doesn't matter. So it's submitting each of these items to this URL. And then if that once that's done, it will announce exchange logged. There's a little bit more to this code, which is basically the username search. But before that, I want to have a quick look at, no, I'm not going to look through update. That's that's a whole script that does a lot of stuff. But now we're going to go here and we're going to say, you know, search user on click link. So this is when you filter out the list, when you click on somebody in this list, this is that's what's happening. This is the the function that's happening. So when it's clicked, we're going to get the name inside that that list item and check the count name. So we set up here name count to zero. That means, okay, name count zero, when you click fill in this user, and then we add well, we don't change it. We don't add to it. We change it to one. And so next time it's clicked, it changes this and then changes it back to zero. So again, if let's say, I can say Tom Dan Tom, and you can see how it's changing based on what name I clicked there. So actually, let's put a space here so I can go down the list here. And as you can see, every other click will change every other name. So that's what that's doing there. Again, we have a link for the new entry. So basically linking back to itself with the key here. Really, I probably should have put that in a file so I can change it in one place and have it all functional. And again, that's not really security. It's just an extra step of security after username and encryption without encryption and username. Well, without encryption, all that's useless, both username, password and the key, if it's not encrypted. But with encryption, it's an extra layer of security. And then there's your basic HTML. So this has been kind of long. I really did more of an overview than I wanted to. I'm not going to get into the view entry because it's basically a list here that you can look at and search through filter two. It's very basic jQuery mobile setup. And that is it. There's a little bit more to the code, some other files that we can list out here, you know, the print here, which is basically just grabbing stuff from database and generating a list there, or actually a JSON list. But I thank you for watching. I hope you find this software useful. If you have any questions, let me know. Again, it needs a little cleanup and a little bit more testing, but it is functional at this point and hopefully it will help you with your life. As always, if you enjoyed these tutorials, this one's more of an overview than a tutorial, but I hope that you enjoy it. Be sure to like, subscribe and share. As always, I hope that you have a great day. Please visit filmsbychrist.com. That's Chris Decay. There should be a link in the description.