>> JASON HIRSCHHORN: Welcome everyone to week eight.
We have an exciting week ahead of us.
You guys have dove in this past couple of lectures to PHP, SQL, HTML, CSS, so
four brand new languages that are going to take up the rest this course.
We'll also learn a couple of other languages before course's end.
But anyway, needless to say, this is a very exciting time in CS50, now you
have mastered C, ostensibly, and are moving on to programming for websites.
>> So this week, we are going to go on a whirlwind tour through the four
languages I just mentioned, HTML, CSS, PHP, and SQL.
And hopefully, we will leave plenty of time at the end of section to talk
about this week's P set and answer any questions you all have.
>> Every week, the same list of resources for you, to help you with the week's
problem set and going over the material--
but this week in particular, for these web-based problem sets, there are a
host of other resources out there that you will likely
find incredibly helpful.
I have them up here.
I'll email you this after section, and this also be online.
>> But in particular, there are plenty of great resources out there.
There are also some not so great ones, so be wary of those.
But on this slide, I have four good resources, one for each of the
languages that you'll be working with this week--
one reference sheet for HTML, a reference sheet for CSS.
This right here is the PHP manual.
>> So instead of typing man and then a PHP command, this is where you would
go to look up the function prototype and examples and also some tips and
tricks for using PHP functions.
You will use this site often, so I encourage you to become
familiar with it.
It can be a little technical, but it also provides a ton of resources and
examples for all of the functions and even other, like how to use arrays or
different types of variables.
This site is very helpful for PHP.
>> And then, for SQL, if you dove into this week's problem set, you'll know
that we are using a database.
And we access that database through a relatively nice user interface.
Or that's one way to access that database.
The user interface is called phpMyAdmin.
There's a SQL tab, which we'll look at later on today.
>> And you can type into their sample SQL queries, to do things in your database
and then run those queries.
And if they're correct, it'll say, this one's correct.
If they're incorrect, it'll say, it's incorrect.
That's a great place to practice your SQL queries before writing them into
your code, to make sure you have the format correct.
>> Finally, one other website on here.
This is the website where you can go and check to make sure your
HTML code is valid.
So before turning your problems set this week, make sure all of
your HTML is valid.
>> Last week, you had run valgrind, to make sure you had no memory leaks.
This week, you need to make sure all of your code is valid HTML5.
If it's not valid HTML5, you're going to get points off.
>> So make sure--
just because it works does not mean it's completely valid.
Run your code through this website before turning it in.
Again, here's the website.
>> If you have any feedback for me, we have a couple of more sections left,
and I always want to do what I can to provide you all with the best section
experience possible.
So let me know if there's anything I can do to improve or if there are
things you see that I could do better.
Thank you, Avi.
Put it on the website.
>> This was the bike I had when I was, let's say, four at home.
It's a Teenage Mutant Ninja Turtle biking, in case you can't tell,
because it's a little blurry.
You can get it now at ToysRUs for, I think, about $100.
>> But the feature of this bike that I want you to pay attention to are these
right here.
These are the training wheels.
Up until now, you have been handheld through C. And we've taken a long
time, two months plus, to go through C.
>> For these next couple of languages, we're not going to
spend that much time.
The training wheels are coming off.
And we're going to dive into these languages quickly and move through
them quickly, which isn't to say that we're just going to leave you swimming
out there with no way to support yourself or figure out how these
languages work.
I just showed you a list of resources to help you.
>> But keep in mind that PHP is incredibly similar to C. We'll go over
it today and some of the differences.
But for the most part, there are for loops.
There are if conditions.
>> When you want to solve a problem, you're going to use a
combination of those.
It's very similar.
The logic should be very similar to what you've done in the past.
What's really new this week is the syntax and how you express yourself.
And you want to write a for loop, but it might look a little bit different.
Or you want to create an array, but it might look a little bit different.
>> So keep in mind that, moving forward, the logic is very similar to what
you've done in the past.
But you're now going to be encountering a lot of new syntax.
And we are not going to walk you through all elements of the syntax.
So it's really up to you to figure out, online or through reaching out on
Discuss or emailing me or talking to one another, how to write things in
PHP and how to write SQL queries and how to use HTML and CSS.
>> But just so you know, it's not that we're trying to throw you out there
again to swim the sharks.
This is what you will likely do with your final project, if you choose a
different language, like IOS and Objective C, or if you decide to start
programming in the future and dive into other languages,
like Python or Ruby.
>> Oftentimes, the logic is very similar across all of these languages, and the
syntax is what's different.
And it will be up to you, as the programmer, to go use the web
resources available to you and figure out how to express what you know how
to express in C, in a different language.
So this is good practice, both for your final project, and again, for
what you will likely do after you leave CS50.
>> Before we move on, does anybody have any questions about what
I've done so far?
Great.
Let's move on.
>> First, we're going to talk briefly about the chmod command.
This, we'll do at the start of your problems set.
One of the very first instructions for you, after you download the
distribution code, is to change the permissions of the files and
directories you receive.
>> Can anybody venture a guess or know why it's important to change the
permissions of certain files and directories on your computer?
Avi--
>> AUDIENCE: Then no one except for you can see what you're doing?
>> JASON HIRSCHHORN: OK.
So if we want to put something on the web and you have permissions set that
only you can see something, then nobody else can
see what you've created.
What else?
Yeah.
>> AUDIENCE: Prevent anybody else that you don't want to see something, from
seeing something.
>> JASON HIRSCHHORN: That's true also.
There's probably some code that you write, that you don't
want people to see.
You're probably OK with people seeing your HTML and your JavaScript.
But your PHP, a back end code, a lot of the logic to your code, maybe the
things that store some of your passwords for your database, you don't
want people to see that type of information.
>> So it's important that, each file and directory we create has permissions
applicable to whether or not we want people to see those types of files and
directories and be able to access them and potentially even change them.
>> So there are three types of permissions.
There's a read permission, which means you can read a file or a list the
contents of the directory.
There's the write permission, which means you can change a file or change
a directory and then the execute permission, which means you can
execute a file or rather, you can move into a directory.
So CD something, if you have the permission to execute it, you can move
into that directory.
>> This is a brief example.
Again, you've gone over this in the problem set.
But I create a directory with the mkdir command.
I change the permissions.
These two lines actually do the exact same thing.
It's to illustrate that the syntax for changing permissions, whether you do
the a+x or 711, those are the same.
>> We look down at this nice table.
We see that there are user permissions first.
That's you, the individual, and your server, potentially.
And then there's group and others.
The differences between those two are relatively trivial.
So generally, we'll lump those together.
>> But essentially, if we have a file called includes that we want to be
able to edit ourselves and that we want others to be able to execute,
it's the permission 711.
And we see that down here in this table.
We have a read, write, and execute.
For each of us, we want to be able to do those.
Group and others, we only want them to be able to execute.
>> The way we translate that into a number of
permission is through binary.
So if we have three ones, that's a 1 in the ones column, a 1 in the twos
column, a 1 the fours column.
That's 7 right there.
And this permission is 1.
This permission is 1.
So 711 when is the same as giving ourselves read, write, and execute,
and everybody else execute privileges.
>> This line right here, we generally will have read and write when we
create a directory.
So this line here just adds execute privileges to everyone.
So that would be akin to, in addition to what we have,
adding 1, 1, 1 to everybody.
>> Whereas this, it's unnecessary to add read and write.
But if you're going to use the numbers, you can't just add something.
You overwrite whatever permission were there and implement them with the new
number you give.
That was pretty quick.
Does anybody have any questions about changing permissions?
>> OK.
If I have a PHP file, what permissions do I want it to have?
This is in the problem set spec.
So you can look at the spec and then read me the answer.
>> AUDIENCE: You want the user to have read-write permissions.
And you want everybody else to have nothing.
>> JASON HIRSCHHORN: And what numbers is that?
>> AUDIENCE: 600.
>> JASON HIRSCHHORN: 600.
So chmod 600-- whenever you print a PHP file, chmod it to 600.
OK.
I have a directory.
Somebody besides Jeff, I have a file folder.
What permissions do I want to give to that folder--
also in the problem set spec, right below this answer or
the previous answer?
Also potentially on the slide--
Marcus.
>> AUDIENCE: For the
folder, it's 711.
JASON HIRSCHHORN: 711--
so a folder, you want to give 711.
You want to be able to read that folder, change directories, move into
that folder.
And you want everybody else to be able to navigate within that folder, but
not necessarily change its contents.
What about a non-PHP file, say, a JavaScript file?
What permissions do we want to give that type of file?
>> AUDIENCE: 644.
>> JASON HIRSCHHORN: 644--
why do we want to give it 644?
>> AUDIENCE: To let other people read it.
And you read or write it.
>> JASON HIRSCHHORN: So right, everybody else can read that JavaScript file.
And you can change that, in addition to being able to read it.
So one of the most common bugs people have with this problem set and their
final project, if it's a web-based final project is, they won't have set
the correct permissions.
And they won't be able to see their website.
Or a particular part of their website.
>> So make sure you set the permissions correctly.
Don't just assume that it will do it automatically for you.
>> OK.
That was a small thing that we spent a good amount of time on, so
we could nail it.
Let's move on to HTML.
>> And again, for these next four topics, we're going to go through them
relatively quickly.
So please feel free to stop me at any time, if you have any questions,
whether they're related to what I cover or something from lecture or
even from the problem set.
Stop me whenever you need to.
When we get to the end, we'll just start going over the problem set.
>> So HTML stands for HyperText Markup Language.
It is not a programming language.
All it does is structure your content and also provide some metadata.
So for example, presumably, many of you have used Facebook before.
And you can include links in, or you can put a link as your status.
>> And then, you'll notice that link always has a nice picture
to it and some text.
Generally, that is some metadata for a web page.
And it's Facebook-specific metadata.
And then, when Facebook is reading that page and inserting that link, it
looks for the specific metadata, so it knows what picture to display, what
title to display, and what abstract text to display.
>> So we can include metadata with our web page using HTML.
And it also helps us structure the content, generally, what
we want to go where.
>> Everything in HTML is an element.
And elements right here--
this CS50, text is the element.
And it has some tags.
It has this a tag.
And we notice there is an a at the beginning and then a slash a, so
closing the a tag at the end.
Sometimes, there's not an open tag and a close tag.
There's just one thing.
>> We'll see an example of that on the next slide.
So you don't need an open and a close tag.
But for this, we are encasing this CS50 element in the a anchor tag.
And essentially, these tags tell the browser what to do with
the particular element.
>> So again, CS50 is the text we're going to see.
And it is going to be a type of anchor.
Anchor is essentially used for links to something.
In particular, as you can already tell, this is a
link to the CS50 homepage.
>> The next part of the tag-- or generally, a part of tags are
attributes.
And we see right here, that the a tag has one
attribute, this href attribute.
And they modify a particular tag.
In fact, if you go to one of the websites or the references I gave you
before or look up the a tag online, you'll notice there are a ton of
potential attributes.
>> This is probably one of the most common.
This is telling me to create a link to the specific website.
And attributes generally are given, if not exclusively given,
in key-value pairs.
>> So here's the key, href.
And the value is this right here.
And that will come in handy later on, when we start using some libraries to
help us code in JavaScript or write HTML content.
We are often going to be-- just like we would do array bracket 0 and that
would give us some value.
>> In the future, we'll be doing a lot of things like something bracket href.
And that'll give us the value of the href, or if we want to update the href
key and then give it a particular value.
So just like with arrays where we had key 0 or key 1 or key 2 or even with a
hash table, well, with your hash tables as well, you probably had-- it
was an array, so key 0, key 1, key 2.
>> That index there, we can think of that as a key.
And the value is whatever was stored there.
All of these attributes are key-value pairs.
And that will be important for changing them or updating them or
inserting them later on.
>> Finally, you've seen this structure before, but this is the most basic
structure of HTML page.
At the top, we tell you that this is in fact HTML.
And then we have an open HTML tag and a close HTML tag.
So everything inside of this is the HTML.
>> We see the head and the body.
The head of your document generally includes what?
Any guesses for what you put in the head?
>> AUDIENCE: You put the title and style.
>> JASON HIRSCHHORN: The title.
That was a great guess.
I may have tipped you off to the.
What are some other things?
We mentioned one of them that might go in the head.
>> AUDIENCE: He said, styles.
>> JASON HIRSCHHORN: Styles--
so if you want to link in a JavaScript or even a CSS, which you're talking
about when you're talking about styles.
Another file, you want to link in an outside file, that will probably going
in the head.
>> What else?
We mentioned a couple of slides ago one of the things that
HTML can do for you.
It can provide--
starts with a M--
>> AUDIENCE: Metadata.
>> JASON HIRSCHHORN: Metadata-- so a lot of the metadata will go in the head,
because that will not necessarily need to be part of the body of your code.
That's generally-- the body is the content, what somebody sees.
And so I just gave away the answer to my next question.
But in the body is generally the content that's going to be displayed
on the web page.
>> As we will see, complicated websites tend to intermingle or change up what
they put in the head and the body.
But generally, the head contains things that the user is not going to
see on the screen.
It links in other files and provides metadata.
Whereas, the body contains everything the user is going to see.
Any idea what this p tag means?
>> AUDIENCE: Paragraph?
>> AUDIENCE: Print.
>> AUDIENCE: Doesn't mean print.
>> AUDIENCE: Does it mean paragraph?
>> JASON HIRSCHHORN: Paragraph-- so this is a paragraph.
And this p tag, I could have just typed this on the screen and then
included a line break at the end of it.
Anybody know how to include a line break?
>> AUDIENCE: pr--
>> JASON HIRSCHHORN: pr--
>> AUDIENCE: Slash pr?
>> JASON HIRSCHHORN: pr slash stands for line break.
But paragraphs have specific formatting.
And we'll get to formatting in a second, when we talk about CSS.
But everything inside these p tags will have some default formatting
associated with it, probably some spacing in between different
paragraphs.
And it'll be one way to differentiate blocks of code.
>> Any other tags--
what are other tags that you've seen?
>> JASON HIRSCHHORN: h1 through h6.
h1 through h6, and what's that?
>> AUDIENCE: It will denote how big and bold the letters are.
>> JASON HIRSCHHORN: Right, it stands for header.
And so header1 is a big header.
It'll probably, by default, be bold, a large font size, probably centered on
the screen, all the way down to h6, which is a smaller font size, less
emphasized.
Of course, you can, in you're CSS file or somewhere in your code-- which,
again, we'll get to that in a second-- change what the default behavior
of an h1 tag is.
>> But keep in mind that Chrome, Safari, Firefox, Internet Explorer all have
default looks for a lot of these standard tags.
You can, again, always change what they look like.
Any other tags that everybody has seen?
Yeah--
>> AUDIENCE: A div site.
>> JASON HIRSCHHORN: A div tag-- div tag doesn't have any built-in format, per
se, that is used to block off different types of code.
Any other tags?
Yes.
>> AUDIENCE: li--
>> JASON HIRSCHHORN: li--
what's li for?
>> AUDIENCE: List.
>> AUDIENCE: List
>> JASON HIRSCHHORN: li is for list elements.
There are two types of lists.
What are the two types?
>> AUDIENCE: Ordered and unordered.
>> JASON HIRSCHHORN: Ordered and unordered-- so ul stands
for unordered list.
That's if you want a bullet point, a list of bullets.
An ordered list is a numbered list.
And so you'll do an open ul tag and then tons of list elements and then
close the ul tag. and that will create an unordered list.
>> We're going to see some examples of HTML in a bit.
But before then, I want to get to CSS.
And CSS stands for Cascading Style Sheets.
And this is very closely related to HTML but slightly different.
This helps you format all the content that HTML structures.
>> So in CSS, we generally don't want to style every single header or every
single image or every single paragraph.
We want to style some elements or maybe a specific element.
And the way we style a specific element is to give it an ID.
>> So this is an attribute.
It has a key and a value.
ID is the key.
Logo is the value.
I picked logo randomly.
And if you give something an ID, generally, that should only be given
to one element.
>> And then, in your style sheet, you can style that particular element, however
you want it to look.
If you want to style a number of elements, maybe it's a certain class
of headers, only some of your headers.
Maybe it's a header and an image and a paragraph you all want to be centered.
Then you can give those groups of elements all a class.
And you can give the class specific styles.
So an ID and a class are two ways to break up your code, so you can help be
more specific in what you style.
>> There are three ways to style.
The first one is, with this style attribute.
So you see, the style key is style.
The style value is actually another key value list.
>> In this case, I picked one key, text-align.
And I said, center.
You might be asking yourself at this point, how did I know about
text-align.
What does that even do?
That's a great question to ask, and we're going to get there in a second.
So that's one way to style something, just give it the style attribute.
>> Another way to style something is-- this is Akshar mentioned earlier.
You can use style tags and put that in the head of your HTML document.
So you're basically saying, the content inside here
is some style content.
And the format for that is the thing you want to style and then, inside of
curly braces, the key value pair of attributes that you want to give to
that particular type of element.
>> Finally, and this is the most common way.
And this is the way we do it in p set 7.
It's an external style sheet.
So you have a .css file.
And inside of it, you see a lot of things that look like this, the name
of some type of element or an ID or a class and then, inside of curly
braces, a list of key value pairs.
>> Of course, if you create an external file, you're going to
need to include it--
sharp include, that would be the C analogy--
in your HTML file.
So you have to include this code in your HTML file.
This being the name of the file and assuming it's in the same directory.
>> OK.
That was a lot.
And we're now going to breathe and look at some real, live website and
explore this more.
But before we do that, does anybody have any questions?
>> So if you want to do this along with me, we can go to the appliance.
And I chose the CS50 home page.
You can do this with any website.
But why don't we start with the CS50 homepage?
>> Let's refresh.
I actually highly recommend you doing this along with me, because what we
are going to do now is going to be incredibly handy for you, not only in
P-Set 7, but in P-Set 8 as well.
Yeah.
>> AUDIENCE: Is there a way to do comments in HTML, without using PHP?
>> JASON HIRSCHHORN: Yes, you can make comments in HTML.
>> AUDIENCE: What's the syntax?
>> AUDIENCE: Exclamation mark dash dash.
>> AUDIENCE: OK.
>> JASON HIRSCHHORN: Yes.
That is the syntax.
You can make comments in HTML.
You can make comments in PHP.
>> As you'll see, comment in HTML will still show up, when we look at the
HTML source code of a particular site.
So this cs50.net.
If you right click in most modern browsers on most any page, you view
the page source.
So let's do that on CS50.
>> And lo and behold, we see a giant thing.
CS50 actually looks pretty nice.
A lot of websites won't look this nice.
If you go to Google's homepage and open it up.
It won't look this nice.
>> But you notice that, at the top--
this is kind of small.
Let's make this larger.
OK.
At the top, DOCTYPE HTML, that's familiar.
Then we see the open HTML tag and the head, right here, all
of these meta tags.
And you can see this og, not going to go into that now.
But I am almost positive at that those would be Facebook.
>> That is actually the Facebook.
I think that stands for open graph.
So remember, I was mentioning there is Faceboook-specific metadata you can
give to a page.
That's what is right here.
>> So when you link this page on Facebook, the image it's going to show
is this image right here.
And you actually see that it's Facebook, because it's
the Facebook image.
>> But anyway, we're getting aside.
So we have some metadata tags here.
We see the CS50 title.
And again, the title is what goes up here in the browser tab.
We see this is linking in, right here, an external JavaScript file.
>> We haven't talked about JavaScript much, but next week-- and certainly if
you're doing a web-based problem set, you will be using JavaScript.
This is how you link in external JavaScript files.
We see right here, finally, the CSS style sheet, that documents these
styles of this code.
>> Let's actually open that up and take a look really quickly.
This looks crazy.
There's no way I would be able to read through.
So you can actually though, if you take a look, you can sort of see that
there are--
there we go.
>> That looks like something we've seen before, background color, setting it
equal to some red-green-blue value.
This stuff sort of shouldn't seem that foreign, even though, when presented
like this, it can be a bit overwhelming.
We're not going to look at this CSS file or spend much time on it, because
it is, again, pretty hard to read.
>> Let's go back to this HTML page for CS50.
And let's scroll down to the body.
And inside we see this div tag.
We see a header right here.
We see the anchor tag.
>> And this list element is given a specific class.
And we see that class repeated over and over again.
There you are Curtis.
There is the comment in HTML5.
>> And as you notice, we can still see it, but it's not showing up.
It's actually really interesting.
It looks like this scores list element is commented out.
If we go to this page, again, it still appears there, so interesting.
>> Oh, that's why, because of this next line.
What else do we see of interest?
The rest of this is more confusing, in dealing with this right half of the
website , which is a little bit more complex.
>> So this is what some HTML is going to look like.
For me though, this is a little overwhelming, and this doesn't
help me that much.
However, there's something that does, in fact, help me a lot.
>> And that is what I use whenever I'm trying to figure out how something
looks the way it does, or how can I make changes to my website.
And that is a developer tool that is built into Chrome.
So if you go to this three bars right here and go down to tools click on
Developer Tools, a little window will pop up at the bottom of the page.
And in particular, Chrome, since it is wonderful, will format this window and
take the HTML and make it look a lot nicer for you.
So now it's actually some collapsible HTML that you can explore to inspect
the elements of the page.
>> If we want to look at the body, it actually highlights.
When you scroll over a part of the HTML, down in this window, it will
highlight the part it's talking about in the big window.
So let me again try and blow this up a bit.
OK.
>> So let's open the body.
And I'm scrolling over this left div.
And you notice that it's highlighting this left half of the screen.
So let's click on that and expand that.
>> Inside of it, it looks like there are two divs.
There's this first div.
I don't see that highlighted.
I don't know, but it looks like this second one, left inner, is the content
on the left side of the screen.
>> Then there's this thing called header.
It looks like that's highlighting the CS50 part.
If we open that up, we see that it's nothing more than header 1.
It's given an ID, and it's given the text cs50.
>> So again, looking at it through this console or using the developer tools
pane at the bottom of the screen makes exploring this website, hopefully, a
lot less intimidating and a lot more accessible.
It also allows us to understand that this website, though it looks very
pretty and nice, is not all that much more than what you're going to be
doing on Problem Set 7.
And this is totally within your ability to create.
>> If we want to--
the other cool thing about using these tools is, if you right click on the
title, you can edit the HTML.
So let's call it Jason.
And now you'll notice I have changed the HTML on this page.
>> Of course, I haven't changed it permanently.
If I refresh my browser, then it would go back to the original HTML.
But sometimes I want to debug my code, and I don't want to look just have my
gedit window and try and understand what's going on.
>> I want to see what will happen live.
So I'll edit code like this and get it the way I want it to look.
And then I'll make the changes in my code.
>> And I find that it's a lot easier when you can do the things
instantaneously, like that.
Say, again, we want to make another chance, because we're exploring with
HTML and CSS right now.
I can edit the HTML right now.
And I'm going to include a link.
>> So I'm going to change CS50's home page, so it will link to--
let's say-- my home page.
What is the name, if anybody recalls, or what's the attribute I want to give
to an anchor tab when I want it to link somewhere else?
>> AUDIENCE: href?
>> JASON HIRSCHHORN: href--
So now, you'll see that there is an underline under Jason.
That's because Chrome, by default, gives anchors an underline.
You've probably seen that before when you've gone to a web page.
Things that are links are underlined and in blue.
The default style for a link is to generally underline
and put it in blue.
>> If I don't like that, I can change that.
And we'll change it in a second.
But now, also notice that, if I hover over this, in the bottom left of the
screen, right above the word elements is the link that I gave it.
>> So if I did click on this-- and we can right click on this, open a new tab.
This isn't actually my homepage.
It's just my name.
There you go.
We've now turn it into a link.
>> Let's explore some CSS as well.
The beautiful thing-- and I'm going to make this a little bit smaller-- about
this console is, that crazy CSS sheet we saw before, that was really
difficult to parse, is now beautifully laid out for us on the left-hand side
of this pane.
So we can look.
And if we expand this styles tab, we can see all of the different styles
that are associated with, in this case, this particular element, this
link element.
>> If we do the compound styles tab, that just shows us, not where everything
comes from, but essentially all of these styles that are operating on
this particular element right now.
And let's say, we want to change it a bit.
So this is all the styles that are operating on this particular element.
Say we want to change it, because we want to see how something looks.
And we're just playing around right now.
Or we want to test something out, before writing it in code and pushing
it and making it live.
>> We can go to the styles tab.
And in the first box it says, element.style.
And in here, you can insert, you can add something.
>> So I want to--
let's go to my link and the set the background color.
And it actually autofills it for you, all the possible properties.
Background color, and I want to make that blue.
Blus is not a word.
Blue is a word.
>> Did I see it come up?
Oh, is that because it's in the href?
OK.
So I don't see any change here.
And that's because, if we highlight the link, you'll notice that the link
is not actually controlling the properties of this particular element.
It's actually, if we open the link, this header right here that's
controlling what it looks like.
>> So if I want to make the background blue, I actually have to change
background color on the header element.
And now we see that the background is blue.
>> So again, this quickly might be going through this material pretty quickly.
But this is essentially what you're going to be doing.
It's not on Problem Set 7, but certainly when you're
coding on the web.
>> OK.
I want to make the background blue.
Even though, in this case, blue looks pretty ugly.
I can go in here, play around.
I see that changing it to blue does not work on the a.
I have to actually change the header element to include the blue
background.
>> And then, if then I go back to my CSS file, how do I actually set this
background to be blue and make this change stick?
Because if we notice if I refresh the page, all the changes I made are gone.
So I realized, OK, my background is blue.
>> I need to go into that header1 element and change background color to blue.
How do I actually make that change?
Well, recall that, if we go inside of here, this header, the
title has an ID.
And that's title.
>> And so in our CSS file, we can say, OK, take anything with ID of title and
give it this additional property.
How do we reference something with the ID of title, any ideas, or anybody
know how we reference IDs in our CSS file?
>> A hash, that's exactly right.
And you got a hint of that right here.
So somewhere in this CSS file, there's this line of code--
#left #left-inner #header #title.
And it's giving it margin bottom, defining the margin bottom of this
particular element.
>> Well, if I wanted to change that, I would go into this CSS file.
And I could either find this part of the CSS file.
Or I could write my own.
>> I could do hash title curly brace and then background color colon blue
semicolon and close that curly brace.
And that would change the background color of this element to blue.
The reason they give you so many here is that, it's necessary in this case,
because title is a unique ID.
>> But what you can do is nest things.
So this is saying, OK, go to the left.
That's very small.
I apologize for that.
>> But go to the thing with ID left.
Inside of that, look for the thing with ID left inner.
Inside of that look, look for the thing with ID header.
Inside of that, look for the thing ID title and change the ID title.
So this is just a way of nesting things.
Some people like nest it, because it makes it a bit clearer.
>> You'll see down here also, right here, there's no hash.
It's just h1.
That's because h1 is given the name of a generic tag.
And there are some CSS properties associated with every single h1.
So if I found another h1 on this page, I would also see that this style was
applied to it as well.
>> If I wanted to apply a style to a class, how do I reference a class or
talk about a class in a CSS file?
>> AUDIENCE: Dot.
>> JASON HIRSCHHORN: It's with a dot.
So let's go back to this page before.
If I do hash ID.
That's changing the style of the thing with ID.
Or sorry, if I do hash logo, that's finding the thing with the ID of logo
and giving it a particular CSS style.
>> If I do something .top, that's finding everything with the class of top and
changing its styles.
If I do simply h1, that finds every single h1 and gives it the whatever
style I want to give it.
If I do h1 space and then .top.
That will go find all the h1s and then all the ones with the class of top and
then only change those styles to whatever I want to give it.
>> And again, we could have written some of this on our own.
But we wouldn't have gotten that far.
Much better, it seems to actually go on a real live website and see how
they do it and look at all of the fantastic things you get to do.
>> Let's look at one more website before we move on.
And this is one that you'll probably become familiar with.
This is CS50 Finance.
So again, you can actually go in and observe this CSS file on your
computer, because you've downloaded this CSS file, if you downloaded the
problem set.
>> We can go to Tools and Developer Tools.
And we see a much simpler HTML layout.
We have top, middle, and bottom.
And again, something you should be familiar with, because you've looked
through the distribution code for this week's problem set.
>> At the top is, per the code, a single image called.
And that is source of the image.
Say I have finished all of what I wanted to for Problem Set 7.
And it's working correctly, but I want to change how it looks.
And I want to change the background of the top of the page to,
for example, blue.
If it were me, I would come in here and figure out, OK what
do I want to change.
>> Let's see, div ID top, that looks like the top of the page.
So let's go there.
Let's try changing the background color.
Let's go do Alice blue, because that's a nicer one.
>> And you'll notice that--
you probably can't see that.
But there is a light blue, alongside the CS50 logo.
Let's change it instead to red.
And you'll notice now I just changed the background color to red.
>> So now I would go into my CSS file and type #top curly paren right here.
You can see the code right here, curly brace.
And then, I would add background color, red.
And then, there would be a curly brace.
So that is how I would explore and experiment with formatting on the CS50
Finance site.
>> I could do it here and test it out on my browser.
And then, I could go into my actual code and make the changes that will
actually go live and that people actually see, if they were to come to
my specific site.
>> OK.
That was a lot.
I apologize for going through it so quickly.
Does anybody have any questions at all about HTML or CSS?
>> AUDIENCE: Can you just go over how you linked what became Jason, again?
>> JASON HIRSCHHORN: What do you mean linked?
>> AUDIENCE: You provided a link to another website, using the anchor.
>> JASON HIRSCHHORN: So are you asking, just generically, how you make a link?
>> AUDIENCE: Yeah.
>> JASON HIRSCHHORN: OK.
The code for making a link--
>> AUDIENCE: No, like in the HTML.
>> JASON HIRSCHHORN: Down here, you mean?
So if I want to include a link somewhere, say, this is the HTML on my
page right here.
This is the HTML.
Maybe it's open in a file, index.html.
I go in.
>> Let's have this copyright John Harvard link to something.
So we'll edit all this as HTML.
All you do is include the a, so bracket a close bracket at the
beginning, and then bracket slash a close bracket at the end.
>> So now I've included an anchor tag.
And actually, if you click out of this, it will now
format it edit as HTML.
And say, we want to link it.
We'd you the href attribute.
And we say--
>> And now, as you notice, copyright John Harvard is blue.
And when I scroll over it, it's now a link.
So you can write that code.
You can surround pretty much anything you want in an anchor tag and turn it
into a link.
>> AUDIENCE: OK.
Got it.
>> JASON HIRSCHHORN: And if I didn't want it-- of course, sometimes people tend
to think these things that just look blue generically and underlined are
not the prettiest way to make a link.
So if I come over here, you see that, somewhere in a CSS file, there is
written this a and then two curly braces.
So let's say that, for links, I don't want them to become blue, rather I
want the color of a link to be this nice magenta.
>> Let's give it the color.
Let's pick magenta.
Now, all the links on my page have become this nice color of magenta.
Some people don't like colors at all.
Some people don't like underlines.
You get to pick.
>> With links, you can style how they look once you've visited them.
As you'll notice on a lot of pages, links turn purple on you visit them.
You can change that color as well.
Yeah.
>> AUDIENCE: So you change it for every single link.
But if you just wanted to do that link itself, would you just do in the ID
bottom or something?
>> JASON HIRSCHHORN: So great question.
As you noticed here, I changed some part of the CSS that applies to
everything that's an A. If I wanted to just do that link at the bottom, I
would go to my CSS file and probably do just like you said, hash
bottom space a.
And that would give me all As in the bottom.
>> Or I could, alternatively, give it a unique ID and then just do hash link.
And that would allow me to change this out.
However, just doling out IDs willy-nilly is generally a bad
practice, because those should be unique.
And the more you have those, it can get a little confusing.
Yeah.
>> AUDIENCE: Can you give the same ID to multiple owners?
>> JASON HIRSCHHORN: Technically, yes.
Nothing's going to stop you, but you shouldn't You should give it a class.
OK, any other questions about HTML or CSS?
>> OK.
Let us move on to PHP.
Oh, yes.
>> AUDIENCE: What is it about these websites that means that we can edit
them before we refresh.
But once we refresh it reverts back to the initial HTML?
>> JASON HIRSCHHORN: Great question--
so when we've loaded this web page, it's HTML.
And it's JavaScript.
Its PHP is executed to give us whatever type of website we see.
And it's created some HTML, some JavaScript, and some CSS.
And that is now accessible by our computer.
>> And a copy of those files is saved locally on our computer,
for the time being.
So we can edit that local copy.
But of course, we're not editing the server copy.
>> And when we refresh the page, we get another server copy.
And so we see things back as they were.
If we were able, from here, to edit the official website, we'd have a lot
of problems.
>> AUDIENCE: Yeah, so we can read and write that copy.
>> JASON HIRSCHHORN: Right.
We're only making local changes here, but again, very helpful for exploring,
oftentimes.
When I'm Writing my final project, for example, I want to see how some
website made something look the way they did.
I will go in and use this pane down here, to look at what CSS they gave to
it or what color they picked or how they got it so that, when you hovered
over something, the list came down in a nice cascading fashion.
It's a great way to inspect what other websites do and borrow from them.
>> Let's move on to PHP.
PHP stands for, in a recursive sense, PHP Hypertext Processor.
And PHP, what it's going to do is execute code server side.
So we're never going to see PHP code.
>> However, it does play nicely with HTML and often generates
a lot of HTML code.
But as you'll be familiar with Problem Set 7, your PHP code will execute,
generate some HTML, and that's what the user will end up seeing.
>> PHP is incredibly similar to C. However, there are a couple of
differences, and those differences are important to note.
One difference is that variables in PHP are loosely typed.
Does anybody have a sense of what that means?
>> AUDIENCE: No need to cast it yourself.
Like no need to write in text.
>> JASON HIRSCHHORN: I wouldn't use the word cast, but yes, no need to declare
a type for a specific variable.
How instead do we declare a variable?
>> AUDIENCE: Use a dollar sign.
>> JASON HIRSCHHORN: Use a dollar sign.
So $x is a variable.
$1 is a variable.
$string is a variable.
>> Those variables, $x could be an integer.
Then, it could be a string.
Then, it could be a character.
It doesn't really matter.
>> Also, the cool thing about PHP is, say, $x is the string one.
And $y is the character one.
You can add $x and $y, and it'll give you 2, what you'd expect.
So there are operations in PHP.
Because it's loosely typed variables, some implicit casting is done for you
and some operations.
>> You can do operations on things of different types.
Whereas before, you often get an error in C saying, this is not the type
that's supposed to go here.
Only things of this type can go here.
You're not going to get that type of error, generally, in PHP.
So that's one big difference-- how we deal with variables.
>> The second big difference is that PHP code is interpreted.
Wheres, C code is compiled.
What's that mean?
>> Well, for C code you ran it through a compiler.
You generated a binary file.
And you ran that binary file.
You took care of all errors before you generated the binary file.
>> Of course, there might have been segmentation faults, when you ran the
binary file.
But it's not like you forgot to include the definition of printf, or
you didn't use a variable and just created a wasteful variable.
Or you didn't define a function prototype.
>> All that happened before you compiled.
It gave you all of the errors or bad things that it thought might happen.
And then, you had your 0 and 1 file that you ran.
PHP code does not work like that.
>> You're going to write your PHP code.
Then, you're going to save it, presumably.
And at least in P-Set 7, you're going to refresh your web browser, and
you're going to see what happened.
You're going see the output of that PHP code.
>> You might also see, at the top of your page, an error.
Because you had some error in your PHP.
You might still see the rest of the web page is looking fine.
But one part is wrong, and there's an error in that place.
And that's because that part of your PHP code doesn't work.
>> Indeed, when you execute, when you go to something like by.php.
It's going to go through your PHP file line by line and execute it
then and only then.
It's not going to compile it ahead of time or compile one copy and then give
that compiled copy to everybody.
Each time, it's going to go through line by line and execute it.
>> So some lines might work and output something correct.
And other lines might be broken and output an error instead.
So when debugging with PHP, we've given you a couple of helpful things
to help you debug, like the dump function.
>> But generally, you're going to see these errors.
And that's how you're going to know you did something wrong.
But you're only going to see the error once you actually run the code.
>> Another important aspect of PHP and web development is the idea of get
versus post.
Can anybody explain what the difference between get and post are?
Nobody--
yes.
>> AUDIENCE: Doesn't one of them let the user see the data,
and one of them doesn't?
>> JASON HIRSCHHORN: Great.
Yeah, do you have something to add?
>> AUDIENCE: I thin post is a super-global variable.
>> JASON HIRSCHHORN: So both of these variables are given to you.
These are just variables.
And you know they're variables, because right here I
use the dollar sign.
>> These are variables given to you by PHP.
And when you move between web pages, you want to save some information.
You probably want to save if the user is logged in.
That's not saved in GET and POST.
That's saved in something else, a different variable.
>> Anybody know what variable that's saved in, or what variable you use in
P-Set 7, to make sure that the user is logged in?
$_session, that's exactly right, probably important to be familiar with
the names of these things you use often.
>> So you use the session variable to save information from page to page.
That's a super variable.
It exists on every page, maybe like a global variable, if you want to think
about it like that.
>> There are a couple of other variables that allow you to transfer information
from page to page.
In particular, the ones we'll focus on are the GET and the POST variables.
In PHP they look like $_GET and $_POST.
And the difference, as Marcus pointed out, between the two of them is that,
information in $_GET is displayed in the URL.
>> So if we look down here, we see a YouTube link.
We see this question mark.
We see v= and then some value.
Back to this idea of key value pair, the v is the key.
And over here is the value.
>> So if we were to go to this page or coding on this page, we would have a
variable called $_GET.
If we went to $_GET open bracket "v" close bracket, very similar to array
notation, this is an associate array because we're not using indices.
Were using strings as keys.
But very similar idea.
If we went we, would get this value.
>> On this page, we'd be able to use this value.
If we actually look, let's go to a YouTube page.
What video should we watch?
This one, are people Hobbit fans?
>> AUDIENCE: Yes.
>> JASON HIRSCHHORN: So I'm copying their share URL and
pasting it in a new window.
And now, if you look up here, you'll notice that, once again--
I'm going to copy and paste this into gedit, so we can see it bigger.
You'll notice that it has this question mark.
The question mark designates that everything after this is going to be
saved in the get variable.
>> It then has the v, that's the first key and this first value.
Ampersand is special.
Ampersand is saying, OK, we finished the first value.
We are now moving on to another key value pair.
Here, the key is called feature, and the value is youtu.be.
>> So if I was a coding this page and somebody went to this URL and I had
maybe watch.php.
And I was coding this.
And I could use the $_GET variable.
And I would have a v, and I would have a feature.
>> And if I use the v key, I would get this value.
And if I did $_GET bracket "feature" close bracket, I would get this value.
Again, it doesn't necessarily apply to--
obviously, the YouTube keys and values and get information does not apply to
our Problem Set 7.
But there are certain things that we pass via GET in our Problem Set 7.
And certainly, when you go to a web page or are coding your own page, the
$_GET will come in handy when your coding.
>> What is one reason to use $_GET then, if it affords no privacy?
You see all this information that's being transferred.
It's all displayed to the user.
But what's one reason that you might want to save something in $_GET, as
opposed to $_POST?
Why might you want to do that?
>> All right.
I asked you in Quiz 1.
What is the pro of $_GET?
What's one pro?
Yeah--
>> AUDIENCE: It's easier to share information.
>> JASON HIRSCHHORN: I think that's great.
It's easier to share information.
It's easier to bookmark.
>> You can bookmark now, YouTube.com/watch?v= something and go
to that specific video.
If YouTube always did POST requests to different pages, every YouTube URL
would be YouTube.com.
You couldn't bookmark a single video.
Because if you say shared that link with somebody else, they don't
automatically get your post variable.
They're just getting this link, and the link is the same for everybody.
>> So that is one pro.
It allows you to bookmark this information or share this information
or make it a little bit more user-friendly.
Of course, there is no privacy, so we have this post variable.
And post information is not displayed in the URL.
>> It's not completely private.
But it is marginally more private.
And so you'll see this URL down here, cs50.net.
Whether or not you're logged into the website, it's going to have the same
URL, cs50.net.
>> Obviously, something is different, if you're logged into the website.
You have, one, probably input your PIN.
And it has confirmed that with the server.
And it's probably saving some other information.
But the URL does not change at all.
>> And so that's the case, when something is sent by POST.
The URL doesn't change.
This POST information is not displayed in the URL.
But some state has changed, and maybe there is some information saved in the
POST variable.
>> Sorry. before I go into SQL, any questions about PHP, in particular,
questions on things we didn't go over that you've found or any syntax or
logic questions about PHP?
OK.
>> The final language you will be interacting with this week is the
Structured Query Language, SQL, pronounced sequel often.
That allows you to interact with the database in a formalized way.
And it plays very nicely with PHP.
>> As you'll see in Problem Set 7, we've given you a function called query.
And it takes a SQL string and executes that query on the database.
In years past, you were not given this function.
You had to use PHP functions to make the query on the database and check
for errors and then get the results.
>> And actually, it's not that hard, because again, it plays
very nicely with PHP.
And PHP gives you a lot of functions to interact with a SQL database.
So often, the two of these go together.
Of course, you could interact with the SQL database with any
number of other languages.
But PHP is a great one to choose.
>> A database--
we'll go over this quickly, because this is a buzz word we're going to
start using often--
is a collection of tables.
So we can think of it as an Excel file.
An Excel file has multiple tabs on the bottom of the screen.
Each tab we'll now call a table, where a table is a collection of rows.
>> And what is a row?
Well, a row is that same thing in the Excel file.
That just has certain values for each given field or each given column.
It's like an entry in the table.
It's a student, who has an ID, a specific ID, and a specific name and a
specific house.
>> So a database is a collection of tables.
And tables themselves are a number of rows or records.
There are also, in each table, certain fields.
And that specifies what each record is going to have, fields sometimes called
columns but generally called fields.
>> In this very simple table, I have three fields, an ID field, a username
field, and a hash field.
And I have three rows.
Right now, they're empty.
They probably wouldn't be empty if this was my real database.
>> So if you've used Excel, similar idea to what you do in Excel, though,
obviously, now we're going to be able to do much more powerful things on the
information that is stored in our database.
You will be creating yourself one database for Problem Set 7.
But you'll be creating multiple tables within the database.
>> You'll be creating a database or a table for users.
You'll be also creating a table for probably stock transactions, to keep
track of them, because you need to implement a history feature.
Both those tables will have different fields.
For example, in a user field, you probably want their user name and an
ID and a hash of their password.
>> In the Stocks table that keeps track of history or the History table, you
probably don't need the user name and the hash and the ID.
You probably only need one of those values that are unique, to associate
it with a given user.
>> But then, you want to store other things like, what time
was transaction made.
What stock was bought or sold?
How many shares of the stock was bought or sold?
What was the price at which the stock was bought or sold?
>> So again, you're going to be interacting with a databases that's
going to have multiple tables.
Each table is going to have its own set of fields.
However, there will likely be a similar field in each table, that
relates them to one another.
Usually, this is an ID field.
>> Because if every user has a unique ID and you associate that ID with every
transaction that user makes or all of that user's history.
And you have the user's ID.
You can get information from either table.
You can get their username, and you can get all of their transactions.
>> Any questions about databases, or specific questions?
Actually, let's hold that.
We'll be there in two sides.
>> So there are four operations on databases that you will be using in
Problem Set 7 and likely ever be using.
The first thing you want to do is insert a new record into a table or a
new row into a table.
This is the generic function, the generic form, of that SQL query.
>> INSERT INTO the table, whatever columns you want to insert and then
the values that you're going to want to put into those columns or fields.
If you have multiple tables in a database or multiple databases, you
might also need to specify the database and the table that you want
to put things into.
But very simple, if you want to insert into something, you say, here are the
fields I want to insert into.
And here are the values.
>> In some tables, also, and this user's table is a good example.
Probably in this user's table and probably in your user's table in P-Set
7, there's not just a username value.
There's not just a cash value, or field, rather.
There is also an ID field.
>> I'm not going to insert that ID field.
That's going to be given to me automatically, when a
new record is inserted.
So there's some field that you can set to be automatic.
>> Maybe you want to give every user $10,000 of cash off the bat.
So I don't need to insert a number of cash here.
All I need to insert is the user name.
And then, the cash field will be pre-populated, and the ID field will
be pre-populated.
>> So oftentimes, we're not inserting something into every field, because
those other fields are pre-populated.
Because that's how we set up that table.
>> The second thing you're going to want to do is delete a record.
Deleting something is very simple.
You give the table where you want to delete something from.
And you say, OK, I want to delete the record that has a username of Milo.
Or I want to delete all records that have a username of Milo or that were a
transaction from user ID number 2.
Any questions on these two types of queries?
>> AUDIENCE: [INAUDIBLE].
>> JASON HIRSCHHORN: Yes.
So I'm going to use row and record interchangeably and some
with column and field.
But one row is one record.
One column is one field, going back to this table.
>> OK.
The next thing you're probably going to do is get some
information from the table.
That is a Select query.
And again, what table am I selecting from?
And what column do I want to select, or what value do I want to select and
from which row?
>> So the Select is a little specific.
I say, OK, I want this table.
And then I want the column username, and I want it from the row with ID 2.
That's one way to do a Select.
>> Or I can say, give me every single username.
Or I can say, give me an entire row from this table, where
the username is 1.
So there are a couple different ways to do Select queries, depending on how
much information you want,
>> You can always just select everything from that specific table and then loop
through it, picking out the things you want.
But keep in mind, if you're selecting a lot of things from a table and you
have a really big table, that will take some time, so best to only select
things that you're going to end up using.
>> Also, with Select and with all of these other SQL commands as well, I'm
giving you the bare-bones version.
But say, I'm selecting users and I want to print them out alphabetically,
I could select all users and then sort them alphabetically in my code.
>> Or there is a way to write the select query, that selects things in an
alphabetical fashion, based off of a specific column, either ascending or
descending.
So keep in mind that, a lot of what you want to do can probably be done in
the query through an additional attribute.
So do look up these queries online or the other things you can do with these
queries to expand them.
>> Finally, the last thing you want to do is not insert something or delete
something, but rather update something.
And that is done with the update query, and again, what table.
And what change do I want to make?
And to which row or record do I want to make that change?
Any questions on SQL?
>> OK.
So we have about 15 minutes.
And this is the last slide I have.
And hopefully, this last slide is a good segue into the problem set,
because understanding where we want to insert records, delete them, select
them, and update them will help us understand the larger logic and flow
of Problem Set 7.
>> So I know all the answers to these questions.
I'm not going to tell you all of the answers.
But if somebody else would like to present a question to the group or an
answer to one of these question, we can use that as a jumping off point to
talk about the problem set.
Or if somebody has a more generic question off the problem set, feel
free to ask that as well.
And we can start there.
Keep in mind that you being silent is hurting everybody.
Yeah.
>> AUDIENCE: So is the only way to pass variables to and from different web
pages, or the most convenient way, using POST or GET?
>> JASON HIRSCHHORN: So yes, that is the most convenient way to say-- when
somebody fills out a form--
get information on another web page, using GET or POST.
Because of the framework we're using in this problem set, you'll notice
that, a lot of times, we render another page.
we Or we render another file, not necessarily another page.
>> So we pass in a variable.
And then, it renders an HTML page, using the
information from that variable.
That is not technically passing information between
different web pages.
That is passing information between different files.
>> And so we can use any variable to do that.
But yes, if we wanted to pass information from a particular page to
another page, GET and POST would be the way to do that.
Any other questions about the problem set?
>> OK.
Let's go through, then, a specific part of the problem set.
You are going to need to, at one point, display somebody's portfolio on
the screen.
What do I mean when I say portfolio, in the context of this problem set?
>> AUDIENCE: It's like the stocks that they have how, many shares they own,
the price, and how much money they have left.
>> JASON HIRSCHHORN: That sounds great.
So I want to display all the stocks they own for each stock company's
shares and probably how much that's worth, and then a separate variable,
how much money they own.
So say I want to describe that.
Let's start talking about how I could go about doing that, what tables I'm
going to need to have to be able to do that.
Yeah--
>> AUDIENCE: Well users, and then, I guess you can make a table called
Shares or something like that, which would be how many they've bought.
>> JASON HIRSCHHORN: OK.
So I'm going to need a table called Users, which keeps track of the
username, presumably, probably some ID, probably an individual's password.
What is something else that you just said that's associated?
Somebody besides Michael, what is something else that's associated with
each user, unique to them?
>> AUDIENCE: ID.
>> JASON HIRSCHHORN: ID--
what's one other thing that we're probably going to want to
display on this page?
>> AUDIENCE: Their name.
>> JASON HIRSCHHORN: Their name-- what's another thing related to this
particular problem set?
>> AUDIENCE: What stocks they own--
>> JASON HIRSCHHORN: There are going to be a lot of what stocks they own.
What's one the specific value though, that they are going to have
associated with them?
How are they going to buy and sell their stocks?
>> AUDIENCE: Cash.
>> JASON HIRSCHHORN: They're going to have cash.
So each user is going to have one value for cash.
And that's going to be unique to each user.
So in the user's table, it makes sense to put in cash.
>> You could, of course, create another table that has user IDs and their
value of cash.
But it doesn't make sense.
It makes sense to just put all of that in one table.
>> So we're going to have a table with that information.
And then, what's the other table we're going to have?
You said, a Stocks table.
What are we putting in the Stocks table?
Anyone, ideas--
>> AUDIENCE: The company.
>> JASON HIRSCHHORN: We're going to put in the name of the
company, so AAPL for Apple.
Yeah.
>> AUDIENCE: How many shares and how much they're worth.
>> JASON HIRSCHHORN: How many shares, how much they're worth--
what's something else we need in that table?
>> AUDIENCE: A user ID to index it.
>> JASON HIRSCHHORN: A User ID.
So in that table, we'll probably have--
let's say, if it's somebody who owns three stocks, three rows, each with
that user ID or that individual's user ID, but a different company name, a
different number of shares presumably, and a different price value for each
of those stocks.
Again, what I'm saying now isn't necessarily the implementation,
because you realize there are some more efficient ways to implement it.
But this is a good place to start.
>> OK.
So those are the two tables we have.
Now we want to display this page.
What is the first type of query we would need to make.
On each page, assumed that is a user is logged in, we have their user ID.
So what is the first type of query we need to make?
Yeah.
>> AUDIENCE: Their user ID.
>> JASON HIRSCHHORN: We have their user ID, when we're starting to code at the
beginning of our page.
So what's the first type of query we need to make, given a user's ID?
We went over the four types.
There's only four possible answers.
>> AUDIENCE: It is select a record.
>> JASON HIRSCHHORN: A Select--
we want to select from the user's table to get, let's say,
their amount of cash.
And we can print the amount of cash on the top of the screen.
OK.
What's the next type of query we want to do?
>> We have some other things we need to display.
Those are saved in another table.
So how are we going to get that?
>> AUDIENCE: You select for them.
>> JASON HIRSCHHORN: A Select-- again, there are only four options.
Select probably sounds like the right one.
So we need to do another select query, again using that user ID.
And now, we want to return not just one row, bu all rows that match our
criteria, where user ID equals 1.
>> And then we can go and let a loop just print all those out on the screen,
maybe print out the company from each of those on the screen.
Great, that sounds like that's displaying a portfolio, not much more
complicated than that.
>> OK, the user then decides that they have plenty of money left over.
And they want to buy some more shares of a stock.
Let's say, they already own this company's stock too.
>> So they go to your buy page.
They input the company's name.
What is the query, after the input the company's name, that you need to
execute next?
Yeah.
>> AUDIENCE: Update.
>> JASON HIRSCHHORN: Update-- and what table do you want to update?
>> AUDIENCE: Their table, based on their ID number?
>> JASON HIRSCHHORN: So update not the user's table--
so update the Stocks table, where the user ID not only matches, but the
stock name also matches.
You'll get some value.
And then, you'll want to take that value and add however many stocks they
want to buy of it.
>> So you don't want to blindly overwrite that value.
But you can, in fact, take that initial value and just update it.
You can do like a plus equals, rather than just an equals.
>> What is something though-- if we're thinking about this and we want to be
as robust as possible-- we should do before we run that update query?
They want to buy five years of Apple.
Each share of Apple is $200.
>> AUDIENCE: We should check money first.
>> JASON HIRSCHHORN: We should check money first.
We should make sure they have enough money.
What kind of query can we execute to make sure they have enough money?
>> AUDIENCE: Another Select.
>> JASON HIRSCHHORN: A Select--
we select based on their user ID, to get their value of cash.
Do some quick math.
And if that passes muster, they have enough cash.
Then we can run our update.
Or maybe, if not, we pass then.
We give them a warning.
>> OK.
Say they don't have a company.
They're buying a new company.
They're buying Microsoft.
What kind of queries do we want to do, if they want to buy Microsoft?
And they don't own any Microsoft.
Not Manu, anybody else, anybody besides Marcus?
Carlos--
>> AUDIENCE: A Select, to make sure they have enough money.
>> JASON HIRSCHHORN: Sounds good.
>> AUDIENCE: And then you insert on the [INAUDIBLE].
>> JASON HIRSCHHORN: Exactly, we're going to want to insert
into the Stocks table.
And we're going to want to insert.
We can insert their user ID, the name of the company, and how many shares
they want to buy.
>> What are some other operations that are pages or functionality you're
going to have to implement in P-Set 7, that we should go over?
>> AUDIENCE: Actually, I kind of have a question about this one.
Before you display the portfolio, should you checks Yahoo's website to
make sure the stock prices haven't changed?
>> JASON HIRSCHHORN: That's sounds like a good idea.
So what Marcus is saying is, OK, stock prices are constantly changing.
In the stocks that they own table, our table called Stocks, we could save the
price of the stock they bought it at.
>> But that doesn't seem that robust, because the price of the stock is
constantly going to change.
So in fact, you probably don't need to save the price of the stock.
But each time you display their portfolio, you refresh or update the
price of the stock.
>> And if you have-- and you have already.
I know you've all looked in the problem sets back already.
You have realized that we've written some code for you that will allow you
to get the price of a stock, given a company's name.
>> So yes, that probably sounds a bit more robust.
But that table doesn't necessarily need to save the price of the stock.
OK.
What are some other functionalities you need to implement this week that
we can talk about?
I want to talk about them.
>> What do you want to talk about?
It's probably in this spec.
I would just scroll down to the bottom of the spec and ask me the first word
you see that doesn't make sense.
One other functionality--
let's talk about one.
We'll start there.
>> AUDIENCE: Recording the histories.
>> JASON HIRSCHHORN: Recording the history, great one.
So you're going to have to keep track of a history of transactions.
So you want to keep track of every time they buy or sell a stock.
>> I bought my stock.
We just said, it probably makes sense to include a Select, to get their
amount of cash and check back.
It probably is smart then to include an insert or an update, depending on
whether or not they own that stock.
If we also want to keep track of a history, how can we do that?
Does that go in the Stocks table?
>> AUDIENCE: No.
>> JASON HIRSCHHORN: No it probably goes in a different table.
Because say you buy 10 shares of Apple.
Then you buy another 10 shares.
You want tow separate records.
Those are two separate transactions.
>> So we have another table, a History table.
So again, we buy.
We execute a Select, then an Insert or an Update.
What do we do next?
What's the next query we execute when we're buying something?
We want to keep track of history.
Yeah.
>> AUDIENCE: You want to keep track of failed transactions too.
>> JASON HIRSCHHORN: Well, before we say what type of transaction,
what do we want to--
What type of query, Carlos, would allow us to keep track
of things in general?
You have four guesses.
Which one do you think?
>> AUDIENCE: Updating.
>> JASON HIRSCHHORN: Not update.
What's your second guess?
>> AUDIENCE: Selecting.
>> JASON HIRSCHHORN: If you want to keep track of something, you probably want
to write it down somewhere or save it for later.
So if not update, then--
>> AUDIENCE: Insert it.
>> JASON HIRSCHHORN: Insert, there we go.
Yes, so you select the amount of cash they have, sounds great.
They don't have enough cash.
That transaction is not going to work.
No, you don't need to keep track of a transaction if it doesn't work.
Or you can, if you want to give them a hard time.
But you don't have to.
>> Then, you insert or update in their Stocks table.
And now, you have your other table.
You have your history table or whatever you want to call it.
And in that table, you're going to insert a new row.
>> That's probably going to have the user's ID.
It's probably going to have the name of the stock.
It's probably going to have a time that they did it.
And in this case, you ll probably want to insert the price.
Because for a history, you don't care what the current price is.
You care what the price is when they bought or sold something.
>> So it sounds like, to implement buying fully involves a number of different
SQL queries, But honestly, not that much code overall.
OK.
And that takes care of history.
>> Let's say, we want to display our history.
We talked about displaying our portfolio.
How would we display our history?
>> AUDIENCE: Presumably chronologically.
>> JASON HIRSCHHORN: Presumably chronologically--
what query do you think we'd use?
>> AUDIENCE: A select.
>> JASON HIRSCHHORN: A select--
select maybe all rows from that table that match the user ID and then
display them chronologically, sounds good.
Do we need to write code to sort through that list?
>> AUDIENCE: No, because you told us there is an ascending
and descending thing.
>> JASON HIRSCHHORN: Thing?
>> AUDIENCE: Yeah.
>> JASON HIRSCHHORN: Yeah.
OK, do not turn in code to me, that manually sorts through your queries,
to sort them.
That code is already given.
You can write a Select query that sorts things.
Sort them beforehand and then print them out.
It makes so much more sense to do it that way, than the other way.
Yes.
>> AUDIENCE: Do we need to sort them beforehand?
Does that mean you sort them in the database?
>> JASON HIRSCHHORN: The Select query returns them to you sorted.
So do that, rather than just have them return to you in a random order and
then sort them yourself.
Yeah.
>> AUDIENCE: Is there a way to keep it sorted in the database itself, so that
you don't have to sort it every time you--
>> AUDIENCE: Can you insert it sorted?
>> JASON HIRSCHHORN: Question--
does it matter that things are sorted in the database?
>> AUDIENCE: No.
>> JASON HIRSCHHORN: Well, they are sorted.
They're sorted chronologically.
But let's assume that things are sorted
chronologically, from top to bottom.
We have a Google form.
Whenever somebody responds to our Google form, it just gets put in the
bottom of that table.
Does it matter that things are sorted not chronologically?
>> AUDIENCE: If it's not chronological, don't you have to sort it every time
you take info out.
But if it's already sorted, can't you not have to do that additional
function call?
>> JASON HIRSCHHORN: So that's actually a good point.
For us as programmers, it might matter.
And we might want to find a database that doesn't sort things
chronologically.
Or set up our database, so it keeps things sorted by user ID.
>> So that way, say, we have 1,000 user IDs.
Or Facebook, we have millions of user IDs.
We don't want our table to just be random or our database to be random.
It would be nice if all the user IDs were sorted.
So then we could run binary searches on our table and then just find the
specific chunk.
>> So yes, depending on-- if we scaled up, we might want to find a database
that kept things sorted in a different way, so that these queries
would take less time.
And we didn't have to go through our entire database in every single row in
a given table.
But the level we're working at, we don't need to worry about keeping
things sorted.
We can assume that the time it takes that query to run is going to be
negligible, given what we're dealing with.
But yes, great idea-- as we scale up, it might make sense to design our
database in a bit of a different way.
>> One final database design thing I want to mention as well, because you will
be graded, or scored rather, on the design of your database.
We talked about this.
Cash is unique to each user.
So you've got a table called cash that has their user ID and their amount of
cash and then a table called users that has their user
ID and their username.
>> Those tables map onto each other one-to-one.
It probably makes sense for them to be one table.
So let's assume you have a user table that keeps track of
user names and cash.
You now have a table that has the stocks an individual owns.
>> And an individual might own more than one stock.
So these do not map onto each other one-to-one.
It does not make sense to have one giant table that has 30 records that
all repeat a username, that all repeat a password, that all
repeat a number of cash.
But each has maybe a different stock name or a different stock price.
>> It does not make sense to have that many large records.
Be smart about when you create these databases, so that you aren't doing
something silly like that, repeating a lot of unnecessary information.
>> OK.
We have two minutes left.
People outside are excited to join us or probably, presumably,
start their own class.
Does anybody have any questions before we finish up?
>> OK, this was indeed a whirlwind through everything.
I apologize that it had to be so quick and that we couldn't be as hands-on
this week as I would've liked to have been.
But if you have any questions about anything we went over or anything in
this problem set--
presuming you've read it and put in a good-faith effort--
feel free to email me or contact me.
I'm more than happy to work through your code with you or answer any
questions you have.
>> Keep in mind that, this week, a lot of your time will be spent learning the
new syntax and trying to understand how to write SQL queries or PHP
functions or deal with a MVC framework.
A lot of your time this week probably won't be trying to figure out the
crazy logic that we're asking you to do.
A lot of it we just went over is relatively straightforward.
>> So that doesn't mean wait until the last minute.
But it does mean adjust how you do your work accordingly, to make sure
you're understanding and learning the syntax.
So you're not, all of a sudden, knowing exactly what you want to do,
but with no idea how to exactly write it.
OK, I'll see you next week.