>> ANDI PENG: We are almost through all the psets.
In fact, we're through the majority of the most difficult psets.
So we're actually just going to kind of breeze
through the next couple of weeks.
>> We're going to start talking about our final projects, the events coming up
in the next few weeks.
And life will be a breeze.
So not too much today.
>> Hopefully, will actually breeze through the agenda for today,
and then be out of here with some time to spare.
Also, I want to apologize for the lack of candy today.
I don't know why.
But in the week leading up Halloween, I would forget candy.
>> So I'm actually just a vast disappointment to you right now.
Because I literally remember candy for every single class, but Halloween.
But next week, I will bring double the amount of candy
to make up for that, all for you.
It'll be great.
>> So I have a couple of announcements regarding some scheduling.
I have some scheduling issues.
Then we're going to move on to talk about what's called chmod.
We're going to talk about quickly TCP/IP HTTP.
>> And then we're going to code our own website using HTML and CSS.
And then I'll actually leave maybe like 20 minutes to talk about pset6.
Because pset6 is actually a lot of stuff that we've already seen before,
but I wanted to refresh some of those concepts
as well as teach a couple new functions.
>> Cool.
So first of all, welcome back from break.
I hope you're break was enjoyable.
Would did you do for break?
AUDIENCE: Went to New York.
ANDI PENG: You went to New York?
I think half our school went to New York.
It's all right.
I spent most of my break sedentary in bed Netflixing.
And it was a good time.
>> But we are now back, back in session, back in the swing of things.
We have a pset due this Friday at noon.
>> I think you've already picked up your quiz, yeah?
So anyone else who has not had their quizzes,
please come and get your quizzes from me at the end of the section.
Or track me down on campus.
I'll have it with me somewhere.
>> Our final project pre-proposal also.
So for those of us who have never taken this class before, the capstone of CS50
is very much culminated in this grand project that students propose.
And the pre-proposal, just a general idea
of what one might want to do for their project, that idea is due Monday,
next Monday at noon.
>> So pretty much, David I think will talk more about this in lecture
if he hasn't already.
And there's a solid page on our website explaining
all the requirements of the project.
But essentially, pick any topic that you've
been interested in throughout your time here
at CS, whether it be gaming or design or video or anything.
>> And you can really kind of now apply some of the lessons
that we've learned here in CS50-- hi, welcome-- to pretty much conducting
a final project of your choice.
All that's due Monday is just a brief blurb via email
to me, a quick sentence, like, hey, Andi,
I'm really interested in designing a game that does this for iOS.
Cool.
Just let me your brief initial ideas for your final projects.
And we'll talk through whether or not that is actually a good idea or not,
if it's a feasible idea or not.
But just the pre-proposal is due next Monday.
pset6, our lovely web-- that is wrong.
Pset7?
pset6?
It's pset6, right?
>> pset6, our web server, is due Friday at noon with the late day.
Office hours resume normally from Monday to Thursday 8:00 to 11:00 this week.
I think Commons for the next three nights.
Cool.
Before we had into material, does anyone have any questions, jokes, stories?
What did you do for fall break?
>> AUDIENCE: What I do?
>> ANDI PENG: Already it's ages ago actually.
Christabel went to New York.
I stayed here and Netflixed.
AUDIENCE: Oh, yeah I was here.
ANDI PENG: Oh, OK.
AUDIENCE: I don't remember what specifically.
ANDI PENG: That's OK.
AUDIENCE: Netflixing probably.
ANDI PENG: Netflixing.
Yeah, it's a good time.
OK.
All right.
Any questions before we jump into material?
Also, we're going to try to speed through section today,
not too much to cover.
And hopefully, we'll get out here a bit early.
Sorry for not candy, also.
I'm a disappointment, especially during Halloween.
>> All right.
Cool.
So we're going to start talking about a command line argument called chmod.
chmod, all it is is just a Unix system call conducted from the command line
to change file permissions.
So for example, we've all encountered a page
like this probably sometime in our life span of being an internet
user, where our web server has given us the error of Forbidden.
You don't have permission to access, yadda, yadda, yadda, on this server.
All that really means is that the permissions
that were attached to whatever page you were trying to access
were not open to you.
So pretty much, chmod is the way in which
we can modify those system permissions to give everyone, the user, the group,
or the world, or any combination of those access
to certain files, directories, anything really,
any sort of system on an operating system.
So if any of guys have computers if you feel
like following along with me today, totally feel free to just type things
in.
If not, you can just hang out.
So I'm going to actually pull up my terminal right now.
>> So the command to run chmod, or at least just
to list the permissions of your file directory, is just ls-l.
As you can see, a bunch of stuff pops up most of which
is important to us on the left-hand side here.
You guys see a bunch of rs, ws, 1/.
Yeah.
>> Those are essentially just all the file permissions
to explain what certain directories and files within your system have.
So let's go back to the power point here.
So in addition to the file names as you guys can see on the right,
we are looking to see essentially just the column on the left.
So in addition to just the file names, we
can see the permissions of files, their owner group, the group name, the date
that the file was last modified, et cetera.
You can see a lot of things using chmod.
So the way that we read chmod is that the first letter we pretty much ignore
in terms of reading permissions.
>> The first letter just tells us what type of system we're accessing.
d, in this case, is a folder or directory.
So we know that currently my workspace section seven was a directory.
And then you see three triads, essentially just
three sets of three characters.
And you can think of each as a bit.
>> So you just have three sets of three bits, nine bits in total.
You treat them in groups of three.
So the first group of three is always your user permissions.
>> Your second group of three is always your group permissions.
And your third set of three is always like the world,
the everywhere permissions.
So I guess the easy question to ask is what is
the difference between user and group.
The main difference between user and group
is that a user is just you personally accessing whatever it is right now.
A group can be if you have multiple users on one computer, for example.
All of them can be treated as a group.
>> And then the world is just the world, everyone.
So we can see later on how we can modify those into different permissions.
So pretty much, we're going to still focus
on the part on the left, where for directory CS50 we see drwx,
where the r just means it's readable.
>> The w just means it's writable.
And then the x just means it's executable.
You'd think it kind of doesn't make sense.
It should be e.
But x actually kind of works a little better,
because you can remember it better.
>> So the three types of things you can do, you can either read a file,
you can have permission to write a file, or you could have permission
to execute a file.
And so the way that we actually represent those in bits
is the numbers 4, 2, and 1.
So anything that's readable is represented by the number of 4.
>> Anything that's writable is represented by 2.
And anything that's executable as represented by 1.
So in this sense, we can also represent these numbers--
hi, welcome, in a different way.
Sorry.
Before everyone, I'm going to apologize on behalf of everyone
entering the class now.
I forgot candy today.
I'm sorry I'm a failure this week of Halloween.
I will bring double the amount of candy next time to make up for it.
But anyways, sorry about that guys, sorry.
>> So the way that we can actually input on our command the argument is we
can do chmod group slash permissions, where the group is just whatever
group we're trying to change.
And the permissions are whatever we want to add to it.
So for example, the plus adds permissions,
and the subtract takes away permissions.
>> And the types of group we have our a for all, u for users, g for groups,
or o for others.
It's a bit abstract right now.
But we'll go over a couple examples just to demonstrate this real quick.
Everyone good on this slide, so I can move on?
Cool.
>> So for example, rwx.
Before we talk about what it represents, first of all what does rwx mean?
If you see that this certain file has permissions of rwx,
what does that mean the person could be able to do?
>> AUDIENCE: Read, write and execute.
>> ANDI PENG: Yeah, exactly.
You can read write and execute.
Because all three of those characters are present.
So if we go ahead and talk about this in terms of bits,
the rwx can also be represented as 700.
Because as you can see in any sort of file directory permission,
there's three triads.
>> In this case, only the first triad has anything there.
So in this case, the r is 4, the w is 2, and the x is 1.
If you add those together, it's 7.
>> And so if you convert it to binary, it's 700.
Because 7 is the first triad.
0, there's nothing present in the second triad.
And then there's nothing present in the third triad, so that's another 0.
>> So in the same sense, a bunch of triads can be represented just in bits, just
in binary as well.
So 700 means the exact same thing as rwx------ in terms of permissions.
Everyone clear on that?
Cool.
And so chmod 111 would give which permissions to the file?
Give you guys a couple seconds to convert this.
Remember, the first triad is for the user.
The second triad is for the group.
And the third triad is for everyone.
>> And so chmod 111 would give which type of permissions and to whom?
Take a couple seconds to think about it and come back.
Yeah.
>> AUDIENCE: So everyone can execute it.
ANDI PENG: Yup, exactly.
AUDIENCE: But nobody can read or write.
ANDI PENG: And feel free to explain to everyone
how you came to that conclusion.
>> AUDIENCE: Well, for the user, the group, and the world, it's all 1,
which is the code for executable.
>> ANDI PENG: Yeah, exactly.
So 1, in this case, all we know is that that is the executable code.
Because reading is 4.
Writing is 2.
And the executable is 1.
So is all three triads are 1, that means that to the world, to the user,
and to the group, they are all executable.
>> Everyone good with that?
OK.
And so the second way that we can actually
write this also is you could just do chmod
a plus x. a means all or everyone.
The plus means giving permissions to.
And then the x means executable.
So there's two commands are actually identical.
So if you want to run this in your terminal,
you do chmod 111, name of your directory or your file.
Or you can do chmod a plus x, name of your directory file.
Same thing, just an easier way, perhaps, for some to represent or change
file permissions.
>> Every one OK with chmod before we move on?
Cool.
So now we're going to head into a few slides of very abstract concepts
that I'm pretty much going to breeze through.
And it's totally OK if you don't understand everything.
>> Even now, I still don't really understand everything completely.
But it's more of getting the top level understanding
of how some of these things work.
So we're going to talk quickly about TCP/IP,
which is just Transmission Control Protocol slash Internet Protocol.
>> Recall from lecture, David, did he teach you
the example where he'd pass the notes in an envelope
up to like the top of the lecture hall?
So in the law school auditorium David demonstrated essentially
how TCP/IP works in the sense that all it
is is a means of ensuring that data has been delivered across a server
or on the internet.
So in the example of the envelope and the message, the user at the end
could see that, oh, I needed to receive four packets of information.
>> But I actually only received three.
That means I must be missing one.
And one wasn't delivered.
And so TCP/IP on the internet, through your computer and the server,
does the exact same thing.
All it does is specify a framework in which a lost data
packets can be resent and received.
>> Like on the internet when you're trying to access files online or send files
to your friend or look at web browsers, thousands and thousands
of billions and billions of bytes information
are transferred per millisecond.
And it's really, really confusing.
And it's really hard to actually know what's been sent
and what's not been sent.
>> And so TCP/IP just specifies a cohesive framework
in which your web browser and your server
can kind of communicate with each other, just
make sure that packets are all here and nothing's lost
and all the data that you requested is actually displaying properly.
Everyone OK on just that very brief high level understand?
Cool.
>> So then we're going to move into talking about HTTP, which
is just Hypertext Transfer Protocol.
HTTP, all it is is whatever any page or file is accessed on your website,
the server returns an HTTP status code in response
to the request making sure that either, oh, this request went through.
And everything's displaying properly.
Or, oh, no, 404.
Something went wrong.
Oh, I can't display.
>> All it is is that whatever you're trying to access,
use as the user is trying to access, on the internet-- just making sure
that you either have successfully accessed whatever it was or not
successfully accessed whatever it was.
And so the HTTP status code just provides you
a means of being able to know whether or not it was successful or not.
So for example, an example request.
>> You can see here it's usually typically four lines.
We have a GET HTTP 1.1, which is just the method request URL, the protocol
version, the field name, and the field value.
So no need to completely memorize anything here.
Just kind of familiarize yourself with how these look.
>> In this example, the method request URL is just whatever request
you are sending the server.
Like, hey, server, I really want to access yadda, yadda, yadda, HTTP page.
The protocol version is just whatever version your host or your server
is using to access information.
>> The field name is the website or the URL that you're trying to access,
in this case, www.apple.com.
And the field value is just typically name, value.
And it can be any sort of combination of letters or numbers or whatever.
>> So a typical request, so what your computer actually
sends to the server that says, hey, you know what I need this displayed,
that's the kind of request that they actually receive.
An example response of what the server would send back to you
would be pretty much the same thing, except with a status code at the top.
So 200, 2 0 0 is always the status code for OK.
Like, OK, this request went through.
You were able to access everything correctly.
Life is good.
Life is fine.
Everything is totally good.
>> And so this just tells your browser and your server, hey, everything's good.
I got all the information I need.
Cool.
But the problem is sometimes problems come up
when you have-- last I think I talked about duplicates.
You have less good responses.
>> So for example, 404 is the Page Not Found.
You sometimes have a Forbidden access.
You have various other status codes that I'm
sure you've all seen when you're trying to do research on the internet.
And your browser gives you the, no, cannot access.
And you're like, well, crap.
>> So just pretty much, there's some pretty common status codes.
Maybe familiarize yourself with which ones those are.
The funniest one that I think I've ever heard
of-- if you happen to look up all of them
online, for some reason there's actually a real status code
called 418 I'm a teapot.
>> I googled where the origin of this was from.
And apparently one April Fools' Day a couple decades ago,
someone thought it would be hilarious to create a new status code called 418
I'm a teapot.
Legitimately, the name of this code is called I'm a teapot.
>> I forget what page you have to go to actually make this display.
But apparently, you can actually obtain a status code of I'm
a teapot somehow through doing something.
So there's hundreds and hundreds of status codes.
>> Some of them make more sense than others.
But pretty much just familiarize yourself with the most common ones.
The requested entity body is short and stout, apparently.
>> So sometimes there are more frightening errors than I'm a teapot.
But this is one that I guess you kind of hope to hit.
But I don't think you will.
Everyone good on just status codes, requests, processes, making
sure information is delivered properly?
>> So now we're going to transition into of a fun part of section today,
where we talk a little bit about HTML.
HTML, all it is HyperText Markup Language.
It's just the standard language you use to create all web
pages on the internet.
>> So any web page, what's your favorite web page?
What's your favorite web page?
>> AUDIENCE: [INAUDIBLE].
ANDI PENG: Sorry?
>> AUDIENCE: Tumblr.
>> ANDI PENG: Tumblr.
So Tumblr is written in HTML.
And so we'll actually go through and play around with some of these things
later on.
Pretty much everything you need to learn, to know,
to write HTML you can probably just Google on the internet.
>> HTML, it's not a program like C where you can create variables and do
cool things with it.
It's more of just, oh, this is how I want things to appear on my website.
And I'm just going to put it in.
And it's going to style it.
>> So HTML, in a sense, it's just like a formatting or template language.
It's a lot easier.
It's a lot easier to learn, a lot easier to write in
than your typical programming language, very easy,
very user accessible and friendly.
>> So we're actually going to play around, write our own pages today.
But before we begin, I just want to go over some brief best practices.
Because HTML is such an easy language and because even
if you do a couple things wrong, it sometimes may not notice,
we want to make sure that we're actually adhering to our best practices
to make sure that things that could be going around but
aren't always going to not go right make sure that they're minimized.
>> So pretty much, make sure your closing all your tags
when you're writing in HTML.
If you're opening a body, make sure you're
closing it with a body somewhere.
You want to make sure that your web page validates by using
what's called the W3 Validator.
You can just Google that online, and there's a link to it.
>> And then you want to separate HTML, which
is your markup language from your style, which is the CSS language that David
demonstrated that we're also going to play a bit with lecture.
Cool.
So anytime you want to run HTML on the CS50 appliance,
we're going to run a program called apache,
which all it is just a built in web server that everyone in CS50
has access to.
We call it apache50 just because we like to call everything 50 in CS50.
>> So the way that you start the CS50 web server is by typing on your command
line apache50 start dot.
And if you want to end it at any time, you do apache50 end no dot.
And you just hit Enter.
And it should be heading up here soon.
Yup.
So I'm just going to quickly go over an example of a really brief web page.
And we're going to spend like 10, 15 minutes playing
around writing our own web pages.
OK.
So here in the IDE-- can everyone see that?
Not, really.
Here, I'll zoom in.
>> I've just got this brief template here with nothing actually in it.
We're just going to quickly write an HTML program in which we just
say hello to the world.
So same thing as in C, now we're just going to do it in HTML.
Does anyone want to actually just try giving me the first thing you
would have to put in an HTML document?
Yeah.
>> AUDIENCE: The brackets, the [INAUDIBLE].
ANDI PENG: Yep.
So something that's very unique to HTML that we typically traditionally
don't encounter in other command line level programming languages
is that we actually to specify the type of file
that this is going to be at the top of our code.
So in this instance-- I think that's the right command, right?
Yup.
At the top, you just want to include bang DOCTYPE html in brackets just
to tell your computer, hey, look out.
And HTML document is coming.
And then how do we want to start off our file?
If we just want to say hello, have a web page that says hello to the world,
how do we go about building this?
>> Actually, let's turn to Google.
And we can actually do this.
Yup.
There we go.
So HTML.
As you can see, my browser is actually automatically styling this for me.
>> Same thing as in C, when you create an open curly brace,
your browser automatically adds in a close curly brace.
Luckily, our IDE loves to do this for us as well.
So now we can kind of type the beginning of a tag,
and it's going to always tell us to remember to type the end of the tag.
I think this needs to be capitalized.
And then we want to add, always, a head in which is the title.
We just want to maybe call this hello, and then body.
>> And there you go.
That is actually our HTML document.
So the way that any HTML document is always styled in-- same thing
with int main void.
You always want to have HTML an open and close tag
at the top and bottom of your code.
>> You want to have a head inside of which contains the title, just whatever
is going to display the tab of your web page, and then a body inside of which
will actually display the content of whatever you want to do.
So if you wanted to actually run this, I'm going to zoom back out.
You can actually start apache50 start dot.
Cool.
And so as you can see, now this link has popped up.
It says your site is now available at some link below.
So all our IDE has done-- not IDE, sorry-- yeah,
our IDE has done is create a web link upon which all of our web pages
can be accessed on the server.
So let's take a look here.
>> Let's click on this, go to hello.html.
And you see a very simple web page for hello world.
OK.
We're actually going to just have everyone-- yeah, what's up?
>> AUDIENCE: I have a basic question.
ANDI PENG: Yup.
AUDIENCE: How do you save your file as an HTML?
ANDI PENG: Yeah.
So if I were to create a new file, if I do New File, Untittle, if I do,
section.html, boom, that's all I have to do.
>> AUDIENCE: [INAUDIBLE]?
ANDI PENG: No.
AUDIENCE: [INAUDIBLE].
ANDI PENG: No.
AUDIENCE: [INAUDIBLE].
ANDI PENG: Yeah.
Pretty much, the extension on the file that is inside your IDE,
that tells the computer, that tells the browser, hey, look out.
This is going to be code written in this language.
So for example, in Microsoft Word, what do all Word documents
end with, what extension?
.doc or .docx, right?
>> All that does is specifies to your operating system, hey,
you've got a Word document coming up.
Open it with Word.
Same thing with PDFs.
It knows, oh, I need to open up this file
with Adobe Reader or Adobe Acrobat.
>> And so extensions operate the same way as in your computer.
If you specify your code page to be named HTML, then it knows,
oh, you've got HTML code.
I'm going to treat it as html code.
So it's super smart in that sense.
>> So everyone, let's take like 10 minutes and just create our own websites.
Let's add in the lovely things.
Feel free to say whatever you want.
I just want to make sure that everyone's servers are running correctly
before we free you into the pset.
Because if your servers don't run for the pset,
that will be really, really bad.
>> I'm just going to float around and see what everyone's working on.
How's it going?
>> AUDIENCE: I just turned on my computer.
>> ANDI PENG: That's OK.
>> AUDIENCE: [INAUDIBLE].
>> ANDI PENG: Just your IDE.
Yeah.
>> AUDIENCE: [INAUDIBLE].
>> ANDI PENG: It's OK.
>> AUDIENCE: [INAUDIBLE].
ANDI PENG: Totally fine.
Is everyone accessing their web server OK?
Is apache50 running OK?
I think in some of the other sections, we
had issues with people not being able to access the server.
Yeah.
So you just run apache50 space start space period.
AUDIENCE: [INAUDIBLE].
ANDI PENG: Yup.
Good?
>> AUDIENCE: [INAUDIBLE].
>> ANDI PENG: Oh, OK.
So you're supposed to have a space.
So apache50--
>> AUDIENCE: I did.
>> ANDI PENG: --start space.
AUDIENCE: Oh, space dot.
ANDI PENG: Yup, space dot.
There you go.
So then if you have an HTML page created,
then you can just go directly to the link that it specifies.
And you should be able to access it.
>> Everyone been able to access their web pages OK?
>> AUDIENCE: [INAUDIBLE].
ANDI PENG: Oh, that's OK.
>> AUDIENCE: [INAUDIBLE].
ANDI PENG: Yeah.
I think you can actually open it within your browser, browser
and not just your IDE browser.
Yeah, I think if you copy and paste it.
>> AUDIENCE: And then how do we turn it off?
[INAUDIBLE]
>> ANDI PENG: Yeah, you do apache50 stop with no period.
Yup.
>> AUDIENCE: [INAUDIBLE].
>> ANDI PENG: With no period.
Yeah.
There we go.
Yup.
We're creating our own web pages.
>> AUDIENCE: Oh, cool.
ANDI PENG: Yeah.
>> AUDIENCE: I have a question.
So apache 50--
>> ANDI PENG: 50, yeah.
>> AUDIENCE: [INAUDIBLE].
>> ANDI PENG: What?
That is weird.
See, that was kind of the issue that was happening before.
OK.
See me after section.
Because we are having some issues with the server.
>> And you want to make sure that your server is
running before starting the pset.
Because you're going to need it.
Yeah.
Is there anyone else that hasn't been able to get their server to start?
>> For those of you who want to add additional style to your web pages,
we can actually do what David did in lecture as well,
which is create an additional style sheet, which is a dot CSS, Cascading
Style Sheet and actually just add it in.
So for example, I've just created pretty much almost the exact same one
David did in lecture.
You can pretty much just do body.
>> You have what are called tags in which you can apply to IDE whatever section
you want within your actual to HTML page.
So the body of the page, you can do text align center.
And then I'll creative a tag called top inside
of which I want these things to happen, assign a larger pixel size
for the font.
I want the font weight to be bold.
And I want the color to be blue, just arbitrary
values that I decided to choose.
I can create another tag called middle.
Font size, make it a bit smaller.
And then I can create another tag called bottom where I want the font size
to be even smaller still.
>> And so pretty much this is just example of source code or source style sheets
that it's very easy to just Google.
If you say, oh, I want my font to be italicized and dark green,
you can probably Google, and then it will tell you
the appropriate tags or IDs to create.
And so the way that you would actually kind of have this in an HTML document
or use it is all you have to do here is at the head
add a link to the style sheet.
>> So you can just link href equals whatever the name of your style sheet
is.
And then the relationship is a style sheet.
So within any HTML document, as long as you include this dot CSS sheet,
you should be able to access and have the properties there.
>> So for example, here I've just create another example web page.
This is welcome to CS50 section Tuesdays from 2:00 to 3:30 with me.
And then I've added a lovely image that we potentially should be able to see.
>> So if you take a look here, if you go to style.html,
we created a web page with kittens.
Because kitten are awesome.
So adding an image is just img SRC link.
>> Pretty much, if there's any sort of feature
you want to add to your website-- so let's say,
you want to add a menu or a search bar or like
an image-- just Google how to do that.
And you just plop in that format.
And you can just pretty much just add it in.
It's really, really easy.
>> We are creating our own web pages right now.
If you want to--
>> AUDIENCE: [INAUDIBLE]
>> ANDI PENG: Sorry?
>> AUDIENCE: [INAUDIBLE].
>> ANDI PENG: Oh, the div is just a division
telling me that, oh, I have a certain section called
middle in which I'm applying my CSS tag, and then
my other division with the bottom.
That's all it's telling you.
Because it's nice to keep things neat in order,
so the program knows how exactly to run.
And think I can copy paste this into my actual browser as well.
It should be fine.
Yeah.
Yay.
So if everyone wants to just try creating a web page,
we'll take another two to three minutes.
I just want to make sure everyone's servers are running
and everyone has an idea of how to do that.
If you guys want to take out your computers.
Still not working?
>> AUDIENCE: I'm just [INAUDIBLE].
>> ANDI PENG: Maybe try update 50 as well.
Yeah.
AUDIENCE: [INAUDIBLE].
>> ANDI PENG: Yeah.
So the way that you start a new web server on the IDE is just
do apache50 space start space dot.
I just wanted to make sure everyone's servers are running OK.
>> AUDIENCE: Here, on the terminal?
ANDI PENG: Yeah.
AUDIENCE: [INAUDIBLE].
>> ANDI PENG: Apache.
Actually, I think you're running something already.
Yeah, you're actually running a different server.
Yeah, you're good.
As long as that's working, you're OK.
>> AUDIENCE: OK.
ANDI PENG: There's two ways to run servers.
So as long as one of the ways is working, it's all right.
We'll take another minute just to kind of finish up
the finishing touches of whatever web page you guys wanted to make.
>> Is everyone working by the way?
Everyone's servers are running besides for yours?
We'll figure that out.
And HTML's fairly simple.
So I think we're all good.
Yeah.
I'll come back.
>> AUDIENCE: [INAUDIBLE].
ANDI PENG: OK.
AUDIENCE: So it's just started to load up.
ANDI PENG: No worries.
So HTML, there's source code that will be online after section.
Also, David has a whole bunch online as well.
Just kind of glance over it to see how HTML pages are written.
It's fairly easy.
Anything you don't know, you pretty much just Google and you're good.
I just want to make sure that your servers are running.
>> AUDIENCE: Does it do this often?
>> ANDI PENG: It's never happened to me.
I didn't know it could even hibernate.
>> AUDIENCE: [INAUDIBLE].
ANDI PENG: I think everyone-- mine has never hibernated before.
And I don't know why.
It's weird.
>> AUDIENCE: [INAUDIBLE].
>> ANDI PENG: Is yours hibernating?
>> AUDIENCE: [INAUDIBLE].
ANDI PENG: Yeah.
AUDIENCE: It's OK.
So once it's open.
ANDI PENG: OK.
We'll deal with some server issues after section.
You should be fine.
Although, you want to make sure you get them resolved before you leave.
Because if your server's not running, then you're
not going to be able to do the pset, like any part of the pset.
So you want to make sure that that's working.
Cool.
All right.
Say goodbye kittens.
I spent a long time looking for that kitten picture to put on.
So, anyways.
>> AUDIENCE: [INAUDIBLE].
>> ANDI PENG: Sorry?
>> AUDIENCE: [INAUDIBLE].
ANDI PENG: I think it's on the website.
Like the spec?
>> AUDIENCE: [INAUDIBLE].
I think the spec is just online in week seven.
I think it's called pset6, even though we're on week seven, which
is a bit computing.
AUDIENCE: But I mean if you want to look at-- if you
want to pull up our version of the web site from our sever?
So like server.c is the pset, right?
If you want to look at this, like how it checks out?
ANDI PENG: Oh, so actually the pset, all we're doing
here is implementing-- here, I'll go over this briefly.
So for everyone that's just gotten to section, you guys are in luck.
There is very little material to actually cover today.
>> I'm just going to spend the next 20 minutes going over pset help.
Because there's some useful functions that will help your life.
And hopefully, we'll be out of here in like 20 minutes.
OK.
>> So pset7 is wrong.
Even though we're on week seven, it's actually pset6.
I'll change that.
All we're doing in pset6 is creating a web server.
That sounds super scary.
>> And especially for those of you who have already
looked at the distribution code, there's a lot of code, a lot of code.
But is totally OK.
Because the nitty gritty part of actually creating
the server is done by us.
All you're really asked to do in this pset
is just to do some string manipulation in file I/O. It's actually
like fairly simple.
>> So when you first download that-- who here has actually already downloaded
the pset and taken a look?
All right.
Yeah.
There's like 500 lines of code that you're going to be like,
what is going on?
And that's totally fine.
Make sure you watch the walk-throughs.
Because David and-- I don't know.
I don't think it's Zamyla's, this one.
But I think some other walk-throughs are fairly
helpful in terms of just letting you know
what is going on inside of your code.
>> And it's totally OK.
Because the four functions that you're asked to implement have actually
zero to do with the actual server.
All they have to do is just parsing different strings,
searching through strings, to make sure things are doing
what they're supposed to be doing.
>> So to that effect, there are some very, very useful functions,
especially for string manipulation, that we should all
go over that I thought I'd be very useful for you guys
to learn before attempting the pset.
And they're all contained within your string.h library.
There's probably more useful functions I haven't included here,
because I either never use them or perhaps I just didn't know they exist.
>> Feel free to glance through student.h.
Because there's going to be a lot of functions that are very useful.
So the six that I use the most in my pset when I was doing it this past week
were strtok, strchr, strrcher, strstr, strcasecmp, and strcpy.
And so the last two may seem pretty familiar to most of you.
Str case compare, all it does is compare strings to check them for equality,
including case.
And strcpy just copies one string into a buffer.
>> And so those two should seem very familiar to you guys at this point.
Because we've used them a lot, especially for the last psets.
But the first four perhaps you haven't seen up until now.
But I'm going to just walk through them.
Because they're going to make your lives really, really easy for-- not easy,
but much easier for this upcoming pset.
>> OK.
So char* strtok, this is the function definition for this function contained
within the string,h library.
If you are given an input of char* string, which is just a string,
or a constant char* deliminator, delim for short,
all it's doing is breaking the larger string into a series of what we call
tokens separated by a certain value.
So in a sense, if I were to give you section.7.php, this is a string.
>> So that would be if I were to pass in this as my str, my char* str,
if my deliminator was dot, all this would do is search through string.
And the first time it sees a dot, it would just return to the pointer
to the last token found in the string before this.
So it would go right here.
>> And it would just give me 7.php.
And if I were to call the function one more time,
it would give me just the .php.
And so all this function is doing is breaking down the larger string
into smaller strings depending on what you're looking for.
>> And so for example, in your look up function
if you want to look at what certain characters come about
or if dots happen or extensions happen, this function would be fairly useful.
Yeah.
No worries.
This will all be-- yeah, what's up?
>> AUDIENCE: So in the first line, if we were using this example,
what would we insert into that?
ANDI PENG: Yeah.
You would just call a strtok string comma delim.
And string is equal to section.7.php.
And then you're delim could be equal to just dot.
>> AUDIENCE: OK.
>> ANDI PENG: Yeah.
Just like that.
All these functions are fairly similar when we go through them.
They just do slightly different things.
But they're all going to make your life a lot easier.
Second function, this one's like super, super, super important,
is the-- hold up.
>> Oops.
Strchr searches for the first occurrence-- actually, yeah.
Strchr is the function that I definitely just went over.
So ignore what I said for the first function.
It's actually called strchr.
>> So what would happened here is if you were given a string in a char c,
it would just give you whatever that was.
Yeah.
So think of it as str, which is a string, and chr as char.
So all you're trying to do is search for where a char is within a string.
And so it searches for the first occurrence of the character
c in the string str.
>> AUDIENCE: [INAUDIBLE].
>> ANDI PENG: Yup.
And then if it didn't find it, it's going to return NULL.
So something that's going to be very useful for you guys in doing the pset
if, say, you were looking for an extension like a .docx for a Word
document or a .pdf for a PDF document, you can kind of use it to look
for whatever is afterwards every time you see a dot, right?
And so pretty much, if you run that through the function,
if it returns NULL, then you know that it
didn't find it dot, which means this clearly isn't a valid file extension.
Or if it returns something, then you know
it's going to return whatever's actually after the extension.
So those of you who had started looking through lookup
and parse, this function's going to be super useful.
So we're actually going to demonstrate using this.
>> Why don't you guys try writing a function bool sentence char* s that
just returns true if s is a sentence and false otherwise.
So hint, you're going to probably use strchr.
Or you just search in the string for a certain character.
And so in a sentence, what separates a sentence
from a non-sentence, what specific character?
AUDIENCE: A space.
ANDI PENG: A space, right?
And so what do we probably going to want to do within this function here?
>> AUDIENCE: [INAUDIBLE].
>> ANDI PENG: We're going to want to strchr string for the appearance of the space.
Because if it returns something, then we know that this must be a sentence.
That means that we must have a space in this string.
>> If there's no space, then we know that, hey, guess it's not a string.
It's probably just a really long word.
So I'll give you guys a couple minutes to write this function.
Yeah.
>> AUDIENCE: Did you get this string from the user?
>> ANDI PENG: Yeah.
So this is just a function.
So imagine inside your main function you already have-- let's go here.
OK.
So I've written this program where I have my main function where
I've just created two strings.
The first one is Hi, my name is Andi-- clearly, a sentence.
My second one is just Andi, clearly not sentence.
>> And so I'm running both of those strings through this function.
I want you guys to write cold sentence.
And I'm storing those values, and then just printing them out.
So think that the user is going to pass in a string.
And then you're going to essentially figure out if it's a sentence or not
and return true or false accordingly.
>> If you guys want to give a thumbs up or heads up, head nod,
is anyone's ready to start this, that'd be good.
Maybe like 30 more seconds?
All right.
Let's see if you can try writing this function.
>> So pseudo coding-- I'm just going to kind of walk through this right now.
Pretty much, we know the function that we need to use.
We're going to call that function on our string and search for a space.
If it returns something, then we must know that, clearly, this is a sentence.
Because there's spaces.
Then we're going to return true.
Else, we're going to return false.
Does anyone want to give me the first line of code
that we're actually going to use to write this?
It's actually the hardest line of code as well.
Yeah.
>> AUDIENCE: If strtok s--
ANDI PENG: Just strchr.
AUDIENCE: [INTERPOSING VOICES] space is not equal to null.
>> ANDI PENG: Cool.
Exactly right.
Everyone understand that first line?
We're going to call strstr, which is a function that searches
the string s for the char of space.
And if it finds it, it's going to return a pointer to where that is.
>> If it doesn't find it, it's going to return NULL.
So if it returns anything other than NULL, then we know it's found a space.
Does that make sense?
Cool.
All right.
So if we know it's found a space, what do we want to do?
AUDIENCE: Return true.
ANDI PENG: Yup.
Return true.
And then, someone want to finish up the function for me?
Yeah.
Else, just like that.
And try compiling this.
>> Yup.
So as you guys can see from the outputs, remember Booleans in C
are always expressed in binary.
1 is true.
0 is false.
>> If we were to run this function on string one, which
is Hi, my name's Andi-- clearly, a sentence-- the result
printed out to 1 which is true.
The second one, which is just a word, result printed out
to 0, which is false.
Everyone clear kind of on how this function was written?
Yeah.
>> AUDIENCE: Can we also do, instead of doesn't equal no, equals equals 0,
so that it's equal to?
ANDI PENG: No.
Because strchr is a function.
I'm going to back to this.
So what's the return type of our strchr function?
AUDIENCE: Oh, OK.
Or NULL.
>> ANDI PENG: Yeah.
It's a char* that tells me that whatever this function is going to return,
it's going to be a pointer.
Either the pointer is going to be pointing to where it's found it,
or it's going to return a pointer to NULL.
In either circumstance, it's going to return a pointer to something.
>> And so if you were to equate this equals, equals, 0,
you're going to get a compilation error.
Because it's going to return a pointer.
And you're going to try to compare a pointer to an integer.
And the computer's not going to like that.
Yeah, exactly.
Cool.
Everyone good?
>> And secondly, we're going to go over a function called strstr.
No worries if these functions are confusing you.
They're confusing me.
As such, you guys could have seen, they all sound pretty much the same.
Just whenever you're confused, pull up the string.h library.
And you guys can sort through which one's which.
>> So strstr, all that does is searches a string for a whole other string.
So where strchr just searches for a single character,
strstr searches for an entire string.
So I wanted to look in, I don't know, Hi, my name is Andi.
And my best friend's name is also Andi.
>> If I wanted to look for in this sentence for the entire word of Andi,
my needle would have been whatever you're looking for.
And your haystack is whatever you're looking for it in.
So if you're looking for a specific word within a sentence,
that word is going to be your needle.
And then the sentence itself is going to be your haystack.
And so it just searches the first occurrence
of the string needle in the string haystack.
It returns the pointer to the first occurrence.
Except, remember in this case, it's the first occurrence of the entire string
that you're searching for, not just a character.
>> And so this is almost the same thing as the function
we just did, just with a bit more specificity.
Because you're searching for more than just one character.
And the usage is the exact same as the one that we just did.
Everyone OK with this?
OK.
>> Last one we're going to go over is strrchr, which is not
confused with strstr or with strchr.
strrchr has an extra r in there.
Be careful when you're typing.
You may find yourself including an extra r or not including an r,
and then your function is got not going to work.
And you're going to be confused.
Be careful that you're spelling all these functions right.
>> So strrchr is the exact same thing as strchr
except it searches for not the first occurrence of a specific character,
but rather the last occurrence.
And so, in that sense, it's almost the exact same.
But instead of moving forward in a string,
you're going to be moving backwards in a string.
Exact same thing, you're just searching in a different order.
>> And so this could be super, super useful for your lookup
function, the first function on your pset.
Let's pretend that we needed to write a function of void extension in which we
pass a constant char* file name, just a string, a file name,
that takes in that name and prints out the extension of that file.
So for example, if I were to pass in the string of pset7.zip,
it's going to print out just the extension, which is .zip.
And this would work for any sort of extension,
.docx for Word or .pdf for a PDF file or .html for an HTML file.
Pretty much, write a function that can do that.
I'm actually going to switch over to the IDE.
It is not load-- there we go.
>> So all I've done here is created a char*, a first string,
called pset7.zip.
I'm going to zoom in.
I've created a second string called finalpaper.docx.
And write me a function that when called is going to just print out
the file name extensions.
Maybe take a couple minutes to think about how you're going to do this.
Slightly more challenging than the last one,
but the usage is almost exactly the same.
Yeah.
So write a function called extension that, if I give you the name of a file,
if I were to give you pset7.zip-- I want you to print out just the .zip.
If I give you like finalpaper.docx, just print out the .docx,
just the extension of whatever file.
>> This actually only takes two lines of code.
So try to see if you can maybe do it in that.
Actually, it only takes one line of code.
But two lines is probably more standard.
What function are we probably going to want to call?
>> AUDIENCE: strrchr.
>> ANDI PENG: strrchr, right.
Because we're looking from the right left.
I didn't give you guys an example like this,
but if I gave you an example like www.apple.com and I just wanted
the .com, it'd be a example of where you want to call the last instance
of the period and not the first, right?
If you were call strchr, it would've given you the apple.com.
>> If you called strrchr, it would have given you the .com.
And so be careful on which ways-- in my example,
you could probably could have just written it using strchr,
since there's only one dot.
But in other instances, that may not be the case.
And so always try to design your code well, so that-- yeah?
>> AUDIENCE: So in the example you just said,
when you do strrchr it would give you .com or just come?
>> ANDI PENG: It would give you the .com.
>> AUDIENCE: OK.
ANDI PENG: Yeah.
It points to where it found it.
Yeah.
30 seconds maybe?
Yeah.
Everyone good or maybe a bit more time?
Show of hands?
Show of heads?
Cool.
Anyone want to give me the first line of code for this program?
AUDIENCE: [INAUDIBLE].
>> ANDI PENG: So first of all, let's maybe break this down.
So what is the return type of strrchr?
Let's go back.
strrchr, what is the return type?
AUDIENCE: Char*
ANDI PENG: It's a char*, right?
Which means that you're probably going to want to create another char* to kind
of store whenever it's returning to, right?
Because if you call the function strrchr,
it's going to give you a pointer to wherever it found that last period,
right?
>> But you're going to want to store that somewhere, right?
And so how do we code this into our program?
AUDIENCE: You make the char* [INAUDIBLE].
ANDI PENG: Yep.
AUDIENCE: [INAUDIBLE].
ANDI PENG: strrchr.
Yeah.
Oh, missed an r there.
AUDIENCE: File name [INAUDIBLE].
What is it?
Oh, It's just s.
>> ANDI PENG: Oh, it's just s.
Yup, sorry.
My bad.
Examples did not match.
>> AUDIENCE: And then dot.
>> ANDI PENG: Yup.
Be careful when you guys are-- here, let me zoom in.
There we go.
Be careful when you guys are typing, especially when
you're doing just a char.
It's really easy to accidentally just do double quotes rather than single.
>> That will not work.
Your compiler is going to complain.
And your function is just not going to run.
And so be careful when you're doing things
with chars that it's single quotes.
And so does this line of code make sense to everyone?
We're creating a char* pointer.
Because strrchr returns something of type pointer.
>> And so we're going to call strchr on s, which is the string, the file
name, that we're passing in.
And we're looking for the last instance of a period, which is
just the single quote dot single quote.
Yeah.
>> AUDIENCE: When do we use double quotes and when do we use single quotes?
>> ANDI PENG: Yeah.
So double quotes are always used when you
have a string of more than just one.
So if you're doing strstr, which is the one that you
search a string for string, you would pass it in double quotes.
But any time it's just a single character,
you want to do single quotes.
>> It's a good thing to keep in mind.
So now that we have our pointer, what do we do with it?
I'm asking you guys to printing it out, right?
So [INAUDIBLE], you want to give me the line of code?
>> AUDIENCE: printf--
>> ANDI PENG: Yeah.
AUDIENCE: --you need a place holder.
ANDI PENG: Yup.
AUDIENCE: Print the place holder.
I don't know what the place holder is but point to it.
>> OK.
Let's skip that for now then.
AUDIENCE: And then comma--
>> ANDI PENG: Pointer, right?
>> AUDIENCE: Pointer, yup.
>> ANDI PENG: So kind of a trick question, has to do with pointers and strings
that we've kind of talked about already.
What kind of place holder do we need for a pointer for a char*?
>> AUDIENCE: [INAUDIBLE].
ANDI PENG: Yeah.
It's easier than you guys think it is.
AUDIENCE: String?
ANDI PENG: It's just a string, exactly.
Because remember strings don't really exist.
A char* is the exact same thing as a string.
And so really this s is what should have been used all along.
OK.
>> Let's see if we can try running this.
Let's do a make extension.
Cool.
You guys see how I passed in the psset7.zip and the finalpaper.docx,
and it just prints out the .zip and the .docx?
Make sense?
>> OK So I think in your look up function in your pset you're
going to be asked if the string has a certain ending,
you have to give a certain error code.
And so this will be pretty awful.
Because if you can figure out what the extension is,
you can then compare that extension to see if it matches up
with a certain extension.
And then you can return an error message, right?
Yeah.
>> AUDIENCE: So we don't have to add 1 or anything?
The pointer will go to the--
>> ANDI PENG: Nope.
>> AUDIENCE: --point after it.
>> ANDI PENG: Yeah.
It points exactly to where the occurrence was.
So for example here, we're searching for the period.
So it's going to return a pointer to the period.
And then it's going to print out starting at the period.
>> So you don't need to add 1.
Although, it's totally fine to, if you're ever unsure, to just kind
of test it out yourself.
Build a sample program.
Test it out yourself and see where it's printing.
That's also not a bad way to do it.
>> Cool.
And that's pretty much all I had for you guys today.
We did a lot of pset stuff today.
So when in doubt, like I said, always look up
the string.h library for this pset.
There's going to be a lot of function in there that may be useful.
Some may not be useful.
I don't really know.
Wade through it, there's a whole bunch of them.
strstr, strchr, strrchr are super, super helpful, as well as
the strcpys and strcasecmps that we've already used.
>> It's just lot of messing around with strings, determining if they're equal,
getting stuff out of strings, and being able to open files correctly.
It's a lot of file I/O. pset's really not that bad.
You're going to take a look at it, download it,
and see a whole bunch of code.
No worries, the code you actually write is not bad at all.
If anyone has issues with their server, come see me after section.
>> Apologize once again for not bringing candy to Halloween.
I don't know what was wrong with me.
But we will have double the candy next time.
And good luck in your pset this week.
Yup.