>> This is the CS 50, and the end of Week Eight.
So just a couple of quick FYI's.
As announced on Monday this is now final project season
where you start thinking about what you would like to do
for your own final project,
as part of that process there's a preproposal due in a couple
of weeks, and this really is as simple as sending an e-mail
to your TF and just bouncing ideas off of him or her.
Do look through the PDF that's posted on the course's homepage
as to the particulars, but this is really just an opportunity
to start thinking about what you might want to do.
Seminars too, the schedule is in the process
of being put together.
And if you would like to register for any
of the seminars the link is on the course homepage,
by all means feel free to do so.
They will all be filmed.
And then a word on APIs because this is an acronym you'll see
in the PDF of the final project specification,
and we'll come back to the this in the next couple of weeks
in the context of web programming.
But an API is just an Application
Programming Interface.
We mention this very early in the semester as the name given
to code and data sets that other people,
generally on the internet these days, make available for people
like us to integrate with.
Case in point, if you've used CS 50's course shopping tool,
Harvard courses, then you've logged
into that site most likely with Facebook.
And that's thanks to the Facebook API for authentication.
There's a similar API for the like button, there are APIs
with which you can automatically send e-mails or text messages,
with which you can access dining hall menus,
shuttle schedules and the like.
So realize that URL, even
if the technicalities don't make a good amount of sense just yet,
know that they soon will.
So on Problem Set Five we asked you to critique some piece
of hardware or software, or generally a user interface,
whether on campus or beyond.
You all had a lot of critiques.
Shall we say, a lot to say.
We thought we'd excerpt just a couple of them.
One of my favorites was this one.
If only because 618 people would disagree.
So that's the stack of papers there.
But some of them were --
actually, almost all of them were quite thoughtful
and actually quite detailed.
And know already they have been escalated up to the powers
that be that hopefully we as a class can chip away at any
of the concerns you've had with poor design.
So one of the most polite ones we got too, was this one.
Which I enjoyed.
No one else really sort of qualified their thoughts
with such respect as this one here.
But it was nice, very gentle one.
Another favorite of mine critiqued the elevator
in Matherhouse which apparently when you take it
up from first floor to top floor it just then stays there.
And apparently no one ever takes the elevator down.
So the side effect of this behavior is
that the elevator always stays on the fourth floor by default.
So you always have to wait for it on the first floor.
So very apt commentary there.
This one too was one of my favorite critiques.
This student has trouble turning on the TV
in the Kennedy Common Room.
But in fairness, if you do read
on their critique is quite justified.
I'll wave my hand at the particulars here.
But it sounds like there's a whole lot of buttons
and a whole lot of unnecessary complexity simply
to watch a show that you would like.
And one of the reoccurring themes related
to CS 50 actually related to the CS 50 appliance.
You know by default when you put
up the appliance the window is actually deliberately
rather small.
The idea being that this way it works
on anyone's laptop these days with high probability.
But you can actually enlarge the screen.
Just clicking the little button
in the top right corner is not sufficient, though,
because the appliance is running its own operating system,
and technically that operating system by default doesn't know
that it's inside of a virtual machine, LINUX.
Fedora LINUX just assumes that it's running
on a piece of bare metal.
So for it to take advantage of your full screen
and something called your graphics card
or your video driver you have to kind of train the appliance
to know a little something about your Mac or PC or LINUX box.
And the trick for doing so is something called guest edition.
So guest editions are software for free that come
with virtual box that you can install inside of the appliance
and once you do and restart the appliance just once,
then it will fill the screen just
as I have been doing all semester here in lecture.
And the documentation for doing so if you would like to go
that route if you haven't already, is available
at the CS 50 manual at that address there.
So realize there is that solution,
and plenty of others there as well.
All right, so without further ado, and actually just
to paint a picture of the depth of the comments, we went ahead
and went through the 600-plus critiques that were submitted.
And then we excerpted for public display only those that related
to Harvard so that we could forward them up to the powers
that be, and also allow you to sort of empathize
with each other or see the sort of themes that arose.
I actually first exported all this data as an Excel file.
Then started reading through it, and sort of delighting
in all of the critiques.
And then very quickly got overwhelmed and bored with just,
like, my God, all of the copying and pasting I was trying to do
into the course's web site.
So turns out I [Inaudible] CS 50.
So I wrote a little program and started searching
for programatically, not just with control F, but writing code
that searched for a few themes.
I realized that I could very quickly turn through the results
by searching for my.harvard,
Preterm Planning Tool was another good expression
to search for.
Another one was anything relating to dining services.
Another one was plan of study, sectioning,
and a whole bunch of others.
And it was actually quite fun to see this,
because every time I would add another if condition
in the code saying
if the student mentioned My.harvard put them
at this point in the web site.
The numbers would go from, like, 600 down to, like, 500 comments,
and then down to 400 comments.
So it really is testament, frankly, with what you can do
with just a little bit of PHP,
which is the language we will introduce today.
So for more on this and quite the opportunity
for procrastination you can read through all
of your classmates critiques on things here at Harvard.
So hopefully, collectively as a class, that's getting long.
Hopefully as a class we can do something about that.
Indeed, for your final projects if you see something
on campus that sucks, fix it.
Build it yourself.
Whether it's some CS 50 tool or something else on campus.
And we can see what we can do about making real people use it.
So my favorite thing in high school was watching movies
in class.
So this is not a full-fledged movie,
it's actually just a -- ten or so minutes.
But as promised this will peel back the hood of the Internet
and show us in more interesting detail how things underneath the
hood work.
But just a few pieces of jargon so you know what to expect here.
So we talked on Monday about TCP/IP.
And even though we didn't talk about the TCP part,
we did talk to about the IP part, Internet Protocol.
And that's generally related to this fact that every computer
on the internet has an IP address, a unique address
that identifies it so that packets, data, can get to it
from routers across the Internet.
Now the TCP we didn't tease apart,
but it does a bunch of things.
One of which is that this is a protocol
that guarantees delivery.
For instance, with IP or in the real world,
just because I extend my hand out like this doesn't mean
that the other person is necessarily going
to acknowledge my hand being extended,
and they're not necessarily going to shake it.
TCP, metaphorically, will just keep reextending my hand
until the other end, the server, actually replies.
TCP guarantees delivery.
And the other thing it does is it allows you
to do multiple things on one server at a time.
So a server these days could be a web server,
but it also could be a mail server,
or an instant messaging server, but if data's just arriving
at an IP address it's not going to be obvious, perhaps,
whether this is an e-mail
or instant message or something else.
So it turns out that when you address one
of these virtual envelopes, thanks to TCP/IP,
it's not just the IP address that gets written
on the envelope and your IP address in the from address,
there's also a unique number that's put
on that envelope called a port number.
And you might generally have seen that the port number
for web services on the internet is the number 80.
And the port number for anything secure
on the Internet with HTTPS is 443.
E-mail is 25.
SSH is 22.
FFP is 21.
And if most of these acronyms are sort
of over your he did that's fine.
But know that this is the mechanism
by which browsers send data to a server and on this envelope say
by the way, this is number 80, port 80, so make sure it goes
to the web server, and not, say,
the mail server or something else.
And this feature of port numbers is also such an easy way,
frankly, for Harvard to keep you from doing things
in your dorm rooms on your computers
that they don't want you to do, right?
One of the reasons you can't really put your Wii
on the network and actually play network games by default is
because Harvard is filtering out some of the traffic.
And they're doing this by a couple of mechanisms,
but one of which could very well be based on port numbers.
If Harvard just wanted
to say unilaterally say no more web access for anyone,
but you can send e-mail, all they have
to do is configure their routers or more specifically FireWalls
to disallow any packets flowing through Harvard.edu
that have the number 80 in them.
And corporate FireWalls do this much more so.
And we'll talk later next week, likely, about this tool
that came out last year called fire sheep,
which actually allows you to sniff traffic and how
that actually works and relates to this.
Although that tool actually operates at a higher level.
So you're about to see glimpses of routers and packets,
at switches, a switch is just a device you can plug multiple
computers together in.
And the so-called FireWall, which you all have at home
or even on your computers and software
which just keeps bad stuff out and good stuff in.
So without further ado,
I give you how the Internet was actually,
with some simplifications, works.
[ Background noise ]
[ Music ]
>> For the first time in history people
and machinery are working together.
Realizing a dream.
A uniting force that knows no geographical boundaries.
Without regard to race, creed, or color.
A new era, where communication truly brings people together.
This is the dawn of the net.
Want to know how to works?
Click here to begin your journey into the net.
Now exactly what happened when you clicked on that link?
You started a flow of information.
This information travels down into your own personal mailroom,
where Mr. IP packages it, labels it, and sends it on its way.
Each packet is limited in its size.
The mailroom must decide how to divide the information
and how to package it.
Now the package needs a label containing important information
such as sender's address, receiver's address,
and the type of packet it is.
[ Music ]
>> Because this particular packet is going out on
to the Internet it also gets an address for the proxy server,
which has a special function as we'll see later.
The packet is now launched on to your local area network, or LAN.
This network is used to connect all the local computers,
routers, printers, et cetera, for information exchange
within the physical walls of the building.
The LAN is a pretty uncontrolled place,
and unfortunately accidents can happen.
[ Music ]
>> The highway of the LAN is packed
with all types of information.
These are IP packets,
[Inaudible] packets, Apple Talk packets.
They're going against traffic, as usual.
The local router reads the address
and if necessary lifts the packet on to another network.
Ah, the router.
A symbol of control in a seemingly disorganized world.
[ Multiple voices speaking ]
>> There he is.
Systematic, uncaring, methodical, conservative,
and sometimes not quite up to speed.
But at least he is exact.
For the most part.
[ Multiple voices speaking ]
>> As the packets leave the router they make their way
into the corporate internet and head for the router switch.
A bit more efficient than the router,
the router switch plays fast and lose with IP packets.
Deftly routing them along the way.
A digital pin ball wizard, if you will.
[ Multiple voices speaking ]
[ Music ]
>> As packets arrive at their destination they're picked
up by the network interface,
ready to be sent to the next level.
In this case, the proxy.
The proxy is used by many companies as sort
of a middle man in order to lessen the load
on their Internet connection,
and for security reasons as well.
As you can see, the packets are all of various sizes,
depending upon their content.
[ Music ]
>> The proxy opens the packet and looks
for the web address, or URL.
Depending upon whether the address is acceptable,
the packet is sent onto the Internet.
There are, however, some addresses which do not meet
with the approval of the proxy.
That is to say management or corporate guidelines.
These are summarily dealt with.
We'll have none of that.
For those who make it, it's on the road again.
Next up, the FireWall.
The corporate FireWall serves two purposes.
It prevents some rather nasty things from the Internet
from coming into the intranet,
and it can also prevent sensitive corporate information
from being sent out onto the Internet.
Once through the FireWall a router picks up the packet
and places it on to a much narrower road,
or band width, as we say.
Obviously, the road is not broad enough to take them all.
Now you might wonder what happens to all those packets
which don't make it along the way.
Well, when Mr. IP doesn't receive an acknowledgement
that a packet has been received
in due time he simply sends a replacement packet.
We are now ready to enter the world of the Internet.
A spider web of interconnected networks,
which span our entire globe.
Here, routers and switches establish links
between networks.
Now the net is an entirely different environment
than you'll find within the protected walls of your LAN.
Out here, it's the wild west.
Plenty of space, plenty of opportunities, plenty of things
to explore and places to go.
Thanks to very little control and regulation,
new ideas find fruitful soil to push the envelope
of their possibilities.
But because of this freedom certain dangers also lurk.
You'll never know when you'll meet the dreaded ping of death.
A special version of a normal request ping
which some idiot thought up to mess up unsuspecting hosts.
The path our packets take may be via satellite, telephone lines,
wireless, or even trance oceanic cable.
They don't always take the fastest
or shortest routes possible, but they will get there.
Eventually.
Maybe that's why it's sometimes called the World Wide Wait.
But when everything is working smoothly,
you can circumvent the global five times over at the drop
of a hat -- literally.
And all for the cost of a local call or less.
Near the end of our destination we'll find another FireWall.
Depending your perspective as a data packet,
the FireWall could be a bastion of security,
or a dreaded adversary.
It all depends on which side you're on
and what your intentions are.
The FireWall is designed to let in only those packets
that meet its criteria.
This FireWall is operating on ports 80 and 25.
All attempts to enter through other ports are closed
for business.
[ Music ]
>> Port 25 is used for mail packets.
While port 80 is the entrance for packets
from the Internet to the web server.
Inside the FireWall packets are screened more thoroughly.
Some packets make it easily
through customs while others look just a bit dubious.
The FireWall officer is not easily fooled,
such as when this ping of death packet tries to disguise itself
as a normal ping pact.
>> No problem, have a nice day, get out of here.
Bye.
>> For those packets lucky enough
to make it this far the journey is almost over.
It's just a line up on the interface to be taken
up into the web server.
Nowadays a web server can run on many things.
From a main frame to a webcam to the computer on your desk.
Why not your refrigerator.
With the proper set up you can find out if you have the makings
for chicken Cacciatore, or if you have to go shopping.
Remember, this is the dawn of the net.
Almost anything's possible.
One by one, the packets are received, opened , and unpacked.
The information they contain, that is your request
for information, is sent onto the web server application.
The packet itself is recycled.
Ready to be used again.
And filled with your requested information.
Addressed and sent out on its way back to you.
Back past the FireWall, routers, and on through to the Internet.
Back through your corporate FireWall.
And on to your interface.
Ready to supply your web browser
with the information you requested.
That is, this film.
[ Music ]
>> Pleased with their efforts, and trusting in a better world,
our trusted data packets ride off blissfully
into the sunset of another day.
Knowing fully they have served their masters well.
Now isn't that a happy ending.
[ Music ]
[ Applause ]
>> So it does take some liberties.
However, hopefully, even though we've been talking about packets
and data and IP in fairly abstract terms,
at least now you do have some visuals to latch on to,
as it relates to data actually getting from point A
to point B. Are there any questions
about the internet or that film?
Yes?
[ Inaudible audience comment ]
>> When it says packets are what?
Recycled -- hmm, that's one of these liberties.
That doesn't really happen.
You don't really reuse bits, you just recreate them.
So I think someone, too,
a lot of that film was having a little too much fun making
their graphics.
Because kind of -- it's like, all right,
we're done painting the packet.
Move on. All right, yeah?
[ Inaudible audience comment ]
>> So a ping of death.
Actually , so that does relate
to something we looked at Monday.
When we looked at trace route that tool
that showed us the path between point A and B,
the type of packet we were actually sending is something
called a ping packet or more technically, an ICMP packet.
And that is a packet that is sometimes blocked.
That's why we saw the stars instead of actual IP addresses.
And a ping of death is essentially a ping that's bigger
than it's supposed to be, according to the specifications.
And years ago particular computers were just not designed
-- some computers were not designed
with sufficient error checking.
So simply sending a packet, too many bits over the internet
to a server could cause it to crash
because it essentially overflows a buffer.
So they've rather fallen out of vogue since.
All right, so we looked at HTML.
And this is itself just a markup language,
not a programming language, but it allows us
to start constructing web pages.
But only static web pages.
Everything we did Monday I had to manually type
into my text editor G edit.
I then saved it and then I pulled it up in a web browser
and recalled it, even though it was inside of my appliance,
the appliance is configured just like one of these web servers.
So it's addressed locally as local host.
But if we were to give it a public IP address,
as you will be able to do for your final project,
then we could actually --
anyone on the internet could actually visit that thing.
So recall we did some fairly simple if ugly designs.
If I go into the appliance and I go into my J. Harvard directory,
recall that we correct created this thing called public
underscore HTML.
It's a little oddly named, but that's sort
of the global standard.
Different web servers can call it different things,
but most servers do call it public HTML.
And then inside of here we left off with eyes dot PNG,
which is a graphics file in index.html.
And the latter is the thing we actually wrote.
And the structure of this, recall, was as follows.
At the very top of this file we had a [Inaudible]
of an HTML doc type declaration.
So even though it has the open brackets it's not technically
a tag.
But that's sort of an uninteresting detail.
But all of these other things are in fact tags.
And the pattern was open bracket, something,
close bracket, unless a tag's behavior was to be modified
by something called an attribute.
And attributes have values.
So the general syntax for that was to say open bracket,
name of the tag, space, name of the attribute,
equals quote unquote, and then the value of the attribute.
And you could have more attributes if HTML allows you.
You could have Fu equals bar and X equals Y,
you simply separate them in this manner by spaces.
But you would look to some documentation
or on line reference to see what are the legitimate attributes
for that particular tag.
And then we introduced one other thing
that syntactically was a little different,
and this is because this is a slightly more modern feature
of the web.
So we introduced a Div tag,
which is just an invisible division, a rectangle.
And these just typically help with layouts of a page,
even though functionally they're not doing a huge amount here.
But if I wanted to make everything inside
of this Div tag a certain stylization
like make everything red text, well,
I can use something called CSS, cascading style sheets,
and this is just a slightly more modern language, still a markup
of sorts, not a programming language, that allows you
to sort of fine-tune the aesthetics of your web page.
Back in the day, and frankly when that movie was made,
the only way you could really stylize your page is
by saying font size equals quote unquote 1, font size equals 2,
font size equals 6, and I think 7 was the maximum size.
But these were all relative.
And folks like Netscape and Internet Explorer
and other browsers just kind of arbitrarily decided
that font size 6 will be, oh, I don't know, 48 point.
And font size 2 will be 10 point.
But it was completely arbitrary.
And so if you pulled up a web browser to visit some web page,
and then looked at that same page
in a different browser might look very, very different.
So CSS was introduced, among other reasons,
to try to standardize the aesthetics of web pages
and make it a little easier to structure them.
So the pattern that is followed
for these things called CSS properties is
that they generally go in between quotes as values
of the style attributes.
So the style attribute is a little special
in that you can put almost anything you want
in these quotes from CSS.
And CSS says find the name of the property, colon,
and then the value of the property.
So syntactically, this is
like mixing one language inside of another.
So it's a little odd at first,
but we're with to introduce a third language today.
So realize that what might still look
like Greek actually just gets a little more familiar over time.
And in fact any time you want to pick up some more tags,
it really will be as simple as Googling, looking up one
of the recommended resources on the course's web site.
We're not going to introduce you to all
of the possible HTML tags,
because it's just not all that interesting.
In fact, all of what we have here is pretty much
representatives of all of the HTML tags,
because we have the nesting idea
where this is the unordered list with a list item.
We have a tag within a tag here with this anchor tag,
we have hyper references for links, we have images.
So we have at least some of the most popular features
of the web, and even some these do have attributes.
And then the anomaly, recall, was this guy, the BR,
for line break tag, and he was anomalous
because he didn't have what?
He didn't have a close tag.
And you could put it there.
That would be okay.
It just looks or feels a little silly.
You might see this, but again, this is sort
of conceptually silly because it's a line break.
It's either there or not.
It's some atomic concept.
It doesn't start and then end.
So you don't really need this.
But realize you might also see it written as this.
Which is also okay, you might see the slash at the end
of the tag but inside of it.
And this too would be called an empty tag.
But for HTML 5, the latest version of HTML,
the folks decided that some
of these conventions were just unnecessary typing.
So let's just say open bracket, BR, close bracket.
And how do you know this?
Honestly, you consult the manual,
you consult some resource, and in Problem Set 7 we'll point you
to specific ones and the resources page already has a few
of those.
So this, then, is sort of a cannonical web page.
It is valid in that it's all correct.
It's indented, which means it's nicely readable,
and know that we could do this.
If we wanted to check our web page --
I'm going to go ahead and copy this HTML.
I'm going to go to Validator.w3.org,
which is the web site of the standards organization.
Bunch of volunteers who essentially try
to standardize the web in various languages,
and you can see that you can validate
by something called a URI, which is sort of a more generally URL.
Essentially synonymous for our purposes.
You can validate a file by up loading an HTML file,
or you can validate your HTML by directly inputting it.
So I'm going to go ahead and paste this in here.
So notice I just pasted in the contents of a web page.
I'm going to go ahead and click check.
And what's nice about this tool and what will be very handy
for problem set 7 and 8 in the final project,
it's a nice little sanity check.
It will literally check your code and say yes, this is good
in green, or you have some issues.
And if you have some issues you can scroll down
and actually read what those issues are.
But realize that you're not going to be able
to use the validator and tell it that the URL
of your page is http://local host/~JHarvard, because then,
local host is on your own machine,
it's not on the internet.
Which means some web site like that can't access it.
So realize that dichotomy there.
All right, so let's make a slightly fancier web page.
And notice what I've introduced here is just a couple more tags.
I've got my body tag, but inside
of it now I've got some anchor tag and some H 1 tags.
So the anchor tag, just for demonstration purposes,
just has an empty H ref.
I don't really care what the URL is, so I omitted it.
H 1 stands for heading 1.
And historically, heading 1 made text on a page big and bold.
What big means was not well defined.
It might have been 48 point, it might have been smaller,
it might have been bigger.
So here too is why CSS was invented.
So we have two tags, though, inside of the body.
And the point of this little snippet is to say
that you can maybe kind of start to think of this now as a tree,
a data structure, the indentation is
for aesthetic purposes and readability.
But if you think about it, ignore the doc type
at the very top and focus only on the HTML element.
HTML says there can only be one root element, so to speak,
and that element must be called HTML in all lower case.
Open bracket, HTML, close bracket.
And if you look to the right and below it,
everything is indented.
But this indentation kind of suggests a hierarchy.
Right? The children of HTML, if we infer from the indentation,
seem to be tags called head and another tag called body.
And so we can actually think of the HTML tag
or let's call it an element now to make it more
like a data structure, the HTML element has two children,
head and body.
Body in turn has two children, the A --
the A element and the H 1 element.
And if we really want to get technical,
even the H 1 element has a child.
But it's just a textual child.
It's literally the string my space header.
But we can think of that now as a tree.
So even though we've kind of written this top to bottom,
left to right, we could redraw it.
Either on paper or in memory as a more familiar tree structure.
So not a binary tree, it's just a coincidence that some
of these things have two children.
Certainly a web page can have any number of children.
But if we kind of sketch this out as a tree,
first I just need some special note at the very top
for reasons we won't get into now.
But the one's that important is this so-called root element,
called HTML.
It has two children, so I drew two lines from --
over to the left to the right.
One is for head, one is for body.
If we then look at the head,
the head element has one child called title,
and the title element has one child, a textual one,
whose value is just quote unquote, my title.
And over here, body has the same kind of story.
Has two children, A and H 1.
Each of them has one child.
But notice this H ref.
Notice why -- even though this is an arbitrary picture,
this isn't any kind of standard way to draw something, why,
though, did I draw, probably, this attribute called H ref off
to the left, and not below the anchor tag?
feel like there's some murmuring here.
So just -- yeah?
Because it's like kind of part of A tag,
and it's definitely not a child, right?
It's not a tag unto itself, it's not below it and indented.
So we at least need to draw some other way.
And this is important only in so far as you think about how
to implement this in a programming language.
If we are actually going to implement, God forbid
and see a web page like this,
we could actually create something called a node,
you know, using a type dev and a struct,
and inside of that type dev struct would have to be the name
of the element and maybe one or more pointers to its children.
But then also the notion of one or more attributes as well.
So this picture should conjure
up at least potential design opportunities here,
even though in practice we're not going to use C with regard
to the web, rather, we're going to use a language called PHP.
But when we get to JavaScript in a week
or so this picture will actually become quite compelling.
Because JavaScript itself is a programming language that's
going to run inside of a browser that will write this code
and it's going to manipulate the so-called DOM.
Document Object Model.
So this tree that's depicted here,
hence forth we'll refer to as a DOM.
And what's nice about JavaScript and what makes today's web site
so sexy compared to what they were five and ten years ago is
because using this programming language called JavaScript you
can take a tree like this and insert new nodes,
and move nodes, and remove nodes, and move things around,
and make the web site much, much, much more dynamic.
Right? Case in point, we've all kind of gotten used to something
like Google Maps and if we search
for 33 Oxford Street Cambridge, Mass and hit enter,
a few interesting but things just happened we now take
for granted.
One there's clearly some auto complete going on.
And my own computer definitely doesn't know
about all possible 33 Oxford Streets in the world.
So there's definitely some client-server interaction going
on there.
What does that mean?
There's a bunch of HTTP requests that just went from my browser
to Google and back, and they were giving me these
little hints.
But what's compelling about this interface, recall,
is it's not reloading.
Right? There's still a lot of web sites out there
where if you want to see more content or look something
up you click, like, a submit button or you click a link.
The whole page goes white for a moment,
and then something stars spinning in your toolbar,
and then bam, you see the result.
Or you hit a back button, or you click another link.
These web sites are becoming increasingly unfriendly
because the bar has been raised by sites like Google,
because Google's using a technology called Ajax.
Which is the use of JavaScript among other things.
And even this, right, you might not recall using something
like Mapquest which is one of the first map tools out there,
or even yahoo maps, where if you wanted to go up or down or left
or right you click a stupid arrow,
and then that part of the map reloads.
And then you click it again, and click it again.
And just a few years ago it was a really powerful thing
when Google started actually, you know, letting you click
and drag so the whole web site is not reloading,
just the contents of this frame.
Now there's Google Earth, which makes things even more fancy
and more 3 D and interactive.
So the web is really getting much, much more interesting.
So over the next couple of weeks we're going
to learn how these things work
and you can make them do your own bidding.
So without further ado,
let's introduce just a couple more sort of mental things
for -- with which to proceed, and then dive
into this programming language, PHP.
So this is just a slightly more complex example of HTML
that allows you to include other files in your web page.
So recall sharp clue from C which allows you
to include a header file inside of your own C file?
Well, HTML has a similar mechanism whereby if you want
to put all of your cascading style sheet information,
font color red, font size 25 point, and so forth.
If you want to actually put it for design reasons
in a separate file you can do
that in a file called say styles dot CSS, which is also going
to be in your public HTML directory.
And if you want to tell a browser, hey, by the way,
you have to go and load another file before showing the user
this web page, you can use the link tag here.
Link and then rev
for relationship, equals style sheet.
And then H ref here is not a link,
it's saying go grab this other file called styles dot CSS
from the server and then use it to display this web page.
And we'll see in a moment what something
like this might look like.
Below that you see a script tag.
And you might be able to infer from this that this relates
to this language called JavaScript.
So in a week or two when we're writing JavaScript code,
if we want to integrate it into our web page but not just copy
and paste it into the actual HTML file but keep it separate
for design purposes and readability,
similarly we include a file like this.
Now just to give an example of how this works,
if we go to say even CS 50 dot net, and I just happen to know
from the source code that I go into --
let's see, styles dot -- styles dot CSS.
That's not it.
I don't seem to know.
Let's do this.
I don't remember where we put it.
So I'm going to go ahead and right click,
or control click, view page source.
And you'll see that there's a whole bunch
of stuff going on here.
And the formatting is actually pretty messy because a lot
of the CS 50 web site is generated by a computer,
by programs written in PHP,
so we don't ever really manually type this out.
So if I kind of scroll through this,
and it's actually a little messy here, ah,
that's what I was looking for, I wanted this link tag
which says the stylization for CS 50's web site is apparently
in a folder called CSS, not styles, that's what I got wrong,
and in a file called styles dot CSS.
So let's go there.
So let me update the URL to be that.
And hit enter.
And what we'll see and hear is more complexity than we'll dive
into for now, but you see a whole bunch of things --
let's find a simple one like this.
So you might recall that on top
of a course's web site are often these things called --
announcements at the very top of the page.
And right here we have a mention of problem set five,
problem set six and so forth,
and this box always has a little FYI logo up there.
It's kind of gray background and blue links.
Well, the means by which we did this was in here.
Long story short, we have a Div somewhere in the page
for this rectangular set of announcements.
We gave it what's called an I.D.,
which is just a unique identifier
so that we could say there might be a dozen Divs on the page,
this is the one we want to stylize.
So Div sharp sign FYI, and then the open curly brace,
close curly brace, and inside
of that is again this thing called the CSS property.
Of the font size of those announcements,
we decided, should be 77 percent.
What does that mean?
Well, we gave some thought
to what the default font size should be on the web site,
and decided the announcements should be 77% the size
of the default size.
And then how about this.
Div sharp sign FYI A. Well, A is the anchor tag, this just refers
to the very specific Div in the web page
where the announcements go,
while this is what gives the announcements their color ,
the specific color we're using which is a light blue.
And text decoration, none.
You might recall that on the web
by default most links are underlined,
just to draw attention to them.
But this is falling out of vogue.
So the means by which you disable underlining is a CSS
property called text decoration, colon, none.
Do not decorate the links.
And so this is again just a teaser of the sorts
of things you can see.
And just realize that the CS 50 site is more complex
than a typical one.
And frankly, if we go to something like Facebook,
let me go ahead and pull up view page source, I mean,
you'll see a whole bunch of HTML here, also machine generated.
So it's a bit messy to read.
But if we scroll to the very top, there's the doc type.
So that part of our story is true thus far,
that that's part of the web.
HTML is there.
There's some other attributes that we haven't used.
But those don't really change the story.
There it is, title, welcome to Facebook,
log in, sign up, or learn.
And here's some CSS.
So let's see what Mark
and company have been writing in the way of CSS.
If we go -- let's choose this.
I have no idea what this file name means, but I'm going
to copy the URL, paste it, and it looks like someone
at Facebook wrote all of this CSS.
If I take this one here, someone
at Facebook wrote all of this CSS.
And again, not interesting to glance
at except there are some sort of self-explanatory things,
things about background images.
So that's how they have some image on the screen,
things about width and so forth.
And then if we go to JavaScript, just as a teaser for next week,
let's go into this cryptically-named URL.
Here is a whole bunch
of JavaScript code that someone wrote.
Lest you completely freak out as to what's on the horizon,
they wrote this JavaScript
and then did what's called obfuscating it, or minifying it
for reasons of bandwidth and cost,
and also sometimes intellectual property.
You might write JavaScript code in a very readable way.
This is not what we're going to write.
You use nice indentation, nice variable names,
nice function names and the like.
But when it comes time to post that code
on the internet clearly any random guy
with a browser can look at it,
and also white space is useless for a computer.
It's only really useful for a human.
So to save money, because transferring data certainly
on Facebook scale cost money over time, because they have
to pay someone to transfer data.
And because they don't necessarily want My Space
or someone else copying all of their fancy features
out right, you can minify it.
Which does not make it impossible for smart people
to figure out how your code works, but it raises the bar.
And this too is a theme in security
and intellectual property in general.
You really can't keep someone from figuring out
or understanding or even duplicating your handiwork,
but you can at least raise the bar
so that it's more time consuming or more expensive for them
to figure it out than it would be if they just started
from scratch and wrote it themselves.
But the exception there relates to anything server-side.
So HTML, CSS, and as we'll see,
JavaScript is all client-side, so to speak.
It's in the browser.
All the PHP we write, all the database stuff we do is going
to be server-side.
And that's where really the intellectual property is.
And frankly, Facebook's value it in its data and it's users,
not in some random JavaScript code they've been writing,
as much as that might please users.
So let's take a look now at a familiar web site and see
if we can't implement a little something like it ourselves.
So here is Google.com.
I'm going to go ahead and do one thing first,
because Google's getting a little too fancy
for its own good.
I'm going to go to search settings and I am going
to turn off Google instant.
Google instant, as you may know,
is a feature introduced a few months ago and it all
of a sudden, like, shows you your search results before you
hit enter.
I want to kind of do it old-school style
so we don't get ahead of ourselves, because I want
to actually have to click a submit button before we actually
search for something.
So here we have now the Google homepage.
And I'm going to go ahead and search
for something like Harvard.
Enter. And viola, once I hit enter, Harvard,
thankfully, is the top hit here.
So now we actually see the page of search results.
How did this happen?
Well, let's look a little closer.
Here's before, originally the default homepage.
And here's the URL.
Notice that chrome is being a little excessively
user friendly.
What's really there is this, but for reasons of aesthetics
and simplicity a lot of produce browsers are just hiding this,
but HTTP://is implicitly there, and now notice
when I actually click submit after searching for Harvard,
enter, notice that the URL changes
to something much, much more complex.
Though it's all related to what I just did.
Let me go ahead and copy this.
Let me go ahead and open just a temporary text file
and paste this in.
Just so we can see it a little more clearly.
And it's definitely an ugly URL
but let's just throw away anything that confuses us.
So I have no idea what this is, but it seems like it relates
to English, EN is generally the short hand notation for English.
Source, I don't really know what H P is.
So I'm going to delete that.
B I W -- I don't know what that is.
B I H, maybe height?
Maybe there's a width thing going on here.
Okay, Q equals Harvard.
Sounds familiar.
So Q, query probably.
So let's leave that.
Let me -- O Q, I didn't type O Q. So let's get rid of that.
No idea what this is, definitely no idea what this number is.
So Google is doing a lot of stuff, right?
They do advertising, that's the technical explanation.
This, though, this was like version 1, when Larry
and Sergei first made Google it really did work as simply
as this, with one input coming
from the user before all this era of advertising
and the like, and user tracking.
So let's see what happens if I just take this URL,
go back to a browser, click enter.
So it actually still works.
So even sort of old-school style this URL works.
And this is nice, because I can kind
of wrap my mind around this URL.
The other one's a little overwhelming.
So notice that by default the text field is being filled
in with the word Harvard.
At the top I have Google.com/search?Q
equalsHarvard.
So let's tease these things apart.
So the domain name here is www.google.com.
Slash denotes the root of the hard drive,
the server that Google is using.
Now in reality, they have thousands of servers.
Let's simplify.
One server.
And so in that server's hard drive is apparently a file
called search.
And that file is a program.
Maybe it's written in PHP, Python, C,
C++ who knows right now.
Generally, Google does a lot of stuff
in Python and other languages.
So slash searchs the program and it turns out that the convention
on the web is any time you have a question mark,
after that question mark are the inputs to the server.
So just as in C you can provide inputs via the command line
or by using get string or similar and waiting
at a prompt and typing enter.
The web works in such a way that servers take input by way
of URLs with question marks an then key value pairs after them.
So Q is the key, equal sign separates it from its value,
which in this case is Harvard.
And if you have multiple ones, they're separated by ampersand.
So if I had X equals Y
and W equals Z we could just separate them by ampersands.
And that was I deleted, recall, a whole bunch of ampersands.
So that's how Google's apparently working.
But how did the web page lead me to that URL.
I didn't click a link.
I typed in the word Harvard, hit enter,
and magically this URL changed.
So let's go back to Google's homepage and see
if we can't make a little bit of sense of it.
So I'm going to view page source.
And oh my God, this is going to be a lot
of stuff to delete, right?
So as an aside, especially someone like Google,
there's fascinating scaleability effects here.
Someone at Google so much as hits the space bar once
which creates a single byte of white space and then everyone
in the world proceeds to download that homepage in a day,
suppose Google gets a billion hits.
The mere fact that some programmer hit the space bar
means 1 billion extra bytes were sent
from Google throughout the whole world, that's a gigabyte,
just because someone hit the space bar.
So one of the things Facebook and Google and all
of these big sites do is again, they minify their code.
They throw away white space,
they automatically shrink variable names
so that it's not readable.
Both for obscurity purposes, but also for financial purposes.
So let's scroll down.
Oh my God, a lot of HTML here.
But that's okay.
Let me actually go inside of the appliance
and use a different browser.
Because by default, Firefox, recall,
comes with some tools preinstalled.
We used one on Monday called LiveHTTPHeaders
which just let us sniff the traffic going
from browser and server and back.
But today I want to use an even more popular tool
called Firebug.
So Firebug is a free plug in for Firefox, comes in the appliance,
but you can download it for your Mac or PC.
And what it allows you to do is actually look inside
of web pages a little more neatly.
So I'm going to go ahead and again disable instant search,
because I want the old-school behavior.
Save preferences.
And now I'm inside of the appliance.
I'm at Google.com.
I'm going to right click or control click.
And notice once you install Firebug you have a special menu
here that shows up called inspect element.
I'm going to click this,
and what this does is it opens a little window at the bottom
of the browser that does a bunch of things.
But the most useful it just cleans everything up.
It adds white space, it adds indentation.
So as you're trying to learn how web sites work
or if you're trying to borrow someone else's design you can
actually see much more neatly in this way.
So here we have the doc type declaration,
here's the HTML tag, here's the head tag,
and notice I can even collapse these things to help stay sane
as I'm exploring this.
So let's go into the body here.
It looks like there is a Div tag,
an I frame tag, a center tag.
You know, I don't know what most of these are yet,
but center probably means make this centered.
So we keep going, keep going.
Here's the interesting one today.
So web sites become dynamic when they actually take user input.
They have text fields or drop down menus or check boxes,
all of these very familiar, mundane things,
but this is what now makes the web interesting
because the page can change every time I visit it
if it has something called a form.
So if I scroll down here,
apparently there's a tag in HTML called form.
It can take a bunch of attributes,
one of which is name, one of which is action.
Well, action has a value, and the action attribute is defined
in HTML documentation as being the URL
to which you will be sent upon submitting the form.
So read -- skim the manual, that's what it says.
So this is sort of a shorthand URL.
Because there's no http://the browser is going to assume
that slash search refers
to whatever server got me to this point.
It's going to assume the default of Google.com.
Now there's a bunch of distractions in here.
This is the source of some of those crazy names we saw,
in put O Q, A Q, A Q I, A Q L and so forth.
Well, notice these are all hidden.
Firebug is friendly and trying to gray them out,
just to draw my attention to the fact that these are inputs
that are there, but Google put them there.
They're not things that I can see.
But I want to see Q and the form that I'm actually filling out.
So turns out there's a table tag in HTML.
There's a table body tag, there's a table row tag,
there's a table data tag, and if I keep going in here,
notice that, okay, finally something a little
more familiar.
There's more Divs, there's a B R input.
But this is interesting.
There's an input tag.
An input tag, that takes a bunch of attributes.
One of which is type equals submit.
This is what makes it a button that's clickable.
Another of which is value.
So if you've ever wondered where the label
from a button comes from, actually,
no one probably ever wondered that, but now if you want
to know, the value -- the label
on these clickable buttons is coming precisely from this HTML.
And the I am feeling lucky button that's been part
of Google's history is right here as well.
Now as an aside, the nice thing about Firebug, too,
is that you can actually tinker with the web site.
I can even say, you know, I can go into the HTML here,
and I could say I'm feeling, say, unlucky.
Enter. And viola, I changed Google.com.
Obviously not.
I just changed it locally.
But the value here is I can actually tinker
with my web site, with others,
just to understand how they work.
If you pull up Google.com now it will still say I'm
feeling lucky.
So what's the take-away here, it seems that this is the beginning
of a dynamic web site that is really a program.
It's a form, this is the means by which we're getting input.
And now Google is providing the back end intelligence
for searching.
So let's see if I can't now leverage this same idea
and reinvent this wheel
and customize it for my own web site.
Let me go into G edit here.
Let me go ahead and create a new file.
I'm going to save this at Google dot HTML.
Enter. I'm going to go ahead and do a bunch of familiar --
actually, I'm going to go ahead and copy-paste,
and change some things.
So I am going to call this CS 50 search.
We're going to ditch yesterday's pink background.
We're going to get rid of all of this, in fact.
So let's just get to the bare bones of a web site here.
So now we have something pretty minimal.
And now I'm going to borrow this new trick.
I'm going to say I like that center tag.
That's kind of friendly.
So let's do that.
Now I'm going to do a form tag.
A form needs a name -- it actually doesn't need a name,
so I'm going to skip that one.
But it needs an action.
Slash search.
Let me close this tag, form.
And then this form has to have a few things.
And we didn't look at this one explicitly,
but there was another input type equals text.
And what was its thing.
Let's take a look.
Back at the HTML, let's do a quick control click
or right click, and actually if you click on specific things,
if you right click on the form field
and click inspect element it will jump right to it,
so you don't have to futz around trying to find it.
So notice this is a pretty big input tag with a lot
of attributes, apparently.
But the only one I care about is here, at the very bottom.
One of the attributes is name equals quote unquote Q.
So I am going to steal that same HTML and reimplement it myself.
So here we go.
Input type equals text.
Name equals Q. And I'm not going to give it a value,
but I am going to have a button.
Input type equals submit.
Value equals CS 50 search.
And let's see where this gets us.
I'm going to save it with this pretty minimalist design.
I'm going to go -- let's see, I want to open this in a browser.
I'm going to go back to the appliances desk top.
I'm going to go into my home directory, actually, nope,
let's do it via the web browser.
So local host, slash, tilde, J, Harvard, Google dot HTML.
Okay, not quite Google, but I'm on my way.
Right? So I have a form here with a text box.
I have a button CS 50 search.
But it's not quite Google
yet because the button I really wanted on the next line.
So what was the trick for fixing this issue yesterday -- Monday?
So we can do like a B R tag.
Let's see, let's save and reload.
Okay, so it's not quite as pretty as Google.
But let's even add their I'm feeling lucky button.
So input type equals say submit.
Value equals I'm feeling lucky.
And close quotes.
Let me reload my browser.
Okay, starting to look like Google.
And in fact, if we really want to be ridiculous,
if we go to a particular URL here,
let me steal from our demos today.
CS 50 search.
Nice. All right, so now I have my own logo.
Save image.
I'm going to save it as search.jif.
I'm going to put it into where?
John Harvard's public HTML directory?
I'm going to click save.
Okay, I'm going to go back to my HTML.
I need that image tag.
So let me go up here and do I-M-G-S-R-C equals search.jif.
I need a line break.
So let's reload my browser.
Reload. Hmm.
Not appearing.
Why? Yeah, so might be a permissions issue.
So let's check.
Let me open a terminal window, and let me go
into my public HTML directory.
Let me do an L S. But wait, L S isn't good enough,
L S dash L for the long listing.
And sure enough, there's search.jif,
but it means only I have read and write permission.
So the fix for this, recall, was [Inaudible] all A plus R,
all plus read, search.jif.
Enter. Let's go back to the browser.
Sometimes you see like a broken icon or something like that.
But Firefox in LINUX apparently just shows it as white.
Very nice.
Now we're on our way here.
So now let me go ahead and search for Harvard an see
if I'm done implementing Google.
Hmm. Okay.
So not found.
So obviously I'm cutting some corners,
among which is I didn't implement search, right?
I didn't implement a program in PHP
or any language called search.
Okay, that's fine.
You know, I'm pushing up against the deadline here.
P set's due.
HTTP, www.Google.com/search.
So let's go back here.
Reload. Got to reload your HTML,
otherwise the change won't take effect.
Now I got Harvard, CS 50 search.
Nice. I have reimplemented Google.
[ Applause ]
>> All right, so clearly we cut some corners.
So let's see how we can start implementing things underneath
the hood there.
Let me go over to G edit here.
This is all HTML.
Feels like it's going to be time to introduce a bit of PHP.
So PHP is now an actual programming language.
It's a language that's going to be executed server side,
not inside the browser.
So anything we do with PHP is never going
to be seen by the user.
But using the equivalent of print dev we can write PHP code
that spits out HTML that spits out CSS,
and we can dynamically create our web pages.
So let me actually go ahead and download some of today's code.
Let me go back to lectures.
Let me scroll down here.
Source code.
And let me download -- actually, let's do this.
I feel like people are getting antsy.
Let's take a two-minute break.
I'm going to go ahead and download some code
and then we'll come back
and start writing this back end ourselves.
All right, so we are back.
So turns out one of my primary extracurricular's
in college was actually running with one
of my roommates the freshman intramural sports program.
And so this was back in the day, almost before the web,
whereby if you wanted to register for soccer or Frisbee
or whatever, you would actually fill out a piece of paper,
you would then walk across Harvard yard.
Swipe into Wiggles Worth [Assumed spelling] walk
to the door of the proctor who was really in charge
of [Inaudible] and then drop into their mailbox,
their door drop, your registration form.
And thus was freshman intramural sports.
There were, like, web servers and web browsers in 1996.
And so this was just a kind
of a campus problem waiting to be solved.
We can do better than trekking across campus
to Wiggles Worth to register.
So having taken at that time CS 50 and 51 toward the end
of that year I decided to learn a language
on my own called Perl.
Perl is still very much in use, but it's been supplanted
by even more modern languages, like PHP, Python, and Ruby.
But it was with this language
that I implemented the first sort
of online registration system for [Inaudible].
And it was really simple.
All we wanted to do was allow people to go to a web page,
fill out a form like this, click submit,
and then the proctor could download the equivalent
of an Excel file, or we could even e-mail people to confirm
that they had in fact been registered.
So I tell this particular story,
even though it's a different language that really,
after CS 50 and maybe just one other class,
it really is possible to boot strap yourself
and learn most any language that's similar syntactically
to C, and as we'll see, PHP.
It's very deliberate that we'll spend very little time
on JavaScript and PHP relative to C,
because you'll see syntactically they're quite similar,
and also conceptually they are similar as well.
They simply solve different problems more easily.
So with that said, here's a web page.
Let's actually look at its source code.
If I view page source I'm going to see a bunch of HTML,
and there's definitely some new features here.
So what's here.
I have my doc type, HTML, head, title, a Div, text align center.
So this is actually the more proper way to center thing
in a web page these days.
There's an H 1 tag, which again means big and bold.
There's a couple of line breaks.
Here's a form field.
And here's something interesting.
Now the action value is actually to a dot PHP file.
PHP is again a programming language,
and because there's no HTTP,
it must be that register 1 dot PHP lives in the appliance,
or really in the same web server
as whatever file I'm current viewing.
So method equals post.
It turns out that not all the data you send in an URL needs
to be transmitted in the clear.
In fact, it would be a very bad thing if your password
and credit card number and anything private was just sent
to a server via the URL.
Because one, you can see it.
That's not so worrisome.
But your roommate can see it, if he or she goes poking
around your browser history.
So thankfully, there's another way to send information
from browser to server, and that's not using HTTP get,
but rather it's using something called HTTP post.
And to induce a post, you simply say method equals quote
unquote post.
So post is going to keep the information out of the URL,
but it's still going to send.
All right, so what comes next?
There's apparently a table tag here, table row, table data.
And this just creates some kind of tabular structure.
What kind of tabular structure?
Well behind the scenes here, there's an invisible table.
The name, captain, gender, and dorm words are
in the left column, and all of the form fields are
in the right column there.
So that's what's going on there invisibly.
And if I go back to the source here,
notice some familiar things now.
So I see mention of, like, dorm, and gender, and captain,
and [Inaudible] candidate, grades,
[Inaudible] so let's see how these are inputted.
So name, colon.
So this TD tag, table data.
This means left column.
This next one means right column.
And I'm using an input tag that has a name of name.
But this means person's name, freshman's name.
And then type equals text, I have a text box here,
so there's also type equals check box to say yes
or no you want to be a captain for the team.
Gender is a radio button, so this is one
of these mutually exclusive ones
where you can either click this button or this one.
And clicking one unchecks the other.
And then dorm is a drop down menu.
Otherwise known as a select menu in HTML.
Whereby the name of this HTTP value is going to be dorm.
And it comes with a whole bunch of options so I just typed
out option value, quote unquote, nothing.
So it defaults to nothing.
Then app [Inaudible] Canada's gray,
green [Inaudible] and so forth.
And notice the dichotomy here.
Just like with anchor tags
where you can have an URL that's clickable
but the word you're clicking is different
from what the user actually ends up at.
Same here with select menus.
With drop down menus.
The option value, quote unquote.
This is what gets sent to the server.
This is what the user is going to see.
In this case, for simplicity, they're the same.
But if you wanted to have a more user friendly description,
maybe have more words than just two,
but still just send something succinct
to the server you can do that, hence, this dichotomy.
And then if I scroll down further, we're almost done
with the HTML, here's my submit button, value equals register,
and then the rest of the page gets closed.
So let's see what happens when I fill this out.
So David, captain, M, let's say Mathews, say register.
Okay, I didn't actually implement this side
of it either.
But I did get redirected to a register 1 dot PHP file.
And it's in this file that we'll see the beginnings
of our web programming.
So let's go into G edit.
Let me go ahead and open up in my [Inaudible] directory.
First, [Inaudible] 1 dot PHP.
So notice a couple of things.
Even though, and let me go back to the browser,
we started that at this page here, notice what the URL was.
Notice that the URL I started at, even though it's only HTML
when I look at it, it actually is a PHP page.
So here's the interesting thing about PHP.
You can co-mingle your PHP code which we'll soon see, and HTML,
whereby PHP can generate more HTML.
And just to make this more concrete, this is actually kind
of an inefficient way of out putting dorms, right?
Typing out that list of dorms is actually pretty tedious
and boring.
And if you have multiple web sites that ask students
where they live I'm every time copying and pasting or typing
out a dozen or so dorms.
Well, kind of be nice to put that dorm information
in a database, just ask the database give me all
of the dorms.
And then have a for loop or a while loop that prints out each
of those option HTML tags.
And indeed we can do that.
We're not doing it yet,
but that's why you might want an actual programming language
so you can ask a database or some other source
for information, and then only write like two
or three lines, not a dozen or more.
So let's actually look, then, at [Inaudible] 1 dot PHP.
And even though it's called PHP, it's all HTML.
So notice that I'm not yet writing any PHP code,
but I could be in register 1 dot PHP.
So notice that register 1 actually has a bit of code.
Let me zoom out so this is all clear.
Notice the following features.
At the very top of a PHP file I have open bracket question mark.
So this looks kind of like a tag, but the fact
that the question mark is right there means this is not HTML,
here comes some PHP.
This is necessary because on the server
or in this case the appliance, when the web server notices hmm,
this URL ends with dot PHP.
That is not a static file.
That is not HTML, that is not CSS.
That is a program.
So the web server is going to notice the dot PHP file name.
It is then going to execute this program.
It's going to execute the file called register 1 dot PHP.
What does it mean to execute the file?
Well, it's going to look anywhere there's an open bracket
question mark and then some stuff,
followed by a question mark closed bracket.
The web server is going to execute that PHP code,
and whatever that code outputs via print def
or similar will be sent to the browser.
It doesn't need to out put anything, but it can.
So let's see what's actually happening here.
First of all, all of this is comments.
And for the moment a big distraction.
So I'm going to delete all of those comments.
They're just like C comments.
But in this case we're in the context of PHP.
But it looks like had I actually been a little difficult
and not typed in David and mail and captain and Mathews,
I actually would have not submitted this
form successfully.
So let's actually try that.
Let me go back to my browser and not be a cooperative user.
I'm going to uncheck that.
I'm going to unchoose a dorm.
And I'm only going to provide gender
and name, and I click register.
And now notice it did not submit.
All right, maybe it was my mistake.
Let me do it again.
I'm not going to check --
they don't need to know my gender or my dorm.
I'm just going to register.
Well, apparently they do.
Because notice I'm going back to [Inaudible] 1 dot PHP.
I'm not going to the registration page it seems.
So why is that?
In register 1 dot PHP there's a very simple branch,
a very simple condition.
So think back to scratch,
think back to C. The idea is the same even though the syntax is a
little different.
Notice what's going to happen here.
If empty, so turns out empty is a function that turns true
if the variable you give it is empty.
There's nothing there, otherwise it returns false.
So turns out this is a variable.
So in PHP what's nice is any time you submit a form
to the server, if you submit using method equals quote
unquote post, all of your form inputs are stored
in one big variable, and that variable turns
out is a hash table.
Recall that a hash table is the fancy new data structure
that you're playing with, perhaps, for problem set six,
and it allows you to store keys and then values in the case
of problem set six if you're using a hash table,
the key is the word from the dictionary,
and the value is something like yes or no.
It's there or it's not there.
That's the kind of answer.
So in the case of this,
the variable here is called dollar sign underscore post.
Frankly, it's a stupid name,
the fact that there's an underscore is annoying.
The fact that it's upper case though
at least suggests that it's important.
And dollar sign underscore post is a special variable,
a hash table, if you will, that you can index
into just like an array.
So the fact that I'm saying dollar sign underscore post open
bracket, close bracket, and then in quotes inside of it name,
means go inside of this hash table and give me the value
of the parameter called name.
If the user types in David,
that's what I'm going to get back.
If the user typed in nothing, I'm going to get nothing back.
And so this function empty is going to return true.
Because indeed the form field was empty.
The double vertical bars here mean the same thing as in C,
or if the gender field is empty,
or if the dorm field is empty, what do I want to do?
I want to do what's inside of this if condition.
And what's inside of this if condition?
A new function, header.
Header takes an argument and what does this suggest,
where have we seen headers before?
Well, think back to Monday when we used LiveHTTPHeaders,
and we sniffed our web traffic.
And among the headers were things like get slash HTTP,
and host, colon, and then there was some mention
of your browser.
There was a lot of interesting or juicy data inside
of the headers that we humans don't see, but the browser
and server are seeing.
Well, turns out another one
of them is the so-called location header.
If you've ever visited a web site
and then been magically redirected
to some other web site nearly instantly, how is that working
without human intervention by you?
Well, what the server is doing if you visit Google.com,
and Google decides we don't want you using Google.com,
we want you using www.Google.com.
What Google's server will send is an HTTP header
that looks like this.
Location, colon, and then the URL they want you to go to.
Let's actually try to see this.
Let me go back to my browser.
I'm going to go ahead and actually clear my history
so that we haven't cached any of the previous Google results.
And I'm going to go ahead and open
up LiveHTTPHeaders, just like Monday.
And I'm going to visit not www.google.com,
but more specifically HTTP colon//Google.com,
and hit enter.
And notice the URL definitely changed.
This is not my browser doing this, per se, it's the server.
Because if I scroll up notice that here's what I asked Google.
Give me slash on Google.com,
and you know what Google said secretly to me?
We have moved permanently to http://www.Google.com.
now why? Mostly it's for branding purposes.
But also sometimes for technical purposes.
It is absolutely possible for both something.com
or www.something.com to work.
But in Google's case, they decided
that they are branding themselves as www.Google.com.
We've done the same with CS 50 dot net.
But if you watch the videos we chose CS 50 dot TV,
with no W-W-W, just because it sounded, frankly, better.
And you can do that with your web server.
So what this question is asking is
if the user didn't give me a name, didn't give me a gender,
or didn't give me a dorm, to hell with them.
Redirect them back to the very same URL from whence they came,
which is this URL here.
And that's exactly what someone like Google is doing.
They're not using PHP.
But they have an if condition somewhere that says
if not www.google.com go to Google.com.
And they will force your browser to actually go to that point.
Now just to fast forward to a teaser, I'm going to go ahead
and open up register 8, which is going
to be version -- nope, not register 8.
Let's try register 3.
So register 3 dot PHP is going
to be we'll see the third version
of where we're going with this.
And in this line of code notice I'm reversing the question.
If name is not empty, and gender is not empty,
thanks to the exclamation point, and dorm is not empty,
what you can do in PHP amazingly simply, or relatively simply,
is here are eight or so lines of code that are going
to create a variable called 2 as an aside
or as you might have inferred variables in PHP just
because all start with dollar signs.
There's going to create a variable called subject.
It's going to create a variable called body.
This dot operator is concatenation.
So this is just a stylistic thing.
This is all one huge string and I'm substituting
in the user's name, captain, gender,
and dorm into this string.
Then this is here just for a from address, and then this.
If you want in a language like PHP to send someone an e-mail
from an arbitrary address to an arbitrary address,
much like the proctor might have wanted back in the day
to confirm someone's registration,
it's one line of code.
It's a function called mail.
Takes a few arguments, the to field, subject field, body,
and any additional e-mail headers, and viola,
Freshman now has received an e-mail confirmation
of their registration.
And this is what's going to be really exciting about PHP.
Even though we've got some new syntax
and some new mental constructs here to think about,
doing things that are useful
and compelling will consistently reduce
to very few lines of code.
PHP giving us the same features as C, ultimately,
but much more user friendly, much easier to write,
and much less code to write,
and with it can we build some amazing things come
final project.
With that said, we will see you on Monday.