Code Walkthrough: Profiles, Positions and JQuery

Loading...

Del curso dictado por University of Michigan

JavaScript, jQuery, and JSON

111 calificaciones

University of Michigan

JavaScript, jQuery, and JSON

111 calificaciones

Curso 4 de 4 en SpecializationWeb Applications for Everybody

In this course, we'll look at the JavaScript language, and how it supports the Object-Oriented pattern, with a focus on the unique aspect of how JavaScript approaches OO. We'll explore a brief introduction to the jQuery library, which is widely used to do in-browser manipulation of the Document Object Model (DOM) and event handling. You'll also learn more about JavaScript Object Notation (JSON), which is commonly used as a syntax to exchange data between code running on the server (i.e. in PHP) and code running in the browser (JavaScript/jQuery). It is assumed that learners have already taken the Building Web Applications and Building Database Applications in PHP courses in this specialization.

De la lección

Using JQuery

This is a brief introduction to the JQuery library which is widely used to do in-browser manipulation of the Document Object Model(DOM) and event handling.

Code Walkthrough: Profiles, Positions and JQuery25:16

Conoce a los instructores

Charles Severance
Associate Professor
School of Information

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,

and then I would say, one, two, three, blah.

I'm going to add another one,

four, five, six, blah.

So let's inspect the element and take a look at what we got as a result of this.

So I've got two of these things,

two divs, I got a desc1 and I got a year1.

So I have a series of post values.

When I hit add,

when I hit add, boom.

When I hit that add, it's going to send year1,

desc1, whatever I've typed in.

This is going to be the year2 variable.

And this is going to be the year1 variable, desc1, year2, desc2.

And I constructed that by carefully building this little bit of string.

Okay? So then, when I hit that post,

it's going to go and send in

not just the top fields but however many of

these fields and they've been named very carefully.

So I have to validate the profile.

That's the top bit of fields.

But then validate all the positions and that

is code in util.php. So let's take a look at that.

So, validate the positions, so here,

what we're doing is we're going

through because remember there's somewhere between year1 and year9.

That's just a string, right?

That's not an arrays, just a string.

So what I'm doing is I'm checking to see all of the years from one to nine.

If it's not set, I'm going to continue.

And if the description is not there for this particular, I'm going to continue.

And then I'm going to basically say,

I'm going to grab the year out, year1, year2,

year3, year4, whichever one is there.

And then if they're missing,

I'm going to complain about strict required.

And if after the year is not numeric,

I'm going to say it's not numeric Otherwise,

I return true. So they add up php.

This is going to validate all of those entries up from one through nine.

And I get an error message and I go back if there's a mistake.

Let's assume that works,

so it's coming down here.

So now, because I'm down at this point right here,

I know that I've got valid data in year.

There might be no year data.

There might be year one through nine might not exist as one.

But if they do, they're valid. So I'm going to go through and loop through again.

And now what I'm going to do is check to see if there is data.

If there's not, I'm just skipping.

If there is, I'm going to pull it out.

I don't have to validate it here because I pre-validated it before.

And I'm going to insert into the position,

which is the year I got,

the description, and then rank.

I just use rank as a way to put this in order.

So they're ordered by so they're the same order.

So rank is going to be one for this one, two, for that one.

It's just a way to make sure that they show up in order.

You can see this,

the rank has just goes up one,

two, for each of the profile.

But then, what I need to do is I need to set the foreign key, right?

I need to set the foreign key to the profile that this position is.

So I mean, starting in position,

it's going to be associated with a profile and I just got

done inserting the profile, the profile ID.

So that is the foreign key for the new position row pointing back to the profile.

So let me go ahead.

And after all that buzz,

press the add button, hopefully,

I don't have any errors.

So there we go.

And it has two of these guys.

So let's take a look at the edit code and just got done talking about add.

Let's take a look edit code.

Most of this is pretty cool.

Now, recall that when we're in the middle of an edit,

you have to have a get parameter.

So let's go through the first thing.

We'll talk a little bit about this.

But first, I'm going to just make a mistake. And I'm going to post it.

So this is going to be posted.

And so when I hit the post button,

I hit save, it says all fields are required.

But the biggest mistake that you're going to

find is that you need to add this on the redirect.

Right? So this edit.hp because there was

