[ Silence ]
>> All right.
Good evening everyone.
My name Alain Ibrahim
and tonight I am presenting a section on AJAX
and walkthrough for project 2.
The first thing I would like to ask you is what is AJAX?
After David's lecture, can anyone define what AJAX is
or tell me succinctly what it would mean when we say AJAX?
OK. AJAX, I will tell you what AJAX stands for.
AJAX stands for Asynchronous JavaScript and XML.
I'm not going to go into the why it mentions XML now,
but at the time of inception, XML was mostly popular
as opposed to JSON as a format
of data interchange and so forth.
The main-- the crux of AJAX is actually JavaScript.
Let me move on to the next slide.
So, here we go.
All right.
So, AJAX is really a combination of existing technologies.
One being HTML, although HTML is not the functional component
of AJAX, it is the representation layer.
So essentially, if you have your JavaScript, XML or JSON
and so forth and you are making a call of some sort,
it's kind of maybe useless if you're not going to present it
in some visual fashion, hence, the need for--
hence the presence of HTML, in my definition of AJAX.
You do need JavaScript because AJAX relies on an object,
a JavaScript, say, a class called XMLHttpRequest.
And this object acts as a liaison between the client side
and the server side passing data back
and forth in the background.
Before AJAX, we used to have pages like client browsers,
make requests to the server side,
and what would essentially happen is the server would
output some text or some HTML and the entire page
on the client side would be reloaded with the--
with AJAX, with the inception of AJAX.
What happens now is the requests are sent in the background
and they are responded also
in the background while the remainder
of the client side script is still working.
And once the client side script receives the response
from the server, it can then interpret it
and apply it accordingly to the document, object model,
or it can do something else with it for example.
In the acronym of AJAX, there is the asynchronous word
and I will stress a little more on that, what it means.
AJAX is asynchronous in the fact that when a request is sent
to the server, the remainder your client side quote,
your JavaScript quote can be executed and/or--
and that's stopped before the server has responded back
to you.
So when-- let's suppose you have a function that calls, asks for,
like in David's example, asks for a quote
and your webpage does other things other
than show you the quote,
your client side page will do the other things
and the servers-- meanwhile the servers working
on the background over the internet,
and once it has responded, your page can then take
that response, interpret it.
Now, AJAX is not always asynchronous,
AJAX can also be synchronous.
There's a little setting you can toggle in your function,
and that's you can make AJAX synchronous
such that it will not continue executing the rest
of your JavaScript quote
until it has received a response back from the server.
And I will show you this briefly.
OK. I'm not going there yet.
So now, I will demonstrate an example, some source codes
where I dive a little deeper into the inner workings of AJAX.
OK. So what I have done here
on this side is I created two files, just two files,
I do understand that David shows you different iterations
of the examples, and so forth as they build up, but I'm going
to simplify it and the actual different features are all
embedded in both of these files.
So there's a-- I have an ajax.html page
and an ajax.php page.
The ajax.html page corresponds to the client sides of AJAX,
and the ajax.php page is the actual server side script
that the-- that is being called from the client side.
OK. I will first open up ajax.html.
It is a typical HTML document,
HTML file document as specified here.
And the head tag I make a call
to receive the jQuery library from Google.
So this first script tag references the jQuery library
from Google, this has nothing to do with AJAX right now,
but I will be using it later to apply the methods
like that section as dot AJAX
that David had mentioned in class.
And let's see what else.
The next set of script tag is will define what I created
for this example.
OK. So for a complete AJAX turnaround,
what do we really need to do?
There are, in my opinion,
there are three main things that need to be done.
Underneath the hood, you need
to first create an XMLHttpRequest object.
That is the first step.
The second step is to utilize this XMLHttpRequest object
to send data to the server and receive data back
from the server which takes us to step number three,
which is the response function.
There will be a callback function that takes the data
that is being sent by the server back to the client and handles--
and that handles the data accordingly,
according to your code or you design decisions.
Now moving to the code, I-- the first step here for me,
first step that I have done is I have created a variable called
xhr, which will host or which will be the placeholder
for the XMLHttpRequest object.
I have set it to null and I have defined this specifically
outside of the functions so that all the functions can have
access to it once we have created the new
XMLHttpRequest object.
And the second step is
that I created a function called createHttpRequest
that would return an actual XMLHttpRequest object.
David had mentioned this in class so I will not repeat--
or I will not dive into this again.
But basically, the basic idea here is
that you are creating an XMLHttpRequest object
through this function, and that's what--
that is what this function is returning.
And now I will-- I created my own function called getText
which will just basically get text from the server side,
which it-- or in this case, ajax.php.
So in this function, I defined a few things.
First thing I will define is a variable called params,
where I insert-- where I defined what parameters I will send
to the server along with their values.
In this case, I-- I'm defining a variable called i_want_text
and I have set the value of this to yes.
This is really nothing meaningful,
but it's just an example.
This works also in the same way that you would normally do
in a-- when you send request via URL
and you put the ampersand sign.
So if I want to send more than one variable here,
I would put ampersand and say variable 2 equals to 5
for example, and when send this--
and this will allow me to send the variables
over to the server, I mean not this alone,
but this is the structure of how they are laid out.
Next is I'll define a variable called url which points
to the server side script, in this case,
it is called ajax.php.
It could have been something like http:// some--
it could have been script over the network
over the internet somewhere, but in this case,
for simplicity sake, I have use--
it's in the same folder structure
and it's called ajax.php.
The next remaining few lines pertained
to the actual xhr object
which in this case is the XMLHttpRequest object.
So the remainder of this lines
and this function are all AJAX or in how AJAX works.
All right.
So first thing I do here is I give the value of xhr,
I create an HTTP request object
which returns an XMLHttpRequest object and I will give
that value to the variable xhr.
The next thing which is what David mentioned
in class is I would create a connection
to the server side script by calling the open method.
So I'll do xhr.open, but in my case, I will be using POST
as opposed to GET which was mentioned in class.
That's-- This is the first parameter
with method I could use POST, I could use GET, I can use PUT.
But for this class, we'll be using mainly POST and GET.
The second parameter is the url.
Lastly, this third parameter that is set
to true is what makes AJAX asynchronous.
If I set this false, AJAX will become synchronous,
and I will go over this later.
The next line over specifies what kind-- what type of--
what the content type is that will be sent over.
For regular text and for just plain text,
you will be using most-- for the most part,
application/ x-www-form-urlencoded.
But for things like files, you would want to use something
like multipart/form-data.
Now for the POST request,
you need to specify how long the length
of the actual parameters to the server.
And in this case, I will specify this
by setting the request header with this
and as a second parameter putting params.length.
The next line implies that once the server,
once the server has responded, close the connection
with the x inside the XMLHttpRequest object.
And over to the next line, onreadystatechange,
I know we mentioned this in class.
What happens here is that each time,
each time the server does something in terms
of states it goes through four different states.
Each time it does something, it will--
onreadystatechange will have a--
it will, OK, it will send a notification
to the XMLHttpRequest object with a value.
So when it's first being initialize so forth,
it will go through four different states,
one, two, three and four.
And what I'm specifying here is
that each time the server is shifting from one state
to another, go ahead and call the method,
this method called getTextHandler
which I define below.
I could have put an anonymous function here,
like as in function and so forth, but I choose
to do it this way because if I wanted to enter a lot of code
in this function, it would not look so visually
and so aesthetically pleasing for it to do so,
and hence why I put it down here.
Now mind you, I cannot pass parameters here
by opening parenthesis and entering something
like a variable1 and so forth.
This will not work.
Instead if you want to-- if you choose to send something to--
send parameters to this function, what you will need
to do is call an anonymous function,
and then call getTextHandler inside this,
and here's were you'll past the parameter like variable.
This is the right way to do this.
[ Pause ]
Lastly, the last line here is the part
which sends the parameters or sends the information
over to the server and it looks like this, xhr.send
and inside is where you specify your parameters
to be sent to the server side.
Now, I could have alternately put nothing in here or null,
I could have done this or null which means
that I'm not really sending anything to the server.
But in this case, I am sending a variable called--
where is it, i_want_text.
OK. On to the callback function
which is called onreadystatechange.
Does anyone have any questions so far, on this?
No? OK. So this is the handler function
that will be called four times by the XMLHttpRequest object.
Well, four times assuming that the server made it that far.
And I can-- maybe I can demonstrate this a little later
but for this example,
I will first just make a simple AJAX call to the server.
Let me show you what ajax.php looks like.
It is a very small file and I made it as such for simplicity
and it either accepts-- well, I've commented code out,
either accepts a POST variable called i_want_xml
or i_want_text.
So what I'm saying here essentially is that I'm looking
for a POST variable called i_want_text.
If it is available regardless of its value, I want the server
to print out text received with value
of whatever the value of that variable is.
Back to ajax.html.
OK. So how do I call this function?
How do I make this happen?
How can I call getText when the page loads?
Can anyone tell me?
OK. So when the page loads, there are two message, mainly.
Well, they all point to basically the same thing.
But when the actual page loads,
I can use the onload event in the body.
I can call it here.
I can say getText.
Or I can use AJAX's-- I mean,
jQuery's document .ready function,
and I can put getText here.
And I'm able to use jQuery here because I,
if you recall earlier, I specified that I called
for the script to come from Google
so I have the entire jQuery library at this-- I will have--
once this document loads,
I will have at this point the entire jQuery library loaded
in my DOM.
[ Pause ]
Let's go back to getText.
[ Pause ]
OK. So it calls for a getTextHandler.
Once the page loads, the body will call getText
and then it will send the information over to ajax.php.
And when ajax.php starts changing states,
it will call XMLHttpRequest here,
it will call the getTextHandler method, which is this method.
And if all is good, if readyState is equal to 4,
which is the last state that the server is in,
and if the status code is 200, which means everything is OK,
the page was found and it's delivering the data,
then I can go ahead and alert the text
that was submitted back to the browser.
So if I go here, if I come here to localhost/section_ajax.html
and I go ahead and refresh the page,
what should I see based on these codes?
[ Pause ]
Let me go back a little bit.
So I am sending i_want_text equals to yes to the server.
The server is as a POST variable.
The server is taking this and is printing this value out.
And then, the handler, which is down here, is going to alert
in a text box the response text, so what should I see?
What should happen when I load the page?
I'm sorry?
>> Alert?
>> An alert?
An alert, oh, yes, an alert, but what is inside this alert box?
>> Yes.
>> Text received with value of.
>> Text received with value, yes.
Let's see.
OK. Nothing happened.
Oh, there you go.
It took a long time, considering it's on the same folder.
But this is what-- this is the text
that is being responded back from the server code.
OK. Is everyone clear on this part of the code?
This part?
OK, good. Now we're going to move over to another example.
I call this one getXMLObject because-- and this time around,
everything is pretty much the same except
that the parameters-- the parameter name is i_want_xml
and I will uncomment that part
in the corresponding server side.
And the response type is actual response as of XML.
So, the difference here is
that I will be receiving an XML structure.
Let me go back to ajax.php and I will comment this out
and I'll tell you why I'm commenting this out shortly.
And I will comment this in.
So if POST-- if it says, I want--
if the variable is called i_want_xml, if that's being sent
over to me as a server script,
I want to send out an XML structure.
OK. Where are you?
OK. So here, this should alert the response that XML coming
from the server, I mean the .responseXML coming
from the server.
What should we-- now, oh,
I need to call the function first, so getXMLObject.
I apologize for scrolling down so much.
getXMLObject, let me remove this one.
OK. What do you expect to happen now when I load the page
and I'll go back up and-- we'll go back up here, right.
What do you expect to see happen when I alert xhr.responseXML?
And this is the actual response coming from the server.
[ Pause ]
[ Inaudible Remark ]
Sorry, what was that?
[ Inaudible Remark ]
It will alert the XML in the text box.
That's pretty close, but in fact, it will not.
And what it will alert-- this might get, take some time.
It will actually alert that it's an object--
it's an XML document object
because it is enveloped in an actual object.
It is not raw text.
It's not plain text.
So, which takes us to the next-- to our next function called--
on this client side, of course-- and that is called getXMLText.
Now with this iteration, what is essentially happening is
that in the response-- on the response end,
I am taking the response, the XML structure,
and I am getting all the tags called text
because I've specified-- under the root note,
I've specified a bunch of values enclosed
within text and labeled tags.
So here, I'm getting all the tags called text
and inserting them into this variable
and this variable becomes an array holding all these values.
So let's suppose now I alert--
I'm going to alert the text_tag_values.length.
I will first need to change this to getXMLText.
OK. What do you expect to see happen now when I call this
and I know you're not looking at the PHP side,
but now that you look-- you can see here,
I have two text elements and I am calling for GET
to get all the text that are named text and inserting them
into the variable, into this variable, text_tag_values.
What should I see when I call for the length of this array,
how many values or if any?
>> Two?
>> Two? Two is the correct answer.
There it is.
That's two elements.
Now, how do I print them out?
Let's go ahead and iterate through this XML
and through this array.
Or let's say, i=0;i<text_tag_values.length;
i++ and alert text_tag_values[i], close.
All right.
So what should I see now?
[ Pause ]
I should actually see the values, well-- I'm seeing again,
I'm seeing an element object.
Since these are actual object still stored within the array,
the only way to access the text in them is
to call the DOM operator and then firstChild.nodeValue.
And this should print out.
There we go.
Text received with value of and the output will be in XML.
Another text node.
It should have print, OK, POST XML.
[ Pause ]
OK. Before I move on to the next example which is jQuery,
I would like to run through a small example with the Java--
the AJAX being synchronous.
I'll also go back to the getText method.
I'll show you how AJAX can be synchronous.
So, this is get-- oh no, this is not it.
This is getText.
And instead of leaving this part set to true,
I will set it to false.
And at the end of this function,
I will call alert Finished getText.
[ Pause ]
So let's see what happens when I-- or from the PHP end.
OK. Before I comment this out,
I would like to let you know why I commented out this part
when I was outputting XML to the client side.
The reason is if I did leave this, it would actually be used
and not interpreted by the client side as XML.
So whenever you send out XML, the only thing it can be
in this document is an output of XML.
Let me go ahead and comment this out.
Comment this back in.
[ Pause ]
OK. Now, that I've made this synchronous,
what do you expect to happen here?
So, I've changed this from true to false and I entered--
I inserted an alert box at the very end of the statement.
You know what?
The first thing I wanted to do is I'm going to leave this
as true representing the original example.
So, if I'm going to refresh now, here's what's going to happen.
Text value with-- Text received with value of yes,
it's coming from the server.
Let me refresh this again.
Notice what happens.
It calls Finish getText-- finishing getText first.
So, it calls this method first and then, it gets-- it call--
and then, it calls the other one which is specified
in the callback function.
Let me do this one more time.
So, F5, I don't know if you saw this.
The only reason why-- It hasn't really closed.
It's still the background.
So when I close, it's still there.
OK. What do you expect to happen when I change this to false?
>> The order will switch.
Yes, the order will switch.
What will happen here is the client side JavaScript will wait
until the server has completed its-- whatever it's processing.
And then once it sends the information back
and everything is OK, then the JavaScript will complete the
remainder of the code.
So, let me do it, F5 here again and here's what happens.
I get a text received with value of yes and if I press OK,
then I will get finished getting text.
And this is an important, I mean, this is--
you might want to use this and place this where you rely--
you're relying on certain information from the server
and you can not go forward without that information.
But like in the instance of, let's say, Facebook has a space
in your page that has a bunch of ads
and those ads are being retrieved through AJAX.
Now, it would not make sense
to make the AJAX calls AJAX to be false.
It would not make sense to make it synchronous because then,
you'll not be able to see your friends,
the feeds in your Facebook page until the ads have loaded.
So, in this case, you would want to set-- keep it as true.
But in other cases where you're reliant,
where your client side code is reliant on pieces
of information, then you will probably want to use this.
In general, it's not used that much, I mean, in practice.
OK. Lastly, this is something--
I'm going to go over something David touched on class
at the very-- near the very end which is the usage of jQuery.
Now, jQuery has conveniently created shorthand methods
for AJAX calls.
One-- Popular one being .ajax, there are other methods too.
There is one called .post which pertains to POST,
sending POST requests to servers.
And there's also a third one called the JSON
which is tailored to deal with JSON requests.
And in this case, I will mimic what I did basically
in this example.
I'm mimicking what I did with getText except
that everything here is much shorter.
So, again, the AJAX function takes in a JSON object
as its parameter which is this.
And inside that object is an instruction set.
I would attribute a set of attributes with their values.
This is going to be a POST operation
and this is the specified URL.
The data is the data that will be sent
to the server using this function.
Now, if I wanted to put more than one variable,
here is what I would do.
I would say, let's say, i_want_text yes and the next,
I can put a comma and say variable,
let's say variable_2 equals to--
or variable_2: 6 which would then--
this is tantamount to i_want_text equals to yes,
ampersand sign variable_2 equals to 6.
Lastly, in this structure,
the attribute success will specify what function
to be called in the event of a success operation,
successful server operation.
In this case, it's an anonymous function
and the actual word response here will be replaced
by whatever the server outputs back to us.
And here, I am alerting-- In the body of this anonymous function,
I'm alerting the response.
So let's go here and put-- what's the name of the function,
it is called useJQuery.
So I'll just call useJQuery here.
[ Pause ]
I want to go ahead and refresh the page.
And surely enough, it did the exact same thing as getText.
So, anyone have any questions on this?
[ Pause ]
No? OK. I will move forward now to project 2's walkthrough.
Here we go.
OK, back to the Prezi.
OK. Project 2, the specification came out today
and what is project 2, what does it entail?
So what are we trying to accomplish here?
We're trying to build a mashup.
We're calling a mashup because we're kind of embedding a map
from Google's inside a div.
So, it's not really our code that we're using here.
It's Google's code that is being displayed
or their markup is being displayed on our page.
And then-- But then again, we have to put
in our own code inside that page to manipulate this map
that we're going to be embedding.
So, we're building a mashup to hook a Google map
into San Francisco's BART, Bay Area Rapid Transit.
And the technologies needed here are MySQL
or another caching technology.
It could be a CSV file.
It could be a set of XML files.
So you can store in a text file through using JSON for example.
I personally prefer MySQL for this just
because BART's API is already designed
in the relational fashion.
And I like to mimic this or mirror this on my end
when I cache it so that I can later use this in a--
if I wanted to extend, for example,
my program to do more sophisticated functions
where there-- where joins are involved and so forth.
It would be much easier than to say use an XML file
or a CSV file.
The next technology that's needed is HTML, obviously,
to embed the Google map inside this.
JavaScript will be needed for--
to communicate with this Google map, you will need JavaScript.
You will download-- Once you include the JavaScript--
Google Maps API JavaScript code in your script tags,
it will download all of that code to your page, to your DOM
and will make the functions available for you to use.
And you'll also need JavaScript to utilize AJAX, naturally.
Lastly, you will probably need to use PHP
to avoid the same origin policy.
And to store the cache content to your server
and to also load the cache content from your server.
OK. So, what is the end product?
What are we looking for here?
The end product for this project is one HTML page
that embeds a Google map.
So, you'll see a big page with a map inside it.
And under that map or somewhere around that map, there are--
will be HTML controls such as a dropdown menu,
option boxes, et cetera.
And these controls will be used to switch route views.
So each time you select a different route,
we should be able to see a new route laid
out on the map, but one at a time.
So we cannot-- we should not be able to see more
than one route at a time.
And each route will appear as a polyline which is a set
of connected lines, so it will be like, it would be going
in different directions at points.
Each station that is represented on this line, on this polyline,
so a route will naturally can be composed of stations
and each station should appear as a marker
on the map, a Google Maps marker.
Upon clicking on the marker,
the user will see real time arrival/departure information
for the station that had-- in an info window.
Now all these terms may not be familiar to you right now
but when you go in and do a little bit of research
in the Google Maps, JavaScript API v3,
you will see what this all means.
OK. The sequence in building this, how do we build this?
What are the steps?
The first step is for you to embed a centered Google map
in an HTML page and make it centered to San Francisco.
The second step which is not really a technical step is
to confirm that you understand and are able to use markers,
info windows, and polylines from the Google Maps API v3.
Once you feel comfortable with these concepts and how
to use them in a Google Maps,
then you can move forward to the next step.
The next step is also a conceptual one.
You will need to identify what data you will need
from BART's Real API.
So what data will you need to get locally in order
to accomplish a polyline and with a bunch of markers,
what data would you need?
Would you need the address, would you need the latitude,
longitude coordinates?
This will be determined
by the actual objects you will be using in Google Maps.
So by looking at what inputs the polylines would need
and the markers, you will be able
to determine what information you will need to get from BART.
The third step is after you've identified what data you need,
you actually to get the data.
Now there are several ways of doing this.
You can actually go in and copy the data locally in a CSV file
or in MySQL database or you can create your own script,
your own PHP script that will do this automatically for you.
And the next step would be to build the HTML controls outside
of the Google map inside that HTML page that you will develop.
And each time those-- You will play around with those controls
and each time those controls change they should trigger some
sort of call to this server side
and have the server output back the necessary information
to accomplish polyline along with markers.
Lastly, after the-- after you were able to get this far
and you have a polyline out with the markers laid out,
what you need to do next is have the markers become interactive.
So that once you click on the marker
for each station an info window will pop up,
an info window looks like a little balloon.
With the-- So it should pop up with information coming
in real time from BART's Real API over the internet.
So this is not-- The information that is coming
through into the info window is real time information as opposed
to the cache information that is coming
into the polylines and the markers.
So once you click on a certain marker, it should somehow send
to the BART's Real API what station it needs
information from.
And then, the BART's API will send back that information,
you will take that information using AJAX
and output it inside the info window.
Now the nice thing about info window is
that they can support HTML.
So you can make it look nice.
OK, sample time.
Now I will go ahead and touch
on the different technologies needed to accomplish this.
The rest will be up to you.
I have created a very simple page called index.html.
And-- So it starts off as an HTML5 document.
It is not scalable.
We are making it stay the same regardless
of how we resize the window.
And I would apply these style rules as I got them
from the example set in Google Maps JavaScript API v3.
And down here is my own rule for a div
which will pertain to a select box.
OK. So if you go to Google Maps API, it's a very comprehensive--
has a lot-- it has comprehensive documentation
on pretty much everything that it supports.
And Getting Started, clicking on, if you go into--
navigating
to developers.google.com/ maps/documentation is a very
good step for you to take.
First thing you want to do is click on Getting Started
and experiment on that a little bit with the main features.
I don't think you will need an API Key for this.
And on the left side here, you can see that you can click
on the different aspects of this API.
Over this will include markers, polylines and info windows
which are three things that you will need
to be using in this project.
I don't you'll need to touch on the other things on this.
All right.
So let's go ahead and do something.
Again, I borrowed this code from their API, from their example,
so it should be hopefully as easy for you to do as well.
First, I'm going to define a variable called map
in which I will store the Google map object.
And I will come back to the marker later.
And I will create a function called initialize
which just sets a map centered
around San Francisco in my HTML page.
Let me go through this function real quick.
I first define the mapOptions in a JSON format, JSONObject.
And this specifies-- this sort of acts like a constructor
for the map object from Google.
Here, what I'm specifying is that the map be centered
to the following latitude, longitude coordinates.
And this is done through by calling a new google.maps.LatLng
object with these variables.
So essentially this is-- the center here,
this whole thing is looking for an object of LatLng
and not just an actual set of numbers.
Zoom will pertain to the level of zoom that we're going
to be zooming into the map when we first load it.
The mapType specifies what type of map we are going to see.
Right now we are going to see a graphical map as opposed
to a real aerial view.
But you can change this here.
So now that I have my options ready to go,
I can create a new map.
So I will set this map variable
to contain a new google.maps.Map object and I will want this map
to go into a div inside my page.
The convention is to use a name like map_canvas.
You can use any name you like.
What this essentially does is it inserts the Google map inside
this div element and comma and it will apply the--
the second parameter here is
that we are applying the mapOptions
to this newly created map.
So it will be centered.
It will be zoomed to 12.
And it will utilize this kind of-- this type of map.
And I could have done without the options but this is part
of your requirement, to be zoomed in, I mean,
to be centered to San Francisco.
Let me show you where I define map_canvas.
It's down at the very bottom.
It is simply a div inside the body, right here.
And it's called map_canvas.
That's all it is.
That's all there is to it.
You define a div with an ID of whatever you specify
and then you call in the-- in the initialize function,
you create a new map object specifying
that the new map object will go inside this map that--
in this div.
I will go ahead and call the initialize function inside
the onload.
So what I should see happen here is--
well, right now my page is blank, not this one.
[ Pause ]
Reload this.
[ Pause ]
OK. So as you can see, I now have a map
that is centered on San Francisco.
It does not appear to be as such right now on the projector
but it is in fact centered there.
The next step that I would like to do is to create a polyline.
A polyline is a set of-- is a path of different--
is a path that is created
by following different points on the map.
And in order to accomplish this I have to first define an array
of different points on the map and I do this
by defining an array that contains polyline--
by defining an array that contains LatLng objects.
So what I've done here is I've created a variable called
polylineCoordinates and inside it I have defined three
different LatLng objects in that order.
So, when I form the polyline, it will first look for this point,
I will connect it with this point,
and it will connect into that point.
So depending on the order--
The order of these three will make a difference,
just remember that.
Next, I will define a variable called polylinePath
and this is the actual polyline itself, the polyline object.
I do this by creating a new google.maps.Polyline object
constructor and the first attribute
that I specify here is path.
And path will point to an array of LatLng objects.
In our case it is called polylineCoordinates
which I have defined up here.
So this is the main-- this is the heart
of the polyline, the actual path.
Now these other attributes, I think you can leave them out.
strokeColor refers to the color of that line
and I've specified it to be here #FF0000 which is red.
strokeOpacity is how opaque the line will be,
I think this value ranges from 0 to 1.
And strokeWeight is how bold the line will be,
how thick it will be.
Once I've done all this, once I've completed this,
I need to lay it out on the actual map.
And this is how I do this.
I call the setMap function on the polylinePath object,
on the polyline object and I specify
in parenthesis what map I want this to go on.
So let me go ahead actually call this function.
After initialize, I'm going to call addPolyline.
Let's see what happens.
This is the wrong file.
OK. I want to do an F5 here.
And as you can see there's a newly formed red line going
from San Francisco to somewhere.
I randomly chose these points
because they were visually there on the map.
But this is an actual, very simplistic polyline,
and minimal polyline to see because it's only two lines.
If it were one it would be just a line.
So the way we hope to see the routes, the BART routes
on the map is through polylines.
So we want to see, let's say-- If you look at any metro map,
you will see a bunch of lines denoted in different colors.
So this is a very simplistic example.
But once, let's say, I have a set of controls here,
like a select box or something, I can select a certain route
and it will display the route here.
Now the information, the actual array that will--
the actual coordinates will come from the cache
that you have already created on your end.
OK. Next up is I would like to create a marker.
I would like to show you what a marker looks
like in Google Maps.
This is also a very simple thing to do.
You specify a variable and you call the new google.maps.Marker
object constructor and this will take a value,
a JSONObject inside.
It specifies one of the attributes' positions.
So you need to know where this will go.
Again, position will take a LatLng object as its value.
And next is the title.
The title, I don't think it's necessary
but this is what will appear once you hover over the marker.
And I'm sure there are more attributes to this.
Oh, lastly, you will use the same fashion
to display these on the map.
You will call the setMap method on the marker object
and you will specify what map it should correspond to.
In this case, it's map because I have already defined
that map up here.
Where is it?
This is the global variable map to this page.
I have defined it in initialize
to hold a map object, so just a recap.
So I will call now addMarker and these are the coordinates
of San Francisco, addMarker.
Let me go ahead and refresh this page.
And I do in fact see a marker, here.
And if I ever hover over it, it should say, "I am a marker!"
which is what I gave it for a title.
Now if I click here, nothing happens.
So if this were to be your project you would get downgraded
because what needs to happen here is as soon as I click
on this station, an info window should pop
up specifying the real time arrival and departure, yes,
the real time arrival and departure times.
On to the last thing which is info window,
I've created a function called addInfoWindow.
InfoWindow is also an object in google.maps
and that google.maps-- Google JavaScript API library.
And this is how you typically create one.
Again, a variable and you create a InfoWindow object.
And these are the parameters it needs, content,
what it is going to say.
Here I can put HTML.
I'll show you a little later what I can do with this.
And the position of it-- sorry, excuse me.
So the position will take a LatLng object
and I'm going to remove this code.
Unlike the polyline and the marker,
info window is displayed in a different way.
You actually have to say info--
call the infowindow and then call a .open method.
Now notice I have specified where it's going to appear
on the page-- on the map.
I don't know what these coordinates stand for, I mean,
where they point to but let's find out.
So we'll do addInfoWindow.
And then I click on F5.
[ Pause ]
Let's see where I did wrong here.
All right.
OK. So it calls the open method
but we didn't specify what map it's going to open on.
So we have to put this, I'm sorry.
OK. I want to press F5 now and I should see-- still didn't work?
infowindow.open, let's just try one thing here.
[ Pause ]
In the console, see if there are any errors.
No errors.
[ Pause ]
Let's look at the documentation just to confirm.
So this is what you would do if you were at home
and trying to make this work.
Let's first look at this documentation online.
[ Pause ]
So infowindow.open map.marker.
[ Pause ]
OK. What should happen is the first time
around when I call info window.open
and put the map parameter in.
OK. You know what?
Here's where I did wrong.
I did not call the actual method.
addInfoWindow because everything else look correct.
What a nice waste of time.
OK. So what happens now is I see an info window
with a nice shadow over this area come up.
Now, what if I wanted connect this to the marker?
Notice how I gave the marker has a different set of latitude
and longitude coordinates than does the info window.
But what if I want to put this on top of that exactly?
Here's what I can do.
Here is where I can put these codes.
I can add an event listener to the marker such that
when you click on the marker it will call an anonymous function
and then the info window will open on the map
and at the specified marker.
Now where is marker defined?
And this is where-- this is why I needed
to actually create the marker variable on top.
So-- Because once I created the marker
and addMarker had I not created--
had I not defined it on top, it would not have been accessible
to the addInfoWindow function.
But now that I've created it here, I mean on top,
defined it in addMarker, it is available for the rest
of the functions to use.
And my info window should now-- OK, one thing to know here is
that the default coordinates for the info window is this.
Once you add it to a marker, the latitude
and longitude coordinates will override the default coordinates
for that info window.
So this whole thing will no longer apply.
OK, let's test it out.
F5. OK, there's no info window, disappeared.
If I hover over, "I'm a marker!"
If I click on this, there's the info window.
And this is where the real time arrival
and departure time should appear for the different trains coming
and going from this station.
Remember that this can support HTML
so I can put something like,
and call this, thank you genie.
OK. That's it.
If I refresh this without closing and I click
on the info-- on the marker, I should see this is
in blue and in h1 font.
OK. OK, any questions?
This pretty much covers--
I think it touches on the most important aspects of project 2.
Any question at all?
Is everything really clear?
Yes.
>> Can you explain a little bit about the cache?
>> Oh yeah, sure absolutely.
>> What was the question?
>> Oh, the question.
Can you explain the mechanism of the cache and how will it work.
So the cache.
The BART, their API has a set of--
let me show you what it looks like, first of all.
So if you look at BART's documentation, their API.
If I click on, for example, Route Information, OK,
and if I click on routes, it will respond back
with an XML structure of their routes and so forth.
And down here is a sample of what you will get back
as a response from this-- from their servers, OK?
So you will need to take this information
from BART's Real API, whatever they're sending back.
Now, notice that there are
so many different pieces of information here.
You will need to take the information,
parse out the information that you need and save it locally
in some logical structure, OK?
So what kind of information do you think you would need
from BART?
There are so many things that you can get from there.
You can't get through it unless you can get route info,
advisories and so forth.
What-- The answer to this is you will need
to get just enough information
to accomplish the polylines and the markers.
And in fact, there is a way we can test this out here.
Let's see if I can find it.
There's a place on the left side that says examples or--
you can actually click on this.
[ Pause ]
Maybe under Overview.
Route Information, Examples, here we go.
So examples, let's click on-- there we go.
You see this?
This is what I'm getting back from their API.
And you will need to do such a thing
in two parts of this project.
First part is when you get the information to cache.
The second part is where you will be asking it to--
asking for the real time arrivals
and departures information.
And there are two ways
to get the real time arrivals and departures.
There's a simple ETA feed.
It's somewhere on their site and there's also the--
you can use the Real BART API
to get the real time-- those figures.
I don't know if I've answered your question but did it--
did the cache make sense?
Or do you want me to go to more detail?
>> Yeah, it has.
Thanks.
>> Do you want me to go into more detail on how
to store the cache or how to store the information?
>> Yeah, yeah, get on.
>> So you're making a call to the--
to the Real Bart API first, right?
You're getting the information that you need to--
you're getting all the information about the routes,
their locations, all the stations, their locations,
the different routes and so forth.
And this would be up to you to decide how
to put everything conceptually on your end.
Now, locally, what you do is you make the call.
You can actually-- You can take the values and copy them
and paste them, but that's a lot of work.
Or you can create a script, a PHP script that will go out
and pull all this information locally.
You can store it in an XML file, you can store it in JSON--
CSV file, and so forth.
I recommend that you use a MySQL database to store it locally.
Because it's, as I mentioned earlier, it will have-- it has--
their API already has a relational structure.
So it's much easier to manipulate later.
So you'll start in a bunch of, let's say,
tables or files and so forth.
Then you will store in a way that you understand
and that you were able to extract from later
to accomplish the polylines and the markers.
>> But the-- How is your time on the arrival time?
They are-- They keep changing, right?
So those, you should get real time.
>> Yes, the depart-- So the question is--
the suggestion was that they keep changing, the departure
and arrival times keep changing.
Yes, those will be called in real time.
So when you click on that marker, a real time request,
a request, let's say a POST or a GET will go to the server,
to their server and it will receive the XML response.
And then you will parse the XML response and we'll throw it
into that info window before it is being displayed.
Does that make sense?
>> Yeah, thank you.
>> But in doing so and this--
for this part there are two ways to do it.
There are two-- BART has two ways
to feed you this information.
One is to throw their Real BART API
and the other one is called a simple ETA feeds.
You could look for that online.
I personally use the Real BART API.
Any other questions?
Is everything pretty much clear?
Yes? Has it been over an hour?
Yes. Sorry.
OK. Then, I guess, we can conclude this session.
I hope I touched on the important parts of AJAX
and the walkthrough for project 2.
If you have any questions,
feel free to use the discussion board.
And after class, Chris Gerber will be handling
on campus office hours and at 9 p.m.,
I will be holding a session for online office hours
on TeamViewer and the information is provided to you
on the course's website under the Google Calendar.
There's the TeamViewer ID and so forth,
everything that you need to connect to that.
So thank you everyone and good luck on project--
both projects 1 and 2.
Let us know if you have any questions.
[ Applause ]
The clap always makes me laugh, you know?
[ Silence ]