1 00:00:00,506 --> 00:00:09,016 [ Silence ] 2 00:00:09,516 --> 00:00:10,086 >> All right. 3 00:00:10,146 --> 00:00:11,016 Good evening everyone. 4 00:00:11,016 --> 00:00:12,256 My name Alain Ibrahim 5 00:00:12,256 --> 00:00:16,106 and tonight I am presenting a section on AJAX 6 00:00:16,156 --> 00:00:19,966 and walkthrough for project 2. 7 00:00:21,066 --> 00:00:25,956 The first thing I would like to ask you is what is AJAX? 8 00:00:27,666 --> 00:00:33,846 After David's lecture, can anyone define what AJAX is 9 00:00:35,126 --> 00:00:40,416 or tell me succinctly what it would mean when we say AJAX? 10 00:00:42,236 --> 00:00:45,366 OK. AJAX, I will tell you what AJAX stands for. 11 00:00:45,816 --> 00:00:50,166 AJAX stands for Asynchronous JavaScript and XML. 12 00:00:52,226 --> 00:00:56,056 I'm not going to go into the why it mentions XML now, 13 00:00:56,056 --> 00:00:59,296 but at the time of inception, XML was mostly popular 14 00:00:59,296 --> 00:01:04,796 as opposed to JSON as a format 15 00:01:04,916 --> 00:01:08,926 of data interchange and so forth. 16 00:01:09,476 --> 00:01:13,996 The main-- the crux of AJAX is actually JavaScript. 17 00:01:15,066 --> 00:01:16,296 Let me move on to the next slide. 18 00:01:16,296 --> 00:01:18,886 So, here we go. 19 00:01:19,176 --> 00:01:20,106 All right. 20 00:01:20,106 --> 00:01:23,626 So, AJAX is really a combination of existing technologies. 21 00:01:24,866 --> 00:01:30,566 One being HTML, although HTML is not the functional component 22 00:01:30,566 --> 00:01:33,436 of AJAX, it is the representation layer. 23 00:01:34,146 --> 00:01:38,506 So essentially, if you have your JavaScript, XML or JSON 24 00:01:39,046 --> 00:01:43,356 and so forth and you are making a call of some sort, 25 00:01:43,696 --> 00:01:47,226 it's kind of maybe useless if you're not going to present it 26 00:01:47,226 --> 00:01:50,186 in some visual fashion, hence, the need for-- 27 00:01:50,706 --> 00:01:54,786 hence the presence of HTML, in my definition of AJAX. 28 00:01:55,096 --> 00:02:01,206 You do need JavaScript because AJAX relies on an object, 29 00:02:01,356 --> 00:02:06,186 a JavaScript, say, a class called XMLHttpRequest. 30 00:02:07,156 --> 00:02:10,986 And this object acts as a liaison between the client side 31 00:02:11,496 --> 00:02:14,836 and the server side passing data back 32 00:02:14,836 --> 00:02:21,426 and forth in the background. 33 00:02:21,846 --> 00:02:26,586 Before AJAX, we used to have pages like client browsers, 34 00:02:27,086 --> 00:02:30,676 make requests to the server side, 35 00:02:31,126 --> 00:02:33,476 and what would essentially happen is the server would 36 00:02:33,476 --> 00:02:38,806 output some text or some HTML and the entire page 37 00:02:38,806 --> 00:02:43,306 on the client side would be reloaded with the-- 38 00:02:43,306 --> 00:02:46,966 with AJAX, with the inception of AJAX. 39 00:02:47,116 --> 00:02:52,486 What happens now is the requests are sent in the background 40 00:02:52,846 --> 00:02:56,176 and they are responded also 41 00:02:56,176 --> 00:02:59,026 in the background while the remainder 42 00:02:59,026 --> 00:03:00,576 of the client side script is still working. 43 00:03:01,746 --> 00:03:06,426 And once the client side script receives the response 44 00:03:06,426 --> 00:03:08,436 from the server, it can then interpret it 45 00:03:08,436 --> 00:03:12,286 and apply it accordingly to the document, object model, 46 00:03:12,286 --> 00:03:15,456 or it can do something else with it for example. 47 00:03:15,996 --> 00:03:22,506 In the acronym of AJAX, there is the asynchronous word 48 00:03:23,286 --> 00:03:26,796 and I will stress a little more on that, what it means. 49 00:03:27,616 --> 00:03:32,036 AJAX is asynchronous in the fact that when a request is sent 50 00:03:32,036 --> 00:03:36,366 to the server, the remainder your client side quote, 51 00:03:36,366 --> 00:03:40,286 your JavaScript quote can be executed and/or-- 52 00:03:40,366 --> 00:03:43,486 and that's stopped before the server has responded back 53 00:03:43,576 --> 00:03:43,706 to you. 54 00:03:44,586 --> 00:03:50,916 So when-- let's suppose you have a function that calls, asks for, 55 00:03:50,916 --> 00:03:52,926 like in David's example, asks for a quote 56 00:03:52,926 --> 00:03:56,246 and your webpage does other things other 57 00:03:56,426 --> 00:03:58,336 than show you the quote, 58 00:03:59,006 --> 00:04:01,336 your client side page will do the other things 59 00:04:01,766 --> 00:04:04,876 and the servers-- meanwhile the servers working 60 00:04:04,876 --> 00:04:06,506 on the background over the internet, 61 00:04:06,936 --> 00:04:09,186 and once it has responded, your page can then take 62 00:04:09,186 --> 00:04:10,226 that response, interpret it. 63 00:04:10,996 --> 00:04:13,586 Now, AJAX is not always asynchronous, 64 00:04:13,646 --> 00:04:15,456 AJAX can also be synchronous. 65 00:04:15,456 --> 00:04:18,646 There's a little setting you can toggle in your function, 66 00:04:19,416 --> 00:04:23,046 and that's you can make AJAX synchronous 67 00:04:23,046 --> 00:04:26,616 such that it will not continue executing the rest 68 00:04:26,616 --> 00:04:27,796 of your JavaScript quote 69 00:04:27,956 --> 00:04:30,736 until it has received a response back from the server. 70 00:04:31,836 --> 00:04:34,266 And I will show you this briefly. 71 00:04:36,176 --> 00:04:37,346 OK. I'm not going there yet. 72 00:04:38,086 --> 00:04:42,336 So now, I will demonstrate an example, some source codes 73 00:04:43,216 --> 00:04:47,976 where I dive a little deeper into the inner workings of AJAX. 74 00:04:48,536 --> 00:04:54,336 OK. So what I have done here 75 00:04:55,186 --> 00:05:01,896 on this side is I created two files, just two files, 76 00:05:02,686 --> 00:05:05,396 I do understand that David shows you different iterations 77 00:05:05,696 --> 00:05:09,166 of the examples, and so forth as they build up, but I'm going 78 00:05:09,166 --> 00:05:13,526 to simplify it and the actual different features are all 79 00:05:13,526 --> 00:05:15,586 embedded in both of these files. 80 00:05:16,156 --> 00:05:20,186 So there's a-- I have an ajax.html page 81 00:05:20,186 --> 00:05:22,516 and an ajax.php page. 82 00:05:23,236 --> 00:05:29,106 The ajax.html page corresponds to the client sides of AJAX, 83 00:05:29,786 --> 00:05:34,726 and the ajax.php page is the actual server side script 84 00:05:35,136 --> 00:05:42,826 that the-- that is being called from the client side. 85 00:05:45,876 --> 00:05:49,336 OK. I will first open up ajax.html. 86 00:05:49,766 --> 00:05:53,736 It is a typical HTML document, 87 00:05:53,936 --> 00:05:56,846 HTML file document as specified here. 88 00:05:57,886 --> 00:06:01,066 And the head tag I make a call 89 00:06:01,066 --> 00:06:07,546 to receive the jQuery library from Google. 90 00:06:08,336 --> 00:06:15,406 So this first script tag references the jQuery library 91 00:06:15,406 --> 00:06:18,586 from Google, this has nothing to do with AJAX right now, 92 00:06:18,586 --> 00:06:21,486 but I will be using it later to apply the methods 93 00:06:21,526 --> 00:06:24,076 like that section as dot AJAX 94 00:06:24,126 --> 00:06:27,316 that David had mentioned in class. 95 00:06:27,496 --> 00:06:29,856 And let's see what else. 96 00:06:30,176 --> 00:06:34,196 The next set of script tag is will define what I created 97 00:06:35,456 --> 00:06:37,036 for this example. 98 00:06:39,656 --> 00:06:43,126 OK. So for a complete AJAX turnaround, 99 00:06:43,126 --> 00:06:44,336 what do we really need to do? 100 00:06:44,716 --> 00:06:45,926 There are, in my opinion, 101 00:06:45,926 --> 00:06:50,146 there are three main things that need to be done. 102 00:06:50,146 --> 00:06:51,356 Underneath the hood, you need 103 00:06:51,356 --> 00:06:55,286 to first create an XMLHttpRequest object. 104 00:06:55,876 --> 00:06:56,666 That is the first step. 105 00:06:57,546 --> 00:07:02,576 The second step is to utilize this XMLHttpRequest object 106 00:07:02,776 --> 00:07:07,146 to send data to the server and receive data back 107 00:07:07,146 --> 00:07:12,786 from the server which takes us to step number three, 108 00:07:12,816 --> 00:07:14,456 which is the response function. 109 00:07:14,806 --> 00:07:18,396 There will be a callback function that takes the data 110 00:07:18,396 --> 00:07:22,756 that is being sent by the server back to the client and handles-- 111 00:07:22,816 --> 00:07:24,566 and that handles the data accordingly, 112 00:07:25,336 --> 00:07:27,656 according to your code or you design decisions. 113 00:07:28,186 --> 00:07:35,386 Now moving to the code, I-- the first step here for me, 114 00:07:35,686 --> 00:07:39,736 first step that I have done is I have created a variable called 115 00:07:40,526 --> 00:07:44,146 xhr, which will host or which will be the placeholder 116 00:07:44,146 --> 00:07:46,226 for the XMLHttpRequest object. 117 00:07:46,226 --> 00:07:49,426 I have set it to null and I have defined this specifically 118 00:07:49,426 --> 00:07:52,836 outside of the functions so that all the functions can have 119 00:07:52,836 --> 00:07:54,956 access to it once we have created the new 120 00:07:55,376 --> 00:07:56,926 XMLHttpRequest object. 121 00:07:57,456 --> 00:08:00,846 And the second step is 122 00:08:00,846 --> 00:08:04,366 that I created a function called createHttpRequest 123 00:08:04,486 --> 00:08:09,866 that would return an actual XMLHttpRequest object. 124 00:08:10,566 --> 00:08:15,576 David had mentioned this in class so I will not repeat-- 125 00:08:15,576 --> 00:08:17,116 or I will not dive into this again. 126 00:08:17,196 --> 00:08:18,706 But basically, the basic idea here is 127 00:08:18,706 --> 00:08:23,126 that you are creating an XMLHttpRequest object 128 00:08:23,126 --> 00:08:25,256 through this function, and that's what-- 129 00:08:25,256 --> 00:08:26,676 that is what this function is returning. 130 00:08:27,226 --> 00:08:33,086 And now I will-- I created my own function called getText 131 00:08:33,646 --> 00:08:39,196 which will just basically get text from the server side, 132 00:08:39,916 --> 00:08:43,606 which it-- or in this case, ajax.php. 133 00:08:46,886 --> 00:08:49,976 So in this function, I defined a few things. 134 00:08:50,066 --> 00:08:54,526 First thing I will define is a variable called params, 135 00:08:55,036 --> 00:08:59,576 where I insert-- where I defined what parameters I will send 136 00:08:59,656 --> 00:09:02,486 to the server along with their values. 137 00:09:03,366 --> 00:09:07,326 In this case, I-- I'm defining a variable called i_want_text 138 00:09:08,066 --> 00:09:10,386 and I have set the value of this to yes. 139 00:09:10,886 --> 00:09:12,096 This is really nothing meaningful, 140 00:09:12,096 --> 00:09:13,646 but it's just an example. 141 00:09:14,756 --> 00:09:19,246 This works also in the same way that you would normally do 142 00:09:19,246 --> 00:09:23,156 in a-- when you send request via URL 143 00:09:23,156 --> 00:09:24,916 and you put the ampersand sign. 144 00:09:25,176 --> 00:09:27,126 So if I want to send more than one variable here, 145 00:09:27,476 --> 00:09:33,096 I would put ampersand and say variable 2 equals to 5 146 00:09:33,296 --> 00:09:36,126 for example, and when send this-- 147 00:09:36,306 --> 00:09:40,596 and this will allow me to send the variables 148 00:09:40,596 --> 00:09:42,866 over to the server, I mean not this alone, 149 00:09:42,866 --> 00:09:48,526 but this is the structure of how they are laid out. 150 00:09:50,146 --> 00:09:55,456 Next is I'll define a variable called url which points 151 00:09:55,486 --> 00:09:59,436 to the server side script, in this case, 152 00:09:59,436 --> 00:10:00,906 it is called ajax.php. 153 00:10:01,206 --> 00:10:05,206 It could have been something like http:// some-- 154 00:10:05,466 --> 00:10:07,916 it could have been script over the network 155 00:10:07,916 --> 00:10:09,886 over the internet somewhere, but in this case, 156 00:10:09,886 --> 00:10:12,746 for simplicity sake, I have use-- 157 00:10:13,306 --> 00:10:14,936 it's in the same folder structure 158 00:10:14,936 --> 00:10:17,696 and it's called ajax.php. 159 00:10:18,266 --> 00:10:22,616 The next remaining few lines pertained 160 00:10:22,616 --> 00:10:25,776 to the actual xhr object 161 00:10:25,776 --> 00:10:28,616 which in this case is the XMLHttpRequest object. 162 00:10:28,966 --> 00:10:31,606 So the remainder of this lines 163 00:10:31,606 --> 00:10:35,766 and this function are all AJAX or in how AJAX works. 164 00:10:36,176 --> 00:10:37,666 All right. 165 00:10:37,666 --> 00:10:42,716 So first thing I do here is I give the value of xhr, 166 00:10:42,876 --> 00:10:45,246 I create an HTTP request object 167 00:10:45,506 --> 00:10:50,246 which returns an XMLHttpRequest object and I will give 168 00:10:50,286 --> 00:10:52,686 that value to the variable xhr. 169 00:10:53,876 --> 00:10:57,156 The next thing which is what David mentioned 170 00:10:57,156 --> 00:10:59,306 in class is I would create a connection 171 00:10:59,306 --> 00:11:04,486 to the server side script by calling the open method. 172 00:11:05,076 --> 00:11:09,996 So I'll do xhr.open, but in my case, I will be using POST 173 00:11:10,396 --> 00:11:13,436 as opposed to GET which was mentioned in class. 174 00:11:14,186 --> 00:11:15,586 That's-- This is the first parameter 175 00:11:15,586 --> 00:11:19,526 with method I could use POST, I could use GET, I can use PUT. 176 00:11:20,226 --> 00:11:23,396 But for this class, we'll be using mainly POST and GET. 177 00:11:24,196 --> 00:11:26,106 The second parameter is the url. 178 00:11:26,826 --> 00:11:30,196 Lastly, this third parameter that is set 179 00:11:30,196 --> 00:11:34,056 to true is what makes AJAX asynchronous. 180 00:11:34,436 --> 00:11:39,246 If I set this false, AJAX will become synchronous, 181 00:11:40,336 --> 00:11:42,196 and I will go over this later. 182 00:11:44,716 --> 00:11:48,576 The next line over specifies what kind-- what type of-- 183 00:11:48,686 --> 00:11:51,916 what the content type is that will be sent over. 184 00:11:52,756 --> 00:11:56,506 For regular text and for just plain text, 185 00:11:56,506 --> 00:12:00,966 you will be using most-- for the most part, 186 00:12:01,126 --> 00:12:03,106 application/ x-www-form-urlencoded. 187 00:12:04,086 --> 00:12:07,516 But for things like files, you would want to use something 188 00:12:07,516 --> 00:12:10,926 like multipart/form-data. 189 00:12:11,526 --> 00:12:14,456 Now for the POST request, 190 00:12:14,456 --> 00:12:16,616 you need to specify how long the length 191 00:12:17,266 --> 00:12:22,446 of the actual parameters to the server. 192 00:12:22,986 --> 00:12:26,196 And in this case, I will specify this 193 00:12:26,236 --> 00:12:28,896 by setting the request header with this 194 00:12:28,986 --> 00:12:37,656 and as a second parameter putting params.length. 195 00:12:38,066 --> 00:12:43,046 The next line implies that once the server, 196 00:12:43,686 --> 00:12:46,966 once the server has responded, close the connection 197 00:12:46,966 --> 00:12:50,346 with the x inside the XMLHttpRequest object. 198 00:12:50,716 --> 00:12:55,356 And over to the next line, onreadystatechange, 199 00:12:55,436 --> 00:12:56,866 I know we mentioned this in class. 200 00:12:57,846 --> 00:13:01,736 What happens here is that each time, 201 00:13:02,586 --> 00:13:05,106 each time the server does something in terms 202 00:13:05,106 --> 00:13:06,676 of states it goes through four different states. 203 00:13:07,066 --> 00:13:10,216 Each time it does something, it will-- 204 00:13:10,836 --> 00:13:12,366 onreadystatechange will have a-- 205 00:13:12,526 --> 00:13:16,026 it will, OK, it will send a notification 206 00:13:16,026 --> 00:13:20,046 to the XMLHttpRequest object with a value. 207 00:13:20,816 --> 00:13:23,656 So when it's first being initialize so forth, 208 00:13:23,656 --> 00:13:25,066 it will go through four different states, 209 00:13:25,136 --> 00:13:26,476 one, two, three and four. 210 00:13:27,006 --> 00:13:30,226 And what I'm specifying here is 211 00:13:30,226 --> 00:13:34,776 that each time the server is shifting from one state 212 00:13:34,776 --> 00:13:37,486 to another, go ahead and call the method, 213 00:13:37,486 --> 00:13:39,406 this method called getTextHandler 214 00:13:41,426 --> 00:13:43,306 which I define below. 215 00:13:43,306 --> 00:13:50,576 I could have put an anonymous function here, 216 00:13:50,786 --> 00:14:02,336 like as in function and so forth, but I choose 217 00:14:02,336 --> 00:14:06,106 to do it this way because if I wanted to enter a lot of code 218 00:14:06,106 --> 00:14:09,276 in this function, it would not look so visually 219 00:14:09,426 --> 00:14:12,206 and so aesthetically pleasing for it to do so, 220 00:14:12,946 --> 00:14:15,076 and hence why I put it down here. 221 00:14:15,646 --> 00:14:18,646 Now mind you, I cannot pass parameters here 222 00:14:18,776 --> 00:14:22,736 by opening parenthesis and entering something 223 00:14:22,736 --> 00:14:25,956 like a variable1 and so forth. 224 00:14:26,026 --> 00:14:26,816 This will not work. 225 00:14:27,536 --> 00:14:33,966 Instead if you want to-- if you choose to send something to-- 226 00:14:35,296 --> 00:14:38,366 send parameters to this function, what you will need 227 00:14:38,366 --> 00:14:40,286 to do is call an anonymous function, 228 00:14:40,856 --> 00:14:46,536 and then call getTextHandler inside this, 229 00:14:47,576 --> 00:14:52,566 and here's were you'll past the parameter like variable. 230 00:14:52,566 --> 00:14:55,976 This is the right way to do this. 231 00:14:56,516 --> 00:15:02,626 [ Pause ] 232 00:15:03,126 --> 00:15:06,896 Lastly, the last line here is the part 233 00:15:06,896 --> 00:15:10,966 which sends the parameters or sends the information 234 00:15:11,086 --> 00:15:15,806 over to the server and it looks like this, xhr.send 235 00:15:15,806 --> 00:15:19,236 and inside is where you specify your parameters 236 00:15:19,716 --> 00:15:20,856 to be sent to the server side. 237 00:15:22,046 --> 00:15:25,166 Now, I could have alternately put nothing in here or null, 238 00:15:25,166 --> 00:15:29,156 I could have done this or null which means 239 00:15:29,156 --> 00:15:31,566 that I'm not really sending anything to the server. 240 00:15:31,566 --> 00:15:35,386 But in this case, I am sending a variable called-- 241 00:15:36,746 --> 00:15:40,726 where is it, i_want_text. 242 00:15:44,446 --> 00:15:48,226 OK. On to the callback function 243 00:15:49,416 --> 00:15:52,296 which is called onreadystatechange. 244 00:15:52,456 --> 00:16:01,756 Does anyone have any questions so far, on this? 245 00:16:01,956 --> 00:16:07,716 No? OK. So this is the handler function 246 00:16:07,716 --> 00:16:14,216 that will be called four times by the XMLHttpRequest object. 247 00:16:14,956 --> 00:16:19,336 Well, four times assuming that the server made it that far. 248 00:16:19,556 --> 00:16:23,366 And I can-- maybe I can demonstrate this a little later 249 00:16:23,366 --> 00:16:26,506 but for this example, 250 00:16:26,506 --> 00:16:31,136 I will first just make a simple AJAX call to the server. 251 00:16:31,676 --> 00:16:35,116 Let me show you what ajax.php looks like. 252 00:16:35,116 --> 00:16:39,956 It is a very small file and I made it as such for simplicity 253 00:16:39,956 --> 00:16:43,876 and it either accepts-- well, I've commented code out, 254 00:16:44,196 --> 00:16:49,146 either accepts a POST variable called i_want_xml 255 00:16:49,326 --> 00:16:51,246 or i_want_text. 256 00:16:52,876 --> 00:16:56,756 So what I'm saying here essentially is that I'm looking 257 00:16:56,756 --> 00:16:59,306 for a POST variable called i_want_text. 258 00:16:59,886 --> 00:17:03,876 If it is available regardless of its value, I want the server 259 00:17:03,876 --> 00:17:06,136 to print out text received with value 260 00:17:06,136 --> 00:17:13,126 of whatever the value of that variable is. 261 00:17:16,356 --> 00:17:18,406 Back to ajax.html. 262 00:17:18,706 --> 00:17:20,866 OK. So how do I call this function? 263 00:17:20,866 --> 00:17:22,746 How do I make this happen? 264 00:17:24,036 --> 00:17:26,506 How can I call getText when the page loads? 265 00:17:27,036 --> 00:17:28,176 Can anyone tell me? 266 00:17:35,176 --> 00:17:38,266 OK. So when the page loads, there are two message, mainly. 267 00:17:38,476 --> 00:17:42,196 Well, they all point to basically the same thing. 268 00:17:42,426 --> 00:17:45,256 But when the actual page loads, 269 00:17:46,346 --> 00:17:52,996 I can use the onload event in the body. 270 00:17:53,576 --> 00:17:55,136 I can call it here. 271 00:17:55,136 --> 00:18:01,126 I can say getText. 272 00:18:01,126 --> 00:18:04,416 Or I can use AJAX's-- I mean, 273 00:18:04,636 --> 00:18:06,876 jQuery's document .ready function, 274 00:18:08,456 --> 00:18:10,366 and I can put getText here. 275 00:18:10,906 --> 00:18:16,436 And I'm able to use jQuery here because I, 276 00:18:16,436 --> 00:18:20,946 if you recall earlier, I specified that I called 277 00:18:20,946 --> 00:18:22,416 for the script to come from Google 278 00:18:23,156 --> 00:18:26,116 so I have the entire jQuery library at this-- I will have-- 279 00:18:26,826 --> 00:18:28,066 once this document loads, 280 00:18:28,066 --> 00:18:31,186 I will have at this point the entire jQuery library loaded 281 00:18:31,346 --> 00:18:32,906 in my DOM. 282 00:18:33,516 --> 00:18:38,826 [ Pause ] 283 00:18:39,326 --> 00:18:41,916 Let's go back to getText. 284 00:18:42,516 --> 00:18:49,936 [ Pause ] 285 00:18:50,436 --> 00:18:54,046 OK. So it calls for a getTextHandler. 286 00:18:55,316 --> 00:19:01,076 Once the page loads, the body will call getText 287 00:19:01,896 --> 00:19:05,396 and then it will send the information over to ajax.php. 288 00:19:05,396 --> 00:19:09,746 And when ajax.php starts changing states, 289 00:19:10,196 --> 00:19:12,906 it will call XMLHttpRequest here, 290 00:19:12,906 --> 00:19:19,386 it will call the getTextHandler method, which is this method. 291 00:19:19,686 --> 00:19:23,136 And if all is good, if readyState is equal to 4, 292 00:19:23,196 --> 00:19:27,456 which is the last state that the server is in, 293 00:19:28,386 --> 00:19:31,196 and if the status code is 200, which means everything is OK, 294 00:19:31,196 --> 00:19:36,726 the page was found and it's delivering the data, 295 00:19:37,236 --> 00:19:39,366 then I can go ahead and alert the text 296 00:19:39,776 --> 00:19:46,236 that was submitted back to the browser. 297 00:19:46,236 --> 00:19:51,236 So if I go here, if I come here to localhost/section_ajax.html 298 00:19:51,236 --> 00:19:53,566 and I go ahead and refresh the page, 299 00:19:54,066 --> 00:19:56,946 what should I see based on these codes? 300 00:19:57,516 --> 00:20:08,786 [ Pause ] 301 00:20:09,286 --> 00:20:12,006 Let me go back a little bit. 302 00:20:12,206 --> 00:20:16,786 So I am sending i_want_text equals to yes to the server. 303 00:20:17,666 --> 00:20:20,816 The server is as a POST variable. 304 00:20:21,306 --> 00:20:26,566 The server is taking this and is printing this value out. 305 00:20:27,186 --> 00:20:35,116 And then, the handler, which is down here, is going to alert 306 00:20:35,236 --> 00:20:38,716 in a text box the response text, so what should I see? 307 00:20:39,196 --> 00:20:40,796 What should happen when I load the page? 308 00:20:41,316 --> 00:20:43,636 I'm sorry? 309 00:20:43,736 --> 00:20:43,916 >> Alert? 310 00:20:44,446 --> 00:20:44,986 >> An alert? 311 00:20:44,986 --> 00:20:48,136 An alert, oh, yes, an alert, but what is inside this alert box? 312 00:20:48,536 --> 00:20:48,766 >> Yes. 313 00:20:52,736 --> 00:20:54,136 >> Text received with value of. 314 00:20:54,136 --> 00:20:56,096 >> Text received with value, yes. 315 00:20:56,666 --> 00:20:58,966 Let's see. 316 00:20:59,136 --> 00:20:59,886 OK. Nothing happened. 317 00:21:00,826 --> 00:21:03,526 Oh, there you go. 318 00:21:03,526 --> 00:21:07,466 It took a long time, considering it's on the same folder. 319 00:21:07,686 --> 00:21:11,876 But this is what-- this is the text 320 00:21:11,946 --> 00:21:14,526 that is being responded back from the server code. 321 00:21:15,176 --> 00:21:20,186 OK. Is everyone clear on this part of the code? 322 00:21:20,726 --> 00:21:21,146 This part? 323 00:21:21,716 --> 00:21:26,476 OK, good. Now we're going to move over to another example. 324 00:21:27,086 --> 00:21:34,276 I call this one getXMLObject because-- and this time around, 325 00:21:34,996 --> 00:21:37,006 everything is pretty much the same except 326 00:21:37,006 --> 00:21:41,666 that the parameters-- the parameter name is i_want_xml 327 00:21:41,666 --> 00:21:44,116 and I will uncomment that part 328 00:21:44,116 --> 00:21:46,656 in the corresponding server side. 329 00:21:47,076 --> 00:21:52,316 And the response type is actual response as of XML. 330 00:21:53,436 --> 00:21:56,226 So, the difference here is 331 00:21:56,226 --> 00:21:58,346 that I will be receiving an XML structure. 332 00:21:59,106 --> 00:22:04,496 Let me go back to ajax.php and I will comment this out 333 00:22:04,496 --> 00:22:09,116 and I'll tell you why I'm commenting this out shortly. 334 00:22:09,646 --> 00:22:14,736 And I will comment this in. 335 00:22:16,626 --> 00:22:19,756 So if POST-- if it says, I want-- 336 00:22:19,756 --> 00:22:26,326 if the variable is called i_want_xml, if that's being sent 337 00:22:26,326 --> 00:22:28,146 over to me as a server script, 338 00:22:28,586 --> 00:22:32,066 I want to send out an XML structure. 339 00:22:34,876 --> 00:22:36,886 OK. Where are you? 340 00:22:37,446 --> 00:22:48,606 OK. So here, this should alert the response that XML coming 341 00:22:48,606 --> 00:22:51,596 from the server, I mean the .responseXML coming 342 00:22:51,596 --> 00:22:53,666 from the server. 343 00:22:53,896 --> 00:22:56,576 What should we-- now, oh, 344 00:22:57,076 --> 00:22:59,796 I need to call the function first, so getXMLObject. 345 00:23:03,926 --> 00:23:06,746 I apologize for scrolling down so much. 346 00:23:07,756 --> 00:23:12,356 getXMLObject, let me remove this one. 347 00:23:12,996 --> 00:23:18,506 OK. What do you expect to happen now when I load the page 348 00:23:19,066 --> 00:23:23,816 and I'll go back up and-- we'll go back up here, right. 349 00:23:24,426 --> 00:23:31,616 What do you expect to see happen when I alert xhr.responseXML? 350 00:23:32,156 --> 00:23:34,976 And this is the actual response coming from the server. 351 00:23:35,516 --> 00:23:44,516 [ Pause ] 352 00:23:45,016 --> 00:23:46,000 [ Inaudible Remark ] 353 00:23:47,296 --> 00:23:48,236 Sorry, what was that? 354 00:23:49,396 --> 00:23:51,396 [ Inaudible Remark ] 355 00:23:51,776 --> 00:23:53,646 It will alert the XML in the text box. 356 00:23:53,676 --> 00:23:57,316 That's pretty close, but in fact, it will not. 357 00:23:57,796 --> 00:24:04,366 And what it will alert-- this might get, take some time. 358 00:24:04,446 --> 00:24:07,326 It will actually alert that it's an object-- 359 00:24:07,436 --> 00:24:09,416 it's an XML document object 360 00:24:09,416 --> 00:24:12,446 because it is enveloped in an actual object. 361 00:24:12,446 --> 00:24:13,896 It is not raw text. 362 00:24:13,896 --> 00:24:15,346 It's not plain text. 363 00:24:15,706 --> 00:24:19,286 So, which takes us to the next-- to our next function called-- 364 00:24:21,736 --> 00:24:29,646 on this client side, of course-- and that is called getXMLText. 365 00:24:30,836 --> 00:24:35,286 Now with this iteration, what is essentially happening is 366 00:24:35,286 --> 00:24:38,306 that in the response-- on the response end, 367 00:24:38,806 --> 00:24:41,886 I am taking the response, the XML structure, 368 00:24:42,396 --> 00:24:45,536 and I am getting all the tags called text 369 00:24:46,576 --> 00:24:50,656 because I've specified-- under the root note, 370 00:24:50,826 --> 00:24:54,566 I've specified a bunch of values enclosed 371 00:24:54,566 --> 00:24:57,486 within text and labeled tags. 372 00:24:59,296 --> 00:25:01,656 So here, I'm getting all the tags called text 373 00:25:01,776 --> 00:25:03,876 and inserting them into this variable 374 00:25:03,876 --> 00:25:08,096 and this variable becomes an array holding all these values. 375 00:25:08,096 --> 00:25:11,336 So let's suppose now I alert-- 376 00:25:11,336 --> 00:25:20,286 I'm going to alert the text_tag_values.length. 377 00:25:22,476 --> 00:25:27,846 I will first need to change this to getXMLText. 378 00:25:31,896 --> 00:25:35,936 OK. What do you expect to see happen now when I call this 379 00:25:36,116 --> 00:25:37,846 and I know you're not looking at the PHP side, 380 00:25:37,846 --> 00:25:39,476 but now that you look-- you can see here, 381 00:25:39,476 --> 00:25:45,746 I have two text elements and I am calling for GET 382 00:25:46,676 --> 00:25:51,316 to get all the text that are named text and inserting them 383 00:25:51,316 --> 00:26:02,216 into the variable, into this variable, text_tag_values. 384 00:26:02,976 --> 00:26:07,486 What should I see when I call for the length of this array, 385 00:26:07,696 --> 00:26:11,016 how many values or if any? 386 00:26:11,626 --> 00:26:11,696 >> Two? 387 00:26:17,266 --> 00:26:20,866 >> Two? Two is the correct answer. 388 00:26:21,466 --> 00:26:23,876 There it is. 389 00:26:24,066 --> 00:26:24,796 That's two elements. 390 00:26:25,366 --> 00:26:26,676 Now, how do I print them out? 391 00:26:27,266 --> 00:26:35,136 Let's go ahead and iterate through this XML 392 00:26:35,206 --> 00:26:37,756 and through this array. 393 00:26:38,686 --> 00:26:43,606 Or let's say, i=0;i 00:26:54,026 i++ and alert text_tag_values[i], close. 395 00:26:55,306 --> 00:27:00,546 All right. 396 00:27:02,336 --> 00:27:14,186 So what should I see now? 397 00:27:15,516 --> 00:27:23,056 [ Pause ] 398 00:27:23,556 --> 00:27:29,976 I should actually see the values, well-- I'm seeing again, 399 00:27:29,976 --> 00:27:31,856 I'm seeing an element object. 400 00:27:33,116 --> 00:27:37,006 Since these are actual object still stored within the array, 401 00:27:37,006 --> 00:27:40,016 the only way to access the text in them is 402 00:27:40,566 --> 00:27:49,096 to call the DOM operator and then firstChild.nodeValue. 403 00:27:49,606 --> 00:27:55,846 And this should print out. 404 00:27:57,496 --> 00:27:58,226 There we go. 405 00:27:58,456 --> 00:28:02,436 Text received with value of and the output will be in XML. 406 00:28:02,886 --> 00:28:03,666 Another text node. 407 00:28:04,276 --> 00:28:09,846 It should have print, OK, POST XML. 408 00:28:10,516 --> 00:28:18,596 [ Pause ] 409 00:28:19,096 --> 00:28:24,626 OK. Before I move on to the next example which is jQuery, 410 00:28:25,506 --> 00:28:30,266 I would like to run through a small example with the Java-- 411 00:28:30,456 --> 00:28:33,046 the AJAX being synchronous. 412 00:28:33,586 --> 00:28:36,366 I'll also go back to the getText method. 413 00:28:37,666 --> 00:28:41,696 I'll show you how AJAX can be synchronous. 414 00:28:41,786 --> 00:28:44,826 So, this is get-- oh no, this is not it. 415 00:28:47,756 --> 00:28:49,326 This is getText. 416 00:28:50,226 --> 00:28:55,126 And instead of leaving this part set to true, 417 00:28:55,656 --> 00:28:57,726 I will set it to false. 418 00:29:01,346 --> 00:29:03,026 And at the end of this function, 419 00:29:04,256 --> 00:29:11,746 I will call alert Finished getText. 420 00:29:12,516 --> 00:29:23,546 [ Pause ] 421 00:29:24,046 --> 00:29:29,966 So let's see what happens when I-- or from the PHP end. 422 00:29:30,376 --> 00:29:31,576 OK. Before I comment this out, 423 00:29:31,576 --> 00:29:35,646 I would like to let you know why I commented out this part 424 00:29:35,816 --> 00:29:39,876 when I was outputting XML to the client side. 425 00:29:39,876 --> 00:29:45,626 The reason is if I did leave this, it would actually be used 426 00:29:45,626 --> 00:29:47,896 and not interpreted by the client side as XML. 427 00:29:48,526 --> 00:29:51,956 So whenever you send out XML, the only thing it can be 428 00:29:51,956 --> 00:29:53,896 in this document is an output of XML. 429 00:29:54,486 --> 00:30:01,626 Let me go ahead and comment this out. 430 00:30:04,556 --> 00:30:05,576 Comment this back in. 431 00:30:06,516 --> 00:30:13,146 [ Pause ] 432 00:30:13,646 --> 00:30:15,926 OK. Now, that I've made this synchronous, 433 00:30:16,616 --> 00:30:20,996 what do you expect to happen here? 434 00:30:21,636 --> 00:30:26,876 So, I've changed this from true to false and I entered-- 435 00:30:26,876 --> 00:30:29,736 I inserted an alert box at the very end of the statement. 436 00:30:29,736 --> 00:30:31,136 You know what? 437 00:30:31,136 --> 00:30:33,296 The first thing I wanted to do is I'm going to leave this 438 00:30:33,296 --> 00:30:37,806 as true representing the original example. 439 00:30:38,146 --> 00:30:41,026 So, if I'm going to refresh now, here's what's going to happen. 440 00:30:42,096 --> 00:30:45,296 Text value with-- Text received with value of yes, 441 00:30:45,296 --> 00:30:46,246 it's coming from the server. 442 00:30:46,246 --> 00:30:47,606 Let me refresh this again. 443 00:30:48,326 --> 00:30:50,966 Notice what happens. 444 00:30:51,566 --> 00:30:55,256 It calls Finish getText-- finishing getText first. 445 00:30:55,666 --> 00:31:01,616 So, it calls this method first and then, it gets-- it call-- 446 00:31:01,616 --> 00:31:07,256 and then, it calls the other one which is specified 447 00:31:07,256 --> 00:31:08,476 in the callback function. 448 00:31:15,936 --> 00:31:17,376 Let me do this one more time. 449 00:31:17,936 --> 00:31:20,856 So, F5, I don't know if you saw this. 450 00:31:21,236 --> 00:31:24,156 The only reason why-- It hasn't really closed. 451 00:31:24,156 --> 00:31:24,976 It's still the background. 452 00:31:24,976 --> 00:31:26,026 So when I close, it's still there. 453 00:31:26,936 --> 00:31:31,536 OK. What do you expect to happen when I change this to false? 454 00:31:31,536 --> 00:31:39,186 >> The order will switch. 455 00:31:39,376 --> 00:31:40,416 >> The order will switch. 456 00:31:41,566 --> 00:31:42,906 Yes, the order will switch. 457 00:31:43,456 --> 00:31:48,926 What will happen here is the client side JavaScript will wait 458 00:31:50,316 --> 00:31:55,546 until the server has completed its-- whatever it's processing. 459 00:31:56,286 --> 00:31:58,586 And then once it sends the information back 460 00:31:58,586 --> 00:32:04,436 and everything is OK, then the JavaScript will complete the 461 00:32:04,436 --> 00:32:05,866 remainder of the code. 462 00:32:06,456 --> 00:32:09,796 So, let me do it, F5 here again and here's what happens. 463 00:32:10,436 --> 00:32:13,616 I get a text received with value of yes and if I press OK, 464 00:32:13,616 --> 00:32:15,396 then I will get finished getting text. 465 00:32:15,866 --> 00:32:19,346 And this is an important, I mean, this is-- 466 00:32:20,366 --> 00:32:23,826 you might want to use this and place this where you rely-- 467 00:32:23,896 --> 00:32:25,786 you're relying on certain information from the server 468 00:32:26,046 --> 00:32:28,706 and you can not go forward without that information. 469 00:32:29,536 --> 00:32:33,316 But like in the instance of, let's say, Facebook has a space 470 00:32:33,316 --> 00:32:35,566 in your page that has a bunch of ads 471 00:32:36,336 --> 00:32:39,046 and those ads are being retrieved through AJAX. 472 00:32:39,696 --> 00:32:40,796 Now, it would not make sense 473 00:32:40,836 --> 00:32:45,486 to make the AJAX calls AJAX to be false. 474 00:32:46,436 --> 00:32:49,436 It would not make sense to make it synchronous because then, 475 00:32:49,436 --> 00:32:50,876 you'll not be able to see your friends, 476 00:32:50,876 --> 00:32:55,586 the feeds in your Facebook page until the ads have loaded. 477 00:32:56,166 --> 00:32:58,976 So, in this case, you would want to set-- keep it as true. 478 00:32:59,396 --> 00:33:01,636 But in other cases where you're reliant, 479 00:33:01,756 --> 00:33:04,916 where your client side code is reliant on pieces 480 00:33:04,916 --> 00:33:10,356 of information, then you will probably want to use this. 481 00:33:10,856 --> 00:33:16,576 In general, it's not used that much, I mean, in practice. 482 00:33:17,416 --> 00:33:26,576 OK. Lastly, this is something-- 483 00:33:26,576 --> 00:33:29,566 I'm going to go over something David touched on class 484 00:33:29,566 --> 00:33:33,056 at the very-- near the very end which is the usage of jQuery. 485 00:33:33,866 --> 00:33:39,666 Now, jQuery has conveniently created shorthand methods 486 00:33:39,746 --> 00:33:43,436 for AJAX calls. 487 00:33:44,346 --> 00:33:47,936 One-- Popular one being .ajax, there are other methods too. 488 00:33:47,936 --> 00:33:51,436 There is one called .post which pertains to POST, 489 00:33:51,516 --> 00:33:53,566 sending POST requests to servers. 490 00:33:54,456 --> 00:33:57,296 And there's also a third one called the JSON 491 00:33:58,296 --> 00:34:04,186 which is tailored to deal with JSON requests. 492 00:34:05,656 --> 00:34:08,566 And in this case, I will mimic what I did basically 493 00:34:08,566 --> 00:34:09,916 in this example. 494 00:34:10,196 --> 00:34:14,876 I'm mimicking what I did with getText except 495 00:34:15,396 --> 00:34:17,916 that everything here is much shorter. 496 00:34:18,846 --> 00:34:25,026 So, again, the AJAX function takes in a JSON object 497 00:34:25,296 --> 00:34:26,936 as its parameter which is this. 498 00:34:27,456 --> 00:34:29,956 And inside that object is an instruction set. 499 00:34:29,956 --> 00:34:35,406 I would attribute a set of attributes with their values. 500 00:34:35,496 --> 00:34:38,146 This is going to be a POST operation 501 00:34:38,556 --> 00:34:40,106 and this is the specified URL. 502 00:34:40,786 --> 00:34:42,856 The data is the data that will be sent 503 00:34:42,856 --> 00:34:45,726 to the server using this function. 504 00:34:45,996 --> 00:34:47,916 Now, if I wanted to put more than one variable, 505 00:34:47,916 --> 00:34:48,726 here is what I would do. 506 00:34:49,126 --> 00:34:52,196 I would say, let's say, i_want_text yes and the next, 507 00:34:52,196 --> 00:34:56,266 I can put a comma and say variable, 508 00:34:56,296 --> 00:34:59,316 let's say variable_2 equals to-- 509 00:34:59,316 --> 00:35:03,676 or variable_2: 6 which would then-- 510 00:35:03,856 --> 00:35:07,496 this is tantamount to i_want_text equals to yes, 511 00:35:07,796 --> 00:35:12,196 ampersand sign variable_2 equals to 6. 512 00:35:16,376 --> 00:35:18,666 Lastly, in this structure, 513 00:35:20,196 --> 00:35:23,616 the attribute success will specify what function 514 00:35:23,806 --> 00:35:28,436 to be called in the event of a success operation, 515 00:35:28,436 --> 00:35:29,806 successful server operation. 516 00:35:30,766 --> 00:35:32,666 In this case, it's an anonymous function 517 00:35:32,706 --> 00:35:36,806 and the actual word response here will be replaced 518 00:35:36,886 --> 00:35:44,836 by whatever the server outputs back to us. 519 00:35:44,836 --> 00:35:47,746 And here, I am alerting-- In the body of this anonymous function, 520 00:35:47,746 --> 00:35:48,896 I'm alerting the response. 521 00:35:49,456 --> 00:35:51,466 So let's go here and put-- what's the name of the function, 522 00:35:51,526 --> 00:35:53,776 it is called useJQuery. 523 00:35:54,286 --> 00:35:55,976 So I'll just call useJQuery here. 524 00:35:56,516 --> 00:36:03,536 [ Pause ] 525 00:36:04,036 --> 00:36:06,956 I want to go ahead and refresh the page. 526 00:36:07,016 --> 00:36:13,226 And surely enough, it did the exact same thing as getText. 527 00:36:14,356 --> 00:36:16,446 So, anyone have any questions on this? 528 00:36:17,516 --> 00:36:26,006 [ Pause ] 529 00:36:26,506 --> 00:36:31,476 No? OK. I will move forward now to project 2's walkthrough. 530 00:36:31,476 --> 00:36:34,666 Here we go. 531 00:36:36,676 --> 00:36:41,436 OK, back to the Prezi. 532 00:36:47,906 --> 00:36:50,956 OK. Project 2, the specification came out today 533 00:36:51,596 --> 00:36:54,626 and what is project 2, what does it entail? 534 00:36:54,626 --> 00:36:56,566 So what are we trying to accomplish here? 535 00:36:57,136 --> 00:36:58,996 We're trying to build a mashup. 536 00:36:59,926 --> 00:37:03,756 We're calling a mashup because we're kind of embedding a map 537 00:37:03,756 --> 00:37:06,706 from Google's inside a div. 538 00:37:07,196 --> 00:37:10,476 So, it's not really our code that we're using here. 539 00:37:10,766 --> 00:37:13,716 It's Google's code that is being displayed 540 00:37:14,326 --> 00:37:16,406 or their markup is being displayed on our page. 541 00:37:17,396 --> 00:37:21,436 And then-- But then again, we have to put 542 00:37:21,436 --> 00:37:26,606 in our own code inside that page to manipulate this map 543 00:37:26,606 --> 00:37:27,796 that we're going to be embedding. 544 00:37:28,696 --> 00:37:32,036 So, we're building a mashup to hook a Google map 545 00:37:32,036 --> 00:37:36,426 into San Francisco's BART, Bay Area Rapid Transit. 546 00:37:36,426 --> 00:37:42,106 And the technologies needed here are MySQL 547 00:37:42,106 --> 00:37:44,186 or another caching technology. 548 00:37:44,186 --> 00:37:45,146 It could be a CSV file. 549 00:37:45,146 --> 00:37:47,206 It could be a set of XML files. 550 00:37:47,206 --> 00:37:51,696 So you can store in a text file through using JSON for example. 551 00:37:52,326 --> 00:37:56,636 I personally prefer MySQL for this just 552 00:37:57,576 --> 00:38:01,716 because BART's API is already designed 553 00:38:02,176 --> 00:38:03,376 in the relational fashion. 554 00:38:03,676 --> 00:38:07,656 And I like to mimic this or mirror this on my end 555 00:38:07,656 --> 00:38:10,486 when I cache it so that I can later use this in a-- 556 00:38:10,786 --> 00:38:14,846 if I wanted to extend, for example, 557 00:38:14,846 --> 00:38:17,626 my program to do more sophisticated functions 558 00:38:17,776 --> 00:38:21,006 where there-- where joins are involved and so forth. 559 00:38:21,006 --> 00:38:25,956 It would be much easier than to say use an XML file 560 00:38:25,956 --> 00:38:27,796 or a CSV file. 561 00:38:28,256 --> 00:38:31,936 The next technology that's needed is HTML, obviously, 562 00:38:32,046 --> 00:38:34,136 to embed the Google map inside this. 563 00:38:35,176 --> 00:38:37,976 JavaScript will be needed for-- 564 00:38:37,976 --> 00:38:41,136 to communicate with this Google map, you will need JavaScript. 565 00:38:41,996 --> 00:38:45,596 You will download-- Once you include the JavaScript-- 566 00:38:46,186 --> 00:38:52,216 Google Maps API JavaScript code in your script tags, 567 00:38:52,216 --> 00:38:56,666 it will download all of that code to your page, to your DOM 568 00:38:57,146 --> 00:38:59,736 and will make the functions available for you to use. 569 00:39:00,646 --> 00:39:04,946 And you'll also need JavaScript to utilize AJAX, naturally. 570 00:39:06,016 --> 00:39:10,496 Lastly, you will probably need to use PHP 571 00:39:11,166 --> 00:39:15,566 to avoid the same origin policy. 572 00:39:16,126 --> 00:39:22,396 And to store the cache content to your server 573 00:39:22,526 --> 00:39:25,486 and to also load the cache content from your server. 574 00:39:29,856 --> 00:39:31,626 OK. So, what is the end product? 575 00:39:31,626 --> 00:39:32,566 What are we looking for here? 576 00:39:33,506 --> 00:39:37,006 The end product for this project is one HTML page 577 00:39:37,326 --> 00:39:38,556 that embeds a Google map. 578 00:39:38,556 --> 00:39:40,916 So, you'll see a big page with a map inside it. 579 00:39:41,566 --> 00:39:44,066 And under that map or somewhere around that map, there are-- 580 00:39:44,066 --> 00:39:47,376 will be HTML controls such as a dropdown menu, 581 00:39:47,376 --> 00:39:48,936 option boxes, et cetera. 582 00:39:49,666 --> 00:39:54,746 And these controls will be used to switch route views. 583 00:39:55,116 --> 00:39:57,246 So each time you select a different route, 584 00:39:57,246 --> 00:39:59,336 we should be able to see a new route laid 585 00:39:59,976 --> 00:40:03,976 out on the map, but one at a time. 586 00:40:04,426 --> 00:40:07,566 So we cannot-- we should not be able to see more 587 00:40:07,566 --> 00:40:11,026 than one route at a time. 588 00:40:11,236 --> 00:40:14,116 And each route will appear as a polyline which is a set 589 00:40:14,116 --> 00:40:17,396 of connected lines, so it will be like, it would be going 590 00:40:18,366 --> 00:40:22,326 in different directions at points. 591 00:40:22,476 --> 00:40:27,636 Each station that is represented on this line, on this polyline, 592 00:40:27,636 --> 00:40:30,556 so a route will naturally can be composed of stations 593 00:40:30,776 --> 00:40:34,976 and each station should appear as a marker 594 00:40:35,016 --> 00:40:38,146 on the map, a Google Maps marker. 595 00:40:39,186 --> 00:40:40,826 Upon clicking on the marker, 596 00:40:40,826 --> 00:40:45,376 the user will see real time arrival/departure information 597 00:40:45,766 --> 00:40:48,426 for the station that had-- in an info window. 598 00:40:49,106 --> 00:40:52,136 Now all these terms may not be familiar to you right now 599 00:40:52,136 --> 00:40:55,336 but when you go in and do a little bit of research 600 00:40:55,336 --> 00:40:58,306 in the Google Maps, JavaScript API v3, 601 00:40:58,306 --> 00:41:00,656 you will see what this all means. 602 00:41:01,436 --> 00:41:05,296 OK. The sequence in building this, how do we build this? 603 00:41:05,296 --> 00:41:06,026 What are the steps? 604 00:41:07,126 --> 00:41:10,946 The first step is for you to embed a centered Google map 605 00:41:10,946 --> 00:41:15,126 in an HTML page and make it centered to San Francisco. 606 00:41:15,736 --> 00:41:19,276 The second step which is not really a technical step is 607 00:41:19,526 --> 00:41:22,836 to confirm that you understand and are able to use markers, 608 00:41:23,096 --> 00:41:27,616 info windows, and polylines from the Google Maps API v3. 609 00:41:27,616 --> 00:41:32,256 Once you feel comfortable with these concepts and how 610 00:41:32,256 --> 00:41:33,446 to use them in a Google Maps, 611 00:41:33,446 --> 00:41:35,426 then you can move forward to the next step. 612 00:41:36,036 --> 00:41:38,226 The next step is also a conceptual one. 613 00:41:38,436 --> 00:41:42,026 You will need to identify what data you will need 614 00:41:42,116 --> 00:41:43,596 from BART's Real API. 615 00:41:44,876 --> 00:41:49,616 So what data will you need to get locally in order 616 00:41:49,616 --> 00:41:53,466 to accomplish a polyline and with a bunch of markers, 617 00:41:54,146 --> 00:41:54,906 what data would you need? 618 00:41:55,246 --> 00:41:58,696 Would you need the address, would you need the latitude, 619 00:41:58,936 --> 00:42:00,386 longitude coordinates? 620 00:42:01,346 --> 00:42:03,606 This will be determined 621 00:42:03,606 --> 00:42:07,136 by the actual objects you will be using in Google Maps. 622 00:42:07,596 --> 00:42:11,026 So by looking at what inputs the polylines would need 623 00:42:11,026 --> 00:42:13,036 and the markers, you will be able 624 00:42:13,036 --> 00:42:16,616 to determine what information you will need to get from BART. 625 00:42:18,306 --> 00:42:20,696 The third step is after you've identified what data you need, 626 00:42:20,696 --> 00:42:21,706 you actually to get the data. 627 00:42:21,706 --> 00:42:23,986 Now there are several ways of doing this. 628 00:42:24,296 --> 00:42:30,416 You can actually go in and copy the data locally in a CSV file 629 00:42:30,416 --> 00:42:33,896 or in MySQL database or you can create your own script, 630 00:42:34,006 --> 00:42:36,636 your own PHP script that will do this automatically for you. 631 00:42:37,166 --> 00:42:45,836 And the next step would be to build the HTML controls outside 632 00:42:45,836 --> 00:42:51,416 of the Google map inside that HTML page that you will develop. 633 00:42:51,416 --> 00:42:54,366 And each time those-- You will play around with those controls 634 00:42:54,366 --> 00:42:58,736 and each time those controls change they should trigger some 635 00:42:58,736 --> 00:43:00,376 sort of call to this server side 636 00:43:00,376 --> 00:43:06,686 and have the server output back the necessary information 637 00:43:06,686 --> 00:43:13,196 to accomplish polyline along with markers. 638 00:43:13,196 --> 00:43:16,786 Lastly, after the-- after you were able to get this far 639 00:43:16,866 --> 00:43:21,506 and you have a polyline out with the markers laid out, 640 00:43:22,186 --> 00:43:26,756 what you need to do next is have the markers become interactive. 641 00:43:26,986 --> 00:43:28,846 So that once you click on the marker 642 00:43:28,976 --> 00:43:32,126 for each station an info window will pop up, 643 00:43:32,126 --> 00:43:34,416 an info window looks like a little balloon. 644 00:43:35,676 --> 00:43:38,646 With the-- So it should pop up with information coming 645 00:43:39,036 --> 00:43:42,766 in real time from BART's Real API over the internet. 646 00:43:42,986 --> 00:43:44,876 So this is not-- The information that is coming 647 00:43:45,326 --> 00:43:50,446 through into the info window is real time information as opposed 648 00:43:50,446 --> 00:43:51,996 to the cache information that is coming 649 00:43:51,996 --> 00:43:55,646 into the polylines and the markers. 650 00:43:55,646 --> 00:44:00,706 So once you click on a certain marker, it should somehow send 651 00:44:00,906 --> 00:44:05,076 to the BART's Real API what station it needs 652 00:44:05,076 --> 00:44:06,416 information from. 653 00:44:06,516 --> 00:44:11,506 And then, the BART's API will send back that information, 654 00:44:11,966 --> 00:44:14,486 you will take that information using AJAX 655 00:44:14,836 --> 00:44:16,926 and output it inside the info window. 656 00:44:17,526 --> 00:44:18,936 Now the nice thing about info window is 657 00:44:18,936 --> 00:44:20,366 that they can support HTML. 658 00:44:20,626 --> 00:44:24,046 So you can make it look nice. 659 00:44:24,536 --> 00:44:28,586 OK, sample time. 660 00:44:29,546 --> 00:44:34,836 Now I will go ahead and touch 661 00:44:34,836 --> 00:44:38,936 on the different technologies needed to accomplish this. 662 00:44:39,506 --> 00:44:43,166 The rest will be up to you. 663 00:44:43,206 --> 00:44:46,216 I have created a very simple page called index.html. 664 00:44:53,996 --> 00:44:59,086 And-- So it starts off as an HTML5 document. 665 00:44:59,906 --> 00:45:02,446 It is not scalable. 666 00:45:02,516 --> 00:45:08,066 We are making it stay the same regardless 667 00:45:08,066 --> 00:45:09,156 of how we resize the window. 668 00:45:10,046 --> 00:45:19,946 And I would apply these style rules as I got them 669 00:45:19,946 --> 00:45:25,556 from the example set in Google Maps JavaScript API v3. 670 00:45:25,556 --> 00:45:29,356 And down here is my own rule for a div 671 00:45:30,256 --> 00:45:33,256 which will pertain to a select box. 672 00:45:36,876 --> 00:45:46,606 OK. So if you go to Google Maps API, it's a very comprehensive-- 673 00:45:46,806 --> 00:45:50,906 has a lot-- it has comprehensive documentation 674 00:45:51,346 --> 00:45:53,366 on pretty much everything that it supports. 675 00:45:54,766 --> 00:45:58,426 And Getting Started, clicking on, if you go into-- 676 00:45:58,426 --> 00:45:58,836 navigating 677 00:45:58,836 --> 00:46:04,866 to developers.google.com/ maps/documentation is a very 678 00:46:04,866 --> 00:46:08,056 good step for you to take. 679 00:46:08,356 --> 00:46:10,836 First thing you want to do is click on Getting Started 680 00:46:10,836 --> 00:46:16,636 and experiment on that a little bit with the main features. 681 00:46:16,636 --> 00:46:19,506 I don't think you will need an API Key for this. 682 00:46:24,256 --> 00:46:28,226 And on the left side here, you can see that you can click 683 00:46:28,266 --> 00:46:33,886 on the different aspects of this API. 684 00:46:35,246 --> 00:46:42,466 Over this will include markers, polylines and info windows 685 00:46:43,226 --> 00:46:44,966 which are three things that you will need 686 00:46:44,966 --> 00:46:47,846 to be using in this project. 687 00:46:48,766 --> 00:46:55,956 I don't you'll need to touch on the other things on this. 688 00:46:56,186 --> 00:46:56,496 All right. 689 00:46:56,496 --> 00:47:03,986 So let's go ahead and do something. 690 00:47:03,986 --> 00:47:07,616 Again, I borrowed this code from their API, from their example, 691 00:47:07,616 --> 00:47:13,676 so it should be hopefully as easy for you to do as well. 692 00:47:13,796 --> 00:47:17,056 First, I'm going to define a variable called map 693 00:47:17,286 --> 00:47:21,296 in which I will store the Google map object. 694 00:47:22,046 --> 00:47:24,896 And I will come back to the marker later. 695 00:47:26,176 --> 00:47:28,516 And I will create a function called initialize 696 00:47:29,616 --> 00:47:31,696 which just sets a map centered 697 00:47:33,086 --> 00:47:37,446 around San Francisco in my HTML page. 698 00:47:37,446 --> 00:47:42,946 Let me go through this function real quick. 699 00:47:44,646 --> 00:47:51,796 I first define the mapOptions in a JSON format, JSONObject. 700 00:47:52,406 --> 00:47:57,946 And this specifies-- this sort of acts like a constructor 701 00:47:58,116 --> 00:48:00,456 for the map object from Google. 702 00:48:02,066 --> 00:48:05,826 Here, what I'm specifying is that the map be centered 703 00:48:06,346 --> 00:48:10,486 to the following latitude, longitude coordinates. 704 00:48:11,276 --> 00:48:18,056 And this is done through by calling a new google.maps.LatLng 705 00:48:18,766 --> 00:48:21,166 object with these variables. 706 00:48:21,166 --> 00:48:23,806 So essentially this is-- the center here, 707 00:48:23,806 --> 00:48:29,666 this whole thing is looking for an object of LatLng 708 00:48:29,666 --> 00:48:31,436 and not just an actual set of numbers. 709 00:48:32,956 --> 00:48:36,526 Zoom will pertain to the level of zoom that we're going 710 00:48:36,526 --> 00:48:40,676 to be zooming into the map when we first load it. 711 00:48:41,266 --> 00:48:44,116 The mapType specifies what type of map we are going to see. 712 00:48:44,166 --> 00:48:48,466 Right now we are going to see a graphical map as opposed 713 00:48:48,466 --> 00:48:50,546 to a real aerial view. 714 00:48:51,566 --> 00:48:52,896 But you can change this here. 715 00:48:54,346 --> 00:48:58,276 So now that I have my options ready to go, 716 00:48:59,916 --> 00:49:02,466 I can create a new map. 717 00:49:02,826 --> 00:49:05,576 So I will set this map variable 718 00:49:06,626 --> 00:49:14,496 to contain a new google.maps.Map object and I will want this map 719 00:49:14,496 --> 00:49:16,866 to go into a div inside my page. 720 00:49:18,016 --> 00:49:22,046 The convention is to use a name like map_canvas. 721 00:49:22,046 --> 00:49:23,106 You can use any name you like. 722 00:49:23,826 --> 00:49:28,926 What this essentially does is it inserts the Google map inside 723 00:49:28,926 --> 00:49:34,086 this div element and comma and it will apply the-- 724 00:49:34,586 --> 00:49:37,066 the second parameter here is 725 00:49:37,066 --> 00:49:39,066 that we are applying the mapOptions 726 00:49:39,606 --> 00:49:41,626 to this newly created map. 727 00:49:41,626 --> 00:49:43,406 So it will be centered. 728 00:49:44,256 --> 00:49:45,526 It will be zoomed to 12. 729 00:49:45,596 --> 00:49:51,046 And it will utilize this kind of-- this type of map. 730 00:49:51,736 --> 00:49:54,776 And I could have done without the options but this is part 731 00:49:54,776 --> 00:49:57,096 of your requirement, to be zoomed in, I mean, 732 00:49:57,096 --> 00:49:59,726 to be centered to San Francisco. 733 00:50:01,046 --> 00:50:04,536 Let me show you where I define map_canvas. 734 00:50:04,876 --> 00:50:06,766 It's down at the very bottom. 735 00:50:07,346 --> 00:50:13,476 It is simply a div inside the body, right here. 736 00:50:13,896 --> 00:50:15,436 And it's called map_canvas. 737 00:50:15,506 --> 00:50:16,146 That's all it is. 738 00:50:16,146 --> 00:50:17,036 That's all there is to it. 739 00:50:17,616 --> 00:50:22,276 You define a div with an ID of whatever you specify 740 00:50:22,276 --> 00:50:29,786 and then you call in the-- in the initialize function, 741 00:50:30,356 --> 00:50:34,736 you create a new map object specifying 742 00:50:34,736 --> 00:50:38,946 that the new map object will go inside this map that-- 743 00:50:39,866 --> 00:50:42,556 in this div. 744 00:50:42,776 --> 00:50:45,986 I will go ahead and call the initialize function inside 745 00:50:47,916 --> 00:50:51,016 the onload. 746 00:50:51,666 --> 00:50:55,726 So what I should see happen here is-- 747 00:50:56,966 --> 00:51:00,826 well, right now my page is blank, not this one. 748 00:51:01,516 --> 00:51:12,786 [ Pause ] 749 00:51:13,286 --> 00:51:13,916 Reload this. 750 00:51:14,516 --> 00:51:21,766 [ Pause ] 751 00:51:22,266 --> 00:51:28,506 OK. So as you can see, I now have a map 752 00:51:29,376 --> 00:51:31,856 that is centered on San Francisco. 753 00:51:32,086 --> 00:51:34,346 It does not appear to be as such right now on the projector 754 00:51:34,346 --> 00:51:36,266 but it is in fact centered there. 755 00:51:36,266 --> 00:51:48,216 The next step that I would like to do is to create a polyline. 756 00:51:48,906 --> 00:51:53,746 A polyline is a set of-- is a path of different-- 757 00:51:55,566 --> 00:52:00,146 is a path that is created 758 00:52:00,146 --> 00:52:03,326 by following different points on the map. 759 00:52:04,846 --> 00:52:08,846 And in order to accomplish this I have to first define an array 760 00:52:08,846 --> 00:52:11,976 of different points on the map and I do this 761 00:52:12,026 --> 00:52:16,116 by defining an array that contains polyline-- 762 00:52:16,396 --> 00:52:22,086 by defining an array that contains LatLng objects. 763 00:52:22,506 --> 00:52:28,236 So what I've done here is I've created a variable called 764 00:52:28,236 --> 00:52:32,416 polylineCoordinates and inside it I have defined three 765 00:52:32,416 --> 00:52:39,766 different LatLng objects in that order. 766 00:52:39,766 --> 00:52:43,526 So, when I form the polyline, it will first look for this point, 767 00:52:43,526 --> 00:52:45,476 I will connect it with this point, 768 00:52:45,476 --> 00:52:46,776 and it will connect into that point. 769 00:52:47,836 --> 00:52:49,066 So depending on the order-- 770 00:52:49,066 --> 00:52:52,066 The order of these three will make a difference, 771 00:52:52,436 --> 00:52:53,646 just remember that. 772 00:52:55,106 --> 00:52:59,066 Next, I will define a variable called polylinePath 773 00:52:59,676 --> 00:53:04,886 and this is the actual polyline itself, the polyline object. 774 00:53:05,776 --> 00:53:10,196 I do this by creating a new google.maps.Polyline object 775 00:53:10,196 --> 00:53:14,216 constructor and the first attribute 776 00:53:14,216 --> 00:53:16,606 that I specify here is path. 777 00:53:17,246 --> 00:53:21,736 And path will point to an array of LatLng objects. 778 00:53:22,526 --> 00:53:25,066 In our case it is called polylineCoordinates 779 00:53:25,066 --> 00:53:26,656 which I have defined up here. 780 00:53:27,206 --> 00:53:33,046 So this is the main-- this is the heart 781 00:53:33,046 --> 00:53:35,036 of the polyline, the actual path. 782 00:53:35,336 --> 00:53:38,386 Now these other attributes, I think you can leave them out. 783 00:53:39,276 --> 00:53:42,956 strokeColor refers to the color of that line 784 00:53:43,956 --> 00:53:47,196 and I've specified it to be here #FF0000 which is red. 785 00:53:48,206 --> 00:53:51,806 strokeOpacity is how opaque the line will be, 786 00:53:51,806 --> 00:53:53,966 I think this value ranges from 0 to 1. 787 00:53:54,406 --> 00:53:58,836 And strokeWeight is how bold the line will be, 788 00:53:58,836 --> 00:54:00,506 how thick it will be. 789 00:54:01,056 --> 00:54:05,216 Once I've done all this, once I've completed this, 790 00:54:05,706 --> 00:54:09,856 I need to lay it out on the actual map. 791 00:54:10,576 --> 00:54:11,766 And this is how I do this. 792 00:54:12,446 --> 00:54:18,686 I call the setMap function on the polylinePath object, 793 00:54:18,686 --> 00:54:22,626 on the polyline object and I specify 794 00:54:22,626 --> 00:54:26,256 in parenthesis what map I want this to go on. 795 00:54:28,176 --> 00:54:30,236 So let me go ahead actually call this function. 796 00:54:31,696 --> 00:54:35,856 After initialize, I'm going to call addPolyline. 797 00:54:36,656 --> 00:54:38,736 Let's see what happens. 798 00:54:39,226 --> 00:54:44,256 This is the wrong file. 799 00:54:44,476 --> 00:54:47,966 OK. I want to do an F5 here. 800 00:54:48,586 --> 00:54:52,536 And as you can see there's a newly formed red line going 801 00:54:52,536 --> 00:54:54,016 from San Francisco to somewhere. 802 00:54:54,596 --> 00:54:56,066 I randomly chose these points 803 00:54:57,466 --> 00:54:59,626 because they were visually there on the map. 804 00:55:00,156 --> 00:55:02,706 But this is an actual, very simplistic polyline, 805 00:55:03,946 --> 00:55:06,086 and minimal polyline to see because it's only two lines. 806 00:55:06,356 --> 00:55:08,136 If it were one it would be just a line. 807 00:55:08,646 --> 00:55:16,026 So the way we hope to see the routes, the BART routes 808 00:55:16,026 --> 00:55:18,106 on the map is through polylines. 809 00:55:18,106 --> 00:55:21,506 So we want to see, let's say-- If you look at any metro map, 810 00:55:21,986 --> 00:55:27,016 you will see a bunch of lines denoted in different colors. 811 00:55:27,586 --> 00:55:31,006 So this is a very simplistic example. 812 00:55:31,086 --> 00:55:33,746 But once, let's say, I have a set of controls here, 813 00:55:33,746 --> 00:55:37,416 like a select box or something, I can select a certain route 814 00:55:37,416 --> 00:55:40,376 and it will display the route here. 815 00:55:40,376 --> 00:55:44,266 Now the information, the actual array that will-- 816 00:55:45,206 --> 00:55:48,736 the actual coordinates will come from the cache 817 00:55:48,736 --> 00:55:52,676 that you have already created on your end. 818 00:55:57,136 --> 00:55:59,646 OK. Next up is I would like to create a marker. 819 00:55:59,986 --> 00:56:01,346 I would like to show you what a marker looks 820 00:56:01,346 --> 00:56:03,556 like in Google Maps. 821 00:56:04,236 --> 00:56:11,386 This is also a very simple thing to do. 822 00:56:11,976 --> 00:56:17,416 You specify a variable and you call the new google.maps.Marker 823 00:56:18,636 --> 00:56:24,756 object constructor and this will take a value, 824 00:56:24,756 --> 00:56:26,616 a JSONObject inside. 825 00:56:27,426 --> 00:56:30,146 It specifies one of the attributes' positions. 826 00:56:30,146 --> 00:56:31,746 So you need to know where this will go. 827 00:56:31,746 --> 00:56:38,756 Again, position will take a LatLng object as its value. 828 00:56:40,056 --> 00:56:41,416 And next is the title. 829 00:56:41,416 --> 00:56:43,366 The title, I don't think it's necessary 830 00:56:43,366 --> 00:56:46,496 but this is what will appear once you hover over the marker. 831 00:56:47,026 --> 00:56:50,956 And I'm sure there are more attributes to this. 832 00:56:51,286 --> 00:56:54,106 Oh, lastly, you will use the same fashion 833 00:56:54,836 --> 00:56:56,316 to display these on the map. 834 00:56:56,816 --> 00:57:00,236 You will call the setMap method on the marker object 835 00:57:00,566 --> 00:57:03,156 and you will specify what map it should correspond to. 836 00:57:03,656 --> 00:57:05,866 In this case, it's map because I have already defined 837 00:57:05,866 --> 00:57:06,956 that map up here. 838 00:57:08,246 --> 00:57:08,556 Where is it? 839 00:57:09,026 --> 00:57:11,316 This is the global variable map to this page. 840 00:57:11,976 --> 00:57:13,716 I have defined it in initialize 841 00:57:14,676 --> 00:57:18,996 to hold a map object, so just a recap. 842 00:57:19,986 --> 00:57:24,026 So I will call now addMarker and these are the coordinates 843 00:57:24,026 --> 00:57:34,246 of San Francisco, addMarker. 844 00:57:34,636 --> 00:57:40,686 Let me go ahead and refresh this page. 845 00:57:41,566 --> 00:57:46,636 And I do in fact see a marker, here. 846 00:57:47,306 --> 00:57:51,336 And if I ever hover over it, it should say, "I am a marker!" 847 00:57:51,496 --> 00:57:53,836 which is what I gave it for a title. 848 00:57:55,116 --> 00:57:57,286 Now if I click here, nothing happens. 849 00:57:59,156 --> 00:58:03,196 So if this were to be your project you would get downgraded 850 00:58:03,366 --> 00:58:07,136 because what needs to happen here is as soon as I click 851 00:58:07,136 --> 00:58:09,476 on this station, an info window should pop 852 00:58:09,476 --> 00:58:15,176 up specifying the real time arrival and departure, yes, 853 00:58:15,176 --> 00:58:18,036 the real time arrival and departure times. 854 00:58:23,776 --> 00:58:27,726 On to the last thing which is info window, 855 00:58:29,146 --> 00:58:31,246 I've created a function called addInfoWindow. 856 00:58:31,536 --> 00:58:34,856 InfoWindow is also an object in google.maps 857 00:58:34,856 --> 00:58:39,416 and that google.maps-- Google JavaScript API library. 858 00:58:39,996 --> 00:58:42,856 And this is how you typically create one. 859 00:58:44,086 --> 00:58:48,926 Again, a variable and you create a InfoWindow object. 860 00:58:49,626 --> 00:58:52,156 And these are the parameters it needs, content, 861 00:58:52,286 --> 00:58:53,316 what it is going to say. 862 00:58:53,526 --> 00:58:54,706 Here I can put HTML. 863 00:58:54,706 --> 00:58:57,646 I'll show you a little later what I can do with this. 864 00:58:58,576 --> 00:59:05,136 And the position of it-- sorry, excuse me. 865 00:59:05,786 --> 00:59:12,286 So the position will take a LatLng object 866 00:59:12,846 --> 00:59:16,306 and I'm going to remove this code. 867 00:59:17,706 --> 00:59:23,316 Unlike the polyline and the marker, 868 00:59:24,046 --> 00:59:25,806 info window is displayed in a different way. 869 00:59:26,446 --> 00:59:28,296 You actually have to say info-- 870 00:59:28,436 --> 00:59:32,106 call the infowindow and then call a .open method. 871 00:59:32,646 --> 00:59:36,636 Now notice I have specified where it's going to appear 872 00:59:36,636 --> 00:59:37,806 on the page-- on the map. 873 00:59:37,806 --> 00:59:40,386 I don't know what these coordinates stand for, I mean, 874 00:59:40,386 --> 00:59:44,426 where they point to but let's find out. 875 00:59:46,276 --> 00:59:47,886 So we'll do addInfoWindow. 876 00:59:52,956 --> 00:59:54,496 And then I click on F5. 877 00:59:55,516 --> 01:00:06,776 [ Pause ] 878 01:00:07,276 --> 01:00:12,786 Let's see where I did wrong here. 879 01:00:12,786 --> 01:00:13,096 All right. 880 01:00:13,636 --> 01:00:17,576 OK. So it calls the open method 881 01:00:17,576 --> 01:00:24,766 but we didn't specify what map it's going to open on. 882 01:00:25,196 --> 01:00:27,396 So we have to put this, I'm sorry. 883 01:00:28,016 --> 01:00:39,556 OK. I want to press F5 now and I should see-- still didn't work? 884 01:00:39,766 --> 01:00:49,556 infowindow.open, let's just try one thing here. 885 01:00:50,516 --> 01:01:24,166 [ Pause ] 886 01:01:24,666 --> 01:01:26,956 In the console, see if there are any errors. 887 01:01:29,076 --> 01:01:32,606 No errors. 888 01:01:33,516 --> 01:01:53,966 [ Pause ] 889 01:01:54,466 --> 01:01:56,886 Let's look at the documentation just to confirm. 890 01:01:57,236 --> 01:02:00,016 So this is what you would do if you were at home 891 01:02:00,866 --> 01:02:01,786 and trying to make this work. 892 01:02:02,966 --> 01:02:04,976 Let's first look at this documentation online. 893 01:02:05,516 --> 01:02:12,386 [ Pause ] 894 01:02:12,886 --> 01:02:16,046 So infowindow.open map.marker. 895 01:02:17,516 --> 01:02:34,506 [ Pause ] 896 01:02:35,006 --> 01:02:37,756 OK. What should happen is the first time 897 01:02:37,756 --> 01:02:46,026 around when I call info window.open 898 01:02:46,406 --> 01:02:49,826 and put the map parameter in. 899 01:02:51,226 --> 01:02:52,326 OK. You know what? 900 01:02:52,726 --> 01:02:53,476 Here's where I did wrong. 901 01:02:53,606 --> 01:02:55,946 I did not call the actual method. 902 01:02:56,936 --> 01:03:01,196 addInfoWindow because everything else look correct. 903 01:03:03,396 --> 01:03:06,036 What a nice waste of time. 904 01:03:06,306 --> 01:03:10,016 OK. So what happens now is I see an info window 905 01:03:10,596 --> 01:03:14,576 with a nice shadow over this area come up. 906 01:03:15,516 --> 01:03:18,946 Now, what if I wanted connect this to the marker? 907 01:03:19,566 --> 01:03:25,496 Notice how I gave the marker has a different set of latitude 908 01:03:25,576 --> 01:03:29,636 and longitude coordinates than does the info window. 909 01:03:29,636 --> 01:03:33,026 But what if I want to put this on top of that exactly? 910 01:03:33,846 --> 01:03:36,726 Here's what I can do. 911 01:03:36,976 --> 01:03:38,496 Here is where I can put these codes. 912 01:03:39,126 --> 01:03:44,956 I can add an event listener to the marker such that 913 01:03:44,956 --> 01:03:47,876 when you click on the marker it will call an anonymous function 914 01:03:49,026 --> 01:03:52,026 and then the info window will open on the map 915 01:03:52,446 --> 01:03:54,326 and at the specified marker. 916 01:03:55,416 --> 01:03:56,716 Now where is marker defined? 917 01:03:58,246 --> 01:04:00,446 And this is where-- this is why I needed 918 01:04:00,446 --> 01:04:03,536 to actually create the marker variable on top. 919 01:04:04,026 --> 01:04:06,306 So-- Because once I created the marker 920 01:04:06,306 --> 01:04:09,286 and addMarker had I not created-- 921 01:04:09,286 --> 01:04:12,256 had I not defined it on top, it would not have been accessible 922 01:04:12,296 --> 01:04:14,166 to the addInfoWindow function. 923 01:04:14,656 --> 01:04:18,046 But now that I've created it here, I mean on top, 924 01:04:18,406 --> 01:04:21,636 defined it in addMarker, it is available for the rest 925 01:04:21,636 --> 01:04:22,786 of the functions to use. 926 01:04:24,076 --> 01:04:31,256 And my info window should now-- OK, one thing to know here is 927 01:04:31,256 --> 01:04:35,026 that the default coordinates for the info window is this. 928 01:04:35,476 --> 01:04:39,226 Once you add it to a marker, the latitude 929 01:04:39,226 --> 01:04:43,226 and longitude coordinates will override the default coordinates 930 01:04:43,226 --> 01:04:43,996 for that info window. 931 01:04:44,636 --> 01:04:47,166 So this whole thing will no longer apply. 932 01:04:47,666 --> 01:04:51,496 OK, let's test it out. 933 01:04:53,126 --> 01:04:58,136 F5. OK, there's no info window, disappeared. 934 01:04:59,036 --> 01:05:01,266 If I hover over, "I'm a marker!" 935 01:05:01,606 --> 01:05:03,576 If I click on this, there's the info window. 936 01:05:04,356 --> 01:05:07,546 And this is where the real time arrival 937 01:05:07,766 --> 01:05:11,466 and departure time should appear for the different trains coming 938 01:05:11,466 --> 01:05:13,886 and going from this station. 939 01:05:17,876 --> 01:05:20,476 Remember that this can support HTML 940 01:05:20,476 --> 01:05:31,396 so I can put something like,

