1 00:00:00,000 --> 00:00:11,470 2 00:00:11,470 --> 00:00:12,764 >> SPEAKER 1: All, right welcome back. 3 00:00:12,764 --> 00:00:14,140 This is CS50. 4 00:00:14,140 --> 00:00:16,800 And this is the start of week nine. 5 00:00:16,800 --> 00:00:19,960 And this is the start of the rest of your time in CS50, in which we 6 00:00:19,960 --> 00:00:23,170 transition now, finally, to the web aspect of the course, where you'll 7 00:00:23,170 --> 00:00:26,200 find that a lot of the fundamentals that we've been exporting for weeks 8 00:00:26,200 --> 00:00:29,270 still come back to visit, or haunt, us. 9 00:00:29,270 --> 00:00:33,440 But now, you'll find that it's an order of magnitude easier to 10 00:00:33,440 --> 00:00:36,540 accomplish certain tasks and solve certain problems-- 11 00:00:36,540 --> 00:00:41,050 so much so that even if you thought certain problem sets were fun in their 12 00:00:41,050 --> 00:00:44,200 own way, I think that you'll find that p set 7, p set 8, and then, 13 00:00:44,200 --> 00:00:47,990 ultimately, the final project will be all the more gratifying because you'll 14 00:00:47,990 --> 00:00:51,830 find that we begin to take for granted now things like memory management, and 15 00:00:51,830 --> 00:00:54,190 pointers, and what's going on underneath the hood. 16 00:00:54,190 --> 00:00:57,310 And again, thematic, all throughout the semester has been this layering 17 00:00:57,310 --> 00:00:58,030 and layering. 18 00:00:58,030 --> 00:01:00,530 And now we're sort of up here, standing on the 19 00:01:00,530 --> 00:01:01,930 shoulders of weeks past. 20 00:01:01,930 --> 00:01:05,360 >> Now, recall from last time that we talked about how the internet worked. 21 00:01:05,360 --> 00:01:08,120 And this was perhaps an oversimplification, but remember that 22 00:01:08,120 --> 00:01:12,960 every computer in the world has an IP address, although that's a bit of an 23 00:01:12,960 --> 00:01:14,570 oversimplification still. 24 00:01:14,570 --> 00:01:18,180 And those addresses are used to uniquely identify machines so that 25 00:01:18,180 --> 00:01:22,010 when you send information, or packets, so to speak, they can have an origin 26 00:01:22,010 --> 00:01:24,000 address and a destination address. 27 00:01:24,000 --> 00:01:27,830 And those same IP addresses can be used both for good and also for evil, 28 00:01:27,830 --> 00:01:29,270 to track you, for instance. 29 00:01:29,270 --> 00:01:32,200 In fact, every one of you with a laptop open now, or a phone in your 30 00:01:32,200 --> 00:01:35,070 pocket, has an IP address on Harvard's network. 31 00:01:35,070 --> 00:01:39,120 And it's not all that difficult to correlate that to who and where you 32 00:01:39,120 --> 00:01:40,180 are these days. 33 00:01:40,180 --> 00:01:42,090 But more on that perhaps in the future. 34 00:01:42,090 --> 00:01:46,510 >> Now I thought I'd bring back some memories of [? enhance ?] and give you 35 00:01:46,510 --> 00:01:49,360 another clip from a show you might find familiar. 36 00:01:49,360 --> 00:01:52,710 If we could dim the lights for just a few seconds. 37 00:01:52,710 --> 00:01:53,960 The show Numb3rs. 38 00:01:53,960 --> 00:01:57,510 39 00:01:57,510 --> 00:02:00,540 >> SPEAKER 2: It's a 32-bit IPP4 address. 40 00:02:00,540 --> 00:02:01,610 >> SPEAKER 3: IPP, as in internet? 41 00:02:01,610 --> 00:02:02,968 >> SPEAKER 2: Private network. 42 00:02:02,968 --> 00:02:04,960 To Amita's private network. 43 00:02:04,960 --> 00:02:16,930 44 00:02:16,930 --> 00:02:19,602 She is so amazing. 45 00:02:19,602 --> 00:02:21,030 >> SPEAKER 3: Come on, Charlie. 46 00:02:21,030 --> 00:02:21,490 >> SPEAKER 2: It's. 47 00:02:21,490 --> 00:02:22,470 A mirror IP address. 48 00:02:22,470 --> 00:02:27,680 She's letting us watch what she's doing in real time. 49 00:02:27,680 --> 00:02:30,930 >> SPEAKER 1: OK, so a few things wrong with this picture. 50 00:02:30,930 --> 00:02:32,920 So one, and this one is acceptable, this is actually 51 00:02:32,920 --> 00:02:34,400 not a valid IP address. 52 00:02:34,400 --> 00:02:38,190 A valid IP address has to be numbers of the form w.x.y.z, where each of 53 00:02:38,190 --> 00:02:40,000 those letters is 0 to 255. 54 00:02:40,000 --> 00:02:42,330 But that's fine because just like the movies where they fake phone numbers, 55 00:02:42,330 --> 00:02:43,520 they fake IP addresses. 56 00:02:43,520 --> 00:02:45,230 You don't actually hit real servers. 57 00:02:45,230 --> 00:02:46,760 >> But mind you, this is a browser. 58 00:02:46,760 --> 00:02:50,760 And browsers do not start outputting computer code like this. 59 00:02:50,760 --> 00:02:54,230 And if we look a little deeper, notice that the language that they're seeing 60 00:02:54,230 --> 00:02:57,040 on the screen is a language called Objective C, which is the language in 61 00:02:57,040 --> 00:02:59,520 which iPhone apps are written, particularly the ones involving 62 00:02:59,520 --> 00:03:03,540 crayons, as you can see from the source code here. 63 00:03:03,540 --> 00:03:06,600 64 00:03:06,600 --> 00:03:07,560 >> OK, I thought this was funny. 65 00:03:07,560 --> 00:03:12,240 So this snippet of code has absolutely nothing to do with whatever this 66 00:03:12,240 --> 00:03:13,940 particular episode was about. 67 00:03:13,940 --> 00:03:17,590 So the joke is sort of on the folks taking for this granted. 68 00:03:17,590 --> 00:03:20,220 But this is not all that hard to get these technical details right. 69 00:03:20,220 --> 00:03:21,980 And I would encourage you. 70 00:03:21,980 --> 00:03:25,530 And actually, 50 might very well spoil a lot of TV shows and movies or you 71 00:03:25,530 --> 00:03:27,320 because you'll find that it's just not possible what they're 72 00:03:27,320 --> 00:03:28,630 doing on the screen. 73 00:03:28,630 --> 00:03:31,750 But indeed, this is the code that you might see it in an iPhone application 74 00:03:31,750 --> 00:03:33,640 or Mac OS application. 75 00:03:33,640 --> 00:03:35,685 It has nothing at all to do with security. 76 00:03:35,685 --> 00:03:38,610 So keep an eye out for more such fun things like that. 77 00:03:38,610 --> 00:03:42,720 >> But today we begin to dive in really deeply to a whole range of languages. 78 00:03:42,720 --> 00:03:45,410 An indeed, one of the overarching takeaways of this portion of the 79 00:03:45,410 --> 00:03:51,815 course is not to learn how to program in PHP, not to learn SQL per se, not 80 00:03:51,815 --> 00:03:58,100 to learn JavaScript per se, but rather to teach yourself how to teach 81 00:03:58,100 --> 00:04:02,030 yourself new languages because, indeed, we begin to take now the 82 00:04:02,030 --> 00:04:06,020 training wheels off so that after course's end, you don't expect a 20 83 00:04:06,020 --> 00:04:08,890 page specification to tell you how to implement some program. 84 00:04:08,890 --> 00:04:12,970 You have enough ingredients in your mind, and enough tools in your tool 85 00:04:12,970 --> 00:04:15,750 kit, with which to start building solutions to problems of interest to 86 00:04:15,750 --> 00:04:19,130 you for some students group, for some research project, or really anything 87 00:04:19,130 --> 00:04:20,140 of interest to you. 88 00:04:20,140 --> 00:04:24,150 >> So toward that end, recall that this was the picture we drew it last time. 89 00:04:24,150 --> 00:04:27,620 And this is two computers, client and sever, talking to one another. 90 00:04:27,620 --> 00:04:31,130 And the protocol, the language, so to speak, that these two computers happen 91 00:04:31,130 --> 00:04:33,220 to be speaking is called HTTP. 92 00:04:33,220 --> 00:04:37,730 And that's just the protocol used by computers to transfer information over 93 00:04:37,730 --> 00:04:38,710 the world wide web. 94 00:04:38,710 --> 00:04:41,770 The web, of course, is just one service that runs on top of the 95 00:04:41,770 --> 00:04:43,000 so-called internet. 96 00:04:43,000 --> 00:04:48,660 What's another service available on top of the internet these days? 97 00:04:48,660 --> 00:04:51,600 Some other protocol or-- what's that? 98 00:04:51,600 --> 00:04:52,300 >> AUDIENCE: FTP. 99 00:04:52,300 --> 00:04:52,790 >> SPEAKER 1: FTP. 100 00:04:52,790 --> 00:04:54,630 So File Transfer Protocol is another. 101 00:04:54,630 --> 00:04:56,050 Most of you probably haven't used it. 102 00:04:56,050 --> 00:04:58,830 But most of you probably have used things like Gchat, or instant 103 00:04:58,830 --> 00:05:00,970 messaging more generally, certainly email. 104 00:05:00,970 --> 00:05:04,470 And those, too, are services that run on top of the internet because, at the 105 00:05:04,470 --> 00:05:08,180 end of the day, the internet itself really just get data from point A to 106 00:05:08,180 --> 00:05:12,480 point B. And it uses a number of particles itself, one of them or two 107 00:05:12,480 --> 00:05:17,340 of them most generally called TCP/IP, which is to say that one computer on 108 00:05:17,340 --> 00:05:19,960 the internet can actually be doing different things, email, 109 00:05:19,960 --> 00:05:20,980 and web, and so forth. 110 00:05:20,980 --> 00:05:22,220 Google does a lot of this. 111 00:05:22,220 --> 00:05:26,310 So how are those services uniquely identified, did we say, on a computer 112 00:05:26,310 --> 00:05:29,080 that might actually be doing multiple things? 113 00:05:29,080 --> 00:05:29,860 >> The port number. 114 00:05:29,860 --> 00:05:34,180 And these are just arbitrary human conventions like 80 is web, 443 is 115 00:05:34,180 --> 00:05:36,580 encrypted web, 25 is email. 116 00:05:36,580 --> 00:05:38,230 And there's a bunches of others. 117 00:05:38,230 --> 00:05:41,860 And those numbers are simply included in those packets of information, those 118 00:05:41,860 --> 00:05:46,230 virtual envelope, that actually contained a request or a response. 119 00:05:46,230 --> 00:05:51,300 >> So when you get back a response from the web, typically, you don't see any 120 00:05:51,300 --> 00:05:54,780 numbers whatsoever in terms of the status code of the response. 121 00:05:54,780 --> 00:05:56,770 You don't actually see the inner workings of the 122 00:05:56,770 --> 00:05:58,090 packets that come back. 123 00:05:58,090 --> 00:05:59,860 But 200 does indeed mean OK. 124 00:05:59,860 --> 00:06:01,530 And that means all is well. 125 00:06:01,530 --> 00:06:02,870 You might have seen a bunch of these. 126 00:06:02,870 --> 00:06:05,710 Which is probably the most common you've seen on the web? 127 00:06:05,710 --> 00:06:05,980 >> 404. 128 00:06:05,980 --> 00:06:07,330 It just means file not found. 129 00:06:07,330 --> 00:06:08,270 It means someone screwed up. 130 00:06:08,270 --> 00:06:11,450 You did by mistyping the URL, or someone else did by giving you an 131 00:06:11,450 --> 00:06:15,100 invalid URL, or they deleted the file and the URL is still 132 00:06:15,100 --> 00:06:16,130 being used by people. 133 00:06:16,130 --> 00:06:19,670 So any number of reasons can explain why a file is not found. 134 00:06:19,670 --> 00:06:22,990 And you'll see, in the weeks to come, these other error codes, and you'll 135 00:06:22,990 --> 00:06:24,195 take advantage of some of them. 136 00:06:24,195 --> 00:06:25,760 The worst is 500. 137 00:06:25,760 --> 00:06:29,820 If you get a 500 error in code you've written, think of that as sort of the 138 00:06:29,820 --> 00:06:33,290 analog of seg faults in the world of web programming. 139 00:06:33,290 --> 00:06:34,560 It's not quite as dire. 140 00:06:34,560 --> 00:06:36,660 But it just means that, somewhere, you screwed up. 141 00:06:36,660 --> 00:06:38,260 So look forward to those. 142 00:06:38,260 --> 00:06:39,910 >> But let's see if we can see these in context. 143 00:06:39,910 --> 00:06:43,460 Let me go to a browser here and do the following. 144 00:06:43,460 --> 00:06:45,710 So this is Chrome, which happens to be installed in the appliance. 145 00:06:45,710 --> 00:06:49,410 But most every browser these days has some equivalent functionality. 146 00:06:49,410 --> 00:06:52,610 I'm going to go up the Chrome's menu, and go to Tools, and I'm going to go 147 00:06:52,610 --> 00:06:53,990 to Developer Tools. 148 00:06:53,990 --> 00:06:57,040 And you'll see that this little panel opens in the bottom of the window. 149 00:06:57,040 --> 00:07:00,190 Another shortcut, to be honest, that I usually use myself is to Right click 150 00:07:00,190 --> 00:07:04,370 or Control click anywhere on the web page and just go to Inspect Element. 151 00:07:04,370 --> 00:07:07,440 And that will not only open this have for you. 152 00:07:07,440 --> 00:07:10,230 It will also open, specifically, the Elements portion on 153 00:07:10,230 --> 00:07:11,430 the left hand side. 154 00:07:11,430 --> 00:07:12,460 >> So we're of course seeing Google. 155 00:07:12,460 --> 00:07:13,930 They changed their logo today. 156 00:07:13,930 --> 00:07:20,200 But on if I scroll down up here, notice that under Elements, you see 157 00:07:20,200 --> 00:07:23,460 what's called HTML, HyperText Markup Language, and this is the language 158 00:07:23,460 --> 00:07:26,000 that this and all web pages, really, are written in. 159 00:07:26,000 --> 00:07:28,950 But it's actually formatted for us so much more readably 160 00:07:28,950 --> 00:07:29,970 than it normally is. 161 00:07:29,970 --> 00:07:34,810 In fact, if I zoom out, and I instead just Right click or Control Click 162 00:07:34,810 --> 00:07:39,630 click on the page, and then go to View Page Source, this is literally what 163 00:07:39,630 --> 00:07:42,150 Google sent down to my browser. 164 00:07:42,150 --> 00:07:46,480 >> So some person or persons wrote Google.com using this source code. 165 00:07:46,480 --> 00:07:47,790 Most of this is not HTML. 166 00:07:47,790 --> 00:07:49,340 It's actually a language called JavaScript, which 167 00:07:49,340 --> 00:07:50,880 we'll come to on Wednesday. 168 00:07:50,880 --> 00:07:55,580 But what Chrome, and what every browser can do for us, is kind of see 169 00:07:55,580 --> 00:07:59,610 past all of the distractions of the crazy syntax, and reinsert white space 170 00:07:59,610 --> 00:08:02,940 for us, and even syntax highlight, or colorize things for us. 171 00:08:02,940 --> 00:08:06,470 So you'll find that these so-called developer tools built into browsers 172 00:08:06,470 --> 00:08:10,830 will make your life so, so much easier because you can explore, via this menu 173 00:08:10,830 --> 00:08:13,940 interface, exactly what the underlying source code is for 174 00:08:13,940 --> 00:08:15,750 any page on the internet. 175 00:08:15,750 --> 00:08:19,070 And indeed, this is one of the most effective ways to learn how to do 176 00:08:19,070 --> 00:08:22,860 something new, at least if the page isn't so complex as to overwhelm, is 177 00:08:22,860 --> 00:08:26,700 to start poking around it's HTML, look at its so-called CSS, which we'll come 178 00:08:26,700 --> 00:08:30,310 to a bit as well, to get an understanding of how that programmer 179 00:08:30,310 --> 00:08:33,480 implemented some particular feature of the page. 180 00:08:33,480 --> 00:08:36,530 >> But more technically interesting right now it's going to be this. 181 00:08:36,530 --> 00:08:39,429 If I go to the Network tab, let's now clear this. 182 00:08:39,429 --> 00:08:43,429 I'm going to click the little cross symbol here, and then 183 00:08:43,429 --> 00:08:45,630 go to another website. 184 00:08:45,630 --> 00:08:48,430 And I'm just going to type in Facebook.com. 185 00:08:48,430 --> 00:08:51,940 No HTTP, no HTTPS, no WWW. 186 00:08:51,940 --> 00:08:53,850 Let's actually see what happens here. 187 00:08:53,850 --> 00:08:55,030 >> Enter. 188 00:08:55,030 --> 00:08:58,480 Now notice a whole bunch of stuff just appeared in this bottom panel, in 189 00:08:58,480 --> 00:09:00,285 addition to the web page appearing in the top. 190 00:09:00,285 --> 00:09:04,890 I'm going to scroll back up into the Network tab here, and I'm going to 191 00:09:04,890 --> 00:09:06,080 click on the first row. 192 00:09:06,080 --> 00:09:10,580 What this tool is going to reveal to us is every one of the HTTP requests 193 00:09:10,580 --> 00:09:13,550 that rapidly just went back and forth between my browser 194 00:09:13,550 --> 00:09:14,930 and Facebook's server. 195 00:09:14,930 --> 00:09:17,830 And so every one of those rows represents one such request or 196 00:09:17,830 --> 00:09:20,970 response, one or more of those virtual envelope. 197 00:09:20,970 --> 00:09:24,080 Or more casually, it's like a person like a person, a customer in a 198 00:09:24,080 --> 00:09:26,710 restaurant, asking for something again, and again, and again. 199 00:09:26,710 --> 00:09:29,400 And the waiter keeps bringing it back one at a time. 200 00:09:29,400 --> 00:09:33,850 >> So now, if I zoom in on this, notice and this will be the sort of thing 201 00:09:33,850 --> 00:09:36,600 that you're welcome to and encouraged to play with on your own, because we 202 00:09:36,600 --> 00:09:38,150 won't go through everything in great detail. 203 00:09:38,150 --> 00:09:40,070 But notice there's a few sub tabs here-- 204 00:09:40,070 --> 00:09:43,700 Headers, Preview, Response, Cookies, and timing. 205 00:09:43,700 --> 00:09:48,280 I'm just going to look at headers for now because these are little 206 00:09:48,280 --> 00:09:53,600 ingredients inside of the envelope that help data get to and from places. 207 00:09:53,600 --> 00:09:57,590 >> So first, let me click this, View Source next to Request Headers. 208 00:09:57,590 --> 00:10:01,910 There is the request that my browser, Chrome, in this case, sent inside of 209 00:10:01,910 --> 00:10:02,910 that virtual envelope. 210 00:10:02,910 --> 00:10:04,800 You'll recall last week I manually typed it while 211 00:10:04,800 --> 00:10:06,380 pretending to be a browser. 212 00:10:06,380 --> 00:10:09,980 Then it reminded the server that it's looking for the host called 213 00:10:09,980 --> 00:10:10,835 Facebook.com. 214 00:10:10,835 --> 00:10:13,630 And then there's a bit more arcane information that we'll wave 215 00:10:13,630 --> 00:10:14,830 our hands for now. 216 00:10:14,830 --> 00:10:18,640 >> But if I start to scroll down now in this window, let me get to the 217 00:10:18,640 --> 00:10:19,980 response headers. 218 00:10:19,980 --> 00:10:23,270 This was what's in the virtual envelope that came back from 219 00:10:23,270 --> 00:10:24,095 Facebook.com. 220 00:10:24,095 --> 00:10:27,390 And if I click View Source just to see the raw text of it, 221 00:10:27,390 --> 00:10:28,400 notice a few things. 222 00:10:28,400 --> 00:10:32,130 One, Facebook also speaks the same protocol, version 1.1 thereof. 223 00:10:32,130 --> 00:10:33,390 So that's nice. 224 00:10:33,390 --> 00:10:36,820 But status code 301, moved permanently. 225 00:10:36,820 --> 00:10:38,880 >> Well, where the heck did Facebook go? 226 00:10:38,880 --> 00:10:40,430 What's this trying to convey to us? 227 00:10:40,430 --> 00:10:44,310 Well, notice down here there's another header called Location. 228 00:10:44,310 --> 00:10:51,050 So why is Facebook telling me that they moved permanently to that URL 229 00:10:51,050 --> 00:10:53,580 next to Location? 230 00:10:53,580 --> 00:10:54,962 I forgot the www. 231 00:10:54,962 --> 00:10:56,250 >> So that was my choice. 232 00:10:56,250 --> 00:11:00,450 In fact, most of us rarely, probably, type www.whatever.com these days. 233 00:11:00,450 --> 00:11:03,390 But it turns out a system administrator, like Facebook's, can 234 00:11:03,390 --> 00:11:06,800 configure their servers in such a way that either Facebook.com works, or 235 00:11:06,800 --> 00:11:12,450 www.Facebook.com works, or, really, any such prefix in front of their 236 00:11:12,450 --> 00:11:13,210 domain name. 237 00:11:13,210 --> 00:11:14,500 So they've done that for us. 238 00:11:14,500 --> 00:11:16,910 And they are redirecting us, probably for some technical, 239 00:11:16,910 --> 00:11:18,100 some marketing reasons. 240 00:11:18,100 --> 00:11:21,570 They just want to canonicalize on www.Facebook.com. 241 00:11:21,570 --> 00:11:24,040 >> But that's not quite it. 242 00:11:24,040 --> 00:11:28,560 If I scroll down here, let's see what happens. 243 00:11:28,560 --> 00:11:30,810 This is telling me we moved permanently to 244 00:11:30,810 --> 00:11:33,450 http://www.Facebook.com. 245 00:11:33,450 --> 00:11:36,620 So let's look at the second request that my browser sends. 246 00:11:36,620 --> 00:11:40,070 Unfortunately, it looks like Facebook has moved again because the second 247 00:11:40,070 --> 00:11:44,420 request, by selecting that URL instead, says that, too, moved 248 00:11:44,420 --> 00:11:45,010 permanently. 249 00:11:45,010 --> 00:11:48,140 And let me scroll down here to the response headers. 250 00:11:48,140 --> 00:11:51,530 Where has Facebook gone now? 251 00:11:51,530 --> 00:11:52,680 >> So HTTPS. 252 00:11:52,680 --> 00:11:56,130 So now Facebook has started, particularly in light of current 253 00:11:56,130 --> 00:11:59,750 events in recent months, especially and also in the past couple of years 254 00:11:59,750 --> 00:12:03,670 to compel all of their users, in a good way, to use HTTPS, which is more 255 00:12:03,670 --> 00:12:06,210 secure, although not entirely secure. 256 00:12:06,210 --> 00:12:10,000 And so now my page, my browser is going to request this third URL. 257 00:12:10,000 --> 00:12:14,710 And now, finally, we get the otherwise unseen 200 OK. 258 00:12:14,710 --> 00:12:18,830 >> So what in the world or all of these other rows down here. 259 00:12:18,830 --> 00:12:22,630 I literally typed one thing, and my browser seems to have requested like 260 00:12:22,630 --> 00:12:23,840 20 some odd things. 261 00:12:23,840 --> 00:12:24,640 What is that? 262 00:12:24,640 --> 00:12:25,810 >> AUDIENCE: Scripts? 263 00:12:25,810 --> 00:12:28,460 >> SPEAKER 1: Scripts, so other files written in a language called 264 00:12:28,460 --> 00:12:30,780 JavaScript, which, again, we'll see a bit of on Wednesday. 265 00:12:30,780 --> 00:12:32,760 What else? 266 00:12:32,760 --> 00:12:33,390 Style sheets. 267 00:12:33,390 --> 00:12:36,350 So something in a language called CSS, which we'll see in a bit. 268 00:12:36,350 --> 00:12:40,690 Gifs, and jpegs, and pngs, and images, and movie files-- whatever a web page 269 00:12:40,690 --> 00:12:43,280 has is most likely in the form of a file. 270 00:12:43,280 --> 00:12:46,750 And so what we're seeing on the left hand side there is all of the files 271 00:12:46,750 --> 00:12:50,280 that Chrome had to download, recursively, if you will, in order to 272 00:12:50,280 --> 00:12:52,430 compose the entirety of the page. 273 00:12:52,430 --> 00:12:56,210 >> So what we saw a moment ago with Google, if I click on the Elements 274 00:12:56,210 --> 00:13:00,470 tab, this, sure, is the HTML, the language that composes this page. 275 00:13:00,470 --> 00:13:01,890 But there's bunches of other things. 276 00:13:01,890 --> 00:13:02,640 There's a logo. 277 00:13:02,640 --> 00:13:04,680 There's those blue-ish icons over there. 278 00:13:04,680 --> 00:13:07,610 And there's other elements still on the page that themselves might be 279 00:13:07,610 --> 00:13:08,610 separate files. 280 00:13:08,610 --> 00:13:11,860 >> So what's nice about a browser is that it looks at the language we're going 281 00:13:11,860 --> 00:13:14,690 to start writing, or you've already started writing in P set 7, figures 282 00:13:14,690 --> 00:13:17,970 out where those files live, and goes and grabs them as well. 283 00:13:17,970 --> 00:13:21,010 And I can't emphasize enough, even though some of this might look a bit 284 00:13:21,010 --> 00:13:24,820 arcane or overwhelming at first glance, learning how to program 285 00:13:24,820 --> 00:13:28,500 applications for the web, it's invaluable to understand how these 286 00:13:28,500 --> 00:13:29,410 little tools work. 287 00:13:29,410 --> 00:13:33,830 These are sort of like GDB like tools, but much simpler, ultimately, to use-- 288 00:13:33,830 --> 00:13:37,690 and really gives you eyes into what we've been taking for granted for 289 00:13:37,690 --> 00:13:39,170 quite some time now. 290 00:13:39,170 --> 00:13:42,270 >> So what can we now do with this information? 291 00:13:42,270 --> 00:13:44,875 Well, let's actually take a look at the concepts underlying HTML. 292 00:13:44,875 --> 00:13:49,025 And we'll defer, as we already have, to sections this week, to the problem 293 00:13:49,025 --> 00:13:53,260 set 7 specification, to some of the more particulars of these languages. 294 00:13:53,260 --> 00:13:57,020 But let's see if we can't paint a picture of what you should understand 295 00:13:57,020 --> 00:13:57,940 overall here. 296 00:13:57,940 --> 00:14:02,280 >> So HTML, HyperText Markup Language, is not a programming language. 297 00:14:02,280 --> 00:14:03,520 What does that really mean? 298 00:14:03,520 --> 00:14:05,690 So HTML looks like this. 299 00:14:05,690 --> 00:14:06,810 And some of you already know this. 300 00:14:06,810 --> 00:14:08,130 Some of you have been doing this for some time. 301 00:14:08,130 --> 00:14:10,270 But let's see if we can't fill in some blanks as well. 302 00:14:10,270 --> 00:14:11,760 So notice a couple of things here. 303 00:14:11,760 --> 00:14:13,030 One, it's just text. 304 00:14:13,030 --> 00:14:15,960 So it's just like source code in C, or some other language. 305 00:14:15,960 --> 00:14:17,750 >> Notice that there seems to be a pattern here. 306 00:14:17,750 --> 00:14:20,870 There's indentation, but technically the indentation is just human 307 00:14:20,870 --> 00:14:21,205 convention. 308 00:14:21,205 --> 00:14:24,980 A browsers doesn't care if there's new lines and tabs like we see there. 309 00:14:24,980 --> 00:14:27,410 But notice that there's symmetries here. 310 00:14:27,410 --> 00:14:31,180 There's what I'll call, at the top of this file, the open tag, or the start 311 00:14:31,180 --> 00:14:33,030 tag, called HTML. 312 00:14:33,030 --> 00:14:36,800 And then, down below, perfectly lined up, much like we do with curly braces, 313 00:14:36,800 --> 00:14:40,910 we see open bracket, forward slash, HTML, close bracket. 314 00:14:40,910 --> 00:14:44,610 So that's the corresponding close tag, or end tag, for that thing. 315 00:14:44,610 --> 00:14:47,990 >> Together, everything inside of the so-called open tag and close tag 316 00:14:47,990 --> 00:14:50,440 compose what we'll call an element. 317 00:14:50,440 --> 00:14:53,910 And we'll see, in just a moment, it's really like a node in a trees. 318 00:14:53,910 --> 00:14:57,470 Because if you think about now the indentation that's implied here, you 319 00:14:57,470 --> 00:15:00,780 kind of have, like, a grandparent node called HTML. 320 00:15:00,780 --> 00:15:06,870 How many children might you say, based on this picture, the HTML element has? 321 00:15:06,870 --> 00:15:07,720 >> So probably two. 322 00:15:07,720 --> 00:15:10,240 One is the head element, apparently. 323 00:15:10,240 --> 00:15:11,710 And one is the body element. 324 00:15:11,710 --> 00:15:12,555 And why two children? 325 00:15:12,555 --> 00:15:15,840 Well, I'm just kind of inferring that if I have an open head tag and then a 326 00:15:15,840 --> 00:15:17,820 close head tag, that's an element. 327 00:15:17,820 --> 00:15:21,200 And then, if there's another open body tag and a close body tag, that's like 328 00:15:21,200 --> 00:15:22,340 another element. 329 00:15:22,340 --> 00:15:26,000 So in the sense that if I kind of rotate the picture on its side, it's 330 00:15:26,000 --> 00:15:29,910 like having an HTML tag, and then a head tag, and then a body tag, and 331 00:15:29,910 --> 00:15:34,290 then some text, hello world, dangling off of the body tag itself. 332 00:15:34,290 --> 00:15:36,620 >> So we can draw a picture that might look like this. 333 00:15:36,620 --> 00:15:38,020 The shapes are arbitrary. 334 00:15:38,020 --> 00:15:40,870 But notice that I've used sort of an ellipse at the top to represent the 335 00:15:40,870 --> 00:15:41,860 document itself. 336 00:15:41,860 --> 00:15:45,980 It turns out there can be other stuff inside of a web page that I've not 337 00:15:45,980 --> 00:15:46,940 drawn here. 338 00:15:46,940 --> 00:15:50,800 So we're going to even hang the HTML node off of a so-called document node. 339 00:15:50,800 --> 00:15:53,730 And then we have head and body and title, notice, 340 00:15:53,730 --> 00:15:55,360 which is nested further. 341 00:15:55,360 --> 00:15:58,650 I didn't bother putting additional line breaks inside of the title tag. 342 00:15:58,650 --> 00:16:02,710 It just felt like it was getting a little too verbose. 343 00:16:02,710 --> 00:16:07,000 So I left it in one line there, with open title, hello world, close title. 344 00:16:07,000 --> 00:16:09,380 And then we have some text dangling off of here. 345 00:16:09,380 --> 00:16:12,200 >> So this picture will come back to us when we dive into JavaScript. 346 00:16:12,200 --> 00:16:15,110 And understanding that when you write HTML like this, what 347 00:16:15,110 --> 00:16:16,250 is a browser doing? 348 00:16:16,250 --> 00:16:19,290 Well, we don't have to worry about how it's doing this, or with what 349 00:16:19,290 --> 00:16:23,090 algorithm, but at the end of the day, when a browser receives HTML like 350 00:16:23,090 --> 00:16:27,510 that, from Facebook or Google, it parses it, so to speak, it reads it, 351 00:16:27,510 --> 00:16:31,160 with something like fread, top to bottom, left to right, and as it 352 00:16:31,160 --> 00:16:36,300 realizes, oh, open tag, and then close tag, it starts to malloc, so to speak, 353 00:16:36,300 --> 00:16:37,800 a node in a tree. 354 00:16:37,800 --> 00:16:41,130 And when it encounters, as we've implied here with the indentation, a 355 00:16:41,130 --> 00:16:45,400 child node, it mallocs a node for that and attached that to the tree. 356 00:16:45,400 --> 00:16:49,150 >> So the tree structures, binary trees, ternary trees, and bigger trees, that 357 00:16:49,150 --> 00:16:53,380 we glanced at a week or two ago, notice that the same principle is 358 00:16:53,380 --> 00:16:54,220 coming back to us. 359 00:16:54,220 --> 00:16:57,590 And whoever implemented, Chrome whatever team did that, presumably had 360 00:16:57,590 --> 00:17:00,800 to implement some kind of tree structure underneath the hood. 361 00:17:00,800 --> 00:17:05,329 And that itself is probably in a language like C, or C++, or a lower 362 00:17:05,329 --> 00:17:08,540 level language that we'll now use atop the web. 363 00:17:08,540 --> 00:17:11,200 >> So now, maybe, this will make more sense. 364 00:17:11,200 --> 00:17:15,420 Actual tattoo from some guy who might regret it eventually, kind of. 365 00:17:15,420 --> 00:17:17,359 OK, all right, so a lot of web humor. 366 00:17:17,359 --> 00:17:18,599 It's not really going over so well today. 367 00:17:18,599 --> 00:17:19,560 So we'll move on. 368 00:17:19,560 --> 00:17:20,180 All right. 369 00:17:20,180 --> 00:17:22,760 >> So let's take a look now at a few examples. 370 00:17:22,760 --> 00:17:24,660 The simplest possible thing might be this. 371 00:17:24,660 --> 00:17:29,170 I'm going to go ahead and open up in gedit a file called hello.php. 372 00:17:29,170 --> 00:17:31,730 373 00:17:31,730 --> 00:17:36,330 And inside of here, I'm going to quickly just do this, printf, quote 374 00:17:36,330 --> 00:17:38,590 unquote, "hello world." 375 00:17:38,590 --> 00:17:42,460 >> So notice, and I'll do my backslash n, I've not bothered to declare main. 376 00:17:42,460 --> 00:17:45,310 It turns out, in php, and a lot of languages, you don't need a main 377 00:17:45,310 --> 00:17:46,090 function per se. 378 00:17:46,090 --> 00:17:47,720 You can just start writing your program. 379 00:17:47,720 --> 00:17:51,210 Now, when I save this file, notice I'm going to have to do the following. 380 00:17:51,210 --> 00:17:55,360 I'm not going to use make, and I'm not going to use clang because PHP, unlike 381 00:17:55,360 --> 00:17:57,400 C, is not a compiled language. 382 00:17:57,400 --> 00:18:01,400 It's what's called an interpreted language, which means that you run it 383 00:18:01,400 --> 00:18:04,650 as an input through another program called an interpreter. 384 00:18:04,650 --> 00:18:08,150 And that program reads it, top to bottom, left to right, and does 385 00:18:08,150 --> 00:18:09,290 whatever you tell it to do. 386 00:18:09,290 --> 00:18:12,920 >> So in this case here I have one line that says printf. 387 00:18:12,920 --> 00:18:17,990 So when I run this source code, hello.php, though a program that 388 00:18:17,990 --> 00:18:22,830 happens, conveniently, to be called PHP, that program PHP is going to read 389 00:18:22,830 --> 00:18:26,120 this file, top to bottom, left to right, and it's going to do what I 390 00:18:26,120 --> 00:18:30,110 tell it to do-- executing code, and if it doesn't recognize something, just 391 00:18:30,110 --> 00:18:31,320 spitting it out. 392 00:18:31,320 --> 00:18:34,940 So I'm going to go ahead and run PHP of hello.php. 393 00:18:34,940 --> 00:18:37,110 Enter. 394 00:18:37,110 --> 00:18:39,690 >> And that's not quite what I intended. 395 00:18:39,690 --> 00:18:40,530 Well, why is that? 396 00:18:40,530 --> 00:18:43,910 Well, PHP is a language that's actually designed to be fairly 397 00:18:43,910 --> 00:18:46,150 intertwined with the web. 398 00:18:46,150 --> 00:18:50,460 When making web pages with this language PHP, as we'll soon see, we'll 399 00:18:50,460 --> 00:18:54,560 want to do something like print out lines like this. 400 00:18:54,560 --> 00:18:55,940 >> So I'm going to do this. 401 00:18:55,940 --> 00:19:00,810 Open bracket, question mark, PHP, and now I'm just going indent just to keep 402 00:19:00,810 --> 00:19:01,960 things nice. 403 00:19:01,960 --> 00:19:04,910 And now I'm going to do a question mark close bracket. 404 00:19:04,910 --> 00:19:06,270 So there's a bit of asymmetry here. 405 00:19:06,270 --> 00:19:07,490 You don't do this. 406 00:19:07,490 --> 00:19:10,530 And you don't do a slash, so PHP is a little different. 407 00:19:10,530 --> 00:19:14,610 >> But now, if I rerun this program, PHP hello.php, now I 408 00:19:14,610 --> 00:19:16,090 actually get Hello World. 409 00:19:16,090 --> 00:19:17,750 And we'll see why this is valuable. 410 00:19:17,750 --> 00:19:20,960 One, it allows me to specify, super explicitly, this is 411 00:19:20,960 --> 00:19:22,480 code, execute this. 412 00:19:22,480 --> 00:19:25,480 And that's indeed what these special tags imply here. 413 00:19:25,480 --> 00:19:30,330 >> But it also means that if I just do something like I aim over here, that 414 00:19:30,330 --> 00:19:34,000 means that, literally, that will just be printed out without the need to 415 00:19:34,000 --> 00:19:36,850 actually call printf, or print, or any similar function. 416 00:19:36,850 --> 00:19:39,445 So we'll come back to that in just a moment. 417 00:19:39,445 --> 00:19:40,470 >> First, let's do this. 418 00:19:40,470 --> 00:19:43,950 Inside of the appliance, we have a directory called Vhosts, for virtual 419 00:19:43,950 --> 00:19:47,000 hosts, slash local host, slash public. 420 00:19:47,000 --> 00:19:50,240 So it's a bit verbose, but long story short, the appliance is designed not 421 00:19:50,240 --> 00:19:53,770 only to support C. It's also designed to support PHP. 422 00:19:53,770 --> 00:19:57,440 But it's also designed to be a web server, and a database server. 423 00:19:57,440 --> 00:20:00,230 And it's designed, and truly configured, to be reminiscent of any 424 00:20:00,230 --> 00:20:04,230 commercial web hosting company that you might pay $5 a month for, 425 00:20:04,230 --> 00:20:05,040 $100 a month for. 426 00:20:05,040 --> 00:20:08,200 Whatever the service is, it's configured to be very similar to a 427 00:20:08,200 --> 00:20:10,170 real world production server. 428 00:20:10,170 --> 00:20:13,485 >> And what that means is that running on the appliance is web server software. 429 00:20:13,485 --> 00:20:15,060 It happens to be called Apache. 430 00:20:15,060 --> 00:20:17,790 It's just free, and open source, and very popular. 431 00:20:17,790 --> 00:20:23,260 And we have configured Apache to know that if I visit a certain URL, with 432 00:20:23,260 --> 00:20:28,060 Chrome or any browser inside of the appliance, to look into this directory 433 00:20:28,060 --> 00:20:31,030 for the files that the user is requesting. 434 00:20:31,030 --> 00:20:32,790 >> In other words, let me go ahead and do this. 435 00:20:32,790 --> 00:20:36,890 Inside of my public directory, I'm going to go ahead and create a file 436 00:20:36,890 --> 00:20:39,580 called index.html. 437 00:20:39,580 --> 00:20:41,000 That gives me the tab here. 438 00:20:41,000 --> 00:20:44,210 And I'm going to go very quickly and go ahead and bang out 439 00:20:44,210 --> 00:20:45,010 this program here. 440 00:20:45,010 --> 00:20:48,410 Doctype HTML, which for now, just assume you have to type. 441 00:20:48,410 --> 00:20:53,490 It's just an arcane tag, that's not truly an HTML tag, that specifies that 442 00:20:53,490 --> 00:20:55,050 here comes some HTML. 443 00:20:55,050 --> 00:20:57,400 >> I'm going to go ahead and recreate what we saw a moment ago. 444 00:20:57,400 --> 00:20:58,650 Here's the head of the page. 445 00:20:58,650 --> 00:21:01,170 Inside of the head was the-- 446 00:21:01,170 --> 00:21:01,890 so title. 447 00:21:01,890 --> 00:21:04,340 So we'll say hello, world. 448 00:21:04,340 --> 00:21:06,570 And then down here was the body tag. 449 00:21:06,570 --> 00:21:08,580 Let me close the body tag. 450 00:21:08,580 --> 00:21:12,280 And then in here I'll also say, just for clarity, hello world. 451 00:21:12,280 --> 00:21:14,770 >> So this is, arguably, the simplest possible web page you 452 00:21:14,770 --> 00:21:15,770 can make that's valid. 453 00:21:15,770 --> 00:21:17,030 It's syntactically valid. 454 00:21:17,030 --> 00:21:18,620 Everything that's opened is closed. 455 00:21:18,620 --> 00:21:20,910 Everything's nicely in styled and indented. 456 00:21:20,910 --> 00:21:23,600 So let's see now how I can access this file. 457 00:21:23,600 --> 00:21:25,540 >> Well, let me go to Chrome here. 458 00:21:25,540 --> 00:21:35,050 And let me go to http://localhost/index.html. 459 00:21:35,050 --> 00:21:36,200 So what's local host? 460 00:21:36,200 --> 00:21:39,400 Well, most any computer in the world, Linux, Mac OS, Windows, has a nickname 461 00:21:39,400 --> 00:21:40,680 called local host. 462 00:21:40,680 --> 00:21:42,900 So if you ever want to talk to your own computer-- 463 00:21:42,900 --> 00:21:45,140 albeit, oddly reflexively-- 464 00:21:45,140 --> 00:21:47,080 you call yourself local host. 465 00:21:47,080 --> 00:21:50,390 No matter what your actual computer is called, whether it's David's MacBook 466 00:21:50,390 --> 00:21:52,490 Air, or something more verbose like that. 467 00:21:52,490 --> 00:21:57,760 >> So this URL is apparently going to use the HTTP to talk to the local host, 468 00:21:57,760 --> 00:22:00,800 the same computer, the appliance, and it's going to ask for, just take a 469 00:22:00,800 --> 00:22:02,570 guess, what file? 470 00:22:02,570 --> 00:22:04,460 Index.html. 471 00:22:04,460 --> 00:22:08,650 So the appliance has been configured in advance to know that if I'm asking 472 00:22:08,650 --> 00:22:13,460 for something like index.html, look for in a folder called Vhosts, in a 473 00:22:13,460 --> 00:22:17,950 folder called localhost, in a folder therein called public. 474 00:22:17,950 --> 00:22:20,400 That's where all of my public files are going to be. 475 00:22:20,400 --> 00:22:22,610 So I'm now going to hit Enter. 476 00:22:22,610 --> 00:22:27,100 >> And damn, there is that forbidden message, otherwise known as 403, the 477 00:22:27,100 --> 00:22:28,490 numeric code for it. 478 00:22:28,490 --> 00:22:30,130 So what's wrong here? 479 00:22:30,130 --> 00:22:33,210 Well, it's not enough to just put the file inside of my folder. 480 00:22:33,210 --> 00:22:35,790 I need to actually do the following. 481 00:22:35,790 --> 00:22:40,210 >> Let me go into my Vhosts directory, into localhost, into public, and let 482 00:22:40,210 --> 00:22:41,680 me do ls dash l. 483 00:22:41,680 --> 00:22:44,510 And there's a few other things in here for today's purposes. 484 00:22:44,510 --> 00:22:50,540 But notice on the left hand side, next to index.html, we only see one RW. 485 00:22:50,540 --> 00:22:53,560 And in the past, what has RW stood for? 486 00:22:53,560 --> 00:22:54,240 >> Just read or write. 487 00:22:54,240 --> 00:22:58,000 The fact that it says rw on the left means I, the owner of this file, can 488 00:22:58,000 --> 00:22:59,020 read or write it. 489 00:22:59,020 --> 00:23:05,010 But I need to let all people in the world read this, though not write it. 490 00:23:05,010 --> 00:23:09,650 So I'm going to change the mode of the file, chmod, all plus r to give 491 00:23:09,650 --> 00:23:13,910 everyone read permission on the file called index.html. 492 00:23:13,910 --> 00:23:18,040 >> And if I now retype ls dash l, notice that, over here, some more 493 00:23:18,040 --> 00:23:19,160 R's have popped up. 494 00:23:19,160 --> 00:23:21,090 And for now, the spec goes into more detail. 495 00:23:21,090 --> 00:23:24,450 For P set 7, that just means everyone can now read this file. 496 00:23:24,450 --> 00:23:27,790 If I go back to my browser now and reload, voila. 497 00:23:27,790 --> 00:23:28,750 Hello world. 498 00:23:28,750 --> 00:23:32,260 >> And I can even open my Chrome tools and see, just like with Google and 499 00:23:32,260 --> 00:23:34,590 Facebook that there's my HTML, formatted a little 500 00:23:34,590 --> 00:23:35,930 differently and colorized. 501 00:23:35,930 --> 00:23:40,450 If I go to the network tab and reload the page, notice that there is the get 502 00:23:40,450 --> 00:23:42,900 request that Chrome is sending to the appliance. 503 00:23:42,900 --> 00:23:46,020 There's the 200 for that particular file. 504 00:23:46,020 --> 00:23:49,340 So in short, this is how all these various pieces are coming together. 505 00:23:49,340 --> 00:23:53,530 It just so happens that the web server we're using right now isn't remote, 506 00:23:53,530 --> 00:23:54,210 like Facebook. 507 00:23:54,210 --> 00:23:58,330 It's literally on the same computer, which is perfectly OK. 508 00:23:58,330 --> 00:24:00,590 >> So what more can we do in a web page? 509 00:24:00,590 --> 00:24:03,110 Well, just, let's breeze through a couple of these things. 510 00:24:03,110 --> 00:24:07,860 But let me go ahead and reopen Gedit with index.html. 511 00:24:07,860 --> 00:24:13,980 And let me go ahead and say hello CS50, save this file, go back to the 512 00:24:13,980 --> 00:24:16,260 browser, really underwhelming change. 513 00:24:16,260 --> 00:24:19,130 >> But what if we want to actually link to something now? 514 00:24:19,130 --> 00:24:23,480 So it turns out that we can have the links in HTML that are just tags 515 00:24:23,480 --> 00:24:24,140 themselves. 516 00:24:24,140 --> 00:24:27,320 It happens to be called the anchor tag. a href equals 517 00:24:27,320 --> 00:24:33,190 https://www.cs50.net, www.cs50.net close quote, close bracket. 518 00:24:33,190 --> 00:24:35,230 And now let's see what else comes next. 519 00:24:35,230 --> 00:24:36,500 >> I've opened the tag. 520 00:24:36,500 --> 00:24:38,990 I now need to give it a phrase like CS50. 521 00:24:38,990 --> 00:24:40,600 Let me close the tag. 522 00:24:40,600 --> 00:24:42,010 And notice a few things. 523 00:24:42,010 --> 00:24:45,270 Even though there's this cryptic thing here, I have not repeated it when you 524 00:24:45,270 --> 00:24:46,010 close the tag. 525 00:24:46,010 --> 00:24:48,230 You just close the tag with its name alone. 526 00:24:48,230 --> 00:24:50,940 And this is what's known as an attribute with a value. 527 00:24:50,940 --> 00:24:56,070 Attributes just modify the behavior of some tag inside of a page. 528 00:24:56,070 --> 00:24:59,150 >> So this is specifying that the hyper reference, the fancy way of saying the 529 00:24:59,150 --> 00:25:03,660 URL for this anchor, for this link, should be CS50.net. 530 00:25:03,660 --> 00:25:07,440 And the text that we want to show the user isn't that raw URL, but rather 531 00:25:07,440 --> 00:25:08,730 the word CS50. 532 00:25:08,730 --> 00:25:13,710 >> So if now I reload, let me zoom in for clarity, let me reload the page, 533 00:25:13,710 --> 00:25:16,460 notice that we have this old school blue underlined link. 534 00:25:16,460 --> 00:25:20,000 And if I hover over it, and it's going to be tough to see, in the bottom left 535 00:25:20,000 --> 00:25:23,690 hand corner of the screen, notice that it says the URL to which 536 00:25:23,690 --> 00:25:24,430 I'm going to go. 537 00:25:24,430 --> 00:25:27,940 And if I click there, voila, now I'm making web pages. 538 00:25:27,940 --> 00:25:30,140 And we've led ourselves to the home page. 539 00:25:30,140 --> 00:25:32,670 >> But notice what potential this offers us. 540 00:25:32,670 --> 00:25:34,890 Security is very much in vogue these days. 541 00:25:34,890 --> 00:25:41,210 What if I instead say something like this, and I instead go to, say, let's 542 00:25:41,210 --> 00:25:42,460 see, fakeCS50.net. 543 00:25:42,460 --> 00:25:44,660 544 00:25:44,660 --> 00:25:46,360 Reload this page. 545 00:25:46,360 --> 00:25:50,180 >> OK, so notice it still looks like I'm going to CS50, unless an astute eye 546 00:25:50,180 --> 00:25:51,560 will notice I'm going to fake CS50. 547 00:25:51,560 --> 00:25:54,550 I'm guessing this domain is not taken. 548 00:25:54,550 --> 00:25:55,960 OK, so it's not available. 549 00:25:55,960 --> 00:25:56,600 So that's good. 550 00:25:56,600 --> 00:25:57,900 No one actually has that domain. 551 00:25:57,900 --> 00:26:00,380 >> But let's be a little more malicious because that's kind of stupid. 552 00:26:00,380 --> 00:26:02,240 What if we change this to Paypal. 553 00:26:02,240 --> 00:26:09,960 And what if we call this, like, www.paypal.badguy.com, 554 00:26:09,960 --> 00:26:12,070 whatever the domain is. 555 00:26:12,070 --> 00:26:13,700 That probably exists. 556 00:26:13,700 --> 00:26:16,260 So now let me reload the page. 557 00:26:16,260 --> 00:26:22,890 And here we have sort of a phishing attack, P-H-I-S-H-I-N-G, which is the 558 00:26:22,890 --> 00:26:26,760 silly word given for an attack that tries to fish information, or, better 559 00:26:26,760 --> 00:26:30,450 yet, money, out of people by tricking them into providing information that 560 00:26:30,450 --> 00:26:31,990 they might not otherwise do. 561 00:26:31,990 --> 00:26:33,500 This looks totally legit, right? 562 00:26:33,500 --> 00:26:34,930 I must have a link here to Paypal.com. 563 00:26:34,930 --> 00:26:37,700 564 00:26:37,700 --> 00:26:40,430 In fairness, if I sexed it up with some graphics, we can make it look 565 00:26:40,430 --> 00:26:41,310 more like PayPal. 566 00:26:41,310 --> 00:26:41,510 Right? 567 00:26:41,510 --> 00:26:43,815 Because I could, as an aside, I could go to Paypal.com. 568 00:26:43,815 --> 00:26:47,110 And we've just seen how I can see all of their HTML. 569 00:26:47,110 --> 00:26:50,560 I could just copy it and recreate the aesthetics of Paypal rather than go 570 00:26:50,560 --> 00:26:51,490 old school here. 571 00:26:51,490 --> 00:26:55,010 But notice, of course, and it's a little small still, only in the bottom 572 00:26:55,010 --> 00:26:59,190 left hand corner, in like a 10 point font, do you see what URL you're 573 00:26:59,190 --> 00:27:01,310 actually going to be led to. 574 00:27:01,310 --> 00:27:06,580 >> And so if you've ever gotten spam saying go ahead, and you're account 575 00:27:06,580 --> 00:27:07,420 has been compromised. 576 00:27:07,420 --> 00:27:10,615 Please click this link and let us know your password so we can ensure you're 577 00:27:10,615 --> 00:27:13,010 you, don't ever do that. 578 00:27:13,010 --> 00:27:14,180 These things should go without saying. 579 00:27:14,180 --> 00:27:17,670 But it's wonderfully amusing, and tragic, how every year this seems to 580 00:27:17,670 --> 00:27:19,660 happen to some non-zero number of people. 581 00:27:19,660 --> 00:27:21,400 >> And that's the beauty of phishing attacks. 582 00:27:21,400 --> 00:27:23,160 You can send out a million emails. 583 00:27:23,160 --> 00:27:27,720 And even if 0.01% of people actually click on Paypal and give you your 584 00:27:27,720 --> 00:27:31,040 password, that's still a non-zero number of people who've just giving 585 00:27:31,040 --> 00:27:32,200 you their money. 586 00:27:32,200 --> 00:27:36,170 And sending emails, of course, is quite easy and, essentially, free 587 00:27:36,170 --> 00:27:36,970 these days. 588 00:27:36,970 --> 00:27:40,410 >> So long story short, wonderfully beautiful idea, right? 589 00:27:40,410 --> 00:27:44,620 Years ago, this was the earliest web, enabling a web of 590 00:27:44,620 --> 00:27:46,330 hyperlinks among resources. 591 00:27:46,330 --> 00:27:49,520 But so quickly could it be used for ill purposes. 592 00:27:49,520 --> 00:27:54,100 And email, suffice it to say, these days, have HTML embedded inside. 593 00:27:54,100 --> 00:27:55,410 >> Well, let me just one other thing. 594 00:27:55,410 --> 00:27:58,640 And we'll defer largely to section in problem set seven to allow you to 595 00:27:58,640 --> 00:28:00,000 explore the particulars. 596 00:28:00,000 --> 00:28:01,990 But let me go ahead and do a few things here. 597 00:28:01,990 --> 00:28:04,840 I'm going to go in and declare what's called a div, or 598 00:28:04,840 --> 00:28:06,080 division, of the page. 599 00:28:06,080 --> 00:28:07,770 Let me close that div tag. 600 00:28:07,770 --> 00:28:11,460 >> And I'm going to say up here top of page. 601 00:28:11,460 --> 00:28:14,940 And then below this, I'm going to do something like another div, close this 602 00:28:14,940 --> 00:28:17,800 tag, and do bottom of page. 603 00:28:17,800 --> 00:28:18,840 And let's save it. 604 00:28:18,840 --> 00:28:21,040 >> So now let's go back to my file. 605 00:28:21,040 --> 00:28:22,120 Very underwhelming. 606 00:28:22,120 --> 00:28:25,520 But what division is used for, underneath the hood, is it's actually 607 00:28:25,520 --> 00:28:26,920 a nice structural element. 608 00:28:26,920 --> 00:28:30,300 It doesn't have any aesthetics so far as we can see, other than, apparently, 609 00:28:30,300 --> 00:28:31,890 putting things on new lines. 610 00:28:31,890 --> 00:28:36,290 >> But notice, as an aside, just hitting Enter does not cut it in HTML like it 611 00:28:36,290 --> 00:28:39,840 does in C. You might think that that's going to put a nice big gap between 612 00:28:39,840 --> 00:28:41,300 the top and bottom of the page. 613 00:28:41,300 --> 00:28:43,420 But it's ignored. 614 00:28:43,420 --> 00:28:48,040 White space is essentially ignored in web pages other than the very first 615 00:28:48,040 --> 00:28:51,530 space bar character, or carriage return, that you hit on the keyboard. 616 00:28:51,530 --> 00:28:55,370 If you want more line breaks, you have to specify it yourself. 617 00:28:55,370 --> 00:28:59,080 >> So I'm going to do a few things here to show what's going on. 618 00:28:59,080 --> 00:29:02,700 I'm going to add an attribute that exists And again, the way you learn 619 00:29:02,700 --> 00:29:07,110 what attributes exist, what tags exist, really, is online references. 620 00:29:07,110 --> 00:29:09,750 HTML is the sort of language-- it's not a programming language. 621 00:29:09,750 --> 00:29:12,460 It's a markup language-- that after a good half hour, maybe, an hour with 622 00:29:12,460 --> 00:29:15,930 it, you'll certainly grasp, most likely, the basic idea. 623 00:29:15,930 --> 00:29:20,350 And then a Google search away is all the possible tags that you might be 624 00:29:20,350 --> 00:29:21,170 interested in. 625 00:29:21,170 --> 00:29:24,290 And per the spec, that is quite welcome and encouraged here. 626 00:29:24,290 --> 00:29:26,120 >> So now let me go ahead and do something like this. 627 00:29:26,120 --> 00:29:28,690 Background-color. 628 00:29:28,690 --> 00:29:32,060 And now, I'm going to do something like red, semicolon. 629 00:29:32,060 --> 00:29:33,970 And you can do this in a few different ways. 630 00:29:33,970 --> 00:29:36,770 I'm just kind of typing it as super explicitly as possible. 631 00:29:36,770 --> 00:29:41,960 >> But it turns out that this value here is what's called CSS, Cascading Style 632 00:29:41,960 --> 00:29:43,700 Sheets, which is another language altogether. 633 00:29:43,700 --> 00:29:46,770 CSS has nothing to do with open tags and close tags. 634 00:29:46,770 --> 00:29:48,230 It has to do with properties. 635 00:29:48,230 --> 00:29:52,660 >> And properties are simply key value pairs, which just means some word, 636 00:29:52,660 --> 00:29:54,680 colon, and then some other word. 637 00:29:54,680 --> 00:29:57,940 And if you have multiple ones, or just one here, you can end it with a 638 00:29:57,940 --> 00:29:59,390 semicolon, just for clarity. 639 00:29:59,390 --> 00:30:01,370 But that, too, will work here. 640 00:30:01,370 --> 00:30:02,500 >> Now what's this going to do? 641 00:30:02,500 --> 00:30:03,610 You can probably guess. 642 00:30:03,610 --> 00:30:05,930 Let me go ahead and reload this page. 643 00:30:05,930 --> 00:30:07,300 And now it's really coming along. 644 00:30:07,300 --> 00:30:09,150 So top of my page is red. 645 00:30:09,150 --> 00:30:12,380 But what's key here is that, I mentioned earlier, that div gives you 646 00:30:12,380 --> 00:30:13,220 a division of the page. 647 00:30:13,220 --> 00:30:14,410 And that's indeed what it does. 648 00:30:14,410 --> 00:30:17,920 It essentially divides the page into a rectangle that you can then 649 00:30:17,920 --> 00:30:18,720 manipulate. 650 00:30:18,720 --> 00:30:22,330 >> And this notion of rectangles is kind of compelling in that, if you think of 651 00:30:22,330 --> 00:30:26,410 most any website, there's probably some structure to it. 652 00:30:26,410 --> 00:30:29,620 Most of you have probably rarely seen Facebook's homepage if you're logged 653 00:30:29,620 --> 00:30:30,440 in all the time. 654 00:30:30,440 --> 00:30:33,920 >> But on Facebook's home page, there's some kind of div along the top. 655 00:30:33,920 --> 00:30:36,140 And it might not be as simple as one div, but there's a 656 00:30:36,140 --> 00:30:37,560 rectangular region there. 657 00:30:37,560 --> 00:30:40,290 The rest of the page is like a huge div, like a much 658 00:30:40,290 --> 00:30:41,910 bigger rectangular region. 659 00:30:41,910 --> 00:30:44,540 So long story short, just by having these little building blocks, the 660 00:30:44,540 --> 00:30:49,250 ability to model things as rectangles, whether wide or narrow, you can also 661 00:30:49,250 --> 00:30:53,680 make columns potentially, allows you to lay out pages, really, however you 662 00:30:53,680 --> 00:30:54,100 would like. 663 00:30:54,100 --> 00:30:56,170 We're really just scratching the surface here. 664 00:30:56,170 --> 00:30:59,820 >> Indeed, if I do one other one, let me go ahead and do style, 665 00:30:59,820 --> 00:31:05,410 background-color, we'll do something like blue, close quotes. 666 00:31:05,410 --> 00:31:06,620 Let's reload this. 667 00:31:06,620 --> 00:31:08,260 So now it's getting even uglier. 668 00:31:08,260 --> 00:31:11,520 But now I can kind of show off my P set five skills, right? 669 00:31:11,520 --> 00:31:12,690 Red. 670 00:31:12,690 --> 00:31:15,640 It reminds me of RGB, Red Green Blue triples. 671 00:31:15,640 --> 00:31:19,330 Well, it turns out in web programming, or web design, which is this, we've 672 00:31:19,330 --> 00:31:21,650 not yet programmed anything per se, you can actually 673 00:31:21,650 --> 00:31:22,880 have hexadecimal code. 674 00:31:22,880 --> 00:31:26,480 So something something, something something, something something. 675 00:31:26,480 --> 00:31:30,650 So you can have six hexadecimal characters, or three, in some cases, 676 00:31:30,650 --> 00:31:33,480 and each of those question marks has to be a hexadecimal digits, 677 00:31:33,480 --> 00:31:34,985 zero through f. 678 00:31:34,985 --> 00:31:41,000 >> If I want to have a lot of red, and no green, and no blue, what's the 679 00:31:41,000 --> 00:31:43,740 opposite of zero when using hex? 680 00:31:43,740 --> 00:31:44,480 It's f. 681 00:31:44,480 --> 00:31:51,130 So I can do ff, zero zero, zero zero, save this, and now come down here. 682 00:31:51,130 --> 00:31:52,700 And I don't actually see a change. 683 00:31:52,700 --> 00:31:56,230 So quote unquote "red" is apparently synonymous for all red, 684 00:31:56,230 --> 00:31:57,610 no green, no blue. 685 00:31:57,610 --> 00:31:59,960 Meanwhile, let's deliberately change this one to be something 686 00:31:59,960 --> 00:32:01,210 random, like ABCDF. 687 00:32:01,210 --> 00:32:03,790 688 00:32:03,790 --> 00:32:05,860 >> Let's see what that is. 689 00:32:05,860 --> 00:32:08,530 It's a really nice blue, actually, baby blue. 690 00:32:08,530 --> 00:32:11,820 All right, so these are just now somewhat random combinations of 691 00:32:11,820 --> 00:32:12,210 characters. 692 00:32:12,210 --> 00:32:13,410 So we won't get bogged down in here. 693 00:32:13,410 --> 00:32:15,930 But again, this speaks to the precision that you can begin to 694 00:32:15,930 --> 00:32:19,090 apply-- even if you're very overwhelmed by the aesthetics. 695 00:32:19,090 --> 00:32:21,750 In fact, if you really want to be impressed, let me go ahead and change 696 00:32:21,750 --> 00:32:23,500 the font size, for instance. 697 00:32:23,500 --> 00:32:25,960 And notice the semicolon, which is necessary there. 698 00:32:25,960 --> 00:32:29,570 >> Font size, we can be just ridiculous here, 96 point. 699 00:32:29,570 --> 00:32:31,280 Save that. 700 00:32:31,280 --> 00:32:33,670 Wow, that's a big font size. 701 00:32:33,670 --> 00:32:35,490 All right, so it's very easy. 702 00:32:35,490 --> 00:32:38,260 And actually, you're essentially seeing the very first web page I made 703 00:32:38,260 --> 00:32:40,060 years ago, when I first learned this stuff. 704 00:32:40,060 --> 00:32:42,190 It's very easy to make very hideous things quickly. 705 00:32:42,190 --> 00:32:46,115 >> And if you're familiar with the Wayback Machine on archive.org, you 706 00:32:46,115 --> 00:32:48,210 can find all my hideous undergrad web pages. 707 00:32:48,210 --> 00:32:50,090 One had Kermit the Frog on the front. 708 00:32:50,090 --> 00:32:53,150 I went through a phase where I thought it was cool to take the background of 709 00:32:53,150 --> 00:32:56,320 a red curtain, when I learned how you can tile images again, and again, and 710 00:32:56,320 --> 00:32:59,540 again, to fill a page with a big tacky red curtain. 711 00:32:59,540 --> 00:33:03,120 And then, on top of this, was an icon that you had to click to enter my home 712 00:33:03,120 --> 00:33:04,960 page because that was very much in vogue. 713 00:33:04,960 --> 00:33:08,870 >> And then my first program I ever wrote wasn't in PHP, but in a language 714 00:33:08,870 --> 00:33:12,260 called Pearl, wrote a guest book, which is a really cool thing that a 715 00:33:12,260 --> 00:33:14,250 lot of people expect you to have on a home page. 716 00:33:14,250 --> 00:33:17,510 When you get to the page, they want you to sign in, and say who you are, 717 00:33:17,510 --> 00:33:18,720 and why you're there. 718 00:33:18,720 --> 00:33:21,320 This is very 1990s style web design. 719 00:33:21,320 --> 00:33:24,130 >> But these days, surely, we've come a lot farther. 720 00:33:24,130 --> 00:33:27,560 And you'll see, in section, and even in the problem set seven, by 721 00:33:27,560 --> 00:33:31,570 leveraging libraries these days, it's so much easier to make 722 00:33:31,570 --> 00:33:33,400 prettier things quickly. 723 00:33:33,400 --> 00:33:36,550 Really here, we're just scratching the surface of what you can do 724 00:33:36,550 --> 00:33:37,400 stylistically. 725 00:33:37,400 --> 00:33:41,660 >> And in fact, already, let me emphasize that this is already getting ugly, not 726 00:33:41,660 --> 00:33:46,030 just aesthetically, but in terms of style of my code, or the 727 00:33:46,030 --> 00:33:47,260 design of my code. 728 00:33:47,260 --> 00:33:52,350 I have currently comingled HTML, which is the greenish open tags there, with 729 00:33:52,350 --> 00:33:55,160 CSS properties, which is totally legit. 730 00:33:55,160 --> 00:33:57,200 This is really where the language had its origins. 731 00:33:57,200 --> 00:34:01,030 >> But in the interest of clean design, much like we started factoring stuff 732 00:34:01,030 --> 00:34:05,370 out from C files into .h files, let me actually practice that kind of 733 00:34:05,370 --> 00:34:07,990 principle and start doing this instead. 734 00:34:07,990 --> 00:34:13,280 Let me put a style tag up here, which also exists in HTML, and let me 735 00:34:13,280 --> 00:34:15,330 specify the following. 736 00:34:15,330 --> 00:34:16,360 Let me delete this. 737 00:34:16,360 --> 00:34:18,110 Background color is going to be red. 738 00:34:18,110 --> 00:34:19,800 I'm going to delete this entirely. 739 00:34:19,800 --> 00:34:22,580 I'm going to get rid of the style attribute, and I'm going to uniquely 740 00:34:22,580 --> 00:34:24,620 identify this div with a word-- 741 00:34:24,620 --> 00:34:28,750 arbitrarily, but reasonably, quote unquote "top." And id is a special 742 00:34:28,750 --> 00:34:32,530 attribute that uniquely defines a certain HTML element 743 00:34:32,530 --> 00:34:33,850 as having that id. 744 00:34:33,850 --> 00:34:37,969 >> If I now want to stylized it, up here in the head of my page, inside of the 745 00:34:37,969 --> 00:34:41,730 style tag, notice that I can do hash top. 746 00:34:41,730 --> 00:34:45,300 And then I can put a couple of curly braces, reminiscent of C, and then let 747 00:34:45,300 --> 00:34:47,130 me paste in that stylization. 748 00:34:47,130 --> 00:34:49,929 And let me go ahead here and anticipate where I'm going with this. 749 00:34:49,929 --> 00:34:53,380 Let me also create one for the bottom div. 750 00:34:53,380 --> 00:34:58,010 Let me grab this hideous code from down here, put it in here, and I'll be 751 00:34:58,010 --> 00:35:00,770 a little more anal now and stylized it by just putting things on their own 752 00:35:00,770 --> 00:35:02,540 line, ending with semicolons. 753 00:35:02,540 --> 00:35:04,430 Let me get rid of the style tag. 754 00:35:04,430 --> 00:35:05,320 >> But I'm not done yet. 755 00:35:05,320 --> 00:35:07,406 I need to do one other thing. 756 00:35:07,406 --> 00:35:10,070 Yeah, id equals quote unquote, "bottom," or whatever id I want to 757 00:35:10,070 --> 00:35:11,740 give that element. 758 00:35:11,740 --> 00:35:13,420 Now, let me go back over here. 759 00:35:13,420 --> 00:35:14,360 And this is atrocious. 760 00:35:14,360 --> 00:35:15,805 I can't deal with 96 point. 761 00:35:15,805 --> 00:35:16,960 Let's do 24 point. 762 00:35:16,960 --> 00:35:18,320 Or you could be more precise. 763 00:35:18,320 --> 00:35:21,800 You can actually use pixels, px, so that you really get finer grain 764 00:35:21,800 --> 00:35:23,220 control over your page. 765 00:35:23,220 --> 00:35:26,860 >> As an aside, that's not necessarily the best thing if users, for 766 00:35:26,860 --> 00:35:29,650 accessibility reasons, want to be able to increase sizes. 767 00:35:29,650 --> 00:35:32,650 So realize that there are ways of doing things that don't necessarily 768 00:35:32,650 --> 00:35:34,230 hard code everything. 769 00:35:34,230 --> 00:35:37,220 >> All right, so it's bigger, 24 point, than whatever the default is. 770 00:35:37,220 --> 00:35:38,630 But now it's a little cleaner. 771 00:35:38,630 --> 00:35:40,230 And let me take this one step further. 772 00:35:40,230 --> 00:35:47,220 Just like the idea of header files, notice we're one step closer to that. 773 00:35:47,220 --> 00:35:52,000 I have factored out, but still left, inside of my page, those CSS rules. 774 00:35:52,000 --> 00:35:56,200 Why might I want to take this one step further, remove this altogether, and 775 00:35:56,200 --> 00:35:59,860 put it in a separate file? 776 00:35:59,860 --> 00:36:01,070 >> So I can reuse it, right? 777 00:36:01,070 --> 00:36:03,155 This is just kind of intuition right now. 778 00:36:03,155 --> 00:36:06,340 Before, I claimed that it was just getting ugly having the style 779 00:36:06,340 --> 00:36:08,480 attributes inside of the divs themselves. 780 00:36:08,480 --> 00:36:09,750 But just kind of think that through. 781 00:36:09,750 --> 00:36:13,560 As your page gets longer and longer, if you're putting here, and here, and 782 00:36:13,560 --> 00:36:18,350 here, and here, all of these different colors, and font sizes, and other such 783 00:36:18,350 --> 00:36:22,550 attributes, your page is very quickly going to become unmanageable for you. 784 00:36:22,550 --> 00:36:24,570 >> If someone comes up to you and says, oh, you know what? 785 00:36:24,570 --> 00:36:28,070 I'd really like to change the font size by two additional points, you 786 00:36:28,070 --> 00:36:31,275 might have to go and find and replace a huge number of lines of code. 787 00:36:31,275 --> 00:36:35,170 It's much more compelling to centralize all such aesthetics here. 788 00:36:35,170 --> 00:36:38,850 But if you'd like to reuse those aesthetics in multiple web pages, all 789 00:36:38,850 --> 00:36:41,100 the more compelling to, for instance, create a file 790 00:36:41,100 --> 00:36:45,290 called with those contents. 791 00:36:45,290 --> 00:36:46,680 >> And let me do this. 792 00:36:46,680 --> 00:36:51,150 793 00:36:51,150 --> 00:36:51,920 Save this file. 794 00:36:51,920 --> 00:36:55,580 I say styles.css, arbitrary, but conventional. 795 00:36:55,580 --> 00:36:58,770 I'll put it in John Harvard's home directory now for simplicity. 796 00:36:58,770 --> 00:37:03,880 And what I can do in my web page is get rid of the style tag altogether, 797 00:37:03,880 --> 00:37:08,270 and somewhat unintuitively, use a link tag, which does not give you a link in 798 00:37:08,270 --> 00:37:13,140 the hyperlink, clickable sense, but where I say link, href equals 799 00:37:13,140 --> 00:37:15,120 styles.css. 800 00:37:15,120 --> 00:37:20,050 And the relationship that this element has with the web page is to serve as 801 00:37:20,050 --> 00:37:21,280 its style sheet. 802 00:37:21,280 --> 00:37:22,670 >> So how did I know this? 803 00:37:22,670 --> 00:37:25,950 One, you just read the manual, or you Google around, and you 804 00:37:25,950 --> 00:37:27,000 look at various resources. 805 00:37:27,000 --> 00:37:30,520 I mean, that truly is how you pick up techniques like this, and, consistent 806 00:37:30,520 --> 00:37:34,720 with this idea of teaching oneself new languages, again, you'll find that 807 00:37:34,720 --> 00:37:38,830 there's only a finite number of things to any language that, once you get 808 00:37:38,830 --> 00:37:41,310 them, you'll find that it gets faster and faster to write. 809 00:37:41,310 --> 00:37:44,180 Indeed, learning a new programming language is so much faster than a new 810 00:37:44,180 --> 00:37:47,380 spoken language because these things are much smaller and much more 811 00:37:47,380 --> 00:37:48,820 precisely defined. 812 00:37:48,820 --> 00:37:51,590 >> But I've highlighted a bit of an anomaly here. 813 00:37:51,590 --> 00:37:57,750 Why have I highlighted this forward slash here? 814 00:37:57,750 --> 00:37:59,420 Because I have to close the tag. 815 00:37:59,420 --> 00:38:00,530 I should close the tag. 816 00:38:00,530 --> 00:38:02,750 And you'll find innumerable resources online that don't 817 00:38:02,750 --> 00:38:04,080 necessarily close tags. 818 00:38:04,080 --> 00:38:08,770 And realistically, it's not strictly necessary for technical and there are 819 00:38:08,770 --> 00:38:11,950 reasons of reality, browsers are just fairly tolerant of mistakes in web 820 00:38:11,950 --> 00:38:14,360 pages, for better or for worse, but mostly worse. 821 00:38:14,360 --> 00:38:18,830 >> So this here is just a cleaner way of saying something stupid like this, 822 00:38:18,830 --> 00:38:22,330 where if you want to open the link tag but close it, there's really no notion 823 00:38:22,330 --> 00:38:23,720 of content for a link tag. 824 00:38:23,720 --> 00:38:26,000 It just means load this file and put it here. 825 00:38:26,000 --> 00:38:30,610 It's like sharp include in C. You can open and close a tag all at once 826 00:38:30,610 --> 00:38:31,660 within the same tag. 827 00:38:31,660 --> 00:38:33,520 And there's other examples of this. 828 00:38:33,520 --> 00:38:37,280 This is not the way to do this, but the br tag, for line breaks, if I 829 00:38:37,280 --> 00:38:41,780 really wanted to achieve what I was trying to before by hitting Enter, if 830 00:38:41,780 --> 00:38:45,380 I explicitly say line break, line break, line break, line break, and 831 00:38:45,380 --> 00:38:49,100 then reload this page, now you'll notice that bottom of the page is, 832 00:38:49,100 --> 00:38:51,940 indeed, much farther down in the bottom of the page. 833 00:38:51,940 --> 00:38:55,840 But even that can be done much more cleanly with CSS, and with margins, 834 00:38:55,840 --> 00:38:58,120 and with other such aesthetic techniques. 835 00:38:58,120 --> 00:38:59,940 >> So for now, the takeaways are this. 836 00:38:59,940 --> 00:39:02,320 In HTML, we have these things called tags. 837 00:39:02,320 --> 00:39:04,830 In CSS, we have these things called properties. 838 00:39:04,830 --> 00:39:08,700 We can comingle these two languages, either by using the style attribute, 839 00:39:08,700 --> 00:39:14,240 or the style tag, or best yet, factoring it out altogether, as we do 840 00:39:14,240 --> 00:39:17,270 in problem set 7. 841 00:39:17,270 --> 00:39:23,820 Questions, then, about the conceptual basics here? 842 00:39:23,820 --> 00:39:24,740 >> AUDIENCE: I have a question. 843 00:39:24,740 --> 00:39:25,630 >> SPEAKER 1: Oh, sorry. 844 00:39:25,630 --> 00:39:28,880 >> AUDIENCE: Why wasn't it colored-- 845 00:39:28,880 --> 00:39:31,410 >> SPEAKER 1: Oh, in the other tab? 846 00:39:31,410 --> 00:39:32,232 This here? 847 00:39:32,232 --> 00:39:33,482 >> AUDIENCE: No, it's like the-- 848 00:39:33,482 --> 00:39:35,330 849 00:39:35,330 --> 00:39:39,480 >> SPEAKER 1: Oh, that's because I was being sloppy. 850 00:39:39,480 --> 00:39:41,350 I put the file in the wrong place. 851 00:39:41,350 --> 00:39:47,840 So if I actually put it here, and I chmod it, all + r for styles.css, and 852 00:39:47,840 --> 00:39:52,050 now reload the page, now we get the stylization back. 853 00:39:52,050 --> 00:39:54,530 And because the font sizes are different, we don't see quite as much 854 00:39:54,530 --> 00:39:55,010 white space. 855 00:39:55,010 --> 00:39:58,240 We instead see what's the default is instead. 856 00:39:58,240 --> 00:40:00,050 Good question. 857 00:40:00,050 --> 00:40:00,846 Yes? 858 00:40:00,846 --> 00:40:02,630 >> AUDIENCE: Why is the link tag inside the header? 859 00:40:02,630 --> 00:40:06,270 >> SPEAKER 1: Why is the links tag inside of the header-- 860 00:40:06,270 --> 00:40:07,650 short answer, just because. 861 00:40:07,650 --> 00:40:08,930 That is what was decided. 862 00:40:08,930 --> 00:40:10,720 That's where the link tags go when you have what's called an 863 00:40:10,720 --> 00:40:13,650 external style sheet. 864 00:40:13,650 --> 00:40:16,430 Other questions? 865 00:40:16,430 --> 00:40:17,770 >> All right, well let's do this. 866 00:40:17,770 --> 00:40:20,500 We have so much fun ahead of us today. 867 00:40:20,500 --> 00:40:22,480 That's just scratching the surface of CSS. 868 00:40:22,480 --> 00:40:23,010 Let's do this. 869 00:40:23,010 --> 00:40:25,980 Let's take a five minute break here because, per my email, let's hang in 870 00:40:25,980 --> 00:40:27,200 there till 2:30-ish today. 871 00:40:27,200 --> 00:40:28,540 But if you do have to leave, that's fine. 872 00:40:28,540 --> 00:40:30,380 But we'll forge ahead after a five minute break. 873 00:40:30,380 --> 00:40:35,930 And we'll learn a little something about PHP, MySQL, and more. 874 00:40:35,930 --> 00:40:44,520 >> All right, so let's try, now, to tie a few of these ideas together and make, 875 00:40:44,520 --> 00:40:46,180 say, our own search engine. 876 00:40:46,180 --> 00:40:48,570 I noticed, rather curiously, the following. 877 00:40:48,570 --> 00:40:52,610 When you are at Google.com, you're typically at a URL like this one here 878 00:40:52,610 --> 00:40:54,870 with nothing after the dot com. 879 00:40:54,870 --> 00:40:59,760 But if I search something stupid like cats, and hit Enter, we'll get-- not 880 00:40:59,760 --> 00:41:01,300 stupid, but you know. 881 00:41:01,300 --> 00:41:05,410 >> OK, so notice, at the top of the page, now, the URL has, of course, changed. 882 00:41:05,410 --> 00:41:07,190 And this is not anything new to any of us. 883 00:41:07,190 --> 00:41:09,290 You click links and stuff happens on the web. 884 00:41:09,290 --> 00:41:11,420 But what's interesting here is the following. 885 00:41:11,420 --> 00:41:14,500 There's a whole lot of clutter, but let me throw away stuff that I don't 886 00:41:14,500 --> 00:41:16,600 quite understand or doesn't really look relevant. 887 00:41:16,600 --> 00:41:18,490 >> Let me get rid of this. 888 00:41:18,490 --> 00:41:20,030 Let me get rid of this. 889 00:41:20,030 --> 00:41:22,630 And let me just get rid of all of this. 890 00:41:22,630 --> 00:41:28,840 And now notice that cats is in the URL, followed with a q, then an equal 891 00:41:28,840 --> 00:41:29,710 sign in front of it. 892 00:41:29,710 --> 00:41:32,110 So it turns out this is how the way it works when it comes 893 00:41:32,110 --> 00:41:33,360 to input and output. 894 00:41:33,360 --> 00:41:37,510 >> We've long talked about black boxes, right? 895 00:41:37,510 --> 00:41:41,650 So if this is a function implemented here as a black box, it takes input 896 00:41:41,650 --> 00:41:45,290 and produces output, well, the means by which you provide input to a 897 00:41:45,290 --> 00:41:49,270 website is by way, often, of its URLs. 898 00:41:49,270 --> 00:41:52,850 You simply put a question mark and then a key equals value. 899 00:41:52,850 --> 00:41:56,740 And then maybe an ampersand, and then another key equals value, then maybe 900 00:41:56,740 --> 00:41:58,810 another ampersand, key equals value. 901 00:41:58,810 --> 00:42:03,030 That's how you pass in keys and values, pairs of inputs. 902 00:42:03,030 --> 00:42:07,050 >> So if I hit Enter now, what's interesting about Google is that all 903 00:42:07,050 --> 00:42:10,420 that clutter I deleted doesn't appear to be strictly necessary. 904 00:42:10,420 --> 00:42:15,120 All I need to send to Google is question mark q equals cats to get 905 00:42:15,120 --> 00:42:16,160 back some cats. 906 00:42:16,160 --> 00:42:20,160 Well, the implication of that, then, is if I pull up gedit, I've started 907 00:42:20,160 --> 00:42:24,360 making my own search engine here in a file called seach0.html. 908 00:42:24,360 --> 00:42:26,750 >> And let me go ahead and delete one more line that you 909 00:42:26,750 --> 00:42:27,910 weren't supposed to see. 910 00:42:27,910 --> 00:42:31,070 And now, let me go into my own browser, so not to Google, and go to 911 00:42:31,070 --> 00:42:34,900 http://localhost. 912 00:42:34,900 --> 00:42:36,220 And that's going to get in the way. 913 00:42:36,220 --> 00:42:43,240 So we're going to have to say goodbye to that for now, move this over here, 914 00:42:43,240 --> 00:42:46,270 oh, now we're going to have to say goodbye to that file. 915 00:42:46,270 --> 00:42:51,700 >> Whenever you have a file called index.html or index.php in a 916 00:42:51,700 --> 00:42:54,980 directory, if the web server is configured in this way, what you'll 917 00:42:54,980 --> 00:42:59,600 see, by default, is the contents of that file rather than a listing of the 918 00:42:59,600 --> 00:43:02,330 directory, as I wanted here. 919 00:43:02,330 --> 00:43:03,750 More on this in the spec. 920 00:43:03,750 --> 00:43:04,610 You didn't see that. 921 00:43:04,610 --> 00:43:06,360 >> So this is what I actually wanted. 922 00:43:06,360 --> 00:43:08,810 But a moment ago, there was a file in this folder called 923 00:43:08,810 --> 00:43:11,290 index.html and index.php. 924 00:43:11,290 --> 00:43:13,380 And so the web server was showing me those files. 925 00:43:13,380 --> 00:43:15,900 Instead, I want this directory listing here. 926 00:43:15,900 --> 00:43:18,340 >> So I'm going to go into CSS and go to search0. 927 00:43:18,340 --> 00:43:21,770 And I claim that this is it going to be the beginning of my own competitive 928 00:43:21,770 --> 00:43:22,490 search engine. 929 00:43:22,490 --> 00:43:27,630 And to do this, I'm going to go in here, into CSS, and open up with 930 00:43:27,630 --> 00:43:30,190 gedit, search 0. 931 00:43:30,190 --> 00:43:32,280 But unfortunately, there's not much going on here. 932 00:43:32,280 --> 00:43:35,690 All I did was use a heading tag, which happens to be called h1, which 933 00:43:35,690 --> 00:43:38,180 essentially means big and bold, and that's it. 934 00:43:38,180 --> 00:43:40,810 But the means by which we can provide inputs are via these 935 00:43:40,810 --> 00:43:42,180 things called forms. 936 00:43:42,180 --> 00:43:46,040 >> So let me go ahead and open and close, preemptively, a form tag there. 937 00:43:46,040 --> 00:43:48,060 And let me go ahead and do something like this. 938 00:43:48,060 --> 00:43:51,430 Input, type equals text. 939 00:43:51,430 --> 00:43:56,320 And then let's close the tag within the brackets themselves. 940 00:43:56,320 --> 00:43:58,800 I don't need to start a text field and stop a text field. 941 00:43:58,800 --> 00:44:01,080 It's just going to be there or not. 942 00:44:01,080 --> 00:44:06,210 >> And then below that, let's do input type equals submit. 943 00:44:06,210 --> 00:44:06,870 Save this. 944 00:44:06,870 --> 00:44:08,630 And now let's just do a quick sanity check. 945 00:44:08,630 --> 00:44:09,820 Let's reload. 946 00:44:09,820 --> 00:44:10,890 >> OK, so it's not bad. 947 00:44:10,890 --> 00:44:13,260 It's not Google's style, but it's pretty close. 948 00:44:13,260 --> 00:44:13,920 There's a text field. 949 00:44:13,920 --> 00:44:17,190 I can type some stuff in, hit Enter, but nothing happens yet. 950 00:44:17,190 --> 00:44:21,090 And that's because I haven't specified an action for this form, so to speak. 951 00:44:21,090 --> 00:44:23,860 So if I go back to the form element, it turns out, and I know this only 952 00:44:23,860 --> 00:44:27,460 from having read the documentation, that the form tag takes an attribute 953 00:44:27,460 --> 00:44:31,880 called action that is the URL of the website to which you 954 00:44:31,880 --> 00:44:34,790 want to send the form. 955 00:44:34,790 --> 00:44:37,610 >> I don't really think we have time to implement the whole back end for a 956 00:44:37,610 --> 00:44:38,570 search engine today. 957 00:44:38,570 --> 00:44:41,900 So we're just going to say, eh, go to google.com/search. 958 00:44:41,900 --> 00:44:43,450 And now let me close my quotes. 959 00:44:43,450 --> 00:44:46,070 And let me further specify that the method to use is going 960 00:44:46,070 --> 00:44:47,120 to be called get. 961 00:44:47,120 --> 00:44:50,650 >> Long story short, there's two ways, at least, that you can submit information 962 00:44:50,650 --> 00:44:51,880 from browser to server. 963 00:44:51,880 --> 00:44:55,340 One is get, and, for today's purposes, that just means in the URL. 964 00:44:55,340 --> 00:44:58,730 You see exactly the question marks, the equals signs, and ampersands that 965 00:44:58,730 --> 00:44:59,780 we saw earlier. 966 00:44:59,780 --> 00:45:02,890 Or there's an alternative called post. 967 00:45:02,890 --> 00:45:06,490 For now, know that post is often used when you want to upload files, like 968 00:45:06,490 --> 00:45:09,820 images and so forth, or when you want to submit credit card information, or 969 00:45:09,820 --> 00:45:13,810 passwords, anything that it doesn't really make sense, conceptually, or 970 00:45:13,810 --> 00:45:18,020 security wise, to end up in the URL of your browser, where snooping parents, 971 00:45:18,020 --> 00:45:21,520 or roommates, or anyone with access to your computer might see. 972 00:45:21,520 --> 00:45:23,110 >> So let's save that here. 973 00:45:23,110 --> 00:45:24,480 And I need to do one other thing. 974 00:45:24,480 --> 00:45:27,250 It doesn't suffice just to say give me a text field. 975 00:45:27,250 --> 00:45:29,850 I have to give that field's value a name. 976 00:45:29,850 --> 00:45:34,500 So let me borrow Google's choice of names, q, and specify that second 977 00:45:34,500 --> 00:45:38,150 attribute I don't really care about the name of the Submit button. 978 00:45:38,150 --> 00:45:40,890 All I care about is submitting what the user types in. 979 00:45:40,890 --> 00:45:41,940 >> And now this is kind of ugly. 980 00:45:41,940 --> 00:45:42,820 It just says submit. 981 00:45:42,820 --> 00:45:46,350 It turns out, and I know this from the documentation, I can actually say 982 00:45:46,350 --> 00:45:51,710 value equals quote unquote "cs50 seach," close quote. 983 00:45:51,710 --> 00:45:53,030 Then let's reload again. 984 00:45:53,030 --> 00:45:57,020 So I keep hitting Command-R, or Control-R on my keyboard to reload. 985 00:45:57,020 --> 00:45:58,605 >> Now we have a more interesting search engine. 986 00:45:58,605 --> 00:46:00,340 It doesn't quite look like Google yet, though. 987 00:46:00,340 --> 00:46:04,100 So let's go ahead in here and do a little line break. 988 00:46:04,100 --> 00:46:06,066 >> OK, so now we have Google. 989 00:46:06,066 --> 00:46:08,260 We actually almost do have Google. 990 00:46:08,260 --> 00:46:10,460 So now what's going to happen? 991 00:46:10,460 --> 00:46:12,220 I'm going to type in something like Cats. 992 00:46:12,220 --> 00:46:16,570 And the browser is going to parse that form that I defined. 993 00:46:16,570 --> 00:46:19,470 And it's going to send the user to that URL. 994 00:46:19,470 --> 00:46:23,420 So this time, for some curious reason, I got more information about stocks 995 00:46:23,420 --> 00:46:24,410 than about actual cats. 996 00:46:24,410 --> 00:46:30,580 But that's fine because notice we still ended up here, q equals cats. 997 00:46:30,580 --> 00:46:35,200 >> So long story short, it seems fairly trivial to get input from the user. 998 00:46:35,200 --> 00:46:38,190 And to be fair, there's bunches of other types of form fields. 999 00:46:38,190 --> 00:46:41,510 There's check boxes, and little mutually exclusive radio buttons, and 1000 00:46:41,510 --> 00:46:42,960 drop down menus, and more. 1001 00:46:42,960 --> 00:46:46,160 But all of those are as relatively easily implemented as 1002 00:46:46,160 --> 00:46:48,040 this text field was. 1003 00:46:48,040 --> 00:46:52,050 And ultimately, we just have to make sure someone is listening on the other 1004 00:46:52,050 --> 00:46:56,490 end of the line in order to get that information processed, somehow, and 1005 00:46:56,490 --> 00:46:58,440 give us back our cats. 1006 00:46:58,440 --> 00:47:00,840 >> Let's look at a slightly more involved example. 1007 00:47:00,840 --> 00:47:06,020 Let me go into my Vhost's directory, into local host, public, and where I 1008 00:47:06,020 --> 00:47:06,980 put today's source code. 1009 00:47:06,980 --> 00:47:09,800 All of this will be on the course's website for you to tinker with. 1010 00:47:09,800 --> 00:47:15,420 And if I go into froshims, let me open up this file now, froshim0.php. 1011 00:47:15,420 --> 00:47:18,460 This one's a little more verbose, so we won't write this from scratch. 1012 00:47:18,460 --> 00:47:21,970 But just notice now a few somewhat familiar characteristics. 1013 00:47:21,970 --> 00:47:24,550 >> One, form tag, different action. 1014 00:47:24,550 --> 00:47:25,670 It's not a full URL. 1015 00:47:25,670 --> 00:47:29,930 Now, it's apparently to file called register0.php because, in a moment, 1016 00:47:29,930 --> 00:47:32,660 I'm going to teach myself a little something about PHP, a programming 1017 00:47:32,660 --> 00:47:37,360 language, because PHP can be used to implement what Google implemented as 1018 00:47:37,360 --> 00:47:39,650 the back end of their search engines. 1019 00:47:39,650 --> 00:47:42,890 >> Google, in reality, probably uses some Python, some C++, and 1020 00:47:42,890 --> 00:47:44,230 bunches of other languages. 1021 00:47:44,230 --> 00:47:48,230 But we could certainly implement search results using PHP if we wanted. 1022 00:47:48,230 --> 00:47:49,610 But for now, we'll keep it simple. 1023 00:47:49,610 --> 00:47:53,320 And this is actually reminiscent of one of the other very first websites I 1024 00:47:53,320 --> 00:47:54,490 made years ago. 1025 00:47:54,490 --> 00:47:58,160 >> Back in my day, you registered for intramural sports as a freshman by 1026 00:47:58,160 --> 00:48:00,880 filling out a piece of paper, walking across the yard, and dropping it in 1027 00:48:00,880 --> 00:48:04,890 the mailbox of a Proctor in Wigglesworth, and that was how you 1028 00:48:04,890 --> 00:48:05,460 registered. 1029 00:48:05,460 --> 00:48:09,650 And so my project shortly after CS50, was to put that, which makes perfect 1030 00:48:09,650 --> 00:48:13,460 sense, onto the web, which wasn't as in vogue then as it is now. 1031 00:48:13,460 --> 00:48:17,510 But all we had to do was create, essentially, an HTML form. 1032 00:48:17,510 --> 00:48:19,640 >> And that form looked roughly like this. 1033 00:48:19,640 --> 00:48:22,480 I had an input for the freshman's name. 1034 00:48:22,480 --> 00:48:27,780 I had another check box for whether or or not they wanted to be captain, what 1035 00:48:27,780 --> 00:48:30,400 their gender was, and what their dorm was. 1036 00:48:30,400 --> 00:48:33,370 And then I hard coded in things like Apley Court, and Canaday, 1037 00:48:33,370 --> 00:48:34,880 Grays, and so forth. 1038 00:48:34,880 --> 00:48:36,300 >> So again, new tags. 1039 00:48:36,300 --> 00:48:39,820 Haven't seen these before, new attributes, but fairly accessible. 1040 00:48:39,820 --> 00:48:42,360 Once you see an example, you can kind of borrow that idea and make a drop 1041 00:48:42,360 --> 00:48:43,820 down menu for most anything. 1042 00:48:43,820 --> 00:48:46,350 But what's key is that each of these things have names. 1043 00:48:46,350 --> 00:48:49,720 And at the bottom of this form, there's a submit button whose label, 1044 00:48:49,720 --> 00:48:51,510 or value, is register. 1045 00:48:51,510 --> 00:48:52,670 >> So let's go to this page. 1046 00:48:52,670 --> 00:48:55,050 Let me go back into the directory listing. 1047 00:48:55,050 --> 00:48:59,410 Let me go into froshims, and go to froshim0.php. 1048 00:48:59,410 --> 00:49:01,150 So it's hideous, to be fair. 1049 00:49:01,150 --> 00:49:03,950 So I could definitely stylize this with some CSS, I could make some 1050 00:49:03,950 --> 00:49:06,890 graphics, maybe add some colors, and make this prettier. 1051 00:49:06,890 --> 00:49:10,530 But functionally, I'd argue that this is actually pretty complete. 1052 00:49:10,530 --> 00:49:15,190 >> Unfortunately, when I fill this out, David, Captain, Male, we'll choose, 1053 00:49:15,190 --> 00:49:20,510 let's say Matthews, Register, all that happens is this. 1054 00:49:20,510 --> 00:49:21,910 But notice a couple of takeaways. 1055 00:49:21,910 --> 00:49:27,130 One, what file returned those results, apparently? 1056 00:49:27,130 --> 00:49:29,470 So it is, indeed, register0.php. 1057 00:49:29,470 --> 00:49:34,570 So the fact that we saw that action value a moment ago for register0, this 1058 00:49:34,570 --> 00:49:37,500 corroborates that we indeed ended up at that particular file. 1059 00:49:37,500 --> 00:49:39,040 >> Now this is just ugly text. 1060 00:49:39,040 --> 00:49:42,810 But notice that this text is coming from local host, 1061 00:49:42,810 --> 00:49:44,170 which is from the appliance. 1062 00:49:44,170 --> 00:49:46,350 Think of the appliance now as just a web server that could be in the 1063 00:49:46,350 --> 00:49:46,910 Science Center. 1064 00:49:46,910 --> 00:49:48,060 It could be on the actual web. 1065 00:49:48,060 --> 00:49:49,850 So it's publicly accessible. 1066 00:49:49,850 --> 00:49:55,480 >> So clearly, there's some way of passing form field inputs to a server 1067 00:49:55,480 --> 00:49:56,840 so that it can do something with them. 1068 00:49:56,840 --> 00:49:59,020 Unfortunately, register0 is pretty stupid. 1069 00:49:59,020 --> 00:50:01,870 All it does is print out an array that looks like this. 1070 00:50:01,870 --> 00:50:04,790 And it's not an array in the sense that we know it. 1071 00:50:04,790 --> 00:50:08,760 Turns out that PHP, and a lot of languages, have not only numerically 1072 00:50:08,760 --> 00:50:12,350 indexed arrays whose first index is zero, then one, then two, then dot, 1073 00:50:12,350 --> 00:50:13,780 dot, dot, n minus 1. 1074 00:50:13,780 --> 00:50:16,400 >> This is what's called an associative array. 1075 00:50:16,400 --> 00:50:21,150 An associative array is one in which you can store key value pairs where 1076 00:50:21,150 --> 00:50:23,160 the key is not necessarily a number. 1077 00:50:23,160 --> 00:50:25,580 It could in fact be a string, a word. 1078 00:50:25,580 --> 00:50:28,230 And so this can be implemented, underneath the hood, it turns out, 1079 00:50:28,230 --> 00:50:31,896 using a data structure known as a? 1080 00:50:31,896 --> 00:50:33,600 Thought something dramatic was about to happen-- 1081 00:50:33,600 --> 00:50:34,840 hash table. 1082 00:50:34,840 --> 00:50:38,955 >> So a hash table, recall, those of you who did it for P set 6, or even recall 1083 00:50:38,955 --> 00:50:44,110 it, at least even if you did a try, a hash table, in our usage, was used to 1084 00:50:44,110 --> 00:50:45,090 just store words. 1085 00:50:45,090 --> 00:50:47,980 But really, you were storing keys and values. 1086 00:50:47,980 --> 00:50:51,940 If you implemented a hash table for P set 6 dictionary, the keys were the 1087 00:50:51,940 --> 00:50:56,890 words themselves, and the values were effectively true or false. 1088 00:50:56,890 --> 00:51:00,190 Yes, here, or implicitly, no, not here. 1089 00:51:00,190 --> 00:51:02,140 >> Well, we can generalize that idea. 1090 00:51:02,140 --> 00:51:06,230 And we could use a very similar data structure to store not the string 1091 00:51:06,230 --> 00:51:10,180 itself alone in your hash table, but suppose that in every one of your hash 1092 00:51:10,180 --> 00:51:11,130 table's nodes. 1093 00:51:11,130 --> 00:51:14,210 And you could even do this in a try rather than just have a bool. 1094 00:51:14,210 --> 00:51:15,350 You could have something else. 1095 00:51:15,350 --> 00:51:19,590 What if the key was not maxwell, for instance, but quote unquote "name," or 1096 00:51:19,590 --> 00:51:22,900 quote unquote "captain." And inside of your C data structure, you put a 1097 00:51:22,900 --> 00:51:26,170 value, not just a Boolean, but of value like quote unquote "David," or 1098 00:51:26,170 --> 00:51:28,690 "M," or "Matthews," and so forth. 1099 00:51:28,690 --> 00:51:33,170 >> So those same data structures we used apparently exist in other languages. 1100 00:51:33,170 --> 00:51:37,650 And I'd argue they're actually much, much simpler to access here. 1101 00:51:37,650 --> 00:51:40,300 Let's in fact take a look now at some such syntax. 1102 00:51:40,300 --> 00:51:43,120 >> I'm going to go into a PHP directory. 1103 00:51:43,120 --> 00:51:48,390 And I'm going to open up a better version of hello-0 from before. 1104 00:51:48,390 --> 00:51:50,270 Notice that all I did was add some comments. 1105 00:51:50,270 --> 00:51:52,530 So we can get rid of that distraction. 1106 00:51:52,530 --> 00:51:57,610 >> And this program does indeed prints hello because I've specified between 1107 00:51:57,610 --> 00:52:01,420 tags that I want to execute that code. 1108 00:52:01,420 --> 00:52:03,380 Now, we'll see in a moment why this is useful. 1109 00:52:03,380 --> 00:52:05,630 But let's open one other example here. 1110 00:52:05,630 --> 00:52:10,430 Let me go ahead and open up say, gedit of conditions one. 1111 00:52:10,430 --> 00:52:12,970 >> This is way back in time now. 1112 00:52:12,970 --> 00:52:16,320 But weeks ago, I think, in week one or week two, we had an example called 1113 00:52:16,320 --> 00:52:18,470 conditions1.c. 1114 00:52:18,470 --> 00:52:22,050 And I decided to reimplement it in PHP, just to kind of emphasize that 1115 00:52:22,050 --> 00:52:26,500 PHP, syntactically, is almost identical to C. This isn't a huge leap 1116 00:52:26,500 --> 00:52:27,840 from last week to this. 1117 00:52:27,840 --> 00:52:31,230 >> Notice at the top of this program, which begins, as before, with some 1118 00:52:31,230 --> 00:52:34,260 comments, which I'll get rid of as a distraction. 1119 00:52:34,260 --> 00:52:37,410 Notice that I'm in PHP mode in this file. 1120 00:52:37,410 --> 00:52:40,160 So this code, we'll see, will get executed. 1121 00:52:40,160 --> 00:52:42,670 Notice that there's readline, which is probably the 1122 00:52:42,670 --> 00:52:46,230 analog in PHP of getstring. 1123 00:52:46,230 --> 00:52:47,390 Notice it's a little different. 1124 00:52:47,390 --> 00:52:51,410 You actually specify a prompt to the function called read line, and that's 1125 00:52:51,410 --> 00:52:52,180 what the user sees. 1126 00:52:52,180 --> 00:52:53,520 So you don't have to printf manually. 1127 00:52:53,520 --> 00:52:54,860 But that's not a big deal. 1128 00:52:54,860 --> 00:52:59,150 I'm going to store, inside of $n, the return value of this, so whatever the 1129 00:52:59,150 --> 00:53:00,490 user types in is their int. 1130 00:53:00,490 --> 00:53:01,660 And here's another curiosity. 1131 00:53:01,660 --> 00:53:05,810 It turns out, in PHP, any variable just has to be prefixed 1132 00:53:05,810 --> 00:53:06,970 with a dollar sign. 1133 00:53:06,970 --> 00:53:08,110 It's a little annoying. 1134 00:53:08,110 --> 00:53:10,870 But notice what I haven't done in PHP. 1135 00:53:10,870 --> 00:53:13,980 What's missing from the left hand side of the equals sign? 1136 00:53:13,980 --> 00:53:15,430 >> No mention of type. 1137 00:53:15,430 --> 00:53:19,400 So this is different from C. For better or for worse, PHP is a loosely 1138 00:53:19,400 --> 00:53:20,550 typed language. 1139 00:53:20,550 --> 00:53:22,010 It does have numbers. 1140 00:53:22,010 --> 00:53:23,240 It does have strings. 1141 00:53:23,240 --> 00:53:24,015 It does have Booleans. 1142 00:53:24,015 --> 00:53:26,220 And it does have a few other data types. 1143 00:53:26,220 --> 00:53:30,570 But you, the programmer, usually don't have to care about them. 1144 00:53:30,570 --> 00:53:34,010 The upside of this is that it makes it a little easier to program. 1145 00:53:34,010 --> 00:53:35,380 You can think a little less. 1146 00:53:35,380 --> 00:53:39,840 The downside is it also opens you up to potential bugs if you accidentally 1147 00:53:39,840 --> 00:53:43,080 treat a number as a string, a string as a number, potentially, but even 1148 00:53:43,080 --> 00:53:46,150 then, PHP, and a lot of languages, are pretty tolerant. 1149 00:53:46,150 --> 00:53:49,050 They will use what's called implicit casting. 1150 00:53:49,050 --> 00:53:55,220 And if you try to use n in the context of a numeric situation, it will 1151 00:53:55,220 --> 00:53:58,040 convert what here is going to be a string, because if the user types 1152 00:53:58,040 --> 00:54:01,570 something in, and you get the result, as with readline, or get string, 1153 00:54:01,570 --> 00:54:02,910 that's going to return a string. 1154 00:54:02,910 --> 00:54:07,360 >> But notice, a couple lines later, I check if n is greater than zero. 1155 00:54:07,360 --> 00:54:13,370 So PHP is going to implicitly cast my "string" 123, or whatever the user 1156 00:54:13,370 --> 00:54:14,860 types in, into an int. 1157 00:54:14,860 --> 00:54:18,730 So in short, stuff just works a lot more intuitively. 1158 00:54:18,730 --> 00:54:23,410 So we now begin to relax a few of the things that we've done in the past. 1159 00:54:23,410 --> 00:54:24,780 >> A lot of this stuff is the same, though. 1160 00:54:24,780 --> 00:54:26,340 Still have equals equals. 1161 00:54:26,340 --> 00:54:30,350 As an aside PHP also has equals equals equals, but more on that, perhaps, in 1162 00:54:30,350 --> 00:54:30,850 the future. 1163 00:54:30,850 --> 00:54:31,150 That was a. 1164 00:54:31,150 --> 00:54:35,660 Typo but two equals signs means the same thing as before, for comparison. 1165 00:54:35,660 --> 00:54:37,060 printf means the same thing as before. 1166 00:54:37,060 --> 00:54:39,160 Backslash n means the same thing as before. 1167 00:54:39,160 --> 00:54:40,390 >> So how do I run this program? 1168 00:54:40,390 --> 00:54:44,400 Well, as before, if I do PHP, conditions1.php, and type in 1169 00:54:44,400 --> 00:54:46,560 a number like 123. 1170 00:54:46,560 --> 00:54:47,720 That's a positive number. 1171 00:54:47,720 --> 00:54:49,510 If I type in 0, I pick 0. 1172 00:54:49,510 --> 00:54:53,700 And if I type in negative 123, I get back a negative number, which is only 1173 00:54:53,700 --> 00:54:59,050 to say, syntactically, PHP is super, super similar. 1174 00:54:59,050 --> 00:55:03,250 >> So why is this now useful in a web context? 1175 00:55:03,250 --> 00:55:06,710 Well, let's go back to this froshims example, which looked, 1176 00:55:06,710 --> 00:55:08,600 again, like this here. 1177 00:55:08,600 --> 00:55:11,580 And let's actually pull up the web page again, which looked like this. 1178 00:55:11,580 --> 00:55:14,930 What can we do with the data that's submitted? 1179 00:55:14,930 --> 00:55:18,770 >> Well, let me open up a newer version of this. 1180 00:55:18,770 --> 00:55:20,920 And you'll see that the problem sets specification walks you 1181 00:55:20,920 --> 00:55:22,850 through a few of these. 1182 00:55:22,850 --> 00:55:29,610 Rather than start with zero, let's look at froshims3, 1183 00:55:29,610 --> 00:55:31,410 which does a bit more. 1184 00:55:31,410 --> 00:55:34,780 >> Notice first, actually, let's open up what 0 was, so you see 1185 00:55:34,780 --> 00:55:37,170 what register 0 was. 1186 00:55:37,170 --> 00:55:40,040 Notice what register 0 did. 1187 00:55:40,040 --> 00:55:41,730 One, I have comments at the top. 1188 00:55:41,730 --> 00:55:43,900 Delete those and focus only on this. 1189 00:55:43,900 --> 00:55:48,730 Most of the contents of register0.php are, obviously, what language? 1190 00:55:48,730 --> 00:55:49,980 Just raw PHP. 1191 00:55:49,980 --> 00:55:53,430 >> So notice, this file does not start with, at the moment, open bracket, 1192 00:55:53,430 --> 00:55:54,970 question mark, PHP. 1193 00:55:54,970 --> 00:55:59,800 PHP does allow you to intermingle PHP code with HTML tags. 1194 00:55:59,800 --> 00:56:04,130 But I've done that here inside of the page over here. 1195 00:56:04,130 --> 00:56:08,180 >> Now, again, you'd only know this from having looked at the manual. print_r, 1196 00:56:08,180 --> 00:56:13,410 it turns out, is print_recursive. _recursive And this is just a handy 1197 00:56:13,410 --> 00:56:16,780 utility function that just prints out, recursively, whatever you hand it. 1198 00:56:16,780 --> 00:56:18,760 If you hand it an array, it'll print an array. 1199 00:56:18,760 --> 00:56:20,180 If you hand it a number, it'll print a number. 1200 00:56:20,180 --> 00:56:21,570 Hand it a string, it'll print a string. 1201 00:56:21,570 --> 00:56:24,500 If you hand it a hash table, it will print out a hash table. 1202 00:56:24,500 --> 00:56:26,730 You don't have to write all of that code yourself. 1203 00:56:26,730 --> 00:56:29,490 >> Now notice that I'm entering PHP mode over here. 1204 00:56:29,490 --> 00:56:32,070 I'm exiting PHP mode over here. 1205 00:56:32,070 --> 00:56:35,950 So when the web server reads this file top to bottom, left to right, because 1206 00:56:35,950 --> 00:56:40,750 it ends in a filename called .php, whatever's not inside of PHP tags is 1207 00:56:40,750 --> 00:56:42,820 just going to be spit out, like raw HTML. 1208 00:56:42,820 --> 00:56:43,630 No big deal. 1209 00:56:43,630 --> 00:56:49,280 But as soon as the web server notices this, it's going to say, I should not 1210 00:56:49,280 --> 00:56:51,850 spit out, literally, print_r of post. 1211 00:56:51,850 --> 00:56:54,910 I should execute the following line of code. 1212 00:56:54,910 --> 00:56:59,850 >> So the last question, then, of this file is, well, what the heck is this? 1213 00:56:59,850 --> 00:57:00,530 Take a guess. 1214 00:57:00,530 --> 00:57:04,230 What is $_POST, probably? 1215 00:57:04,230 --> 00:57:07,070 >> AUDIENCE: [INAUDIBLE] 1216 00:57:07,070 --> 00:57:08,830 >> SPEAKER 1: Yeah, the posted data. 1217 00:57:08,830 --> 00:57:11,350 Recall, let's scroll back in time for just a moment. 1218 00:57:11,350 --> 00:57:13,165 froshim0, again, looked like this. 1219 00:57:13,165 --> 00:57:15,640 A super majority of this is just HTML. 1220 00:57:15,640 --> 00:57:18,410 Again, some tags you haven't seen yet, or with which 1221 00:57:18,410 --> 00:57:19,360 you are already familiar. 1222 00:57:19,360 --> 00:57:21,990 But the interesting thing was this. 1223 00:57:21,990 --> 00:57:27,270 This one line is what really links it to our register0.php file. 1224 00:57:27,270 --> 00:57:29,200 I'm submitting via method post. 1225 00:57:29,200 --> 00:57:33,130 And that means that the parameters the user types in are not 1226 00:57:33,130 --> 00:57:35,150 going to end up where. 1227 00:57:35,150 --> 00:57:36,175 >> They're not going to show up in the URL. 1228 00:57:36,175 --> 00:57:39,020 They are still going to be sent from the client, from the browser, to the 1229 00:57:39,020 --> 00:57:42,080 server, but just via some other mechanism that we'll waive our hands 1230 00:57:42,080 --> 00:57:44,330 at for today, but it's not in the URL. 1231 00:57:44,330 --> 00:57:47,630 But notice the relationship now with post, which, by convention, is 1232 00:57:47,630 --> 00:57:49,160 lowercase here. 1233 00:57:49,160 --> 00:57:54,090 >> But if I open up register0.php, I'm apparently printing this. 1234 00:57:54,090 --> 00:57:56,450 So this is kind of a weird naming convention. 1235 00:57:56,450 --> 00:58:01,430 But what's nice in PHP is that when using PHP in a web context, not at a 1236 00:58:01,430 --> 00:58:04,480 command line like I did a moment ago, when you're actually using it in a web 1237 00:58:04,480 --> 00:58:10,580 page, in a Vhost directory as we are, automatically will PHP fill this 1238 00:58:10,580 --> 00:58:15,560 thing, which is an associative array, so to speak, a hash table, with 1239 00:58:15,560 --> 00:58:17,290 everything the user typed in. 1240 00:58:17,290 --> 00:58:22,000 >> In short, $_POST in all caps is a global variable that PHP just 1241 00:58:22,000 --> 00:58:25,050 magically creates for you when using PHP in a web context. 1242 00:58:25,050 --> 00:58:29,160 And it puts inside of it all of the names of parameters in the form that 1243 00:58:29,160 --> 00:58:33,200 was submitted to this file and all of the values that the user typed in. 1244 00:58:33,200 --> 00:58:37,790 So it hands to you what the user typed in to that form. 1245 00:58:37,790 --> 00:58:42,210 >> So before, we got really stupid output of just seeing this because all I did 1246 00:58:42,210 --> 00:58:44,400 was recursively print this array. 1247 00:58:44,400 --> 00:58:46,060 The key is name, the value is David. 1248 00:58:46,060 --> 00:58:46,980 The key is Captain. 1249 00:58:46,980 --> 00:58:47,970 The value is on. 1250 00:58:47,970 --> 00:58:52,300 And the double arrow and the angle bracket there, this is just arbitrary. 1251 00:58:52,300 --> 00:58:53,270 This is not code. 1252 00:58:53,270 --> 00:58:57,690 This is just PHP's way of showing you what the value of some key is. 1253 00:58:57,690 --> 00:59:03,000 >> But now let me propose that in froshIMs3, it's almost identical 1254 00:59:03,000 --> 00:59:04,950 except it submits to this file. 1255 00:59:04,950 --> 00:59:08,570 And again, we're going to kind of just glance at this, just to see some 1256 00:59:08,570 --> 00:59:12,040 syntax, but notice what this file does. 1257 00:59:12,040 --> 00:59:14,930 Take a guess just based on the lines of code, which probably do look like 1258 00:59:14,930 --> 00:59:17,410 Greek, to some extent, is apparently doing. 1259 00:59:17,410 --> 00:59:20,580 1260 00:59:20,580 --> 00:59:23,110 >> This file is somehow related to mail, email. 1261 00:59:23,110 --> 00:59:24,770 So what is this program doing? 1262 00:59:24,770 --> 00:59:28,740 In this version, if I were to actually fill out this form-- and let me go to 1263 00:59:28,740 --> 00:59:30,760 froshIMs3, not froshIMs0-- 1264 00:59:30,760 --> 00:59:33,280 1265 00:59:33,280 --> 00:59:34,540 the form looks the same. 1266 00:59:34,540 --> 00:59:37,980 David, captain, male, dorm, Matthews. 1267 00:59:37,980 --> 00:59:42,980 But if I submit this, this file is going to go to register3.php. 1268 00:59:42,980 --> 00:59:46,330 >> And I claim, by looking at it's source code, it's going to 1269 00:59:46,330 --> 00:59:47,650 somehow involve email. 1270 00:59:47,650 --> 00:59:49,620 Let me go ahead and open this up in a bigger window, so we 1271 00:59:49,620 --> 00:59:51,030 can see it more cleanly. 1272 00:59:51,030 --> 00:59:57,220 We're in Vhosts, local host, public, froshims. 1273 00:59:57,220 --> 00:59:58,680 I'm going to open up a different program, just so we 1274 00:59:58,680 --> 01:00:00,160 can see more at once. 1275 01:00:00,160 --> 01:00:03,100 >> So now here, notice a few things. 1276 01:00:03,100 --> 01:00:06,530 At the top of the file is open bracket, question mark, PHP. 1277 01:00:06,530 --> 01:00:08,920 Then there's a bunch of comments, which we can ignore, is 1278 01:00:08,920 --> 01:00:10,450 uninteresting for now. 1279 01:00:10,450 --> 01:00:11,300 >> Now there's this. 1280 01:00:11,300 --> 01:00:14,200 It turns out PHP has a lot of code called require. 1281 01:00:14,200 --> 01:00:19,110 It's very similar in spirit to C's include, hash include, which 1282 01:00:19,110 --> 01:00:21,980 essentially grabs the contents of some other file and just plops them here, 1283 01:00:21,980 --> 01:00:22,930 so you can use them. 1284 01:00:22,930 --> 01:00:27,060 In this case, the appliance has, pre-installed, a library, free and 1285 01:00:27,060 --> 01:00:29,900 open source library called PHP mailer that anyone can 1286 01:00:29,900 --> 01:00:30,770 download from the internet. 1287 01:00:30,770 --> 01:00:32,000 We just did it for you. 1288 01:00:32,000 --> 01:00:36,130 And this means I now have email functionality at my disposal. 1289 01:00:36,130 --> 01:00:38,170 >> Now, notice a few things. 1290 01:00:38,170 --> 01:00:41,120 I'm going to validate the form's submission. 1291 01:00:41,120 --> 01:00:45,980 Turns out PHP, one, has exclamation points for the not operator, just like 1292 01:00:45,980 --> 01:00:49,810 C. But PHP also has a function called empty. 1293 01:00:49,810 --> 01:00:53,920 >> Empty just returns true if the value of the thing you hand it in 1294 01:00:53,920 --> 01:00:57,190 parentheses is empty, like the user didn't type anything in. 1295 01:00:57,190 --> 01:01:02,680 So this is saying, and notice the syntax, very reminiscent of C, if the 1296 01:01:02,680 --> 01:01:07,730 name key, so the name field in the form, which was submitted via post, by 1297 01:01:07,730 --> 01:01:13,010 the user, is not to empty, and their gender is not empty in the form as 1298 01:01:13,010 --> 01:01:15,980 well, and their dorm is not empty-- 1299 01:01:15,980 --> 01:01:19,980 but notice I don't care about Captain, then what are we going to do? 1300 01:01:19,980 --> 01:01:21,990 >> I'm going to execute this line of code. 1301 01:01:21,990 --> 01:01:24,100 And you can think of this kind of like malloc, but it's a little 1302 01:01:24,100 --> 01:01:24,800 fancier than that. 1303 01:01:24,800 --> 01:01:29,200 But for now this gives me a special struct of type PHP mailer. 1304 01:01:29,200 --> 01:01:31,410 But ignore the keyword new for today. 1305 01:01:31,410 --> 01:01:35,670 >> Now I'm going to call a function called IsSMTP, which says, use SMTP. 1306 01:01:35,670 --> 01:01:39,380 This is port 25, just like the video last week, when the thing was throwing 1307 01:01:39,380 --> 01:01:40,710 emails into the firewall. 1308 01:01:40,710 --> 01:01:42,440 Port 25 is SMTP. 1309 01:01:42,440 --> 01:01:44,410 SMTP means use the mail server. 1310 01:01:44,410 --> 01:01:46,215 Which one, we can use Harvard's SMTP.fas.harvard.edu. 1311 01:01:46,215 --> 01:01:48,850 1312 01:01:48,850 --> 01:01:51,590 >> We can set the from address to be John Harvard's. 1313 01:01:51,590 --> 01:01:55,090 If I scroll down further, I can set the recipient address, just 1314 01:01:55,090 --> 01:01:56,840 arbitrarily, to be John Harvard's as well. 1315 01:01:56,840 --> 01:01:59,210 So he's going to be emailing himself. 1316 01:01:59,210 --> 01:02:01,600 >> Now I can set the subject to be registration. 1317 01:02:01,600 --> 01:02:03,700 And I can set the body of email as follows. 1318 01:02:03,700 --> 01:02:06,500 This line looks a little more cryptic, but that's just because there's a lot 1319 01:02:06,500 --> 01:02:07,450 of information in it. 1320 01:02:07,450 --> 01:02:10,670 One, there's a dot operator. 1321 01:02:10,670 --> 01:02:14,510 Someone must know already what the dot operator does. 1322 01:02:14,510 --> 01:02:15,436 It's concatenation. 1323 01:02:15,436 --> 01:02:19,240 So if you want to take a string in PHP, and append it, or prepend it, to 1324 01:02:19,240 --> 01:02:23,500 another string in PHP, thank God you don't have to use strcopy and malloc, 1325 01:02:23,500 --> 01:02:25,490 and all of that anymore. 1326 01:02:25,490 --> 01:02:28,765 >> If you want to concatenate two strings, who cares about the memory. 1327 01:02:28,765 --> 01:02:30,850 Let PHP figure that out for you. 1328 01:02:30,850 --> 01:02:35,200 What PHP will do with the dot operator here is just make a big sentence out 1329 01:02:35,200 --> 01:02:37,900 of this line, this line, this line, this line. 1330 01:02:37,900 --> 01:02:40,460 And now notice, it's going to be plugging in values. 1331 01:02:40,460 --> 01:02:43,680 So the email that John Harvard's going to receive is literally going to say 1332 01:02:43,680 --> 01:02:49,450 name, colon, something, rather, then we close the string and concatenate on 1333 01:02:49,450 --> 01:02:52,220 whatever the user typed in, then a new line. 1334 01:02:52,220 --> 01:02:54,570 >> Then, on the next line of John Harvard's email, it's going to say 1335 01:02:54,570 --> 01:02:55,910 Captain, On or Nothing. 1336 01:02:55,910 --> 01:02:57,810 It's going to say gender, male or female. 1337 01:02:57,810 --> 01:02:59,680 Dorm is going to be Matthews in my case. 1338 01:02:59,680 --> 01:03:03,400 And then notice familiar semicolon at the very end. 1339 01:03:03,400 --> 01:03:07,830 And then, down here, notice, somewhat cryptic still, but again, following a 1340 01:03:07,830 --> 01:03:12,730 pattern that will become more familiar after P set 7, if sending the mail 1341 01:03:12,730 --> 01:03:16,610 returns false, then go ahead and die. 1342 01:03:16,610 --> 01:03:19,610 >> So PHP has a function called die, which, literally, just kills the 1343 01:03:19,610 --> 01:03:22,830 website and just prints out whatever you tell it-- its is dying 1344 01:03:22,830 --> 01:03:24,280 words, so to speak. 1345 01:03:24,280 --> 01:03:28,310 And that, in the case, it will print out what the error info is for 1346 01:03:28,310 --> 01:03:29,860 whatever happened to go wrong. 1347 01:03:29,860 --> 01:03:34,490 So long story short here, what we have is an example where when the user 1348 01:03:34,490 --> 01:03:39,150 submits the form, froshim0, froshims3.php, it goes to 1349 01:03:39,150 --> 01:03:40,760 register3.php. 1350 01:03:40,760 --> 01:03:45,290 But register3.php then proceeds to execute all of these lines. 1351 01:03:45,290 --> 01:03:46,620 >> So there's a few take aways here. 1352 01:03:46,620 --> 01:03:50,380 One, it's apparently fairly easy, programmatically, to send emails, 1353 01:03:50,380 --> 01:03:50,830 which is good. 1354 01:03:50,830 --> 01:03:53,500 When users register for your site, in this case, when they register for your 1355 01:03:53,500 --> 01:03:56,220 sport, you can email the freshman Proctor, or John 1356 01:03:56,220 --> 01:03:57,650 Harvard, in this case. 1357 01:03:57,650 --> 01:04:01,630 >> But it also means you can do what? 1358 01:04:01,630 --> 01:04:03,970 Send emails from anyone to anyone. 1359 01:04:03,970 --> 01:04:05,430 And this is very true. 1360 01:04:05,430 --> 01:04:08,580 This is not as easily done if you're used to using Gmail. 1361 01:04:08,580 --> 01:04:11,310 But if you've ever used Eudora or Outlook, you can pretty much tell a 1362 01:04:11,310 --> 01:04:13,720 mail server that you are anyone you want. 1363 01:04:13,720 --> 01:04:16,450 And this is where I need to put on that hat and say, don't do this. 1364 01:04:16,450 --> 01:04:21,140 But this is testament to just how easy it is to perform phishing attacks, and 1365 01:04:21,140 --> 01:04:24,310 send anonymous emails, and spam, more generally. 1366 01:04:24,310 --> 01:04:27,330 And it really boils down to the fact that all you need is some 1367 01:04:27,330 --> 01:04:28,500 programmatic access. 1368 01:04:28,500 --> 01:04:31,940 >> As an aside, my closest encounter with the ad board, my own freshman year, 1369 01:04:31,940 --> 01:04:34,320 was when I discovered this cool trick that, wow, you can 1370 01:04:34,320 --> 01:04:36,850 send emails from anyone. 1371 01:04:36,850 --> 01:04:39,770 And so we were having some stupid argument, literally, in Matthews, 1372 01:04:39,770 --> 01:04:40,790 among my Proctor group. 1373 01:04:40,790 --> 01:04:42,470 I don't even remember what the issue was. 1374 01:04:42,470 --> 01:04:44,970 But I wanted to try to put an end to this stupid debate. 1375 01:04:44,970 --> 01:04:48,580 >> So I decided I will just send an email to my Proctor group, pretending to be 1376 01:04:48,580 --> 01:04:52,000 the other guy, with whose opinion I disagreed, and have him acquiesce to 1377 01:04:52,000 --> 01:04:54,680 whatever my opinion was in this particular debate. 1378 01:04:54,680 --> 01:04:59,320 And so I forged this email using a technique similar in spirit to this. 1379 01:04:59,320 --> 01:05:01,256 But it was actually easier at the time. 1380 01:05:01,256 --> 01:05:02,435 Hit send. 1381 01:05:02,435 --> 01:05:06,660 He was not pleased, nor would have been the ad board. 1382 01:05:06,660 --> 01:05:10,280 >> And I was very quickly caught within seconds because, as you know, I sign 1383 01:05:10,280 --> 01:05:11,420 my emails in a certain way. 1384 01:05:11,420 --> 01:05:14,200 And though I do it manually, in large part, 15 years later because I was 1385 01:05:14,200 --> 01:05:15,080 traumatized by that. 1386 01:05:15,080 --> 01:05:16,960 I don't have a signature on my email now. 1387 01:05:16,960 --> 01:05:20,440 But in 1995, I just had a sig, a signature in my email. 1388 01:05:20,440 --> 01:05:24,630 So there was this note saying, Dear Proctor group, I acquiesce my opinion 1389 01:05:24,630 --> 01:05:31,240 and agree with David, signed so and so, new line, new line, DJM. 1390 01:05:31,240 --> 01:05:36,220 >> So don't do that or, in general, take advantage of this technique. 1391 01:05:36,220 --> 01:05:39,950 But when making a website, like for your final project, when making a 1392 01:05:39,950 --> 01:05:43,460 website for something entrepreneurial, this is how, pragmatically, you can 1393 01:05:43,460 --> 01:05:47,000 leverage other services on the internet like mail and then actually 1394 01:05:47,000 --> 01:05:49,440 send things using code. 1395 01:05:49,440 --> 01:05:51,240 >> So how can we improve upon this? 1396 01:05:51,240 --> 01:05:54,370 Well, first let's take a quick tour of some of the things that you'll see, 1397 01:05:54,370 --> 01:05:56,170 and then take a look at a couple of examples. 1398 01:05:56,170 --> 01:05:59,500 So one, to reassure, because we're flying through PHP. 1399 01:05:59,500 --> 01:06:02,470 And I know, at some point, you'll have to actually start writing this if you 1400 01:06:02,470 --> 01:06:03,460 haven't already. 1401 01:06:03,460 --> 01:06:06,220 Realize that, one, main is kind of out the window with PHP. 1402 01:06:06,220 --> 01:06:09,420 If you want to write code that gets executed, you just start writing it in 1403 01:06:09,420 --> 01:06:13,970 a file called .php so long as you have the open bracket 1404 01:06:13,970 --> 01:06:15,620 question mark PHP tag. 1405 01:06:15,620 --> 01:06:19,730 >> But notice these are conditions in php. 1406 01:06:19,730 --> 01:06:22,610 Notice, this is the exact same slide we had in week one when we had 1407 01:06:22,610 --> 01:06:25,670 conditions in C. Conditions in PHP are structurally and 1408 01:06:25,670 --> 01:06:27,140 syntactically the same. 1409 01:06:27,140 --> 01:06:30,290 Only real difference is if you've got variables involved, you have those 1410 01:06:30,290 --> 01:06:31,600 dollar signs. 1411 01:06:31,600 --> 01:06:33,970 >> Meanwhile, Boolean expressions look just like this for 1412 01:06:33,970 --> 01:06:35,725 or-ing or and-ing together. 1413 01:06:35,725 --> 01:06:37,780 Switches look exactly the same. 1414 01:06:37,780 --> 01:06:42,180 What's nice in PHP, whereas in C, switches have to be cases on 1415 01:06:42,180 --> 01:06:46,380 primitives like ints or chars, in PHP your case statements can actually be 1416 01:06:46,380 --> 01:06:48,430 on a whole strings, which is actually kind of nice. 1417 01:06:48,430 --> 01:06:49,480 Saves you some time. 1418 01:06:49,480 --> 01:06:50,820 Couldn't do that in C. 1419 01:06:50,820 --> 01:06:52,880 >> Here's a for loop in PHP. 1420 01:06:52,880 --> 01:06:53,740 It's identical. 1421 01:06:53,740 --> 01:06:55,400 Might have some dollar signs for the variables. 1422 01:06:55,400 --> 01:06:57,530 You don't have to mention that something is an int. 1423 01:06:57,530 --> 01:07:00,580 You just declare it with a dollar sign and the name of the variable. 1424 01:07:00,580 --> 01:07:01,430 But a for loop is the same. 1425 01:07:01,430 --> 01:07:02,760 A while loop is the same. 1426 01:07:02,760 --> 01:07:04,870 A do while loop is the same. 1427 01:07:04,870 --> 01:07:06,170 >> This is a little different. 1428 01:07:06,170 --> 01:07:12,410 So with PHP, with an array, you can statically declare an array, as in C, 1429 01:07:12,410 --> 01:07:14,420 but you use square brackets. 1430 01:07:14,420 --> 01:07:17,060 In C, you would use curly braces, if you even knew that. 1431 01:07:17,060 --> 01:07:20,910 But this is actually very common in PHP to declare an array, in this case, 1432 01:07:20,910 --> 01:07:23,640 of numbers, and call the variable numbers. 1433 01:07:23,640 --> 01:07:25,300 >> Variables themselves look like this. 1434 01:07:25,300 --> 01:07:28,710 Here is a string, quote unquote "hello world." You could have a backslash n. 1435 01:07:28,710 --> 01:07:30,950 I simply don't in this case. 1436 01:07:30,950 --> 01:07:32,640 >> Now this is an interesting construct. 1437 01:07:32,640 --> 01:07:33,700 C does not have this. 1438 01:07:33,700 --> 01:07:34,700 But this is super helpful. 1439 01:07:34,700 --> 01:07:38,160 And you'll see this in P set 7 spec-- a for each construct. 1440 01:07:38,160 --> 01:07:41,800 If you want to reiterate over all of the elements an array, you don't have 1441 01:07:41,800 --> 01:07:45,500 to deal with $i and $n, and ++, and all that. 1442 01:07:45,500 --> 01:07:47,640 You can literally say, in PHP, this-- 1443 01:07:47,640 --> 01:07:51,890 for each numbers as number, so I'm assuming that $numbers 1444 01:07:51,890 --> 01:07:53,380 is an array of numbers. 1445 01:07:53,380 --> 01:07:56,460 And when I say for each numbers as number, this is going to 1446 01:07:56,460 --> 01:08:00,505 automatically, as my loop executes, update, on each iteration, the value 1447 01:08:00,505 --> 01:08:03,260 inside of dollar sign number-- 1448 01:08:03,260 --> 01:08:07,730 again, and again, and again walking for me over that array. 1449 01:08:07,730 --> 01:08:08,735 So it just saves us code. 1450 01:08:08,735 --> 01:08:12,250 No semicolons, no ++'s, no i's, no n's, it's just nice. 1451 01:08:12,250 --> 01:08:13,700 >> But PHP also has this. 1452 01:08:13,700 --> 01:08:14,830 And this is super powerful. 1453 01:08:14,830 --> 01:08:17,410 And you'll use this, hands on, in P set 7. 1454 01:08:17,410 --> 01:08:21,990 And associative array is also declared with square brackets. 1455 01:08:21,990 --> 01:08:23,569 But notice the syntax now. 1456 01:08:23,569 --> 01:08:26,880 It's reminiscent of what we saw with print_r a moment ago. 1457 01:08:26,880 --> 01:08:31,810 How many keys, as a little sanity check, does this array seem to have. 1458 01:08:31,810 --> 01:08:32,689 >> So it has two. 1459 01:08:32,689 --> 01:08:33,830 And I call this an array. 1460 01:08:33,830 --> 01:08:36,760 But if it helps, you can think of this as hash table, or as 1461 01:08:36,760 --> 01:08:37,930 an associative array. 1462 01:08:37,930 --> 01:08:39,580 But it is just a different type of array. 1463 01:08:39,580 --> 01:08:41,080 And again, different languages have these. 1464 01:08:41,080 --> 01:08:43,810 We'll see something similar in JavaScript as well. 1465 01:08:43,810 --> 01:08:44,609 There's two keys. 1466 01:08:44,609 --> 01:08:48,390 One is quote unquote, "symbol," one is quote unquote "price." And those keys 1467 01:08:48,390 --> 01:08:49,250 each have a value. 1468 01:08:49,250 --> 01:08:54,420 In this case symbol's value is FB, for Facebook, and price's value is 49, 26, 1469 01:08:54,420 --> 01:08:56,899 which was Facebook's stock price as of this morning. 1470 01:08:56,899 --> 01:09:00,170 >> So what is useful about an associative array. 1471 01:09:00,170 --> 01:09:02,620 I could have had a numerically indexed array with just 1472 01:09:02,620 --> 01:09:04,120 simple square brackets. 1473 01:09:04,120 --> 01:09:09,380 And I could have had dollar sign quote equals just this. 1474 01:09:09,380 --> 01:09:10,529 Let me actually do it. 1475 01:09:10,529 --> 01:09:14,796 Suppose I instead just declared this array like that. 1476 01:09:14,796 --> 01:09:17,590 That is perfectly valid, syntactically. 1477 01:09:17,590 --> 01:09:20,569 It doesn't lose any information, per se. 1478 01:09:20,569 --> 01:09:24,760 I still see that the symbol is fb, and that the price is 49, 26. 1479 01:09:24,760 --> 01:09:28,939 So why are associative arrays compelling? 1480 01:09:28,939 --> 01:09:30,189 >> AUDIENCE: You don't have to remember where you put stuff. 1481 01:09:30,189 --> 01:09:32,050 1482 01:09:32,050 --> 01:09:34,130 >> SPEAKER 1: Exactly, you don't have to remember where you put stuff. 1483 01:09:34,130 --> 01:09:37,670 You don't have to arbitrarily remember that stock symbol is in bracket zero, 1484 01:09:37,670 --> 01:09:41,479 and stock prices is in bracket one, which is particularly dangerous if you 1485 01:09:41,479 --> 01:09:43,220 change things, eventually. 1486 01:09:43,220 --> 01:09:46,399 It's much nicer to associate what we'll call metadata 1487 01:09:46,399 --> 01:09:48,340 with your actual data. 1488 01:09:48,340 --> 01:09:52,399 I'd argue that what we really care about here is fb and 49, 26. 1489 01:09:52,399 --> 01:09:57,020 The symbol and price is metadata that describes the data we 1490 01:09:57,020 --> 01:09:58,180 actually care about. 1491 01:09:58,180 --> 01:10:01,910 But this is just so much easier to access. 1492 01:10:01,910 --> 01:10:04,090 >> Now, as an aside what's the price we pay? 1493 01:10:04,090 --> 01:10:06,600 We've been doing this in CS50 for weeks. 1494 01:10:06,600 --> 01:10:10,740 This feature must come at some cost. 1495 01:10:10,740 --> 01:10:11,350 Memory. 1496 01:10:11,350 --> 01:10:13,830 So you're not just storing a 32-bit integer, for instance. 1497 01:10:13,830 --> 01:10:17,980 You're storing symbol/0, probably. 1498 01:10:17,980 --> 01:10:19,160 So you're using more memory. 1499 01:10:19,160 --> 01:10:22,540 >> And what's the performance of looking something up in an 1500 01:10:22,540 --> 01:10:24,822 associative array, probably? 1501 01:10:24,822 --> 01:10:26,590 It's probably slower. 1502 01:10:26,590 --> 01:10:29,670 Random access is nice, especially when you can do binary search. 1503 01:10:29,670 --> 01:10:33,380 But if you're actually now looking not for numbers, but for strings, this 1504 01:10:33,380 --> 01:10:37,630 truly is implemented underneath the hood, probably as a hash table, where 1505 01:10:37,630 --> 01:10:42,950 you use either a hash table with separate chaining. 1506 01:10:42,950 --> 01:10:46,040 Or you use a try to actually store the values. 1507 01:10:46,040 --> 01:10:50,550 So maybe you can do constant time, but you still have to look at S-Y-M-B-O-L, 1508 01:10:50,550 --> 01:10:54,510 potentially, instead of just 32 bits to look something up. 1509 01:10:54,510 --> 01:10:58,430 So again, those same ideas coming back to recur in this context. 1510 01:10:58,430 --> 01:11:02,120 >> But again, PHP now has some super globals that, it turns out, are 1511 01:11:02,120 --> 01:11:02,900 associative arrays. 1512 01:11:02,900 --> 01:11:05,590 We saw one a moment ago, $_POST. 1513 01:11:05,590 --> 01:11:08,400 And that super global has keys and values. 1514 01:11:08,400 --> 01:11:10,550 Specifically, the keys line up with what? 1515 01:11:10,550 --> 01:11:14,520 Where do the keys in $_POST come from? 1516 01:11:14,520 --> 01:11:15,380 Just to recap? 1517 01:11:15,380 --> 01:11:16,480 >> AUDIENCE: Name. 1518 01:11:16,480 --> 01:11:17,900 >> SPEAKER 1: Name, where? 1519 01:11:17,900 --> 01:11:19,860 >> AUDIENCE: [INAUDIBLE] 1520 01:11:19,860 --> 01:11:20,750 >> SPEAKER 1: Name is the attribute. 1521 01:11:20,750 --> 01:11:23,480 Well where, where did they originally come from? 1522 01:11:23,480 --> 01:11:24,120 The form. 1523 01:11:24,120 --> 01:11:30,140 So if an HTML page has a form tag, inside of which are some inputs, like 1524 01:11:30,140 --> 01:11:34,760 check boxes, text boxes, drop down menus, each of which has a name, those 1525 01:11:34,760 --> 01:11:40,260 names end up as keys in $_POST, and, frankly, for that matter, $_GET. 1526 01:11:40,260 --> 01:11:42,130 If the method is get, same idea. 1527 01:11:42,130 --> 01:11:43,830 It's just in a different super global. 1528 01:11:43,830 --> 01:11:47,620 And the values, of course, come from whatever the user typed in at his or 1529 01:11:47,620 --> 01:11:48,890 her browser. 1530 01:11:48,890 --> 01:11:49,830 >> But there's a few others. 1531 01:11:49,830 --> 01:11:52,140 There's cookie, which we'll come back to eventually. 1532 01:11:52,140 --> 01:11:56,050 But those are the things that you know the web uses for some good or evil. 1533 01:11:56,050 --> 01:11:57,420 But we'll come back to that. 1534 01:11:57,420 --> 01:12:01,720 Server and session, and those two have some special utility. 1535 01:12:01,720 --> 01:12:03,940 >> But let's take a look at this. 1536 01:12:03,940 --> 01:12:13,330 Let me go ahead and open up an example called mvc0.php So MVC 1537 01:12:13,330 --> 01:12:14,900 stands for the following. 1538 01:12:14,900 --> 01:12:19,390 And we introduce this earlier than is typical, really, to get you designing 1539 01:12:19,390 --> 01:12:22,180 Problem set 7, and also final projects, in sort of an industry 1540 01:12:22,180 --> 01:12:23,670 standard way, and clean way. 1541 01:12:23,670 --> 01:12:24,820 It's good design. 1542 01:12:24,820 --> 01:12:29,090 >> So you're about to see, and you'll experience, in P set 7, paradigm, sort 1543 01:12:29,090 --> 01:12:32,260 of a programming mindset, that looks a little something like this. 1544 01:12:32,260 --> 01:12:35,570 M for Model, C for Controller, V for View. 1545 01:12:35,570 --> 01:12:39,690 Long story short, MVC is just kind of a methodology, a way of making 1546 01:12:39,690 --> 01:12:43,360 websites, in particular, whereby you put all of your, stupid phrase-- 1547 01:12:43,360 --> 01:12:44,970 business logic-- 1548 01:12:44,970 --> 01:12:49,710 all of your intellectual property in what's called a controller, a file 1549 01:12:49,710 --> 01:12:54,840 like index.php, or we'll see, quote.php, or buy.php. 1550 01:12:54,840 --> 01:12:59,570 >> In the context of Problem set 7, your models typically contain your data, 1551 01:12:59,570 --> 01:13:03,860 anything related to a database, as we'll eventually see, and your views 1552 01:13:03,860 --> 01:13:07,510 contain the aesthetics of your site, the HTML, the CSS. 1553 01:13:07,510 --> 01:13:10,420 So we already saw this in C a little bit by using .h files. 1554 01:13:10,420 --> 01:13:15,010 We really saw it a moment ago with CSS, by factoring the CSS stylization 1555 01:13:15,010 --> 01:13:16,520 stuff out of our HTML. 1556 01:13:16,520 --> 01:13:20,730 >> So MVC is really just about drawing lines in the sand and saying, the 1557 01:13:20,730 --> 01:13:25,400 interesting programming code for your website belongs in what we'll call the 1558 01:13:25,400 --> 01:13:26,400 controller. 1559 01:13:26,400 --> 01:13:29,280 Stuff related to database typically ends up in a model. 1560 01:13:29,280 --> 01:13:33,070 But you'll see, in Problem set 7, we merge C and M to keep it simple. 1561 01:13:33,070 --> 01:13:37,630 But view is where all of your HTML and aesthetics typically go. 1562 01:13:37,630 --> 01:13:39,160 >> So what does this mean in real terms? 1563 01:13:39,160 --> 01:13:45,980 Well, let me go into our MVC directory as follows. 1564 01:13:45,980 --> 01:13:48,880 And you'll see more of these toured through in the spec. 1565 01:13:48,880 --> 01:13:53,200 So in mvc0, I claim that this is, like, version 0 of CS50's websites. 1566 01:13:53,200 --> 01:13:56,670 >> All we have is some HTML, like a big h1 tag, apparently. 1567 01:13:56,670 --> 01:13:57,800 And then a bulleted list. 1568 01:13:57,800 --> 01:13:59,860 I've never seen a bulleted list before, but no big deal. 1569 01:13:59,860 --> 01:14:01,590 Let's quickly look at the source code. 1570 01:14:01,590 --> 01:14:06,610 Turns out an unordered list with bullets is open bracket ul with one or 1571 01:14:06,610 --> 01:14:09,065 more list items, li. 1572 01:14:09,065 --> 01:14:10,650 So notice here is an anchor tag. 1573 01:14:10,650 --> 01:14:12,130 We saw that a moment ago. 1574 01:14:12,130 --> 01:14:13,810 >> So this is how I implemented this page. 1575 01:14:13,810 --> 01:14:18,460 I've got two links, two list items, one ul for unordered list, and the end 1576 01:14:18,460 --> 01:14:22,700 result, aesthetically, is this very pretty website, version 0 here. 1577 01:14:22,700 --> 01:14:26,840 But what's interesting now is how this is implemented underneath the hood. 1578 01:14:26,840 --> 01:14:33,590 >> Let me go into gedit and open up this very first example to paint a picture. 1579 01:14:33,590 --> 01:14:37,070 And we'll look at what's flawed, potentially, in here. 1580 01:14:37,070 --> 01:14:43,260 Now if I go into localhost, public, MVC, notice a few files. 1581 01:14:43,260 --> 01:14:45,780 I'm going to call these, for the moment, all controllers. 1582 01:14:45,780 --> 01:14:48,640 But that's a bit of an abuse because you'll see everything's commingled 1583 01:14:48,640 --> 01:14:49,620 inside of them. 1584 01:14:49,620 --> 01:14:52,330 >> And let me go inside of index.php. 1585 01:14:52,330 --> 01:14:54,700 And we see, literally, the same HTML. 1586 01:14:54,700 --> 01:14:57,970 So even though this file ends in .php, It doesn't mean it has to 1587 01:14:57,970 --> 01:14:59,500 have any PHP code. 1588 01:14:59,500 --> 01:15:02,290 It can just be raw HTML, although that's kind of silly. 1589 01:15:02,290 --> 01:15:07,650 But notice there's no open bracket PHP tag, except for this, which, frankly, 1590 01:15:07,650 --> 01:15:09,160 is just there to serve as a comment. 1591 01:15:09,160 --> 01:15:12,080 But that's functionally not even that interesting. 1592 01:15:12,080 --> 01:15:12,960 >> But notice this. 1593 01:15:12,960 --> 01:15:15,400 What's interesting now is what changes on this page. 1594 01:15:15,400 --> 01:15:16,650 Let me click Lectures. 1595 01:15:16,650 --> 01:15:18,560 And notice the URL is about to change. 1596 01:15:18,560 --> 01:15:20,930 Now I'm at lectures.php. 1597 01:15:20,930 --> 01:15:22,630 Let me click zero. 1598 01:15:22,630 --> 01:15:27,200 Now I'm at week0.php And now let me open these files in gedit. 1599 01:15:27,200 --> 01:15:30,120 Not just index, but let me open up lectures. 1600 01:15:30,120 --> 01:15:33,900 And let me get rid of the comments to focus on this part only. 1601 01:15:33,900 --> 01:15:37,680 >> And now let me open up just one more, week0.php, throw away the comments, 1602 01:15:37,680 --> 01:15:39,910 just to clean this up. 1603 01:15:39,910 --> 01:15:41,720 And now notice the following. 1604 01:15:41,720 --> 01:15:47,340 Thinking really sort of carefully about design, and let's make it line 1605 01:15:47,340 --> 01:15:52,013 up the same, what could be done better here, do you think? 1606 01:15:52,013 --> 01:15:56,450 1607 01:15:56,450 --> 01:15:57,780 >> How did I make a week one? 1608 01:15:57,780 --> 01:15:58,480 How about this. 1609 01:15:58,480 --> 01:16:00,450 So this is how I made week one. 1610 01:16:00,450 --> 01:16:08,290 I went up to File, New, Paste, Save, week1.php, and then I went in here. 1611 01:16:08,290 --> 01:16:09,875 And I changed one-- 1612 01:16:09,875 --> 01:16:11,646 what was this, one to Friday. 1613 01:16:11,646 --> 01:16:14,430 1614 01:16:14,430 --> 01:16:15,810 I changed the zeros to one. 1615 01:16:15,810 --> 01:16:17,150 I changed this to one. 1616 01:16:17,150 --> 01:16:20,350 >> OK, so now look at my files. 1617 01:16:20,350 --> 01:16:22,100 What could be done differently? 1618 01:16:22,100 --> 01:16:25,310 Where's the opportunity, perhaps? 1619 01:16:25,310 --> 01:16:28,330 So there's the opportunity to start factoring this stuff out. 1620 01:16:28,330 --> 01:16:32,950 Let me open up, as a spoiler, for what you'll see in P set 7. 1621 01:16:32,950 --> 01:16:38,750 If I open up, now, index.php in version five of this, it looks way 1622 01:16:38,750 --> 01:16:40,730 more cryptic, admittedly. 1623 01:16:40,730 --> 01:16:43,710 >> But this, now, is what I'll call a controller that's controlling the 1624 01:16:43,710 --> 01:16:44,770 logic of my page. 1625 01:16:44,770 --> 01:16:48,510 And you can kind of reconstruct, intuitively, perhaps, what's going on. 1626 01:16:48,510 --> 01:16:50,630 On the first line, it's a little cryptic. 1627 01:16:50,630 --> 01:16:54,040 But notice I'm requiring, like with sharp include, a file called 1628 01:16:54,040 --> 01:16:55,930 helpers.php. 1629 01:16:55,930 --> 01:16:59,980 And then I'm calling, apparently, a function, called render, passing in 1630 01:16:59,980 --> 01:17:00,850 two arguments. 1631 01:17:00,850 --> 01:17:02,440 >> One is quote unquote, header. 1632 01:17:02,440 --> 01:17:04,800 And the other is, what kind of data type is this, based 1633 01:17:04,800 --> 01:17:07,180 on our syntax earlier? 1634 01:17:07,180 --> 01:17:08,160 It's an associated array. 1635 01:17:08,160 --> 01:17:11,730 Specifically, it's passing in the title with some metadata that reminds 1636 01:17:11,730 --> 01:17:13,430 me what it is and its value. 1637 01:17:13,430 --> 01:17:16,340 Then I see a hard coded ul, so some raw HTML. 1638 01:17:16,340 --> 01:17:20,020 But then I'm back in PHP mode calling a function render. 1639 01:17:20,020 --> 01:17:24,390 So even if you've never used HTML or PHP before, and even though this looks 1640 01:17:24,390 --> 01:17:27,480 scarier, why is this probably better design? 1641 01:17:27,480 --> 01:17:31,310 What's better about it, based on inference? 1642 01:17:31,310 --> 01:17:32,130 >> AUDIENCE: [INAUDIBLE] 1643 01:17:32,130 --> 01:17:35,750 >> SPEAKER 1: Less redundant in that there's no more HTML tag, no more 1644 01:17:35,750 --> 01:17:38,410 heads tag, no more body tag in every damn file. 1645 01:17:38,410 --> 01:17:41,860 Instead, I've factored out the commonalities and presumably put them 1646 01:17:41,860 --> 01:17:45,150 into a file somehow related to a header. 1647 01:17:45,150 --> 01:17:48,500 And same thing for the close body tag, the close HTML tag. 1648 01:17:48,500 --> 01:17:52,165 That's probably down here inside of the footer somewhere. 1649 01:17:52,165 --> 01:17:57,050 And you'll see, in Problem set 7, a little tour through this. 1650 01:17:57,050 --> 01:17:58,070 >> So what lies ahead? 1651 01:17:58,070 --> 01:18:03,390 The one thing we haven't the ability yet for is to actually store data. 1652 01:18:03,390 --> 01:18:06,110 And so what we'll start to see Wednesday, for instance, is that your 1653 01:18:06,110 --> 01:18:08,450 old friend Excel, or numbers, allows you to store lots of 1654 01:18:08,450 --> 01:18:10,060 data in rows and columns. 1655 01:18:10,060 --> 01:18:12,570 Turns out you can do that in what's called a database, programmatically. 1656 01:18:12,570 --> 01:18:16,620 manic And it turns out, after that, we'll be able to store things like 1657 01:18:16,620 --> 01:18:20,550 this, which you'll see again in P set 7, a whole bunch of usernames and 1658 01:18:20,550 --> 01:18:23,690 passwords, the latter of which are actually encrypted, much like they 1659 01:18:23,690 --> 01:18:25,550 were in P set 2's hacker edition. 1660 01:18:25,550 --> 01:18:29,600 And eventually, you'll implement this, your own eTrade-like website that 1661 01:18:29,600 --> 01:18:32,220 implements collectively CS50 finance. 1662 01:18:32,220 --> 01:18:36,000 >> Lastly, since you stayed here so late today, if you come back to this part 1663 01:18:36,000 --> 01:18:41,120 of campus, at 4:00 PM today, we will give you not only advice, at the SCES 1664 01:18:41,120 --> 01:18:44,200 Advising Fair, at 4:00 PM in the Maxwell-Dworkin, we'll give you some 1665 01:18:44,200 --> 01:18:47,470 Americone Dream, Cherry Garcia, Chocolate Fudge Brownie, Chocolate 1666 01:18:47,470 --> 01:18:50,840 Chip Cookie Dough, and, when you Google Chunky Monkey, you get this. 1667 01:18:50,840 --> 01:18:53,620 So all of that awaits at 4:00 PM in Maxwell-Dworkin. 1668 01:18:53,620 --> 01:18:56,736 See you on Wednesday as well. 1669 01:18:56,736 --> 01:18:59,960 >> SPEAKER 2: At the next CS50, RJ sleeps in. 1670 01:18:59,960 --> 01:19:03,656 1671 01:19:03,656 --> 01:19:04,906 >> RJ: My section! 1672 01:19:04,906 --> 01:19:07,727 1673 01:19:07,727 --> 01:19:08,977 Ha! 1674 01:19:08,977 --> 01:19:12,056 1675 01:19:12,056 --> 01:19:13,306 Oh, 1676 01:19:13,306 --> 01:19:16,374