1 00:00:09,336 --> 00:00:13,756 >> This is the CS 50, and the end of Week Eight. 2 00:00:13,816 --> 00:00:16,676 So just a couple of quick FYI's. 3 00:00:16,676 --> 00:00:19,816 As announced on Monday this is now final project season 4 00:00:19,816 --> 00:00:21,716 where you start thinking about what you would like to do 5 00:00:21,716 --> 00:00:23,486 for your own final project, 6 00:00:23,486 --> 00:00:26,076 as part of that process there's a preproposal due in a couple 7 00:00:26,076 --> 00:00:29,396 of weeks, and this really is as simple as sending an e-mail 8 00:00:29,396 --> 00:00:32,426 to your TF and just bouncing ideas off of him or her. 9 00:00:32,426 --> 00:00:34,946 Do look through the PDF that's posted on the course's homepage 10 00:00:34,946 --> 00:00:37,816 as to the particulars, but this is really just an opportunity 11 00:00:37,816 --> 00:00:40,156 to start thinking about what you might want to do. 12 00:00:40,416 --> 00:00:42,526 Seminars too, the schedule is in the process 13 00:00:42,526 --> 00:00:43,386 of being put together. 14 00:00:43,386 --> 00:00:44,776 And if you would like to register for any 15 00:00:44,776 --> 00:00:47,426 of the seminars the link is on the course homepage, 16 00:00:47,426 --> 00:00:50,146 by all means feel free to do so. 17 00:00:50,486 --> 00:00:51,596 They will all be filmed. 18 00:00:51,596 --> 00:00:55,136 And then a word on APIs because this is an acronym you'll see 19 00:00:55,616 --> 00:00:57,796 in the PDF of the final project specification, 20 00:00:57,796 --> 00:00:59,436 and we'll come back to the this in the next couple of weeks 21 00:00:59,436 --> 00:01:00,806 in the context of web programming. 22 00:01:01,136 --> 00:01:02,886 But an API is just an Application 23 00:01:03,206 --> 00:01:04,526 Programming Interface. 24 00:01:04,586 --> 00:01:08,636 We mention this very early in the semester as the name given 25 00:01:08,636 --> 00:01:11,906 to code and data sets that other people, 26 00:01:11,996 --> 00:01:14,386 generally on the internet these days, make available for people 27 00:01:14,386 --> 00:01:15,716 like us to integrate with. 28 00:01:15,756 --> 00:01:18,276 Case in point, if you've used CS 50's course shopping tool, 29 00:01:18,606 --> 00:01:20,366 Harvard courses, then you've logged 30 00:01:20,366 --> 00:01:22,346 into that site most likely with Facebook. 31 00:01:22,346 --> 00:01:25,626 And that's thanks to the Facebook API for authentication. 32 00:01:25,626 --> 00:01:28,676 There's a similar API for the like button, there are APIs 33 00:01:28,676 --> 00:01:31,686 with which you can automatically send e-mails or text messages, 34 00:01:31,986 --> 00:01:34,276 with which you can access dining hall menus, 35 00:01:34,276 --> 00:01:35,476 shuttle schedules and the like. 36 00:01:35,736 --> 00:01:37,306 So realize that URL, even 37 00:01:37,306 --> 00:01:40,966 if the technicalities don't make a good amount of sense just yet, 38 00:01:41,046 --> 00:01:42,356 know that they soon will. 39 00:01:42,746 --> 00:01:46,496 So on Problem Set Five we asked you to critique some piece 40 00:01:46,496 --> 00:01:49,396 of hardware or software, or generally a user interface, 41 00:01:49,396 --> 00:01:51,266 whether on campus or beyond. 42 00:01:51,266 --> 00:01:53,866 You all had a lot of critiques. 43 00:01:54,126 --> 00:01:55,656 Shall we say, a lot to say. 44 00:01:55,926 --> 00:01:57,756 We thought we'd excerpt just a couple of them. 45 00:01:57,756 --> 00:02:00,556 One of my favorites was this one. 46 00:02:00,706 --> 00:02:05,006 If only because 618 people would disagree. 47 00:02:05,776 --> 00:02:08,336 So that's the stack of papers there. 48 00:02:08,336 --> 00:02:09,116 But some of them were -- 49 00:02:09,116 --> 00:02:11,226 actually, almost all of them were quite thoughtful 50 00:02:11,226 --> 00:02:12,236 and actually quite detailed. 51 00:02:12,236 --> 00:02:14,876 And know already they have been escalated up to the powers 52 00:02:14,876 --> 00:02:18,116 that be that hopefully we as a class can chip away at any 53 00:02:18,116 --> 00:02:20,316 of the concerns you've had with poor design. 54 00:02:20,616 --> 00:02:24,526 So one of the most polite ones we got too, was this one. 55 00:02:24,526 --> 00:02:25,236 Which I enjoyed. 56 00:02:26,646 --> 00:02:31,876 No one else really sort of qualified their thoughts 57 00:02:31,876 --> 00:02:34,316 with such respect as this one here. 58 00:02:34,816 --> 00:02:36,656 But it was nice, very gentle one. 59 00:02:36,656 --> 00:02:40,146 Another favorite of mine critiqued the elevator 60 00:02:40,226 --> 00:02:43,086 in Matherhouse which apparently when you take it 61 00:02:43,086 --> 00:02:46,226 up from first floor to top floor it just then stays there. 62 00:02:46,226 --> 00:02:48,516 And apparently no one ever takes the elevator down. 63 00:02:48,516 --> 00:02:50,876 So the side effect of this behavior is 64 00:02:50,876 --> 00:02:53,476 that the elevator always stays on the fourth floor by default. 65 00:02:53,476 --> 00:02:55,536 So you always have to wait for it on the first floor. 66 00:02:55,536 --> 00:02:57,976 So very apt commentary there. 67 00:02:58,226 --> 00:03:00,366 This one too was one of my favorite critiques. 68 00:03:00,476 --> 00:03:03,926 This student has trouble turning on the TV 69 00:03:03,926 --> 00:03:05,156 in the Kennedy Common Room. 70 00:03:07,566 --> 00:03:09,956 But in fairness, if you do read 71 00:03:09,956 --> 00:03:12,786 on their critique is quite justified. 72 00:03:12,926 --> 00:03:15,306 I'll wave my hand at the particulars here. 73 00:03:15,306 --> 00:03:17,036 But it sounds like there's a whole lot of buttons 74 00:03:17,036 --> 00:03:19,906 and a whole lot of unnecessary complexity simply 75 00:03:19,906 --> 00:03:22,426 to watch a show that you would like. 76 00:03:22,596 --> 00:03:25,706 And one of the reoccurring themes related 77 00:03:25,706 --> 00:03:29,306 to CS 50 actually related to the CS 50 appliance. 78 00:03:29,496 --> 00:03:30,716 You know by default when you put 79 00:03:30,716 --> 00:03:32,486 up the appliance the window is actually deliberately 80 00:03:32,486 --> 00:03:33,196 rather small. 81 00:03:33,196 --> 00:03:34,606 The idea being that this way it works 82 00:03:34,606 --> 00:03:37,166 on anyone's laptop these days with high probability. 83 00:03:37,356 --> 00:03:39,016 But you can actually enlarge the screen. 84 00:03:39,016 --> 00:03:40,176 Just clicking the little button 85 00:03:40,176 --> 00:03:42,056 in the top right corner is not sufficient, though, 86 00:03:42,336 --> 00:03:44,996 because the appliance is running its own operating system, 87 00:03:44,996 --> 00:03:48,206 and technically that operating system by default doesn't know 88 00:03:48,206 --> 00:03:50,296 that it's inside of a virtual machine, LINUX. 89 00:03:50,296 --> 00:03:53,446 Fedora LINUX just assumes that it's running 90 00:03:53,446 --> 00:03:54,726 on a piece of bare metal. 91 00:03:54,926 --> 00:03:58,476 So for it to take advantage of your full screen 92 00:03:58,476 --> 00:04:00,196 and something called your graphics card 93 00:04:00,196 --> 00:04:03,526 or your video driver you have to kind of train the appliance 94 00:04:03,526 --> 00:04:06,546 to know a little something about your Mac or PC or LINUX box. 95 00:04:06,836 --> 00:04:10,496 And the trick for doing so is something called guest edition. 96 00:04:10,496 --> 00:04:12,856 So guest editions are software for free that come 97 00:04:12,856 --> 00:04:16,076 with virtual box that you can install inside of the appliance 98 00:04:16,076 --> 00:04:18,546 and once you do and restart the appliance just once, 99 00:04:18,816 --> 00:04:20,726 then it will fill the screen just 100 00:04:20,726 --> 00:04:23,306 as I have been doing all semester here in lecture. 101 00:04:23,306 --> 00:04:25,646 And the documentation for doing so if you would like to go 102 00:04:25,646 --> 00:04:28,066 that route if you haven't already, is available 103 00:04:28,066 --> 00:04:31,206 at the CS 50 manual at that address there. 104 00:04:31,206 --> 00:04:33,206 So realize there is that solution, 105 00:04:33,206 --> 00:04:35,336 and plenty of others there as well. 106 00:04:35,766 --> 00:04:39,316 All right, so without further ado, and actually just 107 00:04:39,316 --> 00:04:43,406 to paint a picture of the depth of the comments, we went ahead 108 00:04:43,456 --> 00:04:46,556 and went through the 600-plus critiques that were submitted. 109 00:04:46,846 --> 00:04:49,976 And then we excerpted for public display only those that related 110 00:04:49,976 --> 00:04:51,896 to Harvard so that we could forward them up to the powers 111 00:04:51,896 --> 00:04:54,166 that be, and also allow you to sort of empathize 112 00:04:54,166 --> 00:04:57,176 with each other or see the sort of themes that arose. 113 00:04:57,456 --> 00:05:00,536 I actually first exported all this data as an Excel file. 114 00:05:00,536 --> 00:05:02,906 Then started reading through it, and sort of delighting 115 00:05:02,906 --> 00:05:03,916 in all of the critiques. 116 00:05:04,236 --> 00:05:07,166 And then very quickly got overwhelmed and bored with just, 117 00:05:07,166 --> 00:05:09,706 like, my God, all of the copying and pasting I was trying to do 118 00:05:09,706 --> 00:05:10,786 into the course's web site. 119 00:05:11,086 --> 00:05:12,916 So turns out I [Inaudible] CS 50. 120 00:05:12,916 --> 00:05:15,876 So I wrote a little program and started searching 121 00:05:15,876 --> 00:05:19,916 for programatically, not just with control F, but writing code 122 00:05:20,186 --> 00:05:21,826 that searched for a few themes. 123 00:05:21,826 --> 00:05:24,416 I realized that I could very quickly turn through the results 124 00:05:24,726 --> 00:05:26,596 by searching for my.harvard, 125 00:05:26,946 --> 00:05:29,816 Preterm Planning Tool was another good expression 126 00:05:29,816 --> 00:05:31,136 to search for. 127 00:05:31,136 --> 00:05:34,766 Another one was anything relating to dining services. 128 00:05:35,186 --> 00:05:38,216 Another one was plan of study, sectioning, 129 00:05:38,306 --> 00:05:39,666 and a whole bunch of others. 130 00:05:39,666 --> 00:05:41,026 And it was actually quite fun to see this, 131 00:05:41,026 --> 00:05:43,206 because every time I would add another if condition 132 00:05:43,206 --> 00:05:44,046 in the code saying 133 00:05:44,396 --> 00:05:46,596 if the student mentioned My.harvard put them 134 00:05:46,596 --> 00:05:47,786 at this point in the web site. 135 00:05:48,106 --> 00:05:51,426 The numbers would go from, like, 600 down to, like, 500 comments, 136 00:05:51,426 --> 00:05:52,706 and then down to 400 comments. 137 00:05:52,706 --> 00:05:55,196 So it really is testament, frankly, with what you can do 138 00:05:55,196 --> 00:05:56,136 with just a little bit of PHP, 139 00:05:56,136 --> 00:05:59,256 which is the language we will introduce today. 140 00:05:59,256 --> 00:06:02,246 So for more on this and quite the opportunity 141 00:06:02,246 --> 00:06:05,776 for procrastination you can read through all 142 00:06:05,776 --> 00:06:09,856 of your classmates critiques on things here at Harvard. 143 00:06:09,856 --> 00:06:13,226 So hopefully, collectively as a class, that's getting long. 144 00:06:13,226 --> 00:06:16,086 Hopefully as a class we can do something about that. 145 00:06:16,086 --> 00:06:17,876 Indeed, for your final projects if you see something 146 00:06:17,876 --> 00:06:19,716 on campus that sucks, fix it. 147 00:06:20,016 --> 00:06:20,946 Build it yourself. 148 00:06:20,946 --> 00:06:23,806 Whether it's some CS 50 tool or something else on campus. 149 00:06:23,806 --> 00:06:27,346 And we can see what we can do about making real people use it. 150 00:06:27,466 --> 00:06:29,616 So my favorite thing in high school was watching movies 151 00:06:29,616 --> 00:06:30,776 in class. 152 00:06:30,776 --> 00:06:33,186 So this is not a full-fledged movie, 153 00:06:33,186 --> 00:06:34,586 it's actually just a -- ten or so minutes. 154 00:06:34,586 --> 00:06:37,896 But as promised this will peel back the hood of the Internet 155 00:06:37,896 --> 00:06:41,306 and show us in more interesting detail how things underneath the 156 00:06:41,306 --> 00:06:41,776 hood work. 157 00:06:41,776 --> 00:06:44,836 But just a few pieces of jargon so you know what to expect here. 158 00:06:44,836 --> 00:06:46,836 So we talked on Monday about TCP/IP. 159 00:06:46,836 --> 00:06:50,036 And even though we didn't talk about the TCP part, 160 00:06:50,036 --> 00:06:52,446 we did talk to about the IP part, Internet Protocol. 161 00:06:52,446 --> 00:06:55,066 And that's generally related to this fact that every computer 162 00:06:55,066 --> 00:06:57,586 on the internet has an IP address, a unique address 163 00:06:57,906 --> 00:07:01,406 that identifies it so that packets, data, can get to it 164 00:07:01,696 --> 00:07:03,256 from routers across the Internet. 165 00:07:03,456 --> 00:07:05,556 Now the TCP we didn't tease apart, 166 00:07:05,556 --> 00:07:07,006 but it does a bunch of things. 167 00:07:07,006 --> 00:07:08,926 One of which is that this is a protocol 168 00:07:08,926 --> 00:07:10,326 that guarantees delivery. 169 00:07:10,326 --> 00:07:13,666 For instance, with IP or in the real world, 170 00:07:13,666 --> 00:07:16,826 just because I extend my hand out like this doesn't mean 171 00:07:16,826 --> 00:07:18,916 that the other person is necessarily going 172 00:07:18,916 --> 00:07:20,916 to acknowledge my hand being extended, 173 00:07:20,916 --> 00:07:23,336 and they're not necessarily going to shake it. 174 00:07:23,336 --> 00:07:27,096 TCP, metaphorically, will just keep reextending my hand 175 00:07:27,306 --> 00:07:31,756 until the other end, the server, actually replies. 176 00:07:31,756 --> 00:07:33,416 TCP guarantees delivery. 177 00:07:33,616 --> 00:07:35,956 And the other thing it does is it allows you 178 00:07:35,956 --> 00:07:38,616 to do multiple things on one server at a time. 179 00:07:38,876 --> 00:07:40,916 So a server these days could be a web server, 180 00:07:40,976 --> 00:07:42,696 but it also could be a mail server, 181 00:07:42,696 --> 00:07:45,936 or an instant messaging server, but if data's just arriving 182 00:07:45,936 --> 00:07:49,166 at an IP address it's not going to be obvious, perhaps, 183 00:07:49,166 --> 00:07:50,326 whether this is an e-mail 184 00:07:50,326 --> 00:07:52,306 or instant message or something else. 185 00:07:52,536 --> 00:07:54,496 So it turns out that when you address one 186 00:07:54,496 --> 00:07:57,506 of these virtual envelopes, thanks to TCP/IP, 187 00:07:57,706 --> 00:08:00,666 it's not just the IP address that gets written 188 00:08:00,666 --> 00:08:03,406 on the envelope and your IP address in the from address, 189 00:08:03,706 --> 00:08:05,576 there's also a unique number that's put 190 00:08:05,576 --> 00:08:07,576 on that envelope called a port number. 191 00:08:07,836 --> 00:08:11,426 And you might generally have seen that the port number 192 00:08:11,426 --> 00:08:14,766 for web services on the internet is the number 80. 193 00:08:14,926 --> 00:08:16,836 And the port number for anything secure 194 00:08:16,836 --> 00:08:20,126 on the Internet with HTTPS is 443. 195 00:08:20,126 --> 00:08:21,636 E-mail is 25. 196 00:08:21,836 --> 00:08:23,446 SSH is 22. 197 00:08:23,446 --> 00:08:24,356 FFP is 21. 198 00:08:24,356 --> 00:08:25,926 And if most of these acronyms are sort 199 00:08:25,926 --> 00:08:27,026 of over your he did that's fine. 200 00:08:27,276 --> 00:08:28,986 But know that this is the mechanism 201 00:08:28,986 --> 00:08:32,646 by which browsers send data to a server and on this envelope say 202 00:08:32,646 --> 00:08:36,376 by the way, this is number 80, port 80, so make sure it goes 203 00:08:36,376 --> 00:08:38,066 to the web server, and not, say, 204 00:08:38,066 --> 00:08:40,836 the mail server or something else. 205 00:08:40,836 --> 00:08:44,906 And this feature of port numbers is also such an easy way, 206 00:08:44,906 --> 00:08:47,006 frankly, for Harvard to keep you from doing things 207 00:08:47,006 --> 00:08:48,566 in your dorm rooms on your computers 208 00:08:48,806 --> 00:08:50,086 that they don't want you to do, right? 209 00:08:50,086 --> 00:08:52,446 One of the reasons you can't really put your Wii 210 00:08:52,666 --> 00:08:56,096 on the network and actually play network games by default is 211 00:08:56,096 --> 00:08:58,536 because Harvard is filtering out some of the traffic. 212 00:08:58,536 --> 00:09:00,576 And they're doing this by a couple of mechanisms, 213 00:09:00,576 --> 00:09:02,996 but one of which could very well be based on port numbers. 214 00:09:03,276 --> 00:09:04,076 If Harvard just wanted 215 00:09:04,076 --> 00:09:07,136 to say unilaterally say no more web access for anyone, 216 00:09:07,376 --> 00:09:09,296 but you can send e-mail, all they have 217 00:09:09,296 --> 00:09:12,256 to do is configure their routers or more specifically FireWalls 218 00:09:12,256 --> 00:09:15,376 to disallow any packets flowing through Harvard.edu 219 00:09:15,656 --> 00:09:17,706 that have the number 80 in them. 220 00:09:17,706 --> 00:09:19,946 And corporate FireWalls do this much more so. 221 00:09:19,946 --> 00:09:23,416 And we'll talk later next week, likely, about this tool 222 00:09:23,416 --> 00:09:25,286 that came out last year called fire sheep, 223 00:09:25,286 --> 00:09:27,616 which actually allows you to sniff traffic and how 224 00:09:27,616 --> 00:09:29,476 that actually works and relates to this. 225 00:09:29,476 --> 00:09:32,186 Although that tool actually operates at a higher level. 226 00:09:32,436 --> 00:09:37,116 So you're about to see glimpses of routers and packets, 227 00:09:38,136 --> 00:09:41,846 at switches, a switch is just a device you can plug multiple 228 00:09:41,846 --> 00:09:43,136 computers together in. 229 00:09:43,406 --> 00:09:46,016 And the so-called FireWall, which you all have at home 230 00:09:46,016 --> 00:09:47,516 or even on your computers and software 231 00:09:47,726 --> 00:09:50,226 which just keeps bad stuff out and good stuff in. 232 00:09:50,226 --> 00:09:51,206 So without further ado, 233 00:09:51,516 --> 00:09:54,566 I give you how the Internet was actually, 234 00:09:54,626 --> 00:09:56,766 with some simplifications, works. 235 00:10:01,516 --> 00:10:05,516 [ Background noise ] 236 00:10:06,016 --> 00:11:07,000 [ Music ] 237 00:11:07,046 --> 00:11:09,626 >> For the first time in history people 238 00:11:09,676 --> 00:11:12,626 and machinery are working together. 239 00:11:12,626 --> 00:11:15,316 Realizing a dream. 240 00:11:15,316 --> 00:11:18,526 A uniting force that knows no geographical boundaries. 241 00:11:18,786 --> 00:11:21,886 Without regard to race, creed, or color. 242 00:11:21,886 --> 00:11:26,656 A new era, where communication truly brings people together. 243 00:11:26,656 --> 00:11:29,706 This is the dawn of the net. 244 00:11:29,706 --> 00:11:36,116 Want to know how to works? 245 00:11:36,116 --> 00:11:41,366 Click here to begin your journey into the net. 246 00:11:42,836 --> 00:11:47,206 Now exactly what happened when you clicked on that link? 247 00:11:47,826 --> 00:11:49,466 You started a flow of information. 248 00:11:50,006 --> 00:11:52,966 This information travels down into your own personal mailroom, 249 00:11:52,966 --> 00:11:57,296 where Mr. IP packages it, labels it, and sends it on its way. 250 00:11:58,416 --> 00:12:00,466 Each packet is limited in its size. 251 00:12:00,836 --> 00:12:03,986 The mailroom must decide how to divide the information 252 00:12:04,316 --> 00:12:05,216 and how to package it. 253 00:12:06,026 --> 00:12:09,456 Now the package needs a label containing important information 254 00:12:09,816 --> 00:12:12,806 such as sender's address, receiver's address, 255 00:12:12,846 --> 00:12:14,906 and the type of packet it is. 256 00:12:15,516 --> 00:12:30,766 [ Music ] 257 00:12:31,266 --> 00:12:33,806 >> Because this particular packet is going out on 258 00:12:33,806 --> 00:12:37,446 to the Internet it also gets an address for the proxy server, 259 00:12:37,806 --> 00:12:41,166 which has a special function as we'll see later. 260 00:12:41,486 --> 00:12:46,196 The packet is now launched on to your local area network, or LAN. 261 00:12:46,196 --> 00:12:50,146 This network is used to connect all the local computers, 262 00:12:50,276 --> 00:12:53,276 routers, printers, et cetera, for information exchange 263 00:12:53,376 --> 00:12:55,086 within the physical walls of the building. 264 00:12:55,866 --> 00:12:57,816 The LAN is a pretty uncontrolled place, 265 00:12:57,816 --> 00:13:01,516 and unfortunately accidents can happen. 266 00:13:04,516 --> 00:13:11,546 [ Music ] 267 00:13:12,046 --> 00:13:12,846 >> The highway of the LAN is packed 268 00:13:12,846 --> 00:13:14,196 with all types of information. 269 00:13:14,616 --> 00:13:16,356 These are IP packets, 270 00:13:16,436 --> 00:13:18,526 [Inaudible] packets, Apple Talk packets. 271 00:13:18,846 --> 00:13:20,656 They're going against traffic, as usual. 272 00:13:21,216 --> 00:13:23,426 The local router reads the address 273 00:13:23,426 --> 00:13:28,206 and if necessary lifts the packet on to another network. 274 00:13:28,376 --> 00:13:29,786 Ah, the router. 275 00:13:30,296 --> 00:13:36,086 A symbol of control in a seemingly disorganized world. 276 00:13:36,086 --> 00:13:36,706 [ Multiple voices speaking ] 277 00:13:36,706 --> 00:13:40,126 >> There he is. 278 00:13:40,466 --> 00:13:50,766 Systematic, uncaring, methodical, conservative, 279 00:13:50,766 --> 00:13:52,816 and sometimes not quite up to speed. 280 00:13:53,356 --> 00:13:56,296 But at least he is exact. 281 00:13:56,346 --> 00:13:58,956 For the most part. 282 00:13:59,516 --> 00:14:11,496 [ Multiple voices speaking ] 283 00:14:11,996 --> 00:14:14,846 >> As the packets leave the router they make their way 284 00:14:14,846 --> 00:14:18,936 into the corporate internet and head for the router switch. 285 00:14:19,036 --> 00:14:22,306 A bit more efficient than the router, 286 00:14:22,546 --> 00:14:25,906 the router switch plays fast and lose with IP packets. 287 00:14:26,126 --> 00:14:28,036 Deftly routing them along the way. 288 00:14:28,586 --> 00:14:31,456 A digital pin ball wizard, if you will. 289 00:14:34,516 --> 00:14:44,516 [ Multiple voices speaking ] 290 00:14:45,016 --> 00:14:49,000 [ Music ] 291 00:14:49,646 --> 00:14:52,616 >> As packets arrive at their destination they're picked 292 00:14:52,616 --> 00:14:54,386 up by the network interface, 293 00:14:54,866 --> 00:14:56,496 ready to be sent to the next level. 294 00:14:57,986 --> 00:15:00,046 In this case, the proxy. 295 00:15:00,046 --> 00:15:03,796 The proxy is used by many companies as sort 296 00:15:03,796 --> 00:15:06,196 of a middle man in order to lessen the load 297 00:15:06,196 --> 00:15:07,486 on their Internet connection, 298 00:15:07,946 --> 00:15:09,616 and for security reasons as well. 299 00:15:12,116 --> 00:15:15,546 As you can see, the packets are all of various sizes, 300 00:15:15,546 --> 00:15:17,706 depending upon their content. 301 00:15:18,516 --> 00:15:34,596 [ Music ] 302 00:15:35,096 --> 00:15:37,836 >> The proxy opens the packet and looks 303 00:15:37,876 --> 00:15:40,206 for the web address, or URL. 304 00:15:41,836 --> 00:15:44,216 Depending upon whether the address is acceptable, 305 00:15:44,806 --> 00:15:46,746 the packet is sent onto the Internet. 306 00:15:50,656 --> 00:15:57,456 There are, however, some addresses which do not meet 307 00:15:57,456 --> 00:15:59,276 with the approval of the proxy. 308 00:15:59,806 --> 00:16:03,296 That is to say management or corporate guidelines. 309 00:16:05,806 --> 00:16:11,156 These are summarily dealt with. 310 00:16:12,356 --> 00:16:14,006 We'll have none of that. 311 00:16:14,006 --> 00:16:29,846 For those who make it, it's on the road again. 312 00:16:30,426 --> 00:16:33,096 Next up, the FireWall. 313 00:16:33,226 --> 00:16:36,486 The corporate FireWall serves two purposes. 314 00:16:36,486 --> 00:16:39,986 It prevents some rather nasty things from the Internet 315 00:16:39,986 --> 00:16:41,706 from coming into the intranet, 316 00:16:42,426 --> 00:16:45,006 and it can also prevent sensitive corporate information 317 00:16:45,006 --> 00:16:49,816 from being sent out onto the Internet. 318 00:16:50,206 --> 00:16:53,096 Once through the FireWall a router picks up the packet 319 00:16:53,096 --> 00:16:55,466 and places it on to a much narrower road, 320 00:16:55,466 --> 00:16:57,056 or band width, as we say. 321 00:16:58,046 --> 00:17:01,916 Obviously, the road is not broad enough to take them all. 322 00:17:03,556 --> 00:17:06,376 Now you might wonder what happens to all those packets 323 00:17:06,376 --> 00:17:08,336 which don't make it along the way. 324 00:17:09,116 --> 00:17:12,276 Well, when Mr. IP doesn't receive an acknowledgement 325 00:17:12,276 --> 00:17:14,156 that a packet has been received 326 00:17:14,456 --> 00:17:17,256 in due time he simply sends a replacement packet. 327 00:17:18,046 --> 00:17:23,396 We are now ready to enter the world of the Internet. 328 00:17:24,646 --> 00:17:27,526 A spider web of interconnected networks, 329 00:17:27,526 --> 00:17:30,576 which span our entire globe. 330 00:17:30,576 --> 00:17:33,636 Here, routers and switches establish links 331 00:17:33,636 --> 00:17:35,896 between networks. 332 00:17:36,076 --> 00:17:38,616 Now the net is an entirely different environment 333 00:17:38,616 --> 00:17:41,056 than you'll find within the protected walls of your LAN. 334 00:17:41,546 --> 00:17:43,706 Out here, it's the wild west. 335 00:17:44,186 --> 00:17:47,156 Plenty of space, plenty of opportunities, plenty of things 336 00:17:47,156 --> 00:17:49,276 to explore and places to go. 337 00:17:49,656 --> 00:17:52,376 Thanks to very little control and regulation, 338 00:17:52,736 --> 00:17:56,306 new ideas find fruitful soil to push the envelope 339 00:17:56,306 --> 00:17:57,526 of their possibilities. 340 00:17:58,246 --> 00:18:01,716 But because of this freedom certain dangers also lurk. 341 00:18:02,016 --> 00:18:06,006 You'll never know when you'll meet the dreaded ping of death. 342 00:18:06,766 --> 00:18:09,386 A special version of a normal request ping 343 00:18:09,856 --> 00:18:13,636 which some idiot thought up to mess up unsuspecting hosts. 344 00:18:15,566 --> 00:18:19,966 The path our packets take may be via satellite, telephone lines, 345 00:18:19,966 --> 00:18:22,246 wireless, or even trance oceanic cable. 346 00:18:22,896 --> 00:18:24,766 They don't always take the fastest 347 00:18:24,766 --> 00:18:27,886 or shortest routes possible, but they will get there. 348 00:18:28,256 --> 00:18:29,456 Eventually. 349 00:18:30,056 --> 00:18:34,626 Maybe that's why it's sometimes called the World Wide Wait. 350 00:18:35,276 --> 00:18:37,536 But when everything is working smoothly, 351 00:18:37,876 --> 00:18:41,526 you can circumvent the global five times over at the drop 352 00:18:41,526 --> 00:18:43,056 of a hat -- literally. 353 00:18:43,056 --> 00:18:46,666 And all for the cost of a local call or less. 354 00:18:46,666 --> 00:18:53,726 Near the end of our destination we'll find another FireWall. 355 00:18:53,796 --> 00:18:57,726 Depending your perspective as a data packet, 356 00:18:58,176 --> 00:19:01,156 the FireWall could be a bastion of security, 357 00:19:01,576 --> 00:19:02,986 or a dreaded adversary. 358 00:19:03,706 --> 00:19:06,056 It all depends on which side you're on 359 00:19:06,056 --> 00:19:07,436 and what your intentions are. 360 00:19:08,486 --> 00:19:12,346 The FireWall is designed to let in only those packets 361 00:19:12,346 --> 00:19:13,606 that meet its criteria. 362 00:19:14,376 --> 00:19:19,256 This FireWall is operating on ports 80 and 25. 363 00:19:19,256 --> 00:19:22,476 All attempts to enter through other ports are closed 364 00:19:22,476 --> 00:19:22,976 for business. 365 00:19:23,516 --> 00:19:36,266 [ Music ] 366 00:19:36,766 --> 00:19:40,716 >> Port 25 is used for mail packets. 367 00:19:43,316 --> 00:19:45,686 While port 80 is the entrance for packets 368 00:19:45,686 --> 00:19:47,576 from the Internet to the web server. 369 00:19:47,806 --> 00:19:54,286 Inside the FireWall packets are screened more thoroughly. 370 00:19:55,186 --> 00:19:56,676 Some packets make it easily 371 00:19:56,676 --> 00:20:00,626 through customs while others look just a bit dubious. 372 00:20:01,416 --> 00:20:03,576 The FireWall officer is not easily fooled, 373 00:20:04,016 --> 00:20:09,256 such as when this ping of death packet tries to disguise itself 374 00:20:09,696 --> 00:20:11,556 as a normal ping pact. 375 00:20:11,936 --> 00:20:17,216 >> No problem, have a nice day, get out of here. 376 00:20:17,216 --> 00:20:17,283 Bye. 377 00:20:17,366 --> 00:20:18,886 >> For those packets lucky enough 378 00:20:18,886 --> 00:20:25,786 to make it this far the journey is almost over. 379 00:20:25,786 --> 00:20:28,976 It's just a line up on the interface to be taken 380 00:20:28,976 --> 00:20:31,046 up into the web server. 381 00:20:31,106 --> 00:20:35,026 Nowadays a web server can run on many things. 382 00:20:35,476 --> 00:20:38,746 From a main frame to a webcam to the computer on your desk. 383 00:20:39,506 --> 00:20:40,956 Why not your refrigerator. 384 00:20:41,646 --> 00:20:44,956 With the proper set up you can find out if you have the makings 385 00:20:44,956 --> 00:20:47,826 for chicken Cacciatore, or if you have to go shopping. 386 00:20:48,306 --> 00:20:51,006 Remember, this is the dawn of the net. 387 00:20:51,626 --> 00:20:53,326 Almost anything's possible. 388 00:20:54,206 --> 00:21:02,486 One by one, the packets are received, opened , and unpacked. 389 00:21:06,326 --> 00:21:10,036 The information they contain, that is your request 390 00:21:10,036 --> 00:21:13,526 for information, is sent onto the web server application. 391 00:21:18,566 --> 00:21:23,756 The packet itself is recycled. 392 00:21:26,626 --> 00:21:28,426 Ready to be used again. 393 00:21:29,256 --> 00:21:31,856 And filled with your requested information. 394 00:21:37,466 --> 00:21:42,426 Addressed and sent out on its way back to you. 395 00:21:43,246 --> 00:21:48,436 Back past the FireWall, routers, and on through to the Internet. 396 00:21:48,436 --> 00:21:54,946 Back through your corporate FireWall. 397 00:21:57,586 --> 00:22:02,976 And on to your interface. 398 00:22:04,146 --> 00:22:06,166 Ready to supply your web browser 399 00:22:06,526 --> 00:22:08,066 with the information you requested. 400 00:22:10,996 --> 00:22:14,786 That is, this film. 401 00:22:15,516 --> 00:22:19,146 [ Music ] 402 00:22:19,646 --> 00:22:22,956 >> Pleased with their efforts, and trusting in a better world, 403 00:22:23,556 --> 00:22:26,736 our trusted data packets ride off blissfully 404 00:22:26,916 --> 00:22:29,246 into the sunset of another day. 405 00:22:29,246 --> 00:22:33,926 Knowing fully they have served their masters well. 406 00:22:36,846 --> 00:22:40,526 Now isn't that a happy ending. 407 00:22:42,516 --> 00:22:45,516 [ Music ] 408 00:22:46,016 --> 00:22:50,000 [ Applause ] 409 00:22:51,246 --> 00:22:53,346 >> So it does take some liberties. 410 00:22:53,476 --> 00:22:56,206 However, hopefully, even though we've been talking about packets 411 00:22:56,206 --> 00:22:58,606 and data and IP in fairly abstract terms, 412 00:22:58,606 --> 00:23:01,196 at least now you do have some visuals to latch on to, 413 00:23:01,196 --> 00:23:03,956 as it relates to data actually getting from point A 414 00:23:03,956 --> 00:23:06,606 to point B. Are there any questions 415 00:23:06,606 --> 00:23:10,206 about the internet or that film? 416 00:23:10,396 --> 00:23:11,526 Yes? 417 00:23:12,166 --> 00:23:14,166 [ Inaudible audience comment ] 418 00:23:14,316 --> 00:23:16,116 >> When it says packets are what? 419 00:23:16,596 --> 00:23:19,456 Recycled -- hmm, that's one of these liberties. 420 00:23:19,456 --> 00:23:20,426 That doesn't really happen. 421 00:23:20,426 --> 00:23:23,966 You don't really reuse bits, you just recreate them. 422 00:23:24,586 --> 00:23:26,416 So I think someone, too, 423 00:23:26,626 --> 00:23:28,946 a lot of that film was having a little too much fun making 424 00:23:28,946 --> 00:23:29,586 their graphics. 425 00:23:29,776 --> 00:23:31,166 Because kind of -- it's like, all right, 426 00:23:31,256 --> 00:23:32,666 we're done painting the packet. 427 00:23:33,126 --> 00:23:36,246 Move on. All right, yeah? 428 00:23:36,246 --> 00:23:36,566 [ Inaudible audience comment ] 429 00:23:36,566 --> 00:23:37,766 >> So a ping of death. 430 00:23:37,766 --> 00:23:39,066 Actually , so that does relate 431 00:23:39,066 --> 00:23:40,096 to something we looked at Monday. 432 00:23:40,096 --> 00:23:41,916 When we looked at trace route that tool 433 00:23:41,916 --> 00:23:44,096 that showed us the path between point A and B, 434 00:23:44,326 --> 00:23:46,426 the type of packet we were actually sending is something 435 00:23:46,426 --> 00:23:49,606 called a ping packet or more technically, an ICMP packet. 436 00:23:49,896 --> 00:23:52,176 And that is a packet that is sometimes blocked. 437 00:23:52,176 --> 00:23:55,296 That's why we saw the stars instead of actual IP addresses. 438 00:23:55,536 --> 00:23:57,826 And a ping of death is essentially a ping that's bigger 439 00:23:57,826 --> 00:24:00,056 than it's supposed to be, according to the specifications. 440 00:24:00,286 --> 00:24:03,696 And years ago particular computers were just not designed 441 00:24:03,806 --> 00:24:04,876 -- some computers were not designed 442 00:24:04,876 --> 00:24:06,046 with sufficient error checking. 443 00:24:06,376 --> 00:24:09,706 So simply sending a packet, too many bits over the internet 444 00:24:09,706 --> 00:24:11,646 to a server could cause it to crash 445 00:24:11,686 --> 00:24:13,506 because it essentially overflows a buffer. 446 00:24:13,976 --> 00:24:17,006 So they've rather fallen out of vogue since. 447 00:24:17,176 --> 00:24:19,906 All right, so we looked at HTML. 448 00:24:20,276 --> 00:24:22,826 And this is itself just a markup language, 449 00:24:22,826 --> 00:24:24,816 not a programming language, but it allows us 450 00:24:24,816 --> 00:24:26,686 to start constructing web pages. 451 00:24:26,736 --> 00:24:28,116 But only static web pages. 452 00:24:28,116 --> 00:24:30,436 Everything we did Monday I had to manually type 453 00:24:30,436 --> 00:24:31,936 into my text editor G edit. 454 00:24:32,136 --> 00:24:34,626 I then saved it and then I pulled it up in a web browser 455 00:24:34,626 --> 00:24:38,036 and recalled it, even though it was inside of my appliance, 456 00:24:38,106 --> 00:24:41,366 the appliance is configured just like one of these web servers. 457 00:24:41,366 --> 00:24:44,356 So it's addressed locally as local host. 458 00:24:44,356 --> 00:24:47,106 But if we were to give it a public IP address, 459 00:24:47,106 --> 00:24:49,566 as you will be able to do for your final project, 460 00:24:49,566 --> 00:24:50,746 then we could actually -- 461 00:24:50,746 --> 00:24:53,326 anyone on the internet could actually visit that thing. 462 00:24:53,326 --> 00:24:56,906 So recall we did some fairly simple if ugly designs. 463 00:24:57,226 --> 00:25:01,346 If I go into the appliance and I go into my J. Harvard directory, 464 00:25:01,576 --> 00:25:03,566 recall that we correct created this thing called public 465 00:25:03,566 --> 00:25:04,946 underscore HTML. 466 00:25:04,946 --> 00:25:06,766 It's a little oddly named, but that's sort 467 00:25:06,766 --> 00:25:07,886 of the global standard. 468 00:25:07,926 --> 00:25:10,026 Different web servers can call it different things, 469 00:25:10,026 --> 00:25:12,886 but most servers do call it public HTML. 470 00:25:12,886 --> 00:25:16,356 And then inside of here we left off with eyes dot PNG, 471 00:25:16,356 --> 00:25:19,326 which is a graphics file in index.html. 472 00:25:19,446 --> 00:25:21,596 And the latter is the thing we actually wrote. 473 00:25:21,746 --> 00:25:23,856 And the structure of this, recall, was as follows. 474 00:25:24,086 --> 00:25:26,266 At the very top of this file we had a [Inaudible] 475 00:25:26,266 --> 00:25:29,296 of an HTML doc type declaration. 476 00:25:29,466 --> 00:25:31,576 So even though it has the open brackets it's not technically 477 00:25:31,576 --> 00:25:32,016 a tag. 478 00:25:32,276 --> 00:25:33,936 But that's sort of an uninteresting detail. 479 00:25:33,936 --> 00:25:36,026 But all of these other things are in fact tags. 480 00:25:36,556 --> 00:25:38,736 And the pattern was open bracket, something, 481 00:25:38,826 --> 00:25:42,496 close bracket, unless a tag's behavior was to be modified 482 00:25:42,766 --> 00:25:44,636 by something called an attribute. 483 00:25:44,936 --> 00:25:46,336 And attributes have values. 484 00:25:46,536 --> 00:25:49,276 So the general syntax for that was to say open bracket, 485 00:25:49,526 --> 00:25:52,416 name of the tag, space, name of the attribute, 486 00:25:52,466 --> 00:25:55,966 equals quote unquote, and then the value of the attribute. 487 00:25:55,966 --> 00:25:58,906 And you could have more attributes if HTML allows you. 488 00:25:59,146 --> 00:26:02,326 You could have Fu equals bar and X equals Y, 489 00:26:02,556 --> 00:26:04,876 you simply separate them in this manner by spaces. 490 00:26:05,126 --> 00:26:07,046 But you would look to some documentation 491 00:26:07,046 --> 00:26:10,196 or on line reference to see what are the legitimate attributes 492 00:26:10,696 --> 00:26:11,936 for that particular tag. 493 00:26:12,226 --> 00:26:13,646 And then we introduced one other thing 494 00:26:13,646 --> 00:26:15,476 that syntactically was a little different, 495 00:26:15,476 --> 00:26:17,946 and this is because this is a slightly more modern feature 496 00:26:17,946 --> 00:26:18,436 of the web. 497 00:26:18,746 --> 00:26:20,166 So we introduced a Div tag, 498 00:26:20,166 --> 00:26:22,906 which is just an invisible division, a rectangle. 499 00:26:23,136 --> 00:26:25,756 And these just typically help with layouts of a page, 500 00:26:25,756 --> 00:26:28,086 even though functionally they're not doing a huge amount here. 501 00:26:28,466 --> 00:26:31,126 But if I wanted to make everything inside 502 00:26:31,126 --> 00:26:33,686 of this Div tag a certain stylization 503 00:26:33,736 --> 00:26:35,956 like make everything red text, well, 504 00:26:35,956 --> 00:26:39,136 I can use something called CSS, cascading style sheets, 505 00:26:39,366 --> 00:26:43,576 and this is just a slightly more modern language, still a markup 506 00:26:43,576 --> 00:26:46,136 of sorts, not a programming language, that allows you 507 00:26:46,136 --> 00:26:48,536 to sort of fine-tune the aesthetics of your web page. 508 00:26:48,586 --> 00:26:50,836 Back in the day, and frankly when that movie was made, 509 00:26:51,036 --> 00:26:53,946 the only way you could really stylize your page is 510 00:26:53,946 --> 00:26:58,496 by saying font size equals quote unquote 1, font size equals 2, 511 00:26:58,496 --> 00:27:02,666 font size equals 6, and I think 7 was the maximum size. 512 00:27:02,906 --> 00:27:04,026 But these were all relative. 513 00:27:04,026 --> 00:27:06,626 And folks like Netscape and Internet Explorer 514 00:27:06,626 --> 00:27:09,076 and other browsers just kind of arbitrarily decided 515 00:27:09,076 --> 00:27:12,046 that font size 6 will be, oh, I don't know, 48 point. 516 00:27:12,426 --> 00:27:14,126 And font size 2 will be 10 point. 517 00:27:14,126 --> 00:27:15,546 But it was completely arbitrary. 518 00:27:15,776 --> 00:27:19,216 And so if you pulled up a web browser to visit some web page, 519 00:27:19,216 --> 00:27:20,696 and then looked at that same page 520 00:27:20,696 --> 00:27:23,286 in a different browser might look very, very different. 521 00:27:23,286 --> 00:27:26,036 So CSS was introduced, among other reasons, 522 00:27:26,036 --> 00:27:28,916 to try to standardize the aesthetics of web pages 523 00:27:29,166 --> 00:27:31,746 and make it a little easier to structure them. 524 00:27:32,116 --> 00:27:34,176 So the pattern that is followed 525 00:27:34,176 --> 00:27:36,886 for these things called CSS properties is 526 00:27:36,886 --> 00:27:39,826 that they generally go in between quotes as values 527 00:27:39,826 --> 00:27:41,116 of the style attributes. 528 00:27:41,116 --> 00:27:42,896 So the style attribute is a little special 529 00:27:42,896 --> 00:27:44,616 in that you can put almost anything you want 530 00:27:44,616 --> 00:27:46,346 in these quotes from CSS. 531 00:27:46,856 --> 00:27:50,206 And CSS says find the name of the property, colon, 532 00:27:50,326 --> 00:27:52,166 and then the value of the property. 533 00:27:52,166 --> 00:27:53,826 So syntactically, this is 534 00:27:53,826 --> 00:27:56,166 like mixing one language inside of another. 535 00:27:56,396 --> 00:27:57,806 So it's a little odd at first, 536 00:27:57,806 --> 00:28:00,256 but we're with to introduce a third language today. 537 00:28:00,256 --> 00:28:02,166 So realize that what might still look 538 00:28:02,166 --> 00:28:05,466 like Greek actually just gets a little more familiar over time. 539 00:28:05,466 --> 00:28:08,096 And in fact any time you want to pick up some more tags, 540 00:28:08,096 --> 00:28:10,426 it really will be as simple as Googling, looking up one 541 00:28:10,426 --> 00:28:12,636 of the recommended resources on the course's web site. 542 00:28:12,846 --> 00:28:14,686 We're not going to introduce you to all 543 00:28:14,686 --> 00:28:16,226 of the possible HTML tags, 544 00:28:16,456 --> 00:28:18,356 because it's just not all that interesting. 545 00:28:18,356 --> 00:28:21,096 In fact, all of what we have here is pretty much 546 00:28:21,096 --> 00:28:23,546 representatives of all of the HTML tags, 547 00:28:23,586 --> 00:28:25,266 because we have the nesting idea 548 00:28:25,546 --> 00:28:27,836 where this is the unordered list with a list item. 549 00:28:28,246 --> 00:28:30,936 We have a tag within a tag here with this anchor tag, 550 00:28:31,186 --> 00:28:33,716 we have hyper references for links, we have images. 551 00:28:33,966 --> 00:28:36,456 So we have at least some of the most popular features 552 00:28:36,456 --> 00:28:38,886 of the web, and even some these do have attributes. 553 00:28:38,886 --> 00:28:41,626 And then the anomaly, recall, was this guy, the BR, 554 00:28:41,696 --> 00:28:44,396 for line break tag, and he was anomalous 555 00:28:44,596 --> 00:28:45,706 because he didn't have what? 556 00:28:46,546 --> 00:28:49,036 He didn't have a close tag. 557 00:28:49,036 --> 00:28:50,346 And you could put it there. 558 00:28:50,346 --> 00:28:51,186 That would be okay. 559 00:28:51,186 --> 00:28:53,186 It just looks or feels a little silly. 560 00:28:53,396 --> 00:28:55,576 You might see this, but again, this is sort 561 00:28:55,576 --> 00:28:58,176 of conceptually silly because it's a line break. 562 00:28:58,176 --> 00:28:59,216 It's either there or not. 563 00:28:59,216 --> 00:29:00,526 It's some atomic concept. 564 00:29:00,526 --> 00:29:01,846 It doesn't start and then end. 565 00:29:02,166 --> 00:29:03,206 So you don't really need this. 566 00:29:03,206 --> 00:29:05,766 But realize you might also see it written as this. 567 00:29:06,066 --> 00:29:09,356 Which is also okay, you might see the slash at the end 568 00:29:09,356 --> 00:29:11,046 of the tag but inside of it. 569 00:29:11,366 --> 00:29:13,346 And this too would be called an empty tag. 570 00:29:13,386 --> 00:29:16,066 But for HTML 5, the latest version of HTML, 571 00:29:16,066 --> 00:29:17,436 the folks decided that some 572 00:29:17,436 --> 00:29:19,706 of these conventions were just unnecessary typing. 573 00:29:19,976 --> 00:29:22,776 So let's just say open bracket, BR, close bracket. 574 00:29:22,776 --> 00:29:23,536 And how do you know this? 575 00:29:23,846 --> 00:29:25,646 Honestly, you consult the manual, 576 00:29:25,646 --> 00:29:28,086 you consult some resource, and in Problem Set 7 we'll point you 577 00:29:28,086 --> 00:29:31,806 to specific ones and the resources page already has a few 578 00:29:31,806 --> 00:29:32,196 of those. 579 00:29:32,556 --> 00:29:35,716 So this, then, is sort of a cannonical web page. 580 00:29:35,716 --> 00:29:38,136 It is valid in that it's all correct. 581 00:29:38,416 --> 00:29:40,496 It's indented, which means it's nicely readable, 582 00:29:40,696 --> 00:29:42,206 and know that we could do this. 583 00:29:42,386 --> 00:29:45,206 If we wanted to check our web page -- 584 00:29:45,206 --> 00:29:47,006 I'm going to go ahead and copy this HTML. 585 00:29:47,056 --> 00:29:50,656 I'm going to go to Validator.w3.org, 586 00:29:51,056 --> 00:29:54,006 which is the web site of the standards organization. 587 00:29:54,006 --> 00:29:55,916 Bunch of volunteers who essentially try 588 00:29:55,916 --> 00:29:58,466 to standardize the web in various languages, 589 00:29:58,746 --> 00:30:00,056 and you can see that you can validate 590 00:30:00,056 --> 00:30:04,526 by something called a URI, which is sort of a more generally URL. 591 00:30:04,926 --> 00:30:06,826 Essentially synonymous for our purposes. 592 00:30:07,116 --> 00:30:10,056 You can validate a file by up loading an HTML file, 593 00:30:10,056 --> 00:30:12,696 or you can validate your HTML by directly inputting it. 594 00:30:12,696 --> 00:30:14,836 So I'm going to go ahead and paste this in here. 595 00:30:15,146 --> 00:30:17,646 So notice I just pasted in the contents of a web page. 596 00:30:17,646 --> 00:30:19,156 I'm going to go ahead and click check. 597 00:30:19,156 --> 00:30:22,696 And what's nice about this tool and what will be very handy 598 00:30:22,696 --> 00:30:25,136 for problem set 7 and 8 in the final project, 599 00:30:25,456 --> 00:30:27,056 it's a nice little sanity check. 600 00:30:27,056 --> 00:30:29,556 It will literally check your code and say yes, this is good 601 00:30:29,556 --> 00:30:31,596 in green, or you have some issues. 602 00:30:31,596 --> 00:30:33,526 And if you have some issues you can scroll down 603 00:30:33,836 --> 00:30:36,036 and actually read what those issues are. 604 00:30:36,286 --> 00:30:38,036 But realize that you're not going to be able 605 00:30:38,036 --> 00:30:40,646 to use the validator and tell it that the URL 606 00:30:40,646 --> 00:30:46,596 of your page is http://local host/~JHarvard, because then, 607 00:30:46,596 --> 00:30:48,066 local host is on your own machine, 608 00:30:48,066 --> 00:30:48,946 it's not on the internet. 609 00:30:49,176 --> 00:30:51,786 Which means some web site like that can't access it. 610 00:30:51,876 --> 00:30:53,686 So realize that dichotomy there. 611 00:30:54,316 --> 00:30:57,076 All right, so let's make a slightly fancier web page. 612 00:30:57,076 --> 00:31:00,386 And notice what I've introduced here is just a couple more tags. 613 00:31:00,386 --> 00:31:02,126 I've got my body tag, but inside 614 00:31:02,126 --> 00:31:06,896 of it now I've got some anchor tag and some H 1 tags. 615 00:31:06,896 --> 00:31:09,126 So the anchor tag, just for demonstration purposes, 616 00:31:09,326 --> 00:31:10,716 just has an empty H ref. 617 00:31:10,716 --> 00:31:12,856 I don't really care what the URL is, so I omitted it. 618 00:31:13,236 --> 00:31:15,226 H 1 stands for heading 1. 619 00:31:15,456 --> 00:31:20,436 And historically, heading 1 made text on a page big and bold. 620 00:31:20,586 --> 00:31:22,946 What big means was not well defined. 621 00:31:22,946 --> 00:31:25,096 It might have been 48 point, it might have been smaller, 622 00:31:25,096 --> 00:31:25,796 it might have been bigger. 623 00:31:26,156 --> 00:31:28,366 So here too is why CSS was invented. 624 00:31:28,656 --> 00:31:30,736 So we have two tags, though, inside of the body. 625 00:31:30,736 --> 00:31:33,086 And the point of this little snippet is to say 626 00:31:33,086 --> 00:31:36,536 that you can maybe kind of start to think of this now as a tree, 627 00:31:36,656 --> 00:31:38,696 a data structure, the indentation is 628 00:31:38,696 --> 00:31:40,906 for aesthetic purposes and readability. 629 00:31:41,136 --> 00:31:43,536 But if you think about it, ignore the doc type 630 00:31:43,536 --> 00:31:46,406 at the very top and focus only on the HTML element. 631 00:31:46,696 --> 00:31:50,156 HTML says there can only be one root element, so to speak, 632 00:31:50,156 --> 00:31:53,486 and that element must be called HTML in all lower case. 633 00:31:53,486 --> 00:31:55,786 Open bracket, HTML, close bracket. 634 00:31:56,046 --> 00:31:58,386 And if you look to the right and below it, 635 00:31:58,626 --> 00:31:59,796 everything is indented. 636 00:31:59,796 --> 00:32:02,606 But this indentation kind of suggests a hierarchy. 637 00:32:03,006 --> 00:32:07,396 Right? The children of HTML, if we infer from the indentation, 638 00:32:07,696 --> 00:32:11,706 seem to be tags called head and another tag called body. 639 00:32:11,966 --> 00:32:15,306 And so we can actually think of the HTML tag 640 00:32:15,446 --> 00:32:17,616 or let's call it an element now to make it more 641 00:32:17,616 --> 00:32:20,686 like a data structure, the HTML element has two children, 642 00:32:20,686 --> 00:32:21,626 head and body. 643 00:32:21,866 --> 00:32:25,426 Body in turn has two children, the A -- 644 00:32:25,426 --> 00:32:28,896 the A element and the H 1 element. 645 00:32:28,896 --> 00:32:30,606 And if we really want to get technical, 646 00:32:30,866 --> 00:32:34,246 even the H 1 element has a child. 647 00:32:34,616 --> 00:32:36,226 But it's just a textual child. 648 00:32:36,226 --> 00:32:38,606 It's literally the string my space header. 649 00:32:38,656 --> 00:32:40,316 But we can think of that now as a tree. 650 00:32:40,626 --> 00:32:42,856 So even though we've kind of written this top to bottom, 651 00:32:42,856 --> 00:32:45,896 left to right, we could redraw it. 652 00:32:45,896 --> 00:32:49,326 Either on paper or in memory as a more familiar tree structure. 653 00:32:49,326 --> 00:32:51,786 So not a binary tree, it's just a coincidence that some 654 00:32:51,786 --> 00:32:53,006 of these things have two children. 655 00:32:53,286 --> 00:32:55,466 Certainly a web page can have any number of children. 656 00:32:55,726 --> 00:32:57,976 But if we kind of sketch this out as a tree, 657 00:32:58,236 --> 00:33:01,056 first I just need some special note at the very top 658 00:33:01,136 --> 00:33:03,256 for reasons we won't get into now. 659 00:33:03,296 --> 00:33:06,166 But the one's that important is this so-called root element, 660 00:33:06,326 --> 00:33:07,316 called HTML. 661 00:33:07,526 --> 00:33:10,026 It has two children, so I drew two lines from -- 662 00:33:10,026 --> 00:33:11,346 over to the left to the right. 663 00:33:11,686 --> 00:33:13,356 One is for head, one is for body. 664 00:33:13,596 --> 00:33:14,976 If we then look at the head, 665 00:33:14,976 --> 00:33:17,376 the head element has one child called title, 666 00:33:17,446 --> 00:33:21,036 and the title element has one child, a textual one, 667 00:33:21,036 --> 00:33:23,136 whose value is just quote unquote, my title. 668 00:33:23,136 --> 00:33:25,206 And over here, body has the same kind of story. 669 00:33:25,426 --> 00:33:27,456 Has two children, A and H 1. 670 00:33:27,486 --> 00:33:28,836 Each of them has one child. 671 00:33:29,416 --> 00:33:30,496 But notice this H ref. 672 00:33:30,716 --> 00:33:33,886 Notice why -- even though this is an arbitrary picture, 673 00:33:33,886 --> 00:33:37,436 this isn't any kind of standard way to draw something, why, 674 00:33:37,436 --> 00:33:41,116 though, did I draw, probably, this attribute called H ref off 675 00:33:41,116 --> 00:33:43,926 to the left, and not below the anchor tag? 676 00:33:47,436 --> 00:33:49,056 feel like there's some murmuring here. 677 00:33:49,056 --> 00:33:49,936 So just -- yeah? 678 00:33:50,676 --> 00:33:55,006 Because it's like kind of part of A tag, 679 00:33:55,006 --> 00:33:57,316 and it's definitely not a child, right? 680 00:33:57,316 --> 00:34:00,466 It's not a tag unto itself, it's not below it and indented. 681 00:34:00,726 --> 00:34:02,516 So we at least need to draw some other way. 682 00:34:02,516 --> 00:34:05,606 And this is important only in so far as you think about how 683 00:34:05,606 --> 00:34:07,986 to implement this in a programming language. 684 00:34:07,986 --> 00:34:10,076 If we are actually going to implement, God forbid 685 00:34:10,076 --> 00:34:12,096 and see a web page like this, 686 00:34:12,256 --> 00:34:14,916 we could actually create something called a node, 687 00:34:15,016 --> 00:34:16,886 you know, using a type dev and a struct, 688 00:34:17,206 --> 00:34:20,266 and inside of that type dev struct would have to be the name 689 00:34:20,266 --> 00:34:23,206 of the element and maybe one or more pointers to its children. 690 00:34:23,396 --> 00:34:26,486 But then also the notion of one or more attributes as well. 691 00:34:26,686 --> 00:34:27,926 So this picture should conjure 692 00:34:27,926 --> 00:34:30,246 up at least potential design opportunities here, 693 00:34:30,246 --> 00:34:33,176 even though in practice we're not going to use C with regard 694 00:34:33,176 --> 00:34:35,676 to the web, rather, we're going to use a language called PHP. 695 00:34:35,676 --> 00:34:37,886 But when we get to JavaScript in a week 696 00:34:37,886 --> 00:34:41,406 or so this picture will actually become quite compelling. 697 00:34:41,406 --> 00:34:44,146 Because JavaScript itself is a programming language that's 698 00:34:44,146 --> 00:34:47,556 going to run inside of a browser that will write this code 699 00:34:47,756 --> 00:34:50,856 and it's going to manipulate the so-called DOM. 700 00:34:51,036 --> 00:34:52,446 Document Object Model. 701 00:34:52,446 --> 00:34:54,096 So this tree that's depicted here, 702 00:34:54,306 --> 00:34:56,186 hence forth we'll refer to as a DOM. 703 00:34:56,186 --> 00:34:59,756 And what's nice about JavaScript and what makes today's web site 704 00:34:59,756 --> 00:35:03,606 so sexy compared to what they were five and ten years ago is 705 00:35:03,606 --> 00:35:06,276 because using this programming language called JavaScript you 706 00:35:06,276 --> 00:35:09,106 can take a tree like this and insert new nodes, 707 00:35:09,106 --> 00:35:11,476 and move nodes, and remove nodes, and move things around, 708 00:35:11,476 --> 00:35:14,556 and make the web site much, much, much more dynamic. 709 00:35:14,556 --> 00:35:17,936 Right? Case in point, we've all kind of gotten used to something 710 00:35:17,936 --> 00:35:19,396 like Google Maps and if we search 711 00:35:19,396 --> 00:35:22,286 for 33 Oxford Street Cambridge, Mass and hit enter, 712 00:35:22,856 --> 00:35:26,526 a few interesting but things just happened we now take 713 00:35:26,526 --> 00:35:27,096 for granted. 714 00:35:27,096 --> 00:35:29,946 One there's clearly some auto complete going on. 715 00:35:29,946 --> 00:35:31,696 And my own computer definitely doesn't know 716 00:35:31,696 --> 00:35:34,176 about all possible 33 Oxford Streets in the world. 717 00:35:34,416 --> 00:35:37,126 So there's definitely some client-server interaction going 718 00:35:37,126 --> 00:35:37,546 on there. 719 00:35:37,816 --> 00:35:38,546 What does that mean? 720 00:35:38,786 --> 00:35:41,836 There's a bunch of HTTP requests that just went from my browser 721 00:35:41,836 --> 00:35:43,916 to Google and back, and they were giving me these 722 00:35:43,916 --> 00:35:44,596 little hints. 723 00:35:44,596 --> 00:35:46,996 But what's compelling about this interface, recall, 724 00:35:47,316 --> 00:35:48,766 is it's not reloading. 725 00:35:49,036 --> 00:35:51,036 Right? There's still a lot of web sites out there 726 00:35:51,036 --> 00:35:53,506 where if you want to see more content or look something 727 00:35:53,506 --> 00:35:55,936 up you click, like, a submit button or you click a link. 728 00:35:56,106 --> 00:35:57,856 The whole page goes white for a moment, 729 00:35:57,856 --> 00:36:00,126 and then something stars spinning in your toolbar, 730 00:36:00,126 --> 00:36:02,016 and then bam, you see the result. 731 00:36:02,016 --> 00:36:04,506 Or you hit a back button, or you click another link. 732 00:36:04,506 --> 00:36:08,946 These web sites are becoming increasingly unfriendly 733 00:36:09,216 --> 00:36:11,336 because the bar has been raised by sites like Google, 734 00:36:11,336 --> 00:36:14,276 because Google's using a technology called Ajax. 735 00:36:14,456 --> 00:36:18,226 Which is the use of JavaScript among other things. 736 00:36:18,226 --> 00:36:21,196 And even this, right, you might not recall using something 737 00:36:21,196 --> 00:36:24,466 like Mapquest which is one of the first map tools out there, 738 00:36:24,466 --> 00:36:27,586 or even yahoo maps, where if you wanted to go up or down or left 739 00:36:27,586 --> 00:36:29,046 or right you click a stupid arrow, 740 00:36:29,046 --> 00:36:30,786 and then that part of the map reloads. 741 00:36:30,786 --> 00:36:32,516 And then you click it again, and click it again. 742 00:36:32,806 --> 00:36:35,376 And just a few years ago it was a really powerful thing 743 00:36:35,686 --> 00:36:38,986 when Google started actually, you know, letting you click 744 00:36:38,986 --> 00:36:41,766 and drag so the whole web site is not reloading, 745 00:36:42,116 --> 00:36:43,736 just the contents of this frame. 746 00:36:43,766 --> 00:36:46,816 Now there's Google Earth, which makes things even more fancy 747 00:36:46,816 --> 00:36:48,536 and more 3 D and interactive. 748 00:36:48,886 --> 00:36:52,156 So the web is really getting much, much more interesting. 749 00:36:52,156 --> 00:36:53,666 So over the next couple of weeks we're going 750 00:36:53,666 --> 00:36:54,836 to learn how these things work 751 00:36:54,836 --> 00:36:58,216 and you can make them do your own bidding. 752 00:36:58,726 --> 00:37:00,816 So without further ado, 753 00:37:01,006 --> 00:37:04,276 let's introduce just a couple more sort of mental things 754 00:37:04,276 --> 00:37:06,486 for -- with which to proceed, and then dive 755 00:37:06,486 --> 00:37:08,246 into this programming language, PHP. 756 00:37:08,636 --> 00:37:11,926 So this is just a slightly more complex example of HTML 757 00:37:12,366 --> 00:37:16,096 that allows you to include other files in your web page. 758 00:37:16,326 --> 00:37:19,236 So recall sharp clue from C which allows you 759 00:37:19,236 --> 00:37:21,936 to include a header file inside of your own C file? 760 00:37:22,266 --> 00:37:26,236 Well, HTML has a similar mechanism whereby if you want 761 00:37:26,236 --> 00:37:29,426 to put all of your cascading style sheet information, 762 00:37:29,426 --> 00:37:33,256 font color red, font size 25 point, and so forth. 763 00:37:33,616 --> 00:37:36,176 If you want to actually put it for design reasons 764 00:37:36,206 --> 00:37:38,106 in a separate file you can do 765 00:37:38,106 --> 00:37:41,496 that in a file called say styles dot CSS, which is also going 766 00:37:41,496 --> 00:37:43,316 to be in your public HTML directory. 767 00:37:43,566 --> 00:37:45,986 And if you want to tell a browser, hey, by the way, 768 00:37:46,236 --> 00:37:50,186 you have to go and load another file before showing the user 769 00:37:50,186 --> 00:37:52,596 this web page, you can use the link tag here. 770 00:37:52,836 --> 00:37:53,646 Link and then rev 771 00:37:53,646 --> 00:37:55,846 for relationship, equals style sheet. 772 00:37:56,056 --> 00:37:58,546 And then H ref here is not a link, 773 00:37:58,546 --> 00:38:02,366 it's saying go grab this other file called styles dot CSS 774 00:38:02,506 --> 00:38:06,266 from the server and then use it to display this web page. 775 00:38:06,266 --> 00:38:07,436 And we'll see in a moment what something 776 00:38:07,436 --> 00:38:08,536 like this might look like. 777 00:38:08,876 --> 00:38:10,496 Below that you see a script tag. 778 00:38:10,736 --> 00:38:12,806 And you might be able to infer from this that this relates 779 00:38:12,856 --> 00:38:14,326 to this language called JavaScript. 780 00:38:14,566 --> 00:38:16,996 So in a week or two when we're writing JavaScript code, 781 00:38:16,996 --> 00:38:20,306 if we want to integrate it into our web page but not just copy 782 00:38:20,306 --> 00:38:24,136 and paste it into the actual HTML file but keep it separate 783 00:38:24,376 --> 00:38:26,296 for design purposes and readability, 784 00:38:26,646 --> 00:38:29,146 similarly we include a file like this. 785 00:38:29,686 --> 00:38:32,366 Now just to give an example of how this works, 786 00:38:32,606 --> 00:38:37,366 if we go to say even CS 50 dot net, and I just happen to know 787 00:38:37,366 --> 00:38:39,936 from the source code that I go into -- 788 00:38:40,226 --> 00:38:43,586 let's see, styles dot -- styles dot CSS. 789 00:38:43,926 --> 00:38:44,496 That's not it. 790 00:38:44,716 --> 00:38:45,496 I don't seem to know. 791 00:38:45,936 --> 00:38:46,376 Let's do this. 792 00:38:47,096 --> 00:38:48,326 I don't remember where we put it. 793 00:38:48,326 --> 00:38:50,336 So I'm going to go ahead and right click, 794 00:38:50,336 --> 00:38:52,446 or control click, view page source. 795 00:38:52,446 --> 00:38:53,796 And you'll see that there's a whole bunch 796 00:38:53,796 --> 00:38:54,886 of stuff going on here. 797 00:38:54,886 --> 00:38:56,836 And the formatting is actually pretty messy because a lot 798 00:38:56,836 --> 00:38:59,556 of the CS 50 web site is generated by a computer, 799 00:38:59,556 --> 00:39:01,446 by programs written in PHP, 800 00:39:01,616 --> 00:39:03,766 so we don't ever really manually type this out. 801 00:39:04,056 --> 00:39:05,926 So if I kind of scroll through this, 802 00:39:05,926 --> 00:39:07,986 and it's actually a little messy here, ah, 803 00:39:07,986 --> 00:39:10,696 that's what I was looking for, I wanted this link tag 804 00:39:10,936 --> 00:39:14,296 which says the stylization for CS 50's web site is apparently 805 00:39:14,296 --> 00:39:17,236 in a folder called CSS, not styles, that's what I got wrong, 806 00:39:17,456 --> 00:39:19,486 and in a file called styles dot CSS. 807 00:39:20,086 --> 00:39:20,886 So let's go there. 808 00:39:20,886 --> 00:39:23,526 So let me update the URL to be that. 809 00:39:23,526 --> 00:39:24,686 And hit enter. 810 00:39:24,906 --> 00:39:27,726 And what we'll see and hear is more complexity than we'll dive 811 00:39:27,726 --> 00:39:30,866 into for now, but you see a whole bunch of things -- 812 00:39:30,926 --> 00:39:32,916 let's find a simple one like this. 813 00:39:33,566 --> 00:39:35,146 So you might recall that on top 814 00:39:35,146 --> 00:39:37,446 of a course's web site are often these things called -- 815 00:39:37,446 --> 00:39:40,226 announcements at the very top of the page. 816 00:39:40,226 --> 00:39:43,336 And right here we have a mention of problem set five, 817 00:39:43,336 --> 00:39:44,776 problem set six and so forth, 818 00:39:44,776 --> 00:39:47,606 and this box always has a little FYI logo up there. 819 00:39:47,806 --> 00:39:50,126 It's kind of gray background and blue links. 820 00:39:50,376 --> 00:39:52,966 Well, the means by which we did this was in here. 821 00:39:53,226 --> 00:39:55,776 Long story short, we have a Div somewhere in the page 822 00:39:55,776 --> 00:39:57,476 for this rectangular set of announcements. 823 00:39:57,766 --> 00:39:59,336 We gave it what's called an I.D., 824 00:39:59,536 --> 00:40:01,846 which is just a unique identifier 825 00:40:01,846 --> 00:40:05,026 so that we could say there might be a dozen Divs on the page, 826 00:40:05,186 --> 00:40:07,226 this is the one we want to stylize. 827 00:40:07,576 --> 00:40:12,646 So Div sharp sign FYI, and then the open curly brace, 828 00:40:12,836 --> 00:40:14,356 close curly brace, and inside 829 00:40:14,356 --> 00:40:17,086 of that is again this thing called the CSS property. 830 00:40:17,086 --> 00:40:18,836 Of the font size of those announcements, 831 00:40:18,836 --> 00:40:21,116 we decided, should be 77 percent. 832 00:40:21,116 --> 00:40:21,876 What does that mean? 833 00:40:22,186 --> 00:40:23,166 Well, we gave some thought 834 00:40:23,166 --> 00:40:25,556 to what the default font size should be on the web site, 835 00:40:25,556 --> 00:40:28,896 and decided the announcements should be 77% the size 836 00:40:28,896 --> 00:40:31,296 of the default size. 837 00:40:31,576 --> 00:40:33,036 And then how about this. 838 00:40:33,036 --> 00:40:38,526 Div sharp sign FYI A. Well, A is the anchor tag, this just refers 839 00:40:38,526 --> 00:40:40,526 to the very specific Div in the web page 840 00:40:40,526 --> 00:40:41,496 where the announcements go, 841 00:40:41,496 --> 00:40:44,916 while this is what gives the announcements their color , 842 00:40:45,026 --> 00:40:47,326 the specific color we're using which is a light blue. 843 00:40:47,566 --> 00:40:48,906 And text decoration, none. 844 00:40:49,176 --> 00:40:50,476 You might recall that on the web 845 00:40:50,476 --> 00:40:52,696 by default most links are underlined, 846 00:40:52,806 --> 00:40:53,966 just to draw attention to them. 847 00:40:53,966 --> 00:40:55,306 But this is falling out of vogue. 848 00:40:55,556 --> 00:40:58,316 So the means by which you disable underlining is a CSS 849 00:40:58,316 --> 00:41:01,596 property called text decoration, colon, none. 850 00:41:01,676 --> 00:41:02,946 Do not decorate the links. 851 00:41:03,396 --> 00:41:06,396 And so this is again just a teaser of the sorts 852 00:41:06,396 --> 00:41:07,296 of things you can see. 853 00:41:07,296 --> 00:41:09,756 And just realize that the CS 50 site is more complex 854 00:41:09,816 --> 00:41:11,116 than a typical one. 855 00:41:11,116 --> 00:41:13,096 And frankly, if we go to something like Facebook, 856 00:41:13,096 --> 00:41:16,306 let me go ahead and pull up view page source, I mean, 857 00:41:16,306 --> 00:41:20,176 you'll see a whole bunch of HTML here, also machine generated. 858 00:41:20,176 --> 00:41:21,726 So it's a bit messy to read. 859 00:41:21,996 --> 00:41:25,666 But if we scroll to the very top, there's the doc type. 860 00:41:25,666 --> 00:41:27,726 So that part of our story is true thus far, 861 00:41:27,726 --> 00:41:28,606 that that's part of the web. 862 00:41:28,906 --> 00:41:30,496 HTML is there. 863 00:41:30,846 --> 00:41:32,956 There's some other attributes that we haven't used. 864 00:41:32,956 --> 00:41:35,356 But those don't really change the story. 865 00:41:35,356 --> 00:41:37,426 There it is, title, welcome to Facebook, 866 00:41:37,426 --> 00:41:39,146 log in, sign up, or learn. 867 00:41:39,446 --> 00:41:40,536 And here's some CSS. 868 00:41:40,536 --> 00:41:42,126 So let's see what Mark 869 00:41:42,126 --> 00:41:43,896 and company have been writing in the way of CSS. 870 00:41:43,896 --> 00:41:46,426 If we go -- let's choose this. 871 00:41:46,426 --> 00:41:48,756 I have no idea what this file name means, but I'm going 872 00:41:48,756 --> 00:41:51,586 to copy the URL, paste it, and it looks like someone 873 00:41:51,586 --> 00:41:53,616 at Facebook wrote all of this CSS. 874 00:41:53,616 --> 00:41:56,396 If I take this one here, someone 875 00:41:56,396 --> 00:41:58,686 at Facebook wrote all of this CSS. 876 00:41:58,686 --> 00:42:01,336 And again, not interesting to glance 877 00:42:01,336 --> 00:42:05,046 at except there are some sort of self-explanatory things, 878 00:42:05,096 --> 00:42:06,636 things about background images. 879 00:42:06,666 --> 00:42:08,706 So that's how they have some image on the screen, 880 00:42:09,086 --> 00:42:10,866 things about width and so forth. 881 00:42:11,216 --> 00:42:14,426 And then if we go to JavaScript, just as a teaser for next week, 882 00:42:14,906 --> 00:42:16,966 let's go into this cryptically-named URL. 883 00:42:17,666 --> 00:42:19,376 Here is a whole bunch 884 00:42:19,376 --> 00:42:21,286 of JavaScript code that someone wrote. 885 00:42:21,606 --> 00:42:24,066 Lest you completely freak out as to what's on the horizon, 886 00:42:24,746 --> 00:42:26,126 they wrote this JavaScript 887 00:42:26,226 --> 00:42:29,746 and then did what's called obfuscating it, or minifying it 888 00:42:29,896 --> 00:42:32,636 for reasons of bandwidth and cost, 889 00:42:32,856 --> 00:42:35,076 and also sometimes intellectual property. 890 00:42:35,076 --> 00:42:38,096 You might write JavaScript code in a very readable way. 891 00:42:38,096 --> 00:42:40,366 This is not what we're going to write. 892 00:42:40,396 --> 00:42:42,716 You use nice indentation, nice variable names, 893 00:42:42,716 --> 00:42:43,966 nice function names and the like. 894 00:42:44,326 --> 00:42:46,286 But when it comes time to post that code 895 00:42:46,286 --> 00:42:48,226 on the internet clearly any random guy 896 00:42:48,226 --> 00:42:49,626 with a browser can look at it, 897 00:42:49,886 --> 00:42:53,556 and also white space is useless for a computer. 898 00:42:53,556 --> 00:42:55,266 It's only really useful for a human. 899 00:42:55,486 --> 00:42:57,766 So to save money, because transferring data certainly 900 00:42:57,766 --> 00:43:00,156 on Facebook scale cost money over time, because they have 901 00:43:00,156 --> 00:43:01,546 to pay someone to transfer data. 902 00:43:01,886 --> 00:43:03,976 And because they don't necessarily want My Space 903 00:43:03,976 --> 00:43:06,236 or someone else copying all of their fancy features 904 00:43:06,236 --> 00:43:07,806 out right, you can minify it. 905 00:43:08,016 --> 00:43:10,656 Which does not make it impossible for smart people 906 00:43:10,656 --> 00:43:14,006 to figure out how your code works, but it raises the bar. 907 00:43:14,006 --> 00:43:15,706 And this too is a theme in security 908 00:43:15,706 --> 00:43:17,186 and intellectual property in general. 909 00:43:17,376 --> 00:43:20,276 You really can't keep someone from figuring out 910 00:43:20,276 --> 00:43:22,896 or understanding or even duplicating your handiwork, 911 00:43:23,166 --> 00:43:24,776 but you can at least raise the bar 912 00:43:24,776 --> 00:43:27,186 so that it's more time consuming or more expensive for them 913 00:43:27,186 --> 00:43:29,356 to figure it out than it would be if they just started 914 00:43:29,356 --> 00:43:31,666 from scratch and wrote it themselves. 915 00:43:31,896 --> 00:43:34,616 But the exception there relates to anything server-side. 916 00:43:34,616 --> 00:43:36,696 So HTML, CSS, and as we'll see, 917 00:43:36,696 --> 00:43:39,076 JavaScript is all client-side, so to speak. 918 00:43:39,076 --> 00:43:39,956 It's in the browser. 919 00:43:40,206 --> 00:43:43,806 All the PHP we write, all the database stuff we do is going 920 00:43:43,806 --> 00:43:44,836 to be server-side. 921 00:43:44,836 --> 00:43:47,456 And that's where really the intellectual property is. 922 00:43:47,456 --> 00:43:51,446 And frankly, Facebook's value it in its data and it's users, 923 00:43:51,446 --> 00:43:54,166 not in some random JavaScript code they've been writing, 924 00:43:54,166 --> 00:43:56,316 as much as that might please users. 925 00:43:56,816 --> 00:43:59,616 So let's take a look now at a familiar web site and see 926 00:43:59,616 --> 00:44:02,066 if we can't implement a little something like it ourselves. 927 00:44:02,066 --> 00:44:03,306 So here is Google.com. 928 00:44:03,306 --> 00:44:05,346 I'm going to go ahead and do one thing first, 929 00:44:05,346 --> 00:44:06,846 because Google's getting a little too fancy 930 00:44:06,846 --> 00:44:07,466 for its own good. 931 00:44:07,466 --> 00:44:10,946 I'm going to go to search settings and I am going 932 00:44:11,026 --> 00:44:13,026 to turn off Google instant. 933 00:44:13,296 --> 00:44:14,706 Google instant, as you may know, 934 00:44:14,706 --> 00:44:16,856 is a feature introduced a few months ago and it all 935 00:44:16,856 --> 00:44:18,876 of a sudden, like, shows you your search results before you 936 00:44:18,876 --> 00:44:19,386 hit enter. 937 00:44:19,386 --> 00:44:21,116 I want to kind of do it old-school style 938 00:44:21,116 --> 00:44:23,166 so we don't get ahead of ourselves, because I want 939 00:44:23,166 --> 00:44:26,116 to actually have to click a submit button before we actually 940 00:44:26,116 --> 00:44:27,026 search for something. 941 00:44:27,346 --> 00:44:29,736 So here we have now the Google homepage. 942 00:44:29,736 --> 00:44:31,376 And I'm going to go ahead and search 943 00:44:31,376 --> 00:44:33,996 for something like Harvard. 944 00:44:34,296 --> 00:44:37,576 Enter. And viola, once I hit enter, Harvard, 945 00:44:37,576 --> 00:44:38,966 thankfully, is the top hit here. 946 00:44:39,196 --> 00:44:42,066 So now we actually see the page of search results. 947 00:44:42,066 --> 00:44:43,266 How did this happen? 948 00:44:43,596 --> 00:44:44,926 Well, let's look a little closer. 949 00:44:44,926 --> 00:44:47,436 Here's before, originally the default homepage. 950 00:44:47,436 --> 00:44:48,396 And here's the URL. 951 00:44:48,676 --> 00:44:51,436 Notice that chrome is being a little excessively 952 00:44:51,436 --> 00:44:52,156 user friendly. 953 00:44:52,156 --> 00:44:55,946 What's really there is this, but for reasons of aesthetics 954 00:44:55,946 --> 00:44:59,246 and simplicity a lot of produce browsers are just hiding this, 955 00:44:59,246 --> 00:45:02,736 but HTTP://is implicitly there, and now notice 956 00:45:02,736 --> 00:45:05,726 when I actually click submit after searching for Harvard, 957 00:45:05,726 --> 00:45:08,606 enter, notice that the URL changes 958 00:45:08,876 --> 00:45:11,086 to something much, much more complex. 959 00:45:11,256 --> 00:45:14,026 Though it's all related to what I just did. 960 00:45:14,026 --> 00:45:15,126 Let me go ahead and copy this. 961 00:45:15,126 --> 00:45:17,826 Let me go ahead and open just a temporary text file 962 00:45:17,826 --> 00:45:19,086 and paste this in. 963 00:45:19,086 --> 00:45:20,776 Just so we can see it a little more clearly. 964 00:45:20,776 --> 00:45:23,006 And it's definitely an ugly URL 965 00:45:23,006 --> 00:45:25,116 but let's just throw away anything that confuses us. 966 00:45:25,166 --> 00:45:27,786 So I have no idea what this is, but it seems like it relates 967 00:45:27,786 --> 00:45:33,006 to English, EN is generally the short hand notation for English. 968 00:45:33,366 --> 00:45:35,256 Source, I don't really know what H P is. 969 00:45:35,286 --> 00:45:36,186 So I'm going to delete that. 970 00:45:36,186 --> 00:45:39,496 B I W -- I don't know what that is. 971 00:45:39,846 --> 00:45:41,276 B I H, maybe height? 972 00:45:41,646 --> 00:45:43,456 Maybe there's a width thing going on here. 973 00:45:43,626 --> 00:45:45,076 Okay, Q equals Harvard. 974 00:45:45,406 --> 00:45:46,246 Sounds familiar. 975 00:45:46,246 --> 00:45:48,056 So Q, query probably. 976 00:45:48,356 --> 00:45:49,236 So let's leave that. 977 00:45:49,496 --> 00:45:53,346 Let me -- O Q, I didn't type O Q. So let's get rid of that. 978 00:45:53,906 --> 00:45:56,876 No idea what this is, definitely no idea what this number is. 979 00:45:57,106 --> 00:45:59,136 So Google is doing a lot of stuff, right? 980 00:45:59,136 --> 00:46:02,866 They do advertising, that's the technical explanation. 981 00:46:02,906 --> 00:46:07,296 This, though, this was like version 1, when Larry 982 00:46:07,296 --> 00:46:10,956 and Sergei first made Google it really did work as simply 983 00:46:10,956 --> 00:46:13,186 as this, with one input coming 984 00:46:13,186 --> 00:46:16,636 from the user before all this era of advertising 985 00:46:16,636 --> 00:46:17,986 and the like, and user tracking. 986 00:46:18,336 --> 00:46:20,876 So let's see what happens if I just take this URL, 987 00:46:21,116 --> 00:46:23,436 go back to a browser, click enter. 988 00:46:23,436 --> 00:46:25,456 So it actually still works. 989 00:46:25,636 --> 00:46:28,926 So even sort of old-school style this URL works. 990 00:46:28,926 --> 00:46:30,146 And this is nice, because I can kind 991 00:46:30,146 --> 00:46:31,636 of wrap my mind around this URL. 992 00:46:31,636 --> 00:46:33,036 The other one's a little overwhelming. 993 00:46:33,296 --> 00:46:36,286 So notice that by default the text field is being filled 994 00:46:36,286 --> 00:46:37,266 in with the word Harvard. 995 00:46:37,416 --> 00:46:40,506 At the top I have Google.com/search?Q 996 00:46:40,756 --> 00:46:42,886 equalsHarvard. 997 00:46:43,156 --> 00:46:44,326 So let's tease these things apart. 998 00:46:44,326 --> 00:46:48,216 So the domain name here is www.google.com. 999 00:46:48,216 --> 00:46:50,486 Slash denotes the root of the hard drive, 1000 00:46:50,526 --> 00:46:51,916 the server that Google is using. 1001 00:46:51,916 --> 00:46:53,856 Now in reality, they have thousands of servers. 1002 00:46:53,856 --> 00:46:54,616 Let's simplify. 1003 00:46:54,616 --> 00:46:55,376 One server. 1004 00:46:55,676 --> 00:46:59,566 And so in that server's hard drive is apparently a file 1005 00:46:59,566 --> 00:47:00,366 called search. 1006 00:47:00,486 --> 00:47:02,156 And that file is a program. 1007 00:47:02,526 --> 00:47:05,046 Maybe it's written in PHP, Python, C, 1008 00:47:05,046 --> 00:47:06,736 C++ who knows right now. 1009 00:47:06,896 --> 00:47:08,166 Generally, Google does a lot of stuff 1010 00:47:08,166 --> 00:47:09,576 in Python and other languages. 1011 00:47:09,956 --> 00:47:13,536 So slash searchs the program and it turns out that the convention 1012 00:47:13,536 --> 00:47:16,286 on the web is any time you have a question mark, 1013 00:47:16,586 --> 00:47:20,006 after that question mark are the inputs to the server. 1014 00:47:20,306 --> 00:47:23,626 So just as in C you can provide inputs via the command line 1015 00:47:23,906 --> 00:47:26,456 or by using get string or similar and waiting 1016 00:47:26,456 --> 00:47:27,806 at a prompt and typing enter. 1017 00:47:28,096 --> 00:47:33,166 The web works in such a way that servers take input by way 1018 00:47:33,166 --> 00:47:38,136 of URLs with question marks an then key value pairs after them. 1019 00:47:38,136 --> 00:47:42,046 So Q is the key, equal sign separates it from its value, 1020 00:47:42,046 --> 00:47:43,536 which in this case is Harvard. 1021 00:47:43,736 --> 00:47:46,826 And if you have multiple ones, they're separated by ampersand. 1022 00:47:46,826 --> 00:47:48,376 So if I had X equals Y 1023 00:47:48,646 --> 00:47:52,176 and W equals Z we could just separate them by ampersands. 1024 00:47:52,176 --> 00:47:55,366 And that was I deleted, recall, a whole bunch of ampersands. 1025 00:47:55,686 --> 00:47:59,166 So that's how Google's apparently working. 1026 00:47:59,366 --> 00:48:02,056 But how did the web page lead me to that URL. 1027 00:48:02,056 --> 00:48:02,916 I didn't click a link. 1028 00:48:03,036 --> 00:48:04,906 I typed in the word Harvard, hit enter, 1029 00:48:05,116 --> 00:48:06,986 and magically this URL changed. 1030 00:48:07,226 --> 00:48:09,256 So let's go back to Google's homepage and see 1031 00:48:09,256 --> 00:48:11,166 if we can't make a little bit of sense of it. 1032 00:48:11,286 --> 00:48:12,866 So I'm going to view page source. 1033 00:48:13,376 --> 00:48:15,076 And oh my God, this is going to be a lot 1034 00:48:15,076 --> 00:48:16,586 of stuff to delete, right? 1035 00:48:16,586 --> 00:48:18,766 So as an aside, especially someone like Google, 1036 00:48:19,076 --> 00:48:21,596 there's fascinating scaleability effects here. 1037 00:48:21,596 --> 00:48:24,326 Someone at Google so much as hits the space bar once 1038 00:48:24,676 --> 00:48:27,916 which creates a single byte of white space and then everyone 1039 00:48:27,916 --> 00:48:30,456 in the world proceeds to download that homepage in a day, 1040 00:48:30,456 --> 00:48:32,076 suppose Google gets a billion hits. 1041 00:48:32,166 --> 00:48:34,366 The mere fact that some programmer hit the space bar 1042 00:48:34,606 --> 00:48:37,116 means 1 billion extra bytes were sent 1043 00:48:37,116 --> 00:48:39,776 from Google throughout the whole world, that's a gigabyte, 1044 00:48:40,036 --> 00:48:41,606 just because someone hit the space bar. 1045 00:48:41,856 --> 00:48:43,826 So one of the things Facebook and Google and all 1046 00:48:43,826 --> 00:48:46,656 of these big sites do is again, they minify their code. 1047 00:48:46,656 --> 00:48:47,926 They throw away white space, 1048 00:48:47,966 --> 00:48:49,876 they automatically shrink variable names 1049 00:48:50,136 --> 00:48:51,216 so that it's not readable. 1050 00:48:51,216 --> 00:48:55,396 Both for obscurity purposes, but also for financial purposes. 1051 00:48:55,756 --> 00:48:56,716 So let's scroll down. 1052 00:48:56,716 --> 00:48:58,656 Oh my God, a lot of HTML here. 1053 00:48:58,846 --> 00:48:59,556 But that's okay. 1054 00:48:59,556 --> 00:49:01,256 Let me actually go inside of the appliance 1055 00:49:01,256 --> 00:49:02,376 and use a different browser. 1056 00:49:02,376 --> 00:49:04,606 Because by default, Firefox, recall, 1057 00:49:04,606 --> 00:49:06,186 comes with some tools preinstalled. 1058 00:49:06,396 --> 00:49:09,236 We used one on Monday called LiveHTTPHeaders 1059 00:49:09,466 --> 00:49:11,386 which just let us sniff the traffic going 1060 00:49:11,436 --> 00:49:12,896 from browser and server and back. 1061 00:49:13,166 --> 00:49:15,586 But today I want to use an even more popular tool 1062 00:49:15,586 --> 00:49:16,756 called Firebug. 1063 00:49:17,046 --> 00:49:21,786 So Firebug is a free plug in for Firefox, comes in the appliance, 1064 00:49:21,786 --> 00:49:23,146 but you can download it for your Mac or PC. 1065 00:49:23,146 --> 00:49:26,466 And what it allows you to do is actually look inside 1066 00:49:26,466 --> 00:49:29,446 of web pages a little more neatly. 1067 00:49:29,446 --> 00:49:32,396 So I'm going to go ahead and again disable instant search, 1068 00:49:32,396 --> 00:49:34,746 because I want the old-school behavior. 1069 00:49:35,206 --> 00:49:36,076 Save preferences. 1070 00:49:36,606 --> 00:49:39,016 And now I'm inside of the appliance. 1071 00:49:39,396 --> 00:49:40,496 I'm at Google.com. 1072 00:49:40,496 --> 00:49:42,286 I'm going to right click or control click. 1073 00:49:42,286 --> 00:49:45,376 And notice once you install Firebug you have a special menu 1074 00:49:45,376 --> 00:49:47,106 here that shows up called inspect element. 1075 00:49:47,106 --> 00:49:48,256 I'm going to click this, 1076 00:49:48,256 --> 00:49:51,176 and what this does is it opens a little window at the bottom 1077 00:49:51,176 --> 00:49:53,386 of the browser that does a bunch of things. 1078 00:49:53,426 --> 00:49:56,376 But the most useful it just cleans everything up. 1079 00:49:56,376 --> 00:49:58,566 It adds white space, it adds indentation. 1080 00:49:58,786 --> 00:50:01,136 So as you're trying to learn how web sites work 1081 00:50:01,136 --> 00:50:03,856 or if you're trying to borrow someone else's design you can 1082 00:50:03,856 --> 00:50:06,136 actually see much more neatly in this way. 1083 00:50:06,406 --> 00:50:08,446 So here we have the doc type declaration, 1084 00:50:08,446 --> 00:50:10,566 here's the HTML tag, here's the head tag, 1085 00:50:10,566 --> 00:50:13,766 and notice I can even collapse these things to help stay sane 1086 00:50:13,766 --> 00:50:14,966 as I'm exploring this. 1087 00:50:15,346 --> 00:50:16,836 So let's go into the body here. 1088 00:50:17,126 --> 00:50:19,956 It looks like there is a Div tag, 1089 00:50:19,956 --> 00:50:22,286 an I frame tag, a center tag. 1090 00:50:22,566 --> 00:50:23,926 You know, I don't know what most of these are yet, 1091 00:50:23,926 --> 00:50:26,006 but center probably means make this centered. 1092 00:50:26,006 --> 00:50:27,936 So we keep going, keep going. 1093 00:50:28,176 --> 00:50:29,636 Here's the interesting one today. 1094 00:50:30,246 --> 00:50:33,866 So web sites become dynamic when they actually take user input. 1095 00:50:33,976 --> 00:50:36,756 They have text fields or drop down menus or check boxes, 1096 00:50:36,756 --> 00:50:38,856 all of these very familiar, mundane things, 1097 00:50:39,026 --> 00:50:41,076 but this is what now makes the web interesting 1098 00:50:41,076 --> 00:50:43,466 because the page can change every time I visit it 1099 00:50:43,766 --> 00:50:45,936 if it has something called a form. 1100 00:50:46,146 --> 00:50:47,426 So if I scroll down here, 1101 00:50:48,046 --> 00:50:50,986 apparently there's a tag in HTML called form. 1102 00:50:50,986 --> 00:50:52,526 It can take a bunch of attributes, 1103 00:50:52,526 --> 00:50:54,816 one of which is name, one of which is action. 1104 00:50:55,186 --> 00:50:59,466 Well, action has a value, and the action attribute is defined 1105 00:50:59,666 --> 00:51:03,266 in HTML documentation as being the URL 1106 00:51:03,266 --> 00:51:06,176 to which you will be sent upon submitting the form. 1107 00:51:06,336 --> 00:51:08,276 So read -- skim the manual, that's what it says. 1108 00:51:08,516 --> 00:51:10,716 So this is sort of a shorthand URL. 1109 00:51:10,956 --> 00:51:14,796 Because there's no http://the browser is going to assume 1110 00:51:15,026 --> 00:51:16,446 that slash search refers 1111 00:51:16,446 --> 00:51:18,706 to whatever server got me to this point. 1112 00:51:18,706 --> 00:51:21,086 It's going to assume the default of Google.com. 1113 00:51:21,436 --> 00:51:23,336 Now there's a bunch of distractions in here. 1114 00:51:24,226 --> 00:51:27,456 This is the source of some of those crazy names we saw, 1115 00:51:27,676 --> 00:51:31,656 in put O Q, A Q, A Q I, A Q L and so forth. 1116 00:51:31,756 --> 00:51:33,386 Well, notice these are all hidden. 1117 00:51:33,386 --> 00:51:35,976 Firebug is friendly and trying to gray them out, 1118 00:51:35,976 --> 00:51:38,346 just to draw my attention to the fact that these are inputs 1119 00:51:38,386 --> 00:51:40,336 that are there, but Google put them there. 1120 00:51:40,336 --> 00:51:41,876 They're not things that I can see. 1121 00:51:42,136 --> 00:51:45,946 But I want to see Q and the form that I'm actually filling out. 1122 00:51:45,946 --> 00:51:48,246 So turns out there's a table tag in HTML. 1123 00:51:48,496 --> 00:51:51,436 There's a table body tag, there's a table row tag, 1124 00:51:51,436 --> 00:51:54,726 there's a table data tag, and if I keep going in here, 1125 00:51:55,246 --> 00:51:57,536 notice that, okay, finally something a little 1126 00:51:57,536 --> 00:51:58,496 more familiar. 1127 00:51:58,496 --> 00:52:00,686 There's more Divs, there's a B R input. 1128 00:52:00,866 --> 00:52:02,126 But this is interesting. 1129 00:52:02,426 --> 00:52:03,556 There's an input tag. 1130 00:52:03,776 --> 00:52:06,126 An input tag, that takes a bunch of attributes. 1131 00:52:06,276 --> 00:52:08,986 One of which is type equals submit. 1132 00:52:08,986 --> 00:52:10,896 This is what makes it a button that's clickable. 1133 00:52:11,166 --> 00:52:12,366 Another of which is value. 1134 00:52:12,366 --> 00:52:14,806 So if you've ever wondered where the label 1135 00:52:14,806 --> 00:52:16,436 from a button comes from, actually, 1136 00:52:16,436 --> 00:52:18,436 no one probably ever wondered that, but now if you want 1137 00:52:18,436 --> 00:52:20,296 to know, the value -- the label 1138 00:52:20,296 --> 00:52:23,626 on these clickable buttons is coming precisely from this HTML. 1139 00:52:23,626 --> 00:52:25,746 And the I am feeling lucky button that's been part 1140 00:52:25,746 --> 00:52:28,546 of Google's history is right here as well. 1141 00:52:28,786 --> 00:52:31,186 Now as an aside, the nice thing about Firebug, too, 1142 00:52:31,356 --> 00:52:33,816 is that you can actually tinker with the web site. 1143 00:52:33,816 --> 00:52:37,806 I can even say, you know, I can go into the HTML here, 1144 00:52:37,866 --> 00:52:40,886 and I could say I'm feeling, say, unlucky. 1145 00:52:41,236 --> 00:52:44,416 Enter. And viola, I changed Google.com. 1146 00:52:44,416 --> 00:52:45,696 Obviously not. 1147 00:52:45,696 --> 00:52:46,846 I just changed it locally. 1148 00:52:46,846 --> 00:52:48,686 But the value here is I can actually tinker 1149 00:52:48,686 --> 00:52:50,106 with my web site, with others, 1150 00:52:50,106 --> 00:52:51,916 just to understand how they work. 1151 00:52:51,916 --> 00:52:54,196 If you pull up Google.com now it will still say I'm 1152 00:52:54,196 --> 00:52:54,956 feeling lucky. 1153 00:52:55,326 --> 00:52:59,786 So what's the take-away here, it seems that this is the beginning 1154 00:52:59,786 --> 00:53:02,996 of a dynamic web site that is really a program. 1155 00:53:02,996 --> 00:53:05,376 It's a form, this is the means by which we're getting input. 1156 00:53:05,526 --> 00:53:08,256 And now Google is providing the back end intelligence 1157 00:53:08,506 --> 00:53:09,186 for searching. 1158 00:53:09,506 --> 00:53:12,306 So let's see if I can't now leverage this same idea 1159 00:53:12,306 --> 00:53:14,026 and reinvent this wheel 1160 00:53:14,026 --> 00:53:16,536 and customize it for my own web site. 1161 00:53:16,636 --> 00:53:19,566 Let me go into G edit here. 1162 00:53:20,016 --> 00:53:21,556 Let me go ahead and create a new file. 1163 00:53:21,556 --> 00:53:23,976 I'm going to save this at Google dot HTML. 1164 00:53:24,106 --> 00:53:27,446 Enter. I'm going to go ahead and do a bunch of familiar -- 1165 00:53:27,446 --> 00:53:29,776 actually, I'm going to go ahead and copy-paste, 1166 00:53:29,986 --> 00:53:31,246 and change some things. 1167 00:53:31,286 --> 00:53:34,506 So I am going to call this CS 50 search. 1168 00:53:34,876 --> 00:53:37,586 We're going to ditch yesterday's pink background. 1169 00:53:38,156 --> 00:53:41,206 We're going to get rid of all of this, in fact. 1170 00:53:41,466 --> 00:53:43,926 So let's just get to the bare bones of a web site here. 1171 00:53:44,186 --> 00:53:46,196 So now we have something pretty minimal. 1172 00:53:46,196 --> 00:53:48,226 And now I'm going to borrow this new trick. 1173 00:53:48,226 --> 00:53:50,636 I'm going to say I like that center tag. 1174 00:53:50,636 --> 00:53:52,186 That's kind of friendly. 1175 00:53:52,186 --> 00:53:52,956 So let's do that. 1176 00:53:52,956 --> 00:53:55,106 Now I'm going to do a form tag. 1177 00:53:55,446 --> 00:53:58,236 A form needs a name -- it actually doesn't need a name, 1178 00:53:58,236 --> 00:53:59,116 so I'm going to skip that one. 1179 00:53:59,116 --> 00:54:00,786 But it needs an action. 1180 00:54:00,856 --> 00:54:01,836 Slash search. 1181 00:54:02,276 --> 00:54:04,296 Let me close this tag, form. 1182 00:54:04,456 --> 00:54:06,376 And then this form has to have a few things. 1183 00:54:06,376 --> 00:54:07,806 And we didn't look at this one explicitly, 1184 00:54:07,806 --> 00:54:09,596 but there was another input type equals text. 1185 00:54:10,446 --> 00:54:12,186 And what was its thing. 1186 00:54:12,186 --> 00:54:12,916 Let's take a look. 1187 00:54:12,916 --> 00:54:16,256 Back at the HTML, let's do a quick control click 1188 00:54:16,256 --> 00:54:19,046 or right click, and actually if you click on specific things, 1189 00:54:19,046 --> 00:54:20,596 if you right click on the form field 1190 00:54:20,646 --> 00:54:22,846 and click inspect element it will jump right to it, 1191 00:54:23,056 --> 00:54:24,946 so you don't have to futz around trying to find it. 1192 00:54:25,316 --> 00:54:28,326 So notice this is a pretty big input tag with a lot 1193 00:54:28,326 --> 00:54:29,696 of attributes, apparently. 1194 00:54:29,696 --> 00:54:33,186 But the only one I care about is here, at the very bottom. 1195 00:54:33,256 --> 00:54:36,036 One of the attributes is name equals quote unquote Q. 1196 00:54:36,036 --> 00:54:40,026 So I am going to steal that same HTML and reimplement it myself. 1197 00:54:40,116 --> 00:54:40,846 So here we go. 1198 00:54:40,846 --> 00:54:42,186 Input type equals text. 1199 00:54:43,046 --> 00:54:47,646 Name equals Q. And I'm not going to give it a value, 1200 00:54:47,726 --> 00:54:49,196 but I am going to have a button. 1201 00:54:49,226 --> 00:54:51,426 Input type equals submit. 1202 00:54:51,916 --> 00:54:54,396 Value equals CS 50 search. 1203 00:54:54,816 --> 00:54:56,066 And let's see where this gets us. 1204 00:54:56,066 --> 00:54:58,176 I'm going to save it with this pretty minimalist design. 1205 00:54:58,426 --> 00:55:00,946 I'm going to go -- let's see, I want to open this in a browser. 1206 00:55:00,946 --> 00:55:02,726 I'm going to go back to the appliances desk top. 1207 00:55:02,726 --> 00:55:05,596 I'm going to go into my home directory, actually, nope, 1208 00:55:05,716 --> 00:55:07,736 let's do it via the web browser. 1209 00:55:07,736 --> 00:55:11,736 So local host, slash, tilde, J, Harvard, Google dot HTML. 1210 00:55:11,806 --> 00:55:15,966 Okay, not quite Google, but I'm on my way. 1211 00:55:16,126 --> 00:55:18,326 Right? So I have a form here with a text box. 1212 00:55:18,366 --> 00:55:19,926 I have a button CS 50 search. 1213 00:55:19,926 --> 00:55:20,846 But it's not quite Google 1214 00:55:20,846 --> 00:55:23,316 yet because the button I really wanted on the next line. 1215 00:55:23,656 --> 00:55:26,096 So what was the trick for fixing this issue yesterday -- Monday? 1216 00:55:26,096 --> 00:55:28,786 So we can do like a B R tag. 1217 00:55:28,896 --> 00:55:31,406 Let's see, let's save and reload. 1218 00:55:31,406 --> 00:55:33,926 Okay, so it's not quite as pretty as Google. 1219 00:55:33,926 --> 00:55:36,026 But let's even add their I'm feeling lucky button. 1220 00:55:36,026 --> 00:55:39,286 So input type equals say submit. 1221 00:55:39,986 --> 00:55:43,226 Value equals I'm feeling lucky. 1222 00:55:43,906 --> 00:55:45,406 And close quotes. 1223 00:55:45,526 --> 00:55:47,106 Let me reload my browser. 1224 00:55:47,106 --> 00:55:49,256 Okay, starting to look like Google. 1225 00:55:49,256 --> 00:55:53,006 And in fact, if we really want to be ridiculous, 1226 00:55:53,006 --> 00:55:57,096 if we go to a particular URL here, 1227 00:55:57,096 --> 00:56:01,056 let me steal from our demos today. 1228 00:56:01,056 --> 00:56:03,746 CS 50 search. 1229 00:56:04,216 --> 00:56:08,196 Nice. All right, so now I have my own logo. 1230 00:56:08,716 --> 00:56:09,356 Save image. 1231 00:56:09,356 --> 00:56:11,696 I'm going to save it as search.jif. 1232 00:56:11,696 --> 00:56:15,526 I'm going to put it into where? 1233 00:56:15,526 --> 00:56:17,706 John Harvard's public HTML directory? 1234 00:56:17,706 --> 00:56:19,186 I'm going to click save. 1235 00:56:19,986 --> 00:56:22,126 Okay, I'm going to go back to my HTML. 1236 00:56:22,126 --> 00:56:23,306 I need that image tag. 1237 00:56:23,306 --> 00:56:29,866 So let me go up here and do I-M-G-S-R-C equals search.jif. 1238 00:56:29,866 --> 00:56:31,916 I need a line break. 1239 00:56:32,466 --> 00:56:34,056 So let's reload my browser. 1240 00:56:35,566 --> 00:56:36,546 Reload. Hmm. 1241 00:56:36,936 --> 00:56:37,566 Not appearing. 1242 00:56:38,816 --> 00:56:42,796 Why? Yeah, so might be a permissions issue. 1243 00:56:42,796 --> 00:56:43,326 So let's check. 1244 00:56:43,326 --> 00:56:45,626 Let me open a terminal window, and let me go 1245 00:56:45,626 --> 00:56:47,706 into my public HTML directory. 1246 00:56:47,706 --> 00:56:50,826 Let me do an L S. But wait, L S isn't good enough, 1247 00:56:50,826 --> 00:56:52,796 L S dash L for the long listing. 1248 00:56:53,086 --> 00:56:55,376 And sure enough, there's search.jif, 1249 00:56:55,496 --> 00:56:58,366 but it means only I have read and write permission. 1250 00:56:58,366 --> 00:57:02,326 So the fix for this, recall, was [Inaudible] all A plus R, 1251 00:57:02,326 --> 00:57:04,816 all plus read, search.jif. 1252 00:57:05,406 --> 00:57:07,456 Enter. Let's go back to the browser. 1253 00:57:07,456 --> 00:57:10,026 Sometimes you see like a broken icon or something like that. 1254 00:57:10,026 --> 00:57:12,706 But Firefox in LINUX apparently just shows it as white. 1255 00:57:13,116 --> 00:57:14,026 Very nice. 1256 00:57:14,156 --> 00:57:15,306 Now we're on our way here. 1257 00:57:15,586 --> 00:57:17,536 So now let me go ahead and search for Harvard an see 1258 00:57:17,536 --> 00:57:19,006 if I'm done implementing Google. 1259 00:57:19,706 --> 00:57:21,386 Hmm. Okay. 1260 00:57:22,106 --> 00:57:22,896 So not found. 1261 00:57:23,226 --> 00:57:25,896 So obviously I'm cutting some corners, 1262 00:57:25,896 --> 00:57:26,976 among which is I didn't implement search, right? 1263 00:57:27,046 --> 00:57:29,796 I didn't implement a program in PHP 1264 00:57:29,856 --> 00:57:31,226 or any language called search. 1265 00:57:31,226 --> 00:57:32,546 Okay, that's fine. 1266 00:57:32,716 --> 00:57:35,286 You know, I'm pushing up against the deadline here. 1267 00:57:35,286 --> 00:57:35,946 P set's due. 1268 00:57:35,946 --> 00:57:40,916 HTTP, www.Google.com/search. 1269 00:57:41,256 --> 00:57:43,566 So let's go back here. 1270 00:57:45,096 --> 00:57:47,036 Reload. Got to reload your HTML, 1271 00:57:47,036 --> 00:57:48,316 otherwise the change won't take effect. 1272 00:57:48,546 --> 00:57:50,756 Now I got Harvard, CS 50 search. 1273 00:57:51,096 --> 00:57:54,326 Nice. I have reimplemented Google. 1274 00:57:55,516 --> 00:57:58,996 [ Applause ] 1275 00:57:59,496 --> 00:58:01,266 >> All right, so clearly we cut some corners. 1276 00:58:01,336 --> 00:58:04,876 So let's see how we can start implementing things underneath 1277 00:58:04,916 --> 00:58:05,776 the hood there. 1278 00:58:05,776 --> 00:58:09,096 Let me go over to G edit here. 1279 00:58:09,096 --> 00:58:10,126 This is all HTML. 1280 00:58:10,126 --> 00:58:14,076 Feels like it's going to be time to introduce a bit of PHP. 1281 00:58:14,826 --> 00:58:17,466 So PHP is now an actual programming language. 1282 00:58:17,466 --> 00:58:19,616 It's a language that's going to be executed server side, 1283 00:58:19,616 --> 00:58:20,816 not inside the browser. 1284 00:58:21,076 --> 00:58:22,986 So anything we do with PHP is never going 1285 00:58:22,986 --> 00:58:23,956 to be seen by the user. 1286 00:58:24,186 --> 00:58:27,676 But using the equivalent of print dev we can write PHP code 1287 00:58:27,676 --> 00:58:31,136 that spits out HTML that spits out CSS, 1288 00:58:31,136 --> 00:58:35,306 and we can dynamically create our web pages. 1289 00:58:35,306 --> 00:58:39,956 So let me actually go ahead and download some of today's code. 1290 00:58:39,956 --> 00:58:41,266 Let me go back to lectures. 1291 00:58:41,296 --> 00:58:43,836 Let me scroll down here. 1292 00:58:44,506 --> 00:58:45,536 Source code. 1293 00:58:45,536 --> 00:58:48,646 And let me download -- actually, let's do this. 1294 00:58:48,646 --> 00:58:51,676 I feel like people are getting antsy. 1295 00:58:51,676 --> 00:58:52,866 Let's take a two-minute break. 1296 00:58:52,986 --> 00:58:54,926 I'm going to go ahead and download some code 1297 00:58:54,926 --> 00:58:55,666 and then we'll come back 1298 00:58:55,666 --> 00:58:59,426 and start writing this back end ourselves. 1299 00:58:59,426 --> 00:59:03,176 All right, so we are back. 1300 00:59:03,616 --> 00:59:07,356 So turns out one of my primary extracurricular's 1301 00:59:07,406 --> 00:59:09,336 in college was actually running with one 1302 00:59:09,336 --> 00:59:12,116 of my roommates the freshman intramural sports program. 1303 00:59:12,116 --> 00:59:14,866 And so this was back in the day, almost before the web, 1304 00:59:15,176 --> 00:59:18,536 whereby if you wanted to register for soccer or Frisbee 1305 00:59:18,536 --> 00:59:20,646 or whatever, you would actually fill out a piece of paper, 1306 00:59:20,966 --> 00:59:22,856 you would then walk across Harvard yard. 1307 00:59:22,966 --> 00:59:25,456 Swipe into Wiggles Worth [Assumed spelling] walk 1308 00:59:25,456 --> 00:59:28,156 to the door of the proctor who was really in charge 1309 00:59:28,246 --> 00:59:30,916 of [Inaudible] and then drop into their mailbox, 1310 00:59:30,916 --> 00:59:33,546 their door drop, your registration form. 1311 00:59:33,636 --> 00:59:36,216 And thus was freshman intramural sports. 1312 00:59:36,576 --> 00:59:40,716 There were, like, web servers and web browsers in 1996. 1313 00:59:40,716 --> 00:59:41,726 And so this was just a kind 1314 00:59:41,726 --> 00:59:43,716 of a campus problem waiting to be solved. 1315 00:59:43,716 --> 00:59:45,356 We can do better than trekking across campus 1316 00:59:45,356 --> 00:59:47,126 to Wiggles Worth to register. 1317 00:59:47,126 --> 00:59:52,586 So having taken at that time CS 50 and 51 toward the end 1318 00:59:52,586 --> 00:59:55,536 of that year I decided to learn a language 1319 00:59:55,536 --> 00:59:56,886 on my own called Perl. 1320 00:59:56,886 --> 00:59:59,836 Perl is still very much in use, but it's been supplanted 1321 00:59:59,836 --> 01:00:03,836 by even more modern languages, like PHP, Python, and Ruby. 1322 01:00:04,096 --> 01:00:05,616 But it was with this language 1323 01:00:05,616 --> 01:00:07,946 that I implemented the first sort 1324 01:00:07,946 --> 01:00:09,726 of online registration system for [Inaudible]. 1325 01:00:09,916 --> 01:00:11,156 And it was really simple. 1326 01:00:11,316 --> 01:00:14,156 All we wanted to do was allow people to go to a web page, 1327 01:00:14,156 --> 01:00:16,106 fill out a form like this, click submit, 1328 01:00:16,306 --> 01:00:18,466 and then the proctor could download the equivalent 1329 01:00:18,466 --> 01:00:21,816 of an Excel file, or we could even e-mail people to confirm 1330 01:00:21,816 --> 01:00:23,556 that they had in fact been registered. 1331 01:00:23,776 --> 01:00:25,256 So I tell this particular story, 1332 01:00:25,256 --> 01:00:27,376 even though it's a different language that really, 1333 01:00:27,376 --> 01:00:30,056 after CS 50 and maybe just one other class, 1334 01:00:30,056 --> 01:00:32,546 it really is possible to boot strap yourself 1335 01:00:32,796 --> 01:00:36,206 and learn most any language that's similar syntactically 1336 01:00:36,206 --> 01:00:38,226 to C, and as we'll see, PHP. 1337 01:00:38,226 --> 01:00:40,916 It's very deliberate that we'll spend very little time 1338 01:00:41,166 --> 01:00:43,826 on JavaScript and PHP relative to C, 1339 01:00:44,016 --> 01:00:46,316 because you'll see syntactically they're quite similar, 1340 01:00:46,616 --> 01:00:50,306 and also conceptually they are similar as well. 1341 01:00:50,396 --> 01:00:52,746 They simply solve different problems more easily. 1342 01:00:53,306 --> 01:00:54,896 So with that said, here's a web page. 1343 01:00:55,136 --> 01:00:56,556 Let's actually look at its source code. 1344 01:00:56,556 --> 01:00:59,556 If I view page source I'm going to see a bunch of HTML, 1345 01:00:59,556 --> 01:01:01,246 and there's definitely some new features here. 1346 01:01:01,246 --> 01:01:01,936 So what's here. 1347 01:01:02,206 --> 01:01:07,026 I have my doc type, HTML, head, title, a Div, text align center. 1348 01:01:07,026 --> 01:01:09,576 So this is actually the more proper way to center thing 1349 01:01:09,576 --> 01:01:10,836 in a web page these days. 1350 01:01:11,086 --> 01:01:13,876 There's an H 1 tag, which again means big and bold. 1351 01:01:13,876 --> 01:01:15,376 There's a couple of line breaks. 1352 01:01:15,376 --> 01:01:16,546 Here's a form field. 1353 01:01:16,856 --> 01:01:18,086 And here's something interesting. 1354 01:01:18,286 --> 01:01:21,856 Now the action value is actually to a dot PHP file. 1355 01:01:22,116 --> 01:01:23,916 PHP is again a programming language, 1356 01:01:23,916 --> 01:01:25,496 and because there's no HTTP, 1357 01:01:25,496 --> 01:01:30,196 it must be that register 1 dot PHP lives in the appliance, 1358 01:01:30,196 --> 01:01:31,976 or really in the same web server 1359 01:01:32,086 --> 01:01:34,006 as whatever file I'm current viewing. 1360 01:01:34,286 --> 01:01:35,716 So method equals post. 1361 01:01:35,716 --> 01:01:39,656 It turns out that not all the data you send in an URL needs 1362 01:01:39,656 --> 01:01:41,126 to be transmitted in the clear. 1363 01:01:41,126 --> 01:01:43,366 In fact, it would be a very bad thing if your password 1364 01:01:43,366 --> 01:01:46,946 and credit card number and anything private was just sent 1365 01:01:47,266 --> 01:01:49,266 to a server via the URL. 1366 01:01:49,436 --> 01:01:50,836 Because one, you can see it. 1367 01:01:50,836 --> 01:01:51,956 That's not so worrisome. 1368 01:01:51,956 --> 01:01:54,196 But your roommate can see it, if he or she goes poking 1369 01:01:54,196 --> 01:01:55,436 around your browser history. 1370 01:01:55,436 --> 01:01:58,176 So thankfully, there's another way to send information 1371 01:01:58,176 --> 01:02:01,316 from browser to server, and that's not using HTTP get, 1372 01:02:01,706 --> 01:02:05,116 but rather it's using something called HTTP post. 1373 01:02:05,336 --> 01:02:08,506 And to induce a post, you simply say method equals quote 1374 01:02:08,506 --> 01:02:09,796 unquote post. 1375 01:02:10,016 --> 01:02:12,626 So post is going to keep the information out of the URL, 1376 01:02:12,626 --> 01:02:13,916 but it's still going to send. 1377 01:02:14,336 --> 01:02:15,596 All right, so what comes next? 1378 01:02:15,596 --> 01:02:18,986 There's apparently a table tag here, table row, table data. 1379 01:02:18,986 --> 01:02:21,326 And this just creates some kind of tabular structure. 1380 01:02:21,326 --> 01:02:22,446 What kind of tabular structure? 1381 01:02:22,446 --> 01:02:25,816 Well behind the scenes here, there's an invisible table. 1382 01:02:26,066 --> 01:02:28,416 The name, captain, gender, and dorm words are 1383 01:02:28,416 --> 01:02:30,906 in the left column, and all of the form fields are 1384 01:02:30,906 --> 01:02:32,636 in the right column there. 1385 01:02:32,766 --> 01:02:34,946 So that's what's going on there invisibly. 1386 01:02:35,166 --> 01:02:36,886 And if I go back to the source here, 1387 01:02:37,046 --> 01:02:38,686 notice some familiar things now. 1388 01:02:38,686 --> 01:02:42,096 So I see mention of, like, dorm, and gender, and captain, 1389 01:02:42,296 --> 01:02:44,036 and [Inaudible] candidate, grades, 1390 01:02:44,036 --> 01:02:46,346 [Inaudible] so let's see how these are inputted. 1391 01:02:46,756 --> 01:02:47,836 So name, colon. 1392 01:02:48,186 --> 01:02:49,986 So this TD tag, table data. 1393 01:02:49,986 --> 01:02:51,076 This means left column. 1394 01:02:51,316 --> 01:02:53,016 This next one means right column. 1395 01:02:53,016 --> 01:02:56,126 And I'm using an input tag that has a name of name. 1396 01:02:56,226 --> 01:02:58,276 But this means person's name, freshman's name. 1397 01:02:58,546 --> 01:03:01,606 And then type equals text, I have a text box here, 1398 01:03:01,606 --> 01:03:04,286 so there's also type equals check box to say yes 1399 01:03:04,286 --> 01:03:06,796 or no you want to be a captain for the team. 1400 01:03:06,796 --> 01:03:08,866 Gender is a radio button, so this is one 1401 01:03:08,866 --> 01:03:10,396 of these mutually exclusive ones 1402 01:03:10,396 --> 01:03:12,966 where you can either click this button or this one. 1403 01:03:12,966 --> 01:03:15,176 And clicking one unchecks the other. 1404 01:03:15,466 --> 01:03:17,246 And then dorm is a drop down menu. 1405 01:03:17,246 --> 01:03:19,636 Otherwise known as a select menu in HTML. 1406 01:03:19,826 --> 01:03:25,006 Whereby the name of this HTTP value is going to be dorm. 1407 01:03:25,246 --> 01:03:27,716 And it comes with a whole bunch of options so I just typed 1408 01:03:27,716 --> 01:03:30,206 out option value, quote unquote, nothing. 1409 01:03:30,206 --> 01:03:31,396 So it defaults to nothing. 1410 01:03:31,716 --> 01:03:33,396 Then app [Inaudible] Canada's gray, 1411 01:03:33,396 --> 01:03:34,396 green [Inaudible] and so forth. 1412 01:03:34,576 --> 01:03:35,956 And notice the dichotomy here. 1413 01:03:35,986 --> 01:03:37,696 Just like with anchor tags 1414 01:03:37,996 --> 01:03:40,156 where you can have an URL that's clickable 1415 01:03:40,246 --> 01:03:42,536 but the word you're clicking is different 1416 01:03:42,806 --> 01:03:44,716 from what the user actually ends up at. 1417 01:03:45,026 --> 01:03:47,516 Same here with select menus. 1418 01:03:47,516 --> 01:03:48,536 With drop down menus. 1419 01:03:48,816 --> 01:03:50,876 The option value, quote unquote. 1420 01:03:51,066 --> 01:03:53,026 This is what gets sent to the server. 1421 01:03:53,206 --> 01:03:55,066 This is what the user is going to see. 1422 01:03:55,066 --> 01:03:57,296 In this case, for simplicity, they're the same. 1423 01:03:57,676 --> 01:04:00,316 But if you wanted to have a more user friendly description, 1424 01:04:00,316 --> 01:04:02,126 maybe have more words than just two, 1425 01:04:02,376 --> 01:04:03,876 but still just send something succinct 1426 01:04:03,876 --> 01:04:06,566 to the server you can do that, hence, this dichotomy. 1427 01:04:06,886 --> 01:04:08,876 And then if I scroll down further, we're almost done 1428 01:04:08,876 --> 01:04:12,806 with the HTML, here's my submit button, value equals register, 1429 01:04:13,096 --> 01:04:16,086 and then the rest of the page gets closed. 1430 01:04:16,356 --> 01:04:18,526 So let's see what happens when I fill this out. 1431 01:04:18,526 --> 01:04:24,336 So David, captain, M, let's say Mathews, say register. 1432 01:04:24,486 --> 01:04:27,266 Okay, I didn't actually implement this side 1433 01:04:27,266 --> 01:04:27,846 of it either. 1434 01:04:27,896 --> 01:04:32,196 But I did get redirected to a register 1 dot PHP file. 1435 01:04:32,456 --> 01:04:34,686 And it's in this file that we'll see the beginnings 1436 01:04:34,686 --> 01:04:37,836 of our web programming. 1437 01:04:37,836 --> 01:04:38,916 So let's go into G edit. 1438 01:04:38,916 --> 01:04:42,476 Let me go ahead and open up in my [Inaudible] directory. 1439 01:04:43,176 --> 01:04:45,936 First, [Inaudible] 1 dot PHP. 1440 01:04:46,136 --> 01:04:47,416 So notice a couple of things. 1441 01:04:47,606 --> 01:04:49,856 Even though, and let me go back to the browser, 1442 01:04:50,246 --> 01:04:54,066 we started that at this page here, notice what the URL was. 1443 01:04:54,556 --> 01:04:58,096 Notice that the URL I started at, even though it's only HTML 1444 01:04:58,096 --> 01:05:00,696 when I look at it, it actually is a PHP page. 1445 01:05:00,906 --> 01:05:02,646 So here's the interesting thing about PHP. 1446 01:05:02,646 --> 01:05:07,796 You can co-mingle your PHP code which we'll soon see, and HTML, 1447 01:05:08,046 --> 01:05:11,256 whereby PHP can generate more HTML. 1448 01:05:11,256 --> 01:05:13,866 And just to make this more concrete, this is actually kind 1449 01:05:13,866 --> 01:05:15,806 of an inefficient way of out putting dorms, right? 1450 01:05:15,856 --> 01:05:18,156 Typing out that list of dorms is actually pretty tedious 1451 01:05:18,156 --> 01:05:18,676 and boring. 1452 01:05:18,796 --> 01:05:20,966 And if you have multiple web sites that ask students 1453 01:05:20,966 --> 01:05:24,206 where they live I'm every time copying and pasting or typing 1454 01:05:24,206 --> 01:05:25,716 out a dozen or so dorms. 1455 01:05:25,996 --> 01:05:28,166 Well, kind of be nice to put that dorm information 1456 01:05:28,166 --> 01:05:30,936 in a database, just ask the database give me all 1457 01:05:30,936 --> 01:05:31,656 of the dorms. 1458 01:05:31,656 --> 01:05:35,056 And then have a for loop or a while loop that prints out each 1459 01:05:35,056 --> 01:05:37,486 of those option HTML tags. 1460 01:05:37,486 --> 01:05:38,766 And indeed we can do that. 1461 01:05:38,766 --> 01:05:39,516 We're not doing it yet, 1462 01:05:39,996 --> 01:05:42,866 but that's why you might want an actual programming language 1463 01:05:42,866 --> 01:05:44,976 so you can ask a database or some other source 1464 01:05:44,976 --> 01:05:47,136 for information, and then only write like two 1465 01:05:47,136 --> 01:05:49,646 or three lines, not a dozen or more. 1466 01:05:50,046 --> 01:05:53,776 So let's actually look, then, at [Inaudible] 1 dot PHP. 1467 01:05:53,776 --> 01:05:57,666 And even though it's called PHP, it's all HTML. 1468 01:05:58,146 --> 01:06:01,066 So notice that I'm not yet writing any PHP code, 1469 01:06:01,096 --> 01:06:04,026 but I could be in register 1 dot PHP. 1470 01:06:04,556 --> 01:06:08,076 So notice that register 1 actually has a bit of code. 1471 01:06:08,076 --> 01:06:09,546 Let me zoom out so this is all clear. 1472 01:06:09,796 --> 01:06:11,256 Notice the following features. 1473 01:06:11,466 --> 01:06:15,706 At the very top of a PHP file I have open bracket question mark. 1474 01:06:15,926 --> 01:06:18,026 So this looks kind of like a tag, but the fact 1475 01:06:18,026 --> 01:06:20,966 that the question mark is right there means this is not HTML, 1476 01:06:21,146 --> 01:06:21,856 here comes some PHP. 1477 01:06:21,856 --> 01:06:25,186 This is necessary because on the server 1478 01:06:25,946 --> 01:06:29,736 or in this case the appliance, when the web server notices hmm, 1479 01:06:29,736 --> 01:06:32,266 this URL ends with dot PHP. 1480 01:06:32,266 --> 01:06:34,186 That is not a static file. 1481 01:06:34,186 --> 01:06:36,136 That is not HTML, that is not CSS. 1482 01:06:36,136 --> 01:06:36,956 That is a program. 1483 01:06:37,316 --> 01:06:40,386 So the web server is going to notice the dot PHP file name. 1484 01:06:40,746 --> 01:06:44,226 It is then going to execute this program. 1485 01:06:44,326 --> 01:06:47,066 It's going to execute the file called register 1 dot PHP. 1486 01:06:47,066 --> 01:06:49,446 What does it mean to execute the file? 1487 01:06:49,626 --> 01:06:51,986 Well, it's going to look anywhere there's an open bracket 1488 01:06:51,986 --> 01:06:54,146 question mark and then some stuff, 1489 01:06:54,296 --> 01:06:56,636 followed by a question mark closed bracket. 1490 01:06:56,956 --> 01:06:59,866 The web server is going to execute that PHP code, 1491 01:06:59,866 --> 01:07:02,816 and whatever that code outputs via print def 1492 01:07:02,816 --> 01:07:05,166 or similar will be sent to the browser. 1493 01:07:05,466 --> 01:07:08,056 It doesn't need to out put anything, but it can. 1494 01:07:08,266 --> 01:07:10,296 So let's see what's actually happening here. 1495 01:07:10,296 --> 01:07:11,836 First of all, all of this is comments. 1496 01:07:11,946 --> 01:07:13,396 And for the moment a big distraction. 1497 01:07:13,396 --> 01:07:15,176 So I'm going to delete all of those comments. 1498 01:07:15,216 --> 01:07:16,366 They're just like C comments. 1499 01:07:16,676 --> 01:07:18,006 But in this case we're in the context of PHP. 1500 01:07:18,006 --> 01:07:21,346 But it looks like had I actually been a little difficult 1501 01:07:21,346 --> 01:07:24,846 and not typed in David and mail and captain and Mathews, 1502 01:07:25,136 --> 01:07:27,506 I actually would have not submitted this 1503 01:07:27,506 --> 01:07:28,636 form successfully. 1504 01:07:28,986 --> 01:07:30,136 So let's actually try that. 1505 01:07:30,136 --> 01:07:33,286 Let me go back to my browser and not be a cooperative user. 1506 01:07:33,286 --> 01:07:33,976 I'm going to uncheck that. 1507 01:07:34,796 --> 01:07:36,856 I'm going to unchoose a dorm. 1508 01:07:36,856 --> 01:07:38,296 And I'm only going to provide gender 1509 01:07:38,296 --> 01:07:40,206 and name, and I click register. 1510 01:07:40,206 --> 01:07:42,426 And now notice it did not submit. 1511 01:07:42,426 --> 01:07:43,746 All right, maybe it was my mistake. 1512 01:07:43,746 --> 01:07:44,906 Let me do it again. 1513 01:07:44,906 --> 01:07:45,906 I'm not going to check -- 1514 01:07:45,986 --> 01:07:47,566 they don't need to know my gender or my dorm. 1515 01:07:47,566 --> 01:07:48,426 I'm just going to register. 1516 01:07:48,976 --> 01:07:50,076 Well, apparently they do. 1517 01:07:50,076 --> 01:07:52,916 Because notice I'm going back to [Inaudible] 1 dot PHP. 1518 01:07:52,916 --> 01:07:55,836 I'm not going to the registration page it seems. 1519 01:07:56,196 --> 01:07:56,946 So why is that? 1520 01:07:56,946 --> 01:08:00,186 In register 1 dot PHP there's a very simple branch, 1521 01:08:00,186 --> 01:08:01,356 a very simple condition. 1522 01:08:01,356 --> 01:08:03,096 So think back to scratch, 1523 01:08:03,096 --> 01:08:05,826 think back to C. The idea is the same even though the syntax is a 1524 01:08:05,826 --> 01:08:06,456 little different. 1525 01:08:06,746 --> 01:08:08,156 Notice what's going to happen here. 1526 01:08:08,256 --> 01:08:12,706 If empty, so turns out empty is a function that turns true 1527 01:08:12,706 --> 01:08:14,786 if the variable you give it is empty. 1528 01:08:14,786 --> 01:08:17,076 There's nothing there, otherwise it returns false. 1529 01:08:17,516 --> 01:08:19,056 So turns out this is a variable. 1530 01:08:19,736 --> 01:08:24,206 So in PHP what's nice is any time you submit a form 1531 01:08:24,206 --> 01:08:27,876 to the server, if you submit using method equals quote 1532 01:08:27,876 --> 01:08:34,306 unquote post, all of your form inputs are stored 1533 01:08:34,306 --> 01:08:38,216 in one big variable, and that variable turns 1534 01:08:38,216 --> 01:08:39,386 out is a hash table. 1535 01:08:39,626 --> 01:08:42,336 Recall that a hash table is the fancy new data structure 1536 01:08:42,336 --> 01:08:44,666 that you're playing with, perhaps, for problem set six, 1537 01:08:44,926 --> 01:08:48,406 and it allows you to store keys and then values in the case 1538 01:08:48,406 --> 01:08:50,546 of problem set six if you're using a hash table, 1539 01:08:50,546 --> 01:08:52,616 the key is the word from the dictionary, 1540 01:08:52,906 --> 01:08:55,136 and the value is something like yes or no. 1541 01:08:55,216 --> 01:08:56,896 It's there or it's not there. 1542 01:08:56,896 --> 01:08:58,016 That's the kind of answer. 1543 01:08:58,356 --> 01:08:59,686 So in the case of this, 1544 01:08:59,826 --> 01:09:03,286 the variable here is called dollar sign underscore post. 1545 01:09:03,346 --> 01:09:04,536 Frankly, it's a stupid name, 1546 01:09:04,536 --> 01:09:06,196 the fact that there's an underscore is annoying. 1547 01:09:06,426 --> 01:09:07,556 The fact that it's upper case though 1548 01:09:07,556 --> 01:09:09,296 at least suggests that it's important. 1549 01:09:09,576 --> 01:09:13,466 And dollar sign underscore post is a special variable, 1550 01:09:13,596 --> 01:09:16,956 a hash table, if you will, that you can index 1551 01:09:16,956 --> 01:09:18,546 into just like an array. 1552 01:09:18,936 --> 01:09:22,586 So the fact that I'm saying dollar sign underscore post open 1553 01:09:22,586 --> 01:09:25,916 bracket, close bracket, and then in quotes inside of it name, 1554 01:09:26,186 --> 01:09:29,316 means go inside of this hash table and give me the value 1555 01:09:29,316 --> 01:09:31,126 of the parameter called name. 1556 01:09:31,386 --> 01:09:32,756 If the user types in David, 1557 01:09:32,756 --> 01:09:33,976 that's what I'm going to get back. 1558 01:09:33,976 --> 01:09:36,386 If the user typed in nothing, I'm going to get nothing back. 1559 01:09:36,386 --> 01:09:39,246 And so this function empty is going to return true. 1560 01:09:39,246 --> 01:09:41,696 Because indeed the form field was empty. 1561 01:09:42,056 --> 01:09:44,436 The double vertical bars here mean the same thing as in C, 1562 01:09:44,436 --> 01:09:46,876 or if the gender field is empty, 1563 01:09:46,876 --> 01:09:49,756 or if the dorm field is empty, what do I want to do? 1564 01:09:49,756 --> 01:09:52,256 I want to do what's inside of this if condition. 1565 01:09:52,256 --> 01:09:54,076 And what's inside of this if condition? 1566 01:09:54,436 --> 01:09:55,916 A new function, header. 1567 01:09:56,356 --> 01:09:59,716 Header takes an argument and what does this suggest, 1568 01:10:00,096 --> 01:10:02,256 where have we seen headers before? 1569 01:10:02,406 --> 01:10:06,006 Well, think back to Monday when we used LiveHTTPHeaders, 1570 01:10:06,256 --> 01:10:07,806 and we sniffed our web traffic. 1571 01:10:08,156 --> 01:10:11,486 And among the headers were things like get slash HTTP, 1572 01:10:11,486 --> 01:10:14,416 and host, colon, and then there was some mention 1573 01:10:14,416 --> 01:10:15,096 of your browser. 1574 01:10:15,096 --> 01:10:17,876 There was a lot of interesting or juicy data inside 1575 01:10:17,876 --> 01:10:20,306 of the headers that we humans don't see, but the browser 1576 01:10:20,306 --> 01:10:21,396 and server are seeing. 1577 01:10:21,646 --> 01:10:23,076 Well, turns out another one 1578 01:10:23,076 --> 01:10:25,216 of them is the so-called location header. 1579 01:10:25,216 --> 01:10:26,626 If you've ever visited a web site 1580 01:10:26,626 --> 01:10:28,436 and then been magically redirected 1581 01:10:28,436 --> 01:10:32,036 to some other web site nearly instantly, how is that working 1582 01:10:32,076 --> 01:10:33,796 without human intervention by you? 1583 01:10:34,096 --> 01:10:37,086 Well, what the server is doing if you visit Google.com, 1584 01:10:37,086 --> 01:10:40,316 and Google decides we don't want you using Google.com, 1585 01:10:40,316 --> 01:10:43,746 we want you using www.Google.com. 1586 01:10:43,976 --> 01:10:46,776 What Google's server will send is an HTTP header 1587 01:10:46,776 --> 01:10:48,146 that looks like this. 1588 01:10:48,226 --> 01:10:52,076 Location, colon, and then the URL they want you to go to. 1589 01:10:52,076 --> 01:10:53,256 Let's actually try to see this. 1590 01:10:53,256 --> 01:10:55,576 Let me go back to my browser. 1591 01:10:55,576 --> 01:10:58,076 I'm going to go ahead and actually clear my history 1592 01:10:58,076 --> 01:11:01,786 so that we haven't cached any of the previous Google results. 1593 01:11:02,016 --> 01:11:03,156 And I'm going to go ahead and open 1594 01:11:03,156 --> 01:11:05,176 up LiveHTTPHeaders, just like Monday. 1595 01:11:05,176 --> 01:11:08,616 And I'm going to visit not www.google.com, 1596 01:11:08,616 --> 01:11:12,626 but more specifically HTTP colon//Google.com, 1597 01:11:12,976 --> 01:11:13,716 and hit enter. 1598 01:11:13,716 --> 01:11:16,426 And notice the URL definitely changed. 1599 01:11:16,426 --> 01:11:19,156 This is not my browser doing this, per se, it's the server. 1600 01:11:19,156 --> 01:11:22,316 Because if I scroll up notice that here's what I asked Google. 1601 01:11:22,536 --> 01:11:25,326 Give me slash on Google.com, 1602 01:11:25,376 --> 01:11:27,886 and you know what Google said secretly to me? 1603 01:11:27,886 --> 01:11:32,966 We have moved permanently to http://www.Google.com. 1604 01:11:33,046 --> 01:11:36,816 now why? Mostly it's for branding purposes. 1605 01:11:36,816 --> 01:11:38,556 But also sometimes for technical purposes. 1606 01:11:38,556 --> 01:11:41,506 It is absolutely possible for both something.com 1607 01:11:41,506 --> 01:11:43,966 or www.something.com to work. 1608 01:11:44,116 --> 01:11:45,636 But in Google's case, they decided 1609 01:11:45,636 --> 01:11:48,846 that they are branding themselves as www.Google.com. 1610 01:11:48,846 --> 01:11:50,266 We've done the same with CS 50 dot net. 1611 01:11:50,266 --> 01:11:53,536 But if you watch the videos we chose CS 50 dot TV, 1612 01:11:53,536 --> 01:11:56,776 with no W-W-W, just because it sounded, frankly, better. 1613 01:11:56,776 --> 01:11:58,856 And you can do that with your web server. 1614 01:11:58,856 --> 01:12:00,676 So what this question is asking is 1615 01:12:00,896 --> 01:12:03,246 if the user didn't give me a name, didn't give me a gender, 1616 01:12:03,286 --> 01:12:05,616 or didn't give me a dorm, to hell with them. 1617 01:12:05,616 --> 01:12:09,016 Redirect them back to the very same URL from whence they came, 1618 01:12:09,016 --> 01:12:10,946 which is this URL here. 1619 01:12:10,946 --> 01:12:13,056 And that's exactly what someone like Google is doing. 1620 01:12:13,056 --> 01:12:13,676 They're not using PHP. 1621 01:12:13,676 --> 01:12:16,466 But they have an if condition somewhere that says 1622 01:12:16,466 --> 01:12:20,436 if not www.google.com go to Google.com. 1623 01:12:20,436 --> 01:12:23,546 And they will force your browser to actually go to that point. 1624 01:12:23,796 --> 01:12:26,436 Now just to fast forward to a teaser, I'm going to go ahead 1625 01:12:26,436 --> 01:12:29,286 and open up register 8, which is going 1626 01:12:29,286 --> 01:12:31,056 to be version -- nope, not register 8. 1627 01:12:31,336 --> 01:12:32,876 Let's try register 3. 1628 01:12:33,176 --> 01:12:35,996 So register 3 dot PHP is going 1629 01:12:35,996 --> 01:12:37,636 to be we'll see the third version 1630 01:12:37,636 --> 01:12:38,766 of where we're going with this. 1631 01:12:39,086 --> 01:12:43,276 And in this line of code notice I'm reversing the question. 1632 01:12:43,476 --> 01:12:46,276 If name is not empty, and gender is not empty, 1633 01:12:46,456 --> 01:12:49,206 thanks to the exclamation point, and dorm is not empty, 1634 01:12:49,566 --> 01:12:53,856 what you can do in PHP amazingly simply, or relatively simply, 1635 01:12:54,046 --> 01:12:57,606 is here are eight or so lines of code that are going 1636 01:12:57,606 --> 01:13:00,616 to create a variable called 2 as an aside 1637 01:13:00,616 --> 01:13:02,896 or as you might have inferred variables in PHP just 1638 01:13:02,896 --> 01:13:04,596 because all start with dollar signs. 1639 01:13:04,966 --> 01:13:06,646 There's going to create a variable called subject. 1640 01:13:06,906 --> 01:13:08,566 It's going to create a variable called body. 1641 01:13:08,816 --> 01:13:10,726 This dot operator is concatenation. 1642 01:13:10,726 --> 01:13:12,096 So this is just a stylistic thing. 1643 01:13:12,096 --> 01:13:14,726 This is all one huge string and I'm substituting 1644 01:13:14,726 --> 01:13:16,916 in the user's name, captain, gender, 1645 01:13:16,916 --> 01:13:18,136 and dorm into this string. 1646 01:13:18,426 --> 01:13:21,826 Then this is here just for a from address, and then this. 1647 01:13:21,826 --> 01:13:25,136 If you want in a language like PHP to send someone an e-mail 1648 01:13:25,266 --> 01:13:27,536 from an arbitrary address to an arbitrary address, 1649 01:13:27,536 --> 01:13:29,666 much like the proctor might have wanted back in the day 1650 01:13:29,946 --> 01:13:31,476 to confirm someone's registration, 1651 01:13:31,726 --> 01:13:32,766 it's one line of code. 1652 01:13:33,016 --> 01:13:34,206 It's a function called mail. 1653 01:13:34,206 --> 01:13:36,716 Takes a few arguments, the to field, subject field, body, 1654 01:13:36,716 --> 01:13:39,206 and any additional e-mail headers, and viola, 1655 01:13:39,206 --> 01:13:41,756 Freshman now has received an e-mail confirmation 1656 01:13:42,116 --> 01:13:43,286 of their registration. 1657 01:13:43,286 --> 01:13:45,566 And this is what's going to be really exciting about PHP. 1658 01:13:45,566 --> 01:13:47,206 Even though we've got some new syntax 1659 01:13:47,206 --> 01:13:49,736 and some new mental constructs here to think about, 1660 01:13:50,006 --> 01:13:51,586 doing things that are useful 1661 01:13:51,586 --> 01:13:54,036 and compelling will consistently reduce 1662 01:13:54,036 --> 01:13:55,926 to very few lines of code. 1663 01:13:55,926 --> 01:13:58,056 PHP giving us the same features as C, ultimately, 1664 01:13:58,326 --> 01:14:01,026 but much more user friendly, much easier to write, 1665 01:14:01,226 --> 01:14:02,496 and much less code to write, 1666 01:14:02,496 --> 01:14:04,686 and with it can we build some amazing things come 1667 01:14:04,686 --> 01:14:05,456 final project. 1668 01:14:05,516 --> 01:14:09,276 With that said, we will see you on Monday.