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 - JSON CRUD
Loading...
From the course by University of Michigan
JavaScript, jQuery, and JSON
91 оценки
From the lesson
JSON - JavaScript Object Notation
In this section we look at JavaScript Object Notation (JSON). JSON 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).
Meet the Instructors
Charles SeveranceAssociate Professor
School of Information
So I want to continue our discussion of jQuery and JSON.
And just do a small modification to our CRUD application,
our create, read, update, and delete application, and
you can grab the code from PHP intl/code/json 03, ocrud.zip.
And this one needs a little database connection in there.
Some instructions that get your database set up.
So what this is, is this is our standard CRUD application.
So here's our CRUD application, if you recall,
you can add something, I don't know.
Grease, 10,
10 and so we can delete things.
Remember all these?
It's our CRUD application, but
I've done something different in this CRUD application.
I've actually used JSON to give us the list of in this add.
And so it's sort of like a hybrid thing.
So we have JSON that we can look at.
And so there's this, what I've done is,
let me take a quick look at the code the way it used to work.
So, let me edit the way it worked before, just to sort of review how it works.
So we've got our code here, we got our little flash messages, we create a table,
we start a table body, we do a query, then we write a loop that goes
through all the rows, and then we print all the stuff out, right?
The rating, the plays, all those things.
We make up a little edit.php for
the edit button in each of the rows, and away we go.
That's how we did it the first time.
We're going to do this a little bit differently.
We are going to, in this one, we're going to do it in two steps.
So, We
are going to do this in JavaScript with jQuery and
pull the list of the tracks using JSON.
So I need to have an HTML entities inside of JavaScript,
because I don't want to have HTML injection.
And so I make a function that does that.
I have standard, these are just flash messages, so
I can see if that worked or not.
And then I do this interesting thing where I make a table, right?
I have a table with a border of 1, I have a table body, and I give it an id, okay.
So I've got a table body, where that's nothing, it's totally empty.
And then after that, I lapse into JavaScript.
Okay, and then what I do, is I call $ getJSON, just like I did in the chatlist.
And I called getjson.php and I have a function that is called,
when that JSON is successful and parsed, okay.
So getjson.php, and
I set a variable found, now data itself is going to be a list and that because,
That's what it does, it makes an array of the rows, and
then it JSON and codes the exact rows and then gives them to me in JSON.
So it is a list, it has a length,
it's a full fledged JavaScript object at this moment.
So I loop through, and I pull out the row, and the row has key-value pairs.
So let's take a look at what the row looks like.
If I, Go here and I say, getjson.php.
So this is what the JSON is going to look like, this is JSON, it's a list, and
title, plays, rating, id, that is the data coming straight from my database.
And if I take a look at the code, all I did was, did a fetch, and
I create an array of rows.
Now each row is an array, so this is like an array of arrays, and
that's why it looks like this.
Actually, it's an array of objects, because they're key-value pairs, sorry.
So row is an associative array, rows is a linear array.
Row is an associative array, so this is a linear array of associative arrays,
which in JavaScript becomes a linear list of JavaScript objects.
And key, that's the column from the table, column from the table,
key-value pair, key-value pair, key-value pair.
So getJSON, again, just reads all these things.
Select title, place, rating and id from tracks, and then loops through that,
results set, and then encodes it at the very, very end.
I probably should put a header here to indicate that it's
a application JSON to be cleaner, but we get away with it.
And so, I have each of these items, in this case,
there's going to be two of them, right, two of those items.
Each of these items, I'm going to log it, and
then what I do is, I go with jQuery and I grab mytab.
Now mytab is this table body and
I'm going to append some HTML to the end of it.
And it's this big, long string.
It's a table row, table identity, htmlentities, the entity title.
This looks a lot like the old PHP that I had, except now I'm doing this, so
let's take a look at the index.old.
Right, so I was doing all these echoes of the data.
This was doing it all in PHP, but now that PHP has sent JSON
to the JavaScript, and now I'm doing the exact same thing in JavaScript.
And so I end the table and start td, and I put out the place and
the rating, and then I create the href for the edit tag and I take the id.
All right, the ids, this guy right here it's 1, right?
It gives me that number and I can put that in, and I create a delete.
And so this basically creates the table rows, right?
So if I hit index.php, if I do a view source here,
If I do a view source, you will notice the table doesn't have anything in it.
And that's because the JavaScript is actually what put that code in,
I'll put those table, these things came from JavaScript,
these lines in the table came from JavaScript.
Okay, and so this is, I mean, it's not that super amazing if it goes through
this loop and it doesn't find any data, then it just says, no entries are found.
But basically, this is a simple example of how you take a database query,
and you take the result of that database query, and
then you just send it back as a bunch of JSON.
And then you parse the results.
Now you could debate what's the best way to do it.
Is this the better way to do it?
It's a little more complex than this way,
but these kinds of techniques allow you to dynamically update.
So for example, you might have a table, and then you might have it so
that new entries just are added at the bottom automatically,
which is kind of more like our chat application.
And so it's really up to you to decide, what combination of sort
of server side rendering, like this, this is server side rendering?
because it just comes back with a table fully formed in the request
response cycle.
If I change this to, index-old.php.
If I go to index-old.php,
all the rendering is going to be done on the server side, and
if I do a View Source of that, You will see that my table is fully formed, right.
That was all rendered inside PHP,
as it came back in response to the HTTP response.
Whereas in this one, and look at the view source, my table appears to be empty,
but then this JavaScript code filled it up.
And so, I'm not trying to tell you that one of these techniques is better
than the other.
I'm just sort of showing you that, this is a technique that is used on some websites
where they would prepare to in a sense give you a relatively empty webpage, and
in the background, fill it in piece by piece.
And that's why you see a lot of spinning things and things go pop, pop, pop, pop,
pop, pop, pop, because they're using this technique to sort of do all the rendering
in the browser, pulling data through JSON, for the various pieces of the screen.
And it's sort of a six and one half, a dozen in the other, and
different designs will prefer different approaches, okay?
So that's sort of our exploration
of doing a CRUD-like application but
adding some JSON capabilities to it.
[MUSIC]
Ознакомьтесь с нашим каталогом
Присоединяйтесь бесплатно и получайте персонализированные рекомендации, обновления и предложения.
Coursera делает лучшее в мире образование доступным каждому, предлагая онлайн-курсы от ведущих университетов и организаций.
© Coursera Inc., 2018 Все права защищены.
