1
00:00:00,000 --> 00:00:02,000
[Week 8]

2
00:00:02,000 --> 00:00:04,000
[David J Malan] [Harvard University]

3
00:00:04,000 --> 00:00:07,000
[This is CS50.] [CS50.TV]

4
00:00:07,000 --> 00:00:09,000
>> Welcome back. 

5
00:00:09,000 --> 00:00:11,000
This is CS50, and this is the start of week 8.

6
00:00:11,000 --> 00:00:14,000
A couple of opportunities this week, 

7
00:00:14,000 --> 00:00:17,000
among them this talk here, at which some food will be served.

8
00:00:17,000 --> 00:00:20,000
For more details check out the slides that are online.

9
00:00:20,000 --> 00:00:24,000
And also another event this week by our own Thomas Carriero.

10
00:00:24,000 --> 00:00:27,000
He's one of CS50's former head teaching fellows who is now at Dropbox,

11
00:00:27,000 --> 00:00:29,000
and he's the guy who hooked us up with the you know what, 

12
00:00:29,000 --> 00:00:36,000
so if you want more of that head to their talk this afternoon for Dropbox and more.

13
00:00:36,000 --> 00:00:38,000
CS50 lunch is this Friday.

14
00:00:38,000 --> 00:00:41,000
Do join us if you are able, 1:15, as usual, at Fire and Ice.

15
00:00:41,000 --> 00:00:45,000
>> And now we dive into something called Seminars.

16
00:00:45,000 --> 00:00:49,000
Our CS50 Seminars, recall, are these optional classes led by the teaching fellows

17
00:00:49,000 --> 00:00:51,000
and course assistants and friends of the course, 

18
00:00:51,000 --> 00:00:55,000
folks from a group on campus called ABCD, which is a group of

19
00:00:55,000 --> 00:00:58,000
technophiles on campus, as well as a group called HCS,

20
00:00:58,000 --> 00:01:02,000
the Harvard Computer Society, undergraduates who are similarly interested in computing.

21
00:01:02,000 --> 00:01:08,000
This year's roster of seminars includes seminars on Android and iOS and JavaScript

22
00:01:08,000 --> 00:01:13,000
and PHP, Unix, Vim, and more, so realize that these seminars are coming up.

23
00:01:13,000 --> 00:01:16,000
If you'd like to RSVP for any of them head to that URL there.

24
00:01:16,000 --> 00:01:20,000
We will then post on the course's website the times and places once they are finalized.

25
00:01:20,000 --> 00:01:26,000
But know there's 5 year's worth of prior seminars available online,

26
00:01:26,000 --> 00:01:29,000
many of which are still very much current in terms of technologies you might

27
00:01:29,000 --> 00:01:36,000
want to play with for your final projects, so head there for some available videos thereof.

28
00:01:36,000 --> 00:01:39,000
>> CSS, those of you who are familiar with CSS already,

29
00:01:39,000 --> 00:01:42,000
what is it in a nutshell?

30
00:01:42,000 --> 00:01:45,000
What is CSS?

31
00:01:45,000 --> 00:01:48,000
It's cascading style sheets, and what does that mean?

32
00:01:48,000 --> 00:01:53,000
What does that do for us, CSS?

33
00:01:53,000 --> 00:01:57,000
All right, let's warm up with an easier one, HTML, hypertext markup language.

34
00:01:57,000 --> 00:02:01,000
What does that do for us?

35
00:02:01,000 --> 00:02:04,000
Anyone at all? 

36
00:02:04,000 --> 00:02:07,000
It's getting really awkward asking these questions.

37
00:02:07,000 --> 00:02:11,000
HTML, hypertext markup language.

38
00:02:11,000 --> 00:02:14,000
Yes? No?

39
00:02:14,000 --> 00:02:17,000
[inaudible student response]

40
00:02:17,000 --> 00:02:20,000
Okay, good, it allows us to mark up text to display in a web browser.

41
00:02:20,000 --> 00:02:22,000
It's not a programming language. 

42
00:02:22,000 --> 00:02:25,000
It's indeed a markup language, which means it instructs the browser how to display

43
00:02:25,000 --> 00:02:28,000
information, so the simplest incarnation of this as we've seen 

44
00:02:28,000 --> 00:02:32,000
is something super simple like boldfacing, open bracket b closed bracket says

45
00:02:32,000 --> 00:02:36,000
make this text bold, and that's actually just one of many ways

46
00:02:36,000 --> 00:02:39,000
in which we can do that, and indeed, these days a better approach

47
00:02:39,000 --> 00:02:42,000
to stylizing your web page, making things bold and italics 

48
00:02:42,000 --> 00:02:47,000
and centered and justified and the like, is not done via HTML tags alone

49
00:02:47,000 --> 00:02:51,000
but rather with a technique called CSS, cascading style sheets.

50
00:02:51,000 --> 00:02:53,000
This is a language unto itself. 

51
00:02:53,000 --> 00:02:55,000
It too is not a programming language but—

52
00:02:55,000 --> 00:02:58,000
everyone, this is Dan, who keeps joining us today.

53
00:02:58,000 --> 00:03:01,000
Some technical difficulties. Not a problem.

54
00:03:01,000 --> 00:03:04,000
>> CSS allows us to stylize a page

55
00:03:04,000 --> 00:03:07,000
by setting what are called properties, so let's take a look at this

56
00:03:07,000 --> 00:03:09,000
by way of some basic examples. 

57
00:03:09,000 --> 00:03:12,000
Let me go into the appliance today.

58
00:03:12,000 --> 00:03:15,000
I have the source 8 Monday directory in here,

59
00:03:15,000 --> 00:03:18,000
and I'm going to go into a directory called CSS where we have a whole bunch

60
00:03:18,000 --> 00:03:21,000
of files waiting for us right here, 

61
00:03:21,000 --> 00:03:27,000
and in this folder we have, for instance, search0.html from last time.

62
00:03:27,000 --> 00:03:31,000
Now, recall with search0 we left on this note

63
00:03:31,000 --> 00:03:35,000
by sort of implementing Google or really just the front end for it a week or so ago,

64
00:03:35,000 --> 00:03:38,000
and notice that we had some new tags there.

65
00:03:38,000 --> 00:03:41,000
We had h1 for a big, bold heading,

66
00:03:41,000 --> 00:03:45,000
form, which allowed us to actually have an HTML form for user input.

67
00:03:45,000 --> 00:03:48,000
Action, what was the meaning of an action attribute

68
00:03:48,000 --> 00:03:52,000
on the HTML form tag?

69
00:03:52,000 --> 00:03:58,000
What was the meaning of this, action?

70
00:03:58,000 --> 00:04:00,000
I'll just do this today.

71
00:04:00,000 --> 00:04:03,000
Action is the destination to where the form is going to be submitted.

72
00:04:03,000 --> 00:04:07,000
The fact that that says action = "google.com/search"

73
00:04:07,000 --> 00:04:10,000
means that when the user clicks the submit button or the equivalent

74
00:04:10,000 --> 00:04:14,000
whatever form fields they filled out are going to be sent not to our server

75
00:04:14,000 --> 00:04:17,000
or our appliance but rather to that specific URL at Google.

76
00:04:17,000 --> 00:04:19,000
And the method it's going to use is called get,

77
00:04:19,000 --> 00:04:25,000
and get, for now, is just a technique for passing information along to a web server

78
00:04:25,000 --> 00:04:29,000
by way of the URL, so let's take a quick look back at how this works. 

79
00:04:29,000 --> 00:04:31,000
>> Notice that there's an input whose name is q 

80
00:04:31,000 --> 00:04:35,000
whose type is text and then a second input of type submit

81
00:04:35,000 --> 00:04:39,000
whose value is CS50 Search, and indeed, if we open up this file here,

82
00:04:39,000 --> 00:04:42,000
search0.html, it's a super simple form,

83
00:04:42,000 --> 00:04:45,000
and if I search for something like computer science 

84
00:04:45,000 --> 00:04:50,000
and then hit enter or click on CS50 Search

85
00:04:50,000 --> 00:04:53,000
notice that what happens is beyond getting to Google 

86
00:04:53,000 --> 00:04:56,000
I've specifically ended up at this URL at the top, 

87
00:04:56,000 --> 00:05:01,000
google.com/search?q=computer+science,

88
00:05:01,000 --> 00:05:04,000
and computer science is obviously what I typed in.

89
00:05:04,000 --> 00:05:06,000
The + just means that's where a space character was,

90
00:05:06,000 --> 00:05:10,000
and it's done by the browser just to make sure that there's no

91
00:05:10,000 --> 00:05:13,000
confusion and white space in the actual URL.

92
00:05:13,000 --> 00:05:15,000
And then q, of course, is the parameter name.

93
00:05:15,000 --> 00:05:20,000
We haven't seen how we, the programmer, can actually access q yet.

94
00:05:20,000 --> 00:05:23,000
We can assume that Google knows what to do with this here,

95
00:05:23,000 --> 00:05:25,000
but we'll get there in due time today.

96
00:05:25,000 --> 00:05:30,000
>> But let me take a look instead at search1.html,

97
00:05:30,000 --> 00:05:34,000
which looks a little different because I decided that this form here was just a little lame.

98
00:05:34,000 --> 00:05:36,000
I mean, it's at the top left.

99
00:05:36,000 --> 00:05:40,000
There's really no aesthetics to it, and so I want to stylize this 

100
00:05:40,000 --> 00:05:43,000
a bit more like Google, whose homepage, recall,

101
00:05:43,000 --> 00:05:47,000
even though you might not visit it that often, looks like this today on Halloween.

102
00:05:47,000 --> 00:05:53,000
If we instead open up version 1 of this file, search 1.html, I've centered it.

103
00:05:53,000 --> 00:05:57,000
Still pretty ugly, but at least now I've started to control the aesthetics of this page,

104
00:05:57,000 --> 00:06:00,000
not just the marking up thereof.

105
00:06:00,000 --> 00:06:04,000
Let's take a look at search 1, and there's really just one difference here,

106
00:06:04,000 --> 00:06:06,000
which might jump out at you, or maybe not, 

107
00:06:06,000 --> 00:06:11,000
but what's the one line or snippet of difference?

108
00:06:11,000 --> 00:06:14,000
>> There's this style attribute, so it turns out that in HTML

109
00:06:14,000 --> 00:06:19,000
most elements, most tags can have a style attribute on them,

110
00:06:19,000 --> 00:06:23,000
and inside of that style attribute is a quoted string,

111
00:06:23,000 --> 00:06:26,000
and that quoted string is CSS.

112
00:06:26,000 --> 00:06:29,000
You can put cascading style sheet in there

113
00:06:29,000 --> 00:06:32,000
by specifying it as a property name

114
00:06:32,000 --> 00:06:34,000
followed by a colon followed by a value.

115
00:06:34,000 --> 00:06:37,000
This is kind of an unfortunate design decision some years ago

116
00:06:37,000 --> 00:06:40,000
that CSS is a language unto itself,

117
00:06:40,000 --> 00:06:43,000
but syntactically it's very different from HTML.

118
00:06:43,000 --> 00:06:46,000
In this case, we see that inside of my webpage, which is written in HTML,

119
00:06:46,000 --> 00:06:51,000
I have CSS inside of these quotes, and the convention for CSS

120
00:06:51,000 --> 00:06:55,000
is that you have what's called a property followed by, again, a colon,

121
00:06:55,000 --> 00:06:58,000
followed by the value of that property, so there's no equal sign.

122
00:06:58,000 --> 00:07:00,000
There's no additional quotes.

123
00:07:00,000 --> 00:07:03,000
It's just this colon separated key value pair,

124
00:07:03,000 --> 00:07:05,000
and text line does exactly what it says.

125
00:07:05,000 --> 00:07:09,000
It aligns the text in the body of the page, which is really the guts of the page,

126
00:07:09,000 --> 00:07:11,000
in the center.

127
00:07:11,000 --> 00:07:13,000
>> Okay, the end result then, to be clear, is this.

128
00:07:13,000 --> 00:07:17,000
Not all that sexier, but at least it's centered and a little more like the real Google.

129
00:07:17,000 --> 00:07:21,000
But what if I instead open up version 2 of this

130
00:07:21,000 --> 00:07:25,000
and point out down here a new tag altogether?

131
00:07:25,000 --> 00:07:30,000
Now in the head of my page, which previously only had which tag

132
00:07:30,000 --> 00:07:32,000
in all prior examples?

133
00:07:32,000 --> 00:07:34,000
It just had this, the title.

134
00:07:34,000 --> 00:07:38,000
A moment ago the head tag looked like this.

135
00:07:38,000 --> 00:07:40,000
Now instead it has a style tag inside of it,

136
00:07:40,000 --> 00:07:44,000
and this too, I apologize, syntactically looks very different from HTML,

137
00:07:44,000 --> 00:07:47,000
but you get used to it, whereby inside of the style tag

138
00:07:47,000 --> 00:07:50,000
I can now factor out what was a moment ago

139
00:07:50,000 --> 00:07:54,000
an attribute, the style attribute, and I can put it at the very top of my page.

140
00:07:54,000 --> 00:07:56,000
>> Why? 

141
00:07:56,000 --> 00:08:00,000
Well, this is a step toward cleaning things up, much like in writing C code 

142
00:08:00,000 --> 00:08:04,000
we would sometimes write functions to factor out common functionality.

143
00:08:04,000 --> 00:08:07,000
It's just a little cleaner to start factoring out things like the aesthetics 

144
00:08:07,000 --> 00:08:11,000
to one central location rather than having it all intersperse throughout your HTML.

145
00:08:11,000 --> 00:08:14,000
This too does what it says, even though there's a bit of new syntax. 

146
00:08:14,000 --> 00:08:19,000
This here is a selector, and body just means select the body element

147
00:08:19,000 --> 00:08:21,000
and apply the following properties to it.

148
00:08:21,000 --> 00:08:23,000
Well, the property is exactly the same.

149
00:08:23,000 --> 00:08:25,000
For good measure I've added a semicolon at the end, 

150
00:08:25,000 --> 00:08:29,000
which tends to be convention, and I've wrapped this whole property

151
00:08:29,000 --> 00:08:33,000
in curly braces because I could actually have different things here.

152
00:08:33,000 --> 00:08:39,000
I could actually say something like color: blue;

153
00:08:39,000 --> 00:08:42,000
>> Now this too is not going to be a step toward anything all that prettier,

154
00:08:42,000 --> 00:08:47,000
but if I now go back to version 2 I've at least now made the body of my

155
00:08:47,000 --> 00:08:49,000
page's text all blue.

156
00:08:49,000 --> 00:08:51,000
The button stays the same because that's an input. It's not pure text.

157
00:08:51,000 --> 00:08:56,000
But everything else that is text, like CS50 Search up top, is in fact blue.

158
00:08:56,000 --> 00:09:01,000
Again, all we've done now is remove from the body tag, notice,

159
00:09:01,000 --> 00:09:04,000
the style attribute, and we've factored it out here.

160
00:09:04,000 --> 00:09:08,000
This isn't a huge improvement, but if we take this one step further

161
00:09:08,000 --> 00:09:10,000
notice what we can do in this third version here.

162
00:09:10,000 --> 00:09:14,000
>> In search3.html the webpage is almost identical 

163
00:09:14,000 --> 00:09:17,000
except for what new tag now?

164
00:09:17,000 --> 00:09:20,000
Link, so this one is not very aptly named

165
00:09:20,000 --> 00:09:24,000
because you're not linking in the sense of a clickable hyperlink.

166
00:09:24,000 --> 00:09:28,000
Rather, you're sort of doing the equivalent of #include in C

167
00:09:28,000 --> 00:09:31,000
whereby the link tag with an href attribute 

168
00:09:31,000 --> 00:09:34,000
and a rel attribute says go ahead 

169
00:09:34,000 --> 00:09:39,000
and copy paste the contents of a file called search3.css right here, essentially.

170
00:09:39,000 --> 00:09:42,000
It doesn't quite do that, but that's the spirit of it.

171
00:09:42,000 --> 00:09:45,000
It says go open that file, search3.css, 

