Good morning, everyone.
So, uh.
Today, my plan is to go over
We'll go five.
So I want to go over tutorial five, even though it covers material that's not on the midterm.
It's about on code
that is very similar to
tutorial to the assignment
to code. And so in talking about that, we'll also be implicitly talking about assignment two. So that could be helpful to some of you all.
No, okay. So there's a question saying the template doesn't work for
the second assignment.
And someone can't download the Assignment 2 code for some reason.
Let me just check real quick to see if anything's broken that I see.
Assignment two.
So if we go here and we try downloading the code
Oh, oh.
What?
Oh.
That's why.
the link's wrong here, let's fix this.
was wrong.
Yep, that fixed it.
And…
Plain text file.
Oh, have I not made the template? Wait, what?
Let's see.
Oh, I seem to have that's not there i will
I'm sure it has a spelling.
Oh, I forgot to do these. Okay, the validator.
Okay.
into validator and
So to validator and a validator
Okay, so…
So now we'll start
So assignment two should hopefully now be there
I'm not sure. Yeah, that's kind of annoying.
One question was um
Okay, so.
So that's kind of the you know so
I will at times accept late ones but
it's a pain in the butt.
And because once i
I split up the assignments.
So yeah, so let's talk about assign it to solution, assign it one solutions
over here so I can correct it if there are any issues and I'll upload the modified version.
So for question one.
what directory does simple server two use for serving content?
How did you verify your answer was correct? Let me bring up
code for
So here's the code.
And let's see, what director use?
So what I was expecting you to do is to look
and understand that
this.
appending this to the path
makes it the directory where all the content is going to be.
So you had to
understand you may have done some experiments when it started off, you had no content there so
So what I was expecting to do is talk about like
how you verify it.
One thing you'll notice in my answers is I give you some of the process I used when I developed my solutions.
And those
that process will not be the same for you. I don't expect you, but it's to give you an idea of the kind of
process that you should have been reporting.
So for…
Does Simple Server 2 support serving PDFs?
So here I was expecting you to understand when you look at the mine types.
there's no PDF here. Now, PDF. Now, if you actually tried
Putting a PDF file
in the Dodo directory and you try downloading it.
it probably worked.
fine because
Browsers don't just rely on the mime type
to determine the content of the file. So you can download a PDF.
And most browsers will probably figure out what type it is.
Because the file extension.
But it doesn't actually assign it.
So it doesn't directly support it
But you can host PDFs and the browser will download it. And then I expect you to talk about how you tested it.
Okay, so…
I got some things.
So I will talk about question six later.
Yeah, it did work. For the first question, it must be a
is it a must to state the line
Do you have access to these solutions? Yes.
Go to, I get to these, it's on the assignment page at the bottom
If you go to the assignment one page and go to the bottom of it, the solutions are now there.
So you can go through them
No.
So…
So you said it didn't show the PDF content.
I mean, if that's what you saw, some browsers won't support it. But like you should
What I would expect you to do is to tell me the experiment you did.
did you
It's um
this question, what I was really seeing is what does, you know, what it said is, what does support in this context mean?
So here, the only obvious support that the server could be doing is setting the appropriate MIME type.
But it turns out mime types aren't completely trustworthy.
Because web servers don't necessarily always get it right. So browsers often do their own figuring of things.
So…
that's why I want you to explore
That's the point of this question.
uh…
Yeah, exactly. Many browsers will figure out on their own.
And that's part of the reason why I asked this question is to see that
how important is it to set the mind type? Well, sometimes it's important, sometimes it's not
Now, if you had a pdf
that didn't have a .pdf extension, the MIME type would tell the browser that, hey, this is still a PDF.
And it would probably treat it right.
So question three, how does the behavior of simple server two change if you make the mime
make mom type an async function.
So what you should have done is made the change to the code
And what you should have seen is that the mime type of everything now becomes object promise because what does an async function return?
a promise and you have to resolve that promise before you get actually the return value.
So if you then
change it to an A weight for mime type that resolves the promise, and then you get the appropriate content type.
But you should say
you know if you just said it won't work or like that's like, no, you should have run it and you should have seen this
In the assignment, it wasn't allowed to write on multiple lines, just one long line.
Uh, what?
Yes, it was. The validator passes it. It lets you break it across multiple lines.
Yeah, you can do new lines. Yeah, you can break up your assignment. The thing that it looks for
Yeah, if you are there.
Text file style style kind of limits the ability to provide console logs. What are you talking about? You can cut and paste it.
Okay. I mean, if you run everything on one line, fine, but I mean…
We know.
it's easier for the TA to read if it's not on one line.
So, yeah.
Please don't do that in the future. Format your answers.
Plain text does not mean it has to be completely ugly.
So that, you know, so that
So question four
How?
So someone gets a question. Is it okay if we simply look at the lime types and saw no PDF were valid to explain
how we verified.
you'll get partial credit if you just
looked at the code. You won't get full credit.
And for that, it's very simple.
Because even if you think you understand the code.
It doesn't mean you actually understand the code.
To be honest, I might have thought that if I just put that change in there, I might have thought, oh, maybe the server will just crash or something if I had to think about, oh yeah, it's a promise overturn and stuff.
So…
you should be running this code and doing experiments and telling me what they did.
what the program actually did.
Okay.
Oh.
You're supposed to convert it to a so
So the son's asking, we're supposed to convert your solutions to a Unix text file.
You're supposed to have a file that passes the validator.
Now, just to be clear.
This text format that I have in the template
This template format is not an arbitrary thing.
I'm not just saying, oh, do this.
I'm running this through a program.
Because I'm splitting up the answers. And if you'll mess up the formatting.
I have to hand edit your assignments
to run it through my val, to get it so I splits properly.
So you make more work for me.
And I potentially am willing to do this for this first assignment.
to fix things. I will not do it for the midterm
And you may have your midterm dissimilar rejected if you don't do this right. That's why there's a validator.
So please.
Take the time. It's not hard. You can use as many blank lines as possible as you want. You can make this just keep it going. It doesn't have fit there.
But just so what what the code looks for is
for another line with the number two or a number starting the line.
that's when it knows a new question is there. So if your answer has
a number and a period in front of it.
it can break the code. So in that case, just put a space.
to indent it a little bit and then it will not do things. That can happen with the value, but that's why I have the validator so you can see whether it
breaks or not.
the validator is broken
you had to write two copies of one in the same file so that it passed my file.
then you
the validator is not broken. The validator is just looking at things you may not have noticed.
Oh.
So, um.
Hmm.
Am I able to resubmit? Don't worry about converting it. I can convert files to Unix files myself.
If need be that.
So you can't resubmit now. Submissions are closed.
So for question four, where are we now?
So how could you modify simple server to only return returns content on get requests when it receives a non-get command, it should return the string method not input and the status
code 501.
If you didn't include actual code, we might be able to give you points for this, but you had to be
you know.
you got to be pretty precise.
in your answer.
So…
So I'm saying, you know, replace these lines with this code
So what am I, you know, why am i saying
will place these codes. All it's doing is so let's 83 to a7
So this is line 83.
So here right now, how does the code flow?
gets the path, the original path and makes a new path and then it checks to see if it's indexed and then gets the data.
So clearly, before we start
you know doing this, we gotta like
check to see whether we got to get meth. In other words, we're retrieving the data and then
forming a response. So what I'm saying you do here is you
first check, is it a get method?
If it's a get method, then we do the index and then we get the data.
Otherwise.
We set the status to be
you know, set R to be this object.
In closing the statement, the checks and returns so
If you understood what was going on here, is this clear? I can explain this.
I'm not sure exactly how you
say to do this without saying the
code. You could describe it in words, but to be pretty precise.
So for number four, if we did the same idea, but instead it was done in file data, would it be okay?
Yeah.
Well…
how could you do it in file data?
So there's a question of how you would do it. It's like
you don't have the request object.
you would have to pass it into it. All you have is the path.
You don't know whether it was a get request because the get request is determined by
I mean, it's request.method.
that's what you have to check.
So if you tested it in file data, you would have to somehow get access to this object, which is outside of its scope.
So I don't know how you would do it in file data.
So, uh.
Yeah, so that didn't work. And again, you should be testing your answer.
See if it works.
So now as my answer goes on
The testing I took on the next one.
Yeah, that's why that's why I'm coach just here.
So let's see, what questions do I have here?
If you had the code line by line and it's clear what you were doing, that's perfectly fine.
Again, it's just
This seemed the easiest way to explain it here is whatever you know
If your solutions are different.
that doesn't necessarily mean you lose marks.
But it should be correct.
Okay, so there's one solution. You made the path null if it wasn't a get, which is using file data to do the response.
The problem with setting, so if I just go here and instead just set
a path to know and then do things and so that file data
deal with it, it won't return the right error because how can it know to return the error status
501 because normally if it's
Knowledge will return a 404.
you know not found, but this is specifically method not implemented a 501 error
So other resources I can go through to understand command line tools?
I went to the tutorial again. I could not get uh
dev tool working
I'm not sure what um
The big resource I'd say, if you don't understand, I mean, we aren't using that much the command line.
If you're having trouble
getting stuff working. That's why we have tutorials and office hours for you to sit down and show
the TA. If there's specific tools you have questions about, I can
I'm happy to answer questions about them.
uh it did a if
So one thing is if um
not equal to get.
Oh, if what didn't equal get?
You've got to check the request method.
Okay, yeah, if you check request method, yeah, that's what I'm doing here.
I mean, you can invert this
You know, inverting an if statement is still logically the same.
Yeah.
So again, the issue is not just not returning things, it's that you have to return the correct error status.
And you shouldn't return that error status
Unless it's actually a method not implemented as opposed to a file not found.
Um…
JavaScript is case sensitive.
So, uh.
If you messed up the case of it, you potentially don't have working code.
So…
So just to be clear, when I ask these questions.
But I do these things.
I'm expecting you, when it's in the context, if it's in the context of
an exam where you're time limited?
then I can see you not
actually running the code and testing it. You don't necessarily have time for that.
on a midterm or a final
But on assignment.
you should run the code that you say to do that.
The way I did this
was i
implemented it in my own version of the JavaScript. I ran the code.
And then I extracted the portions of that
that I changed and put it into my answers and explain them.
The reason I want people to do their assignments like this, as opposed to just saying.
here's my code is my code
I'm interested in much more than just your answer.
in terms of like, oh, I got the code right.
I want to know how you got the code right and to make sure you understand that code.
And that's why essentially you're doing an annotated version of it.
So…
So now question 4B, what issues arose when implementing the answer to your previous question?
How did you verify your answer was correct?
So like, uh.
So what I did was i did remember
I've used wget.
w gets and all the assignments.
for how you download a file off the web.
that's one thing you can use for testing things.
And if you looked at it, it's like, oh, I did a, you know, I'm doing a get request with this command.
Could I have it do something else? And if you looked in the help file for it.
or looked up on the web or something. Can you do sign with WGET and method? You'll find lots of documentation.
on this.
But actually, there was a simpler method.
So, uh.
So how did I do it? First, I did a W get of this.
which produce this in the console log. Then I changed it to this method post
And then I got, you know, got a 501 not implemented.
in the fallout plane. Now here's the thing. When I did it in the command line, what I realized is I can't actually see the message.
that was returned as part of the 501.
So…
What I actually realized is that you could just
view index
the email from form demo
you know actually this isn't quite my viewing and it's where
And…
And methadone screen in Firefox.
So this actually turned out to be the real way that verified it.
Because I had a post request enough
you know in that index. Could you use curl? Definitely.
you could definitely use curl.
role is a great tool.
yeah so like you don't have to have exactly the same solution as I do.
That's not the point of this. This is a solution to things I can't possibly give all the solutions.
the way the TIs are going to be grading is they're going to have
It would be great one question at a time. So they will see all of your answers at once to one question. So they'll be able to compare them and see how they
They look versus each other.
So curl
I mean, I show you w get curl
have similar command line options. I always find curl kind of confusing the way his command line options work.
Which is why I use wget but um
Okay, said to return the status code and the
string method. If I didn't return the file type and method type, is that all right?
You know, so the thing is you don't run file type. So this content type is what you return.
text plane because you should always have a content type.
And we're just returning plain text.
And here's the contents.
Here's a status code. You should have something like that.
Okay, so…
Yeah, Jax post, yeah. We should return method not implemented, yeah.
I don't know if you need, do you need the semicolon at the end?
I shouldn't need the semicolon at the end.
of the curl statement anyway.
So in terms of how grading will work.
So I didn't hear.
So you should have assignment one and assignment two graded
before the midterm, because we've got some time there.
I cannot promise that assignment one will be graded before
you submit assignment to but
I will do my best to get things out because basically we've got a week
And I'll organize with the TAs to try to get them working on it but
No promises, but we'll do what we can.
In terms of feedback.
does expect point values, don't be question specific feedback. There's too much grading as it is.
So if you don't agree with the grading or anything, talk to a TA or something or talk
Or you can talk to me if you have any issues but
But yeah.
So really, the reason why I don't give lots of feedback is because
Bye.
these are the solutions.
your solution may be different, but you should understand if your understanding
is basically the same as what's here. And so if you read this and it makes sense to you and go like, yeah, answers light different, but it's the same. It's like, there's a question of where you get points, but do you understand it? That's the big
important thing.
And if you don't understand it, then you should go like, what am I missing?
And that's what the solution should be enough to tell you is whether you understand or not.
points we can talk about later.
that's there's no like we just had to finish that, resolve that by the end of the semester
But making sure you understand things
that's critical. You have the solutions, you have your own answers. You can compare them.
And you can see, do you understand things in the same way that solutions indicate?
Okay, so…
how could you change simple server to so that it loaded the page not found template from a file
Rather than being included in the source.
So here, I said, first create the error page by running the web server, visiting a non-existent web page and saving the page to a file called error.html in the same directory as simple server two.
This is what I did. I didn't put that file here because it's kind of obvious what it would be.
That should be exactly the same for all of you.
And so then I remove those two functions, template not found template header. That's not strictly necessary, but hey, that code is not used anymore.
And then I add something to read the file, deno read text file.
We use retext file in the first tutorial.
and um
then content just equals
change that to be error page.
So it's actually pretty simple.
do this.
Any questions about that?
And then why do you think your solution is correct?
So this you should have gone through some process to go like, I tried this, I tried this, it seemed to work, this didn't work and stuff so
This is the process I went through to check it.
Again, if you had any problems here.
All right.
So this is your verification. This is any issues you had.
This one was pretty easy for me. I didn't run any particular questions here, but I could see, figure out how to load a file and figure out where to load the file.
Because the reason why that's confusing is you have to remember
when does code run? Handler runs every time a request runs.
So you don't want to be loading the file
on every request, I want to load it when the service starts.
So what you actually want to do is do it here before you call DennoServe. You want to do it at the top level.
you have to do the loading.
And then you get into it. I mean, you could put this in a function, but it's like.
you're literally just loading from a file and assigning it to things. So you just do it at the top level. You put it into a function and call that function.
at the top level.
That's probably the conceptual part because you should if
If you say to put it in handler.
or any of the other functions
that's just wrong because now it's loading it every time a request comes in.
Which is super inefficient.
You saved it. Yeah, you should save it in a variable. It's a question of where did you save it into a variable.
So the question, what isn't good practice? Putting things into a file and loading it?
Actually, it's kind of a standard pattern.
you know having some data that you load at an initialization time, like anytime a program
Saving a file as a global variable?
It's data that everyone accesses
Global variables
are something that should be used sparingly.
Now, remember the way Denno works
things tend to be limited to the scope of a module. Now, when you include a module one, then you can see what's export from that module. But when you do say at the top level here, it's actually technically just limited to the source file. When we split our code into modules, those things won't be visible.
So globals in the classic sense, global for a file isn't actually that
leaky.
as it is um
As you might think.
So…
The question wants us to load page not found when the server starts.
So what that means is it should not run it in handler or any other function. It should be loading it outside of any of that code. It should be
code that runs when the server starts, like deno serve, this runs when the server starts.
These are defined when the server starts. These functions are all defined when the server starts.
So I want to load the file here before
handler could ever run.
So that's the error.
Because remember, the question explicitly says.
So it loaded the page, not found it from a file
Tell it should be loaded when the server starts.
When the handler function runs is not when the server starts.
When this is executing, the server has potentially been running for a long time.
This will be run many, many times.
Every time a request comes in.
Okay.
And then question six.
How could…
How could you change line 80?
a simple server two.
So this one right here so that directly extracts the path from the request URL string instead of first
Going into a URL object.
So here's my solution.
Which is a little bit of a funny solution. I did not specifically use
a regular expression.
You could have used a regular expression.
But I want to try using things that we had actually covered in class for the most part.
There is a split slice thing
So you can split it on slashes.
And then if you do that, it turns out you get the third slice that basically gives you all the pieces for the rest of it after the
HTTP colon plus plus and the host name because
First slash is HV colon
Slash slash. So that's the first
Second, the third one will be after the host name.
And then the rest is the rest is
everything else. So that's how we get this here. We get rid of that first part here.
then…
But what is the question? Okay.
So this deals with gets rid of the rest.
But then, and then this joins it back together into a path.
But there's more in the path. That's what these last two lines are there.
There's also the options portion
And there's also the fragments.
That's why I mentioned specifically options and fragment. This is like all the key. We'll talk more about this stuff later. This is why I wanted you
to look at the
definition of what a URL is.
So this basically gets rid of everything, a question mark and everything else after it.
And this gets rid of the pound sign, everything else out of it after it.
So I got a question about if you use chat gpt
to get your answer
it's fine if you use it to get the answer
to some degree, except that
it's not clear that you understand the answer.
So here's the thing. If you're going to use anything like an
AI bot or something like i let
I would treat it
Much as getting answers
from another person.
And…
I allow collaboration
on assignments. So getting help with an answer with someone else
is okay. And if you ask ChatGPT to say, help me out, that's potentially okay but
you're still responsible for deciding is the answer correct?
how do you know it's correct?
Because it might be wrong, just like your friend might be wrong.
How do you verify it?
That's how I know I can give you full marks.
So the question is, we don't actually have a question mark or pound sign in the past for this assignment though.
Make sure your solution does not include the protocol, hostname, port number, query, or fragment.
I explicitly said that in the question. So if your answer does not get rid of those parts.
you will not get full credit.
The point of this was not for
this particular was to fully parse it.
So, yeah.
So in terms of resources that I used.
I use the URL, the Wikipedia definition of a URL.
But if you use other things, that's fine.
And then how did you test your solution is correct?
So the way I developed my code was
I actually made this into one big long line. I split it up here to make it more understandable. But I had all this in one big line and then I tried several URLs in it to make sure it split them right.
I actually took one from the class wiki.
did there and look for one of the options. I just looked for ones that had fragments and
query strings and stuff and made sure it did what I expected to.
And then, so here's a funny thing is I just mentioned this, you should have something else like
I had forgotten to handle fragments.
And then I reread my question like, whoops, I forgot the fragments.
And so I tested it with, and that's what that was what I used on
URL for a later section of the class wiki.
So what do I mean by that? Let me show you.
Oh, sure.
Okay, so you see here
When you look at this.
So here it says, you know, this is the normal URL. Notice that here
This is just a neural URL. It doesn't have any question marks or anything else in it.
If I go to the top here.
So let's go to the main page. So if you go here
So you see here it's got all these sections.
If I click on this and click on assignments.
Look over here, how does it know to be down here?
It's because this is a fragment.
Pound sign, assignments.
That's how it gets down there. So fragments denote the part of the page
that we're talking about. So if you ever define sections
this is how you can refer to them and the browser will automatically take you to that part
of a page.
That's what the fragment's for. The question mark, the query is.
is essentially the equivalent of a form
You know how you can pass all these key value things? You can do the same thing with a get request.
by putting a question mark and then
like something equals something and separating it with a
Question mark to the back to the next sorry um
ampersand, sorry, question mark starts at
10% does the next. I explicitly had not talked about this stuff previously because I used it.
I was expecting you for this assignment to look up what's the structure of a URL. And they mentioned fragments and query, regular queries, what are those?
And so you'd look them up and go like, oh, it's this part and this part. And maybe you didn't understand how to use it, but you can see what the syntax is at least.
And then Mike goes, wait, how have I seen this before on the web? I've seen all these URLs.
You look to them?
So.
And here's a talk. Yeah, so here's your all parameters and query strings.
And a query always comes before a fragment.
I…
believe so. I'm not sure if the query always comes with a fragment. There is…
there's a definition, again, on the Wikipedia URL page
that talks about it.
Bye.
So.
So let me go back to my Emax.
So it's not something you missed marks because you didn't fully read the questions.
So this is something you really have to parse
my questions
Precisely. You can't just kind of say, oh, it's kind of talking about this. No, you've got to
really read it carefully.
So…
So let's go back to, I just want to go back to the assignment here
This template should be loaded when the server starts.
What does that mean? Why do you put that sentence in?
I think some of you didn't quite catch that. We'll see how it answers, but it definitely from some of the questions I got.
this one
Makes you soon does not include the protocol.
Post name, port number, query.
fragment.
That's a list.
you should understand what each of those are.
If you don't know what those are, you should look it up.
Oh.
If our solution produces what we want it to.
Is that always an indication that our answer is correct or is there more to it?
That's almost philosophical.
So if it's giving the answer that you think is correct, that doesn't mean your code is correct. It just means it's doing what you expect it to do.
But does your expectations match the requirements of the question?
You know, that's where you have to really look at what's been asked.
And whether you understand the problem, you're going to like, why does code
keep changing over time. Like you think like, oh, this application should be done
And then people came up with new versions because
for most interesting problems, our understanding of the problem changes over time. People realize, oh, I'd really like this feature or
Actually, I thought I understood this part of the problem, but actually my solution was flawed. It has these corner cases where it doesn't work. And so I have to change the code to handle those things.
you know, requirements change and also um
usage changes and the environment changes and so
That's why code evolves.
because it does what you think it should do, is that the right answer?
Maybe.
So when you read that, I thought you were talking about the specific hostname protocol port number for our implementation.
there was no, but in our implementation, there was no query or fragment
So why would that why would I mention that?
Ah, so for future assignments, could you give us sample outputs for certain questions where there could be potential for misunderstanding?
No.
Definitely not.
And in fact.
That's part of the…
point.
is…
you figuring out what the problem is.
That is part of this is part of
of this thing is looking at this natural language english stuff and parsing it and going like, well, what does this actually mean?
What is the problem? And thinking about it. And then, you know, you may interpret it
if you give
If you interpret a question one way.
And I expect another interpretation. You answer according to your interpretation.
That doesn't necessarily mean that I won't give you full marks.
Because if you have a valid interpretation of the question, like.
The wording is legitimately can be read in multiple ways.
then, you know, okay.
the interpretation goes your way. We can see that that's the self-consistent answer.
But you have to show what your interpretation is.
you're going to have to say, I was trying to do this.
And thus I did this. I noticed this ambiguity in the question, or I interpreted this question in this way like
you have to make it clear in your answer
how you thought about it, either explicitly or implicitly.
So we can see how you interpret it. If you just left stuff out.
you know.
If you had said
I thought…
you know, our code in the our you know our urls
In this assignment do not have a query or fragment
So I'm not going to parse those.
You could say that, but I'd go like…
Make sure your solution does not include that. That's kind of a
funny interpretation of it.
Because normally you would say like, okay, it's giving you specific direction of things to exclude programmatically
The only way to think that it applied another way was like, oh, did you realize that the URLs didn't have that?
Again, I was looking if you're replacing that
making your own implementation of that URL parsing.
Okay, so…
Okay, so now we're getting, I think we're done with this now let's talk about
Let's move on to tutorial five. And tutorial five, it's a great excuse to talk about databases.
So…
So what is going on with DOM?
No, that's not very useful.
So.
DOM demo, if you look at the code for it.
load up the actual code for it.
So this is what DOM demo is. So there is a
It comes with a database.
Instead of it just creating it from the beginning.
Awesome, before I go on. So is that uh
is saying something like the results of this should be
this, but what happened instead considered a valid answer
It certainly is something that will probably get you some marks.
saying that I saw this i expected this
I'm not quite sure what's going on. It'll probably get you partial marks. It won't get you full marks.
Because the questions should have been there. And if you really didn't understand what was going on, it was really confusing. You should have probably talked to a TA.
to find out what was going on.
Anyway, so let's talk about
this code. So this code is
basically the code from assignment two.
basically the code from the summit too. And we can talk about aspects of what it's doing.
But I just want to show you what the differences are.
So the big difference
is…
Which I'll show you the um
If you go here, there is now there is
a file called list
dot html.
And if we go to
instead of the original version of this just called list
This one calls list.html. So it's loading a static file.
And that static file
does this and you notice what it is is got the standard header
It's got people listing and stuff. It's got the column headings.
And then it just has this one tag.
it's got this ID equals table.
So it's saying there's a table here. I'm giving an ID of table
But there's no contents to the table. The body of the table is like
there's nothing there.
So it's like
where's the body?
So what we um
So what we instead do here is
Oh, sorry, there's this also this load here, script source list dot js
defer.
So defer, so this says load this JavaScript code.
for this page.
Defer says only run it
Once the entire page is loaded.
Because otherwise you can run load code and have it run in the background while the rest of the page is running. This can be very important for larger pages.
This one, I only want it to run once the page is fully loaded.
for reasons that should become clear. Well, basically, the reason why is because
that code's going to fill in the table.
And…
Now there's this file called list.js
This code should look pretty similar.
you know we've got this row markup things. This is stuff from assignment two, which is building up the rows of the table
And this is saying that you know this is saying
you know marking up with a TD begin and end
And what this does here is i get
This is manipulating the dom
document.querySelector.
So document query selector lets me get
an object from the document object model.
And I specifically want the object that's labeled with the ID of table.
i.e. that T body.
So I've got that row. I built up these things and then I just set the inner HTML, that text to it to be
the contents of it. So I just insert all that and then the browser will parse it and make the appropriate subnodes and stuff and
And I'm done.
And then, so what the rest of the code is
doing is I have this function update table
And it gives us console log updating table. If you go in the console log of the browser, you'll see this running.
And then it does a fetch of list
Which then it gets back an object response
that response, if it's okay, then we extract the
JSON from the response to get the table data.
And then I call insertail table data, otherwise there, if there's an error, we'll do this.
And this was probably the trickiest part of the code, which was kind of silly because update table
has to be asynchronous. It has to be an async function because it calls a weight.
You call AWait, it has to be an async function and
you can't call a weight
Well, I didn't want to just call a wait.
Yeah.
Yeah, you can't call a weight at the top level.
here you call it the top level module. This is not a top level module so it's
not legal here.
but then is.
So update table, resolve the problems with then.
And giving it a function to call once this promise is done and that's
table updated.
So it logs out.
When the two fights say it's based on assignment one.
Oh.
Is that true?
Whoops.
You're right that is.
That was wrong. Fix that. Thank you.
I just fixed the wiki.
is the assignment due to due date firm? Yes, it is firm.
And the reason it's firm is very simple.
So if you look here.
Why is assignment due date has to be the 16th?
It's because…
October 17th.
is a midterm review
Then there's fall break and then there's a midterm.
So you got to get assignment two in before I can talk about assignment two and the midterm review.
So, yeah.
This is firm.
So document object model is something I talked about in the last class.
It is a JavaScript representation
So what this is doing, this document
is a JavaScript representation
of the of the page.
of the document of the document
it's a…
it's a representation of this
document here.
in JavaScript so that JavaScript code can manipulate. So list.js can access this document
Here, it's actually manipulating that
See this table here?
That's how I'm accessing it.
I'm getting that part of, because really HTML can be thought of as this
defining a tree defining a tree
This lets me access part of that tree.
So this question of what the
The midterm mostly code explanation with maybe writing small bits of code? Yes.
Exactly.
the arrow. So the question is, what's the arrow syntax
Yes, this is defying an anonymous function. That's exactly what it is.
We've seen this previously. So what's happening is
So then wants a callback function.
We haven't seen much in the way of callbacks. It's kind of the old way of doing asynchronous stuff in JavaScript.
It comes up every so often, so I'm passing a function as an argument.
This function takes no arguments.
There's the arrow and then this defines the body of the function.
And that body the function just
does this log.
So I don't really need to have this function do anything.
I think I could just pass in.
I'm not sure what then does if you just give it a no off.
option. I have to try that.
But normally it's fine to have some sort of objects. I put this in here to log a message to know that this code is run.
I'm trying to see.
So going back to
So this code
is doing exactly what
we did in the previous one in terms of building up a page. This is from assignment two.
Again, this is the same thing as DB Demo does this too
So we've been seeing the same code building up this HTML and just
previous rows and but we're inserting it
dynamically into the document. This code does not run
on the server.
this runs in the browser.
And in fact, you can see this when you run it.
you'll see if you bring up the inspector and go to the console, you'll see those console.log messages.
up here on the browser. They'll never appear on the server. So you should play with this code so you can understand that distinction.
But this is fetching something from
the servers doing this fetch. So remember I talked about XML HTTP request before?
fetches the modern version of it. XML, HTTP request uses callbacks.
Fetch uses promises. So fetch has a much nicer
interface. It's much cleaner. We just look at how nice this is and you just run
one thing and you get back up, you get back a response.
Ain't that nice?
really modern JavaScript, like with async a weight is just so
so much cleaner. You look back at the 2016 code and just go like, oh my God, this is a mess.
So there's that. Let's look at the server.
So if we go back here.
And we go through the code here. This is all the same.
You know, this is basically all the same here.
This is all the same.
get post
That's all the same, although I did add in the method not implemented portion to this.
add record that's all the same.
show analysis, this is all the same, although you should probably be changing that and things
I'd record the same, but.
Here.
This is the same list list records is the same as before.
But this is what List Records is now.
Just to show you the difference.
This is what list records is before.
list records
before same thing, except it caused template list records
So it returns and that template
list records is here, it's the thing that builds up the page.
it makes the whole page.
But in contrast here.
Template list records is gone.
deleted, not needed anymore.
Instead, we just turn
We get the state here, we get the object, and just turn it into
a JSON string.
So what does inner HTML mean? I'll talk about in a second. That's a very good
question and why is json used
So why is JSON used? So does anyone know what JSON is?
JSON stands for JavaScript Object Notation.
So.
So Jason started off as JavaScript object notation, just as basically JavaScript objects.
And they slightly formalized it.
In order to make it
In order to make it precise.
So there wouldn't be issues with ambiguous interpretation and stuff.
And…
And so the beautiful thing about JavaScript systems is
you can parse in a pinch, you can always parse JSON by just avowing it.
And then you get a JavaScript object. But nowadays we use specific JSON dedicated routines, which
do validation of it and stuff.
and are generally a bit faster and
won't run other code as part of it.
So…
So I'm just bringing up Denno here.
So with Deno here, I can say um
So this is a JavaScript object, right?
You have the key and the values, the keys
are denoted by in front of a colon and you separate key value pairs with commas.
And the cold things enclosed with curly braces and
The semicolons and the statements are not only part of the notation.
So that's X. That's a classic thing so now
Hold on.
How is it?
Now, if I call json.stringify.
I get a string back.
And that string is this textual representation.
But you notice it's slightly different because I put quotations around
A and B, just in case, because I could have spaces i could have other
It could be an arbitrary string is the key.
So just to make sure there isn't issues, it puts it in quotation marks, it would escape weird characters and
do all things as should be for proper data interchange format.
So is this like a dictionary with keys and values?
JavaScript objects are basically dictionaries, yes. And in fact.
if you look at Python objects, they're basically dictionaries.
So…
Yeah.
the connection between the app's front and logic, exactly. That's what we're seeing right here is the connection between the front end and the back end.
front, the back end is um
This is the backend.
DOM demo running on the server
running, you know, starting the server thing, this is the back end.
And here we go.
And here we have this function list records and all it does is in response to requests for slash list
We return list records and list records just calls.
get all records, so it gets them from the database.
I will talk about databases in a second here.
One last thing I want to end with.
you know and and we specify the type. So notice we didn't say text plane
He said, application JSON, because we're returning
a json
data that's okay and here we turn the
JSON stringify.
India and state. And so this is what makes it into actually JSON is supposed to be represented as text.
So what does application here mean this is just
If you look at mime types.
a lot of the newer mime types get application slash something but
It's just…
It's like the Dewey Decimal System or something. It's just a classification of content.
it's a higher class candidate so um
that's all that means. But so this is the back end sending data
And then…
This is code in the front end, in the browser.
retrieving that data
right here that this fetch
This is retrieving data from the back end to the front end.
putting it into this puts it into a JavaScript object
And then we use that data, that object.
we pass it here.
And we insert it into the document.
Now, all inner HTML is referring to when you
When you look at HTML,
Oh, sorry.
So this is an HTML document. HTML documents are made of tags.
Tags have a start tag and an end tag.
If you ever, and so these are each each like this div has a object in the document object model
this div has one, this H1 has one.
But it'll be, you know.
that's the object. What's the object
between the tags.
So what it's saying is when you say inner HTML, if I say
I referred to this H1, I put an IV on.
And I say, what's the inner HTML of it?
It's the thing between the H1 and the slash H1.
what's the content in between those two?
That's the inner HTML.
And so what we're doing here by assigning the inner HTML, we have nothing between the two tags. The slash
Here is just a shortcut for saying it's T-Body and then close T-body there's
empty contents for it. So instead, we're setting the inner HTML of this table to be all those
all those things I generated and so that
puts the body of the table in there.
Should the link tag have a
have this at the end.
which link tag?
are you thinking of?
Oh.
Yes.
I think it should, actually.
Yeah, basically. So…
This is where HTML is a little sloppy.
you can sometimes get away with having
a tag and not the close tag.
And the browser will just kind of deal with it.
So, um.
But yeah, I'm pretty sure there should be a slash here.
I will check that after class and I'll update my code.
So the question is, what does this defer do? So I mentioned that this defer
causes this JavaScript file to be run
after the entire page has been loaded.
And I wanted that because I didn't want
us to be manipulating this table and trying to insert things into it
before it was finished. Now, the chances are this page load just so fast.
And it's going to take a while to get the data from the back end servers. So the fact that this
it should never be a problem. If I got rid of this, it probably would still work fine.
But to be sure.
I'm specifying here loaded after everything else. Now, I could have instead say async.
If I said async means load it in parallel, just kind of do everything there. You guys figure it out. And like, if you have a lot of code as process to speed things up, you want things to happen parallel.
You do things async. This is the slowest way to do it, but
If I don't have anything else to do and I want to manipulate the page after you know
This is probably the safer way to do it.
So there's lots of ways of doing things. So what we're getting into here is concurrency. And concurrency is
is an issue on the back end.
But it's also an issue on the front end, making sure lots of different things are happening.
So you have to coordinate all those things.
So last, we only have a couple of minutes. There's a question about what's the database stuff?
what's going on with this database?
So.
So it stores data that
that should be saved, i.e. you know
The Data Studio.
So remember with our first form demo, when you entered in data to the forms.
the form data would be gone when you restarted the server.
But we wanted to save to this now
the…
the difference
Here is the database here. This is a database file.
So this is a local database
in the web server. It's just being stored in a file, but it's a full SQL database. That's what SQL gives you.
The classic way you do um
databases and web applications would be with a separate
database application like
MySQL or Postgres or MarioDB or Oracle or whatever. It's a separate process, often separate running program.
running potentially a completely separate computer. You have to have some way of accessing that database.
potentially over a network and you'd have a communication and stuff and things and
So you could use one for this.
But managing and setting up those external databases is a whole separate thing.
thing.
Which can be complicated. I mean, typically if you're a large organization, there'd be an entirely different team
from the web developers maintaining the database.
It's a whole other set of
skills and things so
But how you'd use the way you would communicate with the database
I'm not saying that's the only way to communicate with the database. By far, there is no SQL databases and things but
most of the time you want to use a SQL database because it
Because it gives you so many nice things.
And generally, they're plenty fast.
If you have specialized application.
Yeah, I mean, I used to do this teacher's class
their version was something called MongoDB,
which doesn't use SQL.
Now we're giving you a simpler time using
SQI code. You have full SQL semantics
But we don't have to have any external programs running.
How much data can SQLite handle with ease?
up to the size of a maximum file on your system, basically as large as a file as you can do.
Multi terabytes is not a problem.
You're not going to run out of space typically. Now, you may need distributed performance and other things
Yeah. And if you have to have concurrent writers to the database, you definitely want to use something else.
I mean, SQI can kind of do it, but not really.
Other databases are really designed for concurrent rights, and that is where they shine, and that's where you should use them. But here we just have one program, our web application accessing the database so
We're fine.
So
I've chosen SQLite to keep things simple.
It is a real database.
If you understand SQL and stuff, but understand if we're using some other database like even Oracle or something, you're just saying exactly the same commands just to
another program over the network.
And I will stop here.
and um
If you have questions, please post things on Teams or message me.
I respond to messages as I can.
Talk to your TAs also, but I'm happy to, if anyone has questions and otherwise um
Good luck with the assignment two. I suggest you mostly focus on the assignment. Don't worry about tutorial
five, tutorial five is due
way after the midterm, it's like November 20th is the last day you can submit it.
We're going to be having lots of stuff to go on
go over after the midterm, but I'm not planning on covering
new material until
you know, I can talk about tutorial five, but I can talk anything else
Until after the midterm.
So.
So…
I can talk more about South SQLite and databases work in the next lecture.
Thank you very much.