Good morning, everyone.
So today we have.
I think some fun stuff to talk about. So we are on a reorganized schedule.
I owe you
Is the screen cut off? You can't see the whole. How about this? Can you see the browser now?
Is it still cut off.
It's zoomed in. Yes.
Still cut off.
Why is it so.
Top left half. Okay, that's just really dumb.
Why is that?
Try that again!
How about now?
There we go!
That seems to look better.
Are we good?
So, okay, good. So.
I remove the lecture from from the schedule here.
I owe you a lecture at some point.
Probably during fall break.
I'll do a second review or something.
In terms.
Tutorial 3 is out. I'm gonna spend time talking about that today.
The code for assignment. One is now online. The questions are not there.
You will notice.
That the code for this.
Is actually.
Simplification.
Of the code from
From Form Demo. So I'm not going to talk about.
Simple server, to code.
I'm just gonna talk about form demo code. But you will see they are very similar.
So my up.
What I want to talk about today is really explain this code and explain some tools.
What in particular, I want to show you various ways of using the debugger to go through things. I haven't really been wanting you to use debuggers before, but now we're getting to the point where.
Debuggers are more helpful.
And there's some cool tools here.
Now, one thing is, I don't want to. I'm going to try.
Probably switching between windows, and hopefully, that will work. We'll have to see.
How that is.
So before talking about form demo.
We might as well try running it.
So I can show you what it's supposed to do. What you'll see when it comes up.
So 1st thing, let's.
So let's get it. We'll walk through getting it set up.
Salt.
It's my voice a bit robotic. That's not good.
Okay, so that might be on the low bandwidth or something there. But.
Anyway. Yeah, the only robotic sounds is like, it's overly compressed.
Yeah, I'm still overcoming a cold. So a little nasally.
But should be robotic.
Okay, interesting.
So seems like a issue of a zoom.
So now what I'm going to do is share my terminal window.
So let's 1st get over to.
Where I have this all set up.
Oh, that's good! I can check to see what it's doing.
So my terminals there, I've logged in.
I'm now going to.
3.
Now, what I did today, I have form Demo here. Actually, this is old, actually.
So this is the command you do to just grab the code.
Okay.
And now
It actually says, here's the command to run it.
We type head for a text file gives you the 1st several lines. That's enough to just give you that.
That's kind of looking coincidence. Otherwise you have to say.
Less or something to look at. The whole file.
But.
So there!
And this would run. Oh, I forgot something.
What I actually want to do is.
Oh, is! Is my microphone too far down? Let me. I can turn.
How about now? Is that better?
Okay, I can turn up further. But Charles might turn up the volume too high.
I can turn up for the I tend to get distorted. Zoom doesn't tend to.
Like that, anyway.
I just realized I forgot what I connected. I forgot to forward my ports.
So I just did that right now.
Doing this.
That's gonna be very important, as you'll see in a minute. Here.
So this we've done there. And now we're going to T 3.
And see form demo.
And we're gonna say,
Do differently.
I don't want to do. We'll do that inspect, break in a second. Here.
I know, going to stop the share. It's running.
Okay, where do my.
Yeah, there it goes. Now, I'm gonna share.
My browser.
That we're back here.
You go to.
Let's make a little bigger. Not quite that big.
But so this is what you should see when you 1st run the program.
And when you do I can say a mill.
U.S.A!
I'll tell you. It's.
Yeah.
So you hit this.
And then it does this.
So this is the the basic thing.
And if you want to get a listing of everyone's, added.
You can do that, and then.
Press, home we go there.
And if you go back here.
Let's go back to our window here. What was happening while we were doing all this.
See, it was just generating this nice log.
What kind of. So I'm just so I'm just showing the
Simple form, demo the form demo from tutorial 3.
So you'll notice that when we run Form Demo here.
It's that I mean, you get this listening that's provided by when you run the server.
And then we have all these.
Get, you know. HTML.
Gets this. So it's so there's a style. Css, wheel.
And if we look here, we actually have a.
A directory called Static.
And static. There are 2 files. Index. HTML. Index. What gives you the initial.
I think, and then style that Cs is the rest.
So.
Given all the setup.
Now we'll look at the code in a second. But before doing that I want to show you how to run the now, if you've done the appropriate port forwarding.
Or if you're doing this with something like visual studio code, I will show you visual studio code in a sec.
But
So if you run this.
It will then say, waiting for the debugger to connect.
And so then I so.
Switch. Oh, yeah, sorry you didn't. I don't think you saw that window.
Oh, no! You did see that sorry.
Yes.
Yeah. So so now, the debuggers waiting to connect.
Stop that!
Why is it 0 dot 0.
Yeah, there are only 3 files in form. Demo. Yeah.
Why is it 0 dot 0? It's because it's basically listing on all interfaces and saying.
On anything as opposed. You can just say.
I'm just gonna listen to.
There's an IP address associated with each network connection.
There's always 127, one which is attached to local host.
But there's also the other IP addresses that the machine may have. So when you say you're listening on 0, you're listening on all network interfaces.
So now we go back.
To here.
And I'm sure this is just so. This is where it's going to do here.
And now you know this, just to show like, now, this is not gonna work. If I try loading it.
But if I go to.
Chrome, inspect.
It's going to say this.
There, you know. You'll see this if things are working right. You should see this.
Target here.
And then what we say, and then we can inspect.
And a new window is appeared. Let me.
I will switch over to that window.
Once I clicked, inspect.
No, no, that's not what I want. Sorry wrong window.
That's going down.
This window, pops up.
Which is super cool.
Honestly, and what you'll see in the terminal window when you do this.
You have. You'll see it, says debugger session.
So.
This is something, so you don't have to use.
You can use
What do you call vs code.
Has its own debugging setup. It works like that.
I, personally am actually not that into Ides. The main reason I don't like ides. I feel like they try to do everything in one app.
And it doesn't necessarily do.
Any particular thing that intuitively, I mean, the functionality is all there, but it's all just like.
There's too much. I generally, when I'm editing code, I prefer just to use an editor.
When I'm debugging code, I prefer to just use a debugger.
Yes, I am a bit old fashioned.
And and I'm just saying, if you're doing this like, look at this debugger. This is quite impressive.
Now, this will only pop up if you're running a chrome based browser. So I'm using chromium.
If you do this with Vs code, it doesn't matter what browser you're using, because it's all going to be coming from Vs code.
But to do this.
You know this chrome co inspect thing.
You have to be running some variant of chrome. I think Edge might work. I'm not sure they all have.
Underlying much the same code. But
Chrome chromium definitely, works.
And I have to say I'm I'm kind of impressed with how this works, because what you can do now.
Is you can
Basically resume the script.
Here, and what I'm going to do here is I can set a breakpoint.
So like when I wanted to.
So example, let's say I just wanted to stop.
Oh!
You know, I want to stop right here.
Add breakpoint. So now, whenever it gets to this, if statement.
It will stop.
The azure openstack down for anyone else. It opens should not be because I am on openstack right now.
So if the stock is down.
This would not work.
So.
So now we you might need to restart your Vo.
So we can do things like. So I've set a breakpoint. Now I can go to.
I'll pause quick, so I can keep. I'm keep running here, so I'm.
So my window. I'm just going in and filling in that form.
Nashville.
Say.
So I submitted the form.
And so what it did was the moment it did that it stopped here in the execution. So it actually hasn't resumed here.
You're not on the VPN. So if you're not in the VPN. You can, you know, use the dash stuff to get through access.
So now here, we can actually go.
Out!
Through a function, go to.
We can step here.
We can go here. And here's the really bizarre part. If you do real stepping.
You're actually going into the deno code itself.
Like this is actually what's happening under the hood.
Demo, if you're wondering like.
You're just watching all the stuff happen.
Which can get a little complicated, but like you could then inspect everything.
So you probably don't want step most of the time.
Step over next function. Call. Okay, so.
Like this is probably the one you want mostly. So this.
And it says, You know, it's not there.
And then it's gonna go for 8 file data.
And then so it's just finishing that.
And then it's going here. So this is just if you want to step through the function as it goes.
Let it continue.
Anyway. But so like this, this can really let you look exactly what's going on.
And more importantly, with the console.
You can actually. So if I so this is probably the part I find most valuable.
Is. Oftentimes I'm trying to figure out what the heck.
Is going on here. So now, if the codes running, I actually don't want this breakpoint here. What I want is.
Let's go back to.
It's like, right here.
So if you see here, there's a request in here, we have this object. We have a body. I actually had a lot of trouble with this particular part of the code.
As I'll explain it a little bit, and I'm gonna explain about these forms and stuff in a bit. But I'm just showing off here a little bit so.
Let's go.
Let's go to. Let's pause for execution. So.
We're going to continue.
Submitting a form on the website.
And so what that happened now is, now we've gotten to the point where there's a form submitted. And it's wondering, like, Okay.
We're here, and I'm kind of wondering what's going on here. You can actually do a lot of things to. You can just inspect things here.
And see like and see. Request is here as a local variable.
Objects here as a local variable bodies over here is a local variable. You can do all that.
This is useful, but you can also switch the console and say things like.
Body.
And it says, form data. And you can say, object.
Now, here's a weird thing.
That works right.
Oh, that's why okay, doesn't have a guess.
I was thinking that.
So what confused me?
About this code.
So if you can see this here.
Well, I've I've explained how this all works, and we'll go back to that.
But keep this in mind as I.
Do my walk through.
So there's this nice debugger.
You don't need to use an ide to use it.
But the same interface is what's used.
When you use
Vs code, and I may. I might show you Vs code later, but I mean, it's.
It's the same stuff, and it's it's quite nice.
I pulled the I'm gonna show you the the things for the form. There, that's.
I pull it from both places.
But it's from the form data itself, not from there. So.
Now let's go back to emacs.
So first, st things so first.st
So.
So what happened with the development of this is, I 1st made Form demo.
But in the process of making Form Demo I had to refactor the code.
I start with simple serve, and I realize it's architecture wouldn't really work. I could take over some stuff.
And I
Re-architected things.
And re-architecting. I realize I actually made simple server a bit cleaner.
And so I said, that would be a good thing to ask you guys about. And so that's the basis for assignment. One.
Up.
To.
If you guys tell me, I might give you a day or 2 more. But October 4th and earliest.
So
So the assign will be a mix of and writing code, as well as explaining how you came up with your answers.
This is actually very important.
Because, like for a lot of things, if you decide to.
On
If you go on. AI, you know it's kind of like talking to a friend, though, and getting your answers. I mean, if you go to clone A, or chat, gpt.
A lot of these things you put in the code, it'll be able to figure out some an answer or something close to it.
And.
I don't. I want to see. Are you building up the right mental model?
So what I want to do is figure out, see, how are you putting together your mental model so you won't be enough. Just have answers.
You're gonna have to have things. How you got your answers.
Seems to be like I'm a 5 year old.
Sort of more like, what's confusing. What were your challenges like in doing certain things you should encounter certain things like.
Whoa! What was confusing about that? Or what did you misunderstand, or something like that?
What I want to hear about.
And I'm going to tell you about some of the things that I had difficulties with.
When developing this code, because there are some things that actually kind of annoyed me because I knew what I wanted to build like.
This is working. Why is this.
Yeah.
Just.
No, you're submitting the assignments you're submitting.
No, no, you're you're making a submission.
To the things. Now, what we will do is periodically term. We're gonna have randomized interviews with you all.
To kind of talk about your progress and see how it is, and we'll review your assignments and stuff.
So what? This is documenting things that we can later talk to you about.
And see if that matches up to what you've been doing.
Because, as part of this is saying, you know, you should have an intellectual journey over the course of.
If you're just getting perfect answers now. And we ask you something later. And it seems like you don't understand something very basic. We'll go like.
How are you doing this? Were you just getting the answers from somewhere else?
Either a friend or chat. Gpt, I mean, that really is what Chat Gbt at this point is, it's like a friends doing your homework for you.
So you need to be very judicious in how you use these things.
So it's not. So you're you're gonna have to write things up.
Yes, and so that will take a little bit of practice, and we may have to give you some feedback on how to do that.
Properly.
So 1st time I'm trying to do this. So.
Little bit of an experiment there.
So explaining and writing the code based on this in here, as well as explain how you came up with your answers.
Up.
I don't think there's any other.
Make sure, administering things.
Whereas you, you submit the assign, there'll be a thing on Brightspace to submit the assignment.
But the assault. Oh, by the way, the other thing is.
So one big thing to know. When you do your assignments, you're gonna submit one text file.
All your answers will be in that text file. You should follow a specific format.
And that text file will then get parsed.
On my end by a script I have.
And that's and then using. And those questions will then.
Be given to the ta. So one ta will grade like question 4. No. Great question. 6.
And you'll
And so, you know, because of that.
You really need to follow the form out of this.
Because I found that it's faster for tas if they're.
Grading the same question multiple times, and it also lets them observe patterns in the questions whether they adjust the grading scheme.
Or notice if there's something fishy going on.
So. No, no, it's it's it's all going to be in your in the text file in a little blurb. You're not going to be submitting entire files, separate files. Because again, the amount of code you're running small is, gonna be sippets when you like.
Few lines, or function, or something, or explaining something.
Because I'm really interested in you going deep and knowing what's going on with this.
Because there's a lot of concepts.
Going on here, and we'll we're gonna walk through that here
So here. So 1st off, let's.
Let's start off here with form. Demo.
That's where I show you what the.
And then October 4.th The earliest means I might give you a little more time, but I haven't decided that yet. Depends when the questions are up. Exactly.
Which textbooks will be the best support.
You wanna use textbooks as reference.
So in this class, you're building up a mental model.
Of how things work.
And you can read books, and I've given you things to read out stuff. But ultimately you have to.
Figure out how you think this is all thing. Test your model.
And so everything's.
Is a source meet the Internet. So many resources on these things.
You know, point to some of them that's.
Things to help you with that are not hard to find.
What the hard, what's hard is going like. What is this actually doing.
So to start with, here's what you get with Form Demo. You get a zip file. The Zip file has top level javascript.
That's what the main program is. And then we have the Directory.
Inside the Stack directory are 2 files.
Indexmail and style that css, let's start with style. Css, this is a little style.
This is super simple. What this does is it gives styling for body tags and a tags.
In an HTML. Document, says the body should get a little padding, and here's the font.
And for link tags. Let's use this color.
Simple enough. We haven't talked too much about Css. We can talk later, but.
Billy. You can see it's pretty straightforward. You just.
You give it something of like what?
This thing applies to, and then what you want to change about it.
So that's style. Index. That. HTML.
This is the front page. So when you load, when you 1st start up the app.
This is the thing it's gonna show you.
And means when you visit the top level, you know.
Of of the website, which most of the time will be low closing, or maybe 134 8,000, depending on.
Whether you've done port forwarding, or whether you're on the VPN. And going directly to.
A machine.
So.
Let's look at this. HTML here.
What's it really?
So
Let me actually.
All these reports.
There we go. So you see, this is.
This is what the
So this is what we're. You know. This is the what you're seeing in the browser. This is a form here.
This is what this is, what you're actually seeing here. So what is this.
Look like what's happening there. You've got this.
Doc. Type. HTML.
Then from here we've got a header.
Which is our title, and in the title also we have a link.
To a style sheet, and this is how you.
Say, I want to use here. You typically put it in that or.
Of the page. And you just say, Link.
And you did this. So.
That's for include style sheets.
And then there's the body of the page.
The h. 1 tag refers to a.
You know, header, that you know.
Adding, you'd have
One through 4 successively smaller. So this is the largest heading you can have, and you can see it. Does this come to offer a simple demo.
And then we have a Div.
Thing. So a div is this funny thing. And it's just really saying, this is a separate division of things.
The main use of divs is you could name that. They don't actually
They don't do much on their own. They're more just markers. But what you often do with a div is you associate them with a.
Css, class.
Or styling purposes.
So I I haven't checked. I suspect I removed most of these divs.
It actually might still look the same.
But kind of better form is normally how you'll see it, or something. So.
So here we've got a paragraph.
Like, it's exactly organized, exactly.
Say, this is a block.
The style for this block. Is that gonna then be something.
So here.
Fill out! Fill out! Your info.
It's a paragraph. Yeah, that's that's you know. Here it is, right here.
And then we have this. So then you'll see we have all this stuff inside here of a form.
Oh, I think I use the Divs.
The divs are used to make sure this is like lines up.
You should play with that. Well, we could. Yeah, we could play with that. But anyway.
I think that that's how these line up. But
So here we have this grouping here.
We have an in. So what's a form.
And what's this method thing.
So remember when we ran this.
I'm gonna go ahead and
Yeah, I'll just go ahead. And this else, yeah, kill this.
That's done. Let me close this.
Sort of clean up my.
My desktop Google here.
Okay. So I'm just gonna run this locally for now.
So you see, when we.
Get that.
Good. I can say a new.
National.
So.
And so you'll notice once I did that.
It ran here with this.
So what I wanted to switch to this is notice that we have these log lines here.
What is this saying? So I've organized this log in a very specific way.
This is the response code.
200. So it was successful.
Get. That was the H. That was the H to be the kind of request that happened to the server. It was a get request.
And this is the type, that of the response that was served. And this is, you know.
The path name that was returned.
So this get.
Is what you're mostly doing when you access the website. It's getting.
Resources.
But then there's this post.
So there's a question here. Do you need to authenticate any answers.
Up.
Which what you're really saying is, do you need to validate any answers? Make sure it's like a valid email address or something like that. Well, let's look at the code.
And we'll see what it does, and we'll wonder whether it's anything.
Cause yeah, that matters.
And we'll and we'll see that because I'm gonna try something here. I'm not sure if it.
Yeah, I don't think it'll work here, but we'll we'll just do that here.
So, anyway, what was I saying? So so you got this.
Get and post. So.
This is the big you have gets, and you have posts.
When a browser does it get.
It's getting something, but it's.
So the term is identically, you can.
Call as many times you want. It won't change the state of things.
So like. If you download an image from the server or you load the front page, you don't expect that to have.
Consequences. But, like, let's say.
You're doing an e-commerce site, and you're buying something.
That is traditionally done with a post.
Because
You know you've entered in what you want to buy in a form. You send it off.
And the web servers kind of go like. Oh, you submitted this form.
Now I can
I know you the browser like I shouldn't just send the same form again, because that might result. You purchasing it twice.
So.
See.
Yep, that's impudence. So.
I'll just keep that definition up there.
But.
To us so.
Gets are assumed to be safe to submit multiple times. The server.
Posts are not. So if you're gonna do anything.
Submitting any sort of data that will change the server and at web application that you are responsible. Making sure that you handle multiple
Do handling duplicate requests.
And not messing up things like.
Purchasing the same thing multiple times.
And it's always supposed to be purchased once.
Modern web, app.
When they do gets, and posts and stuff can be a little weird. But I.
Think.
I'd have to check. I'm not sure. Actually, if you do a purchase. Does Amazon actually.
Do a post, request.
I'm almost kind of curious.
Whether it does or not, I have to.
Would have to inspect it.
Anyway, so.
So what's happening here is this is a standard. HTML thing. There's this thing called a form.
And a form has associated with it various.
Input fields.
And these input fields can have labels associated with them.
And those.
And then, you know, you have all the content you have inputs, you have labels.
And then you generally have some way of submitting the form.
And that's what this button type.
By saying, this button is of type. It means.
When you click this button, it submits the form of which it's part of.
So plain. HTML.
All part of the standard.
What really? You see, a lot of times with modern web applications.
Is they take things.
They're actually there in HTML, but they want to have a different user experience.
So.
So added a lot of code and other things to do, things that you could in principle do with.
This, but they want it to work in a different way.
It's a modern web. Apps can do that. But now I'm just showing you.
Basic flow of what you can do.
So. So we define this form.
So we go back here.
Actually, this is what we submitted before.
So now I wonder if I go here and I hit submit again.
Okay. Didn't give me a warning. Okay.
Emacs is not being good about that.
So see it. Just see it did the same thing. It submitted it twice.
So, Ashley, what'd be good is to.
That. So notice it's listing it twice.
Badly formatted, but you can see it's listed twice here.
That means. This informed submission happened twice.
To to add to, so.
So there. Oh, there was a question here about the.
So what? So the question here is, what are these inputs? This is, let's walk through. This is actually worth.
Going through is a little more careful, and then we'll talk about how that corresponds.
To the code on the server, to.
Process. The form, because this is, forms are where.
The web went from just serving files.
To actually having
Dynamic content and server-side functionality.
This is really where it started, and then it just.
Go from there.
And got much, much more complicated. But let's let's start with the simple stuff.
So you define the form. You have a form tag.
The method is post. You couldn't actually, it could actually submit a form and do it using a get request.
But by default you normally do it with a post.
So just depend on what is the server want to have.
And the action here is.
What's the
What's the path name that's gonna get on the other side. So here the path is going to be. Add.
And then for each of these.
Fields. Here we have this id tag.
The Id tag is used.
To it's not strictly necessary just from a functionality standpoint, unless you're.
So when we start adding Javascript.
To the front end.
It will manipulate web pages by using these Ids to refer to specific elements on the page.
So.
Just keep in mind.
Is when we start doing Javascript in the.
On the server side.
We're sorry we do Javascript on the client side right now we're doing Javascript on the server side, but when we're running it in a web page.
Javascript has gets a model of the web page. Basically, all of this HTML.
Gets turned into a data structure.
And that data structure is known as the document object. Well, it's it's called the document object model. Is that data structure. All the methods for.
Accessing it and manipulating it.
Oh, id country has. Oh, yeah, you're right.
It does, I should fix that.
But yeah, that that's right. This should be city.
But you can see the code actually doesn't use the Ids.
So it doesn't actually matter.
So
What's the action path? Name? So that.
Just to show you the
See, when I typed notice the post.
That you know. Slash ad.
That's coming from right there.
So in a form.
The action like where you submitting it to? They just call as an action, because where is it going?
But it's really like, just it's just the path name.
That's given to the server, although.
Likely not loading a file.
Now on older web servers, it might actually be a separate script. This thing called CGI scripts.
Which would, you know, specify this, and it would run that.
File that you specify. But now we normally have the entire server, and it's.
Means that we don't. We don't separate out like that.
So ids are used as labels.
To refer to specific HTML tags name normally from Javascript.
Or you can use them from Css. To style.
Particular tags.
An associate content in a web page.
The name.
Is very important, because that is the name.
That will be assigned to the value of this input field when it's sent to the server.
So if on the server side, if I want to retrieve whatever was put into the form here.
That's the name I'll give it.
This will be named. This value will be sitting country, so like the name ones have to be correct. Always a server won't be able to get the value.
The id stuff is just for coordinating with.
Client side things for styling or for Javascript.
The type.
Is for the type of input.
That it's expecting for the form.
So what what kind of input is allowed for that? Now, there's a bunch of.
If you look, we'll talk about HTML forms. Allow for lots of different kinds of inputs.
But they they give different.
Things like this. The calendar pickers, or things like give little restrictions.
On what can be done.
And if you don't like the standard ones, people define their own custom ones to do things, and all clients say validation.
There you are!
So the name, and then.
So here is a very important concept to keep in mind.
Is that when you spec whatever widget you have right now we're using widgets that don't validate, we'll we'll try playing with that.
Later, different different types of input widgets.
But those, even if you have the client, the value.
It really should just be there for user experience, perspective.
To make it so that they did like, oh, wow! I typed in an invalid date or something. It's just.
But the server cannot trust that, because anyone could just manually generate.
You know the.
They don't have to go through the Javascript or HTML. Whatever the setup.
On the client. They could just send it directly to the server so they could send invalid data to the server.
So the server has to make sure.
That inputs are validated. This is a very important.
And we'll see where this it's all kinds of weird things here.
Yeah, that's better. That. Thank you. That's yeah.
See.
That's better way. The key is that, too? I don't.
That's a key value pairs. Thank you.
What about?
The button, so.
So the submit button.
Is what I'll actually submit. Form.
Oh, why not reject it? No, no, exactly so. So why should you should reject it on the client.
If it's not valid, input validation is.
Infant validation is definitely a good idea. You just.
So so when I say data inputation, one way to do it is.
When you say input validation.
You could say.
Is it a valid date?
Is the month between one and 12.
Yeah. So so I mean, yeah, well, you could. There's lots of ways of processing date things. And.
So this advice I can give you for inputation is you're probably not validating enough.
Probably something that you're not expecting.
And so this is on. You have to always consider, especially so. This is the big difference about programming in the context of the web.
Versus any other programming you've done. Up to this point.
Because up to this point, you've normally considered programming where it's just taking input by you. And if it crash is not big deal, but whenever we're thinking of the web we have to deal with, who knows who supplied the data.
They could have done all kinds of things to it. I don't know what it's going to be, so you.
You have to take that very seriously.
And.
Like the code I've given you right now.
Does not do proper
Input validation. And I'm gonna show you why this matters.
In a second. Here,
Let's yeah. Let's so let me. I actually, I'm gonna demonstrate that to you right now.
So let's go. Stop my share.
Actually, let's do.
Now, here we've got this thinger. So I'm gonna say, Mill.
What have I put in here instead.
So script is how you is the tag for including Javascript in the browser.
And so I can say, and there's a method.
Which just pops up.
So, okay, I'm typing in this here. What's the big deal.
So nothing particularly happened here.
If I
You can't actually let me see if I can do this here.
Okay, so I'll stop share.
Same instances, running.
I'll just hang out this here.
I should be able to go. List.
Okay, that doesn't do anything.
Can you see that.
Yes, you can. Okay, good.
Okay. So you see that you see this little window pop.
That was caused by Javascript running.
When this page was there.
Yes.
That's interesting. So it doesn't show.
Oh, yeah, that's really. Oh, that's not good.
That's really broken.
Okay, I might have to. I thought I had fixed that in my form. Demo thing.
Or maybe that's just because there's a script there.
Opted.
I always start the server and see if it still does. That might be a bug. I'll fix the code because it was supposed to give a nice listing there.
Anyway.
But yeah, as I was saying.
The basic issue that when the.
When the attacker injects into web app, it is around the server, but is instead on the client.
But a victim, you know. Victim uses browser, not the attacker's browser.
Now I'm a little surprised that the people listing page.
That I showed you isn't.
Isn't generating the alert.
So I'm kind of actually, can I?
Oh!
It's actually in there.
The script tags are in the table.
If you look at it.
I'll just.
Share that. Just so I can show you that.
Switching between windows, a little bit annoying.
But you see this, this is what the source. So we had this.
This thing here. This is what the source of it looks like.
And you'll see that
The tea bodies here.
Oh, I forgot to insert the T. Rows. Oh, I've gotta fix my code.
I will. I will do that for the tutorial by after class to to fix that. That's.
I messed up the creation of my HTML.
But
But you see, the script tag got injected into the table.
I'm sort of surprised. It's not getting parsed and generating a little.
Alert in the browser.
Maybe you can't do scripts inside tables.
That might be a thing.
I'm not sure.
Anyway.
Let's go back.
Here.
Well, Chrome didn't ignore, but it it didn't ignore the alert on the initial page.
What work in the response to add exactly that. That's why I was like, why work in the response to add, but didn't work. The other one.
So okay, I have a few more minutes. Let's walk through the code. This is, I'm talking about this. But I haven't actually walked through how
Didn't actually look at this code. I've been talking all about this stuff, but I haven't gone here.
So.
I'll talk about the top first.st
And then we'll go to the bottom.
So, notice.
You know they always say don't put.
Numbers, in your code.
Define them as constants or something, because it's just kind of ruined or.
No existing. So I I define these, there are actually so.
For a lot of things in this code.
There are.
More standard ways of doing this kind of functionality by bringing an outside code.
I specifically avoided that for this example.
Because I wanted to make it self contained.
And that
And just so you could see how everything fits together, at least in simple form.
So I put my status here. 4, 4, 200.
I have state. This is the variable. It's just an array.
That stores all the records that are being stored. So since it's just an array there, if you restart the server, it loses all of its state.
Clearly, this is not optimal.
This is the thing that normally would go to a database, and, in fact.
That's what I'm hoping for next week to put this in a database so we could have some persistence. Then you'll kind of see.
Like the full basic web app.
Functionality. And then we can elaborate.
After the midterm.
So this is the state. It's just an array.
We'll just initialize the empty array as a global.
Mom types. You've seen that it just does. That's the same things. And simple web server.
Let's go to the bottom. Here, serve handler.
Same thing as simple web server. But now the handlers been simplified.
I wanted to split things out a little bit.
1st I get the path.
I 1st call it a ridge path.
And then, and then I assign path to that, because.
We may mangle the path here, if we mangle the path.
I wanna still log the original path. So this console log.
I'm gonna log in there. But.
So all I do is.
Get turned into URL. Object.
You know. Get the pathname from it.
And then
And then I do, and I get the original. And then I call these things.
I say R is a weight.
If we don't get our.
Then we a file data.
So what's the or get to the Td tag and stuff like that in a bit or top tables? But
So what this is saying is, there's this function which is going to try routing the request.
So basically handling it. If it's some sort of dynamic request.
If it's not a dynamic request. That means this thing did not handle it. So.
Then go like, well, maybe it's a file.
That we can return.
And so it checks to see. Well, is it? Well, slash.
It's actually the top level request, we should actually return index. HTML, which is a static thing that we can return.
And we basically call a file data prompt. So it go, file data will.
Basically do everything in return. So R is an object.
That was returned. That has 3 fields.
It has a status.
Content type.
And contents, and you'll see that's what we use in the response. We have. R. Dot contents.
Our status and are the content type. Now, since we're in Javascript.
We don't actually have to declare this anywhere. It's just implicit. And now we use it.
But that's what we have with those 3 fields.
And so, in order to do this, we now I think I did this slightly wrong.
The original version of this because I had some problems, and it was just sort of.
Browsers just sort of figure things out and make things work. And I was like my error. Page was showing up as text, not HTML, and I was going like, why was that happening? And so.
And I'd set the content type wrong.
Because content type can also be driving the client side by just looking at the file name extension. If it's wrong compared to what the service was.
So.
We have our status, you know. So contents.
And then this is the metadata. Basically, this is a headers.
Object, and so.
What? What's the headers? Notes? It's it's.
And that object I don't. But anyway, so.
It has a status field. So our status, and then as a headers field that you set.
And so there's all the headers you want to define. I define just the content type.
Which is the content type that we declared.
So this is all handling the basic stuff.
And then file data again is basically.
Straight from simple server.
It's just
Yeah, this is, you know, saying, a simple server. It's
Although it's reading the file from a directory.
Question, why not read from the current Directory.
Why should we just that this is kind of more proper.
Because otherwise you can read the code of the application to be bad form.
It was kind of fun for our initial, you know, simple server, but normally it should be a separate directory, because.
Then you don't do that. So.
So contents is a weight.
Demo read, file, static path.
Status. Okay? You know, we we set the stats here. We set the content type here.
Otherwise, we set status.
Is template, not found. That's not okay. Text. HTML, so it's template, not found, actually generates.
A little web page.
Which I'll explain to you in a second.
And that makes that the contents. And that's a type actually. Hml, and it returns.
Content status, content type. So when you return an object and you build it up by this.
It automatically sets. Okay, the key value will be the name of the variable, and the value will be.
The value of that variable. So it makes a nice way of setting up.
Objects. When you return them.
So we've done it. So that's file data.
And then we get into the route.
Whatever route was called.
From here.
Said R. Equals a round.
So.
Checks. To see is the method. Get.
Route. The get requests.
If it's a host route. The post request.
No. And the reason why it's good to do this route, and gets in post separately.
Is because and posts.
Get receive data from the server in different ways. So.
Get requests. You know how, when you have Urls they sometimes have a question mark, and then.
A lot of things after that.
That's how additional data is sent as part of a get request.
With a post request. They're not in the URL. They're in the form.
Body, a dead set to the server.
So that has to be. There's a process in a different way. And so they'd be accessed by different fields. So it.
Makes sense to segregate those.
And if either of those.
Returned anything.
Well, you know, if if we have neither a get or a post, we don't know what the hell to do with this. We're a term no.
And for post.
This is doing,
You know there's this path here.
Pathname, and it says, You know it's path. Name, is it? Add.
Add record, no.
This is the contents of adding a record.
What does it do it? So this is an interesting thing.
Body has to a weight.
On the request form data. We have to get the form data. Why do we have to wait for the form data? It seems like all weird.
Turns out forms can potentially take in lots of data.
Which have to be streamed to a client. You can do file uploads.
With forms, so it might. You might have to be still weighing on data coming from the client.
So that's what this. And there's this whole multi part forums and things. All this stuff in the HTML spec. One of the cases.
It doesn't necessarily all come at once.
So we have to wait for all the form data.
There's actually ways to process form data inks.
Rather than all that at once. But we're doing something simple. Stuff gets more complicated. We don't care.
So we get all the data. It's in this object.
Yeah, it's in this. It's in, you know. It's in body. Now.
Now we want to turn that into a regular object that we want to save.
So we need to extract them from the form.
And basically you have, you can't. Just. I.
For a long time I was thinking, Can I just access this.
As object methods. But no, you have to call. Get.
So body, get name, city, birthday, email.
I kind of thought Javascript gets into just object.
Method represents, but it doesn't.
So we have these.
We create our object and push it onto. There we can treat the.
Array like a stack.
And we just push it on. And then the responses text, HTML status. Okay.
And then we give it the template record. So again, this will be a web page.
That's parameterized by the object.
And forget.
Similar kind of thing. Get the path? Name is it? List? If it is lists.
With state always. So that's another function up here.
List records.
Basically generates a template with lists. State.
Template lists.
This builds up the table. My table is wrong because I didn't create rows. We'll talk about how tables are built.
Next week, cause we're about time. But
Basic. The basic idea is, you have a table.
Tables have a heading, and then they have a body.
And the bodies has rows.
And he's rose. You have data elements. So the T, you know.
Trs, or you know, table rows and Tds, or.
Data entries in it.
Was lecture. We posted the trial. Yes, it should be posted before the tutorial.
Do we have the source code for this demo? The source code is that that's form Demo. That's what's.
That's tutorial. 3.
Yeah.
Yeah, people have to do. Thank you.
So this is.
There's a header there, that's it! Lists.
So notice that it gets the state variable, which is actually a global. But.
I have a little for loop that does this.
So one thing to remember about for loops.
Basically never use for end.
4 in is just.
Is an older Javascript, but most of the time does not do what you want.
You normally want 4 of.
And I just I'd use let here for undeflying a variable inside the context of this loop.
And so this gives all the elements of the array state. For each of these I just.
Push it into the rows.
And then I join the rows together to put in there, because I return the template header.
At top of the page. There, bottom.
I'm using these multi line strings which allow for templating.
These are just multi line strings of the back tick.
In template, add record. So this one here, I'm using actually the object I'm using the template that's with a dollar prices.
I think cards.
Insert values into the string.
And
His page not found. It also takes a thing. But that's just used for.
Companies don't actually use.
I'll tell you. Why. Is it not used? Oftentimes you'll notice 4 or 4 pages. Do not include the URL. That's there, because you may actually be, have.
Be routing an attack to someone else.
And this is a little header of the web page.
So it's not that much code. It's, you know, doing basic form submissions.
Oh!
So you keep the semicolons consistent, or does it not matter? Because it's pretty lenient about semicolons?
They're mostly.
For people who are used to see.
Sometimes they're useful as syntactic thing.
I tend to put them in because it all looks weird if I don't put it there. But Javascript.
Often, doesn't mostly doesn't care.
It's kind of weird.
Oh, yeah, I think I left some there.
So yeah, so I'm gonna fix up the code and fix.
My table, but we are out of time. So
I will stop here. People can stick around for questions, and next week we will.
Assignment to will be assignment. One will be out by
Stop sharing assignment. One will be out in the next day or so.
And you'll have at least a week to work on it.
We'll talk about more stuff on Tuesday.
Thank you very much.