172
00:09:45,000 --> 00:09:49,000
and treat it as though the user had typed it right here in the head of the page 

173
00:09:49,000 --> 00:09:51,000
just like I did in the previous example.

174
00:09:51,000 --> 00:09:54,000
Search3.css, meanwhile, is pretty simple.

175
00:09:54,000 --> 00:09:58,000
It really just contains exactly what was a moment ago 

176
00:09:58,000 --> 00:10:03,000
in the style tag, but I've factored it out here to its own file.

177
00:10:03,000 --> 00:10:07,000
>> Even though we haven't spent much time at all in HTML or web programming

178
00:10:07,000 --> 00:10:11,000
just intuitively what's the motivation, perhaps, for factoring out 

179
00:10:11,000 --> 00:10:14,000
this small snippet even of CSS into its own file

180
00:10:14,000 --> 00:10:19,000
and then including it with this link tag here?

181
00:10:19,000 --> 00:10:21,000
[inaudible student response]

182
00:10:21,000 --> 00:10:25,000
Okay, it's easier to read in the sense that you have your CSS in a CSS file.

183
00:10:25,000 --> 00:10:28,000
You have your HTML in your HTML file, so it's more readable in that sense.

184
00:10:28,000 --> 00:10:30,000
What else might be compelling? Yeah.

185
00:10:30,000 --> 00:10:32,000
[inaudible student response]

186
00:10:32,000 --> 00:10:35,000
Yeah, so you can include it many times, so right now we're doing these

187
00:10:35,000 --> 00:10:38,000
basic examples with individual files, but suppose you're actually making 

188
00:10:38,000 --> 00:10:42,000
a real website like you will for pset 7 or your final project perhaps,

189
00:10:42,000 --> 00:10:45,000
and you want to have multiple webpages, as is certainly common on 

190
00:10:45,000 --> 00:10:48,000
the actual World Wide Web, and it would be kind of lame

191
00:10:48,000 --> 00:10:52,000
to have to copy and paste the same blue color

192
00:10:52,000 --> 00:10:56,000
and the same text aligned center in every one of those pages.

193
00:10:56,000 --> 00:10:59,000
Rather it makes more sense to factor out, much like we've done in C

194
00:10:59,000 --> 00:11:02,000
with the .h file, put it in one central place,

195
00:11:02,000 --> 00:11:06,000
in this case search3.css, and then allow any file

196
00:11:06,000 --> 00:11:11,000
in your website to actually include that file by way of this tag here in line 16.

197
00:11:11,000 --> 00:11:14,000
As is typically the case, we started with version 0, which kind of works

198
00:11:14,000 --> 00:11:18,000
but isn't necessarily the best, and with each step,

199
00:11:18,000 --> 00:11:21,000
search 1, search 2, and now search 3 we've taken these baby steps

200
00:11:21,000 --> 00:11:26,000
toward designs that are a little cleaner and are more preparatory 

201
00:11:26,000 --> 00:11:30,000
for more complex pages that we might do down the road.

202
00:11:30,000 --> 00:11:33,000
>> Let me open up one last example here just to show

203
00:11:33,000 --> 00:11:36,000
an even more stylized page, but first let's look at the HTML.

204
00:11:36,000 --> 00:11:41,000
This is search4.html, and notice that structurally it's almost the same

205
00:11:41,000 --> 00:11:44,000
except for the introduction of a new tag, div. 

206
00:11:44,000 --> 00:11:48,000
Div is a tag that introduces a division of the page.

207
00:11:48,000 --> 00:11:51,000
You can think of this as an invisible rectangle.

208
00:11:51,000 --> 00:11:54,000
It sort of creates a swath of area in the webpage

209
00:11:54,000 --> 00:11:56,000
that you can stylize all at once. 

210
00:11:56,000 --> 00:11:58,000
What I've done here is as follows.

211
00:11:58,000 --> 00:12:01,000
Inside of my body tag, which has been there all along,

212
00:12:01,000 --> 00:12:05,000
I'm saying create a division of the page here via lines 45 through 47,

213
00:12:05,000 --> 00:12:09,000
and that means essentially give me an invisible rectangle along the top of the page.

214
00:12:09,000 --> 00:12:14,000
Then give me a second rectangle, albeit invisible, below that,

215
00:12:14,000 --> 00:12:16,000
and identify it by the name content, and then lastly, 

216
00:12:16,000 --> 00:12:19,000
give me a third division of the page at the bottom

217
00:12:19,000 --> 00:12:21,000
called ID.

218
00:12:21,000 --> 00:12:23,000
We'll see why I've done this in just a moment,

219
00:12:23,000 --> 00:12:26,000
but conceptually I have a header division.

220
00:12:26,000 --> 00:12:30,000
I have a content division, and I have a footer division of the page

221
00:12:30,000 --> 00:12:32,000
even though these are just in markup. 

222
00:12:32,000 --> 00:12:35,000
The user is not going to see 3 rectangles,

223
00:12:35,000 --> 00:12:37,000
but sort of structurally there behind the scenes

224
00:12:37,000 --> 00:12:39,000
they're actually present.

225
00:12:39,000 --> 00:12:41,000
>> Now, who cares? Why actually do this?

226
00:12:41,000 --> 00:12:43,000
Everything else on the page is the same as we've seen before.

227
00:12:43,000 --> 00:12:47,000
Here's my form. Here's my input, my input, a line break and so forth.

228
00:12:47,000 --> 00:12:50,000
Here's an image, though, so we'll see where this came from in just a moment.

229
00:12:50,000 --> 00:12:52,000
Here's a footer, which is new, just because I wanted to introduce

230
00:12:52,000 --> 00:12:54,000
some more content here.

231
00:12:54,000 --> 00:12:58,000
If we scroll up notice that ID of this div is header.

232
00:12:58,000 --> 00:13:02,000
The ID of this div is content, and the ID of this one is footer.

233
00:13:02,000 --> 00:13:05,000
And as the name suggests, when you have an ID attribute

234
00:13:05,000 --> 00:13:09,000
in HTML, by definition it must uniquely identify 

235
00:13:09,000 --> 00:13:12,000
one of the elements, one of the tags in your page.

236
00:13:12,000 --> 00:13:16,000
The burden is totally on you to remember that you have a header ID already.

237
00:13:16,000 --> 00:13:19,000
You have a footer. You have a content ID already.

238
00:13:19,000 --> 00:13:22,000
The computer is not going to figure out what an available ID is for you,

239
00:13:22,000 --> 00:13:27,000
so you could accidentally give 2 tags an ID of header,

240
00:13:27,000 --> 00:13:29,000
and that would just be wrong. 

241
00:13:29,000 --> 00:13:31,000
>> You have to keep in mind what you have created,

242
00:13:31,000 --> 00:13:34,000
but once you've done that notice what we can do here.

243
00:13:34,000 --> 00:13:38,000
I can now specify in my style tag at the top

244
00:13:38,000 --> 00:13:41,000
or equivalently in my CSS file, if I was still using that version,

245
00:13:41,000 --> 00:13:46,000
I can say #header, and what that means is that whatever tag

246
00:13:46,000 --> 00:13:49,000
in this webpage has an ID of header 

247
00:13:49,000 --> 00:13:53,000
and #, just by human convention, represents ID.

248
00:13:53,000 --> 00:13:56,000
The sharp sign or pound sign represents ID.

249
00:13:56,000 --> 00:13:58,000
Header is the name that I gave it.

250
00:13:58,000 --> 00:14:01,000
This means apply this CSS property

251
00:14:01,000 --> 00:14:04,000
to whatever tag in this page bears an ID of header.

252
00:14:04,000 --> 00:14:06,000
Same deal here. 

253
00:14:06,000 --> 00:14:09,000
Apply this property, which happens to be the same, to any element

254
00:14:09,000 --> 00:14:11,000
whose ID is content, and then down here

255
00:14:11,000 --> 00:14:14,000
notice I got a little fancier with footer.

256
00:14:14,000 --> 00:14:18,000
Any element whose ID is footer, of which there can be just one by definition,

257
00:14:18,000 --> 00:14:21,000
go ahead and make its font size smaller, 

258
00:14:21,000 --> 00:14:24,000
its font weight bold, its margin 20 pixels.

259
00:14:24,000 --> 00:14:26,000
>> What does that mean?

260
00:14:26,000 --> 00:14:28,000
It's just a margin on the top, the bottom, and the left and the right.

261
00:14:28,000 --> 00:14:31,000
This means give me a 20-pixel invisible margin around it

262
00:14:31,000 --> 00:14:35,000
just to push everything else away from it a little bit, like you might do in Word,

263
00:14:35,000 --> 00:14:37,000
Microsoft Word or Pages or the like.

264
00:14:37,000 --> 00:14:39,000
And then text align center.

265
00:14:39,000 --> 00:14:43,000
Let's see the end result, and then we'll go back up to the one remaining snippet of CSS there. 

266
00:14:43,000 --> 00:14:48,000
This is version 4, our last for the search examples, and it's much, much sexier.

267
00:14:48,000 --> 00:14:54,000
Now, in fairness, I just Googled "google font logo generator."

268
00:14:54,000 --> 00:14:58,000
And that allowed me to create a GIF, an image format, which looks like that there.

269
00:14:58,000 --> 00:15:00,000
In fact, you can do this too.

270
00:15:00,000 --> 00:15:03,000
We have "google fonts logo generator."

271
00:15:03,000 --> 00:15:05,000
>> Let's see if we can do this.

272
00:15:05,000 --> 00:15:07,000
Okay, I think this is the website I used.

273
00:15:07,000 --> 00:15:11,000
We can say Ec 10, for instance, and make them their own.

274
00:15:11,000 --> 00:15:13,000
You can play with this all day long and then right click on it

275
00:15:13,000 --> 00:15:16,000
and then download the actual GIF, which is all that I did.

276
00:15:16,000 --> 00:15:19,000
And indeed, that's why in my HTML, recall, over here

277
00:15:19,000 --> 00:15:22,000
I had an image tag, which we saw briefly last week

278
00:15:22,000 --> 00:15:24,000
whose source is logo.gif.

279
00:15:24,000 --> 00:15:28,000
And what again was the motivation for having this alt attribute,

280
00:15:28,000 --> 00:15:31,000
this alternative attribute?

281
00:15:31,000 --> 00:15:33,000
Yeah.

282
00:15:33,000 --> 00:15:35,000
[inaudible student response]

283
00:15:35,000 --> 00:15:37,000
Good, so 2 reasons really, if the browser can't pull up the image

284
00:15:37,000 --> 00:15:40,000
because you have a slow network connection or the image is corrupted

285
00:15:40,000 --> 00:15:44,000
or something like that at least the human can see "CS50 search,"

286
00:15:44,000 --> 00:15:46,000
and then also for accessibility reasons.

287
00:15:46,000 --> 00:15:48,000
If you have a user who is blind and is using a screen reader

288
00:15:48,000 --> 00:15:50,000
and therefore obviously can't see images they can at least

289
00:15:50,000 --> 00:15:52,000
hear text if their computer speaks it to them.

290
00:15:52,000 --> 00:15:56,000
>> In general, this is best practice when it comes to the accessibility of pages

291
00:15:56,000 --> 00:16:00,000
so that even users in that situation can hear or see, so to speak,

292
00:16:00,000 --> 00:16:03,000
what it is that's on your page.

293
00:16:03,000 --> 00:16:05,000
There's one other thing that I did here

294
00:16:05,000 --> 00:16:09,000
which is a little interesting, and we'll see more about this in problem set 7

295
00:16:09,000 --> 00:16:12,000
via one of the shorts led by one of the teaching fellows.

296
00:16:12,000 --> 00:16:15,000
But #content refers to the tag

297
00:16:15,000 --> 00:16:20,000
whose ID is content, but then there's a space character, and then there's the word input.

298
00:16:20,000 --> 00:16:25,000
Well, what's interesting about CSS is that you can 

299
00:16:25,000 --> 00:16:29,000
refer to tags in a page sort of hierarchically,

300
00:16:29,000 --> 00:16:33,000
and what this snippet of CSS means is find the tag 

301
00:16:33,000 --> 00:16:37,000
whose ID is content, and then apply the following properties

302
00:16:37,000 --> 00:16:42,000
to all of the input tags that are descendents of content,

303
00:16:42,000 --> 00:16:44,000
that is that are indented inside of it.

304
00:16:44,000 --> 00:16:48,000
Indentation, again, is only important to the computer, not to the human,

305
00:16:48,000 --> 00:16:51,000
but by convention we indent things as we go deeper into a page,

306
00:16:51,000 --> 00:16:54,000
so this means apply a margin of 5 pixels to any input element

307
00:16:54,000 --> 00:16:57,000
that's somewhere inside of or nested inside of

308
00:16:57,000 --> 00:16:59,000
 the element whose ID is content. 

309
00:16:59,000 --> 00:17:01,000
>> Who does that apply to?

310
00:17:01,000 --> 00:17:03,000
Well, there's actually just these 2 guys here.

311
00:17:03,000 --> 00:17:05,000
Notice that inside of the form there's 2 inputs, 

312
00:17:05,000 --> 00:17:07,000
as there's been for all of these examples.

313
00:17:07,000 --> 00:17:11,000
But notice that those 2 inputs happen to be nested inside, 

314
00:17:11,000 --> 00:17:13,000
albeit a little deeply, a couple layers of indentation,

315
00:17:13,000 --> 00:17:16,000
inside of the tag whose ID is content.

316
00:17:16,000 --> 00:17:18,000
What does this mean?

317
00:17:18,000 --> 00:17:21,000
If we go to the browser here you can see ever so slightly—

318
00:17:21,000 --> 00:17:23,000
let me zoom in—that there is a bit of padding between the button

319
00:17:23,000 --> 00:17:25,000
and between the text field.

320
00:17:25,000 --> 00:17:27,000
>> Let me temporarily turn that off.

321
00:17:27,000 --> 00:17:30,000
Let me go up to my CSS, and let me go ahead and just

322
00:17:30,000 --> 00:17:34,000
change this margin from 5 pixels to 0 pixels.

323
00:17:34,000 --> 00:17:37,000
Let me go ahead then and save the file, go back to the search engine

324
00:17:37,000 --> 00:17:40,000
and reload, and watch the middle of the page.

325
00:17:40,000 --> 00:17:43,000
Everything got compressed together, and when I first whipped this example up

326
00:17:43,000 --> 00:17:46,000
I thought that looked stupid with the text field and then the button immediately below it.

327
00:17:46,000 --> 00:17:50,000
I wanted to pad it a little bit, so I introduced margins.

328
00:17:50,000 --> 00:17:55,000
What we won't do in lecture is go through the several dozen

329
00:17:55,000 --> 00:17:58,000
CSS properties that exist because, again, there are things like font size,

330
00:17:58,000 --> 00:18:02,000
font weight, margin, text align, and a few dozen others,

331
00:18:02,000 --> 00:18:06,000
and we'll refer you in problem set 7 to various tutorials online 

332
00:18:06,000 --> 00:18:08,000
and references that allow you to pick these things up.

333
00:18:08,000 --> 00:18:10,000
But what's really important at the end of the day

334
00:18:10,000 --> 00:18:12,000
>> is to understand how these things are applied.

335
00:18:12,000 --> 00:18:15,000
Again, if we have the style tag inside of which

336
00:18:15,000 --> 00:18:19,000
can go the selectors, the sort of identifiers that specify 

337
00:18:19,000 --> 00:18:21,000
to whom do you want to apply these properties,

338
00:18:21,000 --> 00:18:24,000
and then you put the properties as key value pair

339
00:18:24,000 --> 00:18:28,000
separated by a colon and then ended with a semicolon,

340
00:18:28,000 --> 00:18:32,000
or you can rip all of that out and put it in a separate CSS file

341
00:18:32,000 --> 00:18:35,000
unto itself.

342
00:18:35,000 --> 00:18:39,000
All right, any questions on the concepts

343
00:18:39,000 --> 00:18:41,000
or the big picture of CSS?

344
00:18:41,000 --> 00:18:43,000
You'll again see more of it in pset 7, 

345
00:18:43,000 --> 00:18:47,000
but we'll keep it generally pretty simple.

