Week 9

>> SPEAKER 1: All, right welcome back. This is CS50. And this is the start of week nine. And this is the start of the rest of your time in CS50, in which we transition now, finally, to the web aspect of the course, where you'll find that a lot of the fundamentals that we've been exporting for weeks still come back to visit, or haunt, us. But now, you'll find that it's an order of magnitude easier to accomplish certain tasks and solve certain problems-- so much so that even if you thought certain problem sets were fun in their own way, I think that you'll find that p set 7, p set 8, and then, ultimately, the final project will be all the more gratifying because you'll find that we begin to take for granted now things like memory management, and pointers, and what's going on underneath the hood. And again, thematic, all throughout the semester has been this layering and layering. And now we're sort of up here, standing on the shoulders of weeks past. >> Now, recall from last time that we talked about how the internet worked. And this was perhaps an oversimplification, but remember that every computer in the world has an IP address, although that's a bit of an oversimplification still. And those addresses are used to uniquely identify machines so that when you send information, or packets, so to speak, they can have an origin address and a destination address. And those same IP addresses can be used both for good and also for evil, to track you, for instance. In fact, every one of you with a laptop open now, or a phone in your pocket, has an IP address on Harvard's network. And it's not all that difficult to correlate that to who and where you are these days. But more on that perhaps in the future. >> Now I thought I'd bring back some memories of [? enhance ?] and give you another clip from a show you might find familiar. If we could dim the lights for just a few seconds. The show Numb3rs. >> SPEAKER 2: It's a 32-bit IPP4 address. >> SPEAKER 3: IPP, as in internet? >> SPEAKER 2: Private network. To Amita's private network. She is so amazing. >> SPEAKER 3: Come on, Charlie. >> SPEAKER 2: It's. A mirror IP address. She's letting us watch what she's doing in real time. >> SPEAKER 1: OK, so a few things wrong with this picture. So one, and this one is acceptable, this is actually not a valid IP address. A valid IP address has to be numbers of the form w.x.y.z, where each of those letters is 0 to 255. But that's fine because just like the movies where they fake phone numbers, they fake IP addresses. You don't actually hit real servers. >> But mind you, this is a browser. And browsers do not start outputting computer code like this. And if we look a little deeper, notice that the language that they're seeing on the screen is a language called Objective C, which is the language in which iPhone apps are written, particularly the ones involving crayons, as you can see from the source code here. >> OK, I thought this was funny. So this snippet of code has absolutely nothing to do with whatever this particular episode was about. So the joke is sort of on the folks taking for this granted. But this is not all that hard to get these technical details right. And I would encourage you. And actually, 50 might very well spoil a lot of TV shows and movies or you because you'll find that it's just not possible what they're doing on the screen. But indeed, this is the code that you might see it in an iPhone application or Mac OS application. It has nothing at all to do with security. So keep an eye out for more such fun things like that. >> But today we begin to dive in really deeply to a whole range of languages. An indeed, one of the overarching takeaways of this portion of the course is not to learn how to program in PHP, not to learn SQL per se, not to learn JavaScript per se, but rather to teach yourself how to teach yourself new languages because, indeed, we begin to take now the training wheels off so that after course's end, you don't expect a 20 page specification to tell you how to implement some program. You have enough ingredients in your mind, and enough tools in your tool kit, with which to start building solutions to problems of interest to you for some students group, for some research project, or really anything of interest to you. >> So toward that end, recall that this was the picture we drew it last time. And this is two computers, client and sever, talking to one another. And the protocol, the language, so to speak, that these two computers happen to be speaking is called HTTP. And that's just the protocol used by computers to transfer information over the world wide web. The web, of course, is just one service that runs on top of the so-called internet. What's another service available on top of the internet these days? Some other protocol or-- what's that? >> AUDIENCE: FTP. >> SPEAKER 1: FTP. So File Transfer Protocol is another. Most of you probably haven't used it. But most of you probably have used things like Gchat, or instant messaging more generally, certainly email. And those, too, are services that run on top of the internet because, at the end of the day, the internet itself really just get data from point A to point B. And it uses a number of particles itself, one of them or two of them most generally called TCP/IP, which is to say that one computer on the internet can actually be doing different things, email, and web, and so forth. Google does a lot of this. So how are those services uniquely identified, did we say, on a computer that might actually be doing multiple things? >> The port number. And these are just arbitrary human conventions like 80 is web, 443 is encrypted web, 25 is email. And there's a bunches of others. And those numbers are simply included in those packets of information, those virtual envelope, that actually contained a request or a response. >> So when you get back a response from the web, typically, you don't see any numbers whatsoever in terms of the status code of the response. You don't actually see the inner workings of the packets that come back. But 200 does indeed mean OK. And that means all is well. You might have seen a bunch of these. Which is probably the most common you've seen on the web? >> 404. It just means file not found. It means someone screwed up. You did by mistyping the URL, or someone else did by giving you an invalid URL, or they deleted the file and the URL is still being used by people. So any number of reasons can explain why a file is not found. And you'll see, in the weeks to come, these other error codes, and you'll take advantage of some of them. The worst is 500. If you get a 500 error in code you've written, think of that as sort of the analog of seg faults in the world of web programming. It's not quite as dire. But it just means that, somewhere, you screwed up. So look forward to those. >> But let's see if we can see these in context. Let me go to a browser here and do the following. So this is Chrome, which happens to be installed in the appliance. But most every browser these days has some equivalent functionality. I'm going to go up the Chrome's menu, and go to Tools, and I'm going to go to Developer Tools. And you'll see that this little panel opens in the bottom of the window. Another shortcut, to be honest, that I usually use myself is to Right click or Control click anywhere on the web page and just go to Inspect Element. And that will not only open this have for you. It will also open, specifically, the Elements portion on the left hand side. >> So we're of course seeing Google. They changed their logo today. But on if I scroll down up here, notice that under Elements, you see what's called HTML, HyperText Markup Language, and this is the language that this and all web pages, really, are written in. But it's actually formatted for us so much more readably than it normally is. In fact, if I zoom out, and I instead just Right click or Control Click click on the page, and then go to View Page Source, this is literally what Google sent down to my browser. >> So some person or persons wrote Google.com using this source code. Most of this is not HTML. It's actually a language called JavaScript, which we'll come to on Wednesday. But what Chrome, and what every browser can do for us, is kind of see past all of the distractions of the crazy syntax, and reinsert white space for us, and even syntax highlight, or colorize things for us. So you'll find that these so-called developer tools built into browsers will make your life so, so much easier because you can explore, via this menu interface, exactly what the underlying source code is for any page on the internet. And indeed, this is one of the most effective ways to learn how to do something new, at least if the page isn't so complex as to overwhelm, is to start poking around it's HTML, look at its so-called CSS, which we'll come to a bit as well, to get an understanding of how that programmer implemented some particular feature of the page. >> But more technically interesting right now it's going to be this. If I go to the Network tab, let's now clear this. I'm going to click the little cross symbol here, and then go to another website. And I'm just going to type in Facebook.com. No HTTP, no HTTPS, no WWW. Let's actually see what happens here. >> Enter. Now notice a whole bunch of stuff just appeared in this bottom panel, in addition to the web page appearing in the top. I'm going to scroll back up into the Network tab here, and I'm going to click on the first row. What this tool is going to reveal to us is every one of the HTTP requests that rapidly just went back and forth between my browser and Facebook's server. And so every one of those rows represents one such request or response, one or more of those virtual envelope. Or more casually, it's like a person like a person, a customer in a restaurant, asking for something again, and again, and again. And the waiter keeps bringing it back one at a time. >> So now, if I zoom in on this, notice and this will be the sort of thing that you're welcome to and encouraged to play with on your own, because we won't go through everything in great detail. But notice there's a few sub tabs here-- Headers, Preview, Response, Cookies, and timing. I'm just going to look at headers for now because these are little ingredients inside of the envelope that help data get to and from places. >> So first, let me click this, View Source next to Request Headers. There is the request that my browser, Chrome, in this case, sent inside of that virtual envelope. You'll recall last week I manually typed it while pretending to be a browser. Then it reminded the server that it's looking for the host called Facebook.com. And then there's a bit more arcane information that we'll wave our hands for now. >> But if I start to scroll down now in this window, let me get to the response headers. This was what's in the virtual envelope that came back from Facebook.com. And if I click View Source just to see the raw text of it, notice a few things. One, Facebook also speaks the same protocol, version 1.1 thereof. So that's nice. But status code 301, moved permanently. >> Well, where the heck did Facebook go? What's this trying to convey to us? Well, notice down here there's another header called Location. So why is Facebook telling me that they moved permanently to that URL next to Location? I forgot the www. >> So that was my choice. In fact, most of us rarely, probably, type www.whatever.com these days. But it turns out a system administrator, like Facebook's, can configure their servers in such a way that either Facebook.com works, or www.Facebook.com works, or, really, any such prefix in front of their domain name. So they've done that for us. And they are redirecting us, probably for some technical, some marketing reasons. They just want to canonicalize on www.Facebook.com. >> But that's not quite it. If I scroll down here, let's see what happens. This is telling me we moved permanently to http://www.Facebook.com. So let's look at the second request that my browser sends. Unfortunately, it looks like Facebook has moved again because the second request, by selecting that URL instead, says that, too, moved permanently. And let me scroll down here to the response headers. Where has Facebook gone now? >> So HTTPS. So now Facebook has started, particularly in light of current events in recent months, especially and also in the past couple of years to compel all of their users, in a good way, to use HTTPS, which is more secure, although not entirely secure. And so now my page, my browser is going to request this third URL. And now, finally, we get the otherwise unseen 200 OK. >> So what in the world or all of these other rows down here. I literally typed one thing, and my browser seems to have requested like 20 some odd things. What is that? >> AUDIENCE: Scripts? >> SPEAKER 1: Scripts, so other files written in a language called JavaScript, which, again, we'll see a bit of on Wednesday. What else? Style sheets. So something in a language called CSS, which we'll see in a bit. Gifs, and jpegs, and pngs, and images, and movie files-- whatever a web page has is most likely in the form of a file. And so what we're seeing on the left hand side there is all of the files that Chrome had to download, recursively, if you will, in order to compose the entirety of the page. >> So what we saw a moment ago with Google, if I click on the Elements tab, this, sure, is the HTML, the language that composes this page. But there's bunches of other things. There's a logo. There's those blue-ish icons over there. And there's other elements still on the page that themselves might be separate files. >> So what's nice about a browser is that it looks at the language we're going to start writing, or you've already started writing in P set 7, figures out where those files live, and goes and grabs them as well. And I can't emphasize enough, even though some of this might look a bit arcane or overwhelming at first glance, learning how to program applications for the web, it's invaluable to understand how these little tools work. These are sort of like GDB like tools, but much simpler, ultimately, to use-- and really gives you eyes into what we've been taking for granted for quite some time now. >> So what can we now do with this information? Well, let's actually take a look at the concepts underlying HTML. And we'll defer, as we already have, to sections this week, to the problem set 7 specification, to some of the more particulars of these languages. But let's see if we can't paint a picture of what you should understand overall here. >> So HTML, HyperText Markup Language, is not a programming language. What does that really mean? So HTML looks like this. And some of you already know this. Some of you have been doing this for some time. But let's see if we can't fill in some blanks as well. So notice a couple of things here. One, it's just text. So it's just like source code in C, or some other language. >> Notice that there seems to be a pattern here. There's indentation, but technically the indentation is just human convention. A browsers doesn't care if there's new lines and tabs like we see there. But notice that there's symmetries here. There's what I'll call, at the top of this file, the open tag, or the start tag, called HTML. And then, down below, perfectly lined up, much like we do with curly braces, we see open bracket, forward slash, HTML, close bracket. So that's the corresponding close tag, or end tag, for that thing. >> Together, everything inside of the so-called open tag and close tag compose what we'll call an element. And we'll see, in just a moment, it's really like a node in a trees. Because if you think about now the indentation that's implied here, you kind of have, like, a grandparent node called HTML. How many children might you say, based on this picture, the HTML element has? >> So probably two. One is the head element, apparently. And one is the body element. And why two children? Well, I'm just kind of inferring that if I have an open head tag and then a close head tag, that's an element. And then, if there's another open body tag and a close body tag, that's like another element. So in the sense that if I kind of rotate the picture on its side, it's like having an HTML tag, and then a head tag, and then a body tag, and then some text, hello world, dangling off of the body tag itself. >> So we can draw a picture that might look like this. The shapes are arbitrary. But notice that I've used sort of an ellipse at the top to represent the document itself. It turns out there can be other stuff inside of a web page that I've not drawn here. So we're going to even hang the HTML node off of a so-called document node. And then we have head and body and title, notice, which is nested further. I didn't bother putting additional line breaks inside of the title tag. It just felt like it was getting a little too verbose. So I left it in one line there, with open title, hello world, close title. And then we have some text dangling off of here. >> So this picture will come back to us when we dive into JavaScript. And understanding that when you write HTML like this, what is a browser doing? Well, we don't have to worry about how it's doing this, or with what algorithm, but at the end of the day, when a browser receives HTML like that, from Facebook or Google, it parses it, so to speak, it reads it, with something like fread, top to bottom, left to right, and as it realizes, oh, open tag, and then close tag, it starts to malloc, so to speak, a node in a tree. And when it encounters, as we've implied here with the indentation, a child node, it mallocs a node for that and attached that to the tree. >> So the tree structures, binary trees, ternary trees, and bigger trees, that we glanced at a week or two ago, notice that the same principle is coming back to us. And whoever implemented, Chrome whatever team did that, presumably had to implement some kind of tree structure underneath the hood. And that itself is probably in a language like C, or C++, or a lower level language that we'll now use atop the web. >> So now, maybe, this will make more sense. Actual tattoo from some guy who might regret it eventually, kind of. OK, all right, so a lot of web humor. It's not really going over so well today. So we'll move on. All right. >> So let's take a look now at a few examples. The simplest possible thing might be this. I'm going to go ahead and open up in gedit a file called hello.php. And inside of here, I'm going to quickly just do this, printf, quote unquote, "hello world." >> So notice, and I'll do my backslash n, I've not bothered to declare main. It turns out, in php, and a lot of languages, you don't need a main function per se. You can just start writing your program. Now, when I save this file, notice I'm going to have to do the following. I'm not going to use make, and I'm not going to use clang because PHP, unlike C, is not a compiled language. It's what's called an interpreted language, which means that you run it as an input through another program called an interpreter. And that program reads it, top to bottom, left to right, and does whatever you tell it to do. >> So in this case here I have one line that says printf. So when I run this source code, hello.php, though a program that happens, conveniently, to be called PHP, that program PHP is going to read this file, top to bottom, left to right, and it's going to do what I tell it to do-- executing code, and if it doesn't recognize something, just spitting it out. So I'm going to go ahead and run PHP of hello.php. Enter. >> And that's not quite what I intended. Well, why is that? Well, PHP is a language that's actually designed to be fairly intertwined with the web. When making web pages with this language PHP, as we'll soon see, we'll want to do something like print out lines like this. >> So I'm going to do this. Open bracket, question mark, PHP, and now I'm just going indent just to keep things nice. And now I'm going to do a question mark close bracket. So there's a bit of asymmetry here. You don't do this. And you don't do a slash, so PHP is a little different. >> But now, if I rerun this program, PHP hello.php, now I actually get Hello World. And we'll see why this is valuable. One, it allows me to specify, super explicitly, this is code, execute this. And that's indeed what these special tags imply here. >> But it also means that if I just do something like I aim over here, that means that, literally, that will just be printed out without the need to actually call printf, or print, or any similar function. So we'll come back to that in just a moment. >> First, let's do this. Inside of the appliance, we have a directory called Vhosts, for virtual hosts, slash local host, slash public. So it's a bit verbose, but long story short, the appliance is designed not only to support C. It's also designed to support PHP. But it's also designed to be a web server, and a database server. And it's designed, and truly configured, to be reminiscent of any commercial web hosting company that you might pay $5 a month for, $100 a month for. Whatever the service is, it's configured to be very similar to a real world production server. >> And what that means is that running on the appliance is web server software. It happens to be called Apache. It's just free, and open source, and very popular. And we have configured Apache to know that if I visit a certain URL, with Chrome or any browser inside of the appliance, to look into this directory for the files that the user is requesting. >> In other words, let me go ahead and do this. Inside of my public directory, I'm going to go ahead and create a file called index.html. That gives me the tab here. And I'm going to go very quickly and go ahead and *** out this program here. Doctype HTML, which for now, just assume you have to type. It's just an arcane tag, that's not truly an HTML tag, that specifies that here comes some HTML. >> I'm going to go ahead and recreate what we saw a moment ago. Here's the head of the page. Inside of the head was the-- so title. So we'll say hello, world. And then down here was the body tag. Let me close the body tag. And then in here I'll also say, just for clarity, hello world. >> So this is, arguably, the simplest possible web page you can make that's valid. It's syntactically valid. Everything that's opened is closed. Everything's nicely in styled and indented. So let's see now how I can access this file. >> Well, let me go to Chrome here. And let me go to http://localhost/index.html. So what's local host? Well, most any computer in the world, Linux, Mac OS, Windows, has a nickname called local host. So if you ever want to talk to your own computer-- albeit, oddly reflexively-- you call yourself local host. No matter what your actual computer is called, whether it's David's MacBook Air, or something more verbose like that. >> So this URL is apparently going to use the HTTP to talk to the local host, the same computer, the appliance, and it's going to ask for, just take a guess, what file? Index.html. So the appliance has been configured in advance to know that if I'm asking for something like index.html, look for in a folder called Vhosts, in a folder called localhost, in a folder therein called public. That's where all of my public files are going to be. So I'm now going to hit Enter. >> And damn, there is that forbidden message, otherwise known as 403, the numeric code for it. So what's wrong here? Well, it's not enough to just put the file inside of my folder. I need to actually do the following. >> Let me go into my Vhosts directory, into localhost, into public, and let me do ls dash l. And there's a few other things in here for today's purposes. But notice on the left hand side, next to index.html, we only see one RW. And in the past, what has RW stood for? >> Just read or write. The fact that it says rw on the left means I, the owner of this file, can read or write it. But I need to let all people in the world read this, though not write it. So I'm going to change the mode of the file, chmod, all plus r to give everyone read permission on the file called index.html. >> And if I now retype ls dash l, notice that, over here, some more R's have popped up. And for now, the spec goes into more detail. For P set 7, that just means everyone can now read this file. If I go back to my browser now and reload, voila. Hello world. >> And I can even open my Chrome tools and see, just like with Google and Facebook that there's my HTML, formatted a little differently and colorized. If I go to the network tab and reload the page, notice that there is the get request that Chrome is sending to the appliance. There's the 200 for that particular file. So in short, this is how all these various pieces are coming together. It just so happens that the web server we're using right now isn't remote, like Facebook. It's literally on the same computer, which is perfectly OK. >> So what more can we do in a web page? Well, just, let's breeze through a couple of these things. But let me go ahead and reopen Gedit with index.html. And let me go ahead and say hello CS50, save this file, go back to the browser, really underwhelming change. >> But what if we want to actually link to something now? So it turns out that we can have the links in HTML that are just tags themselves. It happens to be called the anchor tag. a href equals https://www.cs50.net, www.cs50.net close quote, close bracket. And now let's see what else comes next. >> I've opened the tag. I now need to give it a phrase like CS50. Let me close the tag. And notice a few things. Even though there's this cryptic thing here, I have not repeated it when you close the tag. You just close the tag with its name alone. And this is what's known as an attribute with a value. Attributes just modify the behavior of some tag inside of a page. >> So this is specifying that the hyper reference, the fancy way of saying the URL for this anchor, for this link, should be CS50.net. And the text that we want to show the user isn't that raw URL, but rather the word CS50. >> So if now I reload, let me zoom in for clarity, let me reload the page, notice that we have this old school blue underlined link. And if I hover over it, and it's going to be tough to see, in the bottom left hand corner of the screen, notice that it says the URL to which I'm going to go. And if I click there, voila, now I'm making web pages. And we've led ourselves to the home page. >> But notice what potential this offers us. Security is very much in vogue these days. What if I instead say something like this, and I instead go to, say, let's see, fakeCS50.net. Reload this page. >> OK, so notice it still looks like I'm going to CS50, unless an astute eye will notice I'm going to fake CS50. I'm guessing this domain is not taken. OK, so it's not available. So that's good. No one actually has that domain. >> But let's be a little more malicious because that's kind of stupid. What if we change this to Paypal. And what if we call this, like, www.paypal.badguy.com, whatever the domain is. That probably exists. So now let me reload the page. And here we have sort of a phishing attack, P-H-I-S-H-I-N-G, which is the silly word given for an attack that tries to fish information, or, better yet, money, out of people by tricking them into providing information that they might not otherwise do. This looks totally legit, right? I must have a link here to Paypal.com. In fairness, if I sexed it up with some graphics, we can make it look more like PayPal. Right? Because I could, as an aside, I could go to Paypal.com. And we've just seen how I can see all of their HTML. I could just copy it and recreate the aesthetics of Paypal rather than go old school here. But notice, of course, and it's a little small still, only in the bottom left hand corner, in like a 10 point font, do you see what URL you're actually going to be led to. >> And so if you've ever gotten spam saying go ahead, and you're account has been compromised. Please click this link and let us know your password so we can ensure you're you, don't ever do that. These things should go without saying. But it's wonderfully amusing, and tragic, how every year this seems to happen to some non-zero number of people. >> And that's the beauty of phishing attacks. You can send out a million emails. And even if 0.01% of people actually click on Paypal and give you your password, that's still a non-zero number of people who've just giving you their money. And sending emails, of course, is quite easy and, essentially, free these days. >> So long story short, wonderfully beautiful idea, right? Years ago, this was the earliest web, enabling a web of hyperlinks among resources. But so quickly could it be used for ill purposes. And email, suffice it to say, these days, have HTML embedded inside. >> Well, let me just one other thing. And we'll defer largely to section in problem set seven to allow you to explore the particulars. But let me go ahead and do a few things here. I'm going to go in and declare what's called a div, or division, of the page. Let me close that div tag. >> And I'm going to say up here top of page. And then below this, I'm going to do something like another div, close this tag, and do bottom of page. And let's save it. >> So now let's go back to my file. Very underwhelming. But what division is used for, underneath the hood, is it's actually a nice structural element. It doesn't have any aesthetics so far as we can see, other than, apparently, putting things on new lines. >> But notice, as an aside, just hitting Enter does not cut it in HTML like it does in C. You might think that that's going to put a nice big gap between the top and bottom of the page. But it's ignored. White space is essentially ignored in web pages other than the very first space bar character, or carriage return, that you hit on the keyboard. If you want more line breaks, you have to specify it yourself. >> So I'm going to do a few things here to show what's going on. I'm going to add an attribute that exists And again, the way you learn what attributes exist, what tags exist, really, is online references. HTML is the sort of language-- it's not a programming language. It's a markup language-- that after a good half hour, maybe, an hour with it, you'll certainly grasp, most likely, the basic idea. And then a Google search away is all the possible tags that you might be interested in. And per the spec, that is quite welcome and encouraged here. >> So now let me go ahead and do something like this. Background-color. And now, I'm going to do something like red, semicolon. And you can do this in a few different ways. I'm just kind of typing it as super explicitly as possible. >> But it turns out that this value here is what's called CSS, Cascading Style Sheets, which is another language altogether. CSS has nothing to do with open tags and close tags. It has to do with properties. >> And properties are simply key value pairs, which just means some word, colon, and then some other word. And if you have multiple ones, or just one here, you can end it with a semicolon, just for clarity. But that, too, will work here. >> Now what's this going to do? You can probably guess. Let me go ahead and reload this page. And now it's really coming along. So top of my page is red. But what's key here is that, I mentioned earlier, that div gives you a division of the page. And that's indeed what it does. It essentially divides the page into a rectangle that you can then manipulate. >> And this notion of rectangles is kind of compelling in that, if you think of most any website, there's probably some structure to it. Most of you have probably rarely seen Facebook's homepage if you're logged in all the time. >> But on Facebook's home page, there's some kind of div along the top. And it might not be as simple as one div, but there's a rectangular region there. The rest of the page is like a huge div, like a much bigger rectangular region. So long story short, just by having these little building blocks, the ability to model things as rectangles, whether wide or narrow, you can also make columns potentially, allows you to lay out pages, really, however you would like. We're really just scratching the surface here. >> Indeed, if I do one other one, let me go ahead and do style, background-color, we'll do something like blue, close quotes. Let's reload this. So now it's getting even uglier. But now I can kind of show off my P set five skills, right? Red. It reminds me of RGB, Red Green Blue triples. Well, it turns out in web programming, or web design, which is this, we've not yet programmed anything per se, you can actually have hexadecimal code. So something something, something something, something something. So you can have six hexadecimal characters, or three, in some cases, and each of those question marks has to be a hexadecimal digits, zero through f. >> If I want to have a lot of red, and no green, and no blue, what's the opposite of zero when using hex? It's f. So I can do ff, zero zero, zero zero, save this, and now come down here. And I don't actually see a change. So quote unquote "red" is apparently synonymous for all red, no green, no blue. Meanwhile, let's deliberately change this one to be something random, like ABCDF. >> Let's see what that is. It's a really nice blue, actually, baby blue. All right, so these are just now somewhat random combinations of characters. So we won't get bogged down in here. But again, this speaks to the precision that you can begin to apply-- even if you're very overwhelmed by the aesthetics. In fact, if you really want to be impressed, let me go ahead and change the font size, for instance. And notice the semicolon, which is necessary there. >> Font size, we can be just ridiculous here, 96 point. Save that. Wow, that's a big font size. All right, so it's very easy. And actually, you're essentially seeing the very first web page I made years ago, when I first learned this stuff. It's very easy to make very hideous things quickly. >> And if you're familiar with the Wayback Machine on archive.org, you can find all my hideous undergrad web pages. One had Kermit the Frog on the front. I went through a phase where I thought it was cool to take the background of a red curtain, when I learned how you can tile images again, and again, and again, to fill a page with a big tacky red curtain. And then, on top of this, was an icon that you had to click to enter my home page because that was very much in vogue. >> And then my first program I ever wrote wasn't in PHP, but in a language called Pearl, wrote a guest book, which is a really cool thing that a lot of people expect you to have on a home page. When you get to the page, they want you to sign in, and say who you are, and why you're there. This is very 1990s style web design. >> But these days, surely, we've come a lot farther. And you'll see, in section, and even in the problem set seven, by leveraging libraries these days, it's so much easier to make prettier things quickly. Really here, we're just scratching the surface of what you can do stylistically. >> And in fact, already, let me emphasize that this is already getting ugly, not just aesthetically, but in terms of style of my code, or the design of my code. I have currently comingled HTML, which is the greenish open tags there, with CSS properties, which is totally legit. This is really where the language had its origins. >> But in the interest of clean design, much like we started factoring stuff out from C files into .h files, let me actually practice that kind of principle and start doing this instead. Let me put a style tag up here, which also exists in HTML, and let me specify the following. Let me delete this. Background color is going to be red. I'm going to delete this entirely. I'm going to get rid of the style attribute, and I'm going to uniquely identify this div with a word-- arbitrarily, but reasonably, quote unquote "top." And id is a special attribute that uniquely defines a certain HTML element as having that id. >> If I now want to stylized it, up here in the head of my page, inside of the style tag, notice that I can do hash top. And then I can put a couple of curly braces, reminiscent of C, and then let me paste in that stylization. And let me go ahead here and anticipate where I'm going with this. Let me also create one for the bottom div. Let me grab this hideous code from down here, put it in here, and I'll be a little more *** now and stylized it by just putting things on their own line, ending with semicolons. Let me get rid of the style tag. >> But I'm not done yet. I need to do one other thing. Yeah, id equals quote unquote, "bottom," or whatever id I want to give that element. Now, let me go back over here. And this is atrocious. I can't deal with 96 point. Let's do 24 point. Or you could be more precise. You can actually use pixels, px, so that you really get finer grain control over your page. >> As an aside, that's not necessarily the best thing if users, for accessibility reasons, want to be able to increase sizes. So realize that there are ways of doing things that don't necessarily hard code everything. >> All right, so it's bigger, 24 point, than whatever the default is. But now it's a little cleaner. And let me take this one step further. Just like the idea of header files, notice we're one step closer to that. I have factored out, but still left, inside of my page, those CSS rules. Why might I want to take this one step further, remove this altogether, and put it in a separate file? >> So I can reuse it, right? This is just kind of intuition right now. Before, I claimed that it was just getting ugly having the style attributes inside of the divs themselves. But just kind of think that through. As your page gets longer and longer, if you're putting here, and here, and here, and here, all of these different colors, and font sizes, and other such attributes, your page is very quickly going to become unmanageable for you. >> If someone comes up to you and says, oh, you know what? I'd really like to change the font size by two additional points, you might have to go and find and replace a huge number of lines of code. It's much more compelling to centralize all such aesthetics here. But if you'd like to reuse those aesthetics in multiple web pages, all the more compelling to, for instance, create a file called with those contents. >> And let me do this. Save this file. I say styles.css, arbitrary, but conventional. I'll put it in John Harvard's home directory now for simplicity. And what I can do in my web page is get rid of the style tag altogether, and somewhat unintuitively, use a link tag, which does not give you a link in the hyperlink, clickable sense, but where I say link, href equals styles.css. And the relationship that this element has with the web page is to serve as its style sheet. >> So how did I know this? One, you just read the manual, or you Google around, and you look at various resources. I mean, that truly is how you pick up techniques like this, and, consistent with this idea of teaching oneself new languages, again, you'll find that there's only a finite number of things to any language that, once you get them, you'll find that it gets faster and faster to write. Indeed, learning a new programming language is so much faster than a new spoken language because these things are much smaller and much more precisely defined. >> But I've highlighted a bit of an anomaly here. Why have I highlighted this forward slash here? Because I have to close the tag. I should close the tag. And you'll find innumerable resources online that don't necessarily close tags. And realistically, it's not strictly necessary for technical and there are reasons of reality, browsers are just fairly tolerant of mistakes in web pages, for better or for worse, but mostly worse. >> So this here is just a cleaner way of saying something stupid like this, where if you want to open the link tag but close it, there's really no notion of content for a link tag. It just means load this file and put it here. It's like sharp include in C. You can open and close a tag all at once within the same tag. And there's other examples of this. This is not the way to do this, but the br tag, for line breaks, if I really wanted to achieve what I was trying to before by hitting Enter, if I explicitly say line break, line break, line break, line break, and then reload this page, now you'll notice that bottom of the page is, indeed, much farther down in the bottom of the page. But even that can be done much more cleanly with CSS, and with margins, and with other such aesthetic techniques. >> So for now, the takeaways are this. In HTML, we have these things called tags. In CSS, we have these things called properties. We can comingle these two languages, either by using the style attribute, or the style tag, or best yet, factoring it out altogether, as we do in problem set 7. Questions, then, about the conceptual basics here? >> AUDIENCE: I have a question. >> SPEAKER 1: Oh, sorry. >> AUDIENCE: Why wasn't it colored-- >> SPEAKER 1: Oh, in the other tab? This here? >> AUDIENCE: No, it's like the-- >> SPEAKER 1: Oh, that's because I was being sloppy. I put the file in the wrong place. So if I actually put it here, and I chmod it, all + r for styles.css, and now reload the page, now we get the stylization back. And because the font sizes are different, we don't see quite as much white space. We instead see what's the default is instead. Good question. Yes? >> AUDIENCE: Why is the link tag inside the header? >> SPEAKER 1: Why is the links tag inside of the header-- short answer, just because. That is what was decided. That's where the link tags go when you have what's called an external style sheet. Other questions? >> All right, well let's do this. We have so much fun ahead of us today. That's just scratching the surface of CSS. Let's do this. Let's take a five minute break here because, per my email, let's hang in there till 2:30-ish today. But if you do have to leave, that's fine. But we'll forge ahead after a five minute break. And we'll learn a little something about PHP, MySQL, and more. >> All right, so let's try, now, to tie a few of these ideas together and make, say, our own search engine. I noticed, rather curiously, the following. When you are at Google.com, you're typically at a URL like this one here with nothing after the dot com. But if I search something stupid like cats, and hit Enter, we'll get-- not stupid, but you know. >> OK, so notice, at the top of the page, now, the URL has, of course, changed. And this is not anything new to any of us. You click links and stuff happens on the web. But what's interesting here is the following. There's a whole lot of clutter, but let me throw away stuff that I don't quite understand or doesn't really look relevant. >> Let me get rid of this. Let me get rid of this. And let me just get rid of all of this. And now notice that cats is in the URL, followed with a q, then an equal sign in front of it. So it turns out this is how the way it works when it comes to input and output. >> We've long talked about black boxes, right? So if this is a function implemented here as a black box, it takes input and produces output, well, the means by which you provide input to a website is by way, often, of its URLs. You simply put a question mark and then a key equals value. And then maybe an ampersand, and then another key equals value, then maybe another ampersand, key equals value. That's how you pass in keys and values, pairs of inputs. >> So if I hit Enter now, what's interesting about Google is that all that clutter I deleted doesn't appear to be strictly necessary. All I need to send to Google is question mark q equals cats to get back some cats. Well, the implication of that, then, is if I pull up gedit, I've started making my own search engine here in a file called seach0.html. >> And let me go ahead and delete one more line that you weren't supposed to see. And now, let me go into my own browser, so not to Google, and go to http://localhost. And that's going to get in the way. So we're going to have to say goodbye to that for now, move this over here, oh, now we're going to have to say goodbye to that file. >> Whenever you have a file called index.html or index.php in a directory, if the web server is configured in this way, what you'll see, by default, is the contents of that file rather than a listing of the directory, as I wanted here. More on this in the spec. You didn't see that. >> So this is what I actually wanted. But a moment ago, there was a file in this folder called index.html and index.php. And so the web server was showing me those files. Instead, I want this directory listing here. >> So I'm going to go into CSS and go to search0. And I claim that this is it going to be the beginning of my own competitive search engine. And to do this, I'm going to go in here, into CSS, and open up with gedit, search 0. But unfortunately, there's not much going on here. All I did was use a heading tag, which happens to be called h1, which essentially means big and bold, and that's it. But the means by which we can provide inputs are via these things called forms. >> So let me go ahead and open and close, preemptively, a form tag there. And let me go ahead and do something like this. Input, type equals text. And then let's close the tag within the brackets themselves. I don't need to start a text field and stop a text field. It's just going to be there or not. >> And then below that, let's do input type equals submit. Save this. And now let's just do a quick sanity check. Let's reload. >> OK, so it's not bad. It's not Google's style, but it's pretty close. There's a text field. I can type some stuff in, hit Enter, but nothing happens yet. And that's because I haven't specified an action for this form, so to speak. So if I go back to the form element, it turns out, and I know this only from having read the documentation, that the form tag takes an attribute called action that is the URL of the website to which you want to send the form. >> I don't really think we have time to implement the whole back end for a search engine today. So we're just going to say, eh, go to google.com/search. And now let me close my quotes. And let me further specify that the method to use is going to be called get. >> Long story short, there's two ways, at least, that you can submit information from browser to server. One is get, and, for today's purposes, that just means in the URL. You see exactly the question marks, the equals signs, and ampersands that we saw earlier. Or there's an alternative called post. For now, know that post is often used when you want to upload files, like images and so forth, or when you want to submit credit card information, or passwords, anything that it doesn't really make sense, conceptually, or security wise, to end up in the URL of your browser, where snooping parents, or roommates, or anyone with access to your computer might see. >> So let's save that here. And I need to do one other thing. It doesn't suffice just to say give me a text field. I have to give that field's value a name. So let me borrow Google's choice of names, q, and specify that second attribute I don't really care about the name of the Submit button. All I care about is submitting what the user types in. >> And now this is kind of ugly. It just says submit. It turns out, and I know this from the documentation, I can actually say value equals quote unquote "cs50 seach," close quote. Then let's reload again. So I keep hitting Command-R, or Control-R on my keyboard to reload. >> Now we have a more interesting search engine. It doesn't quite look like Google yet, though. So let's go ahead in here and do a little line break. >> OK, so now we have Google. We actually almost do have Google. So now what's going to happen? I'm going to type in something like Cats. And the browser is going to parse that form that I defined. And it's going to send the user to that URL. So this time, for some curious reason, I got more information about stocks than about actual cats. But that's fine because notice we still ended up here, q equals cats. >> So long story short, it seems fairly trivial to get input from the user. And to be fair, there's bunches of other types of form fields. There's check boxes, and little mutually exclusive radio buttons, and drop down menus, and more. But all of those are as relatively easily implemented as this text field was. And ultimately, we just have to make sure someone is listening on the other end of the line in order to get that information processed, somehow, and give us back our cats. >> Let's look at a slightly more involved example. Let me go into my Vhost's directory, into local host, public, and where I put today's source code. All of this will be on the course's website for you to tinker with. And if I go into froshims, let me open up this file now, froshim0.php. This one's a little more verbose, so we won't write this from scratch. But just notice now a few somewhat familiar characteristics. >> One, form tag, different action. It's not a full URL. Now, it's apparently to file called register0.php because, in a moment, I'm going to teach myself a little something about PHP, a programming language, because PHP can be used to implement what Google implemented as the back end of their search engines. >> Google, in reality, probably uses some Python, some C++, and bunches of other languages. But we could certainly implement search results using PHP if we wanted. But for now, we'll keep it simple. And this is actually reminiscent of one of the other very first websites I made years ago. >> Back in my day, you registered for intramural sports as a freshman by filling out a piece of paper, walking across the yard, and dropping it in the mailbox of a Proctor in Wigglesworth, and that was how you registered. And so my project shortly after CS50, was to put that, which makes perfect sense, onto the web, which wasn't as in vogue then as it is now. But all we had to do was create, essentially, an HTML form. >> And that form looked roughly like this. I had an input for the freshman's name. I had another check box for whether or or not they wanted to be captain, what their gender was, and what their dorm was. And then I hard coded in things like Apley Court, and Canaday, Grays, and so forth. >> So again, new tags. Haven't seen these before, new attributes, but fairly accessible. Once you see an example, you can kind of borrow that idea and make a drop down menu for most anything. But what's key is that each of these things have names. And at the bottom of this form, there's a submit button whose label, or value, is register. >> So let's go to this page. Let me go back into the directory listing. Let me go into froshims, and go to froshim0.php. So it's hideous, to be fair. So I could definitely stylize this with some CSS, I could make some graphics, maybe add some colors, and make this prettier. But functionally, I'd argue that this is actually pretty complete. >> Unfortunately, when I fill this out, David, Captain, Male, we'll choose, let's say Matthews, Register, all that happens is this. But notice a couple of takeaways. One, what file returned those results, apparently? So it is, indeed, register0.php. So the fact that we saw that action value a moment ago for register0, this corroborates that we indeed ended up at that particular file. >> Now this is just ugly text. But notice that this text is coming from local host, which is from the appliance. Think of the appliance now as just a web server that could be in the Science Center. It could be on the actual web. So it's publicly accessible. >> So clearly, there's some way of passing form field inputs to a server so that it can do something with them. Unfortunately, register0 is pretty stupid. All it does is print out an array that looks like this. And it's not an array in the sense that we know it. Turns out that PHP, and a lot of languages, have not only numerically indexed arrays whose first index is zero, then one, then two, then dot, dot, dot, n minus 1. >> This is what's called an associative array. An associative array is one in which you can store key value pairs where the key is not necessarily a number. It could in fact be a string, a word. And so this can be implemented, underneath the hood, it turns out, using a data structure known as a? Thought something dramatic was about to happen-- hash table. >> So a hash table, recall, those of you who did it for P set 6, or even recall it, at least even if you did a try, a hash table, in our usage, was used to just store words. But really, you were storing keys and values. If you implemented a hash table for P set 6 dictionary, the keys were the words themselves, and the values were effectively true or false. Yes, here, or implicitly, no, not here. >> Well, we can generalize that idea. And we could use a very similar data structure to store not the string itself alone in your hash table, but suppose that in every one of your hash table's nodes. And you could even do this in a try rather than just have a bool. You could have something else. What if the key was not maxwell, for instance, but quote unquote "name," or quote unquote "captain." And inside of your C data structure, you put a value, not just a Boolean, but of value like quote unquote "David," or "M," or "Matthews," and so forth. >> So those same data structures we used apparently exist in other languages. And I'd argue they're actually much, much simpler to access here. Let's in fact take a look now at some such syntax. >> I'm going to go into a PHP directory. And I'm going to open up a better version of hello-0 from before. Notice that all I did was add some comments. So we can get rid of that distraction. >> And this program does indeed prints hello because I've specified between tags that I want to execute that code. Now, we'll see in a moment why this is useful. But let's open one other example here. Let me go ahead and open up say, gedit of conditions one. >> This is way back in time now. But weeks ago, I think, in week one or week two, we had an example called conditions1.c. And I decided to reimplement it in PHP, just to kind of emphasize that PHP, syntactically, is almost identical to C. This isn't a huge leap from last week to this. >> Notice at the top of this program, which begins, as before, with some comments, which I'll get rid of as a distraction. Notice that I'm in PHP mode in this file. So this code, we'll see, will get executed. Notice that there's readline, which is probably the analog in PHP of getstring. Notice it's a little different. You actually specify a prompt to the function called read line, and that's what the user sees. So you don't have to printf manually. But that's not a big deal. I'm going to store, inside of $n, the return value of this, so whatever the user types in is their int. And here's another curiosity. It turns out, in PHP, any variable just has to be prefixed with a dollar sign. It's a little annoying. But notice what I haven't done in PHP. What's missing from the left hand side of the equals sign? >> No mention of type. So this is different from C. For better or for worse, PHP is a loosely typed language. It does have numbers. It does have strings. It does have Booleans. And it does have a few other data types. But you, the programmer, usually don't have to care about them. The upside of this is that it makes it a little easier to program. You can think a little less. The downside is it also opens you up to potential bugs if you accidentally treat a number as a string, a string as a number, potentially, but even then, PHP, and a lot of languages, are pretty tolerant. They will use what's called implicit casting. And if you try to use n in the context of a numeric situation, it will convert what here is going to be a string, because if the user types something in, and you get the result, as with readline, or get string, that's going to return a string. >> But notice, a couple lines later, I check if n is greater than zero. So PHP is going to implicitly cast my "string" 123, or whatever the user types in, into an int. So in short, stuff just works a lot more intuitively. So we now begin to relax a few of the things that we've done in the past. >> A lot of this stuff is the same, though. Still have equals equals. As an aside PHP also has equals equals equals, but more on that, perhaps, in the future. That was a. Typo but two equals signs means the same thing as before, for comparison. printf means the same thing as before. Backslash n means the same thing as before. >> So how do I run this program? Well, as before, if I do PHP, conditions1.php, and type in a number like 123. That's a positive number. If I type in 0, I pick 0. And if I type in negative 123, I get back a negative number, which is only to say, syntactically, PHP is super, super similar. >> So why is this now useful in a web context? Well, let's go back to this froshims example, which looked, again, like this here. And let's actually pull up the web page again, which looked like this. What can we do with the data that's submitted? >> Well, let me open up a newer version of this. And you'll see that the problem sets specification walks you through a few of these. Rather than start with zero, let's look at froshims3, which does a bit more. >> Notice first, actually, let's open up what 0 was, so you see what register 0 was. Notice what register 0 did. One, I have comments at the top. Delete those and focus only on this. Most of the contents of register0.php are, obviously, what language? Just raw PHP. >> So notice, this file does not start with, at the moment, open bracket, question mark, PHP. PHP does allow you to intermingle PHP code with HTML tags. But I've done that here inside of the page over here. >> Now, again, you'd only know this from having looked at the manual. print_r, it turns out, is print_recursive. _recursive And this is just a handy utility function that just prints out, recursively, whatever you hand it. If you hand it an array, it'll print an array. If you hand it a number, it'll print a number. Hand it a string, it'll print a string. If you hand it a hash table, it will print out a hash table. You don't have to write all of that code yourself. >> Now notice that I'm entering PHP mode over here. I'm exiting PHP mode over here. So when the web server reads this file top to bottom, left to right, because it ends in a filename called .php, whatever's not inside of PHP tags is just going to be spit out, like raw HTML. No big deal. But as soon as the web server notices this, it's going to say, I should not spit out, literally, print_r of post. I should execute the following line of code. >> So the last question, then, of this file is, well, what the heck is this? Take a guess. What is $_POST, probably? >> AUDIENCE: [INAUDIBLE] >> SPEAKER 1: Yeah, the posted data. Recall, let's scroll back in time for just a moment. froshim0, again, looked like this. A super majority of this is just HTML. Again, some tags you haven't seen yet, or with which you are already familiar. But the interesting thing was this. This one line is what really links it to our register0.php file. I'm submitting via method post. And that means that the parameters the user types in are not going to end up where. >> They're not going to show up in the URL. They are still going to be sent from the client, from the browser, to the server, but just via some other mechanism that we'll waive our hands at for today, but it's not in the URL. But notice the relationship now with post, which, by convention, is lowercase here. >> But if I open up register0.php, I'm apparently printing this. So this is kind of a weird naming convention. But what's nice in PHP is that when using PHP in a web context, not at a command line like I did a moment ago, when you're actually using it in a web page, in a Vhost directory as we are, automatically will PHP fill this thing, which is an associative array, so to speak, a hash table, with everything the user typed in. >> In short, $_POST in all caps is a global variable that PHP just magically creates for you when using PHP in a web context. And it puts inside of it all of the names of parameters in the form that was submitted to this file and all of the values that the user typed in. So it hands to you what the user typed in to that form. >> So before, we got really stupid output of just seeing this because all I did was recursively print this array. The key is name, the value is David. The key is Captain. The value is on. And the double arrow and the angle bracket there, this is just arbitrary. This is not code. This is just PHP's way of showing you what the value of some key is. >> But now let me propose that in froshIMs3, it's almost identical except it submits to this file. And again, we're going to kind of just glance at this, just to see some syntax, but notice what this file does. Take a guess just based on the lines of code, which probably do look like Greek, to some extent, is apparently doing. >> This file is somehow related to mail, email. So what is this program doing? In this version, if I were to actually fill out this form-- and let me go to froshIMs3, not froshIMs0-- the form looks the same. David, captain, male, dorm, Matthews. But if I submit this, this file is going to go to register3.php. >> And I claim, by looking at it's source code, it's going to somehow involve email. Let me go ahead and open this up in a bigger window, so we can see it more cleanly. We're in Vhosts, local host, public, froshims. I'm going to open up a different program, just so we can see more at once. >> So now here, notice a few things. At the top of the file is open bracket, question mark, PHP. Then there's a bunch of comments, which we can ignore, is uninteresting for now. >> Now there's this. It turns out PHP has a lot of code called require. It's very similar in spirit to C's include, hash include, which essentially grabs the contents of some other file and just plops them here, so you can use them. In this case, the appliance has, pre-installed, a library, free and open source library called PHP mailer that anyone can download from the internet. We just did it for you. And this means I now have email functionality at my disposal. >> Now, notice a few things. I'm going to validate the form's submission. Turns out PHP, one, has exclamation points for the not operator, just like C. But PHP also has a function called empty. >> Empty just returns true if the value of the thing you hand it in parentheses is empty, like the user didn't type anything in. So this is saying, and notice the syntax, very reminiscent of C, if the name key, so the name field in the form, which was submitted via post, by the user, is not to empty, and their gender is not empty in the form as well, and their dorm is not empty-- but notice I don't care about Captain, then what are we going to do? >> I'm going to execute this line of code. And you can think of this kind of like malloc, but it's a little fancier than that. But for now this gives me a special struct of type PHP mailer. But ignore the keyword new for today. >> Now I'm going to call a function called IsSMTP, which says, use SMTP. This is port 25, just like the video last week, when the thing was throwing emails into the firewall. Port 25 is SMTP. SMTP means use the mail server. Which one, we can use Harvard's SMTP.fas.harvard.edu. >> We can set the from address to be John Harvard's. If I scroll down further, I can set the recipient address, just arbitrarily, to be John Harvard's as well. So he's going to be emailing himself. >> Now I can set the subject to be registration. And I can set the body of email as follows. This line looks a little more cryptic, but that's just because there's a lot of information in it. One, there's a dot operator. Someone must know already what the dot operator does. It's concatenation. So if you want to take a string in PHP, and append it, or prepend it, to another string in PHP, thank God you don't have to use strcopy and malloc, and all of that anymore. >> If you want to concatenate two strings, who cares about the memory. Let PHP figure that out for you. What PHP will do with the dot operator here is just make a big sentence out of this line, this line, this line, this line. And now notice, it's going to be plugging in values. So the email that John Harvard's going to receive is literally going to say name, colon, something, rather, then we close the string and concatenate on whatever the user typed in, then a new line. >> Then, on the next line of John Harvard's email, it's going to say Captain, On or Nothing. It's going to say gender, male or female. Dorm is going to be Matthews in my case. And then notice familiar semicolon at the very end. And then, down here, notice, somewhat cryptic still, but again, following a pattern that will become more familiar after P set 7, if sending the mail returns false, then go ahead and die. >> So PHP has a function called die, which, literally, just kills the website and just prints out whatever you tell it-- its is dying words, so to speak. And that, in the case, it will print out what the error info is for whatever happened to go wrong. So long story short here, what we have is an example where when the user submits the form, froshim0, froshims3.php, it goes to register3.php. But register3.php then proceeds to execute all of these lines. >> So there's a few take aways here. One, it's apparently fairly easy, programmatically, to send emails, which is good. When users register for your site, in this case, when they register for your sport, you can email the freshman Proctor, or John Harvard, in this case. >> But it also means you can do what? Send emails from anyone to anyone. And this is very true. This is not as easily done if you're used to using Gmail. But if you've ever used Eudora or Outlook, you can pretty much tell a mail server that you are anyone you want. And this is where I need to put on that hat and say, don't do this. But this is testament to just how easy it is to perform phishing attacks, and send anonymous emails, and spam, more generally. And it really boils down to the fact that all you need is some programmatic access. >> As an aside, my closest encounter with the ad board, my own freshman year, was when I discovered this cool trick that, wow, you can send emails from anyone. And so we were having some stupid argument, literally, in Matthews, among my Proctor group. I don't even remember what the issue was. But I wanted to try to put an end to this stupid debate. >> So I decided I will just send an email to my Proctor group, pretending to be the other guy, with whose opinion I disagreed, and have him acquiesce to whatever my opinion was in this particular debate. And so I forged this email using a technique similar in spirit to this. But it was actually easier at the time. Hit send. He was not pleased, nor would have been the ad board. >> And I was very quickly caught within seconds because, as you know, I sign my emails in a certain way. And though I do it manually, in large part, 15 years later because I was traumatized by that. I don't have a signature on my email now. But in 1995, I just had a sig, a signature in my email. So there was this note saying, Dear Proctor group, I acquiesce my opinion and agree with David, signed so and so, new line, new line, DJM. >> So don't do that or, in general, take advantage of this technique. But when making a website, like for your final project, when making a website for something entrepreneurial, this is how, pragmatically, you can leverage other services on the internet like mail and then actually send things using code. >> So how can we improve upon this? Well, first let's take a quick tour of some of the things that you'll see, and then take a look at a couple of examples. So one, to reassure, because we're flying through PHP. And I know, at some point, you'll have to actually start writing this if you haven't already. Realize that, one, main is kind of out the window with PHP. If you want to write code that gets executed, you just start writing it in a file called .php so long as you have the open bracket question mark PHP tag. >> But notice these are conditions in php. Notice, this is the exact same slide we had in week one when we had conditions in C. Conditions in PHP are structurally and syntactically the same. Only real difference is if you've got variables involved, you have those dollar signs. >> Meanwhile, Boolean expressions look just like this for or-ing or and-ing together. Switches look exactly the same. What's nice in PHP, whereas in C, switches have to be cases on primitives like ints or chars, in PHP your case statements can actually be on a whole strings, which is actually kind of nice. Saves you some time. Couldn't do that in C. >> Here's a for loop in PHP. It's identical. Might have some dollar signs for the variables. You don't have to mention that something is an int. You just declare it with a dollar sign and the name of the variable. But a for loop is the same. A while loop is the same. A do while loop is the same. >> This is a little different. So with PHP, with an array, you can statically declare an array, as in C, but you use square brackets. In C, you would use curly braces, if you even knew that. But this is actually very common in PHP to declare an array, in this case, of numbers, and call the variable numbers. >> Variables themselves look like this. Here is a string, quote unquote "hello world." You could have a backslash n. I simply don't in this case. >> Now this is an interesting construct. C does not have this. But this is super helpful. And you'll see this in P set 7 spec-- a for each construct. If you want to reiterate over all of the elements an array, you don't have to deal with $i and $n, and ++, and all that. You can literally say, in PHP, this-- for each numbers as number, so I'm assuming that $numbers is an array of numbers. And when I say for each numbers as number, this is going to automatically, as my loop executes, update, on each iteration, the value inside of dollar sign number-- again, and again, and again walking for me over that array. So it just saves us code. No semicolons, no ++'s, no i's, no n's, it's just nice. >> But PHP also has this. And this is super powerful. And you'll use this, hands on, in P set 7. And associative array is also declared with square brackets. But notice the syntax now. It's reminiscent of what we saw with print_r a moment ago. How many keys, as a little sanity check, does this array seem to have. >> So it has two. And I call this an array. But if it helps, you can think of this as hash table, or as an associative array. But it is just a different type of array. And again, different languages have these. We'll see something similar in JavaScript as well. There's two keys. One is quote unquote, "symbol," one is quote unquote "price." And those keys each have a value. In this case symbol's value is FB, for Facebook, and price's value is 49, 26, which was Facebook's stock price as of this morning. >> So what is useful about an associative array. I could have had a numerically indexed array with just simple square brackets. And I could have had dollar sign quote equals just this. Let me actually do it. Suppose I instead just declared this array like that. That is perfectly valid, syntactically. It doesn't lose any information, per se. I still see that the symbol is fb, and that the price is 49, 26. So why are associative arrays compelling? >> AUDIENCE: You don't have to remember where you put stuff. >> SPEAKER 1: Exactly, you don't have to remember where you put stuff. You don't have to arbitrarily remember that stock symbol is in bracket zero, and stock prices is in bracket one, which is particularly dangerous if you change things, eventually. It's much nicer to associate what we'll call metadata with your actual data. I'd argue that what we really care about here is fb and 49, 26. The symbol and price is metadata that describes the data we actually care about. But this is just so much easier to access. >> Now, as an aside what's the price we pay? We've been doing this in CS50 for weeks. This feature must come at some cost. Memory. So you're not just storing a 32-bit integer, for instance. You're storing symbol/0, probably. So you're using more memory. >> And what's the performance of looking something up in an associative array, probably? It's probably slower. Random access is nice, especially when you can do binary search. But if you're actually now looking not for numbers, but for strings, this truly is implemented underneath the hood, probably as a hash table, where you use either a hash table with separate chaining. Or you use a try to actually store the values. So maybe you can do constant time, but you still have to look at S-Y-M-B-O-L, potentially, instead of just 32 bits to look something up. So again, those same ideas coming back to recur in this context. >> But again, PHP now has some super globals that, it turns out, are associative arrays. We saw one a moment ago, $_POST. And that super global has keys and values. Specifically, the keys line up with what? Where do the keys in $_POST come from? Just to recap? >> AUDIENCE: Name. >> SPEAKER 1: Name, where? >> AUDIENCE: [INAUDIBLE] >> SPEAKER 1: Name is the attribute. Well where, where did they originally come from? The form. So if an HTML page has a form tag, inside of which are some inputs, like check boxes, text boxes, drop down menus, each of which has a name, those names end up as keys in $_POST, and, frankly, for that matter, $_GET. If the method is get, same idea. It's just in a different super global. And the values, of course, come from whatever the user typed in at his or her browser. >> But there's a few others. There's cookie, which we'll come back to eventually. But those are the things that you know the web uses for some good or evil. But we'll come back to that. Server and session, and those two have some special utility. >> But let's take a look at this. Let me go ahead and open up an example called mvc0.php So MVC stands for the following. And we introduce this earlier than is typical, really, to get you designing Problem set 7, and also final projects, in sort of an industry standard way, and clean way. It's good design. >> So you're about to see, and you'll experience, in P set 7, paradigm, sort of a programming mindset, that looks a little something like this. M for Model, C for Controller, V for View. Long story short, MVC is just kind of a methodology, a way of making websites, in particular, whereby you put all of your, stupid phrase-- business logic-- all of your intellectual property in what's called a controller, a file like index.php, or we'll see, quote.php, or buy.php. >> In the context of Problem set 7, your models typically contain your data, anything related to a database, as we'll eventually see, and your views contain the aesthetics of your site, the HTML, the CSS. So we already saw this in C a little bit by using .h files. We really saw it a moment ago with CSS, by factoring the CSS stylization stuff out of our HTML. >> So MVC is really just about drawing lines in the sand and saying, the interesting programming code for your website belongs in what we'll call the controller. Stuff related to database typically ends up in a model. But you'll see, in Problem set 7, we merge C and M to keep it simple. But view is where all of your HTML and aesthetics typically go. >> So what does this mean in real terms? Well, let me go into our MVC directory as follows. And you'll see more of these toured through in the spec. So in mvc0, I claim that this is, like, version 0 of CS50's websites. >> All we have is some HTML, like a big h1 tag, apparently. And then a bulleted list. I've never seen a bulleted list before, but no big deal. Let's quickly look at the source code. Turns out an unordered list with bullets is open bracket ul with one or more list items, li. So notice here is an anchor tag. We saw that a moment ago. >> So this is how I implemented this page. I've got two links, two list items, one ul for unordered list, and the end result, aesthetically, is this very pretty website, version 0 here. But what's interesting now is how this is implemented underneath the hood. >> Let me go into gedit and open up this very first example to paint a picture. And we'll look at what's flawed, potentially, in here. Now if I go into localhost, public, MVC, notice a few files. I'm going to call these, for the moment, all controllers. But that's a bit of an abuse because you'll see everything's commingled inside of them. >> And let me go inside of index.php. And we see, literally, the same HTML. So even though this file ends in .php, It doesn't mean it has to have any PHP code. It can just be raw HTML, although that's kind of silly. But notice there's no open bracket PHP tag, except for this, which, frankly, is just there to serve as a comment. But that's functionally not even that interesting. >> But notice this. What's interesting now is what changes on this page. Let me click Lectures. And notice the URL is about to change. Now I'm at lectures.php. Let me click zero. Now I'm at week0.php And now let me open these files in gedit. Not just index, but let me open up lectures. And let me get rid of the comments to focus on this part only. >> And now let me open up just one more, week0.php, throw away the comments, just to clean this up. And now notice the following. Thinking really sort of carefully about design, and let's make it line up the same, what could be done better here, do you think? >> How did I make a week one? How about this. So this is how I made week one. I went up to File, New, Paste, Save, week1.php, and then I went in here. And I changed one-- what was this, one to Friday. I changed the zeros to one. I changed this to one. >> OK, so now look at my files. What could be done differently? Where's the opportunity, perhaps? So there's the opportunity to start factoring this stuff out. Let me open up, as a spoiler, for what you'll see in P set 7. If I open up, now, index.php in version five of this, it looks way more cryptic, admittedly. >> But this, now, is what I'll call a controller that's controlling the logic of my page. And you can kind of reconstruct, intuitively, perhaps, what's going on. On the first line, it's a little cryptic. But notice I'm requiring, like with sharp include, a file called helpers.php. And then I'm calling, apparently, a function, called render, passing in two arguments. >> One is quote unquote, header. And the other is, what kind of data type is this, based on our syntax earlier? It's an associated array. Specifically, it's passing in the title with some metadata that reminds me what it is and its value. Then I see a hard coded ul, so some raw HTML. But then I'm back in PHP mode calling a function render. So even if you've never used HTML or PHP before, and even though this looks scarier, why is this probably better design? What's better about it, based on inference? >> AUDIENCE: [INAUDIBLE] >> SPEAKER 1: Less redundant in that there's no more HTML tag, no more heads tag, no more body tag in every damn file. Instead, I've factored out the commonalities and presumably put them into a file somehow related to a header. And same thing for the close body tag, the close HTML tag. That's probably down here inside of the footer somewhere. And you'll see, in Problem set 7, a little tour through this. >> So what lies ahead? The one thing we haven't the ability yet for is to actually store data. And so what we'll start to see Wednesday, for instance, is that your old friend Excel, or numbers, allows you to store lots of data in rows and columns. Turns out you can do that in what's called a database, programmatically. manic And it turns out, after that, we'll be able to store things like this, which you'll see again in P set 7, a whole bunch of usernames and passwords, the latter of which are actually encrypted, much like they were in P set 2's hacker edition. And eventually, you'll implement this, your own eTrade-like website that implements collectively CS50 finance. >> Lastly, since you stayed here so late today, if you come back to this part of campus, at 4:00 PM today, we will give you not only advice, at the SCES Advising Fair, at 4:00 PM in the Maxwell-Dworkin, we'll give you some Americone Dream, Cherry Garcia, Chocolate Fudge Brownie, Chocolate Chip Cookie Dough, and, when you Google Chunky Monkey, you get this. So all of that awaits at 4:00 PM in Maxwell-Dworkin. See you on Wednesday as well. >> SPEAKER 2: At the next CS50, RJ sleeps in. >> RJ: My section! Ha! Oh,