DAVID J. MALAN: All right.

This is CS50 and this is lecture 11, so the end is actually quite near.

And among the goals for today, and next time, and our final lecture time

together, is to start to tie things together as far back as week zero.

And in that spirit, I thought we would begin by reflecting on this clip here,

which you may recall from a few weeks ago,

wherein we tried to look in popular media at the perception

that viewers might have of technology, if they relied only

on shows like this, and on CSI, and the like, where what you see on the screen

isn't really technically accurate.

And this is wonderful to say, but most recently did Stranger Things

2 come out, which most of you are probably familiar, and probably

finished, if you're like me, on Saturday after it came out on Friday.

And on the screen--

let me say this, not a spoiler--

but I was so proud of this particular show.

But before we get there, allow us to tease you

with CS50's own take on that same show.

If we could dim the lights.

[STRANGER THINGS THEME PLAYING]

OK, so that was mostly just a set up for the following,

and if you haven't seen Stranger Things, or at least all of the episodes,

I really don't want to alienate the entire internet,

let alone everyone in this room, just close your eyes briefly,

this isn't really a spoiler, it's all technical, doesn't spoil any plot,

but no one is going to care in a few weeks time,

so we thought we'd reveal this.

So now's the time to put your fingers in your ears

and close your eyes if you don't want to know that, at some point in the show,

there's this scene, here.

And of course, in every show out there like CSI and Law

and Order and the like, if you kind of zoom in and enhance the screen,

it's just nonsense, like a crayon type program, like we saw from CSI.

But I was so proud to see that, if you actually zoom in on this screen here,

you see this code, in a language called Visual Basic.

And even though we don't teach Visual Basic,

nor do many people use Visual Basic as much anymore,

can you glean what this programmer was doing on the screen?

What seems to be going on?

AUDIENCE: Is it like getting a four digit password or cracking--

DAVID J. MALAN: Yeah, it was a program with which

to crack a four digit password.

And if you glean all of the various loops in this structure,

you'll actually see that it's trying to come up with a digit after digit

after digit after digit, trying all of them,

until finally, when it finds that value, something interesting happens.

And so now, those of you who have your eyes closed and can hear this,

you can take your fingers out of your ears and we'll proceed.

But perhaps the first example in media of an actual program

that works on the screen.

So now, today, we look back on a model we've

been introducing for some time, MVC, model, view, controller, which is just

a fancy way of describing a type of programming that's

really popular in the web these days, whereby you have a controller, which

is the code that you've been writing, in Pset 6,

and now Pset 7, in application.pi.

The fact that it's called application.pi is just a convention in flask,

but that's where all of your logic goes.

Like the code that actually drives your website.

In what folder or files are your so-called views?

Say again?

AUDIENCE: HTML?

DAVID J. MALAN: Yeah, the HTML file.

So in the templates subdirectory, which is a flask thing also,

you have a bunch of HTML files, which are

the views, the aesthetics, or the presentation of your program's

information.

And then last week, did we introduce, finally, the model, the M in MVC,

which represents your data, your database.

Maybe it's a CSV file, maybe it's in API, for getting stock quotes,

maybe it is a persistent database, wherein you store your users

and stock portfolios and more.

And together, these three entities compose

a pretty interesting application, whether it is a Pset 6 or Pset 7

or beyond.

But today, what we'll do is introduce one more piece and one more language.

I know we've discovered quite a few languages thus far,

Scratch, and C, and Python, and SQL, not to mention HTML and CSS.

But today, we introduce the last of our languages in CS50, JavaScript.

And you'll see that JavaScript is the last of the enabling technologies that

will allow you to build features and tools very familiar to you

nowadays on your phones and on your laptops.

And so, before we do that, let me go ahead and pull up

one example, via which we can bridge last week

and this, a final look at the Frosh IMs website from yesteryear.

And let me go ahead and run this program as follows.

Flask: run.

This is Fosh IMs 4, available in today's distribution code.

And if I go ahead and open up this URL, it's a very simple program,

that I'll zoom in on, that allows the users the ability

to register and to see who is registered and to register themselves.

And if I want to go ahead here and register,

I'm going to see a form like this, and I can choose from the dropdown

my Harvard dormitory, and then actually register my name.

And then in very first version of this, weeks ago, this program did nothing.

We just threw the information away.

Then we did something a little more interesting,

whereby we saved the data to someone's email inbox,

by just sending them an email, then we added CSV files, which weren't bad,

but what are downsides of using just CSV text files?

AUDIENCE: They take a long time to search.

DAVID J. MALAN: Yeah, they could take a long time to search,

because, especially as they grow longer and longer, the best you can do

is linear.