346
00:18:47,000 --> 00:18:49,000
No? All right.

347
00:18:49,000 --> 00:18:51,000
It's time for an actual programming language,

348
00:18:51,000 --> 00:18:54,000
and we'll come back to a little bit of CSS in the form of an example.

349
00:18:54,000 --> 00:18:58,000
PHP is actually a wonderfully accessible language

350
00:18:58,000 --> 00:19:02,000
in that it is syntactically almost equivalent to C.

351
00:19:02,000 --> 00:19:06,000
In other words, if you know C, you know for the most part PHP,

352
00:19:06,000 --> 00:19:08,000
at least syntactically, even though there are some new features

353
00:19:08,000 --> 00:19:10,000
and some new concepts we'll have to look at. 

354
00:19:10,000 --> 00:19:13,000
>> But for the most part, now that we transition from C to PHP

355
00:19:13,000 --> 00:19:16,000
most of the new stuff is really in the big picture,

356
00:19:16,000 --> 00:19:19,000
how you use a language to program on the Web as opposed to

357
00:19:19,000 --> 00:19:23,000
at the command line or in a blinking prompt as we've been doing thus far.

358
00:19:23,000 --> 00:19:27,000
For reference, especially with pset 7 and the final project onward,

359
00:19:27,000 --> 00:19:31,000
do take advantage of this URL here if you'd like to read up on the formalities of PHP.

360
00:19:31,000 --> 00:19:34,000
It's actually like a free online textbook effectively,

361
00:19:34,000 --> 00:19:37,000
and you'll also find that what's really nice about PHP

362
00:19:37,000 --> 00:19:41,000
is that there are hundreds of functions that come with it,

363
00:19:41,000 --> 00:19:44,000
whereas in C you didn't necessarily have access to

364
00:19:44,000 --> 00:19:47,000
more functions than were in the math library, the CS50 library.

365
00:19:47,000 --> 00:19:51,000
In PHP and a lot of modern languages, Python and Ruby among them,

366
00:19:51,000 --> 00:19:54,000
you get access to so many more functions, which means you get to write

367
00:19:54,000 --> 00:19:57,000
a lot less code because you can stand on the shoulders of other people 

368
00:19:57,000 --> 00:19:59,000
who have already written certain things for you.

369
00:19:59,000 --> 00:20:03,000
>> Let's take a quick tour of the syntax of PHP and then write a few examples.

370
00:20:03,000 --> 00:20:06,000
What's nice about PHP first and foremost

371
00:20:06,000 --> 00:20:08,000
is there's no main function.

372
00:20:08,000 --> 00:20:10,000
If you want to write a program in PHP you just start writing code,

373
00:20:10,000 --> 00:20:12,000
and you don't have to worry about main.

374
00:20:12,000 --> 00:20:14,000
There's no int. There's no return.

375
00:20:14,000 --> 00:20:17,000
There's no argv, argc that's required when you write the program.

376
00:20:17,000 --> 00:20:20,000
Rather you can just start writing code, and this is in part

377
00:20:20,000 --> 00:20:23,000
because PHP is what's called an interpreted language.

378
00:20:23,000 --> 00:20:26,000
C was compiled, and it was compiled in the sense that you start

379
00:20:26,000 --> 00:20:29,000
with source code, run it through Clang, which is a compiler,

380
00:20:29,000 --> 00:20:33,000
and eventually after some number of steps you get object code, 0s and 1s.

381
00:20:33,000 --> 00:20:36,000
PHP and Python and Ruby and Pearl and others

382
00:20:36,000 --> 00:20:39,000
are different types of languages in that you don't compile them.

383
00:20:39,000 --> 00:20:42,000
You don't go from source code to 0s and 1s.

384
00:20:42,000 --> 00:20:45,000
You just run the source code, and you run the source code

385
00:20:45,000 --> 00:20:49,000
by writing in a usual text file, ending in .php in this case

386
00:20:49,000 --> 00:20:53,000
instead of .c, and what the program does on your computer

387
00:20:53,000 --> 00:20:57,000
is it literally interprets your code line by line by line.

388
00:20:57,000 --> 00:21:00,000
>> In other words, rather than write a program and run the program

389
00:21:00,000 --> 00:21:04,000
directly you instead write a program with a file ending in .php.

390
00:21:04,000 --> 00:21:09,000
Then you run an actual program called php.exe, if you're on Windows,

391
00:21:09,000 --> 00:21:12,000
or just PHP if you're on Mac OS or Linux,

392
00:21:12,000 --> 00:21:17,000
and you provide as input to the PHP program your own source code,

393
00:21:17,000 --> 00:21:20,000
and its purpose in life is to read your code top to bottom, left to right,

394
00:21:20,000 --> 00:21:23,000
and do whatever you've told it to do.

395
00:21:23,000 --> 00:21:25,000
>> Let's see what this is going to mean syntactically.

396
00:21:25,000 --> 00:21:27,000
In PHP we have conditions. 

397
00:21:27,000 --> 00:21:29,000
This slide is identical to what you saw back in week 1

398
00:21:29,000 --> 00:21:33,000
because syntactically conditions, ifs and else ifs and else in PHP

399
00:21:33,000 --> 00:21:35,000
look exactly like this.

400
00:21:35,000 --> 00:21:38,000
When it comes to boolean expressions they're going to look exactly like this.

401
00:21:38,000 --> 00:21:43,000
When it comes to anding things together as booleans it's going to look exactly like this.

402
00:21:43,000 --> 00:21:46,000
Switches look the same, and you get the added benefit in PHP

403
00:21:46,000 --> 00:21:51,000
that switches in C could only switch on a char or an int.

404
00:21:51,000 --> 00:21:53,000
You could not switch on a string value.

405
00:21:53,000 --> 00:21:55,000
In PHP you can actually have an expression

406
00:21:55,000 --> 00:21:58,000
that is a variable whose contents are a string,

407
00:21:58,000 --> 00:22:01,000
and you can actually do string comparison in the real intuitive way,

408
00:22:01,000 --> 00:22:06,000
not pointer comparison, in order to decide whether to do case i or j or something else.

409
00:22:06,000 --> 00:22:09,000
We'll see that potentially before long.

410
00:22:09,000 --> 00:22:11,000
>> Loops too wonderfully are the same.

411
00:22:11,000 --> 00:22:15,000
For loops have an initialization, a condition, and some number of updates.

412
00:22:15,000 --> 00:22:18,000
While loops also exist in PHP.

413
00:22:18,000 --> 00:22:21,000
Do while loops also exist in PHP, 

414
00:22:21,000 --> 00:22:26,000
and arrays exist in PHP, but here's where the syntax starts to get a little different,

415
00:22:26,000 --> 00:22:29,000
but the concepts are the same, and the concepts really are the same

416
00:22:29,000 --> 00:22:32,000
as they were in Week 0 with Scratch.

417
00:22:32,000 --> 00:22:34,000
First and foremost is the $ sign.

418
00:22:34,000 --> 00:22:37,000
This was a design decision in PHP whereby any variable

419
00:22:37,000 --> 00:22:41,000
in PHP by design starts with $ sign.

420
00:22:41,000 --> 00:22:46,000
There's no more X, Y, Z. It's now $X, $Y, $Z just because.

421
00:22:46,000 --> 00:22:49,000
It's something to keep in mind, and now on the right-hand side

422
00:22:49,000 --> 00:22:52,000
this looks similar to an array, 

423
00:22:52,000 --> 00:22:54,000
but we're using square brackets here.

424
00:22:54,000 --> 00:22:57,000
In PHP and in JavaScript, as we'll eventually see,

425
00:22:57,000 --> 00:23:01,000
to declare an array you do open square bracket and closed square bracket,

426
00:23:01,000 --> 00:23:04,000
and then you have a comma separated list of values, whether ints

427
00:23:04,000 --> 00:23:09,000
or strings or chars, whatever you want, inside of that expression there.

428
00:23:09,000 --> 00:23:11,000
>> Now, how did we do something like this in C?

429
00:23:11,000 --> 00:23:16,000
What was the syntax for statically declaring an array of known numbers?

430
00:23:16,000 --> 00:23:19,000
It was curly braces, so minor difference here, but in both PHP

431
00:23:19,000 --> 00:23:22,000
and eventually JavaScript it just uses square brackets, so really 

432
00:23:22,000 --> 00:23:25,000
the only interesting detail here is the $ sign for the variable name

433
00:23:25,000 --> 00:23:28,000
and also the square brackets, and there's one curious thing 

434
00:23:28,000 --> 00:23:32,000
that's been omitted as well on the left-hand side of the = sign.

435
00:23:32,000 --> 00:23:36,000
What's missing that we've been requiring for weeks now? Yeah.

436
00:23:36,000 --> 00:23:38,000
[inaudible student response]

437
00:23:38,000 --> 00:23:41,000
The size, so there's no mention of the size of the array.

438
00:23:41,000 --> 00:23:45,000
Frankly, there's no mention of square brackets on the left side 

439
00:23:45,000 --> 00:23:47,000
of the = sign, and what else is missing from the line?

440
00:23:47,000 --> 00:23:49,000
Yeah.>>[inaudible student response]

441
00:23:49,000 --> 00:23:52,000
The type, so what's interesting in particular about PHP

442
00:23:52,000 --> 00:23:56,000
is that it is not a strongly typed language as C is, 

443
00:23:56,000 --> 00:23:58,000
and that's strongly typed in the sense that you must say char,

444
00:23:58,000 --> 00:24:00,000
you must say int, you must say float.

445
00:24:00,000 --> 00:24:03,000
>> Anytime you want a variable you have to tell Clang what its type is.

446
00:24:03,000 --> 00:24:05,000
PHP is a little lazier.

447
00:24:05,000 --> 00:24:08,000
It's loosely typed in the sense that 

448
00:24:08,000 --> 00:24:11,000
you can have floats and chars and strings

449
00:24:11,000 --> 00:24:14,000
and ints and so forth, but the language itself 

450
00:24:14,000 --> 00:24:17,000
doesn't really care what you put inside of a variable.

451
00:24:17,000 --> 00:24:20,000
You do not have to inform it in advance what data type

452
00:24:20,000 --> 00:24:22,000
is going in a variable. 

453
00:24:22,000 --> 00:24:24,000
It's entirely up to you, so this is nice 

454
00:24:24,000 --> 00:24:27,000
in that you don't have to worry as much about data typing

455
00:24:27,000 --> 00:24:29,000
and worrying what your arguments are and so forth.

456
00:24:29,000 --> 00:24:32,000
This also means eventually functions in PHP are going to be able to return 

457
00:24:32,000 --> 00:24:36,000
either an int most of the time, and maybe once in a while

458
00:24:36,000 --> 00:24:40,000
they'll return a bool, a boolean false, for instance, to signify that something went wrong.

459
00:24:40,000 --> 00:24:44,000
This gives us some upsides, but it also will make us sort of by design

460
00:24:44,000 --> 00:24:47,000
a little bit lazier when it comes to data typing.

461
00:24:47,000 --> 00:24:50,000
>> What else is there to keep in mind here?

462
00:24:50,000 --> 00:24:54,000
Variables look quite like this, so $s = "hello, world."

463
00:24:54,000 --> 00:24:57,000
That's perhaps inferable from the previous example,

464
00:24:57,000 --> 00:24:59,000
and we have another type of loop.

465
00:24:59,000 --> 00:25:02,000
This one we'll actually see once in a while since it's quite handy,

466
00:25:02,000 --> 00:25:04,000
a foreach construct.

467
00:25:04,000 --> 00:25:11,000
In this case, the foreach loop takes inside of its parentheses 3 words typically,

468
00:25:11,000 --> 00:25:16,000
$ something first, which is what array do you want to iterate over the members of,

469
00:25:16,000 --> 00:25:19,000
then literally the keyword as, and then lastly, 

470
00:25:19,000 --> 00:25:21,000
another variable name that you get to choose.

471
00:25:21,000 --> 00:25:23,000
It can be foo, bar, or element,

472
00:25:23,000 --> 00:25:26,000
and what this construct does

473
00:25:26,000 --> 00:25:29,000
is if the $array contains 10 elements

474
00:25:29,000 --> 00:25:34,000
on every iteration of this array—sorry, on every iteration of this loop

475
00:25:34,000 --> 00:25:37,000
the variable called element is going to be updated 

476
00:25:37,000 --> 00:25:40,000
to be the first element in the array, then the second element in the array,

477
00:25:40,000 --> 00:25:44,000
then the third element of the array, thereby obviating the need

478
00:25:44,000 --> 00:25:46,000
to do the slightly annoying square bracket notation and 

479
00:25:46,000 --> 00:25:49,000
$i  in order to index into an array.

480
00:25:49,000 --> 00:25:53,000
PHP does all of that work for you and on every iteration

481
00:25:53,000 --> 00:25:55,000
just hands you the next element from the array

482
00:25:55,000 --> 00:26:01,000
without you having to know about or care about its numeric index location.

483
00:26:01,000 --> 00:26:04,000
>> And then lastly, for now, there's one other feature of PHP

484
00:26:04,000 --> 00:26:08,000
that's going to be hugely useful, especially when we start programming on the Web,

485
00:26:08,000 --> 00:26:10,000
and that's known as an associative array.

486
00:26:10,000 --> 00:26:13,000
The arrays that we know thus far as of 20 seconds ago

487
00:26:13,000 --> 00:26:17,000
and for the past 8 weeks are numerically indexed arrays,

488
00:26:17,000 --> 00:26:20,000
sort of traditional arrays where the indices are ints, 

489
00:26:20,000 --> 00:26:23,000
0, 1, 2, all the way on up.

490
00:26:23,000 --> 00:26:25,000
Associative arrays are a lot more powerful.

491
00:26:25,000 --> 00:26:28,000
They allow you to have arbitrary keys, 

492
00:26:28,000 --> 00:26:31,000
arbitrary indices and arbitrary values.

493
00:26:31,000 --> 00:26:34,000
Whereas in a traditional array it's 0, 1, 2, 

494
00:26:34,000 --> 00:26:37,000
in an associative array you can have an index

495
00:26:37,000 --> 00:26:41,000
or a key of foo whose value is bar. 

496
00:26:41,000 --> 00:26:46,000
You can then have another key whose name is baz and whose value is qux.

497
00:26:46,000 --> 00:26:49,000
>> Again, stupid computer science generic variable names here,

498
00:26:49,000 --> 00:26:55,000
but the point is that this array does not have bracket 0 or bracket 1.

499
00:26:55,000 --> 00:26:59,000
It's instead going to have bracket foo and bracket baz.

500
00:26:59,000 --> 00:27:03,000
This is a lot more versatile in that we're going to be able to associate

501
00:27:03,000 --> 00:27:07,000
words with other words, keys with values completely arbitrarily,

502
00:27:07,000 --> 00:27:12,000
and we're going to be able to get those values back in constant time

503
00:27:12,000 --> 00:27:14,000
because underneath the hood what an associative array 

504
00:27:14,000 --> 00:27:16,000
really is is a hash table.

505
00:27:16,000 --> 00:27:20,000
Recall that a hash table allows you to put in some input

506
00:27:20,000 --> 00:27:25,000
like put in the word David if you want to insert David into some kind of dictionary,

507
00:27:25,000 --> 00:27:27,000
and then you get back some value typically.

508
00:27:27,000 --> 00:27:29,000
In the case of speller, true or false.

509
00:27:29,000 --> 00:27:33,000
David or whatever word is in or is not in the dictionary.

510
00:27:33,000 --> 00:27:36,000
An associative array is really just a hash table, 

511
00:27:36,000 --> 00:27:38,000
but it's a much more user friendly incarnation of it.

512
00:27:38,000 --> 00:27:41,000
As we'll see, it's going to allow us to do some things

513
00:27:41,000 --> 00:27:43,000
very, very easily.

514
00:27:43,000 --> 00:27:45,000
>> Let's take a look at some basic PHP 

515
00:27:45,000 --> 00:27:47,000
examples and see what we can do with this language.

516
00:27:47,000 --> 00:27:51,000
Let me go ahead and open up in our source directory today

