 Okay, this video is the third in a series on some software. I wrote If you haven't watched the previous videos, I suggest doing that Hopefully I might put some sort of annotations somewhere in this video To them and or a playlist with them in it And the software is an overtime view list for calling overtime in particular, I was looking at for firefighters. I am a firefighter by day and I Just thought that this software could be useful And the first video showed you how it works how users interact with it The second video showed you how to install and set it up, which is really just a couple of clicks I showed you a little bit of the code just to to give you an overview But today we're gonna be looking at the rest of the code So if you go to github.com forward slash metal x1000 because my username is metal x1000 click on Repositories and hopefully I'll never put an annotation to this in the description of this video Find the ones labeled overtime list click on that and today We're just gonna go through each of the files and I'm gonna go quickly talk about what each one does Themes something you don't need to get into really I use jQuery mobile for the interface And this is just some CSS basically for the colors and the look and feel of the application You can play with that if you'd like license it is under a a gpl l lgpl license and So you can read through that if you're unfamiliar with the lgpl license Next is a read me file, which really doesn't say anything at this point. I need to add some stuff in there Calls calls is the main interface for the person making the calls. This is a server-side script And it is well, let's let's have a look at it. Let's go here I have installed calls. So this is what it looks like This is the script that if you click it moves the names and if you swipe it brings up a little dialogue blocks that On a phone or anything that can dial a number you can click on the number to call that person And when you do so they move to the bottom of the list So let's go ahead and look at the code for that. Just have a quick overview of it as you can see it's HTML code here, let me make this a little bit bigger and I mean The top is basic headers We're importing some jQuery mobile stuff some css that we've already talked about Sitting up for a mobile view. There's a title of the page. We'll skip down the bomb very basic body With some div tags this div tag is the pop-up from when you swipe it's mainly blank tags right now and Same thing with the rest of the body. There's a header and then there's a list view here I do recommend getting yourself familiar with jQuery and jQuery mobile if you're not already but hopefully As you can see the main portion here this JavaScript here is what we're going to be looking at So this first part here says Document ready when the page is done loading. What are we going to do? Well first two things here is list view the list view is well the list view here You have two functionality here. You have click and swipe both of which go to Move it moves the person the bottom of the list. So let's go ahead and jump down to that function So when you click or swipe you will do this It will get variables from the item that you selected So it's going to get the the PID the name the phone number the rank and Then it's going to remove them You know from the list and really move them to the bottom of the list But then it's going to call our update funk or update script Which we'll look at in a moment and basically we're sending it nothing but our PID number So that's just what moves in the bottom of the list in our database basically It's just updating their their update column, which is a Unix timestamp Which is all done with this update PHP script here and then it retrieves It calls another function called get Json, which we'll look at it a second It also calls another PHP file, which is the log again if you look at the previous videos We have two tables one that rotates names through the other one that does a continuous log And this is sending it the name phone number in rank the server side script will date stamp it and everything like that Now as I said when it's done Submitting to our update functions going to call another function called get Json Well here we got our get Json function We have a URL here, which is read and if we actually go to That right here and click on it you can see it just gives us some Json output. It's what's in that database that that first table there and basically it's going to get that information in the Json format and And iterate through it using a for loop here So it's getting it as a ray basically and then going through that array and it's going to update our list so basically If we go back to our calls PHP We can click on any one of these or swipe it and it moves it basically what it's doing is It actually does remove it from list for a second, but then it updates the whole list right away So every time you do that it's grabbing the whole new list That way if there's more than one person working on the list you get a fresh view of that So that's what all this does and the one more thing we looked in look at here really is Well, there's this button click which was in there from testing I can actually remove that now that would automatically That would update the list without refreshing the page So that's there if you wanted to add a button to Refresh it really there's probably only gonna be one person working in this interface at a time One person making overtime calls in most situations if you're like my fire department anyway There's another so we have up here the list view swipe to move them to the bottom list But there's another list view swipe action here So what does this do this grabs all that information again from the item? You swipe and it creates a pop-up and places that information in there and with a hyperlink reference here that has the header of tell which on Some browsers on some mobile devices is what brings up your call that allows you to click that phone number to call Okay Connect I talked about create database. I talked about in credentials. I talked about all in the previous video live view live view is almost identical as Our first view except for removed a whole bunch of the JavaScript The only thing we have is the get JSON function here, which we already talked about it grabs the read PHP and updates your list And then I added in a time interval here that says every 3000 milliseconds, which is every three seconds. It's going to run that function So basically I removed all the code that actually Interacts of that a base because this is supposed to be viewable only this is what the regular user is going to be looking at So basically the same code with stuff removed and a little again time interval there Next is the log PHP Log PHP is what we'll be doing the the logging So you have update which will be updating our first table log will be updating our second table Basically, it's calling our connect PHP which connects the database Set some variables for our table from our table PHP and then we're going to use a Array map here with the Get here It's going to get all the form submits that we submit to it and we're going to strip tags and HTML special characters This is to help avoid people trying to put in false information to basically gain access to stuff on your server They're not supposed to it's one thing I do for that there. I also set, you know the time zone for me It's it's New York time zone. I'm in Florida, but I'm in that up-down time zone And then we're going to set the format for the date Here we're going to set a PID Based on a timestamp here Excuse me, and then we're going to access our table to which is our ongoing log, which is what this PHP file is mainly manipulating and it's going to You know call that send the value of the PID And then once it does that it's going to loop through each of the form get submits and their keys and It's going to enter each one of those right here is entering each one of those Right here is what that's doing actually all this right here. This first line is just giving the output to Your web page So you know what values were entered and then here we're going to be doing We're going to update that table again that entry again based on the PID. It's basically the PID is the unique Key for each user. You want to make sure that they have a unique key in that PID and basically We're just updating an entry based on that And then at the end we're closing and then we're just echoing out date that we generated up here Going back here That was log log JSON this is Basically going to be doing your output here, so If we go again back to here and we can click on our log JSON It's the JSON output, but instead of just our list It's our log our ongoing list, which is grabbed by our log our view log file Which we'll get to here in a moment again connecting to our database setting the table variables Searching through it grabbing the results putting them in an array and then iterating through the array And then we're going to print that output as a JSON coded output And then we're going to close our connection to our database here Next is read read is Very similar, but it's going to search our first table. This is again We have two tables. This is doing the exact same thing as our last code, but instead for our log It's going for our main table for our call of view Next we have well our test script here, which is actually not used in the main interface But I talked about it in the last tutorial if you want to test out the software This basically is a shell script a bash script that Generates random names and random phone numbers basically a bunch of fake names and fake phone numbers Just for testing this out and it will add edit them add them to our database So our update PHP script is obviously very important. This is For the actual call us again. I keep saying it, but I just don't want you to get confused We have two tables one is the log. There's an ongoing list and then the other one's a rotating list This is one the update the rotating list and it's also used for creating entries creating users So let's look through this again. It's going to connect to our database. It's going to Set the variables for the tables. It's going to strip away any Tags or HTML special characters For security reasons. It's gonna set a time zone and date format We're gonna get the PID from what's passed to the script from the form submit And then we're going to search our database here for anything with that PID and It's gonna say okay get the results if there's more than zero results We're updating entry if not we're going to create an entry. So that's why this script does two things Again, it updates So each time you move some of the bottom of the list it's updating them But if you want to update someone's phone number or rank This will do that as well based on that PID. That's why each user has to have a unique PID if it doesn't see that PID It's going to create a new entry so you can use this for updating entries or creating entries So once it's either created or updated an entry it's now going to add the information to that entry So anything that's passed to it through the get form submit it's going to iterate through it here get its key And its value it's going to give some output to the screen for any user here but then it's going to go into the database and It's going to well update that table and it's going to set the key to the entry Where the PID that is sent is great. So hopefully you're somewhat familiar with databases And if not this isn't very helpful for you, but that's what it's doing you look over it again It's the thing about my SQL. It's pretty straightforward, you know Where are we doing? We're updating. Are we updating our table? Where are we doing? We're going to set The key that we're grabbing up here equal to the entry and then we're going to only do it where the PID is equal to the PID we send to it and Then we're actually going to Where that's basically creating a variable here, and then we're actually doing it here for Connecting and doing connecting and then doing that You date creating a Unix timestamp here again, that's how we rotate the list by giving it a updated time list and Then we're actually going to submit that information and then we're going to close the database and just give a time output just for visuals and Then the very last thing in this Folder here is our view log if we come here again. It's similar to our other scripts as far as the body and stuff We have our get Json, which is the same as before except for it's looking at a different file because instead of looking at our list It's looking at our log and it's going to grab some more information where the regular list Just has a name and phone number the log actually has what rank and other information rank and the timestamp from when they were called and Up here We're saying when the document is ready. We're gonna call that Json Function again, there's a function here for a button click that was for testing But you can add a button in there if you want to have a button to automatically update that list Otherwise just hit f5 to refresh the page and that's it I know that was a quick overview, but it's fairly simple a lot of repeated stuff in there Because of different tables and different databases and the slightly different things they do Pretty straightforward though if you're familiar at all with JavaScript J query PHP and my SQL that should be very straightforward for things that if you're gonna be doing any type of web design You really probably should know In my opinion, I guess PHP isn't you know necessary because there's other Server-side languages out there, but you definitely don't want to know some sort of server-side language some sort of client-side language and some sort of database Language that you're going to be creating stuff with and so if you know those four things This should be pretty simple if not this probably is kind of confusing for you But look over it if you if you if you done coding a lot of it should be pretty straightforward And that's it again, that's up on github my username is melex 1000 just look for my Repository that's labeled Overtime list you can also visit my website films by chris comm that's chris for the K There should be a link in the description if you enjoyed this video be sure to like subscribe and share Again, I hope that you watched the previous videos If not hopefully there's annotations up on the screen to a full playlist so you can watch all the videos on the software And as always, I hope that you have