 Okay, it's going to be a quick look at just a little template I made. I made it a couple of years ago, didn't update in a while, and there was a bug in it. I fixed it. And it's just a quick little template to get some forms and databases going in a web browser using Bootstrap inputs and stuff like that and MySQL. So this is, again, just a quick overview of how it works. So it is at gitlab.com, 4 slash milx1000, bootstrap dash forms, capital B, capital F. And I also have a patch you reinstalled and MySQL and PHP MyAdmin in this particular case. And then here's the word that we're going to put the web directory. So real quick, what I'm going to do here is I'm going to create a new database. I'm just going to call it test, create that, I'm going to create a table, I'm going to call it test, number of inputs. Let's go ahead and make that five, just to have a few things in there. There's a little bit of repetitiveness in what I've created. So we're going to have an ID, which is an incremental ID, and then we're going to have what I call a PID, which allows for creating random information. The both unique identifiers for this. And there are reasons I do that. So let's go ahead and just type in, I hear name, here we'll do address, and we'll do date. And just for simplicity, I'm going to put these all to text. Probably not the best thing to do, but that's what I'm doing here. And I'm going to create this as auto incrementing. Again, this isn't really a tutorial on creating databases. It's just a look at the application template I built. So we've created that, we've created a database, it's an empty database. Let's go ahead and go to my form here, and we're going to go to here, and I will just copy the download zip, I'll say wget, that zip file, I'll unzip that zip file, it unzips to a folder called bootstrap forms master, we're going to move that just to shorten up the name to forms. Okay, now, if I go to my web browser here, and I refresh this, we'll see that folder forms, and here it is. And if we say get, we're not going to get anything, there's nothing in there, plus we need to make sure we have it all set up properly. So I'm going to cd forms, again, this is a test machine. I'm going to cat out my contact, or sorry, connect.php. And here we have local host, user root, password root, and database test. And then we also have a tables.php, the reason I put that in a separate file is just in case you have more than one table, you're going to be accessing, you can put them all in here for different applications, but test. And that is what we named our database and test, although we'll create another database momentarily to work with that. So the next thing we're going to do is just go ahead and look at our form here. So I'm going to go to tables.html in this case, and here's our nice looking form. And I have name and phone number. Let's go ahead and change that. Let's go vimtable.html. And I will scroll down to here. And instead of phone, this is what it's going to get from the database. We're going to change this to address. Address, we'll change down here to address. Phone is what I should be looking for. And here is our form that we're filling out. So the section in the JavaScript there was getting information from the database. Here is where we fill it in, if I could type today, which apparently I can. We'll rename this address, address. We're going to change this to a text field rather than a number. And really, even for a phone, it should be a phone field, not a number field. That's something I should change. Address, address. And for the placeholder, we'll say, please enter a, please enter address. Okay, we'll refresh that. And we'll probably change this label here. So we'll go down to the header here, date, name. Again, I'm going quick, but this is just to give you an idea of what's going on. We'll refresh this. So we're asking for a name, an address. Enter address. We have date, name, and address. Here we'll click here. We'll say John Smith. And we'll say for an address, 123 Pine Street. And I will submit that. And you can see that we have a time here. Because as soon as you submit, it then refreshes the list. Smith and address is undefined. So let's see what we did wrong there. Let's go here and refresh our database and browse. We have the address in there. So I must be placing something wrong. Let's go back to our script here, up to the code at the top. We'll say address. So here we're getting, oh, see, I put in 1D instead of 2 here. And we'll come back to our form now and refresh that. And you can see we have Pine Street. And if we look at the database here, you can see that we have an ID, which is auto incrementing with the database. Then we have the PID, which is generated in our JavaScript. It actually has a timestamp then followed by some random characters there. And let's just give it a random thing that the browser knows. So the ID is something that's being generated on the server side, the PID is something it's generated on the client side. Just in case you need that unique ID, there are certain cases in my mind that I can think of where I'd want the browser to know the PID. So depending on what you're doing, you may or may not want the client side to know what's going on with something like that. But in this case, I do. Name, address, and then you can see the date stamp we did as a date stamp, which it should. But the JavaScript takes that, converts it into this format. And you can see it says the year, month, day, and time. Oh, and I have it set up to bring up comments, which we didn't put into this, and actually I'm still working on that part of the script. But let's go ahead and enter another one. So we'll say, we'll just say Tom, and we'll say that he lives at 32, 23, 23rd Street. I'll hit enter and it automatically adds that there. Again, we'll come in here and we'll look at, so we'll come in here and we'll look, we'll refresh this. You can see that information has been added. So now let's add in another field. Let's say we want employee number. So I'm gonna go to instructor here and I'm going to say add one after date. And I'm gonna say enum for employee number, which could be an integer. I'm just gonna leave it as text. Just again, as an example here, but really integer would be better than give it a value. But we're gonna go ahead and say save. So now we have another field, which those first two don't have. We can enter something in there. In fact, let's do that. Let's say he's employee number 23 and he's employee number 54. And now we'll come back here. And our form is actually grabbing that information, but we have not set it to put that information anywhere. So let's go back in here and this little update list function that we're looking at is what's grabbing that information. You know, it's getting it from this get PHP. So we're gonna come in here and we're going to say here we will add. So I have comments, comments it out right there. And I'm gonna say enum and from the data, as it loops through each one, we're gonna say enum. Now, where do we want that? We're gonna put that, I guess, it'd probably be good to put that before the name. So we'll just, oops, clone this line and change this to enum. Now, we still need to update our headers, but if I come in here and refresh, we get an error. Let's go ahead and open up our console here. What is wrong with what I typed? It's looping through here. We called it enum, right? Yeah, enum equals data enum. Oh, it says unexpected reserved word, which means enum is a special word that we shouldn't be using. It's basically what it's telling me. So let's go ahead and change that. We shouldn't have to change it in database side. I'll just call it e for enum here. So I think that's okay. And then we should be, oops, be able to do this. Let's go ahead and refresh and see if that fixes it. Yep, there we go. So now we have the enum. We see it's not lined up right because we didn't add a header here. Again, we'll go back down to the HTML here and right here we will copy this and say, we'll just say enumber. There we go. So now we have that information added in. So it's very easy. Now, let's say, obviously we want to be able to type in an enumber maybe. So let's go ahead and add that to our form real quick. So we'll just come down or actually go up to here. And I will just copy a few lines, paste them in. And I'll just put it here. I'll just say enum, enumber, enum. This should be a lowercase sign. I should change that in the template. Not that it really matters. We're not using that as of right now, but just to be consistent, enter enumber. And actually this one should say enum. Okay, so now we have a form for the enumber, which that one we could make a number. So here we would say instead of text we can say number and it will only allow numbers. And on a mobile device it would bring up a number keyboard rather than regular keyboard. Let's go ahead and refresh that. We'll say employee number 44 is Jake Smith, no relationship to John Smith. Address will be 98 Maple Ave North. How about that? Submit. And there we go, we've added that in. So now we're adding enumers. So that is how this little template that I've created works. Oh, so we're actually still, I have to comment out a console log here, but it outputs what we get from our update function. So here we can look here under get and see all everything in the database. So right now it's just dumping everything from the database when you call that from that particular table I should say. And the update function, the reason it's called update rather than like add is that you can use that PID number to update something. So if you want to make modifications, this update PHP, so vim update PHP, it looks for the PID that you're passing it. And if that PID already exists, instead of creating a new entry, it's going to update the existing entry. And this code is smart enough. Again, we didn't have to change this when we were adding stuff to the database. Now it may not be the most efficient way that I'm doing this, because I'm looping through each thing that's passed and adding to the database. So we're making multiple queries, I guess you could say to the database, which could be bad if your site is very busy. But I set it up like this to be very simple that every time I add something to database, I just update that form and pass it to here. I don't have to come in here and update. Oh, we just added E number. Now we added this and that and having to add it in multiple places. So I'm hoping to streamline this a little bit more. For example, if we go back into the tables.html, like here where we, I say, oh, I want each one of these and I want them to add like this. I'm hoping to be able to create a list that does this and this from the list. Also, you'll notice like the date, I have format A and P M and things like generated the PID randomly and the submit function are actually all in another script under libs form.js. And this is just some functions I created. Here's the submit, you know, it's going to generate the PID. So when you click submit, and we call the submit function, we're passing it the URL that we want to submit to, in this case, update.php, which form, you can have more than one form. And do you want to scroll? So if our form, sorry, getting long, we had a long list of stuff after submitting it, scrolls to the bottom. You can choose to do that or not to do that. If you don't pass any of those informations, it actually has some defaults that it does. Here, it's going to generate the PID, which it uses this little function here to do that, uses, creates some random characters, puts them at the end of a timestamp. Then we're going to serialize the form, paste it. Here, we've got some comments stuff that I'm working on that's actually going to do HTML encoding on comments if you had a comment form. And here we go, we're posting if scrolls true, and it's going to scroll to the bottom of the list. Here's the ampm, it just takes the date format, you pass it and makes it ampm. I didn't actually come up with that, you know, I'm sure I got that from a tutorial somewhere. And then the date format right there. If we want a timestamp, that's how we return the timestamp, that's just a super short way of doing that. Here's the encoding of the HTML, or at least some of it for some special characters. And then these auto create form is something that I'm working on. So, this is actually adding, I shouldn't say I'm working on, I'm still working on all of this. But basically, it's creating, when we do the auto create, it's taking, it's going to generate that PID and date and automatically create hidden elements in our form for those so they're submitted. Now, keep in mind, we're passing it the date of submission from the client's side. You may or may not want that. For example, if you're having things submitted to the database and they have to be submitted at a certain time or in a certain order, you don't want people faking that. So, it all depends on your scenario, but you may want to have the date on submission be done on the server side. Anyway, again, this was a real quick overview of all this. I hope you found it useful and check out gitlab.com forward slash metalx1000 bootstrap forms. Have a great day.