517
00:27:51,000 --> 00:27:54,000
a file called hello1.php.

518
00:27:54,000 --> 00:27:57,000
This file is more comment than it is actual code, 

519
00:27:57,000 --> 00:28:00,000
so let me actually remove all of the comments from the file

520
00:28:00,000 --> 00:28:05,000
and present to you perhaps the simplest PHP program right here.

521
00:28:05,000 --> 00:28:07,000
5 lines, and some of those are white space, 

522
00:28:07,000 --> 00:28:09,000
so notice some key differences here.

523
00:28:09,000 --> 00:28:12,000
The file is called hello1.php.

524
00:28:12,000 --> 00:28:16,000
The very first line, though, is <?php.

525
00:28:16,000 --> 00:28:18,000
Similar in spirit to HTML,

526
00:28:18,000 --> 00:28:21,000
that sequence of characters tells the computer

527
00:28:21,000 --> 00:28:25,000
"Hey, computer, here comes a program we're in in PHP."

528
00:28:25,000 --> 00:28:28,000
It makes sure it's not confused that it's some other language.

529
00:28:28,000 --> 00:28:30,000
Line 2 is an interesting white space.

530
00:28:30,000 --> 00:28:32,000
Line 3 is our old friend printf,

531
00:28:32,000 --> 00:28:34,000
this time in the context of PHP.

532
00:28:34,000 --> 00:28:37,000
PHP has its own version of printf which behaves exactly the same,

533
00:28:37,000 --> 00:28:39,000
so this is just going to print "hello, world."

534
00:28:39,000 --> 00:28:46,000
And then this opposite tag here, ?>, means that's it for my PHP code.

535
00:28:46,000 --> 00:28:48,000
>> Let's see how to run this.

536
00:28:48,000 --> 00:28:50,000
I'm going to go back to my terminal window here.

537
00:28:50,000 --> 00:28:52,000
I'm going to go into my PHP directory.

538
00:28:52,000 --> 00:28:56,000
Notice that we have a whole bunch of files, the first one of which is hello.php.

539
00:28:56,000 --> 00:29:01,000
Let me go ahead and run this, hello1.php, enter.

540
00:29:01,000 --> 00:29:03,000
Permission denied. Okay.

541
00:29:03,000 --> 00:29:06,000
How have we fixed things like this in the past?

542
00:29:06,000 --> 00:29:08,000
What's that?>>[inaudible student response]

543
00:29:08,000 --> 00:29:11,000
We need read and write, but let me do ls -l.

544
00:29:11,000 --> 00:29:14,000
Remember this somewhat cryptic output whereby hello1

545
00:29:14,000 --> 00:29:17,000
seems to be readable and writable by me

546
00:29:17,000 --> 00:29:19,000
but readable by everyone else.

547
00:29:19,000 --> 00:29:22,000
It turns out this actually isn't a step in the right direction.

548
00:29:22,000 --> 00:29:25,000
The difference, again, with an interpreted language

549
00:29:25,000 --> 00:29:27,000
is you don't run the program directly.

550
00:29:27,000 --> 00:29:30,000
You instead run an interpreter and hand it the code 

551
00:29:30,000 --> 00:29:33,000
that you've written so it can interpret it line by line.

552
00:29:33,000 --> 00:29:36,000
In this case, the interpreter or program I actually want to run

553
00:29:36,000 --> 00:29:38,000
is literally called PHP.

554
00:29:38,000 --> 00:29:41,000
>> Somewhere on this hard drive of the appliance there is a program

555
00:29:41,000 --> 00:29:45,000
someone else wrote called PHP, or on Windows php.exe.

556
00:29:45,000 --> 00:29:48,000
What I'm going to do here is I'm going to actually run PHP

557
00:29:48,000 --> 00:29:51,000
but give it as a command line argument the code that I wrote,

558
00:29:51,000 --> 00:29:54,000
and then I'll zoom out and hit enter.

559
00:29:54,000 --> 00:29:58,000
It runs my program for me, top to bottom, left to right.

560
00:29:58,000 --> 00:30:01,000
Let me go ahead and open up a slight variance of this.

561
00:30:01,000 --> 00:30:05,000
In hello2.php notice that this too

562
00:30:05,000 --> 00:30:08,000
is mostly comments, so let me get rid of those as a distraction,

563
00:30:08,000 --> 00:30:13,000
and what's clearly different now about this file?

564
00:30:13,000 --> 00:30:15,000
There's this new line, somewhat cryptic at the top.

565
00:30:15,000 --> 00:30:20,000
In line 1 it's #!/bin/php.

566
00:30:20,000 --> 00:30:24,000
Bin is a convention on Linux and Mac OS for binaries, 

567
00:30:24,000 --> 00:30:27,000
so /bin means this is a folder containing a bunch of binaries

568
00:30:27,000 --> 00:30:29,000
that is programmed, one of which is PHP.

569
00:30:29,000 --> 00:30:32,000
The #! is nicknamed shebang,

570
00:30:32,000 --> 00:30:35,000
which is the quick way of saying it, and what this means

571
00:30:35,000 --> 00:30:40,000
is that when you run this program now there's a hint at the top of the file

572
00:30:40,000 --> 00:30:44,000
that tells the computer what interpreter to use.

573
00:30:44,000 --> 00:30:47,000
>> It gets a little annoying if you had to tell your users and your customers

574
00:30:47,000 --> 00:30:50,000
"Hey, we wrote this program called hello1.php."

575
00:30:50,000 --> 00:30:54,000
All you have to do is forever run PHP and then the name of this program.

576
00:30:54,000 --> 00:30:58,000
Frankly, it would just be nicer to run hello1.php,

577
00:30:58,000 --> 00:31:00,000
and indeed, we can if we do the following.

578
00:31:00,000 --> 00:31:05,000
Let me go ahead and do ls -l, and notice in hello2 it's still just read write

579
00:31:05,000 --> 00:31:10,000
and then read read, so I cannot yet do this, hello2.php.

580
00:31:10,000 --> 00:31:15,000
But we introduced this ever so briefly last time, the chmod command.

581
00:31:15,000 --> 00:31:20,000
If I do chmod a+x, which means all plus executability,

582
00:31:20,000 --> 00:31:26,000
and then hello2.php and then do ls -l again notice what changed.

583
00:31:26,000 --> 00:31:29,000
One, Linux is showing me the file name in green to convey the idea

584
00:31:29,000 --> 00:31:32,000
that it's executable, but more importantly, on the left-hand side

585
00:31:32,000 --> 00:31:36,000
notice that the bit representing x for executable has now been set.

586
00:31:36,000 --> 00:31:42,000
What this now means is I can run ./hello2.php as usual,

587
00:31:42,000 --> 00:31:45,000
hit enter, and because of the shebang at the very top of the file

588
00:31:45,000 --> 00:31:48,000
that's a hint, again, to Linux that says 

589
00:31:48,000 --> 00:31:51,000
use this interpreter to run this file.

590
00:31:51,000 --> 00:31:54,000
Don't worry about forcing the user to actually type it.

591
00:31:54,000 --> 00:31:57,000
>> And what's nice now is it's kind of irrelevant to my customers or my friends

592
00:31:57,000 --> 00:32:01,000
what language I wrote this program in, so I can go ahead with mv

593
00:32:01,000 --> 00:32:04,000
and rename this thing to hello2, for instance.

594
00:32:04,000 --> 00:32:07,000
And now if I do ./hello2

595
00:32:07,000 --> 00:32:10,000
and zoom out my program continues to run.

596
00:32:10,000 --> 00:32:13,000
These file extensions are a human convention that's necessary 

597
00:32:13,000 --> 00:32:15,000
for something like Clang and Make who look for them.

598
00:32:15,000 --> 00:32:18,000
But for PHP, I could call this file extension anything I want.

599
00:32:18,000 --> 00:32:22,000
I could trick the world into thinking that I'm really good at Ruby,

600
00:32:22,000 --> 00:32:25,000
and I could write hello2.rb and then run this,

601
00:32:25,000 --> 00:32:28,000
and voila, now I have the Ruby version, which is a complete lie. 

602
00:32:28,000 --> 00:32:30,000
But the file extensions are meaningless

603
00:32:30,000 --> 00:32:35,000
if the file is executable and has this special hint at the top of the file.

604
00:32:35,000 --> 00:32:38,000
>> Now, as an aside, let me show you quickly version 3, 

605
00:32:38,000 --> 00:32:40,000
which is sort of a useful trick to know.

606
00:32:40,000 --> 00:32:45,000
In hello3 I did something slightly wrong

607
00:32:45,000 --> 00:32:47,000
that I'll update the source code online.

608
00:32:47,000 --> 00:32:50,000
In version 3 it turns out that on most Linux computers

609
00:32:50,000 --> 00:32:53,000
there's a program called env for environment,

610
00:32:53,000 --> 00:32:56,000
and what you can do here is if you have no idea where PHP

611
00:32:56,000 --> 00:33:00,000
is installed on the local hard drive, because indeed it could vary based on the computer

612
00:33:00,000 --> 00:33:03,000
that someone is using, env just says run env,

613
00:33:03,000 --> 00:33:07,000
which is on most systems, and figure out where PHP is.

614
00:33:07,000 --> 00:33:11,000
Just a common trick so you don't have to worry about finding out where a program is.

615
00:33:11,000 --> 00:33:14,000
But if you do care to find out where a program is and you haven't cared thus far

616
00:33:14,000 --> 00:33:16,000
you can use the which command.

617
00:33:16,000 --> 00:33:19,000
>> Let me zoom out and type which php,

618
00:33:19,000 --> 00:33:23,000
and notice it tells me it's actually in usr/bin/php.

619
00:33:23,000 --> 00:33:25,000
It's kind of a lie. It's also in bin.

620
00:33:25,000 --> 00:33:27,000
It's just showing me the first hit.

621
00:33:27,000 --> 00:33:31,000
If you ever wondered where Clang is, which Clang, that's in usr/bin/clang,

622
00:33:31,000 --> 00:33:34,000
which make, usr/bin/make, and what that means is all this time

623
00:33:34,000 --> 00:33:38,000
you could have been typing usr/bin/clang enter to run Clang,

624
00:33:38,000 --> 00:33:41,000
but it's kind of tedious to do that, so some folders

625
00:33:41,000 --> 00:33:44,000
like usr/bin and bin are assumed to be defaults

626
00:33:44,000 --> 00:33:50,000
so the computer knows to look in them for you.

627
00:33:50,000 --> 00:33:53,000
Any questions on writing a super, super simple Hello World program 

628
00:33:53,000 --> 00:33:55,000
in PHP and then running it?

629
00:33:55,000 --> 00:33:59,000
Because now we'll start to introduce more compelling syntax.

630
00:33:59,000 --> 00:34:01,000
All right, here we go.

631
00:34:01,000 --> 00:34:03,000
These programs we've seen actually all of them before.

632
00:34:03,000 --> 00:34:07,000
>> If I open up, for instance, let's do beer1.php,

633
00:34:07,000 --> 00:34:09,000
we won't go through several versions of this, but what I did 

634
00:34:09,000 --> 00:34:13,000
was I sat down and poured it or converted

635
00:34:13,000 --> 00:34:15,000
my C code to PHP code here.

636
00:34:15,000 --> 00:34:18,000
Most of the top of the file is comments up here.

637
00:34:18,000 --> 00:34:20,000
It turns out there's one new function we need called readline.

638
00:34:20,000 --> 00:34:23,000
GetString, recall, from Week 0 onward was a CS50 thing.

639
00:34:23,000 --> 00:34:27,000
PHP comes with its own user-friendly function called readline

640
00:34:27,000 --> 00:34:30,000
that takes 1 argument which specifies the prompt

641
00:34:30,000 --> 00:34:33,000
that you want to show to the user, and what readline does

642
00:34:33,000 --> 00:34:35,000
is it returns whatever the user types in.

643
00:34:35,000 --> 00:34:39,000
In this case, I'm declaring a variable called $n.

644
00:34:39,000 --> 00:34:42,000
I'm storing in it the return value of readline

645
00:34:42,000 --> 00:34:44,000
after prompting the user with this string.

646
00:34:44,000 --> 00:34:47,000
Just to back up, to actually run this thing, let me go ahead

647
00:34:47,000 --> 00:34:50,000
and run php beer1.php.

648
00:34:50,000 --> 00:34:53,000
How many bottles will there be? Let's just do 2 this time.

649
00:34:53,000 --> 00:34:55,000
Enter. That's all.

650
00:34:55,000 --> 00:34:59,000
>> The program is functionally identical to the C version from weeks ago.

651
00:34:59,000 --> 00:35:01,000
But syntactically let's see what's different.

652
00:35:01,000 --> 00:35:05,000
After I get an int from the user notice that I'm doing some error checking,

653
00:35:05,000 --> 00:35:08,000
and if n is less than 1 I quit and I print out 

654
00:35:08,000 --> 00:35:11,000
a sorry message to the user and exit with 1.

655
00:35:11,000 --> 00:35:13,000
This too is a little different.

656
00:35:13,000 --> 00:35:16,000
 In C what did we do? In C we returned 1. 

657
00:35:16,000 --> 00:35:20,000
In PHP you exit with 1, which frankly is I think a little more intuitive

658
00:35:20,000 --> 00:35:22,000
because you're literally exiting the program.

659
00:35:22,000 --> 00:35:25,000
All right, and then down here the annoying song is identical syntactically 

660
00:35:25,000 --> 00:35:29,000
except for the variable, so down here in line 24 onward

661
00:35:29,000 --> 00:35:31,000
notice my for loop is almost the same,

662
00:35:31,000 --> 00:35:34,000
but I have $ in front of i and n,

663
00:35:34,000 --> 00:35:37,000
and what is also missing from line 26 that we've had in the past

664
00:35:37,000 --> 00:35:39,000
when declaring a variable i?

665
00:35:39,000 --> 00:35:41,000
There's no type. 

666
00:35:41,000 --> 00:35:43,000
It is incorrect in PHP to say int.

667
00:35:43,000 --> 00:35:45,000
You simply do not need to do that.

668
00:35:45,000 --> 00:35:48,000
The computer, the interpreter PHP is smart enough to realize

669
00:35:48,000 --> 00:35:51,000
that if you put a number in $I it will treat it

670
00:35:51,000 --> 00:35:53,000
as a number for you.

671
00:35:53,000 --> 00:35:57,000
And then down here we plug in $i, $i, $i - 1.

672
00:35:57,000 --> 00:36:00,000
All of that is the same, and then down here we do a "Wow, that's annoying" printf

673
00:36:00,000 --> 00:36:02,000
and then exit(0).

674
00:36:02,000 --> 00:36:05,000
>> Again, the takeaway here is that even though we're going to spend relatively

675
00:36:05,000 --> 00:36:09,000
little time on PHP, certainly versus what we did on C,

676
00:36:09,000 --> 00:36:12,000
it's almost the same, and so what we'll do today and next week

677
00:36:12,000 --> 00:36:14,000
and beyond is focus really on some of the new ideas.

678
00:36:14,000 --> 00:36:17,000
Just to see that one other thing does translate over from C,

679
00:36:17,000 --> 00:36:20,000
this was a super simple program we did in Week 1 

680
00:36:20,000 --> 00:36:22,000
or 2 that cubed a value.

681
00:36:22,000 --> 00:36:25,000
But what was interesting at the time about this program is that it 

682
00:36:25,000 --> 00:36:28,000
introduced the notion of a custom written function that we ourselves wrote.

683
00:36:28,000 --> 00:36:31,000
The syntax in PHP is almost the same.

684
00:36:31,000 --> 00:36:33,000
Here's my program up top.

685
00:36:33,000 --> 00:36:35,000
Notice again absent is any notion of main.

686
00:36:35,000 --> 00:36:39,000
I start writing code, and this is what's going to get executed by the interpreter.

687
00:36:39,000 --> 00:36:42,000
I print out x is now 2, presumably.

688
00:36:42,000 --> 00:36:44,000
Then I claim cubing...

689
00:36:44,000 --> 00:36:47,000
Then I call the cube function and pass in $x

690
00:36:47,000 --> 00:36:50,000
and assign the return value to $x.