a post and then there was a redirect because of the header.

So let's take a look at the validate profile.

And so you'll see that what I'm doing is in add,

I didn't have to do this because add,

you're not really- we just redirected back to add.php, right?

In edit, we have to redirect but we're still editing the profile.

So we need that as a get parameter because we're going to

use that later down here in the,

we're going to use this to load up the positions and appear that stuff is in util.

Load pause, loads an array of

positions from a particular database connection for a particular profile ID.

And so, that's going to do that and then we're going to

loop through those things in our edit,

and we did that to create these things.

We had to loop through and reconstruct all of the html for these things.

Position, submit, and pose position fields.

These things are all here now.

I had to reconstruct these.

But in this case, they're not coming from JavaScript,

they're coming from the database.

Okay? So it's all down here.

But it just know that you've got to,

when you're redirecting with a get parameter,

you want to make sure you put the get parameter on there.

So the get parameter,

you're redirecting to it.

So you don't lose track of which profile you're editing.

Here's a tricky thing. So validate positions.

It's nice that that's sitting in util. Thank Heaven.

I Wrote that one so I use it in the add and

I use both these things and both the add and the edit,

saves me a little bit of coding over and over.

But here's the trick.

So, let me show you what I need to be able to do, right?

It's one thing if I'm going to make change, one, two.

I'll just make this point 99999.

Hello.

Just edit stuff.

Okay, so what will happen is what I'm going to do is,

as a simplifying thing,

I am actually going to wipe out all of these rows every

time I edit because all the data that I'm submitting,

of all the positions,

it's kind of like a new add.

And so what I'm going to actually do,

I could write much more complex code.

But what I'm really doing is I'm just going to wipe out the old positions,

not the old profile,

with a single delete and then I'm going to reinsert them.

And so this is pretty much the code straight how to add.

So it's re-added.

So the net effect of this that's just a way to make your life simple, okay?

The net effect of this when I hit this save,

is you will see that these will be updated but then,

the position IDs, I'm going to kind of be wasting primary keys.

There are trickier ways to do this.

But for now, let's not worry too much about the trickier ways to do it.

So if I go back here,

you'll see that these are three and four and I will browse again.

Was that because I added a new one?

There's two of them.

Right, there's two of them because I added them.

Let's change them again.

5555, 88888 save it again.

So you saw 7 and 8 went away and 9 and 10 replaced them.

So I actually got more than one profile going on here.

You should be able see that if I just get out.

I got to work in one profile.

Let's go here with that guy.

So now, I'll make more sense. Yes, 9 and 10.

Let's update it again.

So you see that this is 9 and 10 become 11 and 12.

Now the interesting thing is this also allows

me to easily add a situation where I can get

rid of one of these things and then add another one.

And so if you look at this one,

this is going to be number two because I deleted the first one so your two is there.

So there's no year one, right?

There's a position two and a position three.

This position two, this one here came from the database.

This one here came from the database.

This one here is new and that's position three.

So in a sense, I've still got this code down here at the bottom to add more stuff, right?

That code is still there.

And so I'm on the edit page,

I can edit existing ones or I can add new ones.

And so in this case, I'm going to sort of get rid of 11 and 12.

So every time I wipe out all of them,

and then I re-add them all.

So now, it should be a one 11 because I deleted one.

I hit the minus up there and go back and scroll back and then I'm going to save it.

And now because it's effectively,

I do a delete and re-add.

It makes my life really,

really simple and I can reuse code from delete and add,

so there they are, 13 and 14.

I mean I could probably put some of this in util.

I could have this code right here.

I could've put this in util because that is exactly copied literally from add.

So doing all the inserts,

got to move that into util if I wanted to.

So there you go,

talking about about raising walk through of the profiles, positions and jQuery.

We have a basically a many to one relationship where you can have

many positions mapping to one profile. Cheers.

Explora nuestro catálogo

Inscríbete de manera gratuita y obtén recomendaciones personalizadas, actualizaciones y ofertas.

Coursera brinda acceso universal a la mejor educación del mundo, al asociarse con las mejores universidades y organizaciones, para ofrecer cursos en línea.

© 2018 Coursera Inc. Todos los derechos reservados.

Descargar en la App Store

Consíguelo en Google Play