1 00:00:00,000 --> 00:00:08,802 2 00:00:08,802 --> 00:00:11,140 >> JASON HIRSCHHORN: Welcome everyone to week eight. 3 00:00:11,140 --> 00:00:13,420 We have an exciting week ahead of us. 4 00:00:13,420 --> 00:00:21,390 You guys have dove in this past couple of lectures to PHP, SQL, HTML, CSS, so 5 00:00:21,390 --> 00:00:27,270 four brand new languages that are going to take up the rest this course. 6 00:00:27,270 --> 00:00:30,750 We'll also learn a couple of other languages before course's end. 7 00:00:30,750 --> 00:00:35,200 But anyway, needless to say, this is a very exciting time in CS50, now you 8 00:00:35,200 --> 00:00:41,200 have mastered C, ostensibly, and are moving on to programming for websites. 9 00:00:41,200 --> 00:00:45,320 >> So this week, we are going to go on a whirlwind tour through the four 10 00:00:45,320 --> 00:00:50,200 languages I just mentioned, HTML, CSS, PHP, and SQL. 11 00:00:50,200 --> 00:00:53,340 And hopefully, we will leave plenty of time at the end of section to talk 12 00:00:53,340 --> 00:00:58,800 about this week's P set and answer any questions you all have. 13 00:00:58,800 --> 00:01:03,500 >> Every week, the same list of resources for you, to help you with the week's 14 00:01:03,500 --> 00:01:05,780 problem set and going over the material-- 15 00:01:05,780 --> 00:01:09,440 but this week in particular, for these web-based problem sets, there are a 16 00:01:09,440 --> 00:01:12,350 host of other resources out there that you will likely 17 00:01:12,350 --> 00:01:13,500 find incredibly helpful. 18 00:01:13,500 --> 00:01:14,670 I have them up here. 19 00:01:14,670 --> 00:01:17,570 I'll email you this after section, and this also be online. 20 00:01:17,570 --> 00:01:21,700 >> But in particular, there are plenty of great resources out there. 21 00:01:21,700 --> 00:01:24,380 There are also some not so great ones, so be wary of those. 22 00:01:24,380 --> 00:01:28,210 But on this slide, I have four good resources, one for each of the 23 00:01:28,210 --> 00:01:30,600 languages that you'll be working with this week-- 24 00:01:30,600 --> 00:01:35,090 one reference sheet for HTML, a reference sheet for CSS. 25 00:01:35,090 --> 00:01:38,320 This right here is the PHP manual. 26 00:01:38,320 --> 00:01:42,110 >> So instead of typing man and then a PHP command, this is where you would 27 00:01:42,110 --> 00:01:46,980 go to look up the function prototype and examples and also some tips and 28 00:01:46,980 --> 00:01:48,770 tricks for using PHP functions. 29 00:01:48,770 --> 00:01:51,590 You will use this site often, so I encourage you to become 30 00:01:51,590 --> 00:01:52,280 familiar with it. 31 00:01:52,280 --> 00:01:55,860 It can be a little technical, but it also provides a ton of resources and 32 00:01:55,860 --> 00:02:00,440 examples for all of the functions and even other, like how to use arrays or 33 00:02:00,440 --> 00:02:01,500 different types of variables. 34 00:02:01,500 --> 00:02:03,480 This site is very helpful for PHP. 35 00:02:03,480 --> 00:02:07,160 >> And then, for SQL, if you dove into this week's problem set, you'll know 36 00:02:07,160 --> 00:02:09,160 that we are using a database. 37 00:02:09,160 --> 00:02:13,340 And we access that database through a relatively nice user interface. 38 00:02:13,340 --> 00:02:15,760 Or that's one way to access that database. 39 00:02:15,760 --> 00:02:19,670 The user interface is called phpMyAdmin. 40 00:02:19,670 --> 00:02:23,400 There's a SQL tab, which we'll look at later on today. 41 00:02:23,400 --> 00:02:28,230 >> And you can type into their sample SQL queries, to do things in your database 42 00:02:28,230 --> 00:02:29,780 and then run those queries. 43 00:02:29,780 --> 00:02:31,850 And if they're correct, it'll say, this one's correct. 44 00:02:31,850 --> 00:02:33,480 If they're incorrect, it'll say, it's incorrect. 45 00:02:33,480 --> 00:02:37,260 That's a great place to practice your SQL queries before writing them into 46 00:02:37,260 --> 00:02:39,990 your code, to make sure you have the format correct. 47 00:02:39,990 --> 00:02:42,080 >> Finally, one other website on here. 48 00:02:42,080 --> 00:02:45,390 This is the website where you can go and check to make sure your 49 00:02:45,390 --> 00:02:47,520 HTML code is valid. 50 00:02:47,520 --> 00:02:51,250 So before turning your problems set this week, make sure all of 51 00:02:51,250 --> 00:02:52,690 your HTML is valid. 52 00:02:52,690 --> 00:02:55,840 >> Last week, you had run valgrind, to make sure you had no memory leaks. 53 00:02:55,840 --> 00:02:59,050 This week, you need to make sure all of your code is valid HTML5. 54 00:02:59,050 --> 00:03:02,140 If it's not valid HTML5, you're going to get points off. 55 00:03:02,140 --> 00:03:03,110 >> So make sure-- 56 00:03:03,110 --> 00:03:05,700 just because it works does not mean it's completely valid. 57 00:03:05,700 --> 00:03:09,770 Run your code through this website before turning it in. 58 00:03:09,770 --> 00:03:10,810 Again, here's the website. 59 00:03:10,810 --> 00:03:15,150 >> If you have any feedback for me, we have a couple of more sections left, 60 00:03:15,150 --> 00:03:18,100 and I always want to do what I can to provide you all with the best section 61 00:03:18,100 --> 00:03:19,460 experience possible. 62 00:03:19,460 --> 00:03:22,115 So let me know if there's anything I can do to improve or if there are 63 00:03:22,115 --> 00:03:24,730 things you see that I could do better. 64 00:03:24,730 --> 00:03:25,710 Thank you, Avi. 65 00:03:25,710 --> 00:03:27,610 Put it on the website. 66 00:03:27,610 --> 00:03:31,870 >> This was the bike I had when I was, let's say, four at home. 67 00:03:31,870 --> 00:03:34,500 It's a Teenage Mutant Ninja Turtle biking, in case you can't tell, 68 00:03:34,500 --> 00:03:35,345 because it's a little blurry. 69 00:03:35,345 --> 00:03:38,900 You can get it now at ToysRUs for, I think, about $100. 70 00:03:38,900 --> 00:03:42,690 >> But the feature of this bike that I want you to pay attention to are these 71 00:03:42,690 --> 00:03:43,480 right here. 72 00:03:43,480 --> 00:03:44,980 These are the training wheels. 73 00:03:44,980 --> 00:03:50,230 Up until now, you have been handheld through C. And we've taken a long 74 00:03:50,230 --> 00:03:53,610 time, two months plus, to go through C. 75 00:03:53,610 --> 00:03:55,440 >> For these next couple of languages, we're not going to 76 00:03:55,440 --> 00:03:56,600 spend that much time. 77 00:03:56,600 --> 00:03:58,350 The training wheels are coming off. 78 00:03:58,350 --> 00:04:01,360 And we're going to dive into these languages quickly and move through 79 00:04:01,360 --> 00:04:04,720 them quickly, which isn't to say that we're just going to leave you swimming 80 00:04:04,720 --> 00:04:07,590 out there with no way to support yourself or figure out how these 81 00:04:07,590 --> 00:04:08,270 languages work. 82 00:04:08,270 --> 00:04:10,750 I just showed you a list of resources to help you. 83 00:04:10,750 --> 00:04:14,560 >> But keep in mind that PHP is incredibly similar to C. We'll go over 84 00:04:14,560 --> 00:04:15,970 it today and some of the differences. 85 00:04:15,970 --> 00:04:17,990 But for the most part, there are for loops. 86 00:04:17,990 --> 00:04:18,750 There are if conditions. 87 00:04:18,750 --> 00:04:20,680 >> When you want to solve a problem, you're going to use a 88 00:04:20,680 --> 00:04:22,029 combination of those. 89 00:04:22,029 --> 00:04:22,920 It's very similar. 90 00:04:22,920 --> 00:04:26,040 The logic should be very similar to what you've done in the past. 91 00:04:26,040 --> 00:04:29,810 What's really new this week is the syntax and how you express yourself. 92 00:04:29,810 --> 00:04:32,850 And you want to write a for loop, but it might look a little bit different. 93 00:04:32,850 --> 00:04:35,910 Or you want to create an array, but it might look a little bit different. 94 00:04:35,910 --> 00:04:39,920 >> So keep in mind that, moving forward, the logic is very similar to what 95 00:04:39,920 --> 00:04:41,020 you've done in the past. 96 00:04:41,020 --> 00:04:44,030 But you're now going to be encountering a lot of new syntax. 97 00:04:44,030 --> 00:04:47,600 And we are not going to walk you through all elements of the syntax. 98 00:04:47,600 --> 00:04:53,020 So it's really up to you to figure out, online or through reaching out on 99 00:04:53,020 --> 00:04:58,770 Discuss or emailing me or talking to one another, how to write things in 100 00:04:58,770 --> 00:05:02,580 PHP and how to write SQL queries and how to use HTML and CSS. 101 00:05:02,580 --> 00:05:06,160 >> But just so you know, it's not that we're trying to throw you out there 102 00:05:06,160 --> 00:05:07,630 again to swim the sharks. 103 00:05:07,630 --> 00:05:10,600 This is what you will likely do with your final project, if you choose a 104 00:05:10,600 --> 00:05:15,150 different language, like IOS and Objective C, or if you decide to start 105 00:05:15,150 --> 00:05:17,580 programming in the future and dive into other languages, 106 00:05:17,580 --> 00:05:19,210 like Python or Ruby. 107 00:05:19,210 --> 00:05:23,380 >> Oftentimes, the logic is very similar across all of these languages, and the 108 00:05:23,380 --> 00:05:24,560 syntax is what's different. 109 00:05:24,560 --> 00:05:27,560 And it will be up to you, as the programmer, to go use the web 110 00:05:27,560 --> 00:05:30,790 resources available to you and figure out how to express what you know how 111 00:05:30,790 --> 00:05:33,200 to express in C, in a different language. 112 00:05:33,200 --> 00:05:36,410 So this is good practice, both for your final project, and again, for 113 00:05:36,410 --> 00:05:40,150 what you will likely do after you leave CS50. 114 00:05:40,150 --> 00:05:42,550 >> Before we move on, does anybody have any questions about what 115 00:05:42,550 --> 00:05:43,800 I've done so far? 116 00:05:43,800 --> 00:05:52,450 117 00:05:52,450 --> 00:05:53,120 Great. 118 00:05:53,120 --> 00:05:53,910 Let's move on. 119 00:05:53,910 --> 00:05:59,090 >> First, we're going to talk briefly about the chmod command. 120 00:05:59,090 --> 00:06:02,420 This, we'll do at the start of your problems set. 121 00:06:02,420 --> 00:06:05,050 One of the very first instructions for you, after you download the 122 00:06:05,050 --> 00:06:09,280 distribution code, is to change the permissions of the files and 123 00:06:09,280 --> 00:06:11,350 directories you receive. 124 00:06:11,350 --> 00:06:16,430 >> Can anybody venture a guess or know why it's important to change the 125 00:06:16,430 --> 00:06:20,012 permissions of certain files and directories on your computer? 126 00:06:20,012 --> 00:06:20,956 Avi-- 127 00:06:20,956 --> 00:06:24,796 >> AUDIENCE: Then no one except for you can see what you're doing? 128 00:06:24,796 --> 00:06:25,470 >> JASON HIRSCHHORN: OK. 129 00:06:25,470 --> 00:06:28,330 So if we want to put something on the web and you have permissions set that 130 00:06:28,330 --> 00:06:30,960 only you can see something, then nobody else can 131 00:06:30,960 --> 00:06:32,530 see what you've created. 132 00:06:32,530 --> 00:06:33,380 What else? 133 00:06:33,380 --> 00:06:34,320 Yeah. 134 00:06:34,320 --> 00:06:37,360 >> AUDIENCE: Prevent anybody else that you don't want to see something, from 135 00:06:37,360 --> 00:06:37,870 seeing something. 136 00:06:37,870 --> 00:06:38,820 >> JASON HIRSCHHORN: That's true also. 137 00:06:38,820 --> 00:06:40,730 There's probably some code that you write, that you don't 138 00:06:40,730 --> 00:06:42,690 want people to see. 139 00:06:42,690 --> 00:06:46,190 You're probably OK with people seeing your HTML and your JavaScript. 140 00:06:46,190 --> 00:06:50,360 But your PHP, a back end code, a lot of the logic to your code, maybe the 141 00:06:50,360 --> 00:06:53,200 things that store some of your passwords for your database, you don't 142 00:06:53,200 --> 00:06:55,880 want people to see that type of information. 143 00:06:55,880 --> 00:06:59,420 >> So it's important that, each file and directory we create has permissions 144 00:06:59,420 --> 00:07:03,660 applicable to whether or not we want people to see those types of files and 145 00:07:03,660 --> 00:07:08,030 directories and be able to access them and potentially even change them. 146 00:07:08,030 --> 00:07:09,920 >> So there are three types of permissions. 147 00:07:09,920 --> 00:07:14,980 There's a read permission, which means you can read a file or a list the 148 00:07:14,980 --> 00:07:16,490 contents of the directory. 149 00:07:16,490 --> 00:07:20,820 There's the write permission, which means you can change a file or change 150 00:07:20,820 --> 00:07:24,910 a directory and then the execute permission, which means you can 151 00:07:24,910 --> 00:07:31,060 execute a file or rather, you can move into a directory. 152 00:07:31,060 --> 00:07:34,470 So CD something, if you have the permission to execute it, you can move 153 00:07:34,470 --> 00:07:37,300 into that directory. 154 00:07:37,300 --> 00:07:38,510 >> This is a brief example. 155 00:07:38,510 --> 00:07:40,700 Again, you've gone over this in the problem set. 156 00:07:40,700 --> 00:07:44,630 But I create a directory with the mkdir command. 157 00:07:44,630 --> 00:07:46,320 I change the permissions. 158 00:07:46,320 --> 00:07:48,505 These two lines actually do the exact same thing. 159 00:07:48,505 --> 00:07:52,580 It's to illustrate that the syntax for changing permissions, whether you do 160 00:07:52,580 --> 00:07:55,600 the a+x or 711, those are the same. 161 00:07:55,600 --> 00:07:57,550 >> We look down at this nice table. 162 00:07:57,550 --> 00:07:59,960 We see that there are user permissions first. 163 00:07:59,960 --> 00:08:03,280 That's you, the individual, and your server, potentially. 164 00:08:03,280 --> 00:08:05,070 And then there's group and others. 165 00:08:05,070 --> 00:08:09,350 The differences between those two are relatively trivial. 166 00:08:09,350 --> 00:08:11,170 So generally, we'll lump those together. 167 00:08:11,170 --> 00:08:14,380 >> But essentially, if we have a file called includes that we want to be 168 00:08:14,380 --> 00:08:18,760 able to edit ourselves and that we want others to be able to execute, 169 00:08:18,760 --> 00:08:20,560 it's the permission 711. 170 00:08:20,560 --> 00:08:22,390 And we see that down here in this table. 171 00:08:22,390 --> 00:08:24,730 We have a read, write, and execute. 172 00:08:24,730 --> 00:08:26,790 For each of us, we want to be able to do those. 173 00:08:26,790 --> 00:08:30,160 Group and others, we only want them to be able to execute. 174 00:08:30,160 --> 00:08:33,860 >> The way we translate that into a number of 175 00:08:33,860 --> 00:08:36,870 permission is through binary. 176 00:08:36,870 --> 00:08:41,780 So if we have three ones, that's a 1 in the ones column, a 1 in the twos 177 00:08:41,780 --> 00:08:43,049 column, a 1 the fours column. 178 00:08:43,049 --> 00:08:45,180 That's 7 right there. 179 00:08:45,180 --> 00:08:47,450 And this permission is 1. 180 00:08:47,450 --> 00:08:48,390 This permission is 1. 181 00:08:48,390 --> 00:08:54,200 So 711 when is the same as giving ourselves read, write, and execute, 182 00:08:54,200 --> 00:08:56,660 and everybody else execute privileges. 183 00:08:56,660 --> 00:08:59,180 >> This line right here, we generally will have read and write when we 184 00:08:59,180 --> 00:09:00,250 create a directory. 185 00:09:00,250 --> 00:09:04,650 So this line here just adds execute privileges to everyone. 186 00:09:04,650 --> 00:09:07,450 So that would be akin to, in addition to what we have, 187 00:09:07,450 --> 00:09:09,930 adding 1, 1, 1 to everybody. 188 00:09:09,930 --> 00:09:13,880 >> Whereas this, it's unnecessary to add read and write. 189 00:09:13,880 --> 00:09:16,130 But if you're going to use the numbers, you can't just add something. 190 00:09:16,130 --> 00:09:19,070 You overwrite whatever permission were there and implement them with the new 191 00:09:19,070 --> 00:09:20,920 number you give. 192 00:09:20,920 --> 00:09:21,930 That was pretty quick. 193 00:09:21,930 --> 00:09:24,115 Does anybody have any questions about changing permissions? 194 00:09:24,115 --> 00:09:28,460 195 00:09:28,460 --> 00:09:28,950 >> OK. 196 00:09:28,950 --> 00:09:32,480 If I have a PHP file, what permissions do I want it to have? 197 00:09:32,480 --> 00:09:36,638 198 00:09:36,638 --> 00:09:38,780 This is in the problem set spec. 199 00:09:38,780 --> 00:09:41,590 So you can look at the spec and then read me the answer. 200 00:09:41,590 --> 00:09:45,820 201 00:09:45,820 --> 00:09:48,605 >> AUDIENCE: You want the user to have read-write permissions. 202 00:09:48,605 --> 00:09:51,080 And you want everybody else to have nothing. 203 00:09:51,080 --> 00:09:53,060 >> JASON HIRSCHHORN: And what numbers is that? 204 00:09:53,060 --> 00:09:53,480 >> AUDIENCE: 600. 205 00:09:53,480 --> 00:09:54,840 >> JASON HIRSCHHORN: 600. 206 00:09:54,840 --> 00:09:59,550 So chmod 600-- whenever you print a PHP file, chmod it to 600. 207 00:09:59,550 --> 00:10:00,370 OK. 208 00:10:00,370 --> 00:10:01,890 I have a directory. 209 00:10:01,890 --> 00:10:04,870 Somebody besides Jeff, I have a file folder. 210 00:10:04,870 --> 00:10:08,060 What permissions do I want to give to that folder-- 211 00:10:08,060 --> 00:10:11,620 also in the problem set spec, right below this answer or 212 00:10:11,620 --> 00:10:14,840 the previous answer? 213 00:10:14,840 --> 00:10:16,160 Also potentially on the slide-- 214 00:10:16,160 --> 00:10:16,450 Marcus. 215 00:10:16,450 --> 00:10:17,230 >> AUDIENCE: For the 216 00:10:17,230 --> 00:10:18,180 folder, it's 711. 217 00:10:18,180 --> 00:10:19,590 JASON HIRSCHHORN: 711-- 218 00:10:19,590 --> 00:10:21,230 so a folder, you want to give 711. 219 00:10:21,230 --> 00:10:25,280 You want to be able to read that folder, change directories, move into 220 00:10:25,280 --> 00:10:25,785 that folder. 221 00:10:25,785 --> 00:10:28,865 And you want everybody else to be able to navigate within that folder, but 222 00:10:28,865 --> 00:10:30,790 not necessarily change its contents. 223 00:10:30,790 --> 00:10:33,720 What about a non-PHP file, say, a JavaScript file? 224 00:10:33,720 --> 00:10:36,090 What permissions do we want to give that type of file? 225 00:10:36,090 --> 00:10:37,020 >> AUDIENCE: 644. 226 00:10:37,020 --> 00:10:38,030 >> JASON HIRSCHHORN: 644-- 227 00:10:38,030 --> 00:10:40,010 why do we want to give it 644? 228 00:10:40,010 --> 00:10:42,880 >> AUDIENCE: To let other people read it. 229 00:10:42,880 --> 00:10:44,840 And you read or write it. 230 00:10:44,840 --> 00:10:48,540 >> JASON HIRSCHHORN: So right, everybody else can read that JavaScript file. 231 00:10:48,540 --> 00:10:51,420 And you can change that, in addition to being able to read it. 232 00:10:51,420 --> 00:10:54,970 So one of the most common bugs people have with this problem set and their 233 00:10:54,970 --> 00:10:58,880 final project, if it's a web-based final project is, they won't have set 234 00:10:58,880 --> 00:11:00,170 the correct permissions. 235 00:11:00,170 --> 00:11:03,180 And they won't be able to see their website. 236 00:11:03,180 --> 00:11:04,840 Or a particular part of their website. 237 00:11:04,840 --> 00:11:06,930 >> So make sure you set the permissions correctly. 238 00:11:06,930 --> 00:11:10,730 Don't just assume that it will do it automatically for you. 239 00:11:10,730 --> 00:11:11,500 >> OK. 240 00:11:11,500 --> 00:11:15,100 That was a small thing that we spent a good amount of time on, so 241 00:11:15,100 --> 00:11:16,190 we could nail it. 242 00:11:16,190 --> 00:11:18,000 Let's move on to HTML. 243 00:11:18,000 --> 00:11:20,430 >> And again, for these next four topics, we're going to go through them 244 00:11:20,430 --> 00:11:21,600 relatively quickly. 245 00:11:21,600 --> 00:11:24,980 So please feel free to stop me at any time, if you have any questions, 246 00:11:24,980 --> 00:11:27,900 whether they're related to what I cover or something from lecture or 247 00:11:27,900 --> 00:11:29,440 even from the problem set. 248 00:11:29,440 --> 00:11:31,690 Stop me whenever you need to. 249 00:11:31,690 --> 00:11:34,370 When we get to the end, we'll just start going over the problem set. 250 00:11:34,370 --> 00:11:38,100 >> So HTML stands for HyperText Markup Language. 251 00:11:38,100 --> 00:11:41,360 It is not a programming language. 252 00:11:41,360 --> 00:11:45,800 All it does is structure your content and also provide some metadata. 253 00:11:45,800 --> 00:11:52,340 So for example, presumably, many of you have used Facebook before. 254 00:11:52,340 --> 00:11:56,810 And you can include links in, or you can put a link as your status. 255 00:11:56,810 --> 00:11:59,070 >> And then, you'll notice that link always has a nice picture 256 00:11:59,070 --> 00:12:00,450 to it and some text. 257 00:12:00,450 --> 00:12:03,040 Generally, that is some metadata for a web page. 258 00:12:03,040 --> 00:12:05,250 And it's Facebook-specific metadata. 259 00:12:05,250 --> 00:12:07,780 And then, when Facebook is reading that page and inserting that link, it 260 00:12:07,780 --> 00:12:10,780 looks for the specific metadata, so it knows what picture to display, what 261 00:12:10,780 --> 00:12:13,820 title to display, and what abstract text to display. 262 00:12:13,820 --> 00:12:17,760 >> So we can include metadata with our web page using HTML. 263 00:12:17,760 --> 00:12:21,190 And it also helps us structure the content, generally, what 264 00:12:21,190 --> 00:12:25,400 we want to go where. 265 00:12:25,400 --> 00:12:28,240 >> Everything in HTML is an element. 266 00:12:28,240 --> 00:12:30,690 And elements right here-- 267 00:12:30,690 --> 00:12:33,410 this CS50, text is the element. 268 00:12:33,410 --> 00:12:35,140 And it has some tags. 269 00:12:35,140 --> 00:12:36,690 It has this a tag. 270 00:12:36,690 --> 00:12:41,730 And we notice there is an a at the beginning and then a slash a, so 271 00:12:41,730 --> 00:12:43,960 closing the a tag at the end. 272 00:12:43,960 --> 00:12:46,800 Sometimes, there's not an open tag and a close tag. 273 00:12:46,800 --> 00:12:49,040 There's just one thing. 274 00:12:49,040 --> 00:12:50,640 >> We'll see an example of that on the next slide. 275 00:12:50,640 --> 00:12:52,640 So you don't need an open and a close tag. 276 00:12:52,640 --> 00:12:59,570 But for this, we are encasing this CS50 element in the a anchor tag. 277 00:12:59,570 --> 00:13:03,270 And essentially, these tags tell the browser what to do with 278 00:13:03,270 --> 00:13:04,700 the particular element. 279 00:13:04,700 --> 00:13:07,380 >> So again, CS50 is the text we're going to see. 280 00:13:07,380 --> 00:13:10,060 And it is going to be a type of anchor. 281 00:13:10,060 --> 00:13:13,920 Anchor is essentially used for links to something. 282 00:13:13,920 --> 00:13:16,000 In particular, as you can already tell, this is a 283 00:13:16,000 --> 00:13:18,950 link to the CS50 homepage. 284 00:13:18,950 --> 00:13:23,160 >> The next part of the tag-- or generally, a part of tags are 285 00:13:23,160 --> 00:13:24,290 attributes. 286 00:13:24,290 --> 00:13:27,080 And we see right here, that the a tag has one 287 00:13:27,080 --> 00:13:29,680 attribute, this href attribute. 288 00:13:29,680 --> 00:13:32,000 And they modify a particular tag. 289 00:13:32,000 --> 00:13:36,100 In fact, if you go to one of the websites or the references I gave you 290 00:13:36,100 --> 00:13:39,480 before or look up the a tag online, you'll notice there are a ton of 291 00:13:39,480 --> 00:13:41,010 potential attributes. 292 00:13:41,010 --> 00:13:42,310 >> This is probably one of the most common. 293 00:13:42,310 --> 00:13:46,090 This is telling me to create a link to the specific website. 294 00:13:46,090 --> 00:13:50,260 And attributes generally are given, if not exclusively given, 295 00:13:50,260 --> 00:13:52,350 in key-value pairs. 296 00:13:52,350 --> 00:13:55,380 >> So here's the key, href. 297 00:13:55,380 --> 00:13:57,320 And the value is this right here. 298 00:13:57,320 --> 00:14:01,960 And that will come in handy later on, when we start using some libraries to 299 00:14:01,960 --> 00:14:07,280 help us code in JavaScript or write HTML content. 300 00:14:07,280 --> 00:14:11,120 We are often going to be-- just like we would do array bracket 0 and that 301 00:14:11,120 --> 00:14:12,340 would give us some value. 302 00:14:12,340 --> 00:14:17,190 >> In the future, we'll be doing a lot of things like something bracket href. 303 00:14:17,190 --> 00:14:21,180 And that'll give us the value of the href, or if we want to update the href 304 00:14:21,180 --> 00:14:23,980 key and then give it a particular value. 305 00:14:23,980 --> 00:14:28,915 So just like with arrays where we had key 0 or key 1 or key 2 or even with a 306 00:14:28,915 --> 00:14:33,480 hash table, well, with your hash tables as well, you probably had-- it 307 00:14:33,480 --> 00:14:35,790 was an array, so key 0, key 1, key 2. 308 00:14:35,790 --> 00:14:38,480 >> That index there, we can think of that as a key. 309 00:14:38,480 --> 00:14:40,180 And the value is whatever was stored there. 310 00:14:40,180 --> 00:14:42,760 All of these attributes are key-value pairs. 311 00:14:42,760 --> 00:14:47,370 And that will be important for changing them or updating them or 312 00:14:47,370 --> 00:14:51,020 inserting them later on. 313 00:14:51,020 --> 00:14:53,990 >> Finally, you've seen this structure before, but this is the most basic 314 00:14:53,990 --> 00:14:55,350 structure of HTML page. 315 00:14:55,350 --> 00:14:58,700 At the top, we tell you that this is in fact HTML. 316 00:14:58,700 --> 00:15:01,910 And then we have an open HTML tag and a close HTML tag. 317 00:15:01,910 --> 00:15:04,940 So everything inside of this is the HTML. 318 00:15:04,940 --> 00:15:08,960 >> We see the head and the body. 319 00:15:08,960 --> 00:15:12,350 The head of your document generally includes what? 320 00:15:12,350 --> 00:15:16,980 321 00:15:16,980 --> 00:15:20,995 Any guesses for what you put in the head? 322 00:15:20,995 --> 00:15:23,060 >> AUDIENCE: You put the title and style. 323 00:15:23,060 --> 00:15:23,790 >> JASON HIRSCHHORN: The title. 324 00:15:23,790 --> 00:15:26,110 That was a great guess. 325 00:15:26,110 --> 00:15:27,200 I may have tipped you off to the. 326 00:15:27,200 --> 00:15:28,150 What are some other things? 327 00:15:28,150 --> 00:15:30,351 We mentioned one of them that might go in the head. 328 00:15:30,351 --> 00:15:33,057 329 00:15:33,057 --> 00:15:35,225 >> AUDIENCE: He said, styles. 330 00:15:35,225 --> 00:15:36,240 >> JASON HIRSCHHORN: Styles-- 331 00:15:36,240 --> 00:15:41,050 so if you want to link in a JavaScript or even a CSS, which you're talking 332 00:15:41,050 --> 00:15:42,610 about when you're talking about styles. 333 00:15:42,610 --> 00:15:45,670 Another file, you want to link in an outside file, that will probably going 334 00:15:45,670 --> 00:15:46,920 in the head. 335 00:15:46,920 --> 00:15:48,660 336 00:15:48,660 --> 00:15:51,070 >> What else? 337 00:15:51,070 --> 00:15:52,960 We mentioned a couple of slides ago one of the things that 338 00:15:52,960 --> 00:15:54,510 HTML can do for you. 339 00:15:54,510 --> 00:15:58,180 340 00:15:58,180 --> 00:16:01,240 It can provide-- 341 00:16:01,240 --> 00:16:02,874 starts with a M-- 342 00:16:02,874 --> 00:16:03,820 >> AUDIENCE: Metadata. 343 00:16:03,820 --> 00:16:06,170 >> JASON HIRSCHHORN: Metadata-- so a lot of the metadata will go in the head, 344 00:16:06,170 --> 00:16:08,990 because that will not necessarily need to be part of the body of your code. 345 00:16:08,990 --> 00:16:11,820 That's generally-- the body is the content, what somebody sees. 346 00:16:11,820 --> 00:16:14,210 And so I just gave away the answer to my next question. 347 00:16:14,210 --> 00:16:17,770 But in the body is generally the content that's going to be displayed 348 00:16:17,770 --> 00:16:19,750 on the web page. 349 00:16:19,750 --> 00:16:26,120 >> As we will see, complicated websites tend to intermingle or change up what 350 00:16:26,120 --> 00:16:27,170 they put in the head and the body. 351 00:16:27,170 --> 00:16:30,360 But generally, the head contains things that the user is not going to 352 00:16:30,360 --> 00:16:31,290 see on the screen. 353 00:16:31,290 --> 00:16:34,150 It links in other files and provides metadata. 354 00:16:34,150 --> 00:16:37,690 Whereas, the body contains everything the user is going to see. 355 00:16:37,690 --> 00:16:39,270 Any idea what this p tag means? 356 00:16:39,270 --> 00:16:41,660 >> AUDIENCE: Paragraph? 357 00:16:41,660 --> 00:16:42,780 >> AUDIENCE: Print. 358 00:16:42,780 --> 00:16:44,120 >> AUDIENCE: Doesn't mean print. 359 00:16:44,120 --> 00:16:45,380 >> AUDIENCE: Does it mean paragraph? 360 00:16:45,380 --> 00:16:47,620 >> JASON HIRSCHHORN: Paragraph-- so this is a paragraph. 361 00:16:47,620 --> 00:16:50,920 And this p tag, I could have just typed this on the screen and then 362 00:16:50,920 --> 00:16:52,630 included a line break at the end of it. 363 00:16:52,630 --> 00:16:54,380 Anybody know how to include a line break? 364 00:16:54,380 --> 00:16:55,240 >> AUDIENCE: pr-- 365 00:16:55,240 --> 00:16:55,700 >> JASON HIRSCHHORN: pr-- 366 00:16:55,700 --> 00:16:57,080 >> AUDIENCE: Slash pr? 367 00:16:57,080 --> 00:17:00,120 >> JASON HIRSCHHORN: pr slash stands for line break. 368 00:17:00,120 --> 00:17:03,270 But paragraphs have specific formatting. 369 00:17:03,270 --> 00:17:06,060 And we'll get to formatting in a second, when we talk about CSS. 370 00:17:06,060 --> 00:17:09,900 But everything inside these p tags will have some default formatting 371 00:17:09,900 --> 00:17:13,210 associated with it, probably some spacing in between different 372 00:17:13,210 --> 00:17:15,069 paragraphs. 373 00:17:15,069 --> 00:17:19,410 And it'll be one way to differentiate blocks of code. 374 00:17:19,410 --> 00:17:20,980 >> Any other tags-- 375 00:17:20,980 --> 00:17:24,584 what are other tags that you've seen? 376 00:17:24,584 --> 00:17:26,609 >> JASON HIRSCHHORN: h1 through h6. 377 00:17:26,609 --> 00:17:28,460 h1 through h6, and what's that? 378 00:17:28,460 --> 00:17:31,560 >> AUDIENCE: It will denote how big and bold the letters are. 379 00:17:31,560 --> 00:17:32,650 >> JASON HIRSCHHORN: Right, it stands for header. 380 00:17:32,650 --> 00:17:34,960 And so header1 is a big header. 381 00:17:34,960 --> 00:17:40,840 It'll probably, by default, be bold, a large font size, probably centered on 382 00:17:40,840 --> 00:17:44,030 the screen, all the way down to h6, which is a smaller font size, less 383 00:17:44,030 --> 00:17:44,780 emphasized. 384 00:17:44,780 --> 00:17:50,290 Of course, you can, in you're CSS file or somewhere in your code-- which, 385 00:17:50,290 --> 00:17:53,830 again, we'll get to that in a second-- change what the default behavior 386 00:17:53,830 --> 00:17:55,780 of an h1 tag is. 387 00:17:55,780 --> 00:18:01,040 >> But keep in mind that Chrome, Safari, Firefox, Internet Explorer all have 388 00:18:01,040 --> 00:18:04,030 default looks for a lot of these standard tags. 389 00:18:04,030 --> 00:18:07,110 You can, again, always change what they look like. 390 00:18:07,110 --> 00:18:09,955 Any other tags that everybody has seen? 391 00:18:09,955 --> 00:18:10,350 Yeah-- 392 00:18:10,350 --> 00:18:11,530 >> AUDIENCE: A div site. 393 00:18:11,530 --> 00:18:15,830 >> JASON HIRSCHHORN: A div tag-- div tag doesn't have any built-in format, per 394 00:18:15,830 --> 00:18:21,850 se, that is used to block off different types of code. 395 00:18:21,850 --> 00:18:22,980 Any other tags? 396 00:18:22,980 --> 00:18:23,390 Yes. 397 00:18:23,390 --> 00:18:24,333 >> AUDIENCE: li-- 398 00:18:24,333 --> 00:18:24,850 >> JASON HIRSCHHORN: li-- 399 00:18:24,850 --> 00:18:25,580 what's li for? 400 00:18:25,580 --> 00:18:26,210 >> AUDIENCE: List. 401 00:18:26,210 --> 00:18:26,930 >> AUDIENCE: List 402 00:18:26,930 --> 00:18:29,510 >> JASON HIRSCHHORN: li is for list elements. 403 00:18:29,510 --> 00:18:30,720 There are two types of lists. 404 00:18:30,720 --> 00:18:31,970 What are the two types? 405 00:18:31,970 --> 00:18:34,165 406 00:18:34,165 --> 00:18:35,806 >> AUDIENCE: Ordered and unordered. 407 00:18:35,806 --> 00:18:37,780 >> JASON HIRSCHHORN: Ordered and unordered-- so ul stands 408 00:18:37,780 --> 00:18:38,560 for unordered list. 409 00:18:38,560 --> 00:18:41,120 That's if you want a bullet point, a list of bullets. 410 00:18:41,120 --> 00:18:43,180 An ordered list is a numbered list. 411 00:18:43,180 --> 00:18:47,930 And so you'll do an open ul tag and then tons of list elements and then 412 00:18:47,930 --> 00:18:50,450 close the ul tag. and that will create an unordered list. 413 00:18:50,450 --> 00:18:52,380 >> We're going to see some examples of HTML in a bit. 414 00:18:52,380 --> 00:18:55,800 But before then, I want to get to CSS. 415 00:18:55,800 --> 00:18:58,530 And CSS stands for Cascading Style Sheets. 416 00:18:58,530 --> 00:19:03,010 And this is very closely related to HTML but slightly different. 417 00:19:03,010 --> 00:19:06,920 This helps you format all the content that HTML structures. 418 00:19:06,920 --> 00:19:14,940 >> So in CSS, we generally don't want to style every single header or every 419 00:19:14,940 --> 00:19:17,250 single image or every single paragraph. 420 00:19:17,250 --> 00:19:21,210 We want to style some elements or maybe a specific element. 421 00:19:21,210 --> 00:19:25,250 And the way we style a specific element is to give it an ID. 422 00:19:25,250 --> 00:19:26,070 >> So this is an attribute. 423 00:19:26,070 --> 00:19:27,960 It has a key and a value. 424 00:19:27,960 --> 00:19:29,130 ID is the key. 425 00:19:29,130 --> 00:19:30,220 Logo is the value. 426 00:19:30,220 --> 00:19:32,410 I picked logo randomly. 427 00:19:32,410 --> 00:19:36,780 And if you give something an ID, generally, that should only be given 428 00:19:36,780 --> 00:19:38,800 to one element. 429 00:19:38,800 --> 00:19:42,340 >> And then, in your style sheet, you can style that particular element, however 430 00:19:42,340 --> 00:19:44,090 you want it to look. 431 00:19:44,090 --> 00:19:49,560 If you want to style a number of elements, maybe it's a certain class 432 00:19:49,560 --> 00:19:51,310 of headers, only some of your headers. 433 00:19:51,310 --> 00:19:56,780 Maybe it's a header and an image and a paragraph you all want to be centered. 434 00:19:56,780 --> 00:20:00,700 Then you can give those groups of elements all a class. 435 00:20:00,700 --> 00:20:04,300 And you can give the class specific styles. 436 00:20:04,300 --> 00:20:08,860 So an ID and a class are two ways to break up your code, so you can help be 437 00:20:08,860 --> 00:20:11,990 more specific in what you style. 438 00:20:11,990 --> 00:20:13,830 >> There are three ways to style. 439 00:20:13,830 --> 00:20:17,530 The first one is, with this style attribute. 440 00:20:17,530 --> 00:20:21,200 So you see, the style key is style. 441 00:20:21,200 --> 00:20:24,370 The style value is actually another key value list. 442 00:20:24,370 --> 00:20:26,570 >> In this case, I picked one key, text-align. 443 00:20:26,570 --> 00:20:27,730 And I said, center. 444 00:20:27,730 --> 00:20:30,280 You might be asking yourself at this point, how did I know about 445 00:20:30,280 --> 00:20:31,230 text-align. 446 00:20:31,230 --> 00:20:32,280 What does that even do? 447 00:20:32,280 --> 00:20:35,350 That's a great question to ask, and we're going to get there in a second. 448 00:20:35,350 --> 00:20:39,740 So that's one way to style something, just give it the style attribute. 449 00:20:39,740 --> 00:20:43,490 >> Another way to style something is-- this is Akshar mentioned earlier. 450 00:20:43,490 --> 00:20:49,660 You can use style tags and put that in the head of your HTML document. 451 00:20:49,660 --> 00:20:52,220 So you're basically saying, the content inside here 452 00:20:52,220 --> 00:20:53,870 is some style content. 453 00:20:53,870 --> 00:20:59,520 And the format for that is the thing you want to style and then, inside of 454 00:20:59,520 --> 00:21:03,460 curly braces, the key value pair of attributes that you want to give to 455 00:21:03,460 --> 00:21:05,920 that particular type of element. 456 00:21:05,920 --> 00:21:07,370 >> Finally, and this is the most common way. 457 00:21:07,370 --> 00:21:10,320 And this is the way we do it in p set 7. 458 00:21:10,320 --> 00:21:12,370 It's an external style sheet. 459 00:21:12,370 --> 00:21:14,370 So you have a .css file. 460 00:21:14,370 --> 00:21:18,050 And inside of it, you see a lot of things that look like this, the name 461 00:21:18,050 --> 00:21:22,730 of some type of element or an ID or a class and then, inside of curly 462 00:21:22,730 --> 00:21:28,040 braces, a list of key value pairs. 463 00:21:28,040 --> 00:21:30,065 >> Of course, if you create an external file, you're going to 464 00:21:30,065 --> 00:21:31,310 need to include it-- 465 00:21:31,310 --> 00:21:34,860 sharp include, that would be the C analogy-- 466 00:21:34,860 --> 00:21:36,250 in your HTML file. 467 00:21:36,250 --> 00:21:39,820 So you have to include this code in your HTML file. 468 00:21:39,820 --> 00:21:46,080 This being the name of the file and assuming it's in the same directory. 469 00:21:46,080 --> 00:21:47,100 >> OK. 470 00:21:47,100 --> 00:21:48,200 That was a lot. 471 00:21:48,200 --> 00:21:52,440 And we're now going to breathe and look at some real, live website and 472 00:21:52,440 --> 00:21:53,720 explore this more. 473 00:21:53,720 --> 00:21:55,470 But before we do that, does anybody have any questions? 474 00:21:55,470 --> 00:22:00,830 475 00:22:00,830 --> 00:22:04,970 >> So if you want to do this along with me, we can go to the appliance. 476 00:22:04,970 --> 00:22:08,950 And I chose the CS50 home page. 477 00:22:08,950 --> 00:22:10,020 You can do this with any website. 478 00:22:10,020 --> 00:22:13,070 But why don't we start with the CS50 homepage? 479 00:22:13,070 --> 00:22:14,650 >> Let's refresh. 480 00:22:14,650 --> 00:22:18,030 I actually highly recommend you doing this along with me, because what we 481 00:22:18,030 --> 00:22:22,720 are going to do now is going to be incredibly handy for you, not only in 482 00:22:22,720 --> 00:22:24,450 P-Set 7, but in P-Set 8 as well. 483 00:22:24,450 --> 00:22:24,810 Yeah. 484 00:22:24,810 --> 00:22:29,560 >> AUDIENCE: Is there a way to do comments in HTML, without using PHP? 485 00:22:29,560 --> 00:22:31,130 >> JASON HIRSCHHORN: Yes, you can make comments in HTML. 486 00:22:31,130 --> 00:22:32,690 >> AUDIENCE: What's the syntax? 487 00:22:32,690 --> 00:22:34,340 >> AUDIENCE: Exclamation mark dash dash. 488 00:22:34,340 --> 00:22:36,125 >> AUDIENCE: OK. 489 00:22:36,125 --> 00:22:37,100 >> JASON HIRSCHHORN: Yes. 490 00:22:37,100 --> 00:22:38,350 That is the syntax. 491 00:22:38,350 --> 00:22:40,630 492 00:22:40,630 --> 00:22:41,900 You can make comments in HTML. 493 00:22:41,900 --> 00:22:43,310 You can make comments in PHP. 494 00:22:43,310 --> 00:22:46,590 >> As you'll see, comment in HTML will still show up, when we look at the 495 00:22:46,590 --> 00:22:49,960 HTML source code of a particular site. 496 00:22:49,960 --> 00:22:51,610 So this cs50.net. 497 00:22:51,610 --> 00:22:57,360 If you right click in most modern browsers on most any page, you view 498 00:22:57,360 --> 00:22:58,820 the page source. 499 00:22:58,820 --> 00:23:01,480 So let's do that on CS50. 500 00:23:01,480 --> 00:23:05,060 >> And lo and behold, we see a giant thing. 501 00:23:05,060 --> 00:23:07,420 CS50 actually looks pretty nice. 502 00:23:07,420 --> 00:23:08,920 A lot of websites won't look this nice. 503 00:23:08,920 --> 00:23:10,540 If you go to Google's homepage and open it up. 504 00:23:10,540 --> 00:23:11,960 It won't look this nice. 505 00:23:11,960 --> 00:23:13,830 >> But you notice that, at the top-- 506 00:23:13,830 --> 00:23:16,650 this is kind of small. 507 00:23:16,650 --> 00:23:17,900 Let's make this larger. 508 00:23:17,900 --> 00:23:22,660 509 00:23:22,660 --> 00:23:23,570 OK. 510 00:23:23,570 --> 00:23:26,660 At the top, DOCTYPE HTML, that's familiar. 511 00:23:26,660 --> 00:23:30,650 Then we see the open HTML tag and the head, right here, all 512 00:23:30,650 --> 00:23:34,350 of these meta tags. 513 00:23:34,350 --> 00:23:38,000 And you can see this og, not going to go into that now. 514 00:23:38,000 --> 00:23:42,110 But I am almost positive at that those would be Facebook. 515 00:23:42,110 --> 00:23:42,900 >> That is actually the Facebook. 516 00:23:42,900 --> 00:23:44,870 I think that stands for open graph. 517 00:23:44,870 --> 00:23:48,930 So remember, I was mentioning there is Faceboook-specific metadata you can 518 00:23:48,930 --> 00:23:49,800 give to a page. 519 00:23:49,800 --> 00:23:51,150 That's what is right here. 520 00:23:51,150 --> 00:23:54,580 >> So when you link this page on Facebook, the image it's going to show 521 00:23:54,580 --> 00:23:56,630 is this image right here. 522 00:23:56,630 --> 00:23:58,310 And you actually see that it's Facebook, because it's 523 00:23:58,310 --> 00:23:59,470 the Facebook image. 524 00:23:59,470 --> 00:24:00,880 >> But anyway, we're getting aside. 525 00:24:00,880 --> 00:24:03,220 So we have some metadata tags here. 526 00:24:03,220 --> 00:24:05,570 We see the CS50 title. 527 00:24:05,570 --> 00:24:09,830 And again, the title is what goes up here in the browser tab. 528 00:24:09,830 --> 00:24:14,770 We see this is linking in, right here, an external JavaScript file. 529 00:24:14,770 --> 00:24:17,640 >> We haven't talked about JavaScript much, but next week-- and certainly if 530 00:24:17,640 --> 00:24:20,350 you're doing a web-based problem set, you will be using JavaScript. 531 00:24:20,350 --> 00:24:23,540 This is how you link in external JavaScript files. 532 00:24:23,540 --> 00:24:31,970 We see right here, finally, the CSS style sheet, that documents these 533 00:24:31,970 --> 00:24:32,830 styles of this code. 534 00:24:32,830 --> 00:24:37,190 >> Let's actually open that up and take a look really quickly. 535 00:24:37,190 --> 00:24:38,440 This looks crazy. 536 00:24:38,440 --> 00:24:40,840 537 00:24:40,840 --> 00:24:42,790 There's no way I would be able to read through. 538 00:24:42,790 --> 00:24:46,930 So you can actually though, if you take a look, you can sort of see that 539 00:24:46,930 --> 00:24:48,650 there are-- 540 00:24:48,650 --> 00:24:49,790 there we go. 541 00:24:49,790 --> 00:24:53,440 >> That looks like something we've seen before, background color, setting it 542 00:24:53,440 --> 00:24:55,550 equal to some red-green-blue value. 543 00:24:55,550 --> 00:24:59,070 This stuff sort of shouldn't seem that foreign, even though, when presented 544 00:24:59,070 --> 00:25:00,850 like this, it can be a bit overwhelming. 545 00:25:00,850 --> 00:25:03,340 We're not going to look at this CSS file or spend much time on it, because 546 00:25:03,340 --> 00:25:06,030 it is, again, pretty hard to read. 547 00:25:06,030 --> 00:25:09,090 >> Let's go back to this HTML page for CS50. 548 00:25:09,090 --> 00:25:10,930 And let's scroll down to the body. 549 00:25:10,930 --> 00:25:14,730 And inside we see this div tag. 550 00:25:14,730 --> 00:25:18,370 We see a header right here. 551 00:25:18,370 --> 00:25:21,060 We see the anchor tag. 552 00:25:21,060 --> 00:25:26,050 >> And this list element is given a specific class. 553 00:25:26,050 --> 00:25:28,370 And we see that class repeated over and over again. 554 00:25:28,370 --> 00:25:29,730 There you are Curtis. 555 00:25:29,730 --> 00:25:32,730 There is the comment in HTML5. 556 00:25:32,730 --> 00:25:36,280 >> And as you notice, we can still see it, but it's not showing up. 557 00:25:36,280 --> 00:25:37,960 It's actually really interesting. 558 00:25:37,960 --> 00:25:40,760 It looks like this scores list element is commented out. 559 00:25:40,760 --> 00:25:45,110 If we go to this page, again, it still appears there, so interesting. 560 00:25:45,110 --> 00:25:47,830 >> Oh, that's why, because of this next line. 561 00:25:47,830 --> 00:25:50,680 562 00:25:50,680 --> 00:25:52,735 What else do we see of interest? 563 00:25:52,735 --> 00:25:56,640 564 00:25:56,640 --> 00:26:00,180 The rest of this is more confusing, in dealing with this right half of the 565 00:26:00,180 --> 00:26:03,280 website , which is a little bit more complex. 566 00:26:03,280 --> 00:26:08,890 >> So this is what some HTML is going to look like. 567 00:26:08,890 --> 00:26:10,990 For me though, this is a little overwhelming, and this doesn't 568 00:26:10,990 --> 00:26:12,350 help me that much. 569 00:26:12,350 --> 00:26:16,560 However, there's something that does, in fact, help me a lot. 570 00:26:16,560 --> 00:26:20,490 >> And that is what I use whenever I'm trying to figure out how something 571 00:26:20,490 --> 00:26:24,270 looks the way it does, or how can I make changes to my website. 572 00:26:24,270 --> 00:26:29,280 And that is a developer tool that is built into Chrome. 573 00:26:29,280 --> 00:26:33,960 So if you go to this three bars right here and go down to tools click on 574 00:26:33,960 --> 00:26:40,120 Developer Tools, a little window will pop up at the bottom of the page. 575 00:26:40,120 --> 00:26:46,910 And in particular, Chrome, since it is wonderful, will format this window and 576 00:26:46,910 --> 00:26:49,580 take the HTML and make it look a lot nicer for you. 577 00:26:49,580 --> 00:26:54,860 So now it's actually some collapsible HTML that you can explore to inspect 578 00:26:54,860 --> 00:26:56,620 the elements of the page. 579 00:26:56,620 --> 00:26:59,400 >> If we want to look at the body, it actually highlights. 580 00:26:59,400 --> 00:27:03,240 When you scroll over a part of the HTML, down in this window, it will 581 00:27:03,240 --> 00:27:06,530 highlight the part it's talking about in the big window. 582 00:27:06,530 --> 00:27:10,800 So let me again try and blow this up a bit. 583 00:27:10,800 --> 00:27:12,170 OK. 584 00:27:12,170 --> 00:27:13,550 >> So let's open the body. 585 00:27:13,550 --> 00:27:17,280 And I'm scrolling over this left div. 586 00:27:17,280 --> 00:27:21,420 And you notice that it's highlighting this left half of the screen. 587 00:27:21,420 --> 00:27:25,710 So let's click on that and expand that. 588 00:27:25,710 --> 00:27:27,280 >> Inside of it, it looks like there are two divs. 589 00:27:27,280 --> 00:27:29,790 There's this first div. 590 00:27:29,790 --> 00:27:30,760 I don't see that highlighted. 591 00:27:30,760 --> 00:27:35,900 I don't know, but it looks like this second one, left inner, is the content 592 00:27:35,900 --> 00:27:37,700 on the left side of the screen. 593 00:27:37,700 --> 00:27:39,360 >> Then there's this thing called header. 594 00:27:39,360 --> 00:27:41,890 It looks like that's highlighting the CS50 part. 595 00:27:41,890 --> 00:27:46,600 If we open that up, we see that it's nothing more than header 1. 596 00:27:46,600 --> 00:27:51,140 It's given an ID, and it's given the text cs50. 597 00:27:51,140 --> 00:27:57,240 >> So again, looking at it through this console or using the developer tools 598 00:27:57,240 --> 00:28:00,710 pane at the bottom of the screen makes exploring this website, hopefully, a 599 00:28:00,710 --> 00:28:02,990 lot less intimidating and a lot more accessible. 600 00:28:02,990 --> 00:28:06,360 It also allows us to understand that this website, though it looks very 601 00:28:06,360 --> 00:28:09,210 pretty and nice, is not all that much more than what you're going to be 602 00:28:09,210 --> 00:28:10,430 doing on Problem Set 7. 603 00:28:10,430 --> 00:28:13,080 And this is totally within your ability to create. 604 00:28:13,080 --> 00:28:14,110 >> If we want to-- 605 00:28:14,110 --> 00:28:18,270 the other cool thing about using these tools is, if you right click on the 606 00:28:18,270 --> 00:28:22,270 title, you can edit the HTML. 607 00:28:22,270 --> 00:28:25,660 So let's call it Jason. 608 00:28:25,660 --> 00:28:28,990 And now you'll notice I have changed the HTML on this page. 609 00:28:28,990 --> 00:28:31,020 >> Of course, I haven't changed it permanently. 610 00:28:31,020 --> 00:28:34,570 If I refresh my browser, then it would go back to the original HTML. 611 00:28:34,570 --> 00:28:38,860 But sometimes I want to debug my code, and I don't want to look just have my 612 00:28:38,860 --> 00:28:41,370 gedit window and try and understand what's going on. 613 00:28:41,370 --> 00:28:42,705 >> I want to see what will happen live. 614 00:28:42,705 --> 00:28:45,880 So I'll edit code like this and get it the way I want it to look. 615 00:28:45,880 --> 00:28:47,960 And then I'll make the changes in my code. 616 00:28:47,960 --> 00:28:50,010 >> And I find that it's a lot easier when you can do the things 617 00:28:50,010 --> 00:28:52,400 instantaneously, like that. 618 00:28:52,400 --> 00:28:58,410 Say, again, we want to make another chance, because we're exploring with 619 00:28:58,410 --> 00:29:00,340 HTML and CSS right now. 620 00:29:00,340 --> 00:29:02,600 I can edit the HTML right now. 621 00:29:02,600 --> 00:29:06,680 And I'm going to include a link. 622 00:29:06,680 --> 00:29:10,650 >> So I'm going to change CS50's home page, so it will link to-- 623 00:29:10,650 --> 00:29:12,060 let's say-- my home page. 624 00:29:12,060 --> 00:29:16,700 What is the name, if anybody recalls, or what's the attribute I want to give 625 00:29:16,700 --> 00:29:18,850 to an anchor tab when I want it to link somewhere else? 626 00:29:18,850 --> 00:29:19,562 >> AUDIENCE: href? 627 00:29:19,562 --> 00:29:20,812 >> JASON HIRSCHHORN: href-- 628 00:29:20,812 --> 00:29:32,520 629 00:29:32,520 --> 00:29:35,750 So now, you'll see that there is an underline under Jason. 630 00:29:35,750 --> 00:29:40,170 That's because Chrome, by default, gives anchors an underline. 631 00:29:40,170 --> 00:29:41,990 You've probably seen that before when you've gone to a web page. 632 00:29:41,990 --> 00:29:44,200 Things that are links are underlined and in blue. 633 00:29:44,200 --> 00:29:47,300 The default style for a link is to generally underline 634 00:29:47,300 --> 00:29:48,830 and put it in blue. 635 00:29:48,830 --> 00:29:50,050 >> If I don't like that, I can change that. 636 00:29:50,050 --> 00:29:51,220 And we'll change it in a second. 637 00:29:51,220 --> 00:29:54,660 But now, also notice that, if I hover over this, in the bottom left of the 638 00:29:54,660 --> 00:29:58,580 screen, right above the word elements is the link that I gave it. 639 00:29:58,580 --> 00:30:03,080 >> So if I did click on this-- and we can right click on this, open a new tab. 640 00:30:03,080 --> 00:30:04,520 This isn't actually my homepage. 641 00:30:04,520 --> 00:30:06,700 It's just my name. 642 00:30:06,700 --> 00:30:07,210 There you go. 643 00:30:07,210 --> 00:30:10,440 We've now turn it into a link. 644 00:30:10,440 --> 00:30:13,220 >> Let's explore some CSS as well. 645 00:30:13,220 --> 00:30:15,680 The beautiful thing-- and I'm going to make this a little bit smaller-- about 646 00:30:15,680 --> 00:30:19,480 this console is, that crazy CSS sheet we saw before, that was really 647 00:30:19,480 --> 00:30:24,130 difficult to parse, is now beautifully laid out for us on the left-hand side 648 00:30:24,130 --> 00:30:25,270 of this pane. 649 00:30:25,270 --> 00:30:27,230 So we can look. 650 00:30:27,230 --> 00:30:33,690 And if we expand this styles tab, we can see all of the different styles 651 00:30:33,690 --> 00:30:37,940 that are associated with, in this case, this particular element, this 652 00:30:37,940 --> 00:30:39,700 link element. 653 00:30:39,700 --> 00:30:44,240 >> If we do the compound styles tab, that just shows us, not where everything 654 00:30:44,240 --> 00:30:47,450 comes from, but essentially all of these styles that are operating on 655 00:30:47,450 --> 00:30:51,220 this particular element right now. 656 00:30:51,220 --> 00:30:55,050 And let's say, we want to change it a bit. 657 00:30:55,050 --> 00:30:58,870 658 00:30:58,870 --> 00:31:02,740 So this is all the styles that are operating on this particular element. 659 00:31:02,740 --> 00:31:04,800 Say we want to change it, because we want to see how something looks. 660 00:31:04,800 --> 00:31:06,050 And we're just playing around right now. 661 00:31:06,050 --> 00:31:08,720 Or we want to test something out, before writing it in code and pushing 662 00:31:08,720 --> 00:31:10,150 it and making it live. 663 00:31:10,150 --> 00:31:11,780 >> We can go to the styles tab. 664 00:31:11,780 --> 00:31:14,270 And in the first box it says, element.style. 665 00:31:14,270 --> 00:31:17,020 And in here, you can insert, you can add something. 666 00:31:17,020 --> 00:31:18,550 >> So I want to-- 667 00:31:18,550 --> 00:31:22,360 let's go to my link and the set the background color. 668 00:31:22,360 --> 00:31:25,830 And it actually autofills it for you, all the possible properties. 669 00:31:25,830 --> 00:31:29,360 Background color, and I want to make that blue. 670 00:31:29,360 --> 00:31:31,520 Blus is not a word. 671 00:31:31,520 --> 00:31:32,400 Blue is a word. 672 00:31:32,400 --> 00:31:34,490 >> Did I see it come up? 673 00:31:34,490 --> 00:31:35,800 Oh, is that because it's in the href? 674 00:31:35,800 --> 00:31:36,550 OK. 675 00:31:36,550 --> 00:31:40,220 So I don't see any change here. 676 00:31:40,220 --> 00:31:45,100 And that's because, if we highlight the link, you'll notice that the link 677 00:31:45,100 --> 00:31:48,430 is not actually controlling the properties of this particular element. 678 00:31:48,430 --> 00:31:52,430 It's actually, if we open the link, this header right here that's 679 00:31:52,430 --> 00:31:53,590 controlling what it looks like. 680 00:31:53,590 --> 00:31:56,380 >> So if I want to make the background blue, I actually have to change 681 00:31:56,380 --> 00:31:59,640 background color on the header element. 682 00:31:59,640 --> 00:32:02,700 And now we see that the background is blue. 683 00:32:02,700 --> 00:32:06,770 >> So again, this quickly might be going through this material pretty quickly. 684 00:32:06,770 --> 00:32:08,580 But this is essentially what you're going to be doing. 685 00:32:08,580 --> 00:32:10,860 It's not on Problem Set 7, but certainly when you're 686 00:32:10,860 --> 00:32:12,080 coding on the web. 687 00:32:12,080 --> 00:32:12,360 >> OK. 688 00:32:12,360 --> 00:32:13,780 I want to make the background blue. 689 00:32:13,780 --> 00:32:16,180 Even though, in this case, blue looks pretty ugly. 690 00:32:16,180 --> 00:32:17,740 I can go in here, play around. 691 00:32:17,740 --> 00:32:20,515 I see that changing it to blue does not work on the a. 692 00:32:20,515 --> 00:32:26,710 I have to actually change the header element to include the blue 693 00:32:26,710 --> 00:32:28,200 background. 694 00:32:28,200 --> 00:32:34,450 >> And then, if then I go back to my CSS file, how do I actually set this 695 00:32:34,450 --> 00:32:37,520 background to be blue and make this change stick? 696 00:32:37,520 --> 00:32:44,840 Because if we notice if I refresh the page, all the changes I made are gone. 697 00:32:44,840 --> 00:32:47,220 So I realized, OK, my background is blue. 698 00:32:47,220 --> 00:32:51,260 >> I need to go into that header1 element and change background color to blue. 699 00:32:51,260 --> 00:32:52,710 How do I actually make that change? 700 00:32:52,710 --> 00:32:57,040 Well, recall that, if we go inside of here, this header, the 701 00:32:57,040 --> 00:32:59,280 title has an ID. 702 00:32:59,280 --> 00:33:00,890 And that's title. 703 00:33:00,890 --> 00:33:09,010 >> And so in our CSS file, we can say, OK, take anything with ID of title and 704 00:33:09,010 --> 00:33:11,330 give it this additional property. 705 00:33:11,330 --> 00:33:18,010 How do we reference something with the ID of title, any ideas, or anybody 706 00:33:18,010 --> 00:33:24,406 know how we reference IDs in our CSS file? 707 00:33:24,406 --> 00:33:26,290 >> A hash, that's exactly right. 708 00:33:26,290 --> 00:33:28,710 And you got a hint of that right here. 709 00:33:28,710 --> 00:33:32,810 So somewhere in this CSS file, there's this line of code-- 710 00:33:32,810 --> 00:33:34,150 #left #left-inner #header #title. 711 00:33:34,150 --> 00:33:36,810 712 00:33:36,810 --> 00:33:40,590 And it's giving it margin bottom, defining the margin bottom of this 713 00:33:40,590 --> 00:33:42,220 particular element. 714 00:33:42,220 --> 00:33:46,580 >> Well, if I wanted to change that, I would go into this CSS file. 715 00:33:46,580 --> 00:33:49,510 And I could either find this part of the CSS file. 716 00:33:49,510 --> 00:33:50,300 Or I could write my own. 717 00:33:50,300 --> 00:33:54,670 >> I could do hash title curly brace and then background color colon blue 718 00:33:54,670 --> 00:33:57,250 semicolon and close that curly brace. 719 00:33:57,250 --> 00:34:02,790 And that would change the background color of this element to blue. 720 00:34:02,790 --> 00:34:06,690 The reason they give you so many here is that, it's necessary in this case, 721 00:34:06,690 --> 00:34:08,690 because title is a unique ID. 722 00:34:08,690 --> 00:34:11,190 >> But what you can do is nest things. 723 00:34:11,190 --> 00:34:14,760 So this is saying, OK, go to the left. 724 00:34:14,760 --> 00:34:15,350 That's very small. 725 00:34:15,350 --> 00:34:16,150 I apologize for that. 726 00:34:16,150 --> 00:34:17,750 >> But go to the thing with ID left. 727 00:34:17,750 --> 00:34:20,420 Inside of that, look for the thing with ID left inner. 728 00:34:20,420 --> 00:34:22,630 Inside of that look, look for the thing with ID header. 729 00:34:22,630 --> 00:34:27,560 Inside of that, look for the thing ID title and change the ID title. 730 00:34:27,560 --> 00:34:29,120 So this is just a way of nesting things. 731 00:34:29,120 --> 00:34:32,719 Some people like nest it, because it makes it a bit clearer. 732 00:34:32,719 --> 00:34:37,980 >> You'll see down here also, right here, there's no hash. 733 00:34:37,980 --> 00:34:39,449 It's just h1. 734 00:34:39,449 --> 00:34:44,060 That's because h1 is given the name of a generic tag. 735 00:34:44,060 --> 00:34:48,080 And there are some CSS properties associated with every single h1. 736 00:34:48,080 --> 00:34:51,889 So if I found another h1 on this page, I would also see that this style was 737 00:34:51,889 --> 00:34:54,280 applied to it as well. 738 00:34:54,280 --> 00:34:59,290 >> If I wanted to apply a style to a class, how do I reference a class or 739 00:34:59,290 --> 00:35:02,469 talk about a class in a CSS file? 740 00:35:02,469 --> 00:35:03,315 >> AUDIENCE: Dot. 741 00:35:03,315 --> 00:35:05,340 >> JASON HIRSCHHORN: It's with a dot. 742 00:35:05,340 --> 00:35:08,630 So let's go back to this page before. 743 00:35:08,630 --> 00:35:11,160 If I do hash ID. 744 00:35:11,160 --> 00:35:14,760 That's changing the style of the thing with ID. 745 00:35:14,760 --> 00:35:21,390 Or sorry, if I do hash logo, that's finding the thing with the ID of logo 746 00:35:21,390 --> 00:35:24,010 and giving it a particular CSS style. 747 00:35:24,010 --> 00:35:28,280 >> If I do something .top, that's finding everything with the class of top and 748 00:35:28,280 --> 00:35:30,190 changing its styles. 749 00:35:30,190 --> 00:35:35,950 If I do simply h1, that finds every single h1 and gives it the whatever 750 00:35:35,950 --> 00:35:37,940 style I want to give it. 751 00:35:37,940 --> 00:35:43,260 If I do h1 space and then .top. 752 00:35:43,260 --> 00:35:47,670 That will go find all the h1s and then all the ones with the class of top and 753 00:35:47,670 --> 00:35:51,690 then only change those styles to whatever I want to give it. 754 00:35:51,690 --> 00:35:54,600 >> And again, we could have written some of this on our own. 755 00:35:54,600 --> 00:35:55,790 But we wouldn't have gotten that far. 756 00:35:55,790 --> 00:35:59,180 Much better, it seems to actually go on a real live website and see how 757 00:35:59,180 --> 00:36:02,800 they do it and look at all of the fantastic things you get to do. 758 00:36:02,800 --> 00:36:06,570 >> Let's look at one more website before we move on. 759 00:36:06,570 --> 00:36:10,150 And this is one that you'll probably become familiar with. 760 00:36:10,150 --> 00:36:12,310 This is CS50 Finance. 761 00:36:12,310 --> 00:36:16,120 So again, you can actually go in and observe this CSS file on your 762 00:36:16,120 --> 00:36:19,390 computer, because you've downloaded this CSS file, if you downloaded the 763 00:36:19,390 --> 00:36:20,270 problem set. 764 00:36:20,270 --> 00:36:26,850 >> We can go to Tools and Developer Tools. 765 00:36:26,850 --> 00:36:30,280 And we see a much simpler HTML layout. 766 00:36:30,280 --> 00:36:32,020 We have top, middle, and bottom. 767 00:36:32,020 --> 00:36:34,490 And again, something you should be familiar with, because you've looked 768 00:36:34,490 --> 00:36:37,680 through the distribution code for this week's problem set. 769 00:36:37,680 --> 00:36:43,360 >> At the top is, per the code, a single image called. 770 00:36:43,360 --> 00:36:47,170 And that is source of the image. 771 00:36:47,170 --> 00:36:52,170 Say I have finished all of what I wanted to for Problem Set 7. 772 00:36:52,170 --> 00:36:55,500 And it's working correctly, but I want to change how it looks. 773 00:36:55,500 --> 00:36:58,900 And I want to change the background of the top of the page to, 774 00:36:58,900 --> 00:37:01,000 for example, blue. 775 00:37:01,000 --> 00:37:04,860 If it were me, I would come in here and figure out, OK what 776 00:37:04,860 --> 00:37:05,890 do I want to change. 777 00:37:05,890 --> 00:37:08,700 >> Let's see, div ID top, that looks like the top of the page. 778 00:37:08,700 --> 00:37:09,910 So let's go there. 779 00:37:09,910 --> 00:37:13,940 Let's try changing the background color. 780 00:37:13,940 --> 00:37:16,360 Let's go do Alice blue, because that's a nicer one. 781 00:37:16,360 --> 00:37:18,010 >> And you'll notice that-- 782 00:37:18,010 --> 00:37:19,190 you probably can't see that. 783 00:37:19,190 --> 00:37:23,430 But there is a light blue, alongside the CS50 logo. 784 00:37:23,430 --> 00:37:25,810 Let's change it instead to red. 785 00:37:25,810 --> 00:37:28,790 And you'll notice now I just changed the background color to red. 786 00:37:28,790 --> 00:37:37,050 >> So now I would go into my CSS file and type #top curly paren right here. 787 00:37:37,050 --> 00:37:42,170 You can see the code right here, curly brace. 788 00:37:42,170 --> 00:37:44,530 And then, I would add background color, red. 789 00:37:44,530 --> 00:37:47,500 And then, there would be a curly brace. 790 00:37:47,500 --> 00:37:52,230 So that is how I would explore and experiment with formatting on the CS50 791 00:37:52,230 --> 00:37:53,070 Finance site. 792 00:37:53,070 --> 00:37:55,060 >> I could do it here and test it out on my browser. 793 00:37:55,060 --> 00:37:58,130 And then, I could go into my actual code and make the changes that will 794 00:37:58,130 --> 00:38:01,940 actually go live and that people actually see, if they were to come to 795 00:38:01,940 --> 00:38:04,280 my specific site. 796 00:38:04,280 --> 00:38:05,390 >> OK. 797 00:38:05,390 --> 00:38:06,850 That was a lot. 798 00:38:06,850 --> 00:38:09,380 I apologize for going through it so quickly. 799 00:38:09,380 --> 00:38:12,560 Does anybody have any questions at all about HTML or CSS? 800 00:38:12,560 --> 00:38:15,830 801 00:38:15,830 --> 00:38:24,728 >> AUDIENCE: Can you just go over how you linked what became Jason, again? 802 00:38:24,728 --> 00:38:26,180 >> JASON HIRSCHHORN: What do you mean linked? 803 00:38:26,180 --> 00:38:29,765 >> AUDIENCE: You provided a link to another website, using the anchor. 804 00:38:29,765 --> 00:38:32,980 >> JASON HIRSCHHORN: So are you asking, just generically, how you make a link? 805 00:38:32,980 --> 00:38:33,560 >> AUDIENCE: Yeah. 806 00:38:33,560 --> 00:38:34,150 >> JASON HIRSCHHORN: OK. 807 00:38:34,150 --> 00:38:35,575 The code for making a link-- 808 00:38:35,575 --> 00:38:38,180 809 00:38:38,180 --> 00:38:40,590 >> AUDIENCE: No, like in the HTML. 810 00:38:40,590 --> 00:38:43,140 >> JASON HIRSCHHORN: Down here, you mean? 811 00:38:43,140 --> 00:38:46,960 So if I want to include a link somewhere, say, this is the HTML on my 812 00:38:46,960 --> 00:38:50,210 page right here. 813 00:38:50,210 --> 00:38:51,010 This is the HTML. 814 00:38:51,010 --> 00:38:53,720 Maybe it's open in a file, index.html. 815 00:38:53,720 --> 00:38:56,100 I go in. 816 00:38:56,100 --> 00:38:58,990 >> Let's have this copyright John Harvard link to something. 817 00:38:58,990 --> 00:39:02,230 So we'll edit all this as HTML. 818 00:39:02,230 --> 00:39:08,480 All you do is include the a, so bracket a close bracket at the 819 00:39:08,480 --> 00:39:12,700 beginning, and then bracket slash a close bracket at the end. 820 00:39:12,700 --> 00:39:13,930 >> So now I've included an anchor tag. 821 00:39:13,930 --> 00:39:15,475 And actually, if you click out of this, it will now 822 00:39:15,475 --> 00:39:22,110 format it edit as HTML. 823 00:39:22,110 --> 00:39:24,020 And say, we want to link it. 824 00:39:24,020 --> 00:39:25,760 We'd you the href attribute. 825 00:39:25,760 --> 00:39:27,010 And we say-- 826 00:39:27,010 --> 00:39:42,600 827 00:39:42,600 --> 00:39:47,600 >> And now, as you notice, copyright John Harvard is blue. 828 00:39:47,600 --> 00:39:50,870 And when I scroll over it, it's now a link. 829 00:39:50,870 --> 00:39:53,140 So you can write that code. 830 00:39:53,140 --> 00:39:57,030 You can surround pretty much anything you want in an anchor tag and turn it 831 00:39:57,030 --> 00:39:57,700 into a link. 832 00:39:57,700 --> 00:39:58,246 >> AUDIENCE: OK. 833 00:39:58,246 --> 00:39:58,520 Got it. 834 00:39:58,520 --> 00:40:01,300 >> JASON HIRSCHHORN: And if I didn't want it-- of course, sometimes people tend 835 00:40:01,300 --> 00:40:04,090 to think these things that just look blue generically and underlined are 836 00:40:04,090 --> 00:40:05,860 not the prettiest way to make a link. 837 00:40:05,860 --> 00:40:11,380 So if I come over here, you see that, somewhere in a CSS file, there is 838 00:40:11,380 --> 00:40:14,500 written this a and then two curly braces. 839 00:40:14,500 --> 00:40:20,700 So let's say that, for links, I don't want them to become blue, rather I 840 00:40:20,700 --> 00:40:23,645 want the color of a link to be this nice magenta. 841 00:40:23,645 --> 00:40:28,320 842 00:40:28,320 --> 00:40:30,640 >> Let's give it the color. 843 00:40:30,640 --> 00:40:34,060 844 00:40:34,060 --> 00:40:35,110 Let's pick magenta. 845 00:40:35,110 --> 00:40:38,440 Now, all the links on my page have become this nice color of magenta. 846 00:40:38,440 --> 00:40:40,170 Some people don't like colors at all. 847 00:40:40,170 --> 00:40:41,340 Some people don't like underlines. 848 00:40:41,340 --> 00:40:42,510 You get to pick. 849 00:40:42,510 --> 00:40:44,990 >> With links, you can style how they look once you've visited them. 850 00:40:44,990 --> 00:40:47,820 As you'll notice on a lot of pages, links turn purple on you visit them. 851 00:40:47,820 --> 00:40:49,190 You can change that color as well. 852 00:40:49,190 --> 00:40:49,450 Yeah. 853 00:40:49,450 --> 00:40:51,790 >> AUDIENCE: So you change it for every single link. 854 00:40:51,790 --> 00:40:56,310 But if you just wanted to do that link itself, would you just do in the ID 855 00:40:56,310 --> 00:40:58,720 bottom or something? 856 00:40:58,720 --> 00:41:01,070 >> JASON HIRSCHHORN: So great question. 857 00:41:01,070 --> 00:41:05,090 As you noticed here, I changed some part of the CSS that applies to 858 00:41:05,090 --> 00:41:11,530 everything that's an A. If I wanted to just do that link at the bottom, I 859 00:41:11,530 --> 00:41:14,500 would go to my CSS file and probably do just like you said, hash 860 00:41:14,500 --> 00:41:16,040 bottom space a. 861 00:41:16,040 --> 00:41:18,400 And that would give me all As in the bottom. 862 00:41:18,400 --> 00:41:30,720 >> Or I could, alternatively, give it a unique ID and then just do hash link. 863 00:41:30,720 --> 00:41:32,050 And that would allow me to change this out. 864 00:41:32,050 --> 00:41:36,170 However, just doling out IDs willy-nilly is generally a bad 865 00:41:36,170 --> 00:41:37,730 practice, because those should be unique. 866 00:41:37,730 --> 00:41:40,940 And the more you have those, it can get a little confusing. 867 00:41:40,940 --> 00:41:41,270 Yeah. 868 00:41:41,270 --> 00:41:43,725 >> AUDIENCE: Can you give the same ID to multiple owners? 869 00:41:43,725 --> 00:41:45,820 >> JASON HIRSCHHORN: Technically, yes. 870 00:41:45,820 --> 00:41:50,700 Nothing's going to stop you, but you shouldn't You should give it a class. 871 00:41:50,700 --> 00:41:55,330 872 00:41:55,330 --> 00:41:57,655 OK, any other questions about HTML or CSS? 873 00:41:57,655 --> 00:42:05,660 874 00:42:05,660 --> 00:42:06,310 >> OK. 875 00:42:06,310 --> 00:42:09,950 Let us move on to PHP. 876 00:42:09,950 --> 00:42:10,575 Oh, yes. 877 00:42:10,575 --> 00:42:13,800 >> AUDIENCE: What is it about these websites that means that we can edit 878 00:42:13,800 --> 00:42:15,440 them before we refresh. 879 00:42:15,440 --> 00:42:18,270 But once we refresh it reverts back to the initial HTML? 880 00:42:18,270 --> 00:42:19,900 >> JASON HIRSCHHORN: Great question-- 881 00:42:19,900 --> 00:42:24,810 so when we've loaded this web page, it's HTML. 882 00:42:24,810 --> 00:42:25,900 And it's JavaScript. 883 00:42:25,900 --> 00:42:29,060 Its PHP is executed to give us whatever type of website we see. 884 00:42:29,060 --> 00:42:33,130 And it's created some HTML, some JavaScript, and some CSS. 885 00:42:33,130 --> 00:42:35,990 And that is now accessible by our computer. 886 00:42:35,990 --> 00:42:40,700 >> And a copy of those files is saved locally on our computer, 887 00:42:40,700 --> 00:42:41,910 for the time being. 888 00:42:41,910 --> 00:42:44,030 So we can edit that local copy. 889 00:42:44,030 --> 00:42:46,530 But of course, we're not editing the server copy. 890 00:42:46,530 --> 00:42:49,420 >> And when we refresh the page, we get another server copy. 891 00:42:49,420 --> 00:42:51,250 And so we see things back as they were. 892 00:42:51,250 --> 00:42:55,200 If we were able, from here, to edit the official website, we'd have a lot 893 00:42:55,200 --> 00:42:55,800 of problems. 894 00:42:55,800 --> 00:42:58,670 >> AUDIENCE: Yeah, so we can read and write that copy. 895 00:42:58,670 --> 00:43:00,140 >> JASON HIRSCHHORN: Right. 896 00:43:00,140 --> 00:43:04,380 We're only making local changes here, but again, very helpful for exploring, 897 00:43:04,380 --> 00:43:05,690 oftentimes. 898 00:43:05,690 --> 00:43:08,900 When I'm Writing my final project, for example, I want to see how some 899 00:43:08,900 --> 00:43:11,270 website made something look the way they did. 900 00:43:11,270 --> 00:43:17,350 I will go in and use this pane down here, to look at what CSS they gave to 901 00:43:17,350 --> 00:43:20,890 it or what color they picked or how they got it so that, when you hovered 902 00:43:20,890 --> 00:43:24,180 over something, the list came down in a nice cascading fashion. 903 00:43:24,180 --> 00:43:27,220 It's a great way to inspect what other websites do and borrow from them. 904 00:43:27,220 --> 00:43:30,590 905 00:43:30,590 --> 00:43:33,690 >> Let's move on to PHP. 906 00:43:33,690 --> 00:43:38,560 PHP stands for, in a recursive sense, PHP Hypertext Processor. 907 00:43:38,560 --> 00:43:42,060 And PHP, what it's going to do is execute code server side. 908 00:43:42,060 --> 00:43:44,490 So we're never going to see PHP code. 909 00:43:44,490 --> 00:43:47,210 >> However, it does play nicely with HTML and often generates 910 00:43:47,210 --> 00:43:48,210 a lot of HTML code. 911 00:43:48,210 --> 00:43:52,570 But as you'll be familiar with Problem Set 7, your PHP code will execute, 912 00:43:52,570 --> 00:43:56,200 generate some HTML, and that's what the user will end up seeing. 913 00:43:56,200 --> 00:44:00,510 >> PHP is incredibly similar to C. However, there are a couple of 914 00:44:00,510 --> 00:44:04,400 differences, and those differences are important to note. 915 00:44:04,400 --> 00:44:09,420 One difference is that variables in PHP are loosely typed. 916 00:44:09,420 --> 00:44:11,275 Does anybody have a sense of what that means? 917 00:44:11,275 --> 00:44:14,245 >> AUDIENCE: No need to cast it yourself. 918 00:44:14,245 --> 00:44:16,400 Like no need to write in text. 919 00:44:16,400 --> 00:44:19,070 >> JASON HIRSCHHORN: I wouldn't use the word cast, but yes, no need to declare 920 00:44:19,070 --> 00:44:20,930 a type for a specific variable. 921 00:44:20,930 --> 00:44:22,300 How instead do we declare a variable? 922 00:44:22,300 --> 00:44:23,860 >> AUDIENCE: Use a dollar sign. 923 00:44:23,860 --> 00:44:25,270 >> JASON HIRSCHHORN: Use a dollar sign. 924 00:44:25,270 --> 00:44:27,540 So $x is a variable. 925 00:44:27,540 --> 00:44:29,580 $1 is a variable. 926 00:44:29,580 --> 00:44:31,910 $string is a variable. 927 00:44:31,910 --> 00:44:36,280 >> Those variables, $x could be an integer. 928 00:44:36,280 --> 00:44:38,010 Then, it could be a string. 929 00:44:38,010 --> 00:44:39,420 Then, it could be a character. 930 00:44:39,420 --> 00:44:40,790 It doesn't really matter. 931 00:44:40,790 --> 00:44:46,360 >> Also, the cool thing about PHP is, say, $x is the string one. 932 00:44:46,360 --> 00:44:48,920 And $y is the character one. 933 00:44:48,920 --> 00:44:54,370 You can add $x and $y, and it'll give you 2, what you'd expect. 934 00:44:54,370 --> 00:44:56,160 So there are operations in PHP. 935 00:44:56,160 --> 00:45:00,810 Because it's loosely typed variables, some implicit casting is done for you 936 00:45:00,810 --> 00:45:02,330 and some operations. 937 00:45:02,330 --> 00:45:04,240 >> You can do operations on things of different types. 938 00:45:04,240 --> 00:45:08,740 Whereas before, you often get an error in C saying, this is not the type 939 00:45:08,740 --> 00:45:09,610 that's supposed to go here. 940 00:45:09,610 --> 00:45:11,510 Only things of this type can go here. 941 00:45:11,510 --> 00:45:14,900 You're not going to get that type of error, generally, in PHP. 942 00:45:14,900 --> 00:45:17,420 So that's one big difference-- how we deal with variables. 943 00:45:17,420 --> 00:45:20,850 >> The second big difference is that PHP code is interpreted. 944 00:45:20,850 --> 00:45:23,110 Wheres, C code is compiled. 945 00:45:23,110 --> 00:45:23,910 What's that mean? 946 00:45:23,910 --> 00:45:26,700 >> Well, for C code you ran it through a compiler. 947 00:45:26,700 --> 00:45:29,010 You generated a binary file. 948 00:45:29,010 --> 00:45:30,770 And you ran that binary file. 949 00:45:30,770 --> 00:45:35,500 You took care of all errors before you generated the binary file. 950 00:45:35,500 --> 00:45:37,810 >> Of course, there might have been segmentation faults, when you ran the 951 00:45:37,810 --> 00:45:39,020 binary file. 952 00:45:39,020 --> 00:45:45,780 But it's not like you forgot to include the definition of printf, or 953 00:45:45,780 --> 00:45:48,735 you didn't use a variable and just created a wasteful variable. 954 00:45:48,735 --> 00:45:51,830 Or you didn't define a function prototype. 955 00:45:51,830 --> 00:45:53,590 >> All that happened before you compiled. 956 00:45:53,590 --> 00:45:56,830 It gave you all of the errors or bad things that it thought might happen. 957 00:45:56,830 --> 00:45:59,900 And then, you had your 0 and 1 file that you ran. 958 00:45:59,900 --> 00:46:01,690 PHP code does not work like that. 959 00:46:01,690 --> 00:46:03,750 >> You're going to write your PHP code. 960 00:46:03,750 --> 00:46:05,820 Then, you're going to save it, presumably. 961 00:46:05,820 --> 00:46:09,160 And at least in P-Set 7, you're going to refresh your web browser, and 962 00:46:09,160 --> 00:46:11,110 you're going to see what happened. 963 00:46:11,110 --> 00:46:14,110 You're going see the output of that PHP code. 964 00:46:14,110 --> 00:46:17,450 >> You might also see, at the top of your page, an error. 965 00:46:17,450 --> 00:46:19,960 Because you had some error in your PHP. 966 00:46:19,960 --> 00:46:22,390 You might still see the rest of the web page is looking fine. 967 00:46:22,390 --> 00:46:25,130 But one part is wrong, and there's an error in that place. 968 00:46:25,130 --> 00:46:28,320 And that's because that part of your PHP code doesn't work. 969 00:46:28,320 --> 00:46:31,680 >> Indeed, when you execute, when you go to something like by.php. 970 00:46:31,680 --> 00:46:34,950 It's going to go through your PHP file line by line and execute it 971 00:46:34,950 --> 00:46:36,210 then and only then. 972 00:46:36,210 --> 00:46:39,890 It's not going to compile it ahead of time or compile one copy and then give 973 00:46:39,890 --> 00:46:41,570 that compiled copy to everybody. 974 00:46:41,570 --> 00:46:43,830 Each time, it's going to go through line by line and execute it. 975 00:46:43,830 --> 00:46:46,620 >> So some lines might work and output something correct. 976 00:46:46,620 --> 00:46:49,500 And other lines might be broken and output an error instead. 977 00:46:49,500 --> 00:46:52,650 So when debugging with PHP, we've given you a couple of helpful things 978 00:46:52,650 --> 00:46:54,580 to help you debug, like the dump function. 979 00:46:54,580 --> 00:46:56,900 >> But generally, you're going to see these errors. 980 00:46:56,900 --> 00:46:58,340 And that's how you're going to know you did something wrong. 981 00:46:58,340 --> 00:47:00,740 But you're only going to see the error once you actually run the code. 982 00:47:00,740 --> 00:47:03,420 983 00:47:03,420 --> 00:47:08,880 >> Another important aspect of PHP and web development is the idea of get 984 00:47:08,880 --> 00:47:09,920 versus post. 985 00:47:09,920 --> 00:47:13,250 Can anybody explain what the difference between get and post are? 986 00:47:13,250 --> 00:47:17,530 987 00:47:17,530 --> 00:47:18,780 Nobody-- 988 00:47:18,780 --> 00:47:21,710 989 00:47:21,710 --> 00:47:21,970 yes. 990 00:47:21,970 --> 00:47:24,495 >> AUDIENCE: Doesn't one of them let the user see the data, 991 00:47:24,495 --> 00:47:26,080 and one of them doesn't? 992 00:47:26,080 --> 00:47:27,310 >> JASON HIRSCHHORN: Great. 993 00:47:27,310 --> 00:47:28,400 Yeah, do you have something to add? 994 00:47:28,400 --> 00:47:32,622 >> AUDIENCE: I thin post is a super-global variable. 995 00:47:32,622 --> 00:47:34,740 >> JASON HIRSCHHORN: So both of these variables are given to you. 996 00:47:34,740 --> 00:47:35,630 These are just variables. 997 00:47:35,630 --> 00:47:37,740 And you know they're variables, because right here I 998 00:47:37,740 --> 00:47:38,780 use the dollar sign. 999 00:47:38,780 --> 00:47:41,950 >> These are variables given to you by PHP. 1000 00:47:41,950 --> 00:47:45,990 And when you move between web pages, you want to save some information. 1001 00:47:45,990 --> 00:47:47,960 You probably want to save if the user is logged in. 1002 00:47:47,960 --> 00:47:49,270 That's not saved in GET and POST. 1003 00:47:49,270 --> 00:47:51,390 That's saved in something else, a different variable. 1004 00:47:51,390 --> 00:47:55,170 >> Anybody know what variable that's saved in, or what variable you use in 1005 00:47:55,170 --> 00:47:57,728 P-Set 7, to make sure that the user is logged in? 1006 00:47:57,728 --> 00:48:00,360 1007 00:48:00,360 --> 00:48:03,690 $_session, that's exactly right, probably important to be familiar with 1008 00:48:03,690 --> 00:48:06,060 the names of these things you use often. 1009 00:48:06,060 --> 00:48:10,070 >> So you use the session variable to save information from page to page. 1010 00:48:10,070 --> 00:48:11,075 That's a super variable. 1011 00:48:11,075 --> 00:48:15,250 It exists on every page, maybe like a global variable, if you want to think 1012 00:48:15,250 --> 00:48:16,900 about it like that. 1013 00:48:16,900 --> 00:48:19,260 >> There are a couple of other variables that allow you to transfer information 1014 00:48:19,260 --> 00:48:20,710 from page to page. 1015 00:48:20,710 --> 00:48:24,260 In particular, the ones we'll focus on are the GET and the POST variables. 1016 00:48:24,260 --> 00:48:29,330 In PHP they look like $_GET and $_POST. 1017 00:48:29,330 --> 00:48:33,610 And the difference, as Marcus pointed out, between the two of them is that, 1018 00:48:33,610 --> 00:48:37,670 information in $_GET is displayed in the URL. 1019 00:48:37,670 --> 00:48:41,380 >> So if we look down here, we see a YouTube link. 1020 00:48:41,380 --> 00:48:43,760 We see this question mark. 1021 00:48:43,760 --> 00:48:47,730 We see v= and then some value. 1022 00:48:47,730 --> 00:48:53,460 Back to this idea of key value pair, the v is the key. 1023 00:48:53,460 --> 00:48:56,970 And over here is the value. 1024 00:48:56,970 --> 00:49:01,030 >> So if we were to go to this page or coding on this page, we would have a 1025 00:49:01,030 --> 00:49:04,000 variable called $_GET. 1026 00:49:04,000 --> 00:49:11,030 If we went to $_GET open bracket "v" close bracket, very similar to array 1027 00:49:11,030 --> 00:49:15,000 notation, this is an associate array because we're not using indices. 1028 00:49:15,000 --> 00:49:16,710 Were using strings as keys. 1029 00:49:16,710 --> 00:49:17,940 But very similar idea. 1030 00:49:17,940 --> 00:49:20,520 If we went we, would get this value. 1031 00:49:20,520 --> 00:49:23,276 >> On this page, we'd be able to use this value. 1032 00:49:23,276 --> 00:49:32,200 If we actually look, let's go to a YouTube page. 1033 00:49:32,200 --> 00:49:35,140 What video should we watch? 1034 00:49:35,140 --> 00:49:37,350 This one, are people Hobbit fans? 1035 00:49:37,350 --> 00:49:40,731 >> AUDIENCE: Yes. 1036 00:49:40,731 --> 00:49:44,750 >> JASON HIRSCHHORN: So I'm copying their share URL and 1037 00:49:44,750 --> 00:49:46,000 pasting it in a new window. 1038 00:49:46,000 --> 00:49:48,550 1039 00:49:48,550 --> 00:50:00,470 And now, if you look up here, you'll notice that, once again-- 1040 00:50:00,470 --> 00:50:03,170 I'm going to copy and paste this into gedit, so we can see it bigger. 1041 00:50:03,170 --> 00:50:16,530 1042 00:50:16,530 --> 00:50:19,720 You'll notice that it has this question mark. 1043 00:50:19,720 --> 00:50:22,150 The question mark designates that everything after this is going to be 1044 00:50:22,150 --> 00:50:23,530 saved in the get variable. 1045 00:50:23,530 --> 00:50:29,130 >> It then has the v, that's the first key and this first value. 1046 00:50:29,130 --> 00:50:30,710 Ampersand is special. 1047 00:50:30,710 --> 00:50:34,340 Ampersand is saying, OK, we finished the first value. 1048 00:50:34,340 --> 00:50:37,170 We are now moving on to another key value pair. 1049 00:50:37,170 --> 00:50:41,135 Here, the key is called feature, and the value is youtu.be. 1050 00:50:41,135 --> 00:50:44,010 1051 00:50:44,010 --> 00:50:50,710 >> So if I was a coding this page and somebody went to this URL and I had 1052 00:50:50,710 --> 00:50:53,190 maybe watch.php. 1053 00:50:53,190 --> 00:50:54,150 And I was coding this. 1054 00:50:54,150 --> 00:50:57,060 And I could use the $_GET variable. 1055 00:50:57,060 --> 00:51:02,740 And I would have a v, and I would have a feature. 1056 00:51:02,740 --> 00:51:07,080 >> And if I use the v key, I would get this value. 1057 00:51:07,080 --> 00:51:14,145 And if I did $_GET bracket "feature" close bracket, I would get this value. 1058 00:51:14,145 --> 00:51:17,530 Again, it doesn't necessarily apply to-- 1059 00:51:17,530 --> 00:51:21,460 obviously, the YouTube keys and values and get information does not apply to 1060 00:51:21,460 --> 00:51:22,700 our Problem Set 7. 1061 00:51:22,700 --> 00:51:28,450 But there are certain things that we pass via GET in our Problem Set 7. 1062 00:51:28,450 --> 00:51:33,120 And certainly, when you go to a web page or are coding your own page, the 1063 00:51:33,120 --> 00:51:36,440 $_GET will come in handy when your coding. 1064 00:51:36,440 --> 00:51:41,030 >> What is one reason to use $_GET then, if it affords no privacy? 1065 00:51:41,030 --> 00:51:43,170 You see all this information that's being transferred. 1066 00:51:43,170 --> 00:51:44,170 It's all displayed to the user. 1067 00:51:44,170 --> 00:51:49,060 But what's one reason that you might want to save something in $_GET, as 1068 00:51:49,060 --> 00:51:50,310 opposed to $_POST? 1069 00:51:50,310 --> 00:51:52,650 1070 00:51:52,650 --> 00:51:53,900 Why might you want to do that? 1071 00:51:53,900 --> 00:51:58,065 1072 00:51:58,065 --> 00:51:58,540 >> All right. 1073 00:51:58,540 --> 00:52:00,310 I asked you in Quiz 1. 1074 00:52:00,310 --> 00:52:02,210 What is the pro of $_GET? 1075 00:52:02,210 --> 00:52:04,250 What's one pro? 1076 00:52:04,250 --> 00:52:04,700 Yeah-- 1077 00:52:04,700 --> 00:52:06,180 >> AUDIENCE: It's easier to share information. 1078 00:52:06,180 --> 00:52:07,040 >> JASON HIRSCHHORN: I think that's great. 1079 00:52:07,040 --> 00:52:07,870 It's easier to share information. 1080 00:52:07,870 --> 00:52:09,360 It's easier to bookmark. 1081 00:52:09,360 --> 00:52:15,260 >> You can bookmark now, YouTube.com/watch?v= something and go 1082 00:52:15,260 --> 00:52:16,900 to that specific video. 1083 00:52:16,900 --> 00:52:22,020 If YouTube always did POST requests to different pages, every YouTube URL 1084 00:52:22,020 --> 00:52:22,985 would be YouTube.com. 1085 00:52:22,985 --> 00:52:25,750 You couldn't bookmark a single video. 1086 00:52:25,750 --> 00:52:28,160 Because if you say shared that link with somebody else, they don't 1087 00:52:28,160 --> 00:52:30,160 automatically get your post variable. 1088 00:52:30,160 --> 00:52:33,570 They're just getting this link, and the link is the same for everybody. 1089 00:52:33,570 --> 00:52:35,180 >> So that is one pro. 1090 00:52:35,180 --> 00:52:38,850 It allows you to bookmark this information or share this information 1091 00:52:38,850 --> 00:52:40,840 or make it a little bit more user-friendly. 1092 00:52:40,840 --> 00:52:43,890 Of course, there is no privacy, so we have this post variable. 1093 00:52:43,890 --> 00:52:47,570 And post information is not displayed in the URL. 1094 00:52:47,570 --> 00:52:49,200 >> It's not completely private. 1095 00:52:49,200 --> 00:52:51,710 But it is marginally more private. 1096 00:52:51,710 --> 00:52:55,030 And so you'll see this URL down here, cs50.net. 1097 00:52:55,030 --> 00:52:59,200 Whether or not you're logged into the website, it's going to have the same 1098 00:52:59,200 --> 00:53:02,600 URL, cs50.net. 1099 00:53:02,600 --> 00:53:05,940 >> Obviously, something is different, if you're logged into the website. 1100 00:53:05,940 --> 00:53:08,690 You have, one, probably input your PIN. 1101 00:53:08,690 --> 00:53:10,600 And it has confirmed that with the server. 1102 00:53:10,600 --> 00:53:12,650 And it's probably saving some other information. 1103 00:53:12,650 --> 00:53:14,810 But the URL does not change at all. 1104 00:53:14,810 --> 00:53:17,080 >> And so that's the case, when something is sent by POST. 1105 00:53:17,080 --> 00:53:18,800 The URL doesn't change. 1106 00:53:18,800 --> 00:53:21,100 This POST information is not displayed in the URL. 1107 00:53:21,100 --> 00:53:26,150 But some state has changed, and maybe there is some information saved in the 1108 00:53:26,150 --> 00:53:27,400 POST variable. 1109 00:53:27,400 --> 00:53:30,460 1110 00:53:30,460 --> 00:53:36,880 >> Sorry. before I go into SQL, any questions about PHP, in particular, 1111 00:53:36,880 --> 00:53:41,850 questions on things we didn't go over that you've found or any syntax or 1112 00:53:41,850 --> 00:53:43,855 logic questions about PHP? 1113 00:53:43,855 --> 00:53:49,300 1114 00:53:49,300 --> 00:53:50,050 OK. 1115 00:53:50,050 --> 00:53:54,400 >> The final language you will be interacting with this week is the 1116 00:53:54,400 --> 00:53:58,920 Structured Query Language, SQL, pronounced sequel often. 1117 00:53:58,920 --> 00:54:01,740 That allows you to interact with the database in a formalized way. 1118 00:54:01,740 --> 00:54:04,390 And it plays very nicely with PHP. 1119 00:54:04,390 --> 00:54:09,950 >> As you'll see in Problem Set 7, we've given you a function called query. 1120 00:54:09,950 --> 00:54:14,990 And it takes a SQL string and executes that query on the database. 1121 00:54:14,990 --> 00:54:17,470 In years past, you were not given this function. 1122 00:54:17,470 --> 00:54:22,250 You had to use PHP functions to make the query on the database and check 1123 00:54:22,250 --> 00:54:24,230 for errors and then get the results. 1124 00:54:24,230 --> 00:54:26,120 >> And actually, it's not that hard, because again, it plays 1125 00:54:26,120 --> 00:54:27,080 very nicely with PHP. 1126 00:54:27,080 --> 00:54:31,240 And PHP gives you a lot of functions to interact with a SQL database. 1127 00:54:31,240 --> 00:54:34,810 So often, the two of these go together. 1128 00:54:34,810 --> 00:54:37,090 Of course, you could interact with the SQL database with any 1129 00:54:37,090 --> 00:54:38,400 number of other languages. 1130 00:54:38,400 --> 00:54:41,420 But PHP is a great one to choose. 1131 00:54:41,420 --> 00:54:42,290 >> A database-- 1132 00:54:42,290 --> 00:54:46,030 we'll go over this quickly, because this is a buzz word we're going to 1133 00:54:46,030 --> 00:54:48,030 start using often-- 1134 00:54:48,030 --> 00:54:50,140 is a collection of tables. 1135 00:54:50,140 --> 00:54:53,960 So we can think of it as an Excel file. 1136 00:54:53,960 --> 00:54:57,260 An Excel file has multiple tabs on the bottom of the screen. 1137 00:54:57,260 --> 00:55:03,090 Each tab we'll now call a table, where a table is a collection of rows. 1138 00:55:03,090 --> 00:55:04,060 >> And what is a row? 1139 00:55:04,060 --> 00:55:06,890 Well, a row is that same thing in the Excel file. 1140 00:55:06,890 --> 00:55:10,380 That just has certain values for each given field or each given column. 1141 00:55:10,380 --> 00:55:12,010 It's like an entry in the table. 1142 00:55:12,010 --> 00:55:16,570 It's a student, who has an ID, a specific ID, and a specific name and a 1143 00:55:16,570 --> 00:55:17,910 specific house. 1144 00:55:17,910 --> 00:55:19,790 >> So a database is a collection of tables. 1145 00:55:19,790 --> 00:55:22,685 And tables themselves are a number of rows or records. 1146 00:55:22,685 --> 00:55:25,470 1147 00:55:25,470 --> 00:55:28,280 There are also, in each table, certain fields. 1148 00:55:28,280 --> 00:55:32,130 And that specifies what each record is going to have, fields sometimes called 1149 00:55:32,130 --> 00:55:33,890 columns but generally called fields. 1150 00:55:33,890 --> 00:55:38,270 >> In this very simple table, I have three fields, an ID field, a username 1151 00:55:38,270 --> 00:55:39,780 field, and a hash field. 1152 00:55:39,780 --> 00:55:41,300 And I have three rows. 1153 00:55:41,300 --> 00:55:42,100 Right now, they're empty. 1154 00:55:42,100 --> 00:55:44,850 They probably wouldn't be empty if this was my real database. 1155 00:55:44,850 --> 00:55:50,530 >> So if you've used Excel, similar idea to what you do in Excel, though, 1156 00:55:50,530 --> 00:55:54,300 obviously, now we're going to be able to do much more powerful things on the 1157 00:55:54,300 --> 00:55:56,430 information that is stored in our database. 1158 00:55:56,430 --> 00:56:00,270 You will be creating yourself one database for Problem Set 7. 1159 00:56:00,270 --> 00:56:02,820 But you'll be creating multiple tables within the database. 1160 00:56:02,820 --> 00:56:06,950 >> You'll be creating a database or a table for users. 1161 00:56:06,950 --> 00:56:12,830 You'll be also creating a table for probably stock transactions, to keep 1162 00:56:12,830 --> 00:56:15,580 track of them, because you need to implement a history feature. 1163 00:56:15,580 --> 00:56:18,370 Both those tables will have different fields. 1164 00:56:18,370 --> 00:56:22,190 For example, in a user field, you probably want their user name and an 1165 00:56:22,190 --> 00:56:24,220 ID and a hash of their password. 1166 00:56:24,220 --> 00:56:28,450 >> In the Stocks table that keeps track of history or the History table, you 1167 00:56:28,450 --> 00:56:31,620 probably don't need the user name and the hash and the ID. 1168 00:56:31,620 --> 00:56:34,460 You probably only need one of those values that are unique, to associate 1169 00:56:34,460 --> 00:56:35,830 it with a given user. 1170 00:56:35,830 --> 00:56:38,100 >> But then, you want to store other things like, what time 1171 00:56:38,100 --> 00:56:40,630 was transaction made. 1172 00:56:40,630 --> 00:56:42,380 What stock was bought or sold? 1173 00:56:42,380 --> 00:56:44,150 How many shares of the stock was bought or sold? 1174 00:56:44,150 --> 00:56:48,360 What was the price at which the stock was bought or sold? 1175 00:56:48,360 --> 00:56:50,180 >> So again, you're going to be interacting with a databases that's 1176 00:56:50,180 --> 00:56:51,350 going to have multiple tables. 1177 00:56:51,350 --> 00:56:54,340 Each table is going to have its own set of fields. 1178 00:56:54,340 --> 00:56:58,430 However, there will likely be a similar field in each table, that 1179 00:56:58,430 --> 00:57:00,130 relates them to one another. 1180 00:57:00,130 --> 00:57:02,660 Usually, this is an ID field. 1181 00:57:02,660 --> 00:57:07,000 >> Because if every user has a unique ID and you associate that ID with every 1182 00:57:07,000 --> 00:57:09,365 transaction that user makes or all of that user's history. 1183 00:57:09,365 --> 00:57:12,760 1184 00:57:12,760 --> 00:57:13,830 And you have the user's ID. 1185 00:57:13,830 --> 00:57:15,365 You can get information from either table. 1186 00:57:15,365 --> 00:57:19,770 You can get their username, and you can get all of their transactions. 1187 00:57:19,770 --> 00:57:24,410 >> Any questions about databases, or specific questions? 1188 00:57:24,410 --> 00:57:25,240 Actually, let's hold that. 1189 00:57:25,240 --> 00:57:27,410 We'll be there in two sides. 1190 00:57:27,410 --> 00:57:31,210 >> So there are four operations on databases that you will be using in 1191 00:57:31,210 --> 00:57:34,790 Problem Set 7 and likely ever be using. 1192 00:57:34,790 --> 00:57:38,040 The first thing you want to do is insert a new record into a table or a 1193 00:57:38,040 --> 00:57:39,960 new row into a table. 1194 00:57:39,960 --> 00:57:46,070 This is the generic function, the generic form, of that SQL query. 1195 00:57:46,070 --> 00:57:52,240 >> INSERT INTO the table, whatever columns you want to insert and then 1196 00:57:52,240 --> 00:57:58,740 the values that you're going to want to put into those columns or fields. 1197 00:57:58,740 --> 00:58:03,980 If you have multiple tables in a database or multiple databases, you 1198 00:58:03,980 --> 00:58:06,630 might also need to specify the database and the table that you want 1199 00:58:06,630 --> 00:58:07,980 to put things into. 1200 00:58:07,980 --> 00:58:11,390 But very simple, if you want to insert into something, you say, here are the 1201 00:58:11,390 --> 00:58:12,890 fields I want to insert into. 1202 00:58:12,890 --> 00:58:14,740 And here are the values. 1203 00:58:14,740 --> 00:58:18,840 >> In some tables, also, and this user's table is a good example. 1204 00:58:18,840 --> 00:58:21,940 Probably in this user's table and probably in your user's table in P-Set 1205 00:58:21,940 --> 00:58:24,200 7, there's not just a username value. 1206 00:58:24,200 --> 00:58:27,100 There's not just a cash value, or field, rather. 1207 00:58:27,100 --> 00:58:29,140 There is also an ID field. 1208 00:58:29,140 --> 00:58:31,110 >> I'm not going to insert that ID field. 1209 00:58:31,110 --> 00:58:34,020 That's going to be given to me automatically, when a 1210 00:58:34,020 --> 00:58:35,810 new record is inserted. 1211 00:58:35,810 --> 00:58:37,820 So there's some field that you can set to be automatic. 1212 00:58:37,820 --> 00:58:41,740 >> Maybe you want to give every user $10,000 of cash off the bat. 1213 00:58:41,740 --> 00:58:43,470 So I don't need to insert a number of cash here. 1214 00:58:43,470 --> 00:58:45,860 All I need to insert is the user name. 1215 00:58:45,860 --> 00:58:49,230 And then, the cash field will be pre-populated, and the ID field will 1216 00:58:49,230 --> 00:58:50,590 be pre-populated. 1217 00:58:50,590 --> 00:58:53,640 >> So oftentimes, we're not inserting something into every field, because 1218 00:58:53,640 --> 00:58:55,400 those other fields are pre-populated. 1219 00:58:55,400 --> 00:58:58,320 Because that's how we set up that table. 1220 00:58:58,320 --> 00:59:01,280 >> The second thing you're going to want to do is delete a record. 1221 00:59:01,280 --> 00:59:02,900 Deleting something is very simple. 1222 00:59:02,900 --> 00:59:05,660 You give the table where you want to delete something from. 1223 00:59:05,660 --> 00:59:11,202 And you say, OK, I want to delete the record that has a username of Milo. 1224 00:59:11,202 --> 00:59:16,180 Or I want to delete all records that have a username of Milo or that were a 1225 00:59:16,180 --> 00:59:18,700 transaction from user ID number 2. 1226 00:59:18,700 --> 00:59:21,950 1227 00:59:21,950 --> 00:59:24,809 Any questions on these two types of queries? 1228 00:59:24,809 --> 00:59:26,059 >> AUDIENCE: [INAUDIBLE]. 1229 00:59:26,059 --> 00:59:28,721 1230 00:59:28,721 --> 00:59:30,770 >> JASON HIRSCHHORN: Yes. 1231 00:59:30,770 --> 00:59:33,530 So I'm going to use row and record interchangeably and some 1232 00:59:33,530 --> 00:59:35,400 with column and field. 1233 00:59:35,400 --> 00:59:37,650 But one row is one record. 1234 00:59:37,650 --> 00:59:40,080 One column is one field, going back to this table. 1235 00:59:40,080 --> 00:59:44,210 1236 00:59:44,210 --> 00:59:45,420 >> OK. 1237 00:59:45,420 --> 00:59:47,310 The next thing you're probably going to do is get some 1238 00:59:47,310 --> 00:59:48,400 information from the table. 1239 00:59:48,400 --> 00:59:50,090 That is a Select query. 1240 00:59:50,090 --> 00:59:52,330 And again, what table am I selecting from? 1241 00:59:52,330 --> 00:59:58,370 And what column do I want to select, or what value do I want to select and 1242 00:59:58,370 --> 00:59:59,530 from which row? 1243 00:59:59,530 --> 01:00:01,120 >> So the Select is a little specific. 1244 01:00:01,120 --> 01:00:03,620 I say, OK, I want this table. 1245 01:00:03,620 --> 01:00:09,350 And then I want the column username, and I want it from the row with ID 2. 1246 01:00:09,350 --> 01:00:11,030 That's one way to do a Select. 1247 01:00:11,030 --> 01:00:14,180 >> Or I can say, give me every single username. 1248 01:00:14,180 --> 01:00:18,200 Or I can say, give me an entire row from this table, where 1249 01:00:18,200 --> 01:00:19,460 the username is 1. 1250 01:00:19,460 --> 01:00:22,300 So there are a couple different ways to do Select queries, depending on how 1251 01:00:22,300 --> 01:00:24,130 much information you want, 1252 01:00:24,130 --> 01:00:29,410 >> You can always just select everything from that specific table and then loop 1253 01:00:29,410 --> 01:00:31,320 through it, picking out the things you want. 1254 01:00:31,320 --> 01:00:33,940 But keep in mind, if you're selecting a lot of things from a table and you 1255 01:00:33,940 --> 01:00:37,400 have a really big table, that will take some time, so best to only select 1256 01:00:37,400 --> 01:00:40,000 things that you're going to end up using. 1257 01:00:40,000 --> 01:00:43,580 >> Also, with Select and with all of these other SQL commands as well, I'm 1258 01:00:43,580 --> 01:00:45,760 giving you the bare-bones version. 1259 01:00:45,760 --> 01:00:51,600 But say, I'm selecting users and I want to print them out alphabetically, 1260 01:00:51,600 --> 01:00:56,710 I could select all users and then sort them alphabetically in my code. 1261 01:00:56,710 --> 01:01:01,990 >> Or there is a way to write the select query, that selects things in an 1262 01:01:01,990 --> 01:01:06,580 alphabetical fashion, based off of a specific column, either ascending or 1263 01:01:06,580 --> 01:01:07,490 descending. 1264 01:01:07,490 --> 01:01:11,660 So keep in mind that, a lot of what you want to do can probably be done in 1265 01:01:11,660 --> 01:01:15,070 the query through an additional attribute. 1266 01:01:15,070 --> 01:01:19,120 So do look up these queries online or the other things you can do with these 1267 01:01:19,120 --> 01:01:21,410 queries to expand them. 1268 01:01:21,410 --> 01:01:25,020 >> Finally, the last thing you want to do is not insert something or delete 1269 01:01:25,020 --> 01:01:26,700 something, but rather update something. 1270 01:01:26,700 --> 01:01:30,380 And that is done with the update query, and again, what table. 1271 01:01:30,380 --> 01:01:32,530 And what change do I want to make? 1272 01:01:32,530 --> 01:01:35,915 And to which row or record do I want to make that change? 1273 01:01:35,915 --> 01:01:38,720 1274 01:01:38,720 --> 01:01:40,300 Any questions on SQL? 1275 01:01:40,300 --> 01:01:47,070 1276 01:01:47,070 --> 01:01:47,310 >> OK. 1277 01:01:47,310 --> 01:01:49,080 So we have about 15 minutes. 1278 01:01:49,080 --> 01:01:51,460 And this is the last slide I have. 1279 01:01:51,460 --> 01:01:55,380 And hopefully, this last slide is a good segue into the problem set, 1280 01:01:55,380 --> 01:01:58,820 because understanding where we want to insert records, delete them, select 1281 01:01:58,820 --> 01:02:03,420 them, and update them will help us understand the larger logic and flow 1282 01:02:03,420 --> 01:02:05,570 of Problem Set 7. 1283 01:02:05,570 --> 01:02:08,330 >> So I know all the answers to these questions. 1284 01:02:08,330 --> 01:02:10,570 I'm not going to tell you all of the answers. 1285 01:02:10,570 --> 01:02:15,530 But if somebody else would like to present a question to the group or an 1286 01:02:15,530 --> 01:02:18,700 answer to one of these question, we can use that as a jumping off point to 1287 01:02:18,700 --> 01:02:20,311 talk about the problem set. 1288 01:02:20,311 --> 01:02:24,159 1289 01:02:24,159 --> 01:02:27,260 Or if somebody has a more generic question off the problem set, feel 1290 01:02:27,260 --> 01:02:28,210 free to ask that as well. 1291 01:02:28,210 --> 01:02:29,460 And we can start there. 1292 01:02:29,460 --> 01:02:32,840 1293 01:02:32,840 --> 01:02:35,973 Keep in mind that you being silent is hurting everybody. 1294 01:02:35,973 --> 01:02:36,376 Yeah. 1295 01:02:36,376 --> 01:02:39,540 >> AUDIENCE: So is the only way to pass variables to and from different web 1296 01:02:39,540 --> 01:02:44,532 pages, or the most convenient way, using POST or GET? 1297 01:02:44,532 --> 01:02:52,380 >> JASON HIRSCHHORN: So yes, that is the most convenient way to say-- when 1298 01:02:52,380 --> 01:02:53,970 somebody fills out a form-- 1299 01:02:53,970 --> 01:02:57,540 get information on another web page, using GET or POST. 1300 01:02:57,540 --> 01:03:00,400 1301 01:03:00,400 --> 01:03:04,320 Because of the framework we're using in this problem set, you'll notice 1302 01:03:04,320 --> 01:03:08,630 that, a lot of times, we render another page. 1303 01:03:08,630 --> 01:03:12,420 we Or we render another file, not necessarily another page. 1304 01:03:12,420 --> 01:03:14,050 >> So we pass in a variable. 1305 01:03:14,050 --> 01:03:16,400 And then, it renders an HTML page, using the 1306 01:03:16,400 --> 01:03:18,220 information from that variable. 1307 01:03:18,220 --> 01:03:20,790 That is not technically passing information between 1308 01:03:20,790 --> 01:03:21,910 different web pages. 1309 01:03:21,910 --> 01:03:24,600 That is passing information between different files. 1310 01:03:24,600 --> 01:03:26,710 >> And so we can use any variable to do that. 1311 01:03:26,710 --> 01:03:33,230 But yes, if we wanted to pass information from a particular page to 1312 01:03:33,230 --> 01:03:36,850 another page, GET and POST would be the way to do that. 1313 01:03:36,850 --> 01:03:43,060 1314 01:03:43,060 --> 01:03:45,765 Any other questions about the problem set? 1315 01:03:45,765 --> 01:03:49,490 1316 01:03:49,490 --> 01:03:50,150 >> OK. 1317 01:03:50,150 --> 01:03:53,660 Let's go through, then, a specific part of the problem set. 1318 01:03:53,660 --> 01:04:00,260 You are going to need to, at one point, display somebody's portfolio on 1319 01:04:00,260 --> 01:04:01,710 the screen. 1320 01:04:01,710 --> 01:04:06,454 What do I mean when I say portfolio, in the context of this problem set? 1321 01:04:06,454 --> 01:04:11,350 >> AUDIENCE: It's like the stocks that they have how, many shares they own, 1322 01:04:11,350 --> 01:04:13,760 the price, and how much money they have left. 1323 01:04:13,760 --> 01:04:15,235 >> JASON HIRSCHHORN: That sounds great. 1324 01:04:15,235 --> 01:04:19,640 So I want to display all the stocks they own for each stock company's 1325 01:04:19,640 --> 01:04:23,770 shares and probably how much that's worth, and then a separate variable, 1326 01:04:23,770 --> 01:04:25,960 how much money they own. 1327 01:04:25,960 --> 01:04:27,150 So say I want to describe that. 1328 01:04:27,150 --> 01:04:29,660 Let's start talking about how I could go about doing that, what tables I'm 1329 01:04:29,660 --> 01:04:31,210 going to need to have to be able to do that. 1330 01:04:31,210 --> 01:04:34,070 1331 01:04:34,070 --> 01:04:34,460 Yeah-- 1332 01:04:34,460 --> 01:04:37,970 >> AUDIENCE: Well users, and then, I guess you can make a table called 1333 01:04:37,970 --> 01:04:41,920 Shares or something like that, which would be how many they've bought. 1334 01:04:41,920 --> 01:04:42,660 >> JASON HIRSCHHORN: OK. 1335 01:04:42,660 --> 01:04:46,530 So I'm going to need a table called Users, which keeps track of the 1336 01:04:46,530 --> 01:04:50,640 username, presumably, probably some ID, probably an individual's password. 1337 01:04:50,640 --> 01:04:52,850 What is something else that you just said that's associated? 1338 01:04:52,850 --> 01:04:55,510 Somebody besides Michael, what is something else that's associated with 1339 01:04:55,510 --> 01:04:58,270 each user, unique to them? 1340 01:04:58,270 --> 01:05:00,050 >> AUDIENCE: ID. 1341 01:05:00,050 --> 01:05:01,170 >> JASON HIRSCHHORN: ID-- 1342 01:05:01,170 --> 01:05:03,540 what's one other thing that we're probably going to want to 1343 01:05:03,540 --> 01:05:05,685 display on this page? 1344 01:05:05,685 --> 01:05:06,990 >> AUDIENCE: Their name. 1345 01:05:06,990 --> 01:05:10,550 >> JASON HIRSCHHORN: Their name-- what's another thing related to this 1346 01:05:10,550 --> 01:05:11,420 particular problem set? 1347 01:05:11,420 --> 01:05:14,110 >> AUDIENCE: What stocks they own-- 1348 01:05:14,110 --> 01:05:16,650 >> JASON HIRSCHHORN: There are going to be a lot of what stocks they own. 1349 01:05:16,650 --> 01:05:19,670 What's one the specific value though, that they are going to have 1350 01:05:19,670 --> 01:05:22,640 associated with them? 1351 01:05:22,640 --> 01:05:25,709 How are they going to buy and sell their stocks? 1352 01:05:25,709 --> 01:05:26,595 >> AUDIENCE: Cash. 1353 01:05:26,595 --> 01:05:28,100 >> JASON HIRSCHHORN: They're going to have cash. 1354 01:05:28,100 --> 01:05:31,020 So each user is going to have one value for cash. 1355 01:05:31,020 --> 01:05:32,360 And that's going to be unique to each user. 1356 01:05:32,360 --> 01:05:35,040 So in the user's table, it makes sense to put in cash. 1357 01:05:35,040 --> 01:05:39,100 >> You could, of course, create another table that has user IDs and their 1358 01:05:39,100 --> 01:05:40,200 value of cash. 1359 01:05:40,200 --> 01:05:41,070 But it doesn't make sense. 1360 01:05:41,070 --> 01:05:43,410 It makes sense to just put all of that in one table. 1361 01:05:43,410 --> 01:05:46,860 >> So we're going to have a table with that information. 1362 01:05:46,860 --> 01:05:48,360 And then, what's the other table we're going to have? 1363 01:05:48,360 --> 01:05:49,430 You said, a Stocks table. 1364 01:05:49,430 --> 01:05:50,680 What are we putting in the Stocks table? 1365 01:05:50,680 --> 01:05:55,860 1366 01:05:55,860 --> 01:05:57,530 Anyone, ideas-- 1367 01:05:57,530 --> 01:05:58,796 >> AUDIENCE: The company. 1368 01:05:58,796 --> 01:06:00,020 >> JASON HIRSCHHORN: We're going to put in the name of the 1369 01:06:00,020 --> 01:06:03,620 company, so AAPL for Apple. 1370 01:06:03,620 --> 01:06:04,050 Yeah. 1371 01:06:04,050 --> 01:06:05,390 >> AUDIENCE: How many shares and how much they're worth. 1372 01:06:05,390 --> 01:06:08,590 >> JASON HIRSCHHORN: How many shares, how much they're worth-- 1373 01:06:08,590 --> 01:06:10,630 what's something else we need in that table? 1374 01:06:10,630 --> 01:06:12,770 >> AUDIENCE: A user ID to index it. 1375 01:06:12,770 --> 01:06:14,000 >> JASON HIRSCHHORN: A User ID. 1376 01:06:14,000 --> 01:06:16,070 So in that table, we'll probably have-- 1377 01:06:16,070 --> 01:06:18,610 let's say, if it's somebody who owns three stocks, three rows, each with 1378 01:06:18,610 --> 01:06:23,730 that user ID or that individual's user ID, but a different company name, a 1379 01:06:23,730 --> 01:06:28,570 different number of shares presumably, and a different price value for each 1380 01:06:28,570 --> 01:06:29,820 of those stocks. 1381 01:06:29,820 --> 01:06:34,690 1382 01:06:34,690 --> 01:06:37,130 Again, what I'm saying now isn't necessarily the implementation, 1383 01:06:37,130 --> 01:06:39,150 because you realize there are some more efficient ways to implement it. 1384 01:06:39,150 --> 01:06:41,020 But this is a good place to start. 1385 01:06:41,020 --> 01:06:41,430 >> OK. 1386 01:06:41,430 --> 01:06:42,830 So those are the two tables we have. 1387 01:06:42,830 --> 01:06:44,470 Now we want to display this page. 1388 01:06:44,470 --> 01:06:48,510 What is the first type of query we would need to make. 1389 01:06:48,510 --> 01:06:52,190 On each page, assumed that is a user is logged in, we have their user ID. 1390 01:06:52,190 --> 01:06:55,480 So what is the first type of query we need to make? 1391 01:06:55,480 --> 01:06:55,910 Yeah. 1392 01:06:55,910 --> 01:06:56,936 >> AUDIENCE: Their user ID. 1393 01:06:56,936 --> 01:07:00,090 >> JASON HIRSCHHORN: We have their user ID, when we're starting to code at the 1394 01:07:00,090 --> 01:07:01,340 beginning of our page. 1395 01:07:01,340 --> 01:07:03,880 1396 01:07:03,880 --> 01:07:06,470 So what's the first type of query we need to make, given a user's ID? 1397 01:07:06,470 --> 01:07:09,580 1398 01:07:09,580 --> 01:07:10,530 We went over the four types. 1399 01:07:10,530 --> 01:07:11,860 There's only four possible answers. 1400 01:07:11,860 --> 01:07:13,230 >> AUDIENCE: It is select a record. 1401 01:07:13,230 --> 01:07:14,710 >> JASON HIRSCHHORN: A Select-- 1402 01:07:14,710 --> 01:07:19,110 we want to select from the user's table to get, let's say, 1403 01:07:19,110 --> 01:07:20,040 their amount of cash. 1404 01:07:20,040 --> 01:07:22,450 And we can print the amount of cash on the top of the screen. 1405 01:07:22,450 --> 01:07:22,720 OK. 1406 01:07:22,720 --> 01:07:24,210 What's the next type of query we want to do? 1407 01:07:24,210 --> 01:07:34,650 1408 01:07:34,650 --> 01:07:36,160 >> We have some other things we need to display. 1409 01:07:36,160 --> 01:07:37,480 Those are saved in another table. 1410 01:07:37,480 --> 01:07:38,300 So how are we going to get that? 1411 01:07:38,300 --> 01:07:40,106 >> AUDIENCE: You select for them. 1412 01:07:40,106 --> 01:07:42,490 >> JASON HIRSCHHORN: A Select-- again, there are only four options. 1413 01:07:42,490 --> 01:07:44,180 Select probably sounds like the right one. 1414 01:07:44,180 --> 01:07:47,510 So we need to do another select query, again using that user ID. 1415 01:07:47,510 --> 01:07:50,370 And now, we want to return not just one row, bu all rows that match our 1416 01:07:50,370 --> 01:07:53,200 criteria, where user ID equals 1. 1417 01:07:53,200 --> 01:07:56,790 >> And then we can go and let a loop just print all those out on the screen, 1418 01:07:56,790 --> 01:07:59,250 maybe print out the company from each of those on the screen. 1419 01:07:59,250 --> 01:08:02,430 Great, that sounds like that's displaying a portfolio, not much more 1420 01:08:02,430 --> 01:08:03,810 complicated than that. 1421 01:08:03,810 --> 01:08:07,460 >> OK, the user then decides that they have plenty of money left over. 1422 01:08:07,460 --> 01:08:09,900 And they want to buy some more shares of a stock. 1423 01:08:09,900 --> 01:08:12,580 Let's say, they already own this company's stock too. 1424 01:08:12,580 --> 01:08:14,110 >> So they go to your buy page. 1425 01:08:14,110 --> 01:08:16,830 They input the company's name. 1426 01:08:16,830 --> 01:08:20,380 What is the query, after the input the company's name, that you need to 1427 01:08:20,380 --> 01:08:22,819 execute next? 1428 01:08:22,819 --> 01:08:23,180 Yeah. 1429 01:08:23,180 --> 01:08:23,960 >> AUDIENCE: Update. 1430 01:08:23,960 --> 01:08:26,670 >> JASON HIRSCHHORN: Update-- and what table do you want to update? 1431 01:08:26,670 --> 01:08:29,018 >> AUDIENCE: Their table, based on their ID number? 1432 01:08:29,018 --> 01:08:31,880 >> JASON HIRSCHHORN: So update not the user's table-- 1433 01:08:31,880 --> 01:08:36,029 1434 01:08:36,029 --> 01:08:40,899 so update the Stocks table, where the user ID not only matches, but the 1435 01:08:40,899 --> 01:08:43,160 stock name also matches. 1436 01:08:43,160 --> 01:08:45,660 You'll get some value. 1437 01:08:45,660 --> 01:08:48,270 And then, you'll want to take that value and add however many stocks they 1438 01:08:48,270 --> 01:08:49,890 want to buy of it. 1439 01:08:49,890 --> 01:08:53,420 >> So you don't want to blindly overwrite that value. 1440 01:08:53,420 --> 01:08:56,330 But you can, in fact, take that initial value and just update it. 1441 01:08:56,330 --> 01:09:00,790 You can do like a plus equals, rather than just an equals. 1442 01:09:00,790 --> 01:09:03,689 >> What is something though-- if we're thinking about this and we want to be 1443 01:09:03,689 --> 01:09:08,090 as robust as possible-- we should do before we run that update query? 1444 01:09:08,090 --> 01:09:09,859 They want to buy five years of Apple. 1445 01:09:09,859 --> 01:09:11,030 Each share of Apple is $200. 1446 01:09:11,030 --> 01:09:12,762 >> AUDIENCE: We should check money first. 1447 01:09:12,762 --> 01:09:15,130 >> JASON HIRSCHHORN: We should check money first. 1448 01:09:15,130 --> 01:09:16,680 We should make sure they have enough money. 1449 01:09:16,680 --> 01:09:20,766 What kind of query can we execute to make sure they have enough money? 1450 01:09:20,766 --> 01:09:22,143 >> AUDIENCE: Another Select. 1451 01:09:22,143 --> 01:09:23,680 >> JASON HIRSCHHORN: A Select-- 1452 01:09:23,680 --> 01:09:26,580 we select based on their user ID, to get their value of cash. 1453 01:09:26,580 --> 01:09:27,620 Do some quick math. 1454 01:09:27,620 --> 01:09:30,279 And if that passes muster, they have enough cash. 1455 01:09:30,279 --> 01:09:31,580 Then we can run our update. 1456 01:09:31,580 --> 01:09:33,850 Or maybe, if not, we pass then. 1457 01:09:33,850 --> 01:09:35,370 We give them a warning. 1458 01:09:35,370 --> 01:09:35,710 >> OK. 1459 01:09:35,710 --> 01:09:36,560 Say they don't have a company. 1460 01:09:36,560 --> 01:09:37,310 They're buying a new company. 1461 01:09:37,310 --> 01:09:39,910 They're buying Microsoft. 1462 01:09:39,910 --> 01:09:41,910 What kind of queries do we want to do, if they want to buy Microsoft? 1463 01:09:41,910 --> 01:09:43,350 And they don't own any Microsoft. 1464 01:09:43,350 --> 01:09:47,520 Not Manu, anybody else, anybody besides Marcus? 1465 01:09:47,520 --> 01:09:48,229 Carlos-- 1466 01:09:48,229 --> 01:09:50,870 >> AUDIENCE: A Select, to make sure they have enough money. 1467 01:09:50,870 --> 01:09:51,770 >> JASON HIRSCHHORN: Sounds good. 1468 01:09:51,770 --> 01:09:54,815 >> AUDIENCE: And then you insert on the [INAUDIBLE]. 1469 01:09:54,815 --> 01:09:56,500 >> JASON HIRSCHHORN: Exactly, we're going to want to insert 1470 01:09:56,500 --> 01:09:57,800 into the Stocks table. 1471 01:09:57,800 --> 01:09:59,370 And we're going to want to insert. 1472 01:09:59,370 --> 01:10:02,510 We can insert their user ID, the name of the company, and how many shares 1473 01:10:02,510 --> 01:10:03,940 they want to buy. 1474 01:10:03,940 --> 01:10:08,040 >> What are some other operations that are pages or functionality you're 1475 01:10:08,040 --> 01:10:10,420 going to have to implement in P-Set 7, that we should go over? 1476 01:10:10,420 --> 01:10:12,160 >> AUDIENCE: Actually, I kind of have a question about this one. 1477 01:10:12,160 --> 01:10:18,000 Before you display the portfolio, should you checks Yahoo's website to 1478 01:10:18,000 --> 01:10:19,920 make sure the stock prices haven't changed? 1479 01:10:19,920 --> 01:10:21,660 >> JASON HIRSCHHORN: That's sounds like a good idea. 1480 01:10:21,660 --> 01:10:27,260 So what Marcus is saying is, OK, stock prices are constantly changing. 1481 01:10:27,260 --> 01:10:32,840 In the stocks that they own table, our table called Stocks, we could save the 1482 01:10:32,840 --> 01:10:35,360 price of the stock they bought it at. 1483 01:10:35,360 --> 01:10:37,990 >> But that doesn't seem that robust, because the price of the stock is 1484 01:10:37,990 --> 01:10:39,490 constantly going to change. 1485 01:10:39,490 --> 01:10:41,990 So in fact, you probably don't need to save the price of the stock. 1486 01:10:41,990 --> 01:10:45,230 But each time you display their portfolio, you refresh or update the 1487 01:10:45,230 --> 01:10:46,280 price of the stock. 1488 01:10:46,280 --> 01:10:48,720 >> And if you have-- and you have already. 1489 01:10:48,720 --> 01:10:51,330 I know you've all looked in the problem sets back already. 1490 01:10:51,330 --> 01:10:55,410 You have realized that we've written some code for you that will allow you 1491 01:10:55,410 --> 01:10:57,650 to get the price of a stock, given a company's name. 1492 01:10:57,650 --> 01:10:59,620 >> So yes, that probably sounds a bit more robust. 1493 01:10:59,620 --> 01:11:04,260 But that table doesn't necessarily need to save the price of the stock. 1494 01:11:04,260 --> 01:11:04,720 OK. 1495 01:11:04,720 --> 01:11:07,590 What are some other functionalities you need to implement this week that 1496 01:11:07,590 --> 01:11:10,340 we can talk about? 1497 01:11:10,340 --> 01:11:11,590 I want to talk about them. 1498 01:11:11,590 --> 01:11:14,342 1499 01:11:14,342 --> 01:11:16,516 >> What do you want to talk about? 1500 01:11:16,516 --> 01:11:17,810 It's probably in this spec. 1501 01:11:17,810 --> 01:11:20,600 I would just scroll down to the bottom of the spec and ask me the first word 1502 01:11:20,600 --> 01:11:21,850 you see that doesn't make sense. 1503 01:11:21,850 --> 01:11:55,130 1504 01:11:55,130 --> 01:11:56,960 One other functionality-- 1505 01:11:56,960 --> 01:11:57,840 let's talk about one. 1506 01:11:57,840 --> 01:12:00,775 We'll start there. 1507 01:12:00,775 --> 01:12:02,065 >> AUDIENCE: Recording the histories. 1508 01:12:02,065 --> 01:12:03,960 >> JASON HIRSCHHORN: Recording the history, great one. 1509 01:12:03,960 --> 01:12:06,920 So you're going to have to keep track of a history of transactions. 1510 01:12:06,920 --> 01:12:10,840 1511 01:12:10,840 --> 01:12:14,270 So you want to keep track of every time they buy or sell a stock. 1512 01:12:14,270 --> 01:12:15,160 >> I bought my stock. 1513 01:12:15,160 --> 01:12:18,580 We just said, it probably makes sense to include a Select, to get their 1514 01:12:18,580 --> 01:12:20,220 amount of cash and check back. 1515 01:12:20,220 --> 01:12:25,270 It probably is smart then to include an insert or an update, depending on 1516 01:12:25,270 --> 01:12:27,720 whether or not they own that stock. 1517 01:12:27,720 --> 01:12:32,740 If we also want to keep track of a history, how can we do that? 1518 01:12:32,740 --> 01:12:37,530 1519 01:12:37,530 --> 01:12:38,720 Does that go in the Stocks table? 1520 01:12:38,720 --> 01:12:39,822 >> AUDIENCE: No. 1521 01:12:39,822 --> 01:12:42,130 >> JASON HIRSCHHORN: No it probably goes in a different table. 1522 01:12:42,130 --> 01:12:44,040 Because say you buy 10 shares of Apple. 1523 01:12:44,040 --> 01:12:45,370 Then you buy another 10 shares. 1524 01:12:45,370 --> 01:12:46,610 You want tow separate records. 1525 01:12:46,610 --> 01:12:47,610 Those are two separate transactions. 1526 01:12:47,610 --> 01:12:50,510 >> So we have another table, a History table. 1527 01:12:50,510 --> 01:12:51,880 So again, we buy. 1528 01:12:51,880 --> 01:12:54,080 We execute a Select, then an Insert or an Update. 1529 01:12:54,080 --> 01:12:56,410 What do we do next? 1530 01:12:56,410 --> 01:13:00,410 What's the next query we execute when we're buying something? 1531 01:13:00,410 --> 01:13:01,430 We want to keep track of history. 1532 01:13:01,430 --> 01:13:01,570 Yeah. 1533 01:13:01,570 --> 01:13:05,195 >> AUDIENCE: You want to keep track of failed transactions too. 1534 01:13:05,195 --> 01:13:07,700 >> JASON HIRSCHHORN: Well, before we say what type of transaction, 1535 01:13:07,700 --> 01:13:11,080 what do we want to-- 1536 01:13:11,080 --> 01:13:13,910 What type of query, Carlos, would allow us to keep track 1537 01:13:13,910 --> 01:13:16,216 of things in general? 1538 01:13:16,216 --> 01:13:17,860 You have four guesses. 1539 01:13:17,860 --> 01:13:18,660 Which one do you think? 1540 01:13:18,660 --> 01:13:20,835 >> AUDIENCE: Updating. 1541 01:13:20,835 --> 01:13:22,400 >> JASON HIRSCHHORN: Not update. 1542 01:13:22,400 --> 01:13:25,250 What's your second guess? 1543 01:13:25,250 --> 01:13:26,730 >> AUDIENCE: Selecting. 1544 01:13:26,730 --> 01:13:30,020 >> JASON HIRSCHHORN: If you want to keep track of something, you probably want 1545 01:13:30,020 --> 01:13:33,310 to write it down somewhere or save it for later. 1546 01:13:33,310 --> 01:13:37,054 So if not update, then-- 1547 01:13:37,054 --> 01:13:38,310 >> AUDIENCE: Insert it. 1548 01:13:38,310 --> 01:13:39,553 >> JASON HIRSCHHORN: Insert, there we go. 1549 01:13:39,553 --> 01:13:44,230 Yes, so you select the amount of cash they have, sounds great. 1550 01:13:44,230 --> 01:13:45,320 They don't have enough cash. 1551 01:13:45,320 --> 01:13:46,720 That transaction is not going to work. 1552 01:13:46,720 --> 01:13:49,440 No, you don't need to keep track of a transaction if it doesn't work. 1553 01:13:49,440 --> 01:13:52,280 Or you can, if you want to give them a hard time. 1554 01:13:52,280 --> 01:13:53,430 But you don't have to. 1555 01:13:53,430 --> 01:13:55,820 >> Then, you insert or update in their Stocks table. 1556 01:13:55,820 --> 01:13:57,260 And now, you have your other table. 1557 01:13:57,260 --> 01:13:59,790 You have your history table or whatever you want to call it. 1558 01:13:59,790 --> 01:14:02,920 And in that table, you're going to insert a new row. 1559 01:14:02,920 --> 01:14:04,205 >> That's probably going to have the user's ID. 1560 01:14:04,205 --> 01:14:05,840 It's probably going to have the name of the stock. 1561 01:14:05,840 --> 01:14:08,760 It's probably going to have a time that they did it. 1562 01:14:08,760 --> 01:14:11,500 And in this case, you ll probably want to insert the price. 1563 01:14:11,500 --> 01:14:13,960 Because for a history, you don't care what the current price is. 1564 01:14:13,960 --> 01:14:17,140 You care what the price is when they bought or sold something. 1565 01:14:17,140 --> 01:14:21,530 >> So it sounds like, to implement buying fully involves a number of different 1566 01:14:21,530 --> 01:14:25,530 SQL queries, But honestly, not that much code overall. 1567 01:14:25,530 --> 01:14:26,330 OK. 1568 01:14:26,330 --> 01:14:28,840 And that takes care of history. 1569 01:14:28,840 --> 01:14:30,450 >> Let's say, we want to display our history. 1570 01:14:30,450 --> 01:14:31,670 We talked about displaying our portfolio. 1571 01:14:31,670 --> 01:14:33,902 How would we display our history? 1572 01:14:33,902 --> 01:14:36,312 >> AUDIENCE: Presumably chronologically. 1573 01:14:36,312 --> 01:14:37,920 >> JASON HIRSCHHORN: Presumably chronologically-- 1574 01:14:37,920 --> 01:14:39,400 what query do you think we'd use? 1575 01:14:39,400 --> 01:14:40,675 >> AUDIENCE: A select. 1576 01:14:40,675 --> 01:14:41,840 >> JASON HIRSCHHORN: A select-- 1577 01:14:41,840 --> 01:14:46,590 select maybe all rows from that table that match the user ID and then 1578 01:14:46,590 --> 01:14:49,510 display them chronologically, sounds good. 1579 01:14:49,510 --> 01:14:52,590 Do we need to write code to sort through that list? 1580 01:14:52,590 --> 01:14:55,084 >> AUDIENCE: No, because you told us there is an ascending 1581 01:14:55,084 --> 01:14:57,320 and descending thing. 1582 01:14:57,320 --> 01:14:58,230 >> JASON HIRSCHHORN: Thing? 1583 01:14:58,230 --> 01:14:59,190 >> AUDIENCE: Yeah. 1584 01:14:59,190 --> 01:15:01,270 >> JASON HIRSCHHORN: Yeah. 1585 01:15:01,270 --> 01:15:09,300 OK, do not turn in code to me, that manually sorts through your queries, 1586 01:15:09,300 --> 01:15:09,820 to sort them. 1587 01:15:09,820 --> 01:15:12,480 That code is already given. 1588 01:15:12,480 --> 01:15:15,310 You can write a Select query that sorts things. 1589 01:15:15,310 --> 01:15:18,900 Sort them beforehand and then print them out. 1590 01:15:18,900 --> 01:15:22,070 It makes so much more sense to do it that way, than the other way. 1591 01:15:22,070 --> 01:15:22,375 Yes. 1592 01:15:22,375 --> 01:15:23,925 >> AUDIENCE: Do we need to sort them beforehand? 1593 01:15:23,925 --> 01:15:25,976 Does that mean you sort them in the database? 1594 01:15:25,976 --> 01:15:30,510 >> JASON HIRSCHHORN: The Select query returns them to you sorted. 1595 01:15:30,510 --> 01:15:34,990 So do that, rather than just have them return to you in a random order and 1596 01:15:34,990 --> 01:15:36,150 then sort them yourself. 1597 01:15:36,150 --> 01:15:36,405 Yeah. 1598 01:15:36,405 --> 01:15:39,925 >> AUDIENCE: Is there a way to keep it sorted in the database itself, so that 1599 01:15:39,925 --> 01:15:41,355 you don't have to sort it every time you-- 1600 01:15:41,355 --> 01:15:43,065 >> AUDIENCE: Can you insert it sorted? 1601 01:15:43,065 --> 01:15:45,740 >> JASON HIRSCHHORN: Question-- 1602 01:15:45,740 --> 01:15:49,796 does it matter that things are sorted in the database? 1603 01:15:49,796 --> 01:15:50,700 >> AUDIENCE: No. 1604 01:15:50,700 --> 01:15:52,240 >> JASON HIRSCHHORN: Well, they are sorted. 1605 01:15:52,240 --> 01:15:53,100 They're sorted chronologically. 1606 01:15:53,100 --> 01:15:55,060 But let's assume that things are sorted 1607 01:15:55,060 --> 01:15:57,640 chronologically, from top to bottom. 1608 01:15:57,640 --> 01:15:58,930 We have a Google form. 1609 01:15:58,930 --> 01:16:01,400 Whenever somebody responds to our Google form, it just gets put in the 1610 01:16:01,400 --> 01:16:02,480 bottom of that table. 1611 01:16:02,480 --> 01:16:07,318 Does it matter that things are sorted not chronologically? 1612 01:16:07,318 --> 01:16:11,290 >> AUDIENCE: If it's not chronological, don't you have to sort it every time 1613 01:16:11,290 --> 01:16:12,920 you take info out. 1614 01:16:12,920 --> 01:16:16,730 But if it's already sorted, can't you not have to do that additional 1615 01:16:16,730 --> 01:16:17,570 function call? 1616 01:16:17,570 --> 01:16:20,690 >> JASON HIRSCHHORN: So that's actually a good point. 1617 01:16:20,690 --> 01:16:23,690 For us as programmers, it might matter. 1618 01:16:23,690 --> 01:16:26,190 And we might want to find a database that doesn't sort things 1619 01:16:26,190 --> 01:16:26,900 chronologically. 1620 01:16:26,900 --> 01:16:30,100 Or set up our database, so it keeps things sorted by user ID. 1621 01:16:30,100 --> 01:16:34,060 >> So that way, say, we have 1,000 user IDs. 1622 01:16:34,060 --> 01:16:36,690 Or Facebook, we have millions of user IDs. 1623 01:16:36,690 --> 01:16:39,560 We don't want our table to just be random or our database to be random. 1624 01:16:39,560 --> 01:16:41,630 It would be nice if all the user IDs were sorted. 1625 01:16:41,630 --> 01:16:46,020 So then we could run binary searches on our table and then just find the 1626 01:16:46,020 --> 01:16:47,050 specific chunk. 1627 01:16:47,050 --> 01:16:50,640 >> So yes, depending on-- if we scaled up, we might want to find a database 1628 01:16:50,640 --> 01:16:53,370 that kept things sorted in a different way, so that these queries 1629 01:16:53,370 --> 01:16:54,140 would take less time. 1630 01:16:54,140 --> 01:16:56,820 And we didn't have to go through our entire database in every single row in 1631 01:16:56,820 --> 01:16:58,260 a given table. 1632 01:16:58,260 --> 01:17:01,640 But the level we're working at, we don't need to worry about keeping 1633 01:17:01,640 --> 01:17:02,270 things sorted. 1634 01:17:02,270 --> 01:17:06,100 We can assume that the time it takes that query to run is going to be 1635 01:17:06,100 --> 01:17:08,910 negligible, given what we're dealing with. 1636 01:17:08,910 --> 01:17:13,550 But yes, great idea-- as we scale up, it might make sense to design our 1637 01:17:13,550 --> 01:17:15,390 database in a bit of a different way. 1638 01:17:15,390 --> 01:17:18,520 >> One final database design thing I want to mention as well, because you will 1639 01:17:18,520 --> 01:17:22,660 be graded, or scored rather, on the design of your database. 1640 01:17:22,660 --> 01:17:24,160 We talked about this. 1641 01:17:24,160 --> 01:17:27,490 Cash is unique to each user. 1642 01:17:27,490 --> 01:17:30,820 So you've got a table called cash that has their user ID and their amount of 1643 01:17:30,820 --> 01:17:33,370 cash and then a table called users that has their user 1644 01:17:33,370 --> 01:17:34,810 ID and their username. 1645 01:17:34,810 --> 01:17:37,390 >> Those tables map onto each other one-to-one. 1646 01:17:37,390 --> 01:17:39,520 It probably makes sense for them to be one table. 1647 01:17:39,520 --> 01:17:42,750 1648 01:17:42,750 --> 01:17:44,830 So let's assume you have a user table that keeps track of 1649 01:17:44,830 --> 01:17:46,220 user names and cash. 1650 01:17:46,220 --> 01:17:49,960 You now have a table that has the stocks an individual owns. 1651 01:17:49,960 --> 01:17:52,130 >> And an individual might own more than one stock. 1652 01:17:52,130 --> 01:17:54,900 So these do not map onto each other one-to-one. 1653 01:17:54,900 --> 01:18:00,140 It does not make sense to have one giant table that has 30 records that 1654 01:18:00,140 --> 01:18:02,960 all repeat a username, that all repeat a password, that all 1655 01:18:02,960 --> 01:18:04,680 repeat a number of cash. 1656 01:18:04,680 --> 01:18:08,360 But each has maybe a different stock name or a different stock price. 1657 01:18:08,360 --> 01:18:11,310 >> It does not make sense to have that many large records. 1658 01:18:11,310 --> 01:18:14,880 Be smart about when you create these databases, so that you aren't doing 1659 01:18:14,880 --> 01:18:20,050 something silly like that, repeating a lot of unnecessary information. 1660 01:18:20,050 --> 01:18:20,570 >> OK. 1661 01:18:20,570 --> 01:18:22,570 We have two minutes left. 1662 01:18:22,570 --> 01:18:26,580 People outside are excited to join us or probably, presumably, 1663 01:18:26,580 --> 01:18:27,650 start their own class. 1664 01:18:27,650 --> 01:18:30,110 Does anybody have any questions before we finish up? 1665 01:18:30,110 --> 01:18:35,520 1666 01:18:35,520 --> 01:18:38,620 >> OK, this was indeed a whirlwind through everything. 1667 01:18:38,620 --> 01:18:43,510 I apologize that it had to be so quick and that we couldn't be as hands-on 1668 01:18:43,510 --> 01:18:46,640 this week as I would've liked to have been. 1669 01:18:46,640 --> 01:18:50,610 But if you have any questions about anything we went over or anything in 1670 01:18:50,610 --> 01:18:52,090 this problem set-- 1671 01:18:52,090 --> 01:18:54,900 presuming you've read it and put in a good-faith effort-- 1672 01:18:54,900 --> 01:18:57,920 feel free to email me or contact me. 1673 01:18:57,920 --> 01:19:00,960 I'm more than happy to work through your code with you or answer any 1674 01:19:00,960 --> 01:19:02,330 questions you have. 1675 01:19:02,330 --> 01:19:06,160 >> Keep in mind that, this week, a lot of your time will be spent learning the 1676 01:19:06,160 --> 01:19:10,730 new syntax and trying to understand how to write SQL queries or PHP 1677 01:19:10,730 --> 01:19:14,280 functions or deal with a MVC framework. 1678 01:19:14,280 --> 01:19:17,290 A lot of your time this week probably won't be trying to figure out the 1679 01:19:17,290 --> 01:19:19,380 crazy logic that we're asking you to do. 1680 01:19:19,380 --> 01:19:23,820 A lot of it we just went over is relatively straightforward. 1681 01:19:23,820 --> 01:19:25,790 >> So that doesn't mean wait until the last minute. 1682 01:19:25,790 --> 01:19:29,710 But it does mean adjust how you do your work accordingly, to make sure 1683 01:19:29,710 --> 01:19:30,970 you're understanding and learning the syntax. 1684 01:19:30,970 --> 01:19:33,640 So you're not, all of a sudden, knowing exactly what you want to do, 1685 01:19:33,640 --> 01:19:37,200 but with no idea how to exactly write it. 1686 01:19:37,200 --> 01:19:38,450 OK, I'll see you next week. 1687 01:19:38,450 --> 01:19:40,438