691
00:36:50,000 --> 00:36:53,000
Then I claim that it's cubed, and then I say this, which hopefully 

692
00:36:53,000 --> 00:36:55,000
will say x is now 8.

693
00:36:55,000 --> 00:36:59,000
The syntax for the function in PHP is ever so slightly different.

694
00:36:59,000 --> 00:37:01,000
Again missing is the return type.

695
00:37:01,000 --> 00:37:05,000
Again missing is the return type and also missing is what other type?

696
00:37:05,000 --> 00:37:07,000
[inaudible student response]

697
00:37:07,000 --> 00:37:10,000
Well, okay, that's good. Let's come back to that in a second.

698
00:37:10,000 --> 00:37:12,000
>> We don't have, for instance, int here.

699
00:37:12,000 --> 00:37:15,000
We don't, for instance, have int here because, again, in PHP

700
00:37:15,000 --> 00:37:18,000
you simply don't need to and should not do that,

701
00:37:18,000 --> 00:37:20,000
but rather there's this new keyword called function.

702
00:37:20,000 --> 00:37:23,000
In PHP it's almost a little clearer because when you want a function 

703
00:37:23,000 --> 00:37:26,000
you literally say function, you give it a name and then a comma separated list

704
00:37:26,000 --> 00:37:28,000
if any of its arguments.

705
00:37:28,000 --> 00:37:32,000
No need to say void or anything like that, and then return is the same,

706
00:37:32,000 --> 00:37:35,000
$a * $a * $a.

707
00:37:35,000 --> 00:37:38,000
What is also missing? Sammy pointed this out here.

708
00:37:38,000 --> 00:37:43,000
At the top of the file completely absent in PHP also is a prototype.

709
00:37:43,000 --> 00:37:45,000
This too is by design.

710
00:37:45,000 --> 00:37:48,000
Languages and interpreters like PHP are smarter than C ever was

711
00:37:48,000 --> 00:37:50,000
in compilers like Clang.

712
00:37:50,000 --> 00:37:53,000
>> Recall that Clang, if you didn't tell it that cube exists,

713
00:37:53,000 --> 00:37:56,000
if you didn't tell it that printf exists as with a prototype

714
00:37:56,000 --> 00:38:00,000
or with a #include, well, it was going to yell at you and not even compile your code.

715
00:38:00,000 --> 00:38:03,000
PHP and more modern languages are a lot smarter when it comes to this.

716
00:38:03,000 --> 00:38:07,000
They will take it upon themselves to read through all of your code

717
00:38:07,000 --> 00:38:11,000
and then yell at you only if it finds cube nowhere.

718
00:38:11,000 --> 00:38:15,000
It doesn't matter if cube is at the bottom or the top or even in some separate file.

719
00:38:15,000 --> 00:38:18,000
PHP and similar languages are now smart enough to look ahead

720
00:38:18,000 --> 00:38:26,000
at everything before deeming you as having made a mistake.

721
00:38:26,000 --> 00:38:28,000
Where does that leave us?

722
00:38:28,000 --> 00:38:32,000
>> Let's do one last example here in conditions,

723
00:38:32,000 --> 00:38:35,000
and if I open up conditions2.php notice too

724
00:38:35,000 --> 00:38:37,000
syntax here is almost the same.

725
00:38:37,000 --> 00:38:40,000
I'm using readline instead of GetString, but that line is the same as before, 

726
00:38:40,000 --> 00:38:42,000
"I'd like an integer please."

727
00:38:42,000 --> 00:38:45,000
I then have an if condition, an else if, and then an else,

728
00:38:45,000 --> 00:38:48,000
but functionally this program is also identical to what we did weeks ago,

729
00:38:48,000 --> 00:38:51,000
so if I run this thing, php of conditions2, 

730
00:38:51,000 --> 00:38:54,000
and I give it a number like 23—

731
00:38:54,000 --> 00:38:57,000
I picked a positive number. If I give it -1 I picked a negative number.

732
00:38:57,000 --> 00:39:00,000
If I give it 0 I indeed picked 0.

733
00:39:00,000 --> 00:39:02,000
So who cares about all of this?

734
00:39:02,000 --> 00:39:06,000
Well, one of the fun sort of exercises here

735
00:39:06,000 --> 00:39:10,000
for me at least was to go back and see how quickly I could implement pset 5,

736
00:39:10,000 --> 00:39:12,000
the misspellings pset.

737
00:39:12,000 --> 00:39:15,000
Recall that there was this file called speller.c, 

738
00:39:15,000 --> 00:39:17,000
and there was a file called dictionary.c.

739
00:39:17,000 --> 00:39:20,000
What I did was I kind of spent a few minutes and I converted the C code

740
00:39:20,000 --> 00:39:23,000
to PHP code, and we won't spend much time on speller 

741
00:39:23,000 --> 00:39:26,000
because just like in pset 5 you didn't really need to 

742
00:39:26,000 --> 00:39:29,000
spend much time on speller itself because your attention was on dictionary.

743
00:39:29,000 --> 00:39:32,000
>> Suffice it to say that if you read through speller,

744
00:39:32,000 --> 00:39:35,000
this file here, it's pretty much equivalent to the C code

745
00:39:35,000 --> 00:39:37,000
we gave you for pset 5.

746
00:39:37,000 --> 00:39:39,000
I've just added some $ in places.

747
00:39:39,000 --> 00:39:43,000
I've changed certain function names if they didn't exist in PHP.

748
00:39:43,000 --> 00:39:45,000
There's one additional thing here, preg_match, 

749
00:39:45,000 --> 00:39:48,000
which is a little fancier way of doing something, but we'll come back to that eventually.

750
00:39:48,000 --> 00:39:51,000
But in short, speller is almost identical, and if you look at the very bottom

751
00:39:51,000 --> 00:39:54,000
what it eventually spits out is this here,

752
00:39:54,000 --> 00:39:57,000
words misspelled, words in dictionary, words in text.

753
00:39:57,000 --> 00:40:00,000
All right, so what's interesting now is the following.

754
00:40:00,000 --> 00:40:05,000
At the top of my file I am requiring dictionary.php.

755
00:40:05,000 --> 00:40:09,000
Just as C has #include PHP has a special function called require

756
00:40:09,000 --> 00:40:14,000
that pretty much does the same thing, require a file called dictionary.php.

757
00:40:14,000 --> 00:40:18,000
How can I go about implementing pset 5?

758
00:40:18,000 --> 00:40:21,000
Let me go ahead and open up a file here.

759
00:40:21,000 --> 00:40:24,000
Let me take a little reference here.

760
00:40:24,000 --> 00:40:29,000
And let me create a new file and start calling this dictionary.php.

761
00:40:29,000 --> 00:40:31,000
Let me put it in another folder so we can do this live.

762
00:40:31,000 --> 00:40:33,000
And now I'll zoom in.

763
00:40:33,000 --> 00:40:37,000
I'm going to start my PHP file with open bracket php closed bracket.

764
00:40:37,000 --> 00:40:40,000
And then in here there were a few functions I needed to implement for pset 5,

765
00:40:40,000 --> 00:40:42,000
so let me start implementing some of those,

766
00:40:42,000 --> 00:40:47,000
so function check, which had to take a word in as an argument.

767
00:40:47,000 --> 00:40:49,000
We'll do that and come back to it in a moment.

768
00:40:49,000 --> 00:40:53,000
>> There was function load, which took in what as an argument?

769
00:40:53,000 --> 00:40:56,000
Dictionary, so the file that I actually wanted to load.

770
00:40:56,000 --> 00:41:00,000
There was function size, which didn't take any arguments

771
00:41:00,000 --> 00:41:04,000
and there was function—what was the other?

772
00:41:04,000 --> 00:41:06,000
Unload, which didn't take any arguments either.

773
00:41:06,000 --> 00:41:10,000
These are the 4 functions that I would need to now implement in PHP,

774
00:41:10,000 --> 00:41:13,000
and what I'm going to do is go ahead and do this. 

775
00:41:13,000 --> 00:41:16,000
A lot of you used a hash table in pset 5,

776
00:41:16,000 --> 00:41:21,000
so let me go ahead and create a hash table in PHP.

777
00:41:21,000 --> 00:41:23,000
Done.

778
00:41:23,000 --> 00:41:25,000
That gives me a hash table. Well, why?

779
00:41:25,000 --> 00:41:30,000
One, the variable is called $table, just to conjure up the idea of a hash table.

780
00:41:30,000 --> 00:41:34,000
The square brackets, though, recall, represent what?

781
00:41:34,000 --> 00:41:37,000
An array, but in PHP arrays don't have to be numerically indexed.

782
00:41:37,000 --> 00:41:41,000
They can also be associative arrays,

783
00:41:41,000 --> 00:41:44,000
which means you can have arbitrary keys and values.

784
00:41:44,000 --> 00:41:49,000
>> Much like in pset 5, those of you who did hash table implementations

785
00:41:49,000 --> 00:41:53,000
you probably inserted the word and then inserted it into a chain of linked lists,

786
00:41:53,000 --> 00:41:56,000
or you stored the value of true somewhere or something to that effect.

787
00:41:56,000 --> 00:41:59,000
You somehow remembered the fact that the word was there.

788
00:41:59,000 --> 00:42:01,000
For now, that's going to be my hash table,

789
00:42:01,000 --> 00:42:06,000
and so now to go about implementing the check function 

790
00:42:06,000 --> 00:42:09,000
I just need to look inside of that hash table 

791
00:42:09,000 --> 00:42:11,000
and see if a word is there.

792
00:42:11,000 --> 00:42:15,000
What I'm going to do is I'm going to say if—

793
00:42:15,000 --> 00:42:20,000
let's say isset, which is a PHP function that literally just means is the key set,

