Welcome to web applications for everybody.
In this little video, we're going to talk a little bit
about the code that it takes to build this assignment,
the autograder, with profiles and positions.
The focus of this of course is JQuery.
So, here's the assignment, and it really,
like most assignments, build heavily on the previous assignment.
So, we're keeping where we have that,
hopefully that code works.
If you're just trying to type it in from this lecture,
you're not going to do so well,
so go back and do it one piece at a time,
that's how it's intended to be done.
So, I keep saying that.
So, we're going to need another table.
This one is going to be a position.
Let's just walk through the code first, I'll come back to that.
So, I'm going to walk you through it on my local system.
Actually, to walk through it on my local system,
I'm going to have to make this table because I have
a profile and users table already from the previous.
And I'm going to say go.
Okay. So, now I've got all three of them.
So, I'm going to log in.
And if all goes well, umsi, php123.
That of course is checking in the users table and checking with an SQL query,
hashing the password and checking to see if the hash password matches.
So, log in. And so,
we're going to add a new entry.
So, this is exactly the same,
and the only real difference here is we can add multiple positions.
So, this is going to be a many-to-one relationship.
The positions, there's a user, depending how you did it,
you might end up with a many-to-one profile user,
but right now it's kind of a one-to-one profiles and users.
But then, we're going to allow many positions.
So, what we've done is now we're using JQuery,
you've got this little plus box
and I can put my first position and then I can add another one.
I can say 2,001 and then I can add this whole thing.
So, put some of that in.
And if I take a look you,
will see that I have two positions,
and if you take a look in the database,
what you will see is we have one user,
we have one profile and then we have two positions,
two positions that are foreign key to the same profile.
So, this is the many part to the one part in the profile.
So, there's one profile and then there are many positions to that one profile.
So, continuing along, we got the view code that had to change.
Notice that we keep sending this 'Get parameter along'
because that's how we got to move things back and forth, so we know which one it is.
The edit codes are a little tricky, right?
And you're supposed to be able to make the normal changes.
This is kind of like from the previous assignment.
Let's go ahead and start in this index code.
Here we are.
So, let's see couple of bits of information here.
Just going to make this a little bigger, util.
I've collected some common things that I want to do
over and over into this util and put them in the functions.
We'll go through these as I go through later.
And I just pull it in very beginning icon and pull
my PDO to get my database connection and I just define all these functions.
It's kind of a perfect little thing where it's got no side effects.
There is a less than question mark PHP.
You don't put a question mark like that at the end, in case,
because you don't want to put an extra space after that or it
will trigger the output that says you can't do headers.
So, when you make library code like that, so the first thing I did is,
I don't want to repeat myself,
so this is flash messages that we've been typing this over and over and over again.
Well, for the rest of the semester I am not going to type that any more.
Every time I want to put those flash messages out after this h1,
I'm going to put them all right there and that's basically those eight lines of code.
So, we got logging and logging out and you'll notice
that all this will show the profiles even when you're logged out.
But, if you're not logged in,
so if there is no user ID in the session,
no primary key or the user in the session is going to show
you 'please log in' right here,
or it's going to show you 'please log out.'
So, then let's go ahead into the login.
If we take a look at login.php,
it's kind of similar to what we've been doing all along.
Let's see, setting the session up.
If it was a successful,
we do the lookup and we did that on the last assignment to doValidate, all that.
And that's really just from the same, the previous assignment.
So, there's not much in there that's different.
I do use flashMessages.
Alright, I use flashMessages and login,
so that's about all I need to show you in login.
So, let's go ahead and log in.
It's going to do the same,
I mean it just carries over from the previous account php123.
Log in.
OK. So, now let's look at one more thing here,
just so you know because I've got
all this sort of bootstrap-y stuff going on like we have.
And I got tired of typing that all over and over again,
so I have this require_once head.php and head.php.
It's not really php code,
this is really html code.
This is just html and that's a set of links that
get my bootstrap and bootstrapped
javascript etc and that I sort of grabbed from a website to tell me how to do that.
I'm just going to get out there.
OK. So let's go into the 'add code' because the 'add code' is the interesting stuff.
So, this is again code that's very similar to the code that we did before, right?
I mean, a lot of this is coming across, these lines here,
and bringing util of course, but these lines here,
the exact same thing,
the model part of checking to see.
This is a little bit different and I'll show you that in a second.
There's some more stuff,
I'll get to that and then flash
messages and then we have a form and there's a few little things in here.
But, a lot of this is the same and that's why it's really important that you do
a good job on the previous assignment before you dig into this assignment. OK?
So, let's follow a few things through.
So, I've changed some of this code.
Let's take a look here.
So, this part here is pretty similar,
but this part here is different.
So, this is sort of the model code that's going to execute if there's some post data.
Now, we normally wouldn't validate the data,
but I've moved that into util.php because I have to do it both in the add and the edit.
And so, here we are in the utility code, in util.php.
So, I'm doing the kinds of things that I'm supposed to do.
Remember dollar post is a super global,
so it passes seamlessly between main code and utility code.
So, I'm checking to see if the lengths of the fields just like we always do,
and I return a string.
And if something's wrong with the email,
I return a string, but if everything's fine, I return true.
This notion of returning a string or something else,
I'm changing both the type and the value that I'm returning and then a
language like PHP that handles the sort of mixed typing, we can do that.
And so, if we take a look here in head.php,
I get back a message,
I don't know if that's true or if it's a string.
But, if it is a string, I know that I've got
an error and that the message contains the error.
So, I'm kind of sending two pieces of information back in
one variable using sort of the pattern of mixed.
If something's wrong, I just redirect back to add.php.
And again, by taking the code that would normally be here and moving it to util.php,
I can save myself effort.
Now, here's validating the position.
I'll show you that later.
Here is one new thing,
getting the insert ID because when we're putting in the positions,
we're going to connect them to profiles.
We need to get the key, the primary key,
I've mentioned this before that it will be easy
in PHP because you'll get to see the primary key.
Well, this is the call to say,
"Hey you just did an insert,
tell me what key that you gave to that."
So, that's pretty cool. OK?
This next bit I'll show as we're doing it.
Then walking through the code,
we basically see normal stuff,
flash messages, form, pretty much the same.
And then there is this bit here which is the plus sign.
Right? Here's the plus sign.
It's this plus sign right here that makes it so that you can do the add.
And we're going to do something to that in javascript using JQuery in a second.
I'm going to inspect it.
So it's just sitting there.
At some point and then jQuery is going to attach something to it.
I'll show you that in a second.
And again, like JavaScript,
jQuery have a little div, this little div lives carefully.
Carefully between, this div is empty and it
lives between the plus and the add and the cancel, right?
The plus, and the add, and the cancel.
And then, this is the add and cancel, and then that's the end of the form.
So we're going to have sort of a little code that runs at the beginning,
that's what this is.
And just, I'll print a message.
So $, # sign addPos,
that looks up this.
It says go find the element that has addPos as its ID and.click says,
let's register an event.
Meaning, when we click on the plus,
when we click on the plus click,
I'm not going to do it right now.
Call this code.
It's kind of inception here,
where we're having a thing is called
when jQuery declares that the document is completely loaded.
And then what we're going to do is add an event.
So, this was the code that runs every time I have a plus.
Now, let's take a look at what happens here when I add the plus.
So let's even come down here and look at position fields.
So it's going to happen is this plus is going to
add html to this div and I'll show you how it works.
So now, all of a sudden,
there is actually stuff inside here.
There's stuff in there and it's all the document.
The document has been changed.
That's what's going on here.
So let's see how I changed it.
So this is the code that ran, right?
From here to here is the code that runs when the click happens.
I save and prevent default.
That's kind of like returning false in old style JavaScript.
We're going to have a global variable called count position.
Remember JavaScript is funky in that variables are global unless you tell them otherwise.
Yikes. But that's okay,
I'm going to use that global variable to keep
track of how many times this click has happened.
And what that does is if you hit the plus too many time,
plus plus plus plus plus plus plus plus.
Okay, you can only have nine of these things.
I just made that so let's get out of here and we get back in.
Some hit plus again so I think going to show up.
So then I'm adding one and that basically says I can't keep doing this forever
because you'll see later I depend on this going from one to nine.
So, I'm also showing you a console,
log, view developer console.
I'm adding position 1, see that?
That console came out.
Then what I do is I go grab that div position fields.
That's that empty div and then I'm going to append this bit right here.
So at this point, this is just a big long string concatenation.
And so, I'm going to put a div with an ID and
then string position is probably easier for you to see,
at this point with inspect element what I produced.
This is also to a key to come home.
So I have a div that is generated, right?
I made this up.
And inside there, there's position1.
Now you'll see why I have to do that in a second.
And then I have a paragraph of P tag
and then a year and I have an input type text and then year1.
So, what I'm doing is I'm putting more form fields in.
So this is name year1,
and this is a text area with desc1 right here, countPos.
So I've added`one to countPos here but I just concatenating.
These are just concatenation,
just a big long string concatenation, okay?
Now the only bit right here that is kind of tricky is right there.
Okay? We look at this,
this is again jQuery.
So I'm saying $ go find position1.
Well, that's a div I just made.
Go find it and then remove it,.remove
and then return false and that's so that this doesn't actually submitted.
So what happens is I've got a little unclick event,
and then I say, minus and it's going to just wipe this guy out.
So watch the down change when I hit the minus.
Now it's gone.
See? You can add it and now if I look in position fields, it's back.
It's 2 now because this countPos didn't go back down so I've got position2, description2.
And then I've got this little on click guy that's going to go wipe
out the position2 div so that gets rid of that.
So you see how I'm sort of constructed this form.
I'm really extending the form at this point.
So let me cancel and do another one.
So then let me show you what happens when we submit the form.
Okay? So when we submit the form,