941 01:05:31,896 --> 01:05:36,246 and call this, thank you genie. 942 01:05:37,156 --> 01:05:40,106 OK. That's it. 943 01:05:40,686 --> 01:05:47,756 If I refresh this without closing and I click 944 01:05:47,756 --> 01:05:50,926 on the info-- on the marker, I should see this is 945 01:05:51,676 --> 01:06:00,566 in blue and in h1 font. 946 01:06:01,086 --> 01:06:04,906 OK. OK, any questions? 947 01:06:04,956 --> 01:06:06,306 This pretty much covers-- 948 01:06:07,156 --> 01:06:13,666 I think it touches on the most important aspects of project 2. 949 01:06:14,286 --> 01:06:16,766 Any question at all? 950 01:06:17,136 --> 01:06:18,006 Is everything really clear? 951 01:06:18,006 --> 01:06:18,106 Yes. 952 01:06:19,086 --> 01:06:21,116 >> Can you explain a little bit about the cache? 953 01:06:21,786 --> 01:06:22,886 >> Oh yeah, sure absolutely. 954 01:06:23,646 --> 01:06:25,216 >> What was the question? 955 01:06:25,626 --> 01:06:26,226 >> Oh, the question. 956 01:06:26,896 --> 01:06:31,046 Can you explain the mechanism of the cache and how will it work. 957 01:06:31,646 --> 01:06:33,326 So the cache. 958 01:06:34,246 --> 01:06:37,546 The BART, their API has a set of-- 959 01:06:38,366 --> 01:06:42,286 let me show you what it looks like, first of all. 960 01:06:43,266 --> 01:06:48,926 So if you look at BART's documentation, their API. 961 01:06:49,536 --> 01:06:54,056 If I click on, for example, Route Information, OK, 962 01:06:54,786 --> 01:07:00,046 and if I click on routes, it will respond back 963 01:07:00,046 --> 01:07:03,096 with an XML structure of their routes and so forth. 964 01:07:03,796 --> 01:07:06,646 And down here is a sample of what you will get back 965 01:07:06,936 --> 01:07:12,066 as a response from this-- from their servers, OK? 966 01:07:12,426 --> 01:07:14,106 So you will need to take this information 967 01:07:14,966 --> 01:07:17,546 from BART's Real API, whatever they're sending back. 968 01:07:19,166 --> 01:07:20,536 Now, notice that there are 969 01:07:20,536 --> 01:07:22,006 so many different pieces of information here. 970 01:07:22,446 --> 01:07:23,656 You will need to take the information, 971 01:07:23,716 --> 01:07:26,736 parse out the information that you need and save it locally 972 01:07:26,736 --> 01:07:28,976 in some logical structure, OK? 973 01:07:30,016 --> 01:07:33,636 So what kind of information do you think you would need 974 01:07:33,706 --> 01:07:34,816 from BART? 975 01:07:35,376 --> 01:07:36,886 There are so many things that you can get from there. 976 01:07:37,216 --> 01:07:39,866 You can't get through it unless you can get route info, 977 01:07:39,866 --> 01:07:41,846 advisories and so forth. 978 01:07:42,556 --> 01:07:45,366 What-- The answer to this is you will need 979 01:07:45,366 --> 01:07:47,506 to get just enough information 980 01:07:47,996 --> 01:07:51,556 to accomplish the polylines and the markers. 981 01:07:55,286 --> 01:07:58,726 And in fact, there is a way we can test this out here. 982 01:07:59,026 --> 01:08:00,506 Let's see if I can find it. 983 01:08:02,376 --> 01:08:05,076 There's a place on the left side that says examples or-- 984 01:08:05,656 --> 01:08:10,606 you can actually click on this. 985 01:08:11,516 --> 01:08:21,046 [ Pause ] 986 01:08:21,546 --> 01:08:22,406 Maybe under Overview. 987 01:08:22,986 --> 01:08:29,136 Route Information, Examples, here we go. 988 01:08:29,356 --> 01:08:36,176 So examples, let's click on-- there we go. 989 01:08:36,176 --> 01:08:36,696 You see this? 990 01:08:37,356 --> 01:08:41,026 This is what I'm getting back from their API. 991 01:08:41,726 --> 01:08:46,136 And you will need to do such a thing 992 01:08:46,136 --> 01:08:48,536 in two parts of this project. 993 01:08:48,966 --> 01:08:51,006 First part is when you get the information to cache. 994 01:08:51,436 --> 01:08:53,926 The second part is where you will be asking it to-- 995 01:08:54,616 --> 01:08:56,656 asking for the real time arrivals 996 01:08:57,196 --> 01:08:58,346 and departures information. 997 01:08:58,946 --> 01:09:02,576 And there are two ways 998 01:09:02,666 --> 01:09:06,406 to get the real time arrivals and departures. 999 01:09:06,406 --> 01:09:07,546 There's a simple ETA feed. 1000 01:09:07,616 --> 01:09:11,826 It's somewhere on their site and there's also the-- 1001 01:09:11,956 --> 01:09:14,426 you can use the Real BART API 1002 01:09:14,906 --> 01:09:17,586 to get the real time-- those figures. 1003 01:09:17,586 --> 01:09:21,106 I don't know if I've answered your question but did it-- 1004 01:09:21,396 --> 01:09:22,326 did the cache make sense? 1005 01:09:22,326 --> 01:09:23,806 Or do you want me to go to more detail? 1006 01:09:23,806 --> 01:09:24,026 >> Yeah, it has. 1007 01:09:24,636 --> 01:09:24,796 Thanks. 1008 01:09:25,356 --> 01:09:26,836 >> Do you want me to go into more detail on how 1009 01:09:26,836 --> 01:09:29,666 to store the cache or how to store the information? 1010 01:09:30,136 --> 01:09:31,276 >> Yeah, yeah, get on. 1011 01:09:31,436 --> 01:09:33,226 >> So you're making a call to the-- 1012 01:09:33,226 --> 01:09:35,816 to the Real Bart API first, right? 1013 01:09:36,426 --> 01:09:38,826 You're getting the information that you need to-- 1014 01:09:39,256 --> 01:09:41,976 you're getting all the information about the routes, 1015 01:09:41,976 --> 01:09:45,146 their locations, all the stations, their locations, 1016 01:09:45,186 --> 01:09:46,306 the different routes and so forth. 1017 01:09:46,926 --> 01:09:48,696 And this would be up to you to decide how 1018 01:09:48,696 --> 01:09:52,096 to put everything conceptually on your end. 1019 01:09:52,906 --> 01:09:55,616 Now, locally, what you do is you make the call. 1020 01:09:55,616 --> 01:09:58,316 You can actually-- You can take the values and copy them 1021 01:09:58,316 --> 01:09:59,916 and paste them, but that's a lot of work. 1022 01:10:00,516 --> 01:10:04,636 Or you can create a script, a PHP script that will go out 1023 01:10:05,356 --> 01:10:07,406 and pull all this information locally. 1024 01:10:07,506 --> 01:10:11,386 You can store it in an XML file, you can store it in JSON-- 1025 01:10:11,386 --> 01:10:13,746 CSV file, and so forth. 1026 01:10:14,556 --> 01:10:18,446 I recommend that you use a MySQL database to store it locally. 1027 01:10:18,446 --> 01:10:24,656 Because it's, as I mentioned earlier, it will have-- it has-- 1028 01:10:25,016 --> 01:10:27,276 their API already has a relational structure. 1029 01:10:27,336 --> 01:10:29,466 So it's much easier to manipulate later. 1030 01:10:30,426 --> 01:10:31,916 So you'll start in a bunch of, let's say, 1031 01:10:31,916 --> 01:10:35,306 tables or files and so forth. 1032 01:10:35,856 --> 01:10:38,726 Then you will store in a way that you understand 1033 01:10:39,426 --> 01:10:41,596 and that you were able to extract from later 1034 01:10:42,366 --> 01:10:45,426 to accomplish the polylines and the markers. 1035 01:10:50,636 --> 01:10:52,176 >> But the-- How is your time on the arrival time? 1036 01:10:53,376 --> 01:10:54,336 They are-- They keep changing, right? 1037 01:10:54,656 --> 01:10:56,116 So those, you should get real time. 1038 01:10:56,116 --> 01:10:59,096 >> Yes, the depart-- So the question is-- 1039 01:10:59,096 --> 01:11:01,806 the suggestion was that they keep changing, the departure 1040 01:11:01,806 --> 01:11:02,996 and arrival times keep changing. 1041 01:11:03,906 --> 01:11:05,946 Yes, those will be called in real time. 1042 01:11:06,186 --> 01:11:09,766 So when you click on that marker, a real time request, 1043 01:11:09,766 --> 01:11:13,836 a request, let's say a POST or a GET will go to the server, 1044 01:11:13,836 --> 01:11:20,536 to their server and it will receive the XML response. 1045 01:11:21,036 --> 01:11:24,226 And then you will parse the XML response and we'll throw it 1046 01:11:24,226 --> 01:11:26,196 into that info window before it is being displayed. 1047 01:11:26,196 --> 01:11:28,186 Does that make sense? 1048 01:11:28,366 --> 01:11:29,126 >> Yeah, thank you. 1049 01:11:29,166 --> 01:11:31,096 >> But in doing so and this-- 1050 01:11:31,466 --> 01:11:33,026 for this part there are two ways to do it. 1051 01:11:33,026 --> 01:11:36,446 There are two-- BART has two ways 1052 01:11:36,446 --> 01:11:38,696 to feed you this information. 1053 01:11:39,056 --> 01:11:40,586 One is to throw their Real BART API 1054 01:11:40,586 --> 01:11:44,536 and the other one is called a simple ETA feeds. 1055 01:11:44,986 --> 01:11:46,346 You could look for that online. 1056 01:11:47,446 --> 01:11:51,806 I personally use the Real BART API. 1057 01:11:52,056 --> 01:11:52,926 Any other questions? 1058 01:11:52,926 --> 01:11:54,966 Is everything pretty much clear? 1059 01:11:55,546 --> 01:12:02,046 Yes? Has it been over an hour? 1060 01:12:03,456 --> 01:12:03,906 Yes. Sorry. 1061 01:12:04,166 --> 01:12:08,026 OK. Then, I guess, we can conclude this session. 1062 01:12:08,996 --> 01:12:13,376 I hope I touched on the important parts of AJAX 1063 01:12:13,826 --> 01:12:15,706 and the walkthrough for project 2. 1064 01:12:16,746 --> 01:12:17,816 If you have any questions, 1065 01:12:17,816 --> 01:12:20,256 feel free to use the discussion board. 1066 01:12:21,106 --> 01:12:25,246 And after class, Chris Gerber will be handling 1067 01:12:26,156 --> 01:12:28,766 on campus office hours and at 9 p.m., 1068 01:12:28,766 --> 01:12:33,786 I will be holding a session for online office hours 1069 01:12:34,496 --> 01:12:38,056 on TeamViewer and the information is provided to you 1070 01:12:38,826 --> 01:12:41,606 on the course's website under the Google Calendar. 1071 01:12:42,256 --> 01:12:45,616 There's the TeamViewer ID and so forth, 1072 01:12:45,746 --> 01:12:47,346 everything that you need to connect to that. 1073 01:12:48,506 --> 01:12:51,886 So thank you everyone and good luck on project-- 1074 01:12:52,006 --> 01:12:53,806 both projects 1 and 2. 1075 01:12:54,996 --> 01:12:56,356 Let us know if you have any questions. 1076 01:12:59,516 --> 01:13:02,946 [ Applause ] 1077 01:13:03,446 --> 01:13:09,816 The clap always makes me laugh, you know? 1078 01:13:11,516 --> 01:13:17,740 [ Silence ]