1 00:00:00,506 --> 00:00:10,546 [ Silence ] 2 00:00:11,046 --> 00:00:14,626 >> Alright, welcome to the end of week 8 and to Halloween week. 3 00:00:14,676 --> 00:00:18,066 So a couple of announcements, there will be another lunch 4 00:00:18,116 --> 00:00:21,496 with David and TF, NCAs [ph] next week. 5 00:00:21,496 --> 00:00:24,266 So we have dinner on Wednesday at 6 pm in Mather. 6 00:00:24,266 --> 00:00:26,476 We will be joined by a couple of Computer Science faculty, 7 00:00:26,476 --> 00:00:28,926 who will be there just to chat up students, 8 00:00:28,926 --> 00:00:31,466 talk about their research and just generally have a nice meal. 9 00:00:31,756 --> 00:00:34,186 Lunch next Friday as well, if you can't make this, 10 00:00:34,186 --> 00:00:37,606 although you are welcome at both, just head to CS50.net/RSVP 11 00:00:37,606 --> 00:00:41,206 and do you mind taking the house audio down just a little bit. 12 00:00:41,806 --> 00:00:43,796 Alright, so I got a little tired of being yelled 13 00:00:43,796 --> 00:00:46,296 at every time I went to our own home page, so now we have muted 14 00:00:46,296 --> 00:00:48,556 that and we now just have thanks 15 00:00:48,556 --> 00:00:51,216 to a wonderfully fun language called Java Script, 16 00:00:51,866 --> 00:00:53,766 these flying ghouls on the screen. 17 00:00:53,766 --> 00:00:55,996 So you will soon now how to do silly things like that, 18 00:00:56,186 --> 00:00:58,766 but it is around office hours in P Set 6 so it is 19 00:00:58,766 --> 00:01:01,386 around this time every semester that students, 20 00:01:01,556 --> 00:01:02,786 especially those less comfortable 21 00:01:02,786 --> 00:01:05,316 who are feeling a little overwhelmed since things seem 22 00:01:05,496 --> 00:01:09,886 to have accelerated, the problem sets are getting larger and sort 23 00:01:09,886 --> 00:01:12,836 of less byte size and realize that this is to be expected 24 00:01:12,836 --> 00:01:14,396 and this is by design right, because the goal 25 00:01:14,396 --> 00:01:15,896 of the course ultimately is to make sure 26 00:01:15,896 --> 00:01:18,206 that you guys can stand on your own at the end of the semester 27 00:01:18,426 --> 00:01:21,176 and don't have to be handed for instance a P set spec 28 00:01:21,176 --> 00:01:23,486 to actually solve problems and get work done. 29 00:01:23,776 --> 00:01:25,236 But with that said office hours, 30 00:01:25,236 --> 00:01:28,106 which are actually wonderfully being taken advantage of early 31 00:01:28,106 --> 00:01:30,746 in the week enough so that we now will try 32 00:01:30,746 --> 00:01:32,846 to divert some resources to earlier in the week 33 00:01:32,916 --> 00:01:35,346 since finally the lesson seems to be thinking in. 34 00:01:35,626 --> 00:01:37,296 We realize that office hours 35 00:01:37,296 --> 00:01:40,716 in the science center are not the most nurturing environment 36 00:01:40,716 --> 00:01:43,306 when you are kind of struggling and you have questions 37 00:01:43,346 --> 00:01:45,776 that are more conceptual than they are sort 38 00:01:45,776 --> 00:01:48,616 of deal breaking single lines of codes with bugs. 39 00:01:48,936 --> 00:01:51,916 So do realize that on the staff page of the course's website, 40 00:01:51,976 --> 00:01:55,306 we had 60 names and 60 email addresses, 41 00:01:55,306 --> 00:01:57,306 all of whom would be happy to sit down 42 00:01:57,306 --> 00:02:01,126 and in fact would enjoy sitting down on a more one to one basis 43 00:02:01,426 --> 00:02:03,866 and answering questions, working through things with you. 44 00:02:04,326 --> 00:02:06,996 Certainly myself, if you have a friend on the staff 45 00:02:06,996 --> 00:02:09,276 or just friendly with someone, email them directly. 46 00:02:09,276 --> 00:02:10,996 If you are feeling that you would really benefit 47 00:02:11,046 --> 00:02:13,236 from some more one on one attention. 48 00:02:13,236 --> 00:02:17,236 And also email heads@CS50.net if you would like to be introduced 49 00:02:17,236 --> 00:02:19,266 to someone who could sit down with you one on one. 50 00:02:19,266 --> 00:02:21,056 So take advantage of that, plenty of time remains, 51 00:02:21,306 --> 00:02:23,336 don't feel like office hours are your only recourse 52 00:02:23,566 --> 00:02:25,266 and also a word on how to tackle these things. 53 00:02:25,266 --> 00:02:28,656 So early on, Mario was so fairly bite size 54 00:02:28,656 --> 00:02:31,176 and it might have taken you some time to actually get 55 00:02:31,176 --> 00:02:32,806 that pyramid working, but it was kind 56 00:02:32,806 --> 00:02:34,076 of clear what you needed to do. 57 00:02:34,076 --> 00:02:36,316 You needed to use one or more four loops 58 00:02:36,316 --> 00:02:38,026 or Y loops and make a pyramid. 59 00:02:38,336 --> 00:02:40,506 Now you are being handed a lot more code 60 00:02:40,506 --> 00:02:44,906 and you are being asked this more sort of higher level 61 00:02:44,906 --> 00:02:47,776 of idea of implementing dictionary and a spell checker. 62 00:02:48,056 --> 00:02:49,996 But realize that even though the P sets have gotten bigger, 63 00:02:49,996 --> 00:02:52,996 there are still lots of bite size problems in there. 64 00:02:52,996 --> 00:02:55,816 So if you are having this reaction even after watching 65 00:02:55,816 --> 00:02:58,356 or attending walk through that you are still not quite sure 66 00:02:58,356 --> 00:03:01,156 where to begin or Marta has given you a whole lot of hints 67 00:03:01,156 --> 00:03:03,756 and tidbits it seems, but you are not sure how to assemble all 68 00:03:03,756 --> 00:03:04,796 of these puzzle pieces. 69 00:03:05,056 --> 00:03:07,506 Well just take a step back and look through the P set spec, 70 00:03:07,636 --> 00:03:09,956 they are designed with check boxes intentionally 71 00:03:10,276 --> 00:03:13,076 so that you can consider for P set 6 the following work flow. 72 00:03:13,076 --> 00:03:16,306 So you have got essentially four things to do, load, 73 00:03:16,406 --> 00:03:18,326 unload, size and check. 74 00:03:18,686 --> 00:03:20,716 So you can't really do unload first, 75 00:03:20,716 --> 00:03:22,406 can't really do size first, 76 00:03:22,406 --> 00:03:23,686 because you don't have anything to count. 77 00:03:23,996 --> 00:03:27,136 So that leaves load and check, alright so between those two, 78 00:03:27,136 --> 00:03:29,066 probably want to implement load first 79 00:03:29,066 --> 00:03:30,446 so that you have something to check. 80 00:03:30,786 --> 00:03:32,906 Alright so now load that alone might be kind 81 00:03:32,906 --> 00:03:35,526 of a daunting task, you might have some general idea 82 00:03:35,526 --> 00:03:37,936 that you want to implement a hash table or tri 83 00:03:37,936 --> 00:03:41,166 or something else, well again and this is not meant at all 84 00:03:41,166 --> 00:03:43,346 to be diminutive, take baby steps. 85 00:03:43,576 --> 00:03:47,236 Literally sit down with that function and add that line 86 00:03:47,236 --> 00:03:50,226 of code to F open and open the dict file 87 00:03:50,226 --> 00:03:52,516 that you have been passed and don't even try reading it 88 00:03:52,516 --> 00:03:55,166 into memory perhaps, just try iterating over it, 89 00:03:55,166 --> 00:03:57,896 as Marta hinted in the walkthrough with F get C 90 00:03:57,896 --> 00:04:01,226 or F read and just do something simple like count the number 91 00:04:01,226 --> 00:04:03,116 of words in the dictionary and at the end 92 00:04:03,116 --> 00:04:05,566 of your load function, just call Print F, print that number 93 00:04:05,886 --> 00:04:07,436 and compile, run it and see 94 00:04:07,436 --> 00:04:09,856 if your number matches what the P set says you should get. 95 00:04:10,046 --> 00:04:11,376 Now granted, you have just written a few lines 96 00:04:11,376 --> 00:04:12,786 of code that are not useful. 97 00:04:12,786 --> 00:04:13,866 You are going to throw them away, 98 00:04:14,106 --> 00:04:16,406 but at least now you have hit this milestone 99 00:04:16,406 --> 00:04:18,486 where you can feel like you are making forward progress. 100 00:04:18,486 --> 00:04:22,306 And again, this notion of baby steps is something even I quite 101 00:04:22,306 --> 00:04:24,896 honestly today practice and without going 102 00:04:24,896 --> 00:04:26,646 into specific details, because they are not 103 00:04:26,646 --> 00:04:29,086 that interesting even something like the stupid twitter site, 104 00:04:29,356 --> 00:04:31,196 I mean that is kind of a big problem. 105 00:04:31,286 --> 00:04:33,776 Silly though it is that has all these little pieces 106 00:04:33,776 --> 00:04:36,176 and what I did that night in my hotel room was sit down 107 00:04:36,176 --> 00:04:38,956 and think alright, I need somewhere to store these tweets. 108 00:04:39,186 --> 00:04:40,306 Alright, so I need a database. 109 00:04:40,396 --> 00:04:41,746 What do I want this thing to look like 110 00:04:41,746 --> 00:04:42,916 and we will talk about that today. 111 00:04:43,176 --> 00:04:44,856 I now need, once I have my database, 112 00:04:44,856 --> 00:04:47,546 I need to import this data from Twitter.com. 113 00:04:47,796 --> 00:04:50,086 Let me figure out how to just write a little program 114 00:04:50,296 --> 00:04:52,386 that queries Twitter, grabs the data and puts it 115 00:04:52,386 --> 00:04:53,276 in to my new database. 116 00:04:53,446 --> 00:04:55,366 Now at this point, my program is still useless 117 00:04:55,436 --> 00:04:56,396 to the outside world. 118 00:04:56,396 --> 00:04:58,046 You can't see any of these tweets 119 00:04:58,326 --> 00:05:00,036 and so then I began writing a webpage 120 00:05:00,036 --> 00:05:01,036 and I figured out the layout. 121 00:05:01,266 --> 00:05:02,326 It looked basic. 122 00:05:02,366 --> 00:05:04,406 There was no actual content, but I had the structure 123 00:05:04,636 --> 00:05:08,326 and I had words like content will go here and then I saved it 124 00:05:08,326 --> 00:05:10,426 and that was another sort of milestone or baby step. 125 00:05:10,426 --> 00:05:13,116 And finally did things finally start coming together 126 00:05:13,116 --> 00:05:15,296 at the very end when I had something working. 127 00:05:15,296 --> 00:05:17,676 So realize if you have started to take this approach or got 128 00:05:17,676 --> 00:05:20,976 into this habit of trying to sit down and do the problem sets, 129 00:05:21,246 --> 00:05:22,436 it is not a very good approach. 130 00:05:22,576 --> 00:05:24,946 Try to bite off little pieces of the problem set, 131 00:05:24,946 --> 00:05:27,686 even if you define your own milestones for yourself 132 00:05:28,026 --> 00:05:29,826 and then you will feel I think that you are chipping away 133 00:05:29,826 --> 00:05:31,736 at these things and you will be surprised actually 134 00:05:31,736 --> 00:05:34,366 when you realize wow, I just have two blanks to fill in 135 00:05:34,366 --> 00:05:37,026 and what seemed like a big task was actually just a bunch 136 00:05:37,026 --> 00:05:38,626 of little Mario like problems. 137 00:05:38,626 --> 00:05:40,776 So keep that in mind, even if you are taking advantage 138 00:05:40,776 --> 00:05:42,746 of office hours, walkthroughs and the like. 139 00:05:43,266 --> 00:05:46,286 Alright, any questions on anything thus far? 140 00:05:47,326 --> 00:05:50,316 Alright, so we left off on Monday talking about web pages 141 00:05:50,316 --> 00:05:52,106 and we did a little bit of HTML and I showed you how 142 00:05:52,106 --> 00:05:53,686 to make really ugly web pages, 143 00:05:53,686 --> 00:05:55,916 but the general structure of a webpage. 144 00:05:55,916 --> 00:05:58,476 A webpage has an HTML element at the top, 145 00:05:58,646 --> 00:06:01,356 you have got a head element, inside of which can go the title 146 00:06:01,356 --> 00:06:04,056 and this other stuff called CSS and then you have the body, 147 00:06:04,106 --> 00:06:05,876 which is where the guts of your page goes. 148 00:06:06,156 --> 00:06:08,416 And inside the body, you actually put the words you want 149 00:06:08,416 --> 00:06:09,366 to appear on the screen. 150 00:06:09,526 --> 00:06:12,476 You put tags for images and hyperlinks that you want 151 00:06:12,476 --> 00:06:13,476 to appear on the screen, 152 00:06:13,706 --> 00:06:15,696 so all of the interesting stuff happens in there. 153 00:06:15,936 --> 00:06:18,066 But everything we did on Monday was very static. 154 00:06:18,556 --> 00:06:21,256 If you visit that webpage today, it is going to look the same 155 00:06:21,256 --> 00:06:23,636 as it did on Monday, because there is no dynamism. 156 00:06:23,636 --> 00:06:24,736 There is no user input. 157 00:06:24,736 --> 00:06:27,996 There is no automatic fetching of data from Twitter.com 158 00:06:27,996 --> 00:06:29,946 or anything that changes over time. 159 00:06:29,946 --> 00:06:31,296 So it is kind of a boring website. 160 00:06:31,296 --> 00:06:33,636 This is the sort of website 1995 style, 161 00:06:33,916 --> 00:06:35,686 so thankfully there is a number of languages 162 00:06:35,686 --> 00:06:37,676 and tools these days that allow your websites 163 00:06:37,676 --> 00:06:39,776 to be much more interesting and useful 164 00:06:40,046 --> 00:06:42,436 and actually change over time. 165 00:06:42,436 --> 00:06:44,166 I mean case in point, Facebook. 166 00:06:44,166 --> 00:06:47,206 Facebook is interesting because it changes constantly 167 00:06:47,206 --> 00:06:50,136 and it is not Mark Zuckerberg there editing HTML files every 168 00:06:50,136 --> 00:06:52,846 time a change is made to the site, it is all driven 169 00:06:52,846 --> 00:06:54,806 by scripts and programs and databases. 170 00:06:54,806 --> 00:06:56,776 And that is what you will get after this week and next 171 00:06:56,836 --> 00:06:58,006 in the next two problem sets. 172 00:06:58,276 --> 00:07:00,606 So this stuff, I frankly think is a whole lot of fun, 173 00:07:00,606 --> 00:07:02,736 because finally now that you understand 174 00:07:02,736 --> 00:07:05,686 or almost understand how things are working underneath the hood 175 00:07:05,686 --> 00:07:09,026 with C and Rem and all of that finally now are we going 176 00:07:09,026 --> 00:07:12,336 to equip you with some higher level tools, as promised Monday, 177 00:07:12,626 --> 00:07:15,566 so that you can solve interesting problems more easily 178 00:07:15,566 --> 00:07:16,686 and with the right tools. 179 00:07:16,686 --> 00:07:19,536 So here is a simple example to motivate where we will go 180 00:07:19,536 --> 00:07:22,586 with P set 7, so once upon a time I realized 181 00:07:22,586 --> 00:07:24,896 that Yahoo Finance which looks a little 182 00:07:24,896 --> 00:07:27,216 like this let's you get stock quotes and all 183 00:07:27,216 --> 00:07:29,726 of that information and I searched for something 184 00:07:29,726 --> 00:07:31,786 like Google, which is already back 185 00:07:31,786 --> 00:07:33,376 at like 500 dollars a share. 186 00:07:33,866 --> 00:07:37,906 Alright, so I click Goog, which is its stock ticker symbol 187 00:07:37,906 --> 00:07:41,266 and then in the top leftish here under last trade, 188 00:07:41,676 --> 00:07:42,866 this is its current price. 189 00:07:43,156 --> 00:07:44,596 Okay so that is kind of interesting 190 00:07:44,596 --> 00:07:48,986 and I could write a program to screen scrape that content. 191 00:07:48,986 --> 00:07:50,446 I could go into the HTML, 192 00:07:50,446 --> 00:07:54,246 so the number I am looking for is 540.65. 193 00:07:54,466 --> 00:07:56,496 So let me go ahead and copy that let me go ahead 194 00:07:56,496 --> 00:07:58,566 and view source in my browser. 195 00:07:58,566 --> 00:08:01,176 I am going to do Control F here to try to find it. 196 00:08:01,176 --> 00:08:04,096 Let me do this, oh I didn't quite copy it correctly, 197 00:08:04,096 --> 00:08:09,696 so 540.64 uh huh, 63, it already changed. 198 00:08:09,986 --> 00:08:13,616 Alright, so there it is, somewhere nested inside 199 00:08:13,616 --> 00:08:16,366 of this page, inside of what is called a span tag, 200 00:08:16,396 --> 00:08:20,026 inside of a small tag or inside of a T. there is a whole bunch 201 00:08:20,026 --> 00:08:22,726 of stuff surrounding this, so what this means if I wanted 202 00:08:22,726 --> 00:08:24,556 to screen scrape this thing, I am going to have 203 00:08:24,556 --> 00:08:27,476 to write a program that understands all of this content. 204 00:08:27,716 --> 00:08:30,566 So already, there is this tension between what is so easy 205 00:08:30,566 --> 00:08:33,916 for a human, copy/paste kind of wins here, it is so easy 206 00:08:33,916 --> 00:08:34,676 to do with your mouse. 207 00:08:34,896 --> 00:08:36,186 Well that is not going to work if you want 208 00:08:36,186 --> 00:08:38,026 to implement this kind of functionality 209 00:08:38,116 --> 00:08:42,056 of fetching stock quotes for an arbitrary webpage or any number 210 00:08:42,056 --> 00:08:42,956 of stocks throughout the day. 211 00:08:42,956 --> 00:08:45,906 We need to automate it somehow, so testament to the ease 212 00:08:45,906 --> 00:08:48,336 with which one can do this, let me go ahead and whip 213 00:08:48,336 --> 00:08:50,336 up a little program called quote.PHP. 214 00:08:50,336 --> 00:08:52,926 So I am going to use an extension called PHP, 215 00:08:52,926 --> 00:08:56,656 because it is no longer in C. Every PHP file that we will do 216 00:08:56,656 --> 00:08:59,636 in the class must start with these two tags, open bracket, 217 00:08:59,686 --> 00:09:03,616 question mark and question mark closed bracket, this is a hint 218 00:09:03,616 --> 00:09:05,536 to the PHP program, which you will see in a moment 219 00:09:05,776 --> 00:09:08,326 that tells it here comes some PHP code. 220 00:09:08,556 --> 00:09:09,726 And the reason for this is 221 00:09:09,726 --> 00:09:14,296 because open bracket question mark is not a valid X-HTML. 222 00:09:14,766 --> 00:09:16,946 There are no tags that we saw Monday that start 223 00:09:16,946 --> 00:09:18,686 with a question mark, they all started 224 00:09:18,686 --> 00:09:19,816 with alphabetical letters. 225 00:09:19,816 --> 00:09:21,816 So this helps distinguish one from another. 226 00:09:22,196 --> 00:09:26,166 So it turns out that PHP is very similar syntactically to C 227 00:09:26,166 --> 00:09:28,336 and this is a good thing, because it means even you guys 228 00:09:28,576 --> 00:09:31,616 with just a few weeks of C behind you can actually leverage 229 00:09:31,616 --> 00:09:33,366 that knowledge and learn this new language. 230 00:09:33,366 --> 00:09:38,646 So I want to fetch that URL, so let me go ahead and I don't want 231 00:09:38,646 --> 00:09:40,946 to screen scrape this, so notice what I have 232 00:09:40,946 --> 00:09:45,286 in the top here is this URL, but notice this, there is this link 233 00:09:45,286 --> 00:09:48,526 over here to download data and it is a little small. 234 00:09:48,526 --> 00:09:50,586 You won't really be able to see this just yet, but down here 235 00:09:50,586 --> 00:09:54,006 if you hover over a link, I see the actual URL that link goes to 236 00:09:54,006 --> 00:09:58,096 and it is called quotes.CSV and if I click this link, 237 00:09:58,306 --> 00:10:01,176 download data, what is need is that it triggers this pop-up 238 00:10:01,176 --> 00:10:02,616 and it is saying how do you want to open this. 239 00:10:02,616 --> 00:10:07,156 Well CSV file comma separated values, this is just a text file 240 00:10:07,186 --> 00:10:09,286 that you could have made with nano or notepad 241 00:10:09,566 --> 00:10:11,476 and it just has a bunch of different fields, 242 00:10:11,766 --> 00:10:13,196 each separated by commas. 243 00:10:13,316 --> 00:10:16,226 So let me go ahead and save this to my desktop, quotes.CSV. 244 00:10:16,226 --> 00:10:19,456 Let me minimize this, minimize this, here it is here. 245 00:10:19,456 --> 00:10:22,076 And I am actually going to go ahead and let's go ahead 246 00:10:22,076 --> 00:10:24,266 and open it with notepad, 247 00:10:24,946 --> 00:10:26,976 which is just a simple Windows application. 248 00:10:26,976 --> 00:10:29,136 Let me go ahead and open this file, 249 00:10:29,586 --> 00:10:34,476 which is called quotes.CSV and that is it. 250 00:10:34,476 --> 00:10:36,276 This is all I downloaded from Yahoo. 251 00:10:36,276 --> 00:10:38,256 It is a comma separated values file, 252 00:10:38,306 --> 00:10:41,126 because look all the interesting fields of data are separated 253 00:10:41,126 --> 00:10:42,746 by commas and you can kind 254 00:10:42,746 --> 00:10:44,316 of infer what some of these are, right. 255 00:10:44,386 --> 00:10:46,056 There is the stocks in bullet top left, 256 00:10:46,286 --> 00:10:48,216 there is the current price, changed a little bit. 257 00:10:48,326 --> 00:10:49,796 There is the current date, the current time 258 00:10:49,796 --> 00:10:52,026 at which we fetched it and then some other information, 259 00:10:52,026 --> 00:10:53,906 like maybe the day's high and low 260 00:10:53,906 --> 00:10:55,846 and these kind of financial numbers. 261 00:10:55,846 --> 00:10:58,456 So for now, I don't really care about those, but I do care 262 00:10:58,456 --> 00:11:02,446 about this guy at the start, 541.166. 263 00:11:02,446 --> 00:11:04,246 This is the current stock price. 264 00:11:04,516 --> 00:11:06,936 I want to write a little program in this new language PHP 265 00:11:06,936 --> 00:11:09,526 that fetches me that piece of data. 266 00:11:09,956 --> 00:11:12,586 And what is need about CSV files incidentally is 267 00:11:12,586 --> 00:11:14,336 that if you typically double click them 268 00:11:14,336 --> 00:11:16,116 or explicitly open them with something 269 00:11:16,116 --> 00:11:19,686 like Microsoft Excel they mimic the idea of a spreadsheet. 270 00:11:19,836 --> 00:11:22,426 Because the commas delineate to the actual columns, 271 00:11:22,476 --> 00:11:24,216 there aren't more than one row here, 272 00:11:24,466 --> 00:11:27,406 but I have opened this same file in Excel and so what I kind 273 00:11:27,486 --> 00:11:29,286 of have here is a sort of mini database 274 00:11:29,436 --> 00:11:30,846 that I have downloaded from Yahoo. 275 00:11:30,846 --> 00:11:32,506 So this is a very nice thing, 276 00:11:32,506 --> 00:11:34,956 because now that you will have programming chops with PHP 277 00:11:34,956 --> 00:11:38,296 and with internet connectivity, you can actually query data 278 00:11:38,296 --> 00:11:41,376 that is machine readable, because it is so much easier 279 00:11:41,436 --> 00:11:45,056 for us to read or parse so to speak this than that mess 280 00:11:45,256 --> 00:11:48,326 that was the whole actual webpage written in X-HTML. 281 00:11:48,776 --> 00:11:50,586 So let me go back to my command line and I am going 282 00:11:50,586 --> 00:11:52,576 to do something fairly simple, I am going to say alright, 283 00:11:52,576 --> 00:11:55,286 the URL I want to fetch is you know what let me go ahead 284 00:11:55,286 --> 00:11:58,096 and just copy that URL from Yahoo's site. 285 00:11:58,096 --> 00:12:00,226 So I am going to right click on it this time, 286 00:12:00,506 --> 00:12:02,676 copy link location, I am going to go back 287 00:12:02,676 --> 00:12:04,346 to my terminal window and paste. 288 00:12:04,796 --> 00:12:08,316 So I am declaring a variable here called URL. 289 00:12:08,316 --> 00:12:10,596 I am making it an uppercase, because it is kind of in my mind 290 00:12:10,596 --> 00:12:12,366 like a constant, at least for now. 291 00:12:12,416 --> 00:12:14,156 I am keeping everything inside those braces. 292 00:12:14,156 --> 00:12:16,266 It is wrapping, which is a bit ugly, but that is just the URL. 293 00:12:16,266 --> 00:12:19,086 So now I am going to do a little syntax that is familiar 294 00:12:19,086 --> 00:12:22,496 from C. There is an F open function and PHP is neat, 295 00:12:22,496 --> 00:12:25,006 because you don't have to pass it just a file pass 296 00:12:25,416 --> 00:12:26,466 on the local hard drive. 297 00:12:26,736 --> 00:12:27,956 You can actually give it a URL. 298 00:12:28,336 --> 00:12:31,076 Don't try this in C, bad things will happen, it just won't work, 299 00:12:31,336 --> 00:12:33,326 but the syntax here is pretty much the same. 300 00:12:33,326 --> 00:12:36,026 I am going to open this URL in read mode 301 00:12:36,236 --> 00:12:39,576 and now I have a file handle or file pointer, 302 00:12:39,986 --> 00:12:42,386 synonymous in this variable called FP. 303 00:12:42,776 --> 00:12:44,946 So that is one of the few syntactic differences thus far, 304 00:12:44,946 --> 00:12:47,816 variables in PHP start with dollar signs, 305 00:12:48,086 --> 00:12:49,076 but there is no data type. 306 00:12:49,116 --> 00:12:50,176 I haven't said string. 307 00:12:50,176 --> 00:12:50,926 I haven't said int. 308 00:12:50,926 --> 00:12:54,276 I haven't said anything, so this is one upside and maybe downside 309 00:12:54,276 --> 00:12:56,896 of PHP, it is a little looser with data types. 310 00:12:56,896 --> 00:12:58,806 You really don't have to think that much about them. 311 00:12:59,256 --> 00:13:00,266 So now I am going to do this, 312 00:13:00,266 --> 00:13:01,856 there turns out there is a function 313 00:13:01,946 --> 00:13:06,796 in PHP called F get CSV, file get comma separated values. 314 00:13:07,166 --> 00:13:11,406 What is neat about this is that I can pass to this a handle, 315 00:13:11,536 --> 00:13:13,606 the file handle that I want to read from FP. 316 00:13:14,456 --> 00:13:18,686 I can then close my parentheses here and then what I have 317 00:13:18,686 --> 00:13:22,866 in this variable called row are the contents of the first row, 318 00:13:22,866 --> 00:13:25,736 but what is really neat about this particular function is 319 00:13:25,736 --> 00:13:29,466 that it does the printing of, it does the parsing 320 00:13:29,546 --> 00:13:31,786 of that CSV file for me. 321 00:13:32,096 --> 00:13:34,766 So what do I mean by this exactly, well let me do this. 322 00:13:34,996 --> 00:13:36,756 Right now I have a variable called row, 323 00:13:37,026 --> 00:13:40,766 it is storing the contents of what I just read from this URL. 324 00:13:40,766 --> 00:13:43,036 I am going to use this function, Print R, 325 00:13:43,166 --> 00:13:45,536 which is print recursively that row. 326 00:13:45,536 --> 00:13:47,466 I just want to do a quick and dirty check here. 327 00:13:47,466 --> 00:13:49,666 So this is again an example, I am writing a code, 328 00:13:49,666 --> 00:13:52,136 I am about to throw away, but it is a useful sanity check. 329 00:13:52,416 --> 00:13:54,806 So I have saved my file, I am now back at the prompt 330 00:13:54,806 --> 00:13:56,446 and I have a file called quote.php, 331 00:13:56,446 --> 00:13:58,406 which lives right here. 332 00:13:59,116 --> 00:14:02,336 PHP is a little different from C in that it is not compiled. 333 00:14:02,656 --> 00:14:05,266 PHP is an example of an interpreted language, 334 00:14:05,526 --> 00:14:08,406 which means to actually run it you have to pass it 335 00:14:08,406 --> 00:14:10,326 as input to another program. 336 00:14:10,596 --> 00:14:13,826 Now on a Linux computer, this program is called PHP. 337 00:14:13,826 --> 00:14:15,596 On a Windows computer, it is called PHP.exe. 338 00:14:15,596 --> 00:14:18,336 On a Mac, it is called PHP. 339 00:14:18,336 --> 00:14:20,056 So I am going to run a program called PHP, 340 00:14:20,056 --> 00:14:23,376 which is an interpreter, a program that someone else wrote 341 00:14:23,376 --> 00:14:25,906 that is going to read my code, top to bottom, left to right 342 00:14:26,136 --> 00:14:27,976 and do what my code tells it to do. 343 00:14:28,056 --> 00:14:29,386 That is what it means to interpret. 344 00:14:29,616 --> 00:14:32,426 So I am going to run PHP on quote.php and hit enter 345 00:14:32,756 --> 00:14:35,056 and what I see here is oh interesting, 346 00:14:35,446 --> 00:14:37,256 now this is kind of a debugging trick. 347 00:14:37,256 --> 00:14:40,566 Think of Print R kind of my Print F when I am debugging. 348 00:14:40,976 --> 00:14:42,906 It is printed what data type apparently? 349 00:14:44,356 --> 00:14:47,566 In array, so it says in big keyword there, array. 350 00:14:47,746 --> 00:14:52,186 So it turns out that F gets CSV actually analyzes that CSV 351 00:14:52,186 --> 00:14:54,286 that comes back from the internet, 352 00:14:54,466 --> 00:14:57,326 it realizes oh there is commas in between all 353 00:14:57,326 --> 00:14:58,316 of these pieces of data. 354 00:14:58,626 --> 00:15:02,476 Let me create for David an array of the appropriate size, 355 00:15:02,776 --> 00:15:05,736 size 9 and let me put in each of the locations, 356 00:15:05,856 --> 00:15:09,236 each of the fields from this Excel file, from this CSV file. 357 00:15:09,566 --> 00:15:12,456 So what Print R does, Print recursive, it is just kind 358 00:15:12,456 --> 00:15:13,636 of a debugging trick here. 359 00:15:13,636 --> 00:15:17,616 It is showing me the contents of this variable called row. 360 00:15:18,136 --> 00:15:21,546 So which index location do I care about in a moment 361 00:15:21,546 --> 00:15:23,036 when I want to just print the stock price? 362 00:15:24,146 --> 00:15:25,836 So just the first one, one, so let's see 363 00:15:25,836 --> 00:15:27,046 if the syntax is pretty similar. 364 00:15:27,046 --> 00:15:29,236 So I now have in memory a variable called row. 365 00:15:29,366 --> 00:15:30,096 It is an array. 366 00:15:30,296 --> 00:15:32,276 I didn't have to do any of that nastiness 367 00:15:32,276 --> 00:15:34,216 with declaring the size of the array in advance. 368 00:15:34,216 --> 00:15:36,426 I didn't have to use [inaudible] and here is one of the upsides 369 00:15:36,426 --> 00:15:39,106 of a language like PHP, which is also known 370 00:15:39,106 --> 00:15:43,266 as a scripting language, which generally in spirit make a lot 371 00:15:43,266 --> 00:15:46,606 of these painful details go away and they do them for you, 372 00:15:46,656 --> 00:15:48,796 all be it at some costs, which we will discuss. 373 00:15:48,796 --> 00:15:50,136 So let me go back to my program. 374 00:15:50,396 --> 00:15:51,466 I don't want to print the row. 375 00:15:51,466 --> 00:15:53,846 What I want to do literally now is print that field. 376 00:15:53,846 --> 00:15:57,856 So print, what do I want to print, row bracket 1 377 00:15:58,126 --> 00:16:00,206 and then I am going to have to print a new line I think. 378 00:16:00,206 --> 00:16:01,856 So let me do print new line 379 00:16:02,646 --> 00:16:04,506 and you will typically use the print function, 380 00:16:04,506 --> 00:16:07,336 as opposed to print F, but Print F does exist in PHP. 381 00:16:07,336 --> 00:16:09,306 Let me re-run my program and waa-laa, 382 00:16:09,546 --> 00:16:11,826 now I have the stock price of Google. 383 00:16:12,086 --> 00:16:14,746 Alright not bad, but not all that useful, 384 00:16:14,746 --> 00:16:16,826 I now have a program that just checks a webpage 385 00:16:16,826 --> 00:16:18,526 that I could check myself with a browser, 386 00:16:18,926 --> 00:16:20,726 so let's make it slightly more dynamic. 387 00:16:20,726 --> 00:16:23,556 Let me go in here and notice this part of the string. 388 00:16:24,196 --> 00:16:29,156 Notice at the very top of my URL, there is this parameter. 389 00:16:29,606 --> 00:16:31,896 So we talked very briefly on Monday about this 390 00:16:31,896 --> 00:16:33,386 when we reimplemented Google. 391 00:16:33,506 --> 00:16:35,316 When I implemented Google, I just had to pass 392 00:16:35,526 --> 00:16:36,976 to Google a special parameter. 393 00:16:36,976 --> 00:16:39,256 What was the name of that parameter that Google used 394 00:16:39,256 --> 00:16:41,276 to search for content? 395 00:16:42,036 --> 00:16:42,176 >> [Class answering]: Q 396 00:16:42,226 --> 00:16:44,996 >> So it was just Q, so the URL for Google, 397 00:16:44,996 --> 00:16:47,936 followed by question mark, which said here comes some parameters, 398 00:16:48,176 --> 00:16:51,806 then the name of the parameter Q an equal sign and then the value 399 00:16:51,806 --> 00:16:54,016 that I typed in, so whatever key word I was looking 400 00:16:54,016 --> 00:16:55,106 for like CS50. 401 00:16:55,396 --> 00:16:58,426 Well here, it looks like Yahoo has the same trick going on. 402 00:16:58,646 --> 00:17:02,446 They have some long URL ends with quotes.csv, question mark 403 00:17:02,446 --> 00:17:04,406 and there is where it starts to get interesting, 404 00:17:04,466 --> 00:17:08,636 S which is symbol probably equals GOOG 405 00:17:08,636 --> 00:17:09,806 and that is what I typed in. 406 00:17:10,046 --> 00:17:12,416 Now at first glance, I actually don't know what the rest 407 00:17:12,416 --> 00:17:13,616 of this URL means. 408 00:17:13,616 --> 00:17:15,736 It is wrapping on to two lines, so let me just move it 409 00:17:15,816 --> 00:17:17,256 for a moment onto a new line. 410 00:17:17,666 --> 00:17:20,386 I don't know what this nonsense is after Goog. 411 00:17:20,386 --> 00:17:22,066 I do see that there is an ampersand 412 00:17:22,066 --> 00:17:25,346 and an ampersand is what delineates one parameter 413 00:17:25,346 --> 00:17:25,986 from another. 414 00:17:26,256 --> 00:17:27,756 So the ampersand says done 415 00:17:27,756 --> 00:17:29,456 with first parameter, here comes another. 416 00:17:29,696 --> 00:17:32,536 The second one quick, quick sanity check, is called what? 417 00:17:33,626 --> 00:17:36,106 So it is F, turns out after a little Googling 418 00:17:36,106 --> 00:17:37,346 that is a format code. 419 00:17:37,566 --> 00:17:41,156 So what F equals is this long crazy string of characters 420 00:17:41,186 --> 00:17:43,726 and essentially Yahoo has a little cheat sheet that says 421 00:17:43,726 --> 00:17:46,826 if you want the stock symbol pass in this format string. 422 00:17:46,826 --> 00:17:48,706 If you want the day's high and the day's low, 423 00:17:48,816 --> 00:17:50,156 pass in this format string. 424 00:17:50,156 --> 00:17:53,816 So it is like Yahoo's proprietary version of F print 425 00:17:53,816 --> 00:17:56,126 out or print F strings or format codes. 426 00:17:56,416 --> 00:17:58,206 So I actually don't really care so much about that, 427 00:17:58,206 --> 00:18:01,366 because clearly this URL works and gets me the stock quote 428 00:18:01,606 --> 00:18:04,576 and some other stuff, but I just want to make this dynamic. 429 00:18:04,676 --> 00:18:06,776 I want to factor out the Goog 430 00:18:06,966 --> 00:18:10,526 and not make this a hard coded value here and I instead want 431 00:18:10,526 --> 00:18:13,486 to do something like dollar sign symbol. 432 00:18:14,076 --> 00:18:18,776 So let's see if I can now define a variable called symbol 433 00:18:18,976 --> 00:18:21,936 so that I dynamically get a different URL based 434 00:18:21,936 --> 00:18:22,516 on the input. 435 00:18:22,516 --> 00:18:28,676 So it turns out that PHP has a variable symbol gets RV 436 00:18:29,326 --> 00:18:30,056 bracket 1. 437 00:18:30,056 --> 00:18:33,296 So I have command line arguments in PHP 2, so this is going 438 00:18:33,296 --> 00:18:36,816 to get RV of 1, my first real word after the program's name. 439 00:18:36,816 --> 00:18:38,656 It is going to put in a variable called symbol. 440 00:18:38,846 --> 00:18:41,786 This line of code here, very interestingly is going 441 00:18:41,786 --> 00:18:43,846 to create a string, most of which is static, 442 00:18:44,096 --> 00:18:46,476 but then because I have this variable in the middle 443 00:18:46,476 --> 00:18:48,476 of my string, what is really nice about PHP 444 00:18:48,476 --> 00:18:52,206 and this dollar sign notation is it will do a substitution right 445 00:18:52,206 --> 00:18:52,886 there for me. 446 00:18:53,136 --> 00:18:55,496 There is no messiness of copying strings 447 00:18:55,496 --> 00:18:57,926 and concatenating them together using re ad loc 448 00:18:57,926 --> 00:18:59,456 or stir copy all of this mess. 449 00:18:59,876 --> 00:19:02,316 It all goes away and it is much more user friendly now. 450 00:19:02,606 --> 00:19:05,816 So now if I do a little sanity check, let me go down here 451 00:19:05,816 --> 00:19:08,646 and again in the interest of baby steps, milestones 452 00:19:08,646 --> 00:19:10,736 and what not, let me just do a quick check. 453 00:19:10,906 --> 00:19:12,606 Let me print the URL. 454 00:19:12,606 --> 00:19:15,996 Alright, so you know what, let me exit. 455 00:19:15,996 --> 00:19:18,086 I don't want to even see what happens next just yet. 456 00:19:18,086 --> 00:19:19,656 I want to make sure my URL is correct. 457 00:19:19,926 --> 00:19:23,556 So I am going to run PHP of quote, PHP and just 458 00:19:23,556 --> 00:19:25,846 to underwhelm, I am going to run it on Goog. 459 00:19:26,386 --> 00:19:29,606 So it looks like, if I zoom in, it generated the right URL. 460 00:19:29,606 --> 00:19:31,926 But what is need now is if I re-run this 461 00:19:31,926 --> 00:19:35,016 with MSFT, I get Microsoft. 462 00:19:35,186 --> 00:19:36,926 Notice now it has been substituted in 463 00:19:36,926 --> 00:19:40,106 and if I do something like Yahoo myself, 464 00:19:40,226 --> 00:19:41,376 YHOO, I get a Yahoo string. 465 00:19:41,626 --> 00:19:43,446 So now it looks like I have the framework 466 00:19:43,446 --> 00:19:46,376 for a command line program that will just spec stock quotes 467 00:19:46,376 --> 00:19:49,026 for me on demand, any symbol that I actually want. 468 00:19:49,256 --> 00:19:50,966 So let me get rid of this temporary code. 469 00:19:51,366 --> 00:19:53,876 Let's see I open the URL in read mode. 470 00:19:53,876 --> 00:19:55,666 I get the first row of the file. 471 00:19:55,836 --> 00:19:56,926 You know what I don't actually need this. 472 00:19:56,926 --> 00:19:59,566 I am going to do F close of file pointer now, 473 00:19:59,566 --> 00:20:02,556 because I don't need that file handle anymore once I have read 474 00:20:02,556 --> 00:20:03,346 it into memory. 475 00:20:03,726 --> 00:20:06,156 So now I can just print the row it looks like. 476 00:20:06,156 --> 00:20:09,616 So let's see, let me go ahead and save this, run PHP of quotes 477 00:20:09,616 --> 00:20:10,986 and let's do Goog again. 478 00:20:11,246 --> 00:20:13,776 Here we go 541.58. 479 00:20:13,776 --> 00:20:19,436 Now let's do MSFT, 28 dollars and Yahoo, alright, 480 00:20:19,496 --> 00:20:22,056 so now I have in what five minutes time 481 00:20:22,056 --> 00:20:24,796 and we are not talking 30 seconds time a little program 482 00:20:25,016 --> 00:20:27,436 that fetches real data from Yahoo Finance, 483 00:20:27,436 --> 00:20:29,756 a website that lives who knows where on the internet. 484 00:20:29,966 --> 00:20:31,986 It grabs it and it shows it to me. 485 00:20:32,226 --> 00:20:34,326 And I could do any number of tricks to this data. 486 00:20:34,326 --> 00:20:36,796 This is a very simple program, but this is what is powerful. 487 00:20:36,796 --> 00:20:38,986 I challenge you to implement this in C 488 00:20:39,226 --> 00:20:40,946 in just seven lines of code. 489 00:20:41,326 --> 00:20:43,456 So this is where it starts to get exciting to be honest. 490 00:20:43,806 --> 00:20:47,906 So let's actually now pause for any questions, any questions 491 00:20:47,906 --> 00:20:50,446 about that quick and dirty command line example. 492 00:20:51,656 --> 00:20:54,726 Okay, so it is neat right, but you don't want to really have 493 00:20:54,726 --> 00:20:56,366 to tell your users or your family 494 00:20:56,366 --> 00:20:59,806 and your friends oh you have to download putty and then SSH 495 00:20:59,806 --> 00:21:03,146 to cloud.CS50.net and then run this esoteric command just 496 00:21:03,146 --> 00:21:03,976 to get a stock quote. 497 00:21:04,156 --> 00:21:06,526 Right, the web is kind of a lot more 498 00:21:06,526 --> 00:21:09,436 in vogue then SSH these days for normal people. 499 00:21:09,436 --> 00:21:11,256 So just as years ago. 500 00:21:11,256 --> 00:21:11,323 [ Laughter ] 501 00:21:11,323 --> 00:21:12,606 It is kind of true. 502 00:21:12,606 --> 00:21:17,616 So just as years ago, I faced this problem with the frosh IMs 503 00:21:17,616 --> 00:21:19,966 that wanted to deprecate pieces of paper and replace it 504 00:21:19,966 --> 00:21:23,086 with the web, well today to, the web is kind of the place to turn 505 00:21:23,286 --> 00:21:26,366 when you want a generic user interface, but you want 506 00:21:26,366 --> 00:21:29,876 to be able to create dynamic output. 507 00:21:30,086 --> 00:21:32,416 So what is nice about PHP is that just 508 00:21:32,416 --> 00:21:35,686 as we can write command line scripts, command line programs 509 00:21:35,946 --> 00:21:38,356 that we can use for quick and dirty things, for research, 510 00:21:38,356 --> 00:21:41,446 for course administration, just for our own geeky self interest, 511 00:21:41,806 --> 00:21:44,886 we can use the same language now to spit the output not 512 00:21:44,886 --> 00:21:48,406 to my black and white screen, but to an actual webpage. 513 00:21:48,516 --> 00:21:51,546 So enter in a web based approach. 514 00:21:51,546 --> 00:21:53,936 Let me go into now some of the code 515 00:21:53,936 --> 00:21:55,086 that we gave out the other day. 516 00:21:55,086 --> 00:21:57,976 So I am going to go into my public HTML directory 517 00:21:57,976 --> 00:22:01,686 and I am going to go into lectures and I cleaned 518 00:22:01,686 --> 00:22:03,566 up my code, so the paths on your printouts are a 519 00:22:03,566 --> 00:22:04,626 little different. 520 00:22:04,626 --> 00:22:06,666 I ended up having so many files that I put everything 521 00:22:06,666 --> 00:22:08,256 in this Frosh IMs directory. 522 00:22:08,646 --> 00:22:11,106 So my goal now is to implement something like this. 523 00:22:11,106 --> 00:22:13,776 I am going to go away from Yahoo Finance, 524 00:22:13,826 --> 00:22:15,326 more on that in Problem Set 7. 525 00:22:15,326 --> 00:22:18,366 I am going to go to Cloud.CS50.net/~ 526 00:22:18,366 --> 00:22:21,696 and again this tilde notation is very common. 527 00:22:21,696 --> 00:22:23,806 If you have an account on a shared server, 528 00:22:23,806 --> 00:22:26,956 very often can you access your webpage using this tilde 529 00:22:26,956 --> 00:22:32,366 notation and I am going to go into /CS50/lectures 530 00:22:32,366 --> 00:22:34,166 and now this is a generic output. 531 00:22:34,166 --> 00:22:35,546 What is nice with most web servers, 532 00:22:35,546 --> 00:22:37,776 if you have no HTML content there, 533 00:22:37,966 --> 00:22:40,166 it just shows you the contents of the directory, 534 00:22:40,166 --> 00:22:41,756 if you have configured your accounts for this. 535 00:22:41,756 --> 00:22:43,896 So I am going to just click my way to what I want. 536 00:22:43,896 --> 00:22:45,926 Oh here was our nastiness from the other day, 537 00:22:46,296 --> 00:22:48,966 let's see if we can't improve upon that guy. 538 00:22:48,966 --> 00:22:51,116 Let's go into the Frosh IMs directory 539 00:22:51,276 --> 00:22:52,396 and go to number one here. 540 00:22:52,656 --> 00:22:55,776 So essentially, this is all I wanted to implement is 541 00:22:55,776 --> 00:22:57,826 like a sophomore in this language called Pearl, 542 00:22:57,826 --> 00:23:00,906 this was an improvement over the piece of paper and the trek 543 00:23:00,906 --> 00:23:02,826 across campus to register for Frosh IMs. 544 00:23:03,136 --> 00:23:05,756 Now we gathered a little more data, but I chose these examples 545 00:23:05,756 --> 00:23:07,776 for today, because what we have here are some basic 546 00:23:07,846 --> 00:23:08,486 form elements. 547 00:23:08,486 --> 00:23:10,546 And you have used these on any number of websites. 548 00:23:10,906 --> 00:23:12,406 This thing up here is a text field. 549 00:23:12,816 --> 00:23:14,556 This thing down here is a check box. 550 00:23:14,556 --> 00:23:16,056 This thing here is a radio button 551 00:23:16,056 --> 00:23:17,516 and notice it is exclusive. 552 00:23:17,516 --> 00:23:19,366 Once you click one, the other one gets unchecked, 553 00:23:19,366 --> 00:23:21,896 where check boxes are just on and off independently 554 00:23:22,176 --> 00:23:24,766 and then you have these drop down select menus. 555 00:23:24,946 --> 00:23:26,856 So this is kind of a nice self-contained example, 556 00:23:26,856 --> 00:23:28,176 because it illustrates most 557 00:23:28,176 --> 00:23:30,496 of the popular interface mechanisms. 558 00:23:30,526 --> 00:23:33,286 And to be honest, if you think about almost any website 559 00:23:33,286 --> 00:23:35,976 that you visit today almost all of them boil 560 00:23:35,976 --> 00:23:39,336 down to these terribly, terribly simple user inputs. 561 00:23:39,336 --> 00:23:42,426 You might have felt limited in C with get in and get float 562 00:23:42,426 --> 00:23:44,806 and get double, but in the web, you really kind 563 00:23:44,856 --> 00:23:46,156 of have the same limitations. 564 00:23:46,156 --> 00:23:49,286 You have a palate of four or five user input mechanisms 565 00:23:49,286 --> 00:23:51,606 and the whole web has grown up on that basis. 566 00:23:51,966 --> 00:23:56,036 So my goal is to allow people like freshman to type 567 00:23:56,076 --> 00:23:58,456 in for instance John here, John is going 568 00:23:58,456 --> 00:24:01,926 to be a captain, a male and Matthews. 569 00:24:02,046 --> 00:24:04,186 And when I click register, I want something 570 00:24:04,186 --> 00:24:05,616 to happen to this data. 571 00:24:05,966 --> 00:24:06,976 Well first, let's take a look 572 00:24:06,976 --> 00:24:09,816 at how this actual page came into existence. 573 00:24:09,816 --> 00:24:13,806 This is Frosh Ims 1.php and let me first disclaim 574 00:24:13,806 --> 00:24:15,016 that even though this file ends 575 00:24:15,016 --> 00:24:18,176 in .php there is actually no dynamic content 576 00:24:18,176 --> 00:24:19,836 in this particular page. 577 00:24:20,146 --> 00:24:22,526 So .php is the convention that people use, 578 00:24:22,526 --> 00:24:24,636 even Facebook uses this for a lot of its pages, 579 00:24:24,876 --> 00:24:26,946 that means here comes some PHP code. 580 00:24:27,206 --> 00:24:31,036 Now it turns out for this very first simple example all I have 581 00:24:31,036 --> 00:24:32,156 at the top of this file 582 00:24:32,156 --> 00:24:36,436 in between those special PHP brackets are some comments. 583 00:24:36,726 --> 00:24:39,306 So it is really not doing much at all here, just to be clear. 584 00:24:39,546 --> 00:24:41,176 So the real stuff is happening down here 585 00:24:41,176 --> 00:24:42,996 and this is the stuff called X-HTML. 586 00:24:43,276 --> 00:24:45,326 So this is the thing that at least I have not remembered 587 00:24:45,326 --> 00:24:46,386 for 10 years, I just copy 588 00:24:46,386 --> 00:24:48,006 and paste it every time I make a webpage. 589 00:24:48,226 --> 00:24:49,526 Then I copy this first line 590 00:24:49,726 --> 00:24:51,506 and then the training wheels come off 591 00:24:51,506 --> 00:24:53,506 and I can start coding things by memory. 592 00:24:53,886 --> 00:24:57,316 So inside of this page is a title called Frosh IMs, 593 00:24:57,626 --> 00:24:59,686 then I have the body of my page here 594 00:24:59,836 --> 00:25:01,386 and then there is this thing called div. 595 00:25:01,516 --> 00:25:05,606 So web pages have things called divisions and you will get used 596 00:25:05,606 --> 00:25:06,776 to this if you play around. 597 00:25:06,776 --> 00:25:08,296 I did this in different ways on Monday. 598 00:25:08,506 --> 00:25:10,486 There are many different ways to implement web pages, 599 00:25:10,486 --> 00:25:12,946 so don't think there is only one way to achieve something. 600 00:25:12,946 --> 00:25:13,926 That is kind of the fun of it. 601 00:25:14,276 --> 00:25:15,996 So I am using some slightly new tags. 602 00:25:16,136 --> 00:25:18,956 Div means here is a division, put this block of code 603 00:25:18,956 --> 00:25:20,456 in the middle of the page. 604 00:25:20,486 --> 00:25:24,016 H1 we saw it is a heading tag, it means make it big and bold. 605 00:25:24,176 --> 00:25:26,016 BR, BR means line break, line break. 606 00:25:26,406 --> 00:25:28,816 Form means here comes an actual form. 607 00:25:29,096 --> 00:25:31,536 Action is an attribute, so notice next 608 00:25:31,536 --> 00:25:32,516 to the word form action, 609 00:25:32,516 --> 00:25:34,656 that means where do you sent the contents of this form 610 00:25:34,956 --> 00:25:37,706 and method finally can be for our purposes one 611 00:25:37,706 --> 00:25:39,386 of two things, post or get. 612 00:25:39,946 --> 00:25:43,066 If you want the information to be sent to the server in the URL 613 00:25:43,066 --> 00:25:46,046 in kind of a long cryptic looking URL, you use get. 614 00:25:46,046 --> 00:25:48,906 If you want to hide that information for privacy reasons 615 00:25:48,906 --> 00:25:51,356 or snooping or whatever, you use post. 616 00:25:51,396 --> 00:25:53,196 And there are other reasons as well, but for now, 617 00:25:53,196 --> 00:25:54,446 it is an easy copy/paste. 618 00:25:54,956 --> 00:25:57,616 So now I am using this trick, it is a little bit retro, 619 00:25:57,616 --> 00:25:59,406 but still frankly very simple. 620 00:25:59,406 --> 00:26:01,556 I am going to change one thing. 621 00:26:01,556 --> 00:26:04,416 It turns out I am using a table to lay out this page 622 00:26:04,416 --> 00:26:06,306 and you can kind of guess where the table is. 623 00:26:06,306 --> 00:26:09,116 I have kind of got four or five rows, because each 624 00:26:09,116 --> 00:26:10,516 of these inputs is in a row. 625 00:26:10,716 --> 00:26:12,716 Then I seem to have a nice column, because I was kind 626 00:26:12,776 --> 00:26:15,616 of anal and I wanted all of the words like name, captain, 627 00:26:15,616 --> 00:26:16,776 gender, dorm to line up. 628 00:26:16,776 --> 00:26:18,466 So I kind of have a grid here. 629 00:26:18,466 --> 00:26:22,156 So I am going to change the attribute on my table tag 630 00:26:22,456 --> 00:26:24,866 to be border equals one, instead of zero, 631 00:26:24,866 --> 00:26:25,766 which it was a moment ago. 632 00:26:25,766 --> 00:26:28,706 I am going to save my file and I am going to reload this page 633 00:26:28,706 --> 00:26:30,096 and now you see the table. 634 00:26:30,426 --> 00:26:32,046 Now if I turn this table on, 635 00:26:32,046 --> 00:26:34,296 if I had left the border it really looks bad. 636 00:26:34,296 --> 00:26:37,126 So I decided it looks a little better to hide this table, 637 00:26:37,176 --> 00:26:39,046 so we use this on CS50's website 638 00:26:39,046 --> 00:26:42,466 and this is not an uncommon approach even these days. 639 00:26:42,516 --> 00:26:43,956 So it is kind of nice, quick and simple. 640 00:26:44,556 --> 00:26:46,396 Alright, so how did I create this form. 641 00:26:46,676 --> 00:26:49,246 Well we did a little bit of this for Google. 642 00:26:49,426 --> 00:26:51,956 Let's see I have first of all, oops, 643 00:26:53,156 --> 00:26:57,036 we have let's see the word name and it turns out to create rows 644 00:26:57,036 --> 00:27:00,906 and columns in tables, you use things like TR for table row, 645 00:27:00,906 --> 00:27:04,016 TD for table data and I want dwell on these details here, 646 00:27:04,016 --> 00:27:05,196 because it is easy enough to tinker 647 00:27:05,196 --> 00:27:06,416 and realize what it is doing. 648 00:27:06,416 --> 00:27:08,996 I cannot emphasize enough, just as I did in the basement 649 00:27:08,996 --> 00:27:10,806 of the science center years ago, the best way 650 00:27:10,806 --> 00:27:12,186 to use this stuff is to experiment. 651 00:27:12,186 --> 00:27:13,976 If you are not sure what something does, delete it, 652 00:27:13,976 --> 00:27:16,936 see what happens, see how bad things get and then put it back 653 00:27:16,936 --> 00:27:19,046 and then you understand what that line of code did. 654 00:27:19,356 --> 00:27:22,086 Alright, so here is name and look here is the text field, 655 00:27:22,396 --> 00:27:25,716 input name equals name, type equals text, alright. 656 00:27:25,756 --> 00:27:26,226 What about this? 657 00:27:26,226 --> 00:27:29,116 Here is captain, same idea, input name equals captain, 658 00:27:29,156 --> 00:27:30,316 type equals check box. 659 00:27:30,756 --> 00:27:32,426 Down here we have two inputs, 660 00:27:32,426 --> 00:27:34,676 because I have two possibilities per user, 661 00:27:35,096 --> 00:27:39,296 input name equals gender, type equals radio, value equals F 662 00:27:39,296 --> 00:27:42,736 and then I literally write an F here outside of the tag 663 00:27:42,736 --> 00:27:45,126 so that the user actually sees what the value 664 00:27:45,126 --> 00:27:46,896 of this attribute, what this button is. 665 00:27:47,156 --> 00:27:49,726 and then same deal for male here, I have the same thing, 666 00:27:49,726 --> 00:27:52,716 input name equals gender, type equals radio, 667 00:27:52,716 --> 00:27:55,876 but I have a different value here and I label it as M, 668 00:27:56,276 --> 00:27:57,676 but I could label it anything I want. 669 00:27:57,676 --> 00:28:00,836 And then finally dorm is pretty self explanatory too. 670 00:28:00,836 --> 00:28:02,176 It is longer because there is more stuff, 671 00:28:02,536 --> 00:28:05,986 but it is select name equals dorm, size equals one. 672 00:28:06,026 --> 00:28:08,426 That just means show only one at once, don't show them all, 673 00:28:08,426 --> 00:28:12,486 just give me a drop down menu and then this blank one here, 674 00:28:13,026 --> 00:28:15,796 this first option means leave it blank by default. 675 00:28:15,796 --> 00:28:18,456 It looks a little weird if Apley Court is the default, 676 00:28:18,456 --> 00:28:20,166 I would rather it be blank then Apley Court, 677 00:28:20,416 --> 00:28:21,376 just for aesthetics. 678 00:28:21,666 --> 00:28:24,756 And then down below, I have option value equals something 679 00:28:24,956 --> 00:28:27,546 and then inside or outside of the tags, 680 00:28:27,986 --> 00:28:29,186 notice this distinction. 681 00:28:29,186 --> 00:28:32,536 So there is this distinction in X-HTML which is really useful, 682 00:28:32,786 --> 00:28:34,626 a form element can have a value, 683 00:28:34,846 --> 00:28:37,196 but aesthetically it can say something different. 684 00:28:37,516 --> 00:28:39,166 So this is useful, so that you can pass 685 00:28:39,376 --> 00:28:42,456 in for instance numeric values, but actually label them 686 00:28:42,456 --> 00:28:43,796 with something more user friendly. 687 00:28:43,796 --> 00:28:45,866 So there is this distinction, I kept it simple, 688 00:28:45,866 --> 00:28:48,346 they are both identical, but that is not always the case. 689 00:28:48,676 --> 00:28:50,466 And then finally there is only one last input 690 00:28:50,696 --> 00:28:52,296 to achieve this functionality. 691 00:28:52,536 --> 00:28:55,176 At the very bottom, I have input type equals submit, 692 00:28:55,646 --> 00:28:58,296 value equals register exclamation point 693 00:28:58,586 --> 00:29:00,476 and that syntax is what gives me this button 694 00:29:00,716 --> 00:29:01,806 with precisely that label. 695 00:29:02,046 --> 00:29:03,006 So that is all it takes 696 00:29:03,006 --> 00:29:05,686 to create a user interface using X-HTML 697 00:29:05,686 --> 00:29:07,546 and relatively simple form input, 698 00:29:07,836 --> 00:29:09,786 unfortunately the problem we ran into on Monday 699 00:29:09,786 --> 00:29:11,736 when I clicked submit the first time with Google, 700 00:29:12,326 --> 00:29:15,486 it went nowhere, because I hadn't implemented the search 701 00:29:15,616 --> 00:29:17,456 URL, the backend functionality. 702 00:29:17,706 --> 00:29:21,566 So I tweaked my action line and I sent the form not to myself, 703 00:29:21,566 --> 00:29:24,186 but to Google.com itself and that solved 704 00:29:24,186 --> 00:29:25,626 that problem, but that is fine. 705 00:29:25,626 --> 00:29:26,576 That is all fine and good. 706 00:29:26,576 --> 00:29:29,616 Now we need to start pulling our own weight here, 707 00:29:29,876 --> 00:29:31,896 so let's implement our own registration feature 708 00:29:31,896 --> 00:29:32,446 on the backend. 709 00:29:32,446 --> 00:29:33,596 Let's see what happens by default. 710 00:29:33,596 --> 00:29:35,966 So I am going to register John and Matthews 711 00:29:35,966 --> 00:29:37,586 as a captain, click register. 712 00:29:38,196 --> 00:29:39,016 You are registered. 713 00:29:39,096 --> 00:29:41,406 Well not really, alright well let's see what really 714 00:29:41,406 --> 00:29:41,846 happened here. 715 00:29:41,846 --> 00:29:42,536 Let me zoom in. 716 00:29:42,826 --> 00:29:46,176 Notice at the top of this file it says the URL has changed, 717 00:29:46,176 --> 00:29:52,016 it was Frosh IMs 1.php, now I am at register1.php, 718 00:29:52,016 --> 00:29:55,446 because my Frosh IMs 1 file submitted via the action 719 00:29:55,446 --> 00:29:56,586 attribute to this file. 720 00:29:57,126 --> 00:29:59,666 So that was sort of origin, now I am at destination. 721 00:29:59,906 --> 00:30:01,546 So apparently this file, 722 00:30:01,586 --> 00:30:04,396 register1.php is registering the user. 723 00:30:04,396 --> 00:30:06,516 It is emailing that proctor in Wigglesworth 724 00:30:06,516 --> 00:30:08,756 or it is recording it in a database or something. 725 00:30:08,996 --> 00:30:09,706 Well let's take a look. 726 00:30:09,706 --> 00:30:12,566 I am going to now open register1.php, 727 00:30:12,566 --> 00:30:14,486 which you also have a copy of. 728 00:30:14,486 --> 00:30:20,306 Let me scroll down, come on, come on. 729 00:30:22,026 --> 00:30:23,526 Any questions? 730 00:30:23,626 --> 00:30:25,626 [ Laughter ] 731 00:30:25,726 --> 00:30:28,926 Come on, plan B, there we go. 732 00:30:28,926 --> 00:30:37,026 Alright, now it is color-coded, so let's take a look here. 733 00:30:37,076 --> 00:30:39,336 Alright, it looks like I do have some PHP code 734 00:30:39,336 --> 00:30:40,496 at the top of register one. 735 00:30:40,496 --> 00:30:42,506 Let's come back to that in a moment, most of it is comments, 736 00:30:42,506 --> 00:30:43,956 but there is some interesting stuff there. 737 00:30:44,256 --> 00:30:46,686 Let me scroll down, oh this is kind of a cop out. 738 00:30:46,686 --> 00:30:49,286 All I did for the resulting page is I spit 739 00:30:49,286 --> 00:30:51,266 out you are registered, well not really. 740 00:30:51,546 --> 00:30:55,196 So the code must be up top so let's see and this is okay. 741 00:30:55,196 --> 00:30:57,246 So notice now what I have done for the first time, 742 00:30:57,286 --> 00:31:02,646 I now have PHP code inside of a file that also has X-HTML. 743 00:31:02,946 --> 00:31:05,306 So this is one of the upsides of using something like PHP. 744 00:31:05,306 --> 00:31:08,596 You can comingle PHP code in logic 745 00:31:08,836 --> 00:31:11,296 with actual raw content anything 746 00:31:11,296 --> 00:31:13,496 in between the open bracket question mark 747 00:31:13,496 --> 00:31:16,926 and the closed question mark closed bracket means PHP the 748 00:31:16,926 --> 00:31:19,066 program, the interpreter that I ran before, 749 00:31:19,426 --> 00:31:22,426 you deal with this part and what PHP's purpose in life is 750 00:31:22,426 --> 00:31:23,976 which we saw at the command line is just 751 00:31:23,976 --> 00:31:25,666 to produce output, to spit out text. 752 00:31:26,186 --> 00:31:27,736 In my very simple stock quote program, 753 00:31:27,736 --> 00:31:31,046 I just spit out the stock price, but there is nothing saying 754 00:31:31,046 --> 00:31:33,646 that I can't spit out X-HTML, right. 755 00:31:33,646 --> 00:31:35,866 If I really wanted to be clever, let me go back 756 00:31:35,936 --> 00:31:38,376 to my quote program, recall it just looked like this. 757 00:31:38,736 --> 00:31:41,166 Looks like I have the power to print anything I want, 758 00:31:41,406 --> 00:31:44,866 so technically I could do something like print HTML, 759 00:31:45,326 --> 00:31:50,066 print head, print and so forth, this is all it takes 760 00:31:50,066 --> 00:31:52,266 to start generating web pages dynamically, 761 00:31:52,266 --> 00:31:56,546 just generate via print or similar calls the actual X-HTML 762 00:31:56,546 --> 00:31:58,236 and content you want the browser to see. 763 00:31:58,486 --> 00:32:00,036 So this was a command line script, 764 00:32:00,216 --> 00:32:02,606 my quote program now I am doing something inside 765 00:32:02,606 --> 00:32:05,446 of my web directory, public HTML, but the idea is the same, 766 00:32:05,446 --> 00:32:08,276 anything I print will show up on the browser window and not 767 00:32:08,276 --> 00:32:09,596 on this black and white screen. 768 00:32:09,906 --> 00:32:11,246 So what logic am I doing? 769 00:32:11,656 --> 00:32:14,126 Well very common case with form submission is you have 770 00:32:14,126 --> 00:32:14,806 to validate it. 771 00:32:15,106 --> 00:32:17,186 Right, you don't want garbage going into your database. 772 00:32:17,186 --> 00:32:18,036 You don't want spam. 773 00:32:18,036 --> 00:32:19,866 You don't want non-existent usernames 774 00:32:19,866 --> 00:32:21,066 and passwords and all of this. 775 00:32:21,436 --> 00:32:24,846 So a very simple way of checking what the user has done is 776 00:32:24,846 --> 00:32:25,676 with some conditions. 777 00:32:25,676 --> 00:32:29,446 So in PHP we have ifs and else's and fors and whiles and all 778 00:32:29,446 --> 00:32:31,426 of this stuff, so notice what I have done here. 779 00:32:31,426 --> 00:32:34,306 And it wraps a little ugly, but notice what I have done. 780 00:32:34,306 --> 00:32:39,416 If dollar sign underscore post bracket name, so it turns out 781 00:32:39,416 --> 00:32:42,286 and this is a real convenience in this particular language, 782 00:32:42,396 --> 00:32:44,356 any time a user fills out a form 783 00:32:44,756 --> 00:32:47,396 and that form used method equals quote unquote post, 784 00:32:47,726 --> 00:32:50,766 everything the user typed in on the webpage is sent from point A 785 00:32:50,766 --> 00:32:54,026 to B from browser to server, but then it is packaged 786 00:32:54,026 --> 00:32:56,666 up really nicely inside of an array. 787 00:32:56,726 --> 00:33:00,576 And that array is called dollar sign underscore post, 788 00:33:00,816 --> 00:33:03,586 stupid name, but it is all in there for you, 789 00:33:03,786 --> 00:33:06,696 which is really nice because using square bracket notation, 790 00:33:06,936 --> 00:33:10,426 I can then access the name of any parameter that was 791 00:33:10,426 --> 00:33:12,666 in those forms and I had a few parameters. 792 00:33:12,666 --> 00:33:16,086 I had name, I had captain, I had gender, I had dorm. 793 00:33:16,386 --> 00:33:18,716 So if I want to check if the user typed anything 794 00:33:18,716 --> 00:33:20,626 in for their name, I simply ask 795 00:33:20,726 --> 00:33:24,376 if dollar sign underscore post bracket quote unquote name 796 00:33:24,466 --> 00:33:28,096 equals equals nothing, quote unquote that is bad. 797 00:33:28,176 --> 00:33:31,456 I want to redirect them back and have them do it again 798 00:33:31,456 --> 00:33:33,836 or if they fail to give me their gender, 799 00:33:33,946 --> 00:33:34,636 I don't like that either. 800 00:33:34,636 --> 00:33:35,916 I am going to reject their input 801 00:33:36,006 --> 00:33:39,726 or if they gave me a blank dorm equals quote, quote, 802 00:33:39,726 --> 00:33:41,396 I am going to reject their input. 803 00:33:41,396 --> 00:33:44,066 So this whole if condition has three clauses, if no name 804 00:33:44,066 --> 00:33:46,176 or no gender or no dorm, what do we do? 805 00:33:46,176 --> 00:33:48,546 Well a little trick in PHP is if you want 806 00:33:48,546 --> 00:33:50,156 to redirect the user elsewhere, 807 00:33:50,846 --> 00:33:52,336 you call a function called header 808 00:33:52,606 --> 00:33:54,876 and you specify location colon and then the URL 809 00:33:54,876 --> 00:33:56,696 that you want to send them back to. 810 00:33:57,026 --> 00:33:58,806 So had I not behaved well here, 811 00:33:58,806 --> 00:34:01,716 had I been to this registration page and I said you don't need 812 00:34:01,716 --> 00:34:03,816 to know my name, I am just going to show up and I am going 813 00:34:03,816 --> 00:34:07,046 to click register, nothing good happened this time. 814 00:34:07,046 --> 00:34:10,056 I got redirected back to the page presumably 815 00:34:10,056 --> 00:34:11,446 so I can reenter the input. 816 00:34:11,556 --> 00:34:14,536 Now good websites would actually say hey no name, 817 00:34:14,536 --> 00:34:15,586 you need to give us your name. 818 00:34:15,586 --> 00:34:17,616 I have no feedback here, no error messages, 819 00:34:17,616 --> 00:34:21,066 so it is not perfect, but it at least rejected the user's input. 820 00:34:21,316 --> 00:34:24,656 Unfortunately did I actually register the user in any sense 821 00:34:24,756 --> 00:34:26,336 if they do provide legit values? 822 00:34:27,766 --> 00:34:29,926 No, I just kind of tell them that they are registered, 823 00:34:30,056 --> 00:34:31,566 but really nothing happens with it. 824 00:34:31,796 --> 00:34:34,836 So let's take things up a notch and actually register the user 825 00:34:35,046 --> 00:34:37,546 and you know I don't really know much about databases yet, 826 00:34:37,616 --> 00:34:39,586 so let me take a look at, 827 00:34:40,606 --> 00:34:43,236 let me take a peek at version 4 of this. 828 00:34:44,006 --> 00:34:51,236 So 4 is, let me see, do I want to do 4, no let me see 5. 829 00:34:51,986 --> 00:34:53,476 Come on where is the one I am looking for, 830 00:34:54,156 --> 00:34:57,596 it is next to itself. 831 00:34:57,596 --> 00:35:02,866 I can't remember my own numbering scheme, okay, damn it. 832 00:35:03,136 --> 00:35:07,636 Oh right, I am looking in the wrong place, sorry register 3. 833 00:35:07,806 --> 00:35:09,266 We didn't need to get that high. 834 00:35:09,536 --> 00:35:12,306 Alright, so let's take a look at this one Frosh IMs 3. 835 00:35:12,306 --> 00:35:14,816 It is actually going to look almost the same, so let me go 836 00:35:14,816 --> 00:35:17,406 to Frosh IMs 3.php, form is the same 837 00:35:17,616 --> 00:35:19,096 and let's do a quick check at the code. 838 00:35:19,096 --> 00:35:22,406 This is Frosh IMs 3, if I scroll down, scroll down, 839 00:35:22,406 --> 00:35:24,346 the only difference in this code is 840 00:35:24,346 --> 00:35:26,756 that I change the action line to go to register 3. 841 00:35:26,946 --> 00:35:29,026 So I tried to number these things so that they line-up 842 00:35:29,086 --> 00:35:30,476 so that when you read it over on paper, 843 00:35:30,476 --> 00:35:31,796 you can see which corresponds to which. 844 00:35:32,036 --> 00:35:34,286 So register 3.php is the destination, 845 00:35:34,516 --> 00:35:36,716 but the form is exactly the same. 846 00:35:36,716 --> 00:35:38,006 There is really nothing different here. 847 00:35:38,006 --> 00:35:41,806 So let me quit this and let me open register3.php. 848 00:35:42,016 --> 00:35:44,006 So let's see I took a slightly different approach, 849 00:35:44,006 --> 00:35:46,506 but my goal now is let's actually solve this problem 850 00:35:46,506 --> 00:35:47,696 of registering users. 851 00:35:47,916 --> 00:35:50,436 Well I didn't know much about databases in 1996 852 00:35:50,436 --> 00:35:52,326 and frankly the proctor didn't really know much 853 00:35:52,326 --> 00:35:54,436 about databases, so it would have been overkill 854 00:35:54,436 --> 00:35:55,826 to use a database. 855 00:35:56,016 --> 00:35:59,446 But this proctor did use email and a reasonable upgrade 856 00:35:59,446 --> 00:36:02,416 from pieces of paper underneath their door was send them an 857 00:36:02,416 --> 00:36:04,576 email that they can then filter and keep track 858 00:36:04,576 --> 00:36:05,496 of registrants that way. 859 00:36:05,496 --> 00:36:07,536 That was an improvement, not perfect, but better. 860 00:36:07,756 --> 00:36:10,426 But it turns out that languages like php make it really easy 861 00:36:10,426 --> 00:36:11,766 to do things like send email. 862 00:36:12,006 --> 00:36:14,576 So in this version of register, notice the very top 863 00:36:14,576 --> 00:36:16,696 of the file is just a bunch of comments inside 864 00:36:16,696 --> 00:36:18,156 of the open bracket question mark, 865 00:36:18,496 --> 00:36:20,216 but then I do some sanity checking. 866 00:36:20,866 --> 00:36:25,686 If the name field in post does not equal empty 867 00:36:26,016 --> 00:36:29,556 and the gender field does not equal empty 868 00:36:29,556 --> 00:36:31,386 and the dorm does not equal empty, 869 00:36:31,576 --> 00:36:33,556 so I chose a different syntax just to illustrate 870 00:36:33,556 --> 00:36:35,156 that you can use ampersand, ampersand. 871 00:36:35,156 --> 00:36:38,076 You can use not equals, so I have changed the logic to say 872 00:36:38,306 --> 00:36:41,216 if none of these fields are blank that is a good thing. 873 00:36:41,426 --> 00:36:42,726 Let's proceed to send an email. 874 00:36:43,046 --> 00:36:45,506 Well what email do I want to send, well let's create 875 00:36:45,506 --> 00:36:47,946 on the fly here a little variable called two 876 00:36:48,106 --> 00:36:51,356 and I have hardcoded in my email address for demo purposes, 877 00:36:51,356 --> 00:36:53,166 but I would have put the proctors here years ago. 878 00:36:53,786 --> 00:36:55,666 Subject line is going to be registration, 879 00:36:55,936 --> 00:36:57,566 body is going to be the following. 880 00:36:57,566 --> 00:36:59,696 Now body, I wanted to just put the contents 881 00:36:59,696 --> 00:37:00,606 of the registration. 882 00:37:00,786 --> 00:37:02,746 It doesn't need to be beautiful, but it did need 883 00:37:02,746 --> 00:37:06,206 to be a few lines long, so the email was not one long string. 884 00:37:06,496 --> 00:37:10,606 So I did this trick, body equals this person just registered, 885 00:37:10,606 --> 00:37:13,046 black slash n, black slash n, which does enter, enter. 886 00:37:13,416 --> 00:37:16,406 Now notice this, what do you think the dot operator 887 00:37:16,406 --> 00:37:16,956 does here. 888 00:37:17,526 --> 00:37:23,716 Dot, so this is concatenation, so if you ever thought 889 00:37:23,716 --> 00:37:26,066 about trying to take a string in C and append it 890 00:37:26,066 --> 00:37:28,366 to another string in C, it is a real pain in the neck. 891 00:37:28,546 --> 00:37:29,966 You have to allocate a RAM 892 00:37:29,966 --> 00:37:31,606 for it using Ma-lock or the equivalent. 893 00:37:31,806 --> 00:37:34,326 You have to use Stir Cat for string concatenation. 894 00:37:34,326 --> 00:37:36,856 It is a whole bunch of steps to do something simple in PHP, 895 00:37:36,856 --> 00:37:38,866 in Java Script, in Pearl, 896 00:37:38,866 --> 00:37:40,866 in lots of these higher level languages there is a 897 00:37:40,866 --> 00:37:41,706 single operator. 898 00:37:41,706 --> 00:37:45,556 Dot means take this string between quotes and concatenate 899 00:37:45,556 --> 00:37:47,446 with the next string between quotes. 900 00:37:47,696 --> 00:37:50,086 So this is just my nice pretty printed way 901 00:37:50,316 --> 00:37:53,626 of creating a multiline string all inside a variable 902 00:37:53,626 --> 00:37:54,246 called body. 903 00:37:54,246 --> 00:37:56,636 So what am I putting in this email, well this sentence, 904 00:37:56,676 --> 00:37:57,816 this person just registered. 905 00:37:58,026 --> 00:38:00,056 Then I put the person's name, then I put whether 906 00:38:00,056 --> 00:38:02,046 or not they are a captain, then I put their gender, 907 00:38:02,266 --> 00:38:04,086 then I put their dorm, then I put a typo 908 00:38:04,536 --> 00:38:08,706 and then I put a semicolon and that ends the string. 909 00:38:08,856 --> 00:38:11,466 And then finally I have to add this in PHP and I know this 910 00:38:11,466 --> 00:38:14,546 because I read the manual for PHP, a header is variable 911 00:38:14,546 --> 00:38:16,576 that tells the email who it should come from. 912 00:38:16,816 --> 00:38:19,646 Notice this subtlety here, this is sort of a legacy thing 913 00:38:19,646 --> 00:38:22,256 from email and from Windows and Dos, back slash R, 914 00:38:22,256 --> 00:38:25,566 back slash N. It means carriage return, end new line. 915 00:38:25,726 --> 00:38:27,016 They are slightly different ideas 916 00:38:27,016 --> 00:38:29,416 for now just assume you have to do that. 917 00:38:29,646 --> 00:38:31,576 And then finally, PHP has a function. 918 00:38:31,656 --> 00:38:32,416 It is called mail. 919 00:38:32,706 --> 00:38:36,206 It takes a two field, a subject field, a body field 920 00:38:36,206 --> 00:38:38,046 and then these headers and you know what when you get 921 00:38:38,156 --> 00:38:40,726 to the semicolon it sends an email. 922 00:38:40,726 --> 00:38:43,996 Now again, I challenge you to do something like that in C 923 00:38:44,026 --> 00:38:45,856 without a whole bunch of lines of code. 924 00:38:46,036 --> 00:38:48,126 So let's see if this works and let's cross our fingers 925 00:38:48,126 --> 00:38:49,436 that email is actually reliable. 926 00:38:49,646 --> 00:38:52,326 But notice I have my else now if the user failed 927 00:38:52,326 --> 00:38:55,486 to give me a name or a gender or a dorm, I reject them, 928 00:38:55,666 --> 00:38:59,576 I bounce them back to Frosh IMs.php, but notice this. 929 00:38:59,986 --> 00:39:04,616 If I send the mail, I don't redirect the user upon success 930 00:39:04,886 --> 00:39:05,646 to another URL. 931 00:39:06,156 --> 00:39:08,166 This code that we just discussed executes, 932 00:39:08,536 --> 00:39:10,596 that is the else condition does not execute, 933 00:39:10,836 --> 00:39:12,826 so PHP continues on its marry way. 934 00:39:12,826 --> 00:39:15,936 It has not seen the command exit, so PHP continues reading 935 00:39:15,936 --> 00:39:19,466 and reading, PHP sees oh here is the end of the PHP portion 936 00:39:19,466 --> 00:39:22,026 of this file, so what does PHP do now well 937 00:39:22,286 --> 00:39:25,426 if the PHP interpreter encounters just raw x-HTML 938 00:39:25,426 --> 00:39:28,986 or graphics or images or rather email addresses 939 00:39:28,986 --> 00:39:31,396 and all this it spits it out literally. 940 00:39:31,506 --> 00:39:33,786 It just dumps it to the screen unprocessed. 941 00:39:34,276 --> 00:39:36,516 So to be clear, this open bracket question mark is a 942 00:39:36,516 --> 00:39:40,996 directive to PHP saying here is code that you need to analyze 943 00:39:40,996 --> 00:39:44,306 and execute, the rest of this is just fluffy X-HTML 944 00:39:44,306 --> 00:39:46,606 and static content, but I have comingled them 945 00:39:46,606 --> 00:39:49,116 and that is just kind of nice and convenient here. 946 00:39:49,346 --> 00:39:52,926 So fingers crossed, I am going to go into the form here. 947 00:39:52,926 --> 00:39:54,666 I am going to register John again, 948 00:39:54,666 --> 00:39:58,876 I am going to do a captain mail in Matthews and I am going 949 00:39:58,876 --> 00:40:00,846 to click actually let's do this in advance. 950 00:40:00,846 --> 00:40:04,366 I am going to go to my mail account, alright. 951 00:40:04,366 --> 00:40:13,356 I am going to log in here to my Gmail like inbox and oaky 952 00:40:13,896 --> 00:40:16,156 so I have got no mail, no friends, 953 00:40:16,156 --> 00:40:17,526 no mail at this particular account. 954 00:40:17,526 --> 00:40:21,226 So fingers crossed, click register, 955 00:40:22,206 --> 00:40:25,336 okay you are registered really, so that code seemed to execute. 956 00:40:25,386 --> 00:40:27,106 Now fingers crossed or otherwise this would be the most 957 00:40:27,106 --> 00:40:30,456 disappointing demo today, let's reload, oh it worked. 958 00:40:31,026 --> 00:40:33,166 So I got an email now from me because I sent it 959 00:40:33,166 --> 00:40:35,036 to myself saying this person just registered 960 00:40:35,216 --> 00:40:38,216 and this is literally all the Frosh IMs registration was 961 00:40:38,216 --> 00:40:39,266 in 1996. 962 00:40:39,266 --> 00:40:41,256 It was different language, kind of a different interface, 963 00:40:41,586 --> 00:40:43,346 but we just emailed the proctor this 964 00:40:43,346 --> 00:40:48,116 and this was a huge leap forward and relatively easy just 965 00:40:48,116 --> 00:40:51,226 to reinforce all it took to make that functionality happen, 966 00:40:51,226 --> 00:40:53,766 which is arguably pretty useful for almost any student group 967 00:40:53,766 --> 00:40:55,966 on campus that just needs sign up for something. 968 00:40:55,966 --> 00:40:57,396 It took a few lines of code. 969 00:40:57,396 --> 00:40:58,626 Let's take a five minute break. 970 00:41:02,026 --> 00:41:05,756 Okay, alright we are back. 971 00:41:05,876 --> 00:41:07,016 So that was a lot of new stuff. 972 00:41:07,016 --> 00:41:09,656 So let's just paint a complete picture here. 973 00:41:09,656 --> 00:41:12,876 So the first example I did was this stock quote program 974 00:41:13,216 --> 00:41:15,286 and I wrote that as a command line program, 975 00:41:15,486 --> 00:41:19,856 so I had to explicitly tell my shell, my blinking prompt how 976 00:41:19,856 --> 00:41:21,236 to interpret this code. 977 00:41:21,236 --> 00:41:24,666 And that is why I wrote PHP space and then quote.php, 978 00:41:25,066 --> 00:41:26,306 but clearly I have not been doing 979 00:41:26,306 --> 00:41:27,626 that for the web interaction. 980 00:41:27,856 --> 00:41:29,616 Well it turns out one of the features provided 981 00:41:29,616 --> 00:41:31,606 by modern web services is the ability 982 00:41:31,606 --> 00:41:35,296 to interpret other languages besides just X-HTML. 983 00:41:35,376 --> 00:41:38,186 Typically, a web server's purpose in life is to take 984 00:41:38,186 --> 00:41:40,196 in a request via URL, look 985 00:41:40,196 --> 00:41:43,256 at the file name and it is foo.html. 986 00:41:43,466 --> 00:41:46,386 It finds foo.html on its hard drive and then it spits 987 00:41:46,436 --> 00:41:48,136 out those bytes back to the internet 988 00:41:48,136 --> 00:41:51,186 and the browser displays them per Monday's conversation. 989 00:41:51,656 --> 00:41:53,896 But in this context, the web server needs 990 00:41:53,896 --> 00:41:55,536 to do a little more, the web server needs 991 00:41:55,536 --> 00:41:59,546 to actually analyze the file like Frosh IMs 1.php, 992 00:41:59,996 --> 00:42:04,536 look for open bracket question mark and convert any of the code 993 00:42:04,536 --> 00:42:07,066 in there to raw textual output. 994 00:42:07,066 --> 00:42:08,596 In any words, if there is any print lines, 995 00:42:08,856 --> 00:42:13,416 it needs to send those strings to the browser in addition 996 00:42:13,416 --> 00:42:14,776 to any of the static content. 997 00:42:15,046 --> 00:42:18,066 So this is long story short, a simple configuration issue. 998 00:42:18,066 --> 00:42:19,466 If you run your own web server, 999 00:42:19,466 --> 00:42:21,246 if you are a system administrator with a server, 1000 00:42:21,476 --> 00:42:24,046 you can simply configure your web server software, 1001 00:42:24,046 --> 00:42:27,586 it is often called Apache or IIS although there are others, 1002 00:42:27,586 --> 00:42:30,926 you configure your web server to know that .php files, 1003 00:42:31,056 --> 00:42:35,636 if you ever see a URL with .php, make sure to pass it first 1004 00:42:35,886 --> 00:42:38,956 to PHP.exe, the interpreter or the equivalent, 1005 00:42:39,246 --> 00:42:41,346 get back the results and send the results 1006 00:42:41,346 --> 00:42:42,426 to the user's browser. 1007 00:42:42,426 --> 00:42:44,886 So there is a bit of a middle man process there in the form 1008 00:42:44,886 --> 00:42:47,466 of this interpreter, so in fact serving 1009 00:42:47,466 --> 00:42:50,966 up PHP content is actually less efficient certainly 1010 00:42:50,966 --> 00:42:52,426 than spitting out raw content 1011 00:42:52,826 --> 00:42:54,556 and in fact we will see probably next week 1012 00:42:54,596 --> 00:42:58,116 that implementing programs in PHP and higher level languages 1013 00:42:58,116 --> 00:43:00,836 like it often is so much easier for development 1014 00:43:00,836 --> 00:43:02,126 and it just gets the job done fast, 1015 00:43:02,716 --> 00:43:04,426 but not necessarily very efficiently. 1016 00:43:04,426 --> 00:43:07,016 You will see and I will be able to implement, 1017 00:43:07,016 --> 00:43:08,816 I probably shouldn't tell you this, but I will be able 1018 00:43:08,816 --> 00:43:12,636 to implement problem set 6 in essentially one line of code 1019 00:43:12,856 --> 00:43:16,706 of PHP on Monday and that is great if not frustrating, 1020 00:43:16,926 --> 00:43:18,066 but its performance will suck. 1021 00:43:18,136 --> 00:43:20,636 It will take much, much longer to run 1022 00:43:20,906 --> 00:43:22,706 than your C based implementation. 1023 00:43:22,706 --> 00:43:24,256 So there is actually a reason 1024 00:43:24,256 --> 00:43:25,756 for teaching the lower level details, 1025 00:43:26,006 --> 00:43:28,996 it will actually serve you well, realize even as you start 1026 00:43:28,996 --> 00:43:30,766 to take for granted certain features, 1027 00:43:31,056 --> 00:43:33,956 certainly a smart person and a computer scientist, 1028 00:43:33,956 --> 00:43:37,086 as opposed to just someone who has some programming background, 1029 00:43:37,286 --> 00:43:39,646 you will understand the nuances of picking this algorithm 1030 00:43:39,646 --> 00:43:42,636 or this data structure or this language or that and again 1031 00:43:42,636 --> 00:43:43,726 that is one of the goals here. 1032 00:43:43,916 --> 00:43:46,846 Now an interesting question came up during break, 1033 00:43:46,846 --> 00:43:49,076 which was what is to stop me from saying this is not 1034 00:43:49,076 --> 00:43:53,126 from myself, but say our own head teaching fellow Jen 1035 00:43:53,176 --> 00:43:53,746 [inaudible] did that. 1036 00:43:53,966 --> 00:43:56,326 Well nothing, so let's go ahead and register 1037 00:43:56,436 --> 00:44:05,496 and in fact let's say in fact dah, dah, question mark, uh huh. 1038 00:44:05,746 --> 00:44:10,946 How about hmm, well what is something, 1039 00:44:10,946 --> 00:44:11,896 I have nothing funny here, 1040 00:44:11,896 --> 00:44:16,026 so this is not really from Jensu [ph]. 1041 00:44:16,286 --> 00:44:19,256 Alright, so I have pended a stupid string there, 1042 00:44:19,366 --> 00:44:22,456 but I have changed the from URL, the from value there 1043 00:44:22,456 --> 00:44:23,816 in the header, so let me save this, 1044 00:44:23,816 --> 00:44:26,076 let me go back to my webpage. 1045 00:44:26,266 --> 00:44:28,246 Let me go back to the form, let's go ahead 1046 00:44:28,246 --> 00:44:35,776 and register not John, but Sam, click register, okay. 1047 00:44:35,866 --> 00:44:38,926 You are registered really, let's go it is already there. 1048 00:44:38,976 --> 00:44:41,676 Oh thank you Jensu and here we have a message 1049 00:44:41,676 --> 00:44:43,846 from idadatfsa.harvard.edu. 1050 00:44:44,186 --> 00:44:48,106 So now so easy to do, don't do it, so technically doing things 1051 00:44:48,106 --> 00:44:49,556 like this within Harvard's campus is 1052 00:44:49,556 --> 00:44:51,036 against the ad board rules and all this. 1053 00:44:51,036 --> 00:44:52,866 I learned the hard way freshman year when I did this. 1054 00:44:52,866 --> 00:44:53,276 [ Laughter ] 1055 00:44:53,276 --> 00:44:58,156 No, I actually did stupid freshman. 1056 00:44:58,236 --> 00:45:00,956 And I had forged an email, 1057 00:45:01,126 --> 00:45:02,886 we had some stupid banter going back 1058 00:45:02,886 --> 00:45:06,026 and forth among our proctor group and I decided to chime 1059 00:45:06,026 --> 00:45:08,316 in on behalf of someone that I disagreed with, 1060 00:45:08,316 --> 00:45:11,316 so I thought I would change his opinion, really bad idea. 1061 00:45:11,316 --> 00:45:11,506 [ Laughter ] 1062 00:45:11,506 --> 00:45:14,126 And like an idiot, I was using a mail program 1063 00:45:14,126 --> 00:45:15,786 that automatically appended to the bottom 1064 00:45:15,786 --> 00:45:17,416 of all my email my signature, DJM. 1065 00:45:17,416 --> 00:45:17,483 [ Laughter ] 1066 00:45:17,483 --> 00:45:17,550 [ Applause ] 1067 00:45:17,550 --> 00:45:30,896 Anyhow, not so bright, I was caught so don't do this. 1068 00:45:31,796 --> 00:45:34,526 Don't do as I do, do as I say, anyhow. 1069 00:45:35,046 --> 00:45:38,136 So it is that easy, but frankly you can spend a whole course 1070 00:45:38,136 --> 00:45:39,276 talking about how the internet works 1071 00:45:39,276 --> 00:45:41,386 and why actually this is very reasonable 1072 00:45:41,386 --> 00:45:42,916 that it is that easy to do. 1073 00:45:42,916 --> 00:45:44,306 There really is no authentication 1074 00:45:44,306 --> 00:45:45,726 when it comes to email these days. 1075 00:45:46,056 --> 00:45:47,756 So let's take a look at the slight variance 1076 00:45:47,756 --> 00:45:48,686 of that first example. 1077 00:45:48,686 --> 00:45:50,326 This is Frosh IMs2.php 1078 00:45:50,326 --> 00:45:53,056 and remember this first example was pretty lame, 1079 00:45:53,056 --> 00:45:55,446 because if I made a mistake I was not so much 1080 00:45:55,446 --> 00:45:56,636 as even informed of it. 1081 00:45:56,736 --> 00:45:58,506 I was just sent back to the original page, 1082 00:45:58,506 --> 00:46:00,906 which makes me feel like the website is broken, 1083 00:46:00,906 --> 00:46:01,946 not my own input. 1084 00:46:02,216 --> 00:46:06,056 So let me try again and put myself, I will be captain, 1085 00:46:06,056 --> 00:46:08,966 male from Matthews and let's click register, 1086 00:46:08,966 --> 00:46:12,296 okay that worked sort of, but let's go back now 1087 00:46:12,296 --> 00:46:14,256 and forget my name and click register. 1088 00:46:14,456 --> 00:46:16,606 Okay, so now we have some user feedback, 1089 00:46:16,776 --> 00:46:19,016 so before I was just punting, I was sending the user 1090 00:46:19,016 --> 00:46:22,746 on my merry way if I screwed up, but if I go into Frosh Ims 2, 1091 00:46:23,086 --> 00:46:25,186 notice that this version almost the same, 1092 00:46:25,186 --> 00:46:26,436 but it submits to Register 2. 1093 00:46:26,436 --> 00:46:29,906 So I am going to open up register 2.php 1094 00:46:29,906 --> 00:46:35,976 and in here I see oh interesting there is actually no logic 1095 00:46:35,976 --> 00:46:36,856 up at the top. 1096 00:46:37,026 --> 00:46:38,996 So to make clear the structure of PHP, 1097 00:46:38,996 --> 00:46:41,216 this is a good thing and a bad thing. 1098 00:46:41,216 --> 00:46:44,826 PHP is kind of a messy language, because you are co-mingling code 1099 00:46:44,826 --> 00:46:47,406 with static content and in general especially 1100 00:46:47,406 --> 00:46:49,556 for complex projects, this is frowned upon 1101 00:46:49,556 --> 00:46:51,166 because things get messy very easily, 1102 00:46:51,166 --> 00:46:53,866 but on the upside is it is so damn easy to do things quickly. 1103 00:46:54,146 --> 00:46:55,876 Right even that Twitter site, again I will harp on it, 1104 00:46:56,026 --> 00:46:57,726 it only took a couple of nights of playing 1105 00:46:57,726 --> 00:46:58,846 around to get working. 1106 00:46:58,846 --> 00:47:01,266 And you know, it is not the most beautiful thing underneath the 1107 00:47:01,266 --> 00:47:04,646 world, I could completely over engineer it with something 1108 00:47:04,646 --> 00:47:07,236 like Java, but my goal was just to do it and get to sleep. 1109 00:47:07,266 --> 00:47:09,586 So again, these are trade-offs, they are just another resource, 1110 00:47:09,586 --> 00:47:13,296 your own time is a factor when making design decisions. 1111 00:47:13,646 --> 00:47:15,546 So here notice what I have done for the first time, 1112 00:47:15,836 --> 00:47:17,606 inside of the body of my page, 1113 00:47:17,726 --> 00:47:20,676 I have actually said oh wait web server, here comes some logic, 1114 00:47:20,916 --> 00:47:23,286 process this before sending the output to the browser 1115 00:47:23,456 --> 00:47:26,326 and notice I have done this open bracket, question mark, 1116 00:47:26,656 --> 00:47:29,666 then I have if closed name equals, equals nothing, 1117 00:47:29,666 --> 00:47:30,696 so I have that same check. 1118 00:47:31,046 --> 00:47:32,286 So notice what I do this time, 1119 00:47:32,576 --> 00:47:36,006 if any of those fields are blank, notice here at the end 1120 00:47:36,006 --> 00:47:37,916 of the if statement, new syntactic detail. 1121 00:47:37,916 --> 00:47:41,526 I have a colon, because I then have a closed question mark, 1122 00:47:41,526 --> 00:47:45,346 closed bracket, so this means logically if the stuff 1123 00:47:45,346 --> 00:47:47,106 in between these two angled brackets 1124 00:47:47,106 --> 00:47:49,076 and question marks evaluates to true, 1125 00:47:49,466 --> 00:47:51,736 spit out the following stuff raw, 1126 00:47:51,736 --> 00:47:52,926 just sent it to the browser. 1127 00:47:53,116 --> 00:47:54,916 So what do I send, well I am sending 1128 00:47:54,916 --> 00:47:57,406 to the browser this sentence, you must provide your name, 1129 00:47:57,406 --> 00:48:00,116 gender and dorm, go to this URL, go back. 1130 00:48:00,286 --> 00:48:02,766 So I am just yelling at the user, else notice this, 1131 00:48:02,766 --> 00:48:05,276 I am back in PHP mode, open bracket question mark, 1132 00:48:05,276 --> 00:48:09,526 closed bracket here else colon, you are registered. 1133 00:48:09,816 --> 00:48:13,406 And just as an aside, no let's keep it simple like that. 1134 00:48:13,406 --> 00:48:15,306 The new syntactic detail here too is that at the end 1135 00:48:15,306 --> 00:48:18,286 of this block, I explicitly say end if, so PHP knows 1136 00:48:18,286 --> 00:48:19,646 that it is the end of this condition. 1137 00:48:19,876 --> 00:48:23,926 So you can drop in and out of PHP mode fairly seamlessly just 1138 00:48:23,926 --> 00:48:25,736 to put different contents where you want. 1139 00:48:25,736 --> 00:48:28,586 So that alone is useful and there is one other paradigm 1140 00:48:28,616 --> 00:48:31,666 that I wanted to introduce before we improve this otherwise 1141 00:48:31,666 --> 00:48:34,386 fairly quick and dirty frosh IMs registration. 1142 00:48:34,706 --> 00:48:37,486 So now this version is fundamentally different, 1143 00:48:37,486 --> 00:48:40,896 this is Frosh IM 4.php which you also have a print out of. 1144 00:48:41,226 --> 00:48:45,306 It is kind of rubs me the wrong way that I have files 1145 00:48:45,306 --> 00:48:48,316 like Frosh IMs one submitting to register one 1146 00:48:48,316 --> 00:48:50,296 and Frosh IMs 2 committing to register 2, 1147 00:48:50,486 --> 00:48:53,266 because what happens is that if there is a mistake, the user has 1148 00:48:53,326 --> 00:48:54,956 to hit back, the back button. 1149 00:48:55,256 --> 00:48:57,166 And the problem with this on a lot of websites is 1150 00:48:57,166 --> 00:48:58,796 that if you hit back and you just filled 1151 00:48:58,796 --> 00:49:00,956 out a really big form, but you made a mistake what happens 1152 00:49:00,956 --> 00:49:01,726 sometimes when you hit back. 1153 00:49:03,116 --> 00:49:03,596 >> You lose it. 1154 00:49:03,596 --> 00:49:04,926 >> You lose all of the form. 1155 00:49:04,926 --> 00:49:06,346 There is nothing more infuriating 1156 00:49:06,346 --> 00:49:07,686 than a poorly designed form, 1157 00:49:07,686 --> 00:49:09,886 especially when it is asking you lots of questions. 1158 00:49:09,886 --> 00:49:13,466 Now this really lends itself to that risk, if I click back, 1159 00:49:13,466 --> 00:49:15,776 unless my browser is being friendly to me I am going 1160 00:49:15,776 --> 00:49:16,726 to use some of the content. 1161 00:49:16,726 --> 00:49:17,796 Not always, it depends 1162 00:49:17,796 --> 00:49:21,096 on various design decisions, but that can happen. 1163 00:49:21,356 --> 00:49:23,436 And just plus, it would be a lot nicer in terms 1164 00:49:23,436 --> 00:49:25,656 of user interface, give me the feedback 1165 00:49:25,656 --> 00:49:27,716 on the same page the problem exists on, 1166 00:49:27,716 --> 00:49:29,216 don't put the burden on me. 1167 00:49:29,216 --> 00:49:29,896 You are the computer. 1168 00:49:29,896 --> 00:49:31,596 You are smart enough to know where the problem was, 1169 00:49:31,846 --> 00:49:33,056 show me, don't tell me. 1170 00:49:33,506 --> 00:49:36,726 So Frosh IMs 4 is a fundamentally different approach 1171 00:49:36,946 --> 00:49:39,336 in that if I scroll down to my action line here, 1172 00:49:39,586 --> 00:49:41,626 notice to what file it happens to submit. 1173 00:49:42,256 --> 00:49:45,586 It submits to itself. 1174 00:49:46,236 --> 00:49:48,546 So this is kind of a neat trick and it allows you to clean 1175 00:49:48,546 --> 00:49:51,326 up your code a little bit and consolidate into fewer files. 1176 00:49:51,656 --> 00:49:56,056 So now I have Frosh IMs 4.php submitting to Frosh IMs 4.php 1177 00:49:56,056 --> 00:49:57,906 and that is fine, but now I have 1178 00:49:57,906 --> 00:50:00,156 to consider there is kind of two cases here. 1179 00:50:00,436 --> 00:50:03,346 Someone is going to visit Frosh IMs 4.php with a browser, 1180 00:50:03,436 --> 00:50:05,366 either for the first time in which case, 1181 00:50:05,366 --> 00:50:06,806 I need to just show them the form. 1182 00:50:06,876 --> 00:50:07,626 There is no errors. 1183 00:50:07,626 --> 00:50:09,226 There is no yelling, just show them the form, 1184 00:50:09,356 --> 00:50:10,666 because they are here for the first time. 1185 00:50:11,006 --> 00:50:14,126 But case two is they are here, they have submitted, 1186 00:50:14,126 --> 00:50:16,776 they are back here, now I have got some input from them, 1187 00:50:16,776 --> 00:50:18,986 I need to tell them either yay or neigh 1188 00:50:18,986 --> 00:50:20,856 that they did a good job filling out this form. 1189 00:50:21,166 --> 00:50:23,276 So there is two cases, so that just sort of asks 1190 00:50:23,276 --> 00:50:25,356 for a condition at the top of the file. 1191 00:50:25,406 --> 00:50:28,056 So let's scroll up to the same file Frosh IMs 4 and aha, 1192 00:50:28,436 --> 00:50:30,086 there is in fact an if condition here, 1193 00:50:30,366 --> 00:50:31,796 so I am doing this little check 1194 00:50:31,796 --> 00:50:33,436 and there is many different ways to do this. 1195 00:50:33,436 --> 00:50:37,416 I tried to pick a simple one, if the value of action, 1196 00:50:37,736 --> 00:50:41,186 which is some parameter defined in the form is non-zero. 1197 00:50:41,186 --> 00:50:43,146 If it is true, if there is anything there, 1198 00:50:43,526 --> 00:50:44,486 do the following. 1199 00:50:44,706 --> 00:50:46,936 So this very simple if clause at the top 1200 00:50:46,936 --> 00:50:50,746 of this file is just a little check was the form submitted 1201 00:50:50,746 --> 00:50:51,196 or not. 1202 00:50:51,486 --> 00:50:53,256 If it was submitted, proceed 1203 00:50:53,256 --> 00:50:54,946 to execute the following lines of code. 1204 00:50:54,976 --> 00:50:57,936 If it was not just submitted, just go about your merry way, 1205 00:50:57,936 --> 00:51:01,016 dump the entire contents that are static to the webpage 1206 00:51:01,226 --> 00:51:02,476 and be done with it as usual. 1207 00:51:02,766 --> 00:51:04,836 So what am I doing if the form was submitted, 1208 00:51:04,976 --> 00:51:06,326 well I am doing this sanity check. 1209 00:51:06,646 --> 00:51:09,706 So if the name field is blank or gender is blank 1210 00:51:09,706 --> 00:51:13,626 or dorm is blank, interesting I am setting a new variable called 1211 00:51:13,626 --> 00:51:15,446 error equal to true. 1212 00:51:15,776 --> 00:51:17,786 So PHP supports Boolean values as well 1213 00:51:17,786 --> 00:51:19,376 and notice I have not declared error, 1214 00:51:19,376 --> 00:51:21,096 so this is a good thing and a bad thing. 1215 00:51:21,246 --> 00:51:25,116 I have declared error inside of curly braces no less, 1216 00:51:25,486 --> 00:51:29,626 but unlike C, which would have this variable error living only 1217 00:51:29,626 --> 00:51:31,956 within this tightly structured scope, 1218 00:51:31,956 --> 00:51:33,276 it would disappear elsewhere, 1219 00:51:33,276 --> 00:51:36,086 it turns out that the moment you declare a variable in PHP, 1220 00:51:36,086 --> 00:51:40,376 if it is not in the function, if it is in the file itself, 1221 00:51:40,666 --> 00:51:42,256 it becomes global automatically. 1222 00:51:42,506 --> 00:51:44,666 So that is useful, it is also a little messy, 1223 00:51:44,776 --> 00:51:45,846 but it is a trade off here. 1224 00:51:46,066 --> 00:51:48,846 So this means error is true if the user failed 1225 00:51:48,846 --> 00:51:52,246 to provide a name, gender or dorm, but it is just not set, 1226 00:51:52,376 --> 00:51:54,796 it is false if they didn't make those mistakes. 1227 00:51:54,926 --> 00:51:58,186 So I get an implicit value of false, so where is it useful. 1228 00:51:58,186 --> 00:52:00,646 Well let me scroll down to the actual content of the page, 1229 00:52:01,076 --> 00:52:05,286 notice that this isn't quite all raw HTML this time or X-HTML. 1230 00:52:05,516 --> 00:52:08,736 Notice that I very subtlety nested inside of this file, 1231 00:52:08,996 --> 00:52:13,036 this line here, beneath the big bold setting heading of register 1232 00:52:13,036 --> 00:52:15,356 for Frosh IMs, notice I have got a condition. 1233 00:52:15,596 --> 00:52:18,866 I dropped into PHP mode momentarily and I said if error, 1234 00:52:19,136 --> 00:52:22,556 if error is true, if I actually set it up top in the file, 1235 00:52:22,816 --> 00:52:27,026 what do I print, well what message gets printed. 1236 00:52:27,026 --> 00:52:29,766 You must fill out the form, how did I do this, well it turns 1237 00:52:29,766 --> 00:52:31,506 out there is this tag called div, 1238 00:52:31,676 --> 00:52:33,146 div makes a division of the page. 1239 00:52:33,146 --> 00:52:35,256 It is like putting an invisible rectangle on the page 1240 00:52:35,256 --> 00:52:38,146 that you can fill with content, style is very related 1241 00:52:38,146 --> 00:52:40,066 to our discussion of CSS on Monday. 1242 00:52:40,336 --> 00:52:41,726 This is just a quick and dirty way 1243 00:52:41,726 --> 00:52:44,046 of changing the style of an individual tag. 1244 00:52:44,286 --> 00:52:47,096 Classes and that stuff that we discussed very briefly is a way 1245 00:52:47,096 --> 00:52:49,476 of factoring out this, but I just wanted something quick 1246 00:52:49,476 --> 00:52:51,406 and dirty, so I say the following style 1247 00:52:51,406 --> 00:52:54,586 of this text should be red, color:red, 1248 00:52:54,836 --> 00:52:55,736 so let's see what happens. 1249 00:52:55,766 --> 00:53:00,966 This is Frosh IMS4.php and let me go in here, hit enter. 1250 00:53:01,636 --> 00:53:04,396 Alright, I am going to go ahead and not provide my name, 1251 00:53:04,396 --> 00:53:07,906 but I will say captain, mail and Matthews again and register. 1252 00:53:08,486 --> 00:53:11,646 So much better, so still imperfect, lots of rooms 1253 00:53:11,646 --> 00:53:14,886 for improvement still, but now we are finally taking baby steps 1254 00:53:14,886 --> 00:53:17,436 if you will to a much more realistic website 1255 00:53:17,606 --> 00:53:19,146 that provides you with immediate feedback. 1256 00:53:19,456 --> 00:53:22,256 This is not the only way that you could implement this logic. 1257 00:53:22,256 --> 00:53:23,716 I could have done you the checking later 1258 00:53:23,716 --> 00:53:24,616 in the form maybe. 1259 00:53:24,616 --> 00:53:26,096 I could have used different variable names. 1260 00:53:26,376 --> 00:53:28,966 So realize too the process of implementing P set 7 1261 00:53:28,966 --> 00:53:30,486 and 8 will be somewhat exploratory 1262 00:53:30,606 --> 00:53:32,206 and you will see different paradigms from me 1263 00:53:32,206 --> 00:53:34,106 and from the teaching fellows because a lot 1264 00:53:34,106 --> 00:53:36,446 of the stuff is fairly young too and it is a language 1265 00:53:36,446 --> 00:53:38,846 that is constantly evolving, PHP in particular, 1266 00:53:39,036 --> 00:53:40,236 so there are different approaches 1267 00:53:40,236 --> 00:53:41,166 to these kind of trips. 1268 00:53:41,426 --> 00:53:45,866 But the basic ideas all boil down to like week zero concepts, 1269 00:53:46,026 --> 00:53:48,566 which is kind of cool that these same things are now actually 1270 00:53:48,566 --> 00:53:51,526 proving useful, so the problem now is 1271 00:53:51,526 --> 00:53:54,976 that we are using my Gmail account for the registration 1272 00:53:54,976 --> 00:53:56,486 and this doesn't scale very well. 1273 00:53:56,486 --> 00:53:58,046 if you are running something like Model UN 1274 00:53:58,046 --> 00:53:59,616 and you have hundreds of registrations 1275 00:53:59,616 --> 00:54:02,416 and not just a handful from captains around campus, 1276 00:54:02,696 --> 00:54:04,056 you kind of need something better, 1277 00:54:04,056 --> 00:54:06,446 I mean even an Excel spreadsheet would be nice, 1278 00:54:06,476 --> 00:54:08,936 because then we can manipulate things, I don't have to copy 1279 00:54:08,936 --> 00:54:12,956 and paste, so I kind of like to have a Microsoft Excel document 1280 00:54:13,216 --> 00:54:15,596 that maybe has something like a column for name 1281 00:54:15,866 --> 00:54:21,066 and then captain, yes or no, and then gender and then dorm. 1282 00:54:21,216 --> 00:54:25,896 And then like row by row, all the registrants for Frosh IMS. 1283 00:54:26,136 --> 00:54:29,136 Well I can do a number of things here with PHP, 1284 00:54:29,136 --> 00:54:31,516 just as I can do generate raw text as we saw 1285 00:54:31,516 --> 00:54:34,466 with my quotes program, just as I can generate X-HTML 1286 00:54:34,466 --> 00:54:36,086 as I started too with that same example 1287 00:54:36,086 --> 00:54:36,976 and we have been doing here, 1288 00:54:37,626 --> 00:54:40,236 I could also just generate a text file that has a bunch 1289 00:54:40,236 --> 00:54:42,366 of fields separated by what special character. 1290 00:54:43,806 --> 00:54:47,436 So I could just use commas, I could write a program that just 1291 00:54:47,436 --> 00:54:50,946 like you guys are doing for problem set 5, you used F open 1292 00:54:50,946 --> 00:54:53,696 to create a new file and dump binary data to it, 1293 00:54:53,696 --> 00:54:55,336 you could just print textual data. 1294 00:54:55,336 --> 00:54:59,016 So I could create my own little database in just a CSV file 1295 00:54:59,076 --> 00:55:03,036 in my account and that is not bad, but it also does not scale. 1296 00:55:03,136 --> 00:55:05,626 Facebook was not implemented with CSV files 1297 00:55:05,626 --> 00:55:09,626 and most websites, even CS50's website does not use simple text 1298 00:55:09,626 --> 00:55:11,706 files, because you want a little more dynamism 1299 00:55:11,706 --> 00:55:12,826 and you want more performance. 1300 00:55:12,826 --> 00:55:15,236 You want more performance than simple text files allow, 1301 00:55:15,546 --> 00:55:18,296 so there exists these things in the world called databases. 1302 00:55:18,356 --> 00:55:20,446 My SQL is a popular one and it is one 1303 00:55:20,446 --> 00:55:21,866 that still drives much of Facebook. 1304 00:55:22,196 --> 00:55:24,996 Oracle is another one, Microsoft Access, 1305 00:55:26,196 --> 00:55:28,606 Sequel Server is another, there is a whole bunch of them. 1306 00:55:28,606 --> 00:55:31,146 Some of them are free, some of them are not free. 1307 00:55:31,146 --> 00:55:33,166 My SQL happens to be free and it happens 1308 00:55:33,166 --> 00:55:35,626 to be the most popular one at least 1309 00:55:35,626 --> 00:55:39,156 in the open source community and also just in typical websites. 1310 00:55:39,156 --> 00:55:41,966 So if you guys go out after 50 for your student group 1311 00:55:41,966 --> 00:55:45,146 or for your personal use and go buy a domain name 1312 00:55:45,146 --> 00:55:48,066 and host it somewhere, you will have access to my SQL. 1313 00:55:48,156 --> 00:55:50,486 So that is what we are going to use for CS 50, 1314 00:55:50,486 --> 00:55:53,196 My SQL is a relational database. 1315 00:55:53,586 --> 00:55:56,876 A relational database just means that all of your data is stored 1316 00:55:56,876 --> 00:55:59,026 in rows and columns, multiple tables. 1317 00:55:59,426 --> 00:56:02,386 So essentially what a relational database gives you is a fancy 1318 00:56:02,386 --> 00:56:03,906 version of Microsoft Excel. 1319 00:56:03,906 --> 00:56:06,936 Excel has as you may know this feature of worksheets 1320 00:56:07,156 --> 00:56:09,956 and at the bottom left here is where I am clicking so think 1321 00:56:09,956 --> 00:56:12,016 of an Excel document as a database, 1322 00:56:12,446 --> 00:56:14,626 think of worksheets as tables. 1323 00:56:14,956 --> 00:56:16,116 So what you will be given 1324 00:56:16,186 --> 00:56:18,496 for problem set 7 is your own database, 1325 00:56:18,496 --> 00:56:22,396 it is going to be called username_Pset7 and in 1326 00:56:22,396 --> 00:56:24,846 that database you can create any number of tables. 1327 00:56:24,846 --> 00:56:26,606 And you are going to have to create one or more tables 1328 00:56:26,646 --> 00:56:29,086 to implement this thing called CS 50 finance. 1329 00:56:29,086 --> 00:56:31,556 So let's see if we can't take a step toward that idea 1330 00:56:31,846 --> 00:56:34,066 by solving this Frosh IMs problem a little better. 1331 00:56:34,066 --> 00:56:36,086 What I essentially want to do is implement the database 1332 00:56:36,356 --> 00:56:40,846 that stores fields like this, well you could do this, 1333 00:56:41,306 --> 00:56:43,306 back in the day if you wanted to use a database, 1334 00:56:43,416 --> 00:56:45,516 you would type a command like My SQL 1335 00:56:45,876 --> 00:56:49,496 and you would specify the host, which is going 1336 00:56:49,536 --> 00:56:51,936 to be what do I want to say here, 1337 00:56:52,206 --> 00:56:55,596 let me do one little difference here. 1338 00:56:56,146 --> 00:56:58,766 You would do type a command, My SQL, 1339 00:56:58,766 --> 00:57:01,286 you would specify your username, you would specify P 1340 00:57:01,286 --> 00:57:04,556 for your password and then you would get a very retro black 1341 00:57:04,556 --> 00:57:07,696 and what aski art like interface to a database. 1342 00:57:08,076 --> 00:57:10,706 Kind of annoying, although My SQL stuff is very powerful, 1343 00:57:10,776 --> 00:57:12,986 so it is kind of underwhelming for what this thing can do. 1344 00:57:13,156 --> 00:57:15,926 I mean Facebook is, not to harp on that particular example, 1345 00:57:15,926 --> 00:57:19,036 driven largely today by My SQL databases. 1346 00:57:19,386 --> 00:57:21,426 So let's take a look at what this looks like. 1347 00:57:21,736 --> 00:57:24,156 We have a program and it is actually free, 1348 00:57:24,486 --> 00:57:26,356 which is why we went with it and it is very popular 1349 00:57:26,356 --> 00:57:28,566 and it is called PHP My Admin. 1350 00:57:28,826 --> 00:57:31,026 This is just something that some really nice people wrote. 1351 00:57:31,026 --> 00:57:34,236 It is freely available and it is a graphic interface 1352 00:57:34,366 --> 00:57:36,696 to managing a My SQL database. 1353 00:57:36,796 --> 00:57:38,656 There are many different ways to manage a database. 1354 00:57:38,656 --> 00:57:40,706 A database is just tables stored in memory, 1355 00:57:40,976 --> 00:57:42,996 but actually interfacing with them is nice 1356 00:57:42,996 --> 00:57:45,896 to do via graphical user interface so I am going to log 1357 00:57:45,896 --> 00:57:50,226 in with my mail-in user name and with my mail-in password here 1358 00:57:50,226 --> 00:57:51,626 and I am going to get this interface. 1359 00:57:51,626 --> 00:57:53,686 And you will get to know this interface a little bit 1360 00:57:53,686 --> 00:57:54,786 with Pset 7 and 8. 1361 00:57:54,786 --> 00:57:56,536 I am just going to give you some highlights today, 1362 00:57:56,866 --> 00:57:59,486 most of this is overwhelming and unnecessary today, 1363 00:57:59,486 --> 00:58:01,756 but notice at top left I have a list of databases. 1364 00:58:01,756 --> 00:58:04,006 I already created for myself a database 1365 00:58:04,066 --> 00:58:07,856 for my CS50 final project for P-set 7 and P-set 8 1366 00:58:07,856 --> 00:58:09,026 and then also for lecture today. 1367 00:58:09,526 --> 00:58:12,546 So if I click this database what I now have is a way 1368 00:58:12,546 --> 00:58:16,086 of controlling these tables that I need to create. 1369 00:58:16,396 --> 00:58:18,326 So right now, I actually have one table, 1370 00:58:18,326 --> 00:58:19,496 because I was practicing before class. 1371 00:58:19,496 --> 00:58:22,566 I am going to click very quickly this little X button and get rid 1372 00:58:22,566 --> 00:58:25,366 of that, so now I have a database with zero tables. 1373 00:58:25,506 --> 00:58:27,366 Think of this as an empty excel document, 1374 00:58:27,666 --> 00:58:29,136 so I need to define some structure. 1375 00:58:29,136 --> 00:58:31,866 So I am going to click structure, actually 1376 00:58:31,866 --> 00:58:34,656 and then it is going to create new table on database, 1377 00:58:35,056 --> 00:58:37,746 alright what do I want this new table to be called registrants. 1378 00:58:38,106 --> 00:58:39,846 These are the people who are registering for the sports 1379 00:58:39,846 --> 00:58:42,776 and I have got four fields, name, captain, gender, dorm. 1380 00:58:43,126 --> 00:58:45,856 So four fields, I am going to click go and now 1381 00:58:45,856 --> 00:58:48,356 in here I get kind of an overwhelming interface partly 1382 00:58:48,356 --> 00:58:51,036 because my resolution is kind of low on Sander's screen here, 1383 00:58:51,036 --> 00:58:54,466 but it is just asking me to tell it what these columns are going 1384 00:58:54,466 --> 00:58:54,936 to be called. 1385 00:58:55,006 --> 00:58:57,106 So in Excel, I just literally type them. 1386 00:58:57,106 --> 00:59:00,186 A database is a little fancier, it wants to know what the name 1387 00:59:00,186 --> 00:59:02,146 of the fields are, what data type is going 1388 00:59:02,146 --> 00:59:03,286 to go in them and so forth. 1389 00:59:03,616 --> 00:59:07,056 So let me just type this in, name and then captain 1390 00:59:07,686 --> 00:59:09,986 and then gender and then dorm, 1391 00:59:09,986 --> 00:59:11,706 but then these shouldn't all be integers. 1392 00:59:11,906 --> 00:59:13,156 So notice in this drop down, 1393 00:59:13,156 --> 00:59:16,226 this database called My SQL supports a whole bunch 1394 00:59:16,226 --> 00:59:16,886 of data types. 1395 00:59:17,026 --> 00:59:20,636 Some of them are strings or texts, some of them are binary, 1396 00:59:20,896 --> 00:59:23,636 some of them are floating points, some of them are dates 1397 00:59:23,676 --> 00:59:26,806 or times and what is really nice to be honest about PHP my admin, 1398 00:59:27,056 --> 00:59:29,006 it is kind of a learning tool onto itself. 1399 00:59:29,006 --> 00:59:31,116 You can kind of teach yourself a little bit 1400 00:59:31,116 --> 00:59:34,726 about what My SQL provides by just reading the menus 1401 00:59:34,776 --> 00:59:36,536 and picking what makes intuitive sense. 1402 00:59:36,536 --> 00:59:37,936 In this case, I am not going to use text, 1403 00:59:37,936 --> 00:59:39,676 I am going to use something called Bar Char. 1404 00:59:40,016 --> 00:59:41,916 This is a variable length string. 1405 00:59:42,166 --> 00:59:45,476 Now how long is a person's name supposed to be, well it feels 1406 00:59:45,476 --> 00:59:48,936 like maybe 100 characters max, something like that. 1407 00:59:48,936 --> 00:59:52,426 I am going to say 100 characters max for a typical person's name. 1408 00:59:52,776 --> 00:59:54,896 Captain, okay you know what, I am actually going 1409 00:59:54,896 --> 00:59:56,466 to make captain be a Boolean, 1410 00:59:56,466 --> 00:59:58,726 because it is just going to be true or false. 1411 00:59:59,206 --> 01:00:01,556 Gender, I am going to use something called an E num, 1412 01:00:01,556 --> 01:00:03,776 I only want to allow two values in this field, 1413 01:00:03,776 --> 01:00:04,906 so I am actually going to enumerate 1414 01:00:05,106 --> 01:00:09,796 with single quotes either F for female, or quote M for male. 1415 01:00:10,056 --> 01:00:12,636 And what this means is it is a textual field, 1416 01:00:12,976 --> 01:00:14,116 but it is an enumeration. 1417 01:00:14,116 --> 01:00:16,326 Only one of these two values is allowed 1418 01:00:16,326 --> 01:00:18,156 for my particular implementation here. 1419 01:00:18,506 --> 01:00:22,266 And then I have for dorm, dorm should probably be bar char, 1420 01:00:22,266 --> 01:00:24,726 dorm names, they are less than 100 characters each. 1421 01:00:25,026 --> 01:00:26,446 Now there are some other features 1422 01:00:26,446 --> 01:00:28,466 and we will discuss these over time, but I am just going 1423 01:00:28,466 --> 01:00:30,916 to leave the rest of this blank, so don't get distracted 1424 01:00:30,916 --> 01:00:31,806 by all of your choices. 1425 01:00:31,806 --> 01:00:35,576 I am going to click save and now what you see up here, 1426 01:00:35,576 --> 01:00:39,926 what is also nice about this tool is you can actually learn 1427 01:00:39,926 --> 01:00:43,156 what sequel syntax is by way of this program. 1428 01:00:43,156 --> 01:00:47,236 So SQL, structure query language is a database language. 1429 01:00:47,236 --> 01:00:51,596 It is not specific to My SQL, any of these popular programs, 1430 01:00:51,596 --> 01:00:55,076 Oracle and the like support this language called sequel, SQL, 1431 01:00:55,406 --> 01:00:58,146 which allows you to get data from a database 1432 01:00:58,146 --> 01:00:59,516 and put data in a database. 1433 01:00:59,756 --> 01:01:01,926 Now it is not all that interesting to learn the syntax 1434 01:01:01,926 --> 01:01:04,126 for creating tables and this font is kind of poor 1435 01:01:04,126 --> 01:01:07,376 on this screen, but notice it says create table, mail-in, 1436 01:01:07,376 --> 01:01:11,676 lecture registrants name, captain, what this program does 1437 01:01:11,676 --> 01:01:15,416 for me is it you know shows me the syntax it just used 1438 01:01:15,626 --> 01:01:16,726 to create this database. 1439 01:01:16,726 --> 01:01:18,816 It is just a front end to simplify my life. 1440 01:01:19,226 --> 01:01:23,166 So now I see a reminder of what I just created so all 1441 01:01:23,166 --> 01:01:27,326 of this information here tells me what my database my now looks 1442 01:01:27,326 --> 01:01:30,936 like, so my goal is to insert some values into this database. 1443 01:01:31,196 --> 01:01:33,936 Well let's see how I can do this, well one I could manually, 1444 01:01:33,936 --> 01:01:36,786 especially if I am the proctor and some student calls me 1445 01:01:36,786 --> 01:01:38,406 on the phone or doesn't know how to use the web, 1446 01:01:38,406 --> 01:01:39,976 they still are sliding this piece of paper 1447 01:01:39,976 --> 01:01:41,836 under my door, I can do it manually. 1448 01:01:41,836 --> 01:01:43,136 So I click the insert tab 1449 01:01:43,136 --> 01:01:46,616 and I can say okay David really doesn't know what is going on, 1450 01:01:46,866 --> 01:01:51,366 Captain he is going to be, no not a captain, not qualified; 1451 01:01:51,446 --> 01:01:53,436 male and then let's say Matthews. 1452 01:01:53,726 --> 01:01:56,326 So I can just do this manually and this is not the value added 1453 01:01:56,326 --> 01:01:57,856 of a database, because the whole point is not 1454 01:01:57,856 --> 01:02:00,636 to do this manually, but I can do it just to get me started, 1455 01:02:00,926 --> 01:02:04,156 because now what it executed is this syntax, insert. 1456 01:02:04,516 --> 01:02:07,876 So it turns out that SQL supports some fairly basic 1457 01:02:08,426 --> 01:02:14,246 instructions and the quick list is just this select to get data 1458 01:02:14,246 --> 01:02:18,266 and insert to add data, update to change data and delete, 1459 01:02:18,676 --> 01:02:21,666 so essentially four, these are the four most important 1460 01:02:21,886 --> 01:02:25,036 constructs from SQL, which we are going 1461 01:02:25,036 --> 01:02:26,076 to manipulate a database. 1462 01:02:26,076 --> 01:02:28,216 So what I just did in this example here using this 1463 01:02:28,216 --> 01:02:30,696 graphical tool, it did the syntax for me. 1464 01:02:30,766 --> 01:02:34,856 Insert into the mail-in lecture registrant the following fields 1465 01:02:35,096 --> 01:02:36,246 with the following values. 1466 01:02:36,556 --> 01:02:38,346 So I want to mimic this same behavior. 1467 01:02:38,706 --> 01:02:40,436 So what I am actually going to do now is this, 1468 01:02:40,436 --> 01:02:42,186 I am going to go back to my code here. 1469 01:02:42,186 --> 01:02:44,906 I am going to go into my public HTML directory 1470 01:02:44,906 --> 01:02:47,246 and my source code for today for Frosh IMs 1471 01:02:47,696 --> 01:02:50,106 and now I have Frosh IMs 8.php. 1472 01:02:50,276 --> 01:02:53,316 So let me pull this up, version 8, 1473 01:02:53,316 --> 01:02:55,076 aesthetically it looks pretty much the same, 1474 01:02:55,386 --> 01:02:57,816 but this time instead of copping out and just emailing 1475 01:02:57,816 --> 01:03:00,246 that proctor or myself or Jensu, we are actually going 1476 01:03:00,246 --> 01:03:01,956 to insert the data into this database, 1477 01:03:02,296 --> 01:03:04,526 because then you can imagine taking some time 1478 01:03:04,796 --> 01:03:07,286 and actually writing a webpage that not inserts, 1479 01:03:07,286 --> 01:03:09,546 but selects that same data from the database 1480 01:03:09,546 --> 01:03:11,206 and shows it on a webpage. 1481 01:03:11,206 --> 01:03:15,476 So case in point, when you actually visit CS75.net/staff. 1482 01:03:15,826 --> 01:03:18,536 We did not implement this webpage in X-HTML, 1483 01:03:18,656 --> 01:03:22,306 we wrote a PHP program that actually queries our database, 1484 01:03:22,596 --> 01:03:26,396 grabs all of the staff members from a staff table and loops 1485 01:03:26,396 --> 01:03:27,816 over them in alphabetical order 1486 01:03:27,816 --> 01:03:30,206 and then generates the X-HTML dynamically. 1487 01:03:30,206 --> 01:03:32,546 So it is the same idea, because again I don't want to have 1488 01:03:32,546 --> 01:03:35,226 to maintain X-HTML for 60 different people, 1489 01:03:35,426 --> 01:03:36,926 much easier to put in a database 1490 01:03:36,966 --> 01:03:39,316 and dynamically generate it as you see fit. 1491 01:03:39,726 --> 01:03:42,916 Alright, so here is my Frosh IMs 8 and notice the only difference 1492 01:03:42,916 --> 01:03:46,066 for this front end is that I am submitting to register 8.php. 1493 01:03:46,066 --> 01:03:49,156 Alright, so I am going to go ahead and open register 8.php 1494 01:03:49,156 --> 01:03:51,636 and here is what I am going to do. 1495 01:03:51,856 --> 01:03:54,996 First a sanity check, if the user failed to give me a name 1496 01:03:54,996 --> 01:03:57,956 or gender or dorm, forget it, reject them, send them back 1497 01:03:58,136 --> 01:04:02,886 to Frosh IMs, slight typo, don't look yet. 1498 01:04:02,916 --> 01:04:09,096 Send them back to FroshIMs 8.php, but if they don't screw 1499 01:04:09,096 --> 01:04:11,726 up and you don't exit, continue executing, 1500 01:04:11,986 --> 01:04:13,856 so it just takes a few lines of code here. 1501 01:04:13,856 --> 01:04:15,606 So let's see the first line of code 1502 01:04:15,606 --> 01:04:18,076 and I have just revealed my personal password My SQL 1503 01:04:18,076 --> 01:04:19,966 connect, how do I want to connect 1504 01:04:20,016 --> 01:04:22,676 to the database using PHP, well I want to connect 1505 01:04:22,676 --> 01:04:24,166 to what is called local hosts. 1506 01:04:24,526 --> 01:04:27,886 So when you want to connect to a database on your own server, 1507 01:04:28,096 --> 01:04:30,456 you generally call it local host, but you would be told this 1508 01:04:30,456 --> 01:04:32,726 by the system administrators or in our case the course, 1509 01:04:33,096 --> 01:04:34,986 then this function expects a username, 1510 01:04:35,186 --> 01:04:38,496 then this function expects a password and then semicolon. 1511 01:04:38,686 --> 01:04:41,216 That opens a network connection to the database, 1512 01:04:41,436 --> 01:04:44,296 but then there is going to be 300 plus databases living 1513 01:04:44,296 --> 01:04:46,876 on this server, in fact, 900 databases, because you are going 1514 01:04:46,876 --> 01:04:50,566 to get one for P-Set 7 and 8 and final projects if you want it. 1515 01:04:50,566 --> 01:04:52,846 So I need to select using this function, 1516 01:04:52,846 --> 01:04:56,426 my SQL select DB mail-in lecture, so this is going 1517 01:04:56,426 --> 01:04:59,426 to say connect to the database and use this lecture 1518 01:04:59,426 --> 01:05:01,656 and because I provided a username and password, 1519 01:05:01,786 --> 01:05:04,986 I am only going to be allowed to call this line of code 1520 01:05:05,216 --> 01:05:09,316 if mail-in actually has access to that particular database. 1521 01:05:09,316 --> 01:05:11,566 So this is just authorizing me for access. 1522 01:05:11,836 --> 01:05:14,966 Now how did I know any of this stuff, well in fact, 1523 01:05:15,036 --> 01:05:19,196 one of the best things about PHP, so it has some downsides 1524 01:05:19,196 --> 01:05:21,166 and it is potentially a messy language 1525 01:05:21,336 --> 01:05:24,616 and actually let's do this my SQL connect, 1526 01:05:24,616 --> 01:05:29,916 so PHP.net will become a friend over the course of PSet 7 and 8, 1527 01:05:29,916 --> 01:05:32,276 because frankly of all the languages we will play with, 1528 01:05:32,556 --> 01:05:34,686 it is by far the best documented. 1529 01:05:34,686 --> 01:05:37,326 You can literally learn most of the language just 1530 01:05:37,426 --> 01:05:39,796 by RTFming what is on this website. 1531 01:05:39,796 --> 01:05:44,706 I mean to be honest and it is no overstatement after learning C 1532 01:05:44,706 --> 01:05:49,596 and C++ and Pearl on my own, I personally literally learned PHP 1533 01:05:49,596 --> 01:05:51,986 by IM-ing a friend over AOL Instant messenger back 1534 01:05:51,986 --> 01:05:53,566 and forth, just peppering him with questions, 1535 01:05:53,596 --> 01:05:55,156 like he blocked me after that. 1536 01:05:55,536 --> 01:05:58,686 But that is literally testament to the relative ease 1537 01:05:58,686 --> 01:06:00,806 with which you can kind of pick up some of these new things. 1538 01:06:00,806 --> 01:06:05,136 Alright, Google is now my friend, instead of my friend. 1539 01:06:05,136 --> 01:06:05,976 [ Laughter ] 1540 01:06:05,976 --> 01:06:08,546 But it is relatively easy to bootstrap yourself 1541 01:06:08,546 --> 01:06:10,176 so realize it is very much deliberate 1542 01:06:10,256 --> 01:06:12,436 that you know we wave our hands at some of the details, 1543 01:06:12,666 --> 01:06:15,896 so I went to PHP.net, I typed My SQL connect into the search box 1544 01:06:15,896 --> 01:06:18,686 and walla I now have the documentation for this function. 1545 01:06:18,936 --> 01:06:21,236 Now it doesn't matter so much all of the details here, 1546 01:06:21,536 --> 01:06:23,696 but what is really nice about the documentation, 1547 01:06:23,696 --> 01:06:26,656 because those man pages, as much as we preach them, they are kind 1548 01:06:26,656 --> 01:06:29,606 of arcane right, sometimes it just makes the problem worse 1549 01:06:29,606 --> 01:06:30,846 when reading the documentation 1550 01:06:30,846 --> 01:06:32,156 because they are not always that clear. 1551 01:06:32,396 --> 01:06:34,836 PHP.net is nice, because it always comes with examples. 1552 01:06:35,306 --> 01:06:37,856 So down here, we see the name of the function, 1553 01:06:38,076 --> 01:06:40,376 this is admittedly a little cryptic, so we will come back 1554 01:06:40,416 --> 01:06:42,606 to that and we will see easier functions over time, 1555 01:06:42,606 --> 01:06:45,636 but I am going to scroll down here and now here are examples. 1556 01:06:45,636 --> 01:06:47,746 My God, this is all I want to do, if I want to connect 1557 01:06:47,746 --> 01:06:50,236 to a database, I call My SQL connect, I pass in this 1558 01:06:50,296 --> 01:06:51,836 and my username and my password 1559 01:06:52,126 --> 01:06:54,116 and then there are some other techniques here too. 1560 01:06:54,376 --> 01:06:58,236 So constantly refer to the PHP documentation if 1561 01:06:58,236 --> 01:07:00,996 and when you have questions over the course of those P Sets. 1562 01:07:01,106 --> 01:07:03,696 So here is the code, I have connected to the database, 1563 01:07:03,906 --> 01:07:07,656 I have selected my own, how do I now insert the data the users 1564 01:07:07,656 --> 01:07:08,536 provided me with. 1565 01:07:08,536 --> 01:07:12,876 Well the goal is to get the contents of that post variable 1566 01:07:12,936 --> 01:07:14,516 into the database, well let's see. 1567 01:07:14,516 --> 01:07:17,446 I am going to declare four variables, name, 1568 01:07:17,766 --> 01:07:20,576 which is right here, captain which is here or here, 1569 01:07:20,576 --> 01:07:23,306 depending on the if condition, gender and dorm. 1570 01:07:23,576 --> 01:07:25,436 Now what is with some of the crazy syntax here. 1571 01:07:25,436 --> 01:07:28,736 Well name is simply going to be the value that the user gave me, 1572 01:07:29,006 --> 01:07:31,136 but users can be obnoxious and they can try 1573 01:07:31,136 --> 01:07:33,116 to break into your web server. 1574 01:07:33,116 --> 01:07:34,526 They can try to break into your computer 1575 01:07:34,526 --> 01:07:37,146 by providing bogus input and we have discussed this before, 1576 01:07:37,376 --> 01:07:39,876 really a problem on the web, because it is so easy 1577 01:07:39,876 --> 01:07:41,876 to pass inputs to people's programs 1578 01:07:42,176 --> 01:07:43,286 when you just have a browser. 1579 01:07:43,566 --> 01:07:47,166 So this admittedly stupid long name function, 1580 01:07:47,396 --> 01:07:51,356 My Sequeal real escape string is the function to call 1581 01:07:51,436 --> 01:07:53,516 for any time you use this library 1582 01:07:53,516 --> 01:07:55,866 to access My Sequel databases. 1583 01:07:56,256 --> 01:07:58,296 This makes the user's input safe. 1584 01:07:58,296 --> 01:08:01,006 If they put some crazy syntax in there that is designed 1585 01:08:01,006 --> 01:08:02,776 to break your database or steal your data, 1586 01:08:03,136 --> 01:08:05,876 this function My Sequel real escape string makes 1587 01:08:05,926 --> 01:08:08,506 that not a problem, so just as a teaser and we will talk 1588 01:08:08,506 --> 01:08:11,296 about this at some point if a user got malicious 1589 01:08:11,296 --> 01:08:13,106 and didn't type in David as their name, 1590 01:08:13,376 --> 01:08:16,466 but delete as their name, the point is you don't want 1591 01:08:16,466 --> 01:08:18,226 to pass the word delete to something 1592 01:08:18,226 --> 01:08:21,056 like a database lest it actually delete your data. 1593 01:08:21,056 --> 01:08:23,706 And this happens all the time, because people fail 1594 01:08:23,706 --> 01:08:26,366 to massage their data with functions like that 1595 01:08:26,366 --> 01:08:28,486 or to scrub their data so to speak, alright. 1596 01:08:28,686 --> 01:08:29,686 So this just puts the name, 1597 01:08:29,856 --> 01:08:32,246 but it escapes it using a very safe mechanism. 1598 01:08:32,476 --> 01:08:35,576 Now captain is actually going to come in as like an on/off value, 1599 01:08:35,576 --> 01:08:37,876 it is going to come in as a string, so I am just going 1600 01:08:37,876 --> 01:08:41,136 to check if captain is non-zero, so if the person checked 1601 01:08:41,136 --> 01:08:43,446 that box, declare a variable called captain 1602 01:08:43,446 --> 01:08:44,906 and make it a bool, make it a 1. 1603 01:08:44,906 --> 01:08:47,916 I could have said true, but actually I intentionally said 1 1604 01:08:47,916 --> 01:08:50,836 so that My Sequel gets a 1 or if they didn't check that box, 1605 01:08:51,156 --> 01:08:52,456 assign this variable as zero. 1606 01:08:52,456 --> 01:08:53,926 As you know gender, same thing as name, 1607 01:08:54,116 --> 01:08:57,356 escape very safely whatever they checked for gender and for dorm, 1608 01:08:57,426 --> 01:09:00,666 escape whatever they typed in for dorm and now the only line 1609 01:09:00,666 --> 01:09:02,396 of code I need to execute here is this, 1610 01:09:02,966 --> 01:09:05,856 I am going to declare a variable called SQL, 1611 01:09:05,856 --> 01:09:08,746 this is me being anal, I like to create my string in a variable 1612 01:09:08,746 --> 01:09:10,146 and then do something with it. 1613 01:09:10,506 --> 01:09:15,636 So SQL gets the following value: insert into name of the table 1614 01:09:16,116 --> 01:09:19,406 in parentheses I now specify a common separated list 1615 01:09:19,406 --> 01:09:21,916 of the fields I want to insert, pretty easy, 1616 01:09:21,916 --> 01:09:22,676 it could be any order. 1617 01:09:22,676 --> 01:09:25,006 I chose this one and then it is wrapping, 1618 01:09:25,006 --> 01:09:27,606 so let me just hit enter once to clean this up a little bit. 1619 01:09:27,896 --> 01:09:32,766 Then I type in the word values and then notice, 1620 01:09:32,836 --> 01:09:35,376 closed parentheses here, open parentheses here 1621 01:09:35,556 --> 01:09:38,576 and then now notice, I am using single quotes to quote each 1622 01:09:38,576 --> 01:09:40,666 of the strings name, gender and dorm, 1623 01:09:40,906 --> 01:09:43,036 because captain is a bool, I just pass it in. 1624 01:09:43,556 --> 01:09:45,996 So in the end, I have a string that reads insert 1625 01:09:45,996 --> 01:09:48,396 into registrants, name, captain, gender, dorm, 1626 01:09:48,666 --> 01:09:52,046 values David, zero, M, Matthew. 1627 01:09:52,526 --> 01:09:56,596 And that is sequel that is the language called Sequel 1628 01:09:56,776 --> 01:09:59,946 that I just so happen to have embedded in a program 1629 01:09:59,946 --> 01:10:02,216 in another language called PHP. 1630 01:10:02,516 --> 01:10:06,206 So now if I want to tell PHP execute this instruction 1631 01:10:06,266 --> 01:10:08,286 on the database to which I have a connection, 1632 01:10:09,076 --> 01:10:13,526 I simply call My Sequel query passing in this string, wa la. 1633 01:10:13,526 --> 01:10:15,566 That should do the insert automatically 1634 01:10:15,836 --> 01:10:18,796 that I previously simulated by clicking some buttons. 1635 01:10:19,086 --> 01:10:21,746 So let's give this a try, so right now if I click browse, 1636 01:10:22,076 --> 01:10:25,836 I see that okay I just have one user, zero David M Matthews 1637 01:10:25,836 --> 01:10:26,856 and I did that manually. 1638 01:10:27,126 --> 01:10:29,076 So let's go to the actual web form here, 1639 01:10:29,076 --> 01:10:32,566 let me go to Frosh IMs 8, alright so I am going to type 1640 01:10:32,566 --> 01:10:38,556 in now Jensu, Captain, Female and I don't remember, 1641 01:10:38,626 --> 01:10:40,466 say Apley Court, register. 1642 01:10:41,126 --> 01:10:44,526 Alright, you are registered really, now let's go back 1643 01:10:44,526 --> 01:10:46,496 to my database and this is just a tool. 1644 01:10:46,496 --> 01:10:47,776 I want to see what is in my database. 1645 01:10:47,776 --> 01:10:51,326 I am going to go ahead and click browse again and wa la, 1646 01:10:51,326 --> 01:10:53,126 Jensu has been inserted into the database. 1647 01:10:53,326 --> 01:10:55,556 Now very simple, we haven't really solved a big problem 1648 01:10:55,556 --> 01:10:57,716 here, but now assume this is now Model UN 1649 01:10:57,716 --> 01:10:59,036 or some student group's problems, 1650 01:10:59,256 --> 01:11:00,916 now you can have hundreds of people going 1651 01:11:00,916 --> 01:11:03,236 to a relatively simple web form clicking submit 1652 01:11:03,496 --> 01:11:05,506 and now you have a table of information, 1653 01:11:05,626 --> 01:11:07,686 but what can I now do with that information. 1654 01:11:07,686 --> 01:11:11,276 Well let me do this, let me make a quick and dirty file, a quick 1655 01:11:11,276 --> 01:11:13,126 and dirty program, which is just geek speak 1656 01:11:13,126 --> 01:11:14,256 for saying let's do this fast 1657 01:11:14,256 --> 01:11:15,656 and not necessarily the best way. 1658 01:11:16,036 --> 01:11:20,436 Let me copy register.8.PHP, call it registrants.PHP, 1659 01:11:20,436 --> 01:11:23,196 I am going to open registrants.php. 1660 01:11:23,366 --> 01:11:26,096 Let me get rid of my comments at the top, 1661 01:11:26,096 --> 01:11:27,476 I don't need to validate anything. 1662 01:11:27,666 --> 01:11:29,796 I do want to connect to the database again, I don't need 1663 01:11:29,796 --> 01:11:32,196 to scrub input, I am not going to take any input from the user 1664 01:11:32,396 --> 01:11:34,736 and this time the query I am going to execute is this. 1665 01:11:34,736 --> 01:11:40,376 I am going to say select star from registrants and that is it. 1666 01:11:40,376 --> 01:11:42,456 So this sequel instruction is actually going 1667 01:11:42,456 --> 01:11:44,656 to select information from the database. 1668 01:11:44,826 --> 01:11:47,026 Let me scroll down here and I am now going 1669 01:11:47,026 --> 01:11:50,246 to say let's see I have execute the query, but this time I need 1670 01:11:50,246 --> 01:11:52,676 to care about the result, because I want information back. 1671 01:11:52,676 --> 01:11:54,296 I am not just putting it in, so I am going 1672 01:11:54,296 --> 01:11:57,156 to say results gets my sequel curious return value 1673 01:11:57,516 --> 01:12:02,166 and now I am going to say iterate over results. 1674 01:12:02,396 --> 01:12:07,616 So while row gets, it is called My Sequel Assoc, 1675 01:12:07,616 --> 01:12:10,306 Associative Array, result. 1676 01:12:10,306 --> 01:12:12,086 So this line of code is just going 1677 01:12:12,336 --> 01:12:14,816 to ask iteratively give me a row, give me a row 1678 01:12:14,816 --> 01:12:17,876 and each time it is going to put it in dollar sign row 1679 01:12:17,876 --> 01:12:20,366 and so what do I want to do with this information. 1680 01:12:20,406 --> 01:12:22,616 Oh interesting, I don't really want to put it up top 1681 01:12:22,616 --> 01:12:25,906 of my webpage, so let me scroll down here, let me butcher most 1682 01:12:25,906 --> 01:12:28,306 of my code here and what I am actually going 1683 01:12:28,376 --> 01:12:31,316 to do is steal this, one, two, three, four, five lines of code. 1684 01:12:31,316 --> 01:12:34,126 I am going to move them to the bottom of my file. 1685 01:12:34,126 --> 01:12:36,556 I am going to jump into PHP mode here. 1686 01:12:36,556 --> 01:12:39,126 I will intent just to keep things a little pretty 1687 01:12:39,426 --> 01:12:41,716 and now I am going to close PHP mode. 1688 01:12:41,716 --> 01:12:44,586 So what I am going to do here is simply print out, 1689 01:12:44,656 --> 01:12:46,776 see I want to print out for the first person, 1690 01:12:46,776 --> 01:12:49,306 row and what is the person's name, so it is name. 1691 01:12:49,306 --> 01:12:52,196 I want to print out the field called name, alright now I want 1692 01:12:52,196 --> 01:12:53,776 to print out, okay this is X-HTML. 1693 01:12:53,776 --> 01:12:57,586 Let's print out a line break explicitly, so not back slash N, 1694 01:12:57,586 --> 01:12:59,076 this is a webpage now, BR. 1695 01:12:59,406 --> 01:13:02,056 And now that is enough, I just want to print their names. 1696 01:13:02,366 --> 01:13:05,046 So let me click save, now this is registrants.php. 1697 01:13:05,046 --> 01:13:07,326 Let me go to my file here 1698 01:13:07,326 --> 01:13:11,286 and type registrants.php enter, wa la. 1699 01:13:11,286 --> 01:13:13,196 Now I have an administrative interface, 1700 01:13:13,196 --> 01:13:15,286 where the student group leaders can actually see 1701 01:13:15,286 --> 01:13:17,306 who is registered for this particular thing. 1702 01:13:17,646 --> 01:13:20,786 So where are we going with this well in problem set 7, 1703 01:13:20,786 --> 01:13:22,806 you are going to be handed a bit of a framework. 1704 01:13:22,806 --> 01:13:25,336 So we are going to give you some code to simplify some things 1705 01:13:25,376 --> 01:13:27,966 that it is not worth getting hung over initially, 1706 01:13:27,966 --> 01:13:29,136 so we will get you started with this. 1707 01:13:29,136 --> 01:13:31,326 So we are going to implement a few different features, 1708 01:13:31,326 --> 01:13:33,876 so one we are going to hand you a log in mechanism 1709 01:13:33,926 --> 01:13:36,476 so that users can actually log into your website. 1710 01:13:36,746 --> 01:13:38,386 But unfortunately we are not going to hand you ability 1711 01:13:38,386 --> 01:13:41,266 to create accounts, so initially you will have to go to something 1712 01:13:41,266 --> 01:13:43,696 like PHP My admin and the pdf will tell you how 1713 01:13:43,696 --> 01:13:44,716 to access your account, 1714 01:13:44,716 --> 01:13:46,416 what your default password is and all of that. 1715 01:13:46,736 --> 01:13:48,586 So you will use the insert tab initially 1716 01:13:48,586 --> 01:13:51,876 to create a fake username and some passwords for yourself, 1717 01:13:52,186 --> 01:13:54,006 so that you can actually start logging 1718 01:13:54,006 --> 01:13:57,566 in to this CS50 finance site, but that is not very interesting 1719 01:13:57,566 --> 01:13:59,436 because then are you going to add the feature not just 1720 01:13:59,436 --> 01:14:02,316 to register accounts by the web, but to get stock quotes 1721 01:14:02,366 --> 01:14:05,726 so you are going to have a webpage called quotes1.php, 1722 01:14:05,726 --> 01:14:06,476 something like that. 1723 01:14:06,706 --> 01:14:08,036 You are going to have a little form asking 1724 01:14:08,036 --> 01:14:09,646 for a stock symbol and a submit button. 1725 01:14:09,876 --> 01:14:12,356 The user is going to type in Goog enter. 1726 01:14:12,806 --> 01:14:15,416 That form is going to submit to another PHP file and what is 1727 01:14:15,416 --> 01:14:17,786 that PHP file going to do besides the scenes probably, 1728 01:14:17,786 --> 01:14:21,126 it is going to contact who for the data? 1729 01:14:22,306 --> 01:14:24,196 So literally Yahoo finance and we saw 1730 01:14:24,196 --> 01:14:26,526 and I will make this code available the little four lines 1731 01:14:26,526 --> 01:14:28,516 of code, five lines of code to talk to Yahoo, 1732 01:14:28,706 --> 01:14:31,226 get back the current stock price from Google, put it in an array. 1733 01:14:31,426 --> 01:14:33,816 You can then certainly print that to the screen very easily 1734 01:14:33,816 --> 01:14:36,166 so that is not so bad, then it gets a little more interesting. 1735 01:14:36,166 --> 01:14:38,376 You are going to have to create the ability to buy 1736 01:14:38,376 --> 01:14:39,476 and sell these stocks. 1737 01:14:39,736 --> 01:14:41,876 So by default, each of your users should get something 1738 01:14:41,876 --> 01:14:45,316 like 10,000 dollars in virtual dollars in their database. 1739 01:14:45,566 --> 01:14:48,206 So rather than just have fields like name and dorm 1740 01:14:48,206 --> 01:14:50,566 in this database, we will actually have another field 1741 01:14:50,566 --> 01:14:53,256 in there called cash, how much cash does the user have 1742 01:14:53,316 --> 01:14:56,136 by default and you will probably in fact have another table. 1743 01:14:56,526 --> 01:14:58,736 So even though we just used one table for Frosh IMs, 1744 01:14:58,736 --> 01:15:01,026 you probably want a table that is going to keep track not just 1745 01:15:01,026 --> 01:15:03,086 of your users, but a separate table, 1746 01:15:03,186 --> 01:15:05,776 a separate Excel spreadsheet if you will that keeps track 1747 01:15:05,776 --> 01:15:07,946 of the portfolios of your users, 1748 01:15:08,156 --> 01:15:10,416 what stock symbols have they bought and at what price 1749 01:15:10,416 --> 01:15:11,696 so you know what their net worth is. 1750 01:15:11,696 --> 01:15:14,176 And then finally, you will need to keep track of this history 1751 01:15:14,176 --> 01:15:16,896 so you know what the user has actually done and just 1752 01:15:16,896 --> 01:15:20,946 as we will finish problem set 5 and the so called big board, 1753 01:15:20,946 --> 01:15:23,026 we will replace this big board with another, 1754 01:15:23,026 --> 01:15:25,996 we will actually debut a little stock trading program, 1755 01:15:25,996 --> 01:15:28,306 which is so much fun when the stock market is 1756 01:15:28,346 --> 01:15:29,296 in the condition it is. 1757 01:15:29,996 --> 01:15:32,706 Oh that is cute, you are the only one in this room 1758 01:15:32,706 --> 01:15:35,096 with access to that account. 1759 01:15:35,096 --> 01:15:36,016 [ Laughter ] 1760 01:15:36,016 --> 01:15:36,696 That is beautiful. 1761 01:15:37,676 --> 01:15:39,776 Why don't we just end on that note, see you Monday.