You have to search the whole file just to find one value

because there's no data structure there, it really

is just like an array of lines, if you will, a list of text

that you have to search over.

So we also don't have features like select and insert and delete,

these verbs, or operators, that we actually got from a database

last week, which allows us to do more work, more easily, without having

to write as much code.

We can literally just execute a SQL command,

like select or insert or delete, update or the like.

So, how might we go about building a piece like this?

Well, recall, that if we go into the source code for Frosh IMs 4,

we'd have some entry point, like application.pi,

and a few different routes.

And this might be familiar if you've dived already into CS50 finance,

the first of these routes, up top though, just renders index.HTML,

and that's where I see the menu.

And odds are, an index.HTML is just that bulleted list

of three options, each of which links to a different route.

Then the routes do start to get a little more interesting.

And on the screen here, on line 13 downward,

is the logic, my controller code, so to speak,

that allows me to insert a user into my database.

And how do I do this?

Well, on lines 15 and 16, I ask the question.

If the requests method that's just come in is get, what do I do?

In English?

Put up the register template.

So show the user register.HTML, using the using

the render template function, which we've

used before to spit out HTML files.

Else, if the user has used post, that is,

he or she has clicked a button, presumably, and posted to this same end

point, let's just distinguish the behavior.

If they've submitted a form

via post, then go ahead and execute these five lines here.

And this line here, 18, if not request, or if not request of name and dorm,

that was just a way of saying if the user forgot to give us his or her dorm

or name, then render a failure message, such as that and failure.HTML.

Otherwise, if he or she did give us the information,

we can use CS50's execute method on this DV variable, which we declared up here,

we can insert into the registrants a name and dorm's, specifically these two

values, and then recall that this colon syntax was new.

It's just a convention, in a lot of the SQL world,

when you want to plug-in values, rather than

use PercentS, back from our C days, rather than use curly

braces from our Python F string days, you instead

just pass on two values via these names like name and dorm.

And then what happens here, exactly?

If I go into this web site, and I register David

from St. Matthews, and click register, because the application is

running with flask, I'm told that I'm registered.

And how can I prove as much?

Well, let me go ahead and open up another terminal

and go into today's source code Frosh IMs 4, and then if I type LS,

notice that this is what composes this application.

One of these files is Frosh IMs.db, and if I go ahead and run this command line

tool, SQL light, 3 on [? Frosh IMs ?] db.

I just got a command line interface.

And you might not be comfortable with this approach, and that's fine,

but it allows you to do very simple things like show me my schema.

And I can see, from this textual interface, what the format is

of that database, it's just got one table, called registrants,

and then if I wanted to see who is registered,

maybe besides me, what can I type in this command line interface?

What can I type here?

Yeah?

AUDIENCE: Select star from registrants.

DAVID J. MALAN: Yeah, select star from registrants,

semi-colon, and I see a very text-based table

showing me who is in the database.

And thus far, it's just me.

And I could tinker with this at the command line,

I could update and delete, and so forth, but the key takeaway from last time,

was that once you're a little bit comfortable with SQL,

you can begin to use statements in SQL, put them

between double quotes in Python, and have Python execute those SQL

queries for you on your database.

And meanwhile, let's glimpse at one other feature here.

Before I registered a moment ago, I had this dropdown menu.

And I could have hardcoded this, and that would certainly be fine.

But if I wanted to actually delete a user and, actually, let

me show you this here.

If I go into, what files is that, that's in my templates directory.

And so if I go to register.HTML, here, I hardcoded

all of those dormitories that are available to Harvard students

to register from.

But what about my unregister page?

Let me actually go back and click unregister,

and you'll actually see here, I see kind of a prettier menu

that's got the person's name and their dorm, if he or she is registered.

And I somehow want to unregister the user.

Well, if I go ahead and submit this form, what value might

I want the browser to submit from the browser to the server?

David?

Matthews?

David from Matthews?

Something else?

What should your instincts be for when you submit something from a form

to a server, when you want to act on that data,

like here, like unregistering the user?

What do you think?

AUDIENCE: ID number?

DAVID J. MALAN: Yeah, maybe their ID number.

So, why?

I have this string, David from Matthews, why not

just submit the string, David from Matthews, look for it in my database

and then delete David from Matthews?

AUDIENCE: There could be other Davids in Matthews.

DAVID J. MALAN: Yeah, there's ambiguity, potentially.

If there's a couple or more Davids from Matthews,

coincdentally, you might end up unregistering all of them,

or both of them, or however many they have.

And so you want something primary to identify users.

And primary is an allusion to primary keys, which we said last time,

is generally a number, such as the number one, which we saw a moment ago.