[ 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. 

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, <h1 style='color:blue'> 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 ]