794
00:42:20,000 --> 00:42:24,000
so isset($table[$word],

795
00:42:24,000 --> 00:42:29,000
and if so return true.

796
00:42:29,000 --> 00:42:32,000
That's it. That's pset 5 in PHP.

797
00:42:32,000 --> 00:42:34,000
Well, in fairness, okay.

798
00:42:34,000 --> 00:42:37,000
Else return false, so it's not there.

799
00:42:37,000 --> 00:42:39,000
What's really going on here?

800
00:42:39,000 --> 00:42:42,000
Well, if table—or hash table here more generally—

801
00:42:42,000 --> 00:42:46,000
is an associative array that means you can index into it

802
00:42:46,000 --> 00:42:50,000
with a word like "word," and you have to get back some value.

803
00:42:50,000 --> 00:42:52,000
>> We're kind of getting one step ahead of ourselves.

804
00:42:52,000 --> 00:42:56,000
It would be kind of nice if we actually loaded the file first,

805
00:42:56,000 --> 00:42:58,000
so load isn't quite as simple, but let me go ahead and whip up

806
00:42:58,000 --> 00:43:00,000
 a really quick implementation of load. 

807
00:43:00,000 --> 00:43:07,000
Let me go ahead and say words gets file dictionary.

808
00:43:07,000 --> 00:43:10,000
The file function in PHP opens a file

809
00:43:10,000 --> 00:43:12,000
and returns to you an array of all of the words in that file,

810
00:43:12,000 --> 00:43:14,000
just hands them to you.

811
00:43:14,000 --> 00:43:16,000
That was a big pain too, wasn't it?

812
00:43:16,000 --> 00:43:21,000
Now foreach, this is our new construct, foreach ($words as $word).

813
00:43:21,000 --> 00:43:25,000
This loop is going to start iterating over the array words

814
00:43:25,000 --> 00:43:30,000
and assign to the $ word variable each word in the file

815
00:43:30,000 --> 00:43:32,000
from the first to the second to the third to the fourth all the way

816
00:43:32,000 --> 00:43:35,000
so I don't have to do the annoying [i] notation and the like.

817
00:43:35,000 --> 00:43:38,000
And what I'm simply going to do for each of these words

818
00:43:38,000 --> 00:43:43,000
is store it in my table by indexing into table

819
00:43:43,000 --> 00:43:47,000
and then doing true because to remember 

820
00:43:47,000 --> 00:43:50,000
that a word is in my dictionary all I really have to do 

821
00:43:50,000 --> 00:43:55,000
is kind of flip a bit and say this word in my hash table is there, true.

822
00:43:55,000 --> 00:43:58,000
And if it's not there, I don't have to explicitly put false, 

823
00:43:58,000 --> 00:44:01,000
otherwise I'd have to put false for all possible words in the universe.

824
00:44:01,000 --> 00:44:05,000
>> It suffices for me just to set an index value

825
00:44:05,000 --> 00:44:09,000
to true if a word is actually in my hash table.

826
00:44:09,000 --> 00:44:12,000
Now, I'm cutting a couple of corners here that I'll wave my hands at for now,

827
00:44:12,000 --> 00:44:15,000
but now the load function is done.

828
00:44:15,000 --> 00:44:18,000
I load all the words from the file into an array.

829
00:44:18,000 --> 00:44:21,000
I iterate over that array, and for each word in the array

830
00:44:21,000 --> 00:44:24,000
I plug it into my hash table with 1 line of code.

831
00:44:24,000 --> 00:44:26,000
This is fun. You know how we can implement size now?

832
00:44:26,000 --> 00:44:28,000
Well, size is always pretty easy, in fairness.

833
00:44:28,000 --> 00:44:32,000
Here we can just do return count of table.

834
00:44:32,000 --> 00:44:34,000
That's pretty easy too, count the number of things in the table.

835
00:44:34,000 --> 00:44:36,000
That's actually kind of not the most efficient.

836
00:44:36,000 --> 00:44:39,000
I should probably have a variable called size so we can do it 

837
00:44:39,000 --> 00:44:41,000
in constant time, but that's pretty easy.

838
00:44:41,000 --> 00:44:45,000
Oh, and then unload, if we really want to be anal here

839
00:44:45,000 --> 00:44:47,000
we can say that's how you unload something.

840
00:44:47,000 --> 00:44:49,000
You just set the variable equal to an empty array,

841
00:44:49,000 --> 00:44:51,000
and it gets rid of everything that was there.

842
00:44:51,000 --> 00:44:53,000
No need to call free. 

843
00:44:53,000 --> 00:44:56,000
>> Again, I've cut some corners, and I apologize for assigning problem set 5

844
00:44:56,000 --> 00:45:00,000
perhaps in C, but if we now go ahead and run this,

845
00:45:00,000 --> 00:45:02,000
I'm going to actually run the version that I wrote in advance

846
00:45:02,000 --> 00:45:05,000
just so that I didn't make any syntactical mistakes whatsoever.

847
00:45:05,000 --> 00:45:08,000
Let me go ahead and run speller. The usage is the same.

848
00:45:08,000 --> 00:45:12,000
Here is a dictionary file which just contains the word foo.

849
00:45:12,000 --> 00:45:15,000
Here is a text file which just contains foo bar.

850
00:45:15,000 --> 00:45:19,000
Let's spell check this, so speller, using this dictionary file on this text file.

851
00:45:19,000 --> 00:45:21,000
There's one misspelled word, bar, and voila.

852
00:45:21,000 --> 00:45:23,000
Done with pset 5.

853
00:45:23,000 --> 00:45:30,000
Let's take a 5-minute break here, and we'll come back and more on PHP.

854
00:45:30,000 --> 00:45:32,000
All right, we are back.

855
00:45:32,000 --> 00:45:34,000
Let's do—hate me for a while.

856
00:45:34,000 --> 00:45:37,000
Let's now actually see if this wasn't a positive 

857
00:45:37,000 --> 00:45:39,000
actually implementing this thing in PHP.

858
00:45:39,000 --> 00:45:43,000
Granted, it took 45 seconds to implement.

859
00:45:43,000 --> 00:45:45,000
>> But let's go ahead now and run things.

860
00:45:45,000 --> 00:45:49,000
Let me go ahead and run a C version

861
00:45:49,000 --> 00:45:52,000
of speller, and we'll run it on one of the biggest files,

862
00:45:52,000 --> 00:45:54,000
which is the King James Bible.

863
00:45:54,000 --> 00:45:57,000
And that here is in—let's go into our C folder,

864
00:45:57,000 --> 00:46:01,000
speller on King James the 5th.

865
00:46:01,000 --> 00:46:03,000
A lot of misspelled words.

866
00:46:03,000 --> 00:46:06,000
Okay, so that's the output you probably got even if the times are a little different,

867
00:46:06,000 --> 00:46:09,000
if you got everything working correctly, and so time in total to spell check

868
00:46:09,000 --> 00:46:13,000
the King James Bible was .38 seconds, so pretty good using that implementation.

869
00:46:13,000 --> 00:46:16,000
Now let me go into the PHP version, which we just wrote.

870
00:46:16,000 --> 00:46:18,000
Let me run speller on King James.

871
00:46:18,000 --> 00:46:21,000
Whoops, ignore that error. I'm in the wrong directory.

872
00:46:21,000 --> 00:46:24,000
Speller on King James the 5th.

873
00:46:46,000 --> 00:46:48,000
Almost done. 

874
00:46:48,000 --> 00:46:51,000
>> Okay, the astute observer will realize that was more than 3 seconds there.

875
00:46:51,000 --> 00:46:54,000
That is the true running time.

876
00:46:54,000 --> 00:46:58,000
It turns out that it takes time to spit lots of text out

877
00:46:58,000 --> 00:47:00,000
because of buffering issues, but long story short,

878
00:47:00,000 --> 00:47:04,000
that was 3.15 seconds of machine time, CPU time,

879
00:47:04,000 --> 00:47:07,000
versus what was it a moment ago?

880
00:47:07,000 --> 00:47:09,000
Like .3.

881
00:47:09,000 --> 00:47:11,000
I mean, it's an order of magnitude slower, so where is that 

882
00:47:11,000 --> 00:47:14,000
ridiculous slowdown coming from?

883
00:47:14,000 --> 00:47:17,000
Well, as has been the case with most any design decision we've made

884
00:47:17,000 --> 00:47:21,000
in the class over the past 9 weeks there's almost always this tradeoff. 

885
00:47:21,000 --> 00:47:24,000
Sometimes between just space, sometimes between space and time,

886
00:47:24,000 --> 00:47:27,000
space, time and development effort, and indeed here, even though

887
00:47:27,000 --> 00:47:31,000
we saved a huge amount of time, maybe potentially 10-20-30 hours

888
00:47:31,000 --> 00:47:34,000
of development time implementing the spell checker

889
00:47:34,000 --> 00:47:36,000
by whipping it up in just 45 seconds with this language 

890
00:47:36,000 --> 00:47:40,000
the price we pay is that it's an order of magnitude slower as a result,

891
00:47:40,000 --> 00:47:43,000
and this is generally the case with most any interpreted language,

892
00:47:43,000 --> 00:47:46,000
PHP, Python, Ruby, Pearl or others whereby

893
00:47:46,000 --> 00:47:49,000
if you're going to run it through an interpreter and have it read your code

894
00:47:49,000 --> 00:47:52,000
line by line, top to bottom, left to right,

895
00:47:52,000 --> 00:47:55,000
that middleman is going to take some time of its own,

896
00:47:55,000 --> 00:47:59,000
and what you were feeling here in the 3 seconds as opposed to .3 seconds

897
00:47:59,000 --> 00:48:02,000
is the fact that there is this middleman who has to literally interpret our code

898
00:48:02,000 --> 00:48:05,000
line by line, and God forbid if you're inside of a loop 

899
00:48:05,000 --> 00:48:08,000
with a huge file containing hundreds of thousands of words.

900
00:48:08,000 --> 00:48:11,000
>> That overhead is going to add up and add up and add up and add up.

901
00:48:11,000 --> 00:48:16,000
For a tool like this it's probably not the best language to use for implementing

902
00:48:16,000 --> 00:48:20,000
a spell checker if immediacy is of interest to your users and to you.

903
00:48:20,000 --> 00:48:23,000
But the luxury we have in a moment is if you

904
00:48:23,000 --> 00:48:27,000
use a language like PHP or a lot of interpreted languages

905
00:48:27,000 --> 00:48:30,000
in the context of the Web, for that matter, you have the benefit

906
00:48:30,000 --> 00:48:34,000
that the internet is a lot slower than most computers.

907
00:48:34,000 --> 00:48:38,000
You have a GHz CPU in your computer, 2 GHz, maybe even more these days.

908
00:48:38,000 --> 00:48:41,000
But the reality is on the internet there is a high amount of latency

909
00:48:41,000 --> 00:48:45,000
whereby for a browser to talk to a server, even though we saw last week

910
00:48:45,000 --> 00:48:47,000
that that's pretty fast, half a millisecond or so,

911
00:48:47,000 --> 00:48:51,000
that too adds up, and if you're downloading things like an image

912
00:48:51,000 --> 00:48:54,000
or a Facebook photo or getting instant messages over Facebook chatter,

913
00:48:54,000 --> 00:48:57,000
Gchat or the like, all of these round-trip times

914
00:48:57,000 --> 00:49:00,000
between the browser and the server start to add up,

915
00:49:00,000 --> 00:49:03,000
which makes your particular choice of language in many cases

916
00:49:03,000 --> 00:49:07,000
not all that relevant, so you're fine using a slightly slower language

917
00:49:07,000 --> 00:49:10,000
like PHP or Python or Ruby

918
00:49:10,000 --> 00:49:13,000
but for which there are huge upsides to you and your colleagues 

919
00:49:13,000 --> 00:49:17,000
and your friends because you can implement things so, so much faster.

920
00:49:17,000 --> 00:49:20,000
And moreover, you have much less risk of certain security flaws.

921
00:49:20,000 --> 00:49:22,000
There's no pointers in PHP.

922
00:49:22,000 --> 00:49:25,000
There's no seg faults that you can easily induce

923
00:49:25,000 --> 00:49:27,000
in the same way you could in C.

924
00:49:27,000 --> 00:49:29,000
With C you're super close to the hardware.

925
00:49:29,000 --> 00:49:33,000
With PHP and similar languages you're sort of higher level, so to speak,

926
00:49:33,000 --> 00:49:37,000
with a lot of defenses between you and what's actually going on 

927
00:49:37,000 --> 00:49:39,000
inside the machine, and it's just a tradeoff.

928
00:49:39,000 --> 00:49:42,000
>> We have gotten to the point of having these more modern, high level languages

929
00:49:42,000 --> 00:49:47,000
like PHP because of the lessons learned in languages like PHP in C.

930
00:49:47,000 --> 00:49:50,000
But if you don't understand what's been going on underneath the hood all this time

931
00:49:50,000 --> 00:49:53,000
you certainly can't make the right design decisions,

932
00:49:53,000 --> 00:49:56,000
and certainly when it comes to working at a place like Facebook or Google

933
00:49:56,000 --> 00:49:59,000
or any of these places that are increasingly playing with large data sets

934
00:49:59,000 --> 00:50:01,000
even if you go back and do premed and are working with some MD

935
00:50:01,000 --> 00:50:04,000
on some large data set involving patients and doctors

936
00:50:04,000 --> 00:50:08,000
and the like using the right tools is hugely compelling

937
00:50:08,000 --> 00:50:11,000
because otherwise your analysis of some data set might take seconds,

938
00:50:11,000 --> 00:50:14,000
or it might literally take hours.

939
00:50:14,000 --> 00:50:17,000
This is just one example, not to frustrate you with how much more effort

940
00:50:17,000 --> 00:50:21,000
it was in C but to help you appreciate that when you do implement something in C

941
00:50:21,000 --> 00:50:24,000
you really understand, or in theory, really understand

942
00:50:24,000 --> 00:50:28,000
how everything is or should be working, and you have almost full control

943
00:50:28,000 --> 00:50:31,000
over what's going on underneath the hood, and with these higher level languages

944
00:50:31,000 --> 00:50:34,000
you have to relinquish more control to the people who invented them

945
00:50:34,000 --> 00:50:37,000
and are subject more to their design decisions than yours.

946
00:50:37,000 --> 00:50:41,000
But if we take for granted that the performance

947
00:50:41,000 --> 00:50:44,000
isn't quite as important on the Web because of these other issues,

948
00:50:44,000 --> 00:50:47,000
just network speeds are a little slower than CPU speeds anyway,

949
00:50:47,000 --> 00:50:50,000
so we can sort of afford to use a slightly slower language

950
00:50:50,000 --> 00:50:55,000
if the upsides are we can develop things 10 times faster or even more.

951
00:50:55,000 --> 00:50:57,000
>> Let's see how we can start using this.

952
00:50:57,000 --> 00:51:00,000
Let me go into a folder

953
00:51:00,000 --> 00:51:03,000
among today's examples called frosh.ims, 

954
00:51:03,000 --> 00:51:06,000
and this was actually personally motivated by the fact that the very first thing

955
00:51:06,000 --> 00:51:10,000
I wrote for the Web years ago after taking CS50 and CS51

956
00:51:10,000 --> 00:51:14,000
was a website for the Frosh IMs program, freshman intramural sports,

957
00:51:14,000 --> 00:51:16,000
which at the time this was enough years ago that at the time 

958
00:51:16,000 --> 00:51:19,000
there was no website for the program, even though there was a Web,

959
00:51:19,000 --> 00:51:22,000
and instead there was a proctor in Wigglesworth whereby if you wanted

960
00:51:22,000 --> 00:51:26,000
to register for volleyball or soccer or whatever you would fill out a piece of paper.

961
00:51:26,000 --> 00:51:28,000
You would then walk across the yard.

962
00:51:28,000 --> 00:51:31,000
You would then knock on their door and slide in their door or hand to the proctor

963
00:51:31,000 --> 00:51:34,000
a piece of paper with your name on it, whether or not you want to be a team captain,

964
00:51:34,000 --> 00:51:37,000
what sport you wanted to do, and what dorm you were in.

965
00:51:37,000 --> 00:51:39,000
It was sort of an old school way of doing things, and this was a prime  

966
00:51:39,000 --> 00:51:41,000
opportunity to automate a lot of this process.

967
00:51:41,000 --> 00:51:43,000
You just go to the website. You type something in.

968
00:51:43,000 --> 00:51:46,000
You get an email confirmation, and boom, you're done.

969
00:51:46,000 --> 00:51:49,000
>> This was the very first thing I did, albeit in a language called Pearl,

970
00:51:49,000 --> 00:51:52,000
but it's relatively easy to do in PHP, and this is sort of representative

971
00:51:52,000 --> 00:51:55,000
of the problems you can start solving when you can express yourself 

972
00:51:55,000 --> 00:51:58,000
programmatically and don't have to rely on things like Google sites

973
00:51:58,000 --> 00:52:01,000
or Excel or tools that are handed to you.

974
00:52:01,000 --> 00:52:03,000
You guys now have the ability to do things like this.

975
00:52:03,000 --> 00:52:06,000
This is a super ugly version of a form,

976
00:52:06,000 --> 00:52:09,000
but let's just use it for the beginning of the conversation whereby this is 

977
00:52:09,000 --> 00:52:12,000
roughly what the form looked like years ago for us

978
00:52:12,000 --> 00:52:14,000
to enable people on the Web to sign up for Frosh IMs.

979
00:52:14,000 --> 00:52:18,000
We asked for a name, a checkbox for whether or not they wanted to be captain,

980
00:52:18,000 --> 00:52:21,000
male or female, and then what dorm they were in, 

981
00:52:21,000 --> 00:52:23,000
and then they would submit this form.

982
00:52:23,000 --> 00:52:27,000
Let's first look underneath the hood at the HTML that represents this webpage.

983
00:52:27,000 --> 00:52:31,000
Let me go into froshims0, 

984
00:52:31,000 --> 00:52:35,000
and as an aside, for pset 7 I'm taking for granted

985
00:52:35,000 --> 00:52:37,000
the directories and the folders that I'm putting things in.

986
00:52:37,000 --> 00:52:40,000
We'll walk you through exactly where stuff has to go in the appliance, 

987
00:52:40,000 --> 00:52:43,000
which mod commands you have to run, so don't worry about all of the

988
00:52:43,000 --> 00:52:46,000
stupid details syncing in from the get-go here.

989
00:52:46,000 --> 00:52:49,000
>> All right, here's froshims0.php.

990
00:52:49,000 --> 00:52:52,000
Let me scroll down, and what's curious here, 

991
00:52:52,000 --> 00:52:56,000
this is a PHP file, but what's inside of it, clearly?

992
00:52:56,000 --> 00:52:59,000
It's a whole lot of HTML, and indeed, PHP's origins

993
00:52:59,000 --> 00:53:02,000
really were for being a Web-centric language.

994
00:53:02,000 --> 00:53:04,000
A moment ago we used it to implement the beer example, 

995
00:53:04,000 --> 00:53:07,000
the conditions example, the hello example, and that's fine.

996
00:53:07,000 --> 00:53:11,000
You can use PHP as a scripting language

997
00:53:11,000 --> 00:53:15,000
where a script is really just the nomenclature given to a quick and dirty program

998
00:53:15,000 --> 00:53:19,000
or something that you write in a scripted or more generally an interpreted language.

999
00:53:19,000 --> 00:53:22,000
PHP is super useful for that because you've seen how quickly

1000
00:53:22,000 --> 00:53:24,000
relatively we can whip up programs in PHP.

1001
00:53:24,000 --> 00:53:27,000
But it was really designed to be used for the Web,

1002
00:53:27,000 --> 00:53:31,000
and designed for the Web in the sense that notice up here at the top of the file

1003
00:53:31,000 --> 00:53:34,000
I do begin with <?php.

1004
00:53:34,000 --> 00:53:38,000
Then I have a bunch of useless comments, granted, but then I close PHP mode.

1005
00:53:38,000 --> 00:53:41,000
But then I drop into HTML mode.

1006
00:53:41,000 --> 00:53:45,000
>> What's interesting about PHP is even though the file ends in .php

1007
00:53:45,000 --> 00:53:48,000
it's generally meant to be co-mingled with HTML,

1008
00:53:48,000 --> 00:53:50,000
some PHP code, some HTML.

1009
00:53:50,000 --> 00:53:53,000
And we'll see eventually that we can start to tease those apart

1010
00:53:53,000 --> 00:53:56,000
and keep our HTML separate from our PHP altogether,

1011
00:53:56,000 --> 00:53:59,000
but the origins of PHP really were to give you this flexibility,

1012
00:53:59,000 --> 00:54:02,000
that if you want some HTML just write it, and that will be

1013
00:54:02,000 --> 00:54:04,000
spit out identically to the browser.

1014
00:54:04,000 --> 00:54:07,000
But if you need some programming technique,

1015
00:54:07,000 --> 00:54:12,000
some programming code, you can also put it into the same exact file, as we'll soon see.

1016
00:54:12,000 --> 00:54:14,000
Here's my HTML. 

1017
00:54:14,000 --> 00:54:16,000
I've got a title of this for Frosh IMs.

1018
00:54:16,000 --> 00:54:20,000
I've got a body tag who has got some CSS on it to center everything in the middle,

1019
00:54:20,000 --> 00:54:23,000
and then down here I have a form which apparently is going to be submitted

1020
00:54:23,000 --> 00:54:27,000
to a new file called register0.php, so we'll see that in a moment.

1021
00:54:27,000 --> 00:54:31,000
It's using a method called post, which we'll come back to as well.

1022
00:54:31,000 --> 00:54:34,000
Then I have some form inputs, one called name, whose type is text,

1023
00:54:34,000 --> 00:54:37,000
one whose name is captain, whose type is checkbox, 

1024
00:54:37,000 --> 00:54:40,000
and this, we haven't seen it before, but it does exactly what it says.

1025
00:54:40,000 --> 00:54:42,000
You will get a checkbox instead of a text box.

1026
00:54:42,000 --> 00:54:46,000
Down here you have a radio button, which is one of those circular buttons

1027
00:54:46,000 --> 00:54:48,000
that you can either choose this one or that one.

1028
00:54:48,000 --> 00:54:52,000
>> Notice it's deliberate that I gave both radio buttons the name of gender.

1029
00:54:52,000 --> 00:54:55,000
This is how you get mutual exclusion whereby you must click 

1030
00:54:55,000 --> 00:54:58,000
either this one or that one, and by clicking the other 

1031
00:54:58,000 --> 00:55:01,000
it unchecks the other, so you have to give them the same name

1032
00:55:01,000 --> 00:55:03,000
if you want them to be mutually exclusive like that.

1033
00:55:03,000 --> 00:55:07,000
And then for dorm, I don't think we've seen this yet, but it's a select menu, a drop-down menu.

1034
00:55:07,000 --> 00:55:09,000
The tag for that is select.

1035
00:55:09,000 --> 00:55:11,000
You then give the drop-down menu a name, 

1036
00:55:11,000 --> 00:55:13,000
and then you have a whole bunch of these options. 

1037
00:55:13,000 --> 00:55:16,000
The first one, just for aesthetics, is an empty string.

1038
00:55:16,000 --> 00:55:20,000
I just wanted the drop down to be blank by default,

1039
00:55:20,000 --> 00:55:22,000
and then there's Apley, Canaday, Grays, and so forth.

1040
00:55:22,000 --> 00:55:24,000
And notice the dichotomy here.

1041
00:55:24,000 --> 00:55:27,000
The option in the drop down has a value, 

1042
00:55:27,000 --> 00:55:30,000
but then it has a human-friendly name, which in this example

1043
00:55:30,000 --> 00:55:33,000
is identical, but if we really wanted to be anal we could have

1044
00:55:33,000 --> 00:55:36,000
the value of this drop down just be the short version, 

1045
00:55:36,000 --> 00:55:39,000
Grays, but we could really say Grays Hall that the human actually sees,

1046
00:55:39,000 --> 00:55:43,000
but that's not all that interesting, so I just kept it simple and made them identical.

1047
00:55:43,000 --> 00:55:46,000
Then down at the bottom we have a submit button

1048
00:55:46,000 --> 00:55:49,000
which we have seen before, but notice I just gave it a different word.

1049
00:55:49,000 --> 00:55:53,000
Instead of CS50 search I gave the label "Register."

1050
00:55:53,000 --> 00:55:56,000
>> The end result is this webpage here, and again,

1051
00:55:56,000 --> 00:56:00,000
where does this get submitted to?

1052
00:56:00,000 --> 00:56:04,000
It gets submitted to some file, the value of the action attribute,

1053
00:56:04,000 --> 00:56:07,000
which was register0.php.

1054
00:56:07,000 --> 00:56:09,000
Let's see what actually happens here.

1055
00:56:09,000 --> 00:56:13,000
Let me go ahead and fill out this form, say David,

1056
00:56:13,000 --> 00:56:16,000
male, Matthews, and then I'll say register.

1057
00:56:16,000 --> 00:56:18,000
Let me zoom out and click register.

1058
00:56:18,000 --> 00:56:22,000
Okay, so kind of useless, but let's see what's actually going on.

1059
00:56:22,000 --> 00:56:26,000
Notice that the URL has changed to be register0.php.

1060
00:56:26,000 --> 00:56:34,000
What is curiously absent from the URL, though, even though we just submitted a form?

1061
00:56:34,000 --> 00:56:37,000
[inaudible student response]

1062
00:56:37,000 --> 00:56:39,000
Okay, that's just Chrome being user friendly these days.

1063
00:56:39,000 --> 00:56:42,000
That's actually there. They just hide it to save space.

1064
00:56:42,000 --> 00:56:44,000
But good thought, good thought.

1065
00:56:44,000 --> 00:56:46,000
Toward the other end of the URL, though, what's missing? Yeah.

1066
00:56:46,000 --> 00:56:48,000
[Student] The query string.

1067
00:56:48,000 --> 00:56:51,000
The query string, so recall from our simple Google search examples.

1068
00:56:51,000 --> 00:56:54,000
As soon as I click the submit button the URL 

1069
00:56:54,000 --> 00:57:00,000
took me to Google, but then there was ?q = computer science or whatever I had typed in.

1070
00:57:00,000 --> 00:57:04,000
That's because we used the get method with the search example.

1071
00:57:04,000 --> 00:57:06,000
>> This time we're using what method instead?

1072
00:57:06,000 --> 00:57:10,000
Post, and one of the immediate distinctions

1073
00:57:10,000 --> 00:57:14,000
between get and post is that post does not put the user's input in the URL.

1074
00:57:14,000 --> 00:57:16,000
It hides it. It still sends it.

1075
00:57:16,000 --> 00:57:19,000
In fact, what we're seeing in the browser here, as we'll reveal in a moment

1076
00:57:19,000 --> 00:57:22,000
by looking at register0, is I'm just seeing the contents 

1077
00:57:22,000 --> 00:57:25,000
of the array that were submitted from the browser to the server.

1078
00:57:25,000 --> 00:57:29,000
But the URL does not have a ?, does not have any keywords 

1079
00:57:29,000 --> 00:57:31,000
or values in it, and why is that?

1080
00:57:31,000 --> 00:57:35,000
Well, post allows you to still submit data from the form to a server,

1081
00:57:35,000 --> 00:57:38,000
but it doesn't put it in the URL, so what kind of information is post 

1082
00:57:38,000 --> 00:57:41,000
particularly appropriate for perhaps when you're asking the user to 

1083
00:57:41,000 --> 00:57:44,000
type in input to a form?

1084
00:57:44,000 --> 00:57:48,000
Something like a password, something like what else?

1085
00:57:48,000 --> 00:57:50,000
Credit card numbers.

1086
00:57:50,000 --> 00:57:53,000
Anything that's mildly sensitive you probably don't want ending up in the URL

1087
00:57:53,000 --> 00:57:56,000
if only because it means your roommate or family member can just troll through

1088
00:57:56,000 --> 00:57:59,000
your internet history and then literally see your passwords,

1089
00:57:59,000 --> 00:58:02,000
literally see your credit card numbers because most browsers

1090
00:58:02,000 --> 00:58:05,000
remember in the history whatever URLs you've been at,

1091
00:58:05,000 --> 00:58:09,000
so if only because that would be a bad idea.

1092
00:58:09,000 --> 00:58:11,000
Using post hides that detail from the user.

1093
00:58:11,000 --> 00:58:14,000
>> Also, how do you upload a photo to Facebook?

1094
00:58:14,000 --> 00:58:17,000
Well, the only 2 mechanisms you can really use,

1095
00:58:17,000 --> 00:58:21,000
even though there's a few other more arcane ones, is get and post.

1096
00:58:21,000 --> 00:58:26,000
How do you possibly upload a photo via a URL?

1097
00:58:26,000 --> 00:58:28,000
You can actually do it.

1098
00:58:28,000 --> 00:58:30,000
You can take a JPEG or bitmap or GIF and you can represent it in hexadecimal 

1099
00:58:30,000 --> 00:58:32,000
or something called base 64.

1100
00:58:32,000 --> 00:58:35,000
Instead of base 16 you use base 64, which essentially looks like

1101
00:58:35,000 --> 00:58:38,000
ASCII characters, and you can actually upload a photo via a URL

1102
00:58:38,000 --> 00:58:41,000
after a question mark, but there are generally size limits.

1103
00:58:41,000 --> 00:58:44,000
Most browsers force URLs to be no more than 1,000 characters, 

1104
00:58:44,000 --> 00:58:47,000
maybe 2,000 characters or the like, so you can't upload

1105
00:58:47,000 --> 00:58:50,000
a 10 MB Facebook photo.

1106
00:58:50,000 --> 00:58:54,000
For that you use post as well, so for now get puts the parameters in the URL,

1107
00:58:54,000 --> 00:58:57,000
which is nice and useful sometimes, but for anything sensitive or big

1108
00:58:57,000 --> 00:58:59,000
post is the way to go.

1109
00:58:59,000 --> 00:59:02,000
What is register0 actually doing here?

1110
00:59:02,000 --> 00:59:05,000
Well, if I open up register0 notice that this is a super simple page,

1111
00:59:05,000 --> 00:59:09,000
but it's demonstrating the fact that I can co-mingle, for better or for worse,

1112
00:59:09,000 --> 00:59:12,000
HTML with PHP.

1113
00:59:12,000 --> 00:59:15,000
This whole file, except for the comments at the top, are HTML

1114
00:59:15,000 --> 00:59:19,000
except for this guy here.

1115
00:59:19,000 --> 00:59:22,000
>> Notice in the middle of my PHP code,

1116
00:59:22,000 --> 00:59:26,000
in the middle of my HTML, I have sort of temporarily

1117
00:59:26,000 --> 00:59:28,000
entered PHP mode.

1118
00:59:28,000 --> 00:59:31,000
I'm calling a special function called print r.

1119
00:59:31,000 --> 00:59:34,000
It means print recursive, and what it does is it recursively prints 

1120
00:59:34,000 --> 00:59:38,000
whatever variable you hand it, semicolon, exit PHP mode.

1121
00:59:38,000 --> 00:59:40,000
And the pre tag gives you pre-formatted text,

1122
00:59:40,000 --> 00:59:43,000
mono space text so that every space you actually see it.

1123
00:59:43,000 --> 00:59:46,000
It doesn't disappear. What is post? 

1124
00:59:46,000 --> 00:59:48,000
Well, what's interesting and compelling about PHP

1125
00:59:48,000 --> 00:59:52,000
is that whenever you submit a form using get or post

1126
00:59:52,000 --> 00:59:56,000
anything that's submitted to you by a browser

1127
00:59:56,000 --> 01:00:00,000
PHP itself figures out what those key value pairs are,

1128
01:00:00,000 --> 01:00:02,000
figures out if there's equal signs, figures out if there's a question mark.

1129
01:00:02,000 --> 01:00:07,000
It does all the hard work for you, and then it hands you an associative array

1130
01:00:07,000 --> 01:00:10,000
containing everything that the user typed into the form.

1131
01:00:10,000 --> 01:00:12,000
Well, what fields did this form have?

1132
01:00:12,000 --> 01:00:14,000
>> It had 4 fields.

1133
01:00:14,000 --> 01:00:16,000
One was a text field called name.

1134
01:00:16,000 --> 01:00:18,000
One was a checkbox called captain.

1135
01:00:18,000 --> 01:00:22,000
One was a radio button called gender,

1136
01:00:22,000 --> 01:00:24,000
and one was a drop-down menu called dorm,

1137
01:00:24,000 --> 01:00:27,000
so notice when I print recursively 

1138
01:00:27,000 --> 01:00:29,000
the contents of this special variable.

1139
01:00:29,000 --> 01:00:34,000
This is a special global variable called literally $_POST, in all caps.

1140
01:00:34,000 --> 01:00:39,000
This is a special global variable that PHP just creates for you

1141
01:00:39,000 --> 01:00:42,000
and hands to you so that you can access everything

1142
01:00:42,000 --> 01:00:45,000
that was submitted via a form by a user.

1143
01:00:45,000 --> 01:00:48,000
And by calling print r on it—you wouldn't do this in a normal application.

1144
01:00:48,000 --> 01:00:50,000
We're doing this to see inside of this variable,

1145
01:00:50,000 --> 01:00:53,000
and what's inside of it, well, 4 keys, 

1146
01:00:53,000 --> 01:00:56,000
4 http parameters, so to speak,

1147
01:00:56,000 --> 01:00:59,000
name, captain, gender, dorm, and then the values that the user 

1148
01:00:59,000 --> 01:01:01,000
typed in with one exception.

1149
01:01:01,000 --> 01:01:03,000
I did type D-A-V-I-D. 

1150
01:01:03,000 --> 01:01:05,000
I checked the box, though, for male, which apparently submitted a value 

1151
01:01:05,000 --> 01:01:07,000
of just m to be succinct.

1152
01:01:07,000 --> 01:01:10,000
>> When I selected Matthews that's the value that got selected,

1153
01:01:10,000 --> 01:01:12,000
and this one is a little stupid, but it's the convention.

1154
01:01:12,000 --> 01:01:17,000
When I checked the box, a value of on, "on," got submitted for the checkbox.

1155
01:01:17,000 --> 01:01:21,000
If I hadn't checked it, no value would have been sent whatsoever.

1156
01:01:21,000 --> 01:01:26,000
This is just giving us insights into what's inside of this special global variable,

1157
01:01:26,000 --> 01:01:29,000
and it's so special that it's called a super global variable.

1158
01:01:29,000 --> 01:01:33,000
It exists everywhere for you within your code so that you can actually access it.

1159
01:01:33,000 --> 01:01:36,000
This is not that compelling, so let's actually use the super global

1160
01:01:36,000 --> 01:01:38,000
and actually try to register someone.

1161
01:01:38,000 --> 01:01:41,000
In froshims1 I'm going to make one change.

1162
01:01:41,000 --> 01:01:44,000
I'm changing the action to be register1.php,

1163
01:01:44,000 --> 01:01:46,000
and I'm doing one other thing.

1164
01:01:46,000 --> 01:01:48,000
I was kind of embarrassed by the quality of my webpage there.

1165
01:01:48,000 --> 01:01:52,000
It's pretty hideous, honestly, so it turns out

1166
01:01:52,000 --> 01:01:56,000
that you can use very easily on the Web

1167
01:01:56,000 --> 01:01:59,000
other people's JavaScript code, other people's CSS

1168
01:01:59,000 --> 01:02:02,000
that they've written and open sourced and made available as a library,

1169
01:02:02,000 --> 01:02:06,000
so to speak, and for instance, here I'm using a freely available library,

1170
01:02:06,000 --> 01:02:08,000
a bunch of code that someone else wrote.

1171
01:02:08,000 --> 01:02:11,000
>> Twitter happened to write this code, and it's called the bootstrap library,

1172
01:02:11,000 --> 01:02:15,000
and it's just a bunch of CSS style sheets, a bunch of .css files

1173
01:02:15,000 --> 01:02:19,000
that someone else wrote and figured out how to get everything nice and pretty

1174
01:02:19,000 --> 01:02:22,000
so that people like us can worry a little less about aesthetics and focus much more 

1175
01:02:22,000 --> 01:02:24,000
on the logic and the actual programming.

1176
01:02:24,000 --> 01:02:30,000
By linking it in with that tag, which is the same tag I used remember for styles3.css earlier,

1177
01:02:30,000 --> 01:02:34,000
I now have access to a file called bootstrap.min.css.

1178
01:02:34,000 --> 01:02:37,000
Min just means they've minified it and they've gotten rid of all the white space and so forth

1179
01:02:37,000 --> 01:02:40,000
just to make sure they're not sending me more bytes than I actually need.

1180
01:02:40,000 --> 01:02:45,000
But in there is a whole bunch of CSS, so if I now open up version 1 of Frosh IMs

1181
01:02:45,000 --> 01:02:49,000
notice that my file is definitely prettier.

1182
01:02:49,000 --> 01:02:54,000
Now it's still just black and white, but notice that by just using their style sheet

1183
01:02:54,000 --> 01:02:58,000
and using certain features of it on my form it's not amazing,

1184
01:02:58,000 --> 01:03:01,000
but it's definitely cleaner than it was before, and the projector is not doing it justice.

1185
01:03:01,000 --> 01:03:05,000
There's little gray lines around the buttons and around the text field right here,

1186
01:03:05,000 --> 01:03:07,000
but it's definitely cleaner than it was before.

1187
01:03:07,000 --> 01:03:09,000
>> Now, in fairness, I did have to change my markup a bit.

1188
01:03:09,000 --> 01:03:12,000
This is version 1, and notice that I've used a few new tags,

1189
01:03:12,000 --> 01:03:17,000
and honestly, I had no idea how to do this until I read the documentation

1190
01:03:17,000 --> 01:03:20,000
for Twitter's bootstrap library, and they told me if you want to use our library

1191
01:03:20,000 --> 01:03:23,000
use a fieldset element inside your form,

1192
01:03:23,000 --> 01:03:27,000
put the word you want to show next to a field inside of a label tag,

1193
01:03:27,000 --> 01:03:30,000
then give your input a name, just like before,

1194
01:03:30,000 --> 01:03:34,000
and then for the checkbox, not only do you wrap it in a label element,

1195
01:03:34,000 --> 01:03:36,000
you use something called a class, so we haven't seen this before,

1196
01:03:36,000 --> 01:03:39,000
but you'll see this in one of pset 7's shorts.

1197
01:03:39,000 --> 01:03:43,000
A class in CSS lets you do something very similar to the ID,

1198
01:03:43,000 --> 01:03:46,000
but before when we had an ID with the # symbol

1199
01:03:46,000 --> 01:03:48,000
that was for one and only one element.

1200
01:03:48,000 --> 01:03:51,000
What's nice about a class is that multiple elements can have the same class

1201
01:03:51,000 --> 01:03:54,000
or the same CSS stuff applied to it.

1202
01:03:54,000 --> 01:03:57,000
>> But again, more on those in the short, and the rest of this is just copy and paste

1203
01:03:57,000 --> 01:04:00,000
from their documentation where I've added a label here and there.

1204
01:04:00,000 --> 01:04:03,000
And at the end, because I've included the link tag at the top,

1205
01:04:03,000 --> 01:04:06,000
everything looks prettier automatically

1206
01:04:06,000 --> 01:04:10,000
by simply having marked up my page in a manner that 

1207
01:04:10,000 --> 01:04:12,000
Twitter expected, and there's so many different ways 

1208
01:04:12,000 --> 01:04:14,000
of doing this, and this is indeed very appropriate. 

1209
01:04:14,000 --> 01:04:17,000
At this point in the semester, as you'll see in pset 7's spec, 

1210
01:04:17,000 --> 01:04:20,000
Googling around, reading up on libraries, using other people's CSS

1211
01:04:20,000 --> 01:04:23,000
and JavaScript to solve ancillary problems

1212
01:04:23,000 --> 01:04:26,000
to the problem set itself is certainly encouraged and is the way

1213
01:04:26,000 --> 01:04:29,000
the Web is built these days, by standing on other people's shoulders

1214
01:04:29,000 --> 01:04:32,000
so that you can really focus on the new and interesting problems.

1215
01:04:32,000 --> 01:04:34,000
But let's now focus on, again, the logic.

1216
01:04:34,000 --> 01:04:38,000
>> That was a quick detour on aesthetics just to show you the direction in which you can go.

1217
01:04:38,000 --> 01:04:40,000
I'm going to revert back to the uglier one for now just because 

1218
01:04:40,000 --> 01:04:44,000
there's no distractions with Twitter stuff, and let me go ahead and open up

1219
01:04:44,000 --> 01:04:51,000
froshims2, which, again, differs only in the action, register2.php,

1220
01:04:51,000 --> 01:04:55,000
and let's take a look at what the effect is here.

1221
01:04:55,000 --> 01:04:57,000
Let me go ahead and type in David.

1222
01:04:57,000 --> 01:04:59,000
I won't be captain this time.

1223
01:04:59,000 --> 01:05:01,000
I'll say male, Matthews, register.

1224
01:05:01,000 --> 01:05:05,000
Damn it. Okay, that's a screw up on my part.

1225
01:05:05,000 --> 01:05:07,000
Stand by.

1226
01:05:07,000 --> 01:05:17,000
Register2, line 22, if empty or—sorry.

1227
01:05:17,000 --> 01:05:19,000
Let's reload.

1228
01:05:19,000 --> 01:05:22,000
Okay, upon submitting this form what just happened?

1229
01:05:22,000 --> 01:05:25,000
I typed in David, checked male, clicked Matthews, register.

1230
01:05:25,000 --> 01:05:27,000
You are registered. (Well, not really.)

1231
01:05:27,000 --> 01:05:32,000
This is clearly a step beyond just printing out the contents of some variable,

1232
01:05:32,000 --> 01:05:34,000
but what is this file actually doing?

1233
01:05:34,000 --> 01:05:37,000
In register2.php

1234
01:05:37,000 --> 01:05:40,000
notice that I have some new code.

1235
01:05:40,000 --> 01:05:44,000
Inside of my body tag I have essentially an if else construct,

1236
01:05:44,000 --> 01:05:47,000
but because I'm co-mingling this with some HTML

1237
01:05:47,000 --> 01:05:51,000
I have to enter and exit PHP mode back and forth, so let's see what I'm doing.

1238
01:05:51,000 --> 01:05:55,000
>> In the first line here I'm saying if it is the case

1239
01:05:55,000 --> 01:06:00,000
that the post super global is empty for the key of name,

1240
01:06:00,000 --> 01:06:04,000
so in other words, if the user did not give me a value for name in the form,

1241
01:06:04,000 --> 01:06:07,000
then empty is going to return true because the value is empty.

1242
01:06:07,000 --> 01:06:11,000
Or—notice the vertical bars—if gender is empty

1243
01:06:11,000 --> 01:06:15,000
inside of this special super global, which, again, represents the contents of the form,

1244
01:06:15,000 --> 01:06:19,000
or the dorm is empty, then I'm going to go ahead and yell at the user.

1245
01:06:19,000 --> 01:06:22,000
How? Well, notice I'm going to say you must provide your name, gender, and dorm.

1246
01:06:22,000 --> 01:06:24,000
Let's actually induce that mistake.

1247
01:06:24,000 --> 01:06:27,000
Let me go back to my form. Let me reload to clear it.

1248
01:06:27,000 --> 01:06:30,000
And I'm just going to give them David, and they don't need to know where I live.

1249
01:06:30,000 --> 01:06:33,000
Register. Apparently I do need to tell them where I live.

1250
01:06:33,000 --> 01:06:35,000
You must provide your name, gender and dorm. Go back.

1251
01:06:35,000 --> 01:06:39,000
>> And I could click to go back to that form, but why is that?

1252
01:06:39,000 --> 01:06:43,000
Well, in that case name was not empty, but gender was, and dorm was,

1253
01:06:43,000 --> 01:06:47,000
so this whole expression evaluated to true, and even though the syntax is a little new,

1254
01:06:47,000 --> 01:06:51,000
again, we enter PHP mode, familiar if statement, 

1255
01:06:51,000 --> 01:06:54,000
but the new part here is just this colon, and I had screwed up by omitting a parenthesis

1256
01:06:54,000 --> 01:06:57,000
by accident, but notice the colon, and that means

1257
01:06:57,000 --> 01:07:00,000
even though we're exiting PHP mode everything

1258
01:07:00,000 --> 01:07:03,000
that follows should be spit out verbatim to the browser

1259
01:07:03,000 --> 01:07:07,000
until you see an else block, as we do here, 

1260
01:07:07,000 --> 01:07:10,000
in which case you should instead spit this out

1261
01:07:10,000 --> 01:07:13,000
until you see the endif, so some slightly new syntax

1262
01:07:13,000 --> 01:07:16,000
that allows me to toggle between HTML and PHP.

1263
01:07:16,000 --> 01:07:19,000
We can clean this up eventually, but for now,

1264
01:07:19,000 --> 01:07:22,000
it's kind of a compelling way of error checking the form.

1265
01:07:22,000 --> 01:07:25,000
>> Now, I say you're not really registered because obviously we've done nothing but the data,

1266
01:07:25,000 --> 01:07:28,000
so let's actually try to do something cool.

1267
01:07:28,000 --> 01:07:33,000
In froshims3 the only difference is I'm going to submit to register3, 

1268
01:07:33,000 --> 01:07:35,000
so the HTML there is the same.

1269
01:07:35,000 --> 01:07:38,000
In register3 notice this.

1270
01:07:38,000 --> 01:07:40,000
This one is kind of sexy.

1271
01:07:40,000 --> 01:07:44,000
At the top I'm using a require statement, so this is like #include.

1272
01:07:44,000 --> 01:07:46,000
This time it's not stdio.h or anything like that.

1273
01:07:46,000 --> 01:07:50,000
It's a PHP library, and this one is called PHPMailer.

1274
01:07:50,000 --> 01:07:53,000
How did I know to include precisely this quoted string?

1275
01:07:53,000 --> 01:07:56,000
I read it in the documentation, so when they told me put this at the top of the file

1276
01:07:56,000 --> 01:08:00,000
if you want to use a special library called PHPMailer that does what it says.

1277
01:08:00,000 --> 01:08:03,000
It allows you to send email via PHP.

1278
01:08:03,000 --> 01:08:05,000
Now let's scroll down further.

1279
01:08:05,000 --> 01:08:08,000
>> Notice to begin I'm in PHP mode this whole time,

1280
01:08:08,000 --> 01:08:11,000
so now notice down here after importing that library,

1281
01:08:11,000 --> 01:08:13,000
 so to speak, I'm doing some sanity checks.

1282
01:08:13,000 --> 01:08:16,000
If it's the case that name is not empty

1283
01:08:16,000 --> 01:08:19,000
and gender is not empty—notice the exclamation points—

1284
01:08:19,000 --> 01:08:24,000
and dorm is not empty, then the user has logically filled out the form, at least enough. 

1285
01:08:24,000 --> 01:08:28,000
I don't care if they're captain or not. I just need their name, gender, and dorm.

1286
01:08:28,000 --> 01:08:31,000
If they have filled those out so that none of those fields are empty

1287
01:08:31,000 --> 01:08:33,000
this is slightly new syntax.

1288
01:08:33,000 --> 01:08:36,000
PHP, as an aside, is an object oriented programming language 

1289
01:08:36,000 --> 01:08:39,000
which some of you guys may recall from APCS or the like.

1290
01:08:39,000 --> 01:08:42,000
For now, if unfamiliar, just know that to use this library

1291
01:08:42,000 --> 01:08:45,000
you have to write a line of code like this using a new keyword,

1292
01:08:45,000 --> 01:08:47,000
literally a new keyword called new.

1293
01:08:47,000 --> 01:08:50,000
But beyond that, we have some familiar syntax.

1294
01:08:50,000 --> 01:08:54,000
It's an arrow operator, which is similar to what we used for structs in the context of pointers. 

1295
01:08:54,000 --> 01:08:57,000
For today PHP does not have pointers,

1296
01:08:57,000 --> 01:09:01,000
but know for now that inside of the mail variable

1297
01:09:01,000 --> 01:09:05,000
is essentially kind of a pointer to a special library

1298
01:09:05,000 --> 01:09:08,000
that someone else wrote, and if I want to access specific functionality 

1299
01:09:08,000 --> 01:09:12,000
inside of that library I do, like in C, use the arrow operator,

1300
01:09:12,000 --> 01:09:14,000
even though these are not actually pointers.

1301
01:09:14,000 --> 01:09:16,000
It's sort of PHP's own version thereof.

1302
01:09:16,000 --> 01:09:20,000
This means go into the library and call the IsSMTP function.

1303
01:09:20,000 --> 01:09:23,000
SMTP, recall, from our Warriors of the Net refers to email,

1304
01:09:23,000 --> 01:09:28,000
and that just means use an email server for this Frosh IMs registration.

1305
01:09:28,000 --> 01:09:30,000
>> What host do I want to use?

1306
01:09:30,000 --> 01:09:34,000
Well, Harvard, if you Google around, has an email server called smtp.fas.harvard.edu.

1307
01:09:34,000 --> 01:09:37,000
If you're playing along at home or you live on a Comcast network

1308
01:09:37,000 --> 01:09:40,000
it might be something like smtp.comcast.net.

1309
01:09:40,000 --> 01:09:43,000
It totally depends on where you live and who your ISP is.

1310
01:09:43,000 --> 01:09:47,000
After that I'm going to set my from address arbitrarily to be jharvard@cs50.net.

1311
01:09:47,000 --> 01:09:52,000
I'm then going to set the to address to be jharvard@cs50.net.

1312
01:09:52,000 --> 01:09:55,000
The only way I knew that these functions were called SetFrom and AddAddress

1313
01:09:55,000 --> 01:09:57,000
is, again, I read the documentation.

1314
01:09:57,000 --> 01:09:59,000
This is not sort of magically known to all programmers.

1315
01:09:59,000 --> 01:10:02,000
Then I set a subject to "registration."

1316
01:10:02,000 --> 01:10:07,000
And now this line is a bit ugly because what does the dot operator mean in PHP?

1317
01:10:07,000 --> 01:10:09,000
Anyone know?

1318
01:10:09,000 --> 01:10:11,000
Concatenate. 

1319
01:10:11,000 --> 01:10:14,000
In C it is a pain in the neck to concatenate 2 strings together.

1320
01:10:14,000 --> 01:10:17,000
You have to deal with malloc or realloc or all of that stuff

1321
01:10:17,000 --> 01:10:20,000
just to extend the length of a string.

1322
01:10:20,000 --> 01:10:22,000
In PHP, in JavaScript and other languages 

1323
01:10:22,000 --> 01:10:24,000
you can usually do this with a single character.

1324
01:10:24,000 --> 01:10:28,000
In this case, dot means take this string here

1325
01:10:28,000 --> 01:10:30,000
and append to it this string.

1326
01:10:30,000 --> 01:10:32,000
>> Oh, and by the way, append to it this string, 

1327
01:10:32,000 --> 01:10:34,000
which happens to be a variable inside of that super global.

1328
01:10:34,000 --> 01:10:37,000
Then append to it a new line, so all of these dots just mean

1329
01:10:37,000 --> 01:10:39,000
keep making a bigger and bigger and bigger string,

1330
01:10:39,000 --> 01:10:43,000
and you don't have to care at all about malloc or the like in a language like this,

1331
01:10:43,000 --> 01:10:46,000
and there's other ways to do this, but this is one of the quickest 

1332
01:10:46,000 --> 01:10:48,000
ways to lay it out.

1333
01:10:48,000 --> 01:10:50,000
What is this doing?

1334
01:10:50,000 --> 01:10:55,000
It's creating an email body that's going to say Name: Captain: Gender: Dorm:

1335
01:10:55,000 --> 01:10:58,000
all on separate lines, and then lastly,

1336
01:10:58,000 --> 01:11:00,000
one line of code, and I'm going to ignore this for now.

1337
01:11:00,000 --> 01:11:02,000
If ==false just means if something went wrong,

1338
01:11:02,000 --> 01:11:04,000
but the magic happens here.

1339
01:11:04,000 --> 01:11:08,000
Mail send means send this email.

1340
01:11:08,000 --> 01:11:10,000
Let's see what the net result is.

1341
01:11:10,000 --> 01:11:13,000
At the bottom of the file, notice it's going to say you are registered really 

1342
01:11:13,000 --> 01:11:15,000
if I get that far.

1343
01:11:15,000 --> 01:11:18,000
If, though, the user screws up, notice that we started this 

1344
01:11:18,000 --> 01:11:21,000
if condition up here, if it's not empty and not empty 

1345
01:11:21,000 --> 01:11:24,000
and not empty we send the mail. 

1346
01:11:24,000 --> 01:11:27,000
Otherwise we're going to send this line of code, 

1347
01:11:27,000 --> 01:11:30,000
which is going to have the effect, as you'll see in pset 7, of redirecting the user

1348
01:11:30,000 --> 01:11:35,000
back to where they came, froshims3.php.

1349
01:11:35,000 --> 01:11:38,000
>> Fingers crossed, otherwise this is going to be the most disappointing demo today.

1350
01:11:38,000 --> 01:11:40,000
Here we go.

1351
01:11:40,000 --> 01:11:42,000
Let me open up my email inbox for jharvard in Gmail. 

1352
01:11:42,000 --> 01:11:44,000
No email right now. All right.

1353
01:11:44,000 --> 01:11:53,000
Now let me open up froshims3, which is the third and last example we'll look at here.

1354
01:11:53,000 --> 01:11:55,000
Okay, here we go. 

1355
01:11:55,000 --> 01:12:00,000
Nate, he'll be captain, male, from, say, Apley.

1356
01:12:00,000 --> 01:12:04,000
Register. Okay, you are registered really.

1357
01:12:04,000 --> 01:12:07,000
Now if I scroll over to my email, oh, my God.

1358
01:12:07,000 --> 01:12:09,000
I have just dynamically sent an email on the Web.

1359
01:12:09,000 --> 01:12:11,000
>> Let's leave on that note.

1360
01:12:11,000 --> 01:12:16,000
A video is forthcoming for the lecture we missed. See you next week.

1361
01:12:16,000 --> 01:12:18,000
[CS50.TV]