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.
Code Walkthrough - Javascript/Profiles
Loading...
来自 University of Michigan 的课程
JavaScript, jQuery, and JSON
140 个评分
从本节课中
Introduction to JavaScript
We take a quick look at the JavaScript language. We assume that you already know PHP - so it is a pretty quick introduction focusing on what is different about JavaScript.
与讲师见面
Charles SeveranceAssociate Professor
School of Information
Hello and welcome to Web Applications for Everybody.
In this walkthrough, we're going to walk through the assignment that's
associated with the basic JavaScript lesson. Here it is.
The assignment is to basically build a profile database.
Now part of the philosophy of this assignment is I assume that you
just finished the auto's CRUD assignment with a auto's table and the users table.
And I want you to sort of build a second CRUD application.
You can really look back at your old one for inspiration.
But this is going to be the basis for the next couple of assignments for this course,
so you ought to get this right.
And if you just barely got it working in the previous assignment,
then you should, sort of,
take this opportunity to really understand what's going on.
So let's play a little bit with it.
It's got some JavaScript in it,
some in browser JavaScript data validation.
So let's take a look at this.
Actually I'm going to show it to you on my local host, okay?
But before I do,
I want to set up my tables.
And I got some tables here in my misc database.
And I'm going to just drop those and show you how I have to start with tables.
Obviously, if I run my code now,
I think, blew up, right?
But I give you some code to set this up.
We've got to create table for users.
Copy that over.
Create table for the users and create table for profile.
You got to create these in the order because there is the foreign key constraint.
So if the user table doesn't exist you won't be able to create the profile table.
Blooey, there that goes.
So that makes that work now.
If I go back to the assignment,
I got to insert these hashed passwords.
So I'm going to insert UMSI and the hashed password.
Explaining all this stuff but then I kind of gave you
the cheese steps that make your life a little easier.
So now, so here we are at the resume.
I'm going to use my local host one here, not the global one.
So you can watch what's happening in the database.
I got a profile,
a data table and a user's table.
So, the first thing is that you're supposed,
this is the JavaScript that you're supposed to do in browser validation.
And so if I do a view source on this page,
you can see what I've got.
And I've got, on the click of the login button,
I've got, I'm going to run do validate, okay?
And it's either going to give me a true,
if it's valid and then actually submit
the form or it's going to give me a false and blow up.
And so you see there's a return true and return false etc, etc, etc.
Now the interesting thing about JavaScript is I can't hide it from you.
I mean the JavaScript runs in the browser.
And so deep in the request response cycle,
this is out here in your browser and no server action is going on at all right now.
And so I can't hide it from you.
So, I even show you all this.
I give you all this code somewhere in here,
right here, JavaScript validation.
So I'm going mine will tell it to you because I'm going to show it to you.
If you're smart enough to do a view source you can figure it out.
So what happens is when I type this stuff,
so I type this with no at sign and hit log in,
JavaScript is going to run.
And now what's going on is this alert,
invalid email address has popped up.
If I blank them all out and I hit it,
the JavaScript will stop and say both fields must be filled out.
Now if I get it right,
so let's just put it in like the wrong stuff,
that's going to be a server side check.
No, that was the client's side check.
Server, now it's a server side check.
That's a server side check with a redirect,
with the flash message.
The whole thing, right?
And so if I take a look at login.php.
You know, this looks a lot like the login.php you've been doing all along.
You know, this is a redirect.
And then here is the do validate.
And then, there's the script code.
So, I put that all together in the login.
That's very similar to the logins you've been working in before.
Okay. So, let's log in successfully.
UMSI, I have to redo the JavaScript here.
PHP one, two, three.
Login. Add a new entry.
There's no JavaScript in these although soon we will.
In the next assignment we'll be going crazy in these add
things so we'll be changing the add and edit more in the next few assignments.
Let's do a valid thing.
There we go.
Yeah, this is just CRUD, right?
We're just going into like the profile table and it got first name,
last name, email summary.
It's a little different than the previous one that you did.
But not that difficult to do.
And so, there's no real JavaScript here.
You just got to make the edit work.
You got to do things like,
you know, be able to put dancing characters in and do validation.
You know, drop, drop, table,
students, right?
So, you've got to be able to put evil characters in
and not have anything go bad, neither.
Of course, SQL and Jackson is not going to happen because we're using PTO.
But also not HTML injection, either.
And of course, we take a look at this.
We just see, oh that's what's in there.
Okay. And then there we go.
And so that's pretty all it.
And then the delete just has a verification.
Done make sure you HTML on all these and on this stuff as well.
And there you go.
And then you log out.
So now, I want to log back in and show you a little bit about how the foreign key works.
So, let me get logged back in.
Log in. Okay. So, let me start by showing you something about log in.
And it's in the assignment.
So basically it says,
when you're logging in,
you're supposed to put, you set up the session.
We've been doing this before,
where you put user ID in to session.
So, if we're in the log in, right?
We have the user ID.
We do a select for user ID.
And what user ID, of course,
is the primary key of the user record.
So, in this case it's one,
for this one that I just inserted, right?
And so the idea is that you're going to take this,
pull that out of the database and then we're going to store into the session.
We're storing the user ID which is the number,
the primary key of the user.
And we're going to use that later, okay?
And then we redirect back index.php.
So now we're logged in and we're at add new entry.
And so this an add new entry, of course,
we're using these pieces of information to tell
whether or not we're allowing the add to happen.
We've been protecting these this way for a while.
And basically, if there is no user ID in a session,
that die with access denied, okay?
So now, let's go ahead and add the entry.
Now, part of what it says is when you add this,
you need to have a foreign key.
So, let's go back to the foreign key.
The foreign key is the pointer in the profile that goes to user ID.
So, this is the profile ID is the primary key in this table.
User ID is the foreign key in this table.
And so you're supposed to when you're adding a record,
there are no records currently in,
you're supposed to set this user ID to the current logged in user.
The current logged in user's primary key is sitting in session
because you put it in session in the login code.
So, and I gave you this,
I gave you most of it in the handout, right?
So, the user ID which is going to be inserted in the user ID with a little place for UID.
And then that's going to pull it out of the session.
So, that is creating a new record in profile that has
a foreign key into the user table that has the user ID, okay?
And so, that's pretty much it,
right? So, here's that code.
Here's this code in here, right?
We're going to do the insert and we're going to pull this number out.
And so I'm logged in as user number one.
And so now, when I run this thing successfully,
I'm going to do an add and it's going to run that insert.
But if I go look in my table right now,
in the profile table,
you see that there's that foreign key.
And because we told my SQL that that's a foreign key,
it actually is a hyperlink then we can jump into
the user table to find the corresponding record in the user table, okay?
And so that you have to do.
And in upcoming assignments,
you're going to have to be creating these foreign key links.
The next assignment is going to be
many-to-one relationship and the last assignment
is going to be a many-to-many relationship.
And so that's an important part of this assignment.
And so I hope that you pretty much,
I think I covered almost everything I wanted to cover.
Good luck in this assignment.
And I just want to emphasize that do this one really well.
Take your time. Understand every line of code.
I know I say that in every assignment.
That's because it's the only way we can build
to increasingly difficult assignments. Okay? Thanks for listening.
