Learn to develop a web application that behaves in a similar way as apps like Twitter. This course teaches full stack development with both the frontend and backend. Learn to structure the website using HTML. Learn to apply styles using CSS. Learn to make the site interact with the user and turn it into a web application. Besides coding the client side, you also get to look at the server side with Nodejs, using the framework Express. For the database, the course uses MySQL.

Build a Web App like Twitter from Scratch Using HTML, CSS, JavaScript, Express, MySQL

Build a Web App Like Twitter From Scratch using HTML, CSS, JavaScript, Express, MySQL

Welcome everyone, this course we are going to learn how to make a web application that
will run on the browser. This application will be very simple. Take a look at this image.
We are going to have a text area where you can type text. You're going to have a button
to submit your text and that text will be added to a list of things that you have written before.
So this is very similar to applications we have present day. Any applications you post something
and whatever you wrote added to some sort of feed or list of things that other people can
So this will be a very simple application and we'll demonstrate how to build both the front end and the back end.
So we are going to use web technologies to accomplish this. Here on the right hand side I have some
of the technologies we will be using to build this application. I'm going to call the application write something.
You can call it whatever you want as you follow along this tutorial.
So we have to usually split the application development into two parts. The side of the
front end and the side of the back end. Front end is that which both what the user see they visit
the application or site. Back end is what usually the user does not see. Back end is
responsible for the underlying data for the application while the front end is more about
the visuals, the interactions with the user. So the front end is going to be talking to the
back end to obtain and write some data. That is when you type something and you click write
that write make submission of the button will make a request to the back end. So the back end
will know that someone that is you requested to add an entry to our database. Then the server side
that is the back end will take that will make sure you're typing something that's valid and will add
that to the database. Then we're going to have a list of existing entries here at the bottom. Those
will also be read through the back end that ultimately talks to the database. Now for the
technologies for the front end we're going to use html that the structure of the document.
CSS to define the style, the visuals, JavaScript for the behavior and that is we're going to
manipulate some of the elements that we see here in this document html document. The JavaScript
will be what we call vanilla JavaScript meaning no frameworks the pure JavaScript.
I'm going to use ES6 by the way beyond for the back end for the database that will be my SQL
SQL database. Now for the server side we're going to use Node.js which is just JavaScript
on the server side. This has a different name. We're going to use a framework called Express
and with that we're going to create what's called a JSON API. API
that will serve data in the format called JSON JavaScript object notation.
API means a prequation programming interface. The way for our client side that is the front end
to communicate with the back end to say request to write something to our entries or request to
read all the entries. Okay so that is it. That's what we are going to do. The first part we're
going to start at the front end, the second part of the other back end. Because we don't already
have the back end for the first part we're going to have a draft and have kind of like fake data
for the time being until we build out the back end and then we connect it to and finally we'll have
persistent data that is data that won't go away after you refresh the browser.
Okay with that I will see you on the next lesson.


fff3-01 Build a Web App Like Twitter From Scratch using HTML, CSS, JavaScript, Express, MySQL

Writing the Website Basic HTML 5 Structure - Learn Tags Elements

Welcome back. Let's start building our application. We got an overview now we
need to know how to build this. What do we need? Well, we're gonna do two basic things.
You can see here right-hand side versus a text editor because we need to
somewhere to type and save the file. Then you're going to need a browser so you
can open file, case HTML, browse and go to the application. There are many text
editors out there, there are many browsers out there. It's up to you to choose. I
really like. For this lesson I'll be using Adam, my text editor here. This one
on the left hand side, right hand side. For the browser I will be using Chromium.
There are other browsers out there such as Firefox, Safari, Edge, Home, Opera, Brave,
so on. Choose the one of your like. Okay, so we're going to need a directory in our
file system so we can start putting the files there. You can do that in many ways.
I like doing things in the command line. Linux Max users can use the terminal you're
liking and those users can use CMD or the PowerShell. We'll do a lot more stuff
in the command line later on but for now you can get by if you just use the file
manager of your operating system. In this case I'm using Ubuntu Linux. So I have
the directory right here that I already created. I named my directory write-something. So I want you
to create that folder so we're going to start writing files there. Now I already wrote this
file here, readme.txt is just a file. You can see on the right hand side of the screen here.
Anyway, let's create a new file in the directory. I'm going to call it index.html.
This is where we're going to define the structure of the application. Okay, we're going to be using
HTML. The .html format is for hypertext, markup, language, files. This will define the
structure of our website, our web page application. Whatever. Initially it will be just a plain
website and once the website becomes interactive that's when it becomes an actual application,
web application. Now it will be just a web page. Anyway, let's get started. We're going to do
HTML. So for HTML it's the syntax is like xml. We're going to use tags and inside those tags
we're going to add more tags and inside those tags we can have some content like the tags
somewhere or you can define metadata for the page. So let's get started. The most basic tags
HTML tag, like it covers all the other tags. So when you write a tag you first open it using
the angle brackets, surrounding, name of the tag. In this case you have less than, name of the tag,
greater than. Now when you open a tag always remember to close it. I already did it here. To
close it just place a slash type the same thing you've typed when you open except you have to type
a slash right after the last thing. Last then, slash HTML, close with angle brackets. So we have
a tag here. Now inside the tag you can add more tags. I can nest things. So typically you're always
going to have this basic structure. HTML tag and then inside you have about two more tags. That's
going to be the head. Then we have the body. Oops, I did close it early. Okay, head and the body.
So I just like to use two space indentation for all my web development. That's what I'll be using.
Whenever I open a tag, I'll add some indentation. When I close the tag I'll revert one level to the
left. So in the head tag you typically put metadata related to your website. In this case we're just
going to be interested one for now and that's going to be the title. So I'm going to use the title
tag to define the title for this website. I'm going to write something here. So the title is what
appears when you're writing the browser and you have the tabs. So this text in the tab like
Mendian web docs, Laurie Impson. This is the text that comes from the title tag. Okay, we'll get back
here. That's it. Now for the body, it's the actual content that the user will see. So the body, we're
going to have something. Content goes here. This is to know to test it out. Now we have written the
very basic HTML tag. Now there's one more tag that I would like to point out. That's a doc type, a
special kind of tag so you can tell the browser, hey, I'm going to use a certain version of the HTML
of HTML. So it's going to be less than exclamation doc type space HTML like this. This will tell the
browser, hey, this document uses HTML version five. Because in the past there used to be other
versions of HTML. So now we have this tag called doc type to tell the browser what version we're
using HTML most recent version as time for writing recording this most popular one and the one to
go for now. Anyway, that's a doc type. Now we have written the structure very simple website. Now how
can we see what we wrote in the browser? Just open the file on the browser. So many ways to do that.
I could maybe your text editor can right click and open in the browser or something. I have showing
file manager, right shows the file here in the manager I can right click, HTML five open in the
browser, that'll be a choice. Or again, drag and drop that works to see. So I dragged and drop it to
work. Okay, so you can see the title of the pages here write something also in the tab and the content
whatever we wrote in the body goes here. If you want to see the source code for what we wrote, you can
right click. And you can see view page source. The browser will show you this is the source code for
whatever was rendered on the screen. And that's exactly what we wrote. Nice. So every time you make a
change to your source code here, you got to save the file. Then in the browser, go here and refresh.
Might be hotkeys for that. For example, my case is control R using Mac might be command R.
To reload or refresh the page.
Okay, so we wrote our very basic structure. So let's take a break for now and continue.


fff3-02 Writing the Website Basic HTML 5 Structure - Learn Tags Elements

Drafting Website Entry Text with Lorem Ipsum - Web Programming Tutorial

And we are back with one more lesson, creating web application from scratch application like
apps like Twitter and the like, you write something posted and appears on the screen.
Let's keep it going.
So we got HTML here.
Very nice.
We've got nothing particularly interesting.
Let's add a like a draft.
Let's make a draft of what we need to build.
That's typically a good way to start getting building an application.
Right now we don't have any data, right?
Have no users.
They haven't written anything for us.
So we got to make some kind of fake data.
You have to draft it all up.
And then when you got it drafted, and we make some interactions, make it behave correctly
as you type text.
It adds a new entry to the list of things you have written.
And then once you got that working on the front end, that's when we finally hook it
up to the back end where we actually have the data be what we called persisted, right?
Meaning the data doesn't disappear after we reload the browser.
Because the data has to be somewhere.
Whatever wrote, it has to be stored somewhere.
Otherwise, it does just magically appear like that.
That's not be a place.
There must be a place where the data is.
That's where it'll be in the database.
And through the server side API, we can access that data.
Whoever is going to ask the database, hey, user wants to access this data, give me the
data, then server side obtains the data.
If there's isn't any problem, and sends it back to what's called the client, which is
on the front end.
Anyway, let's get going.
So let's make a draft of this very picture here.
So content goes here is not very interesting.
I'll just write something.
I'm going to put this inside what's called a div tag.
I'm going to close this text in the div tag.
Div tag is like a tag with nothing particular.
The most is like kind of has no meaning by itself.
That the div and the span are the meaningless tags.
And they're used, usually you can get started with, you can pretty much do anything with
them.
The difference between a div and span is the way the content is shown.
The div will have whatever you put inside it takes space of the whole line.
And the span will only take space for, if you type like a word, it will only take space
for that word.
It will not fill the whole line and push everything to the next line.
Something like that in simple terms.
We're going to see.
So anyway.
So we have that.
I'm going to break the line.
And I don't need to have spaces around the tags.
I can add spaces you want, like to organize things up to you.
I notice I always indent every time I open a new tag.
So I can see the structure and the nested nesting levels for the HTML.
After that, after I open HTML, I add one level in the station with two spaces after open
head add one more level.
Now it's like two extra spaces with a total of four from the beginning.
That means that's one, two levels, like two times two, four.
Same thing here in the body.
So let's get started.
I'm going to write this someday.
I'm going to write the draft for these things that are written by the user.
So have have some junk tasks.
Fake text inside.
So to do that, I'm going to use what's called Laura Epson Generator.
It's a very nice thing like to generate random text, you can fill in your applications.
You don't particularly understand what it means because you want to focus on the building
of the application and not on what's written there.
So I'm going to go to my browser.
There's this website called lipsum.com.
Like generate Laura Epson right here.
It's going to be a bunch of random tags.
I can just copy it paste into my application.
Let me copy this card back to my text editor.
And I'm going to paste it inside between the opening and closing div tag.
Now my editors doesn't have soft wrap.
So maybe I'll add that to make it easy for you to read.
So it will appear that things are in a new line, except they are not.
It's just squeezing everything in this view here so you can see.
Anyway, I pasted this text here.
Now let's make two more.
Open and close the div in between.
I'm going to copy another piece of text.
And I'm going to make one more here of divs.
Opening closing divs in between.
I'm going to place the text.
Great.
Now I have that.
Let's save the file and go to the browser.
Back to the tab where I have the application open, the site, reload.
Now I can see write something.
And the first paragraph, second, and third, it's there.
But it looks really argue, right?
Because there's no styling.
It's just the structure in the text.
You can see it comes in sequence.
OK.
I want to show you something to analyze.
You already know that you can see the source code right clicking the browser and view page
source.
That's fine.
But there's also another very, very useful thing called the developer tools.
Every browser, modern browser should have it.
The way you can open it is press F12.
And it should appear either on the side or on the bottom.
It depends on how you choose here, the dock side.
For example, I can put it on the bottom.
Or I can put it on the left side.
So on.
Anyway, maybe I'll put it on the right hand side.
So this is called the developer tools.
I don't care about this.
Close it.
So we are in the elements tag tab.
The elements tab shows the document object model, so called DOM.
And that's all the tags in our site.
So if you hover with the mouse, you can see it highlights the section of the site that
corresponds to that.
So you can see the divs is each text and have the right something div.
You can see the div occupies the whole line from left to right.
You can see this right something.
You can see the whole line.
You can see it's highlighted from the left all the way to the right hand side of the
page.
And that's the div.
In contrast with the span, if you have this span, it will highlight only up until the
word something at the end of something there.
It would not go all the way to the end of the line at the right hand side of the screen
area there.
You see the body HTML is the whole thing.
Obviously, the head is metadata, so it should not be part of the content that you see.
And you can see the head.
There's the title.
Write something.
So this will be very useful as we develop the application.
All right, so I think we're good for now, and see you in the next lesson.


fff3-03 Drafting Website Entry Text with Lorem Ipsum - Web Programming Tutorial

Adding Input Controls and Working on the Style with CSS and DevTools

We are back in this lesson we are going to add the text box and the button.
Let's get started. So before the entries what I call entries these lines of thought or text
that the user has written. So before that let's add a place for the user to type multiple lines.
We're going to use the tag called text area. Okay text area. You can close the tag as well.
So this text area if we save it and just refresh the browser you can see it's right here you can
type anything. It's a very basic control of multi-line input. You can resize here. Anyway
let's add a button now after the text area. Open tag button. Close tag. Now the button in between
the tags here you place whatever you want to show for the button we can say write or submit or
whatever you want. Let's save it and reload the browser see the buttons right next to the text area.
Now that is okay but how about the right being its own line. Very basic trick you can do to make
the button be a new line just add a div and close the button inside the div. Because the
div occupies the whole line that button will occupy the space of a whole line. So it will break
a line instead of being the same line as the text area. Nice. Okay so that's it for text area and
the button. Now it's not doesn't look very nice. How about we add also styles. Now to style the page
visuals we use CSS cascading style sheets. Now CSS we're going to do following we're going to
define what are what are called classes and for each class we're going to define a certain
combination of styles and we're going to apply that class to the HTML elements. Now all those tags
are wrote we also call them elements of the page. We have an element there remember the element tab.
So this is an element text area this is an element div this is an element button and so on. So we're
going to apply the class to the elements. Since the class will have a corresponding defined style
that style will be applied to that element. Now you can write those styles in the same
file as the HTML but that's not very good practice. So we're going to do the following we are going
to create a new file called styles.css.css extension for the cascading style sheets.
So let's start with the following see the text is kind of glued together we cannot distinguish
these three entries let's add a border surrounding them. How about that.
So let's create what's called the class classes are created if you give a dot followed by the name
of the class. I usually like to use dash or snake case means this meaning use lower case
and when you have multiple words the separator of the dash in between. I'm going to say dots because
I want to define a class. Let's say let's just say entry because I want to call each of these
things an entry. Now you open braces and close braces. I usually like for style it doesn't matter
if you have these spaces in between line breaks or not but usually we have a standard style and
the style is you place everything in a new indentation level that is two spaces for me.
So I'm going to change the border and we say border that's the property that's that's property I
want to change colon and that's the value. So we have the name of the property on the left hand
side followed by colon followed by the value. I usually put a space after the colon just for
style and I'm going to say one px px pixel the unit of measurement here and let's say solid
and let's use black color.
Now David reload the page nothing happened why well I defined a class but I did not tell it
to use the class for the entry elements. So to do that we need to first find a way to connect
this style sheet file with the index.html file and then we have to tell hey for the element
corresponding to this text please add the class the style defined by class called entry.
Let's go back to index.html. Now to link the style sheet you have to add a link tag.
So here after the time inside under the head okay usually we place a CSS link tags
inside the head tag right before the end of the head right before the end of the head.
So I'm gonna add a link tag and I have autocomplete in my editor so I can just type link and tab
and it will autocomplete everything that's needed to create the link. Now this link tag is more
sophisticated because it has extra things in between here the greater than and the name of the
tag those are called attributes so I have a real attribute and an href attribute. So these tell
something extra about the tag in this case the link tag telling hey this is a style sheet and
this is where you find that. Now the href is the location where it is what is this wrong so I put
it in the same director as index.html so I have to say simply styles.css and that will work just
fine that's in the file name for these styles.css. Now great I linked the style of the index now I
have to apply the class called entry. Now locate the element you want to modify stylistically
these divs now you add what's called the attribute called class to the element so remember the
attribute is between the opening tag name and the greater than put a space there and
add an attribute called class. Now that's the name of the attribute I need to define a value for that
and for that I put a equals being between and you have double quotes and that's everything has to
be double quotes for the value. The value will be the name of the class in this case entry. Now
there's no dot dots are just for the style sheet because the style sheet needs to know
why you're defining class or other things such as the id or the elements themselves can do that
way learn about that as we go on anyway that's the entry name of the class without a dot here and
it's applied to this very first thing save the file refresh you can see now there's a border
surrounding the very first entry element. Now there's isn't a bar for the others because we
didn't apply the class so let's apply the class to the others now that we know how to apply class
just add our attribute class to the div class entry to the second div to the third div same
thing space class entry very nice now all three of them will have border yeah well it's not that
great right they're too close together how about we add space in between them but what space between
them can we use what's called the margin so we have the box model is how you can think of these
html elements in css you can see at right hand side it there's even a box thing you can see if
I highlight let's see let's highlight the first entry so it's highlighted here I selected I clicked
on it and it shows me the kind of box model here and there's certain certain concepts you have to
understand and it's a concept of margin border and padding now you can see I highlight this thing
if you can see the colors that correspond to the diagram here on right hand side if you can see
there's a color of the very inner thing that has the number 688 by 36 that's the actual content
right of the element and that's what's highlighted here on the left hand side as I have heard the
most now it's outside of that there's something called a padding well it doesn't have anything
there's a dash there because there's no padding padding is that thing that's space between the
actual content and the border you can see there's no space between the actual content and the border
no that'd be nice if we had that right so how about we try and add some padding well we can try it
right here on the left on right hand side you have the styles tab and you have element style we can
click here and you can apply CSS styles on the spot so I can say let's say padding
hold on I could press a tab and I give a value we can start value one px and you can increase as
needed you can see now padding is one now observe as I increase the padding on the left hand side
the color green if you can see the color between the border and the actual content is increasing
and that's what's called the padding the space between the border and the content of the element
now there's too much padding so I'm gonna dial it down I just press the arrows up and down
arrows to change I think maybe six will be fine for me you could choose whatever you want so I can
click out and it will adopt that style now this is not saved so be very careful because whatever
you write here if you reload the page you lose the style this is good for debugging in real time
we're gonna use it a lot but make sure you always copy and paste this back to your actual CSS file
when you are done so I'm gonna go back to my text editor styles.css for the entry I'm also gonna
add a padding now the six px padding will apply to both the top bottom left and right so there are
there are other ways of defining padding only for the top only for the bottom only for the top
only for the left and for right and that's using different values right here right now the values
apply to everything if you want to know how to apply in different ways I suggest a good look at
documentation let's go there one website that's good for web documentation is the mdn mozilla
developer network developer.mozilla.org very good site now I can go here maybe I can do a search
and I want to know about padding
so the third one is see is under a web css padding that's the one that we want and you can see it has
all the examples you can see we did the first one with one value there's the one of two and three
and four and so on and they mean different things for example this one of four is the very very
explicit one that tells you you can specify the padding space separately individually for the top
you know let's see top right bottom left so that's the syntax right here if you have four things
that's the value the first one be for the top second for the right third one for the bottom
and the other one for left take your bits like clockwise starting from 12 o'clock right
as you remember these things if you have four it's clockwise starting from the top
top right bottom left and there's the other ones for example see what if you want to just change
the vertical one individually against the horizontal one too you can use two and so on I recommend you
read this page and see the examples here in any case that is padding going back to
nice so we learned padding is the space between the border and the actual content nice now there's
another thing if I hover over it you can see there's this thing called margin a margin is the space
from outside the border outside the element from the border to the outer content see we don't have
any padding right now what we want to do is get all these entries a little bit separated
right because they're glued together from top to the bottom so we want to add some space
after each of these entries except the last one it won't matter much right now
so that's the color margin so let's try to I'm going to write margin here on right hand side
during the styles I'm going to start one px just to see what it looks like and you can see
it's adding space all around from the outside to the border well it's very nice but I don't want
space all around I just want a space at the bottom so maybe I just want the bottom right
well I don't want to look up all those you know ways of this individually setting the margin
so you can instead do the following you can say margin dash bottom that's a way you can specifically
target only the bottom margin so margin dash bottom nice so I'm going to start from one px
you can see it increases from the bottom that's very nice right uh six I think it's still too close
a little bit how about nine 12 up to you I'll leave it at 12
okay that's nice let's copy this and space in our spread no style sheet what's called this file
there's no specific order for these styles but sometimes you might want to order in an
alphabetical order to make it organized notice when you define the class is dot for the class
entry open braces I like to indent two spaces for en one property and value per line property name
colon value always end with semicolon don't forget semicolon very important always end with semicolon
I like to put a space between the colon and the value it's like a standard CSS style that many people use
okay nice now we got it saved we copied everything for our playground here we can reload the page and
everything on the right hand side would be gone from the element style and it will then appear
under the entry you're going to see and everything will be changed accordingly
you can see now all of them have the style because now it's part of the entry
very nice right and you can play around with the classes here you can remove an
appropriate from the class if I remove padding checkbox you can see what it looks like without
padding with padding without margin with margin with vowel border with border very very useful tool
to work with the style in real time
so I think for this class for this lesson we're done and I'll see you in the next one


fff3-04 Adding Input Controls and Working on the Style with CSS and DevTools

Introducing JavaScript to Handle the Button Click for HTML page

And we are back one more lesson for our course how to build a web application
that's like Twitter using HTML CSS JavaScript, OJS, MySQL. Let's keep going.
So we spent some time working on the style. And that's just fine. Let's take a break from the
style right now. And let's work on more interactive stuff. That is okay, we can write something here.
But clicking right doesn't do any. I don't see any new entry.
Well, when you click type something here, click right. What should happen is a new
entry should be added to this list of entries. How do we do that? Well, we're going to need JavaScript.
JavaScript is programming language, bridging the scripting language for the browser
to make web pages interactive. We're going to make this interactive. And that's
pretty much when it website becomes an actual web application because of the interaction
with the user. So how can we do that? Well, we're going to do stuff in HTML, we are going to create
an element in memory. And we're going to apply class to that element, a new element to have the
class entry. And we need to set the text, the content of that element. And we're going to use
JavaScript to do that. Be very nice. We're going to learn about events, because when you click the
button, that's a click event, we need to know how to handle the event. So we can do something
in response to that click event. Well, we're going to first take the text, create a new entry,
inject that new entry to the list. And after that, we're going to clear this text box, right? Because
you already typed something you don't want anything else to be here. I'm going to do that. Well,
let's get started. Moving back to the text editor, I'm going to create a new file called script.js.
So JS extension for JavaScript. Now we're going to be programming JavaScript. Nice. I'm going to
make a script here. Now, let's first write the script. And then we're going to link it to the
HTML file using the script tag. Now for the script, we need to do the following. Well,
the user is going to type something here, and then it's going to click right. Well, the button
click is an event, we're going to need to handle that event. One way of handling the event is using
Add event listener. Now we're going to target what's called the document object.
Now this call object document object, we can access, we can call a function, aka method,
also known as method on the object, all dot add event listener.
Well, not quite sorry. First, we need to find what we want to listen to what element
is going to trigger some event. In this case is the button. Now,
the button is this button right, how can we somehow
tell it hey, for this button, the right button, and every click it, I want you to do
something. So I'm going to add an event listener to that button, not the document, the button
that's containing the document. If I need to look for the button in the document.
Well, how can we do that? One way is using get element by ID document again, element by ID.
This method will allow you to find any element in the document object model,
so called DOM ID ID of the element. Now, the right button does not have an ID.
So you have to add an ID attribute to that element or tag. So we're going to open parentheses.
I'm going to use double quotes here could be single quotes doesn't matter.
In our case, so double quotes, I'm going to give that
right button some sort of ID. I'm going to call it. Let's see.
Something.
That's the entry submit button. I like to name my IDs in that very same
fashion as the style sheet classes. I use lowercase letters separate locates,
words separated by a dash. Okay, so this is going to look for the element that has the ID
entry submit button in the document. The doctor object model is this thing you see here. If I go
to the browser under the element, okay. Now it's going to look okay, where's the element that has
the ID. Well, right now, the button does not have an ID attribute. So let's do
following going back to index to HTML. We have the button right here online 12.
Well, we have to add an attribute called ID to the button. So add an attribute called ID,
whose value is remember the value comes after the ego sign under double quotes.
That very name that I wrote entry. What did they call it? They call submit button.
Yeah, entry that submit dashboard. Now this button now has an identifier, right ID.
So we can use document but get element by ID to find this element. Now let me show you
something. Once it finds the element, I'm going to put it in a variable. Okay, I'm going to use cost
to declare variable. Like this, let me explain what happened here. So document got lmid, I'd like to
put a semi colon on the end, but you don't have to but this is usually a standard style for many
developers. So I'm going to try to grab the element by ID. Let's assume it's there. It exists. Okay.
There are cases where not by now be exists and they have to do some checks and other stuff.
But let's assume it's already in the DOM. Suppose it grabs that element, the button,
I want to hold on to that reference to that hook. And the way I can do that is by assigning this
to a variable. This is the name of the variable I put submit button. And to make a variable,
I use the cost keyword. I use cost because I don't need to redefine it later. So I can only
define it once and I don't need to redefine it later. Notice how I name my variable I use what's
called the ammo case. And okay, it means the first very first letters lowercase. And every
following word, the first letters capitalize, you can see there's two or submit and button.
The following word has the first letter capitalized all together.
So if you want to type a camera case, it would be like this. Okay.
That's a different naming convention. We have camel case here for the variable name.
I have a snake case for the
ID snake case for the variable, the class name, except I haven't used it because I only use one
the word. Anyway, back to this. Oh, that's very nice. And all now to the submit button.
And I want to add event listener. This means whenever you click, that's the first argument to
this function call. I want you to do something. And that's something that's out here. It has an
argument for a mental event. When I do something, let's do what's called the console log. Right
button was clicked. We're going to see what this does.
Let's just write it and see. Let's keep up this. We're now going to learn what it does.
Back to the index.html. We'll have to find a way to connect a script.js to the index.html file.
Usually we place all these connections, right, at right before the end of body, the full script,
JavaScript, we usually put the script right before the end of body. Of course, you can write
JavaScript in the same file as the HTML. But that's not typical. That's practice. In most cases,
or many cases, you're going to have a separate file for JavaScript. And to make the link you're
going to have. But usually before the end of body, to make sure that everything before that has been
defined, and there won't be any problems when by the time executor script that things will not be
in the page yet. Anyway, so for the style sheet, we use the link tag, that's for the script, we
simply split script, the script tag. We have a script. Next slide script. Now script has a source.
I don't know why the whole thing changed colors. That's really weird. What did I do?
That is strange.
Anyway, we have the script tag attribute, that's RC. And the value is going to be the name of the file
that I created for the script. Script.js.
So script.js here
is what goes the location of that is what goes under the SRC attribute. Now let's save it
here.
Okay, so I went to the tab called console. And I clicked the button, and I got this message
right button was clicked. So let's look at the code here.
So document.getElementId will grab the right button, put in a variable so I can reference later.
Some reference the mad event listener. So I call this method on the object that corresponds to this
button, right button. For the event call click, that's the first argument to this function call. So
what I'm doing here is a call this function call event listener. The function takes arguments,
arguments separated by comma. The space is just for style. This first argument is the
name of the event I want to listen to click. And the second one is an anonymous function.
An anonymous function can declare at this arrow notation here with a parameter comma separated
on the left. And the braces to define the body of the function. The body of the function execute
whatever I want. In this case, I only have one one line, one statement. The statement is what
writes, but right button was clicked to the screen. And that's done through the log function
of the console object. Now that I talk about objects, because JavaScript,
there's a lot of objects, objects like things that have attributes and have behavior,
behaviors like something you can ask it to do for you. In this case, I can ask the console
object, please log something to the console there. And I can ask the submit button, please.
I'm gonna add I'm gonna add an event listener so I can listen to you. And here's what I want you to
do in this anonymous function every time you click. And that's precisely what it did. That right
button was clicked when I click the button. Only happens when I click the button. Of course, like
click click click, I will keep writing more. Because the way my browser, the text that I the same
thing was typed it just adds a counter here saying, Hey, this was printed five times. So
it's actually one per line. But that's what the browser does to compact things.
Okay. And
that was it. We wrote our first script JavaScript.
Roll the script back to the index HTML, make sure to link that we're using the script tag
SRC location of the file with the script, usually at the end before the end of body is where it
plays the JavaScript. With that, I'll see you in the next lesson.


fff3-05 Introducing JavaScript to Handle the Button Click for HTML page

Creating a New Element with JavaScript and Appending to List

We are back to one or less.
Let's continue building our web application.
I reloaded my file.
I don't know why my editor had the wrong highlighting or had no highlighting at all.
I added the script.
That was no problem.
I just reloaded the file.
I reloaded my file.
We have the script.
We don't do anything yet.
Let's write what we should do here.
Let's just comment on what should be done.
Then we'll do it.
We can write what's called a comment with space slash slash.
That would just be something for us developers to read and get some grasp of what's going
on.
It's not really going to be executed or anything by the script.
Just a comment.
First, we have to click, we handle the event.
It's going to come here.
We had to find out what the user typed in the DAX area.
Once we have that, create a new entry element.
For that element, we need to inject the DAX into the new element.
We have to style the new element with entry class.
Then that's all in memory though.
We need to inject into the page.
We have to append what's called a pen.
New entry to the list of entries the user sees.
Then finally clear the DAX area so the user won't see the remainder of what you typed
before.
Maybe forgot something.
Maybe not.
We're going to do a later.
How can we find out what the user typed in the DAX area?
Well, we know how to grab elements.
Maybe if we grab the DAX area, we can find out what's typed there.
That's a good idea.
We can do the same thing with this for the button on line one.
We can do a document, call on, hey, please get the element by ID.
Let's give it a name.
Give an ID for the DAX area.
Maybe new entry DAX area.
About that.
Well, I'm going to put in some variable.
Create a variable const name of the variable equals to assign the value on the right hand
side to the variable.
Whose name is on the left hand side.
I will call this, we can call it DAX area, whatever.
That's the name of my variable.
Now how can we get the text?
Const entry text.
Let's create a variable to hold the value of that entry.
I'm creating a variable const name of the variable equals a value on the right hand side.
That is somewhat can be obtained from the element we grabbed.
But how, what's the name of the property?
Let's find out in a very useful way.
I'm going to show you how to debug using the DevTools from your browser.
Very, very useful.
Do it all the time.
You need to know this.
What I'm going to do is a following.
I'm going to click the button and I want to find out what's going on in the program,
in the script.
By the time I hit line four.
Line four will be the line with the break point.
Break point is going to be the point in the code, in the source code that the debugger
is going to stop.
And then we're going to let you know, hey, I stopped execution at this specific line.
You can investigate what's going on right now.
Then tell me when you want to continue.
Let's learn how to do that.
So I saved my script.
Go back to the browser.
Now there's one thing I need to tell you.
The browser likes to cache things.
Caching things mean saving it and not having to load it again because you already loaded
it once.
But you don't need to retrieve that again.
So to be efficient, the browser does caching.
It likes to store things so it can be reloaded or reused later without the need to actually
retrieving it again.
So because of that mechanism, sometimes your script, the changes might not be reflected
right away when you reload the page.
So I always advise you, go to the network tab of your browser and disable the cache.
It's probably unchecked by default.
I recommend you put disable cache as long as you are developing your application.
When you're done developing, I recommend you flip it back so it becomes efficient to retrieve
web application, website resources as you're browsing the web normally.
But while we're developing, I'm going to disable the cache.
So every time it downloads the script over and over again instead of looking at what's
already saved.
With that, I'm going to reload.
You can see, I can see in the network tab the resources I downloaded.
The index, HTML, the styles.css and the script.js.
Great.
Now go to the sources tab, locate the script that you created in the case script.js.
Now I'm going to place a breakpoint in the line here.
Now another way of loading if there's too many files, you can say ctrl P or command P
for Mac.
Type the name of the file script.js.
Enter and it will open for you.
For example, I'm here.
Okay.
Now, this is going to open up the file.
I want to place a breakpoint in line four.
So I click on the number four and it adds this circle that's kind of red.
Now if I click the button, you can see pause and debugger.
It paused the execution of the script at this line.
It hasn't done the line yet.
It's about to do.
You can see on the right hand side there are controls to tell.
If you want to go on, resume F8.
If you want to use step over next function called next line, for example, F10 and so on,
other controls.
If you want to deactivate the breakpoints that you said, if you want to see a breakpoint
here and all other stuff.
Anyway, focus on the breakpoint in line four, click the button, stop the breakpoint.
I want to investigate if there is a way for us to get the text that the user typed.
Well, it's not very useful here because I didn't type anything.
So I'm going to click this play to the script to go on.
I'm back here.
I'm going to type something.
I'm going to click right again.
Pause at the line for line for.
Now if I hover over text area, it's undefined because it hasn't executed yet.
I can press F10.
That's the second icon here.
And it executes that now I can look at hover over text area.
Oh, it says no.
Why?
So we could not find the element.
Do you know why?
Did I miss something?
I wrote a name here for the ID, but does that element really have the ID?
Look at elements.
Text area does not have ID.
That's why I could not grab it because it doesn't know about it.
So go back to the editor, text editor, index.
You need to give text area an ID.
That's the same thing that we type in our code in script.js new entry text area.
Line for.
That's the ID of the text area.
So it will, it would be possible for document.get element by IDs to find the text area.
Nice.
Save the file.
The browser.
You can reload.
Grab something.
Click button.
Now we're in the pause at the breakpoint in the debugger.
We can let it go.
Have 10 execute the line for.
Now you can hover over text area and it's telling you a lot of stuff in here.
So it really did find the element.
You can see on the left hand side.
It highlights that element as I hover over the variable name.
This variable is pointing to the element.
Text area you can see on the left hand side is highlighted and it has many, many, many
properties.
I'm looking for some property that will give me the content of that element.
Now we can just find out the dsa sds, wherever that text that I type by just looking here.
Sometimes there's a lot of stuff.
So.
Look at that.
Value is a property called value.
Whose value is ds?
AES so on.
What I typed.
This is the property we're going to use to access to get the value of what the user typed.
So that's nice.
We learn to debug and find out what's in the text area.
Let's go on.
Back to the script.
I now know that the entry text is going to be text area dot value.
This is how you access a property on an object.
Dot value give me that entry text.
Nice.
Now we need a new element, a new entry.
Let's create a new entry.
We can use document dot create element.
Create an element is a function that allows you to create an element.
Now you need to give as a string.
String is a sequence of characters under double quotes in this case.
And I want to create a div.
Like all the other entries.
It's just a div.
It's an element with no particular semantic.
Now nice.
I have this element in memory.
I'm going to put in a variable.
Okay.
I'm going to call a new entry.
Let me call and I usually like to add.
Now inject text into the new element.
Okay.
So the new element there must be a way to inject text.
Now we knew that text area has the value.
But what about the div?
Well the div has the text in between the text right, the opening and closing tag.
But how can we set that?
What's the name of the property that has to be set?
Well, I'll tell you it's not value.
Something else.
How do I know?
Let's go to the documentation.
And do an exercise of looking for the property.
Now go to MDN for example.
That's the one website I recommend.
I want you to look for.
Let's see.
Shumella element.
Let me put it in.
I know there's this object called HTML element.
And there's many on the left hand side that are the properties.
And I want something that's, oh, inner text.
Might be something.
It was something that's inside the tag, right?
Maybe inner something.
I'm going to search inner.
Represents the random text content of a notice of the sentence.
Maybe that's something promising.
Click there.
Interproperty HTML element, random text, content of a notice of the sentence.
I can set the inner text.
Syntax.
This is syntax.
How to do it in a value DOM string representing random text content of an element.
The element itself is not being rendered.
The return value is the same as node text content.
This text.
Text on a property of node interface presents a text content of the node and its descendants.
Let's see some examples.
Inner text might also be something interesting.
Inner text aware of the random appearance of text by context content is not.
Wait, wait, wait.
I wanted to get to inner HTML.
Sorry.
I'm just doing exercise for you to do certain things.
Where is that?
Inner HTML returns HTML as the name indicates.
Sometimes people use inner HTML to retrieve right text side of an element.
The text content has better performance because it's value node parses HTML.
Moreover, using text content can prevent XSS attacks.
Cross scripting.
I already know that one good way of changing the text is with text content.
I already validated that it's better to use that here by reading this.
It has better performance because it's value node parses HTML.
Meaning we just want the text right.
Just plain text.
Moreover, it can prevent from these secure attacks called cross side scripting.
That's a good thing.
We're going to use actually text content.
All right.
Go back to Adam.
We'll have the new entry.
To that, the text content will be now the entry text that we grabbed from the text area.
Let me call it.
What this is doing is the following.
To this new div that we created, the content, right, the text content.
Dot text content equals as assignment operator.
Assignment.
We are assigning the value of the entry text variable.
That contains whatever we typed.
Whatever the user typed is going to be assigned to the text content of the new entry div of this div.
So whatever in between the tag layer, it's going to be this whatever user typed.
That's great.
Finally, we need to style this thing.
Otherwise, it's going to look ugly.
So how about adding a class?
But how do we add a class to a given JavaScript?
Let's look at the docs.
How about class list?
We already knew it.
Anyway, let's look at this doc for class list.
Class list gives some examples of how to add a class or apply a class, right?
We have an element.
That was the attribute class.
Now you can add classes or remove them.
You can see it gives an example.
It's using document creator element like we used.
Oh, you can set the class directly with the class name.
That's nice.
I can also use this thing called class list or to remove add class.
I think this is better because if you use class name, you might overwrite classes that were already applied.
The thing is, you can apply multiple classes to an HTML element.
It's not just one.
So that's very, very common that you have an HTML element with many, many classes applied because you have different kinds of styles mixed together.
So because of that, I don't really want to use class name.
Otherwise, I cannot keep track of the other classes that are already applied.
If I say class name, my class is going to overwrite all these other classes.
It's going to take away all the styles and make a mess.
You might not end up well.
So I want to use what's called a class list through this interface.
I can add and remove classes just by giving them the class.
So what we want to do is add a class to that div that we created.
We can use dot class list dot add and under as the argument to this function call you pass a string with the name of the class.
Back to our text editor.
We have new entry dot class list to this class list.
I want to add.
What's the class we defined before entry, right?
That's the class that is applied to each entry.
That's going to add the border to padding and the margin at the bottom.
Save it.
Great.
So we have that in memory, but we need to add that to the page somehow.
One way we can do that was called a pen child.
Now, a pen is used to add something to the end of some other element.
Now I could add to the end of body, but doesn't make sense.
And it will be coming right after the script here, whatever we typed like this.
That's not good.
We want to have it right under this last entry.
So because of that, I want to make the following.
I want to enclose all the entries in another div.
And this div will be used as the entry list.
List of entries will be here.
Now I need some amount to grab this div and then inject at the end.
That's called a pen.
And a child, a pan child.
I'm going to give this div an idea.
I'm going to say it's going to be entry list.
Whatever you want to call it.
Or you can call it entries.
Whatever.
Anyway, so I'm going to target this element here, document get element by ID.
Then I am going to add a new metric to the end.
Let's do it.
Let's try the amount left.
I'll skip on the right.
So I've been new answer to list of interest uses these so document get element by ID to grab the entry list.
And then I want a pen child.
Now I don't want to create a variable here.
I don't have to.
You know, I created a variable before this case was justified because I use it multiple times more than once.
Now this case here wasn't that justified by created anyway just to make it clear to you.
And maybe it didn't find the element so we have to handle that we don't care about that right now.
We just assume it's there.
Anyway, you can change the call here.
So I started putting that in a very you don't have to just say pan child and then you enter what this is doing is the fall to the document get element by D to target that list.
So it's targeting this whole thing.
Now you're going to say a pan child.
And you give some elements.
So this element is in memory right now, meaning it's not in the page yet.
We take that go to the end of the list.
And we append that we add that new element, whatever I typed.
And it's going to be there.
Now you can see the div comes from the creation of create element.
The class here comes from our class list add the content inside comes from the text content.
And the appearance come inside under the deal at the end comes on the append child.
Fine.
So let me just delete the illustration of what it does.
Finally, we need to clear the text area.
Oh, that's it.
I really need this after all.
So it was worth it putting in a variable.
Clear the text area.
How do we do that?
Hmm.
Remember that the text area text was inside value.
Maybe we can just say the following text area value.
Thought value is going to be empty string.
That means whatever was typed will be now nothing.
That's it.
Let's try it out.
I'm going to save everything.
I'm going to go to browser.
Now I'm going to remove this break point right now.
We don't need it anymore.
You can do it here right click remove all break points or you can click one by one.
And I couldn't remove all.
Okay, so let it go refresh.
New entry content.
Like right and you can see we have a new entry.
New entry.
And if you go to elements,
expand the entry list.
You can see it's right here.
That's the new thing we added.
Are you excited?
Well, there's a lot more we can do to make it so much better.
Now the thing is,
as you type new things,
you can even type something empty.
So it's a lot to improve.
We can validate whether to use a type something and if the user didn't type anything,
we don't want to write.
And that's the actually pretty easy to go to your code.
Do the following.
You can see the event listener here.
Let me expand.
Right after you grab the text,
you can do a validation.
You're going to check, did the user type anything at all?
If the user type nothing, we should not do anything here.
Okay.
So what can we do?
We can just say if.
Now I'm going to use a
control flow.
If statement meaning if this condition is true, do something.
The condition will be if the user type nothing.
The user type nothing.
But what does the user type nothing mean?
It means the value of the text area is empty.
So text, the entry text in this case, right?
Because we assign text error to the value.
If the entry text is empty, like this,
you're going to return meaning get out of this function.
We don't have anything else to do everything after this.
If the condition is true, it will call return and everything after will not be executed.
Now what I did here is the if statement.
If the condition is true, it executes whatever is in the body of the statement.
The triple equals means if this value is strictly equal to this value,
meaning not only in value but in type.
You can use double but it's better to use triple because not only does it check the value,
it also checks the type of the things you're comparing.
Sometimes in JavaScript, you can be comparing a number with a string that contains a number character.
And if you use double equals, it will try to compare those two as though there were kind of numbers.
And that's not really a good thing in the long road.
It causes a lot of bugs.
So I always make sure to start with strict comparison.
Your only comparison strings here, you don't want to mix types in the comparison.
Anyway, that's right.
I don't see it.
Now let's try typing nothing at all.
I didn't type anything.
I click right.
Nothing happened.
Very nice, right?
It is nice but the user doesn't know what happened.
He's like, okay, I clicked but nothing happens.
Well, we should put a text, a message there saying there was an error.
We can do that in the next lesson.
I'll see you then.


fff3-06 Creating a New Element with JavaScript and Appending to List

Styling the Submit Button with CSS using the Browser DevTools

Hello, we are back.
Before we continue our class, we create a web app like apps like Twitter.
Let us go back to styling because the text error doesn't look that great.
The button neither.
Neither does the button.
Let's go back to a little bit of style before continuing.
One way of getting started with styling things is using the dev tool in the browser.
We already learned how to use that a little bit.
Now let's say I want a style, say the button right here.
The button, I want to make it better.
Well you can right click the button like inspect.
We will open that too, if it's not already open.
And it's going to highlight it for you and it gives you all the styles on the right
hand side panel here.
Style tab.
Now the bottom by default, the browser gives some default styles.
You can see it's surrounded by a border.
There's some little bit of padding.
And there's this color like grayish and it's all in the default style.
We don't want defaults, so we can define our own styles.
So we can start by using this element.style part.
You can click here and start adding properties in real time and see what it looks like.
Let's give it a try.
Go to the button, maybe click in.
Let's play around with the border.
The border right now, let's put one px, solid black.
Let's start out with this.
My first tab.
Okay.
Do you like the thickness of the border?
It's one px, so I can increase.
It's up to you.
It's kind of highlighted, that's why I changed the color.
Let me take the mouse out of it so we can see it's color black.
You can choose the border that you want.
I'll leave it to you.
You can choose the color as well.
One very nice thing you can do through the app tools is you can see there's a color picker.
If I click here and it shows me all the colors I can pick, these properties.
Now the first property is the red, green, blue that you can choose.
And it gives you the hexadecimal value.
Notice that I started with the word black.
You can use words for the colors or you can use what's called the hex value.
The hex value is a sixth alphanumeric code that corresponds to the color.
The first two is for red followed by the next two for green, followed by the next two for
blue, so R, G, V.
You notice as I change the colors the values change.
For example, you have red, red, red.
You can see the red is FF with all the others 0, 0 because that makes sense.
R, red, G for green, blue, B for blue.
There's no blue, there's no green, there's only R, red.
Anyway, the second thing here is the alpha.
It's the transparency.
You want it 100% transparent or you want opaque.
You can choose that and that adds a new set to the X at the end of the hex.
Another notation is the RGBA notation.
In this case, it is using numbers from 0 to 255 for each.
For example, red is 255, 0, 0, no green, no blue.
And the alpha or transparency is one meaning opaque, 0 for transparent and in between is
a little bit seen through.
It's a value from 0 to 1.
I'll leave it opaque.
For the red, the highest 255 is the reddest.
If you put 0, it's going to go to color white.
Oh, sorry.
White is all colors, all are black.
And if you put 255 for every single thing, that's the maximum, that's the white, all
colors.
Anyway, I can just leave any color you want.
Maybe this blue, about that one.
Nice, but I don't like the border, how it's not rounded.
So I can add border radius.
Oops, border dash radius adds the round.
It starts with one pixel.
And it can increase.
You can see the border becomes rounded as you increase.
Of course, there's a limit, but let's do two, maybe.
2px.
Four, four looks nice.
It's four then.
Nice.
I don't like the background.
Can we make it better?
Maybe, how about this background color?
Background dash color.
Let's start with yellow.
You can choose the color you want from the background.
And it changes accordingly as you like here.
What do you think?
Anyone you want.
Maybe lighter.
Anyway, I'll leave it like that.
Not very nice, but.
Let's add some padding to the sides.
I want to use padding, but I want to split the padding individually for the vertical and horizontal.
Vertically, I want to want 1px, horizontal and 1px.
I see compare.
Let's see what happens when I increase the first value.
It's the vertical, right?
Top and bottom.
Top and bottom, I think.
Maybe four.
From the left and right, I want to increase more.
Maybe eight or even better.
How about that?
I can also make the text bold with font size.
Font dash size.
You can use the letter, the words, but I like using numbers.
So I can use 400.
Then you go to 500.
Then you go to 600.
I meant font weight, sorry.
Not font size.
Font size will be the size of 12 pixels.
Let me show you.
This is the size.
You can increase so on.
But I don't really, maybe I want to, let's say 14 pixels.
Now for the bold, sorry about, I meant font weight.
Okay, font weight would be how bold you want it to be.
I can start at 400.
It doesn't make a difference.
500.
600 is the way and it becomes really bold.
You can see the difference.
You can even change the color of the text with color.
Well, that certainly doesn't look good, right?
I can click and change.
Maybe.
Who would be nice?
There you go.
Anyway, blue is.
So we got all these styles, but remember this is.
Just in real time, remember it will go away if you reload.
So be careful.
Don't lose the styles.
Copy them.
Copy.
We'll see for command.
Go back to your style sheets, styles.css.
Now I need a class for the button.
So for every element in the page, we need to apply different classes, right?
You have a button to create a class for the button.
You have an inch or created class for the inch.
You have a text error, created class for the text error.
So every individual different kind of widget or control element has its own class.
So let the final new class here outside.
I'll call it.
Maybe you want to call it.
Entry sub bit, but just like the ID.
You can have the ID the same as the class name, but there are different concepts, different things.
Anyway, or even better, I could actually, I don't even need a.
Actually, you could target.
That element by ID.
If you use the pound is going to target the element ID like this, the class, but that's not very good because you could have multiple buttons on the page.
And maybe those buttons share the same style.
But the ID is only one.
You can only have one one ID ID is unique.
So usually for things like widgets on the page controls, you always use class because class you can have them.
Apply to multiple things.
You can have multiple of them appear in the page.
So if the thing is really unique, of course, can always end up with ID.
But I think it might be we can maybe in the future have money, different buttons that might have the same consistent style.
So I'm going to make a little class.
Copy and paste, fix my notation here.
If you want to organize by.
Fatically, that's fine.
Up to.
Oops.
Okay, so we need to apply this class to the entry button.
So go to index.html to the button you're going to add a new attribute.
You can put it out before after the idea doesn't really matter.
I'll put after class.
And here no dot here.
That's reload.
Now it's persistent.
There's now this class here.
Okay, one other thing is like, usually when you hover over the button, there's a class.
So you can see that the class is here.
So you can see that the class is here.
So you can see that the class is here.
So you can see that the class is here.
Okay, one other thing is like, usually when you hover over the button, there's a change of the cursor.
Maybe you want to put your cursor pointer in a change.
You see when I hover over the button, it changes to this pointy finger.
Of course, there are other ones like the cross hairs.
This one is the guy you're going to like your crosshair in the button depends on what you like.
The standard is usually the cursor pointer.
So I can add that in his finger.
So let's add that to our dial.
I'll just see an SS right here.
And reload and it'll be out of there.
Okay, so that's the style for the button and we learned how to do in real time here and don't forget to copy and paste.
I think I'm going to take a break for now and I'll see you in the next video.


fff3-07 Styling the Submit Button with CSS using the Browser DevTools

Changing the Alignment of the Button and the Width of the Text Area

Welcome back to one more lesson.
Let's keep building our web application.
Let's do a little bit more of styling.
If you remember the wireframe that I had presented you in the very first lesson about
the web app, how it is going to look like, how it is going to behave.
The text area at the top, it had the right button right under that but aligned on the right hand side of the content area.
Right now the right button is aligned at the left. So let's change the alignment.
So if you go back to the browser here, you can right click the button and inspect.
And we have this very convenient area under the element tab where you can see the document object model.
So you have the button here. Notice the button is enclosed in this div.
This div is the container for that button. So there is a very easy way to if you want to align something inside of any kind of container, in this case the div.
And that's using the text align property. If you try it out, go here under the styles tab, click here under the element dot style and let's write text dash align.
I'm going to press tab, now I can select the value for this property.
Notice in the drop down list there are many values this property can take.
You can try it out and select one of them and see in real time what it looks like.
For example, if I try out center, you can see now the button. It's center about the div it's contained.
So the div occupies the whole line from right to left of the content area.
Now the button is centered. You can also use right. That's what we want.
Now the button is aligned at the right hand side of that div.
So let's copy this and let's apply it to the container div.
Now the container div doesn't have any class applied to it.
So we are going to have to create a new class and apply that class to the container div.
So back to the styles.css file. I am going to create a new class.
If you want to target a class, you start with a dot and then you type the class name.
Let's call this the entry submit-button-container.
And I am going to paste the style we had defined.
And then to the div that contains the button, I am going to add an attribute class equals open double quotes in between the double quotes.
I am going to type the name of the class. We have just declared on the other file.
Enter submit-button-container.
Now the style associated with this class is going to be applied to the div on line 11 in index.html.
Well I chose this name based on what was inside but if in the future we think that this container is going to have more stuff, more elements,
not only the submit-button, maybe you had other actions you could take.
It's probably a good idea to choose a different name for this class.
Maybe you want to say it's the text area actions container.
Something like that.
In any case, let's go on.
So that's great. The button I can refresh the browser and it now appears a class here and I can click it.
Oh, something happened.
Did I save all the files? I did not save my style.css. That's why it did not appear.
I saved the file and I refresh and now the button is aligned at the right hand side.
Let's do something about the text area.
Now the text area right now is kind of too short in the width and it doesn't look that great.
How about we inspect the text area and let's do something about it.
How about the text area take the width of the whole line?
To do that we can use the width property.
Now the width property can start with a pixel value.
That's totally fine and it can increase the size of your liking for the width of the text area.
But doing it like this means you're using a fixed size.
So notice how I, if I want to increase the width of my content area or if I want to squeeze it and decrease the size of the text area remains the same.
And sometimes that's not what we want.
Sometimes you want the element to adjust its size based on the current width of the screen.
So what if we told the text area, hey please take up the whole width of the content area no matter what width it is.
Now to do that you can use percentage values.
For example I can use 100% and it's just saying please have this element occupy 100% of the width of its containing container.
In this case it's under the body so it's going to occupy 100% of the width from left to right under that body.
That container, okay.
So that is great. Now notice how if I increase the width of my screen the width of the text area adjusts accordingly.
And if I decrease the width it does the same.
So that's nice.
One thing to consider though is if you increase the width too much your website might not look that great.
So that's a topic for another lesson that we could tackle but for the time being we're not going to be concerned with optimizations for larger screen sizes.
But I'll give you an idea of what you could do.
In those cases since the size is too wide we usually add space at the right and the left of this whole content area.
So we squeeze them towards the center and make it smaller and better for users to see.
So we could achieve that say using a media query depending on the width the content area is taking at the current moment.
In any case let's keep going.
So how about we add a margin to the bottom of the area with the right button because the button is kind of too close to the very first entry of the list.
So let's go to the div that contains the button and we can easily add.
You can either put an element style or under the class here to see what it looks like and we'll matter.
Margin dash bottom as search one px and increase to your liking.
I think 12 is the one that we use for the space between each entry in the list.
I'll use that as well to be consistent.
Now of course I can see it right now in action but if I reload the page this will all be gone right reload.
Oh it's gone.
So be careful that.
So if you try it out in the.
Dev tools always make sure to copy and paste it into your style sheet.
And there is styles that CSS now has the margin butter for the initial met button container.
And I forgot to.
Target the.
Oh yeah I forgot to copy the style for the div.
So that's one big mistake that I made right I warned you about it and I just did it.
I lost the style for the way of the text area.
So be very careful.
Don't forget to copy and paste into your style sheet as you're working with the Dev tools.
In any case let's add the style in our source code for the text area to take the way of 100%.
Now notice the text area does not have any class.
We could add a new class to the sex area and in the class we add the way of 100%.
That's usually the best way to go.
You could also target the class this element by ID and style based on the ID that the element has in this case text area has the ID to your entry area.
That's totally fine.
But the thing is you most of the times you want to use class because the class can be reused and IDs are unique.
Why IDs are unique.
So the ID can only be associated with one element at a time you're going to have the same ID for multiple elements.
So that's why you want to always use class because you can reuse the class the style that class for multiple elements.
But just for this case I'm going to teach you how to target the element by ID and apply the class.
Not the class.
Apply the style to that element.
Notice text area has the ID and entry text area so we can go to the style sheet.
Style.css and to tell the style sheet please target the element whose ID is that you can say pound and the name of the ID.
In this case new-entry-text-area.
And you declare the styles the same way we did before.
Open the curly brace and close the curly brace in between.
You say the width, whole 100% or any more extra styles.
So this is starting the element whose ID is new-entry-text-area.
Now it's working just fine.
First there's always something we can do better.
Always something we can improve regarding the style of the application.
You could do a lot of things for text area and many other elements in the page.
Maybe you want to add some more padding so that the text that you type has some space between the text content and the border.
You can add a margin at the bottom to increase the spacing between the text area and the following element under it.
But I'll leave that to you.
For now let's take a break from doing those styles and let's move on.
I'll see you in the next class.


fff3-08 Changing the Alignment of the Button and the Width of the Text Area

Adding an Error Message Next to the Button to Submit the Text

Welcome back to another lesson.
Let's keep building our web app.
So, we just did some styling.
And I actually had some reason we did that.
That's because I want to add a narrow message
to tell the user that something went wrong with his submission.
A whatever the user has written.
Remember that we added that validation on the front end
so that when you click write it wouldn't add a new entry in an empty text?
Well, remember I said, okay, as a user I click write
and I don't know what's going on, why doesn't it work?
Well, obviously because we are developers
we know that the user is trying to write nothing at all.
That's why it doesn't work.
So, you want to let the user know that something went wrong
with his submission or her submission.
And that's through an error message.
So, let's add another message next to the button on its left.
So, let's just make believe there's an error
and let's make a draft first.
And later we figure out how to show and hide that error message.
And so, before the button in the container here
enter submit button container.
Before the button let's add a span element.
A span is like the equivalent of div
or something that doesn't have any specific meaning, dramatically.
But it does have its display as inline,
meaning it will not take the whole line
but not occupy the whole line.
It won't occupy as much space as it takes.
So, let's give it an error message right here.
Let's say you need to type at least one character.
You need to type at least one character.
Save it.
Go back here.
Now, if you highlight this,
you can see the span only takes as much space as it has characters inside.
As content inside.
You can see the div takes the whole line but the span does not.
And that's because of the display property.
So, that's a property in CSS called display.
Let me show you here.
If you go to the div container
and there's a filter here under the styles,
I can type display and it's going to tell me
what's the display value for this div right now.
It says display block and it says user agent style sheet.
By default, the browser is considered div to be a display block.
Now, if you look at the span
and you click computed instead of styles, okay?
Click computed and you can see the display right here is inline.
And if I were to change the display,
I'm going to remove this.
Of the span to be block, which is the same as div,
then this span will behave exactly like a div
and will take the whole line, space of the whole line.
You can see now that the button was shifted to the next line
and the span took the whole line.
That's what display block is.
Now, if you put it back to what it was, which is inline,
then all it takes is space as needed.
Let's keep it at that.
So I don't even need that because of default.
Now, it would be nice if the error message had some kind of red text.
That's the typical standard pattern.
I'm going to start color red, but maybe that's too red.
I don't know.
You can change it here with the color picker.
It's going to be less or darker up to you.
How about around here?
And then you can copy this.
Now, we need to create a new class for the span and apply it.
So let's do the other way.
From the index.html, add the new attribute to the span cloud class.
Let's give it a name.
New entry error.
For example, save it.
Go to the styles.ess, add a new class.new-entry-error.
Corresponds to the same class we gave to the span.
Paste that style color, that kind of red.
E1, 0F, 0F.
That's my choice. You can choose whatever you want.
Now, the text, the color of the text is going to be that red.
Well, that's nice, but it's always showing.
The user hasn't interacted with the text area yet.
So we need to not have the error there yet.
So maybe you want to hide it for the time being.
There are many ways to do things in CSS.
There are many ways to hide things.
I'm just going to show you a very simple way.
But you might want to reconsider these depending on the situation.
Maybe there might be other concerns such as accessibility or something like that.
But this is the easiest way.
I'm going to use the display property with the value none just to hide it.
Okay.
Now, I could add the property here, display none.
And it would initially appear hidden if I unchecked it adds.
That's totally fine.
But I want to be able to control these styles using different classes.
And that's a very common pattern you see out there.
So instead of having one class with the style to hide,
I'm going to create a class, say, Neo-entered-error-hidden.
And I'm going to add display none.
The reason I do this is because I can easily control whether it's a display or not,
simply by removing or adding this class.
So initially, we want to have it, right?
Because we don't want to show it by default.
So I'm going to copy and paste this into the span node dot.
And one thing you have to notice is an element can have multiple classes.
That's something that's very, very common.
So to apply multiple classes to an element, just place them separated by space.
So this span element has this class, Neo-entered-error.
And also, with the space there, has this class, Neo-entered-error-hidden.
The first class applies the color kind of red.
The second class applies display none to hide the element.
Okay.
Now let's refresh.
You can see there's two classes now.
One thing I want to teach you is how to toggle classes for elements.
That is how to turn them on and turn them off.
That is add or remove them.
Under the DevTools under the Style tab, next to the filter, there's this dot-cls element classes.
Your browser should have something like that.
And then it shows you what classes are applied to this element.
You have two classes, right?
If I toggle here, checkbox uncheck the hidden, the error will appear because this class is no longer applied.
But if I check it, now the class is applied.
So this is the behavior we're going to use through JavaScript to mark the error there after you click the button right.
So let's do that.
Back to the text editor, script.js file.
Remember we had this front-end validation.
We are here in the Add Event Listener for the Submit button.
This is the Handle function.
Front-end validation.
The texture tracks is nothing, empty string.
Return from this function, meaning everything afterward will not be executed.
We're just going to terminate early and return nothing in particular.
Fine. Before we do that, we want to add show.ad-error message.
Now how can we show.ad-error message?
Well, you have to remove the class new entry error hidden from the span.
Okay.
Well, you can target an element by ID to grab it and then you can use the class list.remove instead of add to do that.
But in order to do that, the span has to have an ID.
That is totally fine. You have to have an ID do that.
What I want to show you is how to target an element by its class.
I'm not saying this is a good practice here. I just want to show you that it's possible.
Okay. So I'm assuming there's only this one element that has this very kind of unique class name called new entry error.
And that's my assumption here.
So just to show you how to target an element by class name, you're going to say document.getElementsPluralByClassName.
And then you get the name of the class new entry error.
Now, this is plural because class is not unique. So there could be multiple elements with the same class.
I'm assuming here there's only going to be one. That's my assumption.
So that's why I think it's going to work.
Now, when you do this, you don't get only one thing. You've got a collection of things.
So you've got to do additional stuff. Let me show you that in browser.
Sometimes if you want to see something in the browser, you can go back and you can use what's called the console.
Go to the console tab and paste that code. And you can execute that code here.
And I forgot something.
I missed a word from the function name. You can see here immediately told me uncaught type error.
Document.getElementsByClass is not a function. Not a function meaning like it does.
It's not something it exists. It doesn't know what it is.
And if you look here, if I remove that, notice there's a name there. That's the one I wanted to show you.
But if I just do document.getElementsByClass, it's saying undefined there. That's because it doesn't exist.
And actually what I meant was by class name. I missed the last word of this function.
Now it exists. If I type enter, it's there. And if I try to call it now, try oops. By class name.
Now you can see I press enter. It gives me something back. That's the return value of this function call.
It's an HTML collection that contains many things. Let's expand this collection.
You can see the length is one because it only found one thing.
Now the very first element of this collection is that spend that's hidden right now.
Okay, back to the console. So that's what we want.
But because it's under HTML collection, it's the very first element of this collection.
Collection is like an array. A array like object here.
When you count elements, like when you reference them, you access elements in an array.
You always start counting from zero. So that's why you're seeing zero colon.
Because the very first element whose index is zero is this one.
Now start to count from zero. In any case, so we got the whole collection.
We don't want everything one the very first element. So we have to use the notation.
Square brackets. Give the index of the element that you wanted.
In this case, elements of zero index zero, the very first element, close the square bracket,
and that will give you the span that we're looking for.
Okay, of course, I assume that existed in a page. If it did not exist, it would get undefined.
And that's something you have to be careful about. You have to handle that problem.
Okay. So sub zero here back to our code script.js to grab the very first element here.
So I'm going to add that to a variable. And I'm calling it the error message.
Not the error message. It's the error span. Whatever you want to call it.
The message inside the span. But you could say I don't mess with this one. Anyway.
Now, I told you I assume it exists, but it might not always be the case.
Let me show you how to handle if it does not. So you got to always check if the error span.
Do something that means it's just going to check if this is defined.
This value is so called truly.
In this case, if it finds anything at all, it will be truly therefore the condition is true, and everything in between the braces will be executed.
In this case, I want to target the error span. And I want to change.
I want to do class list and remove the new entry error. What was the name hidden, right, the class semicolon at the end.
But if this didn't give me anything, probably gonna return undefined.
Let's try it out. If I give it like a different class that does not exist.
It says undefined. So that's correct. So if it were undefined, this would have been falsi.
Which in turn is false. So if condition is false, don't do anything. This will not be executed.
It goes to the next slide returns. And that's fine because we did not have any error message there to show.
To remove the class. Of course, it's not the behavior we want here, but this is just a guard against having the error propagating this error of something that does not exist.
Let's try it out. Click right. And what did I miss? I missed the name again.
Get element by class name. Class name. Get elements by class name. Don't forget the suffix name.
Refresh, right? Now when I click right it says you need to type at least one character. Great.
Now let's type something. Oh, nice. It appeared here by the error message still.
That's not great, right? We need to clear the error message if things are successful.
So to do that, let's go back to the source code.
When you come to the part where you clear the text area, you also want to make sure to clear the error.
Clear any error message as the comment for you here to show you.
You don't need these comments, by the way. All the text after the slash slash is just the comment and it's not necessary at all.
I'm just putting it here for your own to be helpful to you. Anyway.
So how can we clear that error? Well, all you have to do is hide it again. How did we hide it through the class?
So you just need to add back the class that has the style to hide it.
Remember how many did Airspin class list remove? We need to do add.
Now we have the element here inside the if statement.
But if I try to do a Spen here.classList.add the same name entry, arrow, hidden new entry, ever headed.
It's not going to work. Let's try it out.
You got uncut reference error in the console.
Airspin is not defined. And that's because of the scope of the local variable here.
Airspin does not have scope under this block of code.
In this case, the block of code is defined by the braces opening here and closing.
There is no definition of the error spend there. It's actually inside this if statement here.
Airspin is only available only in scope between this open embrace and that closing brace.
Okay, so how can we fix that?
Well, we could copy and paste the same code and put it here. Totally fine.
Since I don't want to repeat myself, what I could do is move this definition to outside the if statement.
Right before that. Now it's under this block. See this block here that starts with this brace.
It ends at line 31. And I'm referencing it in between those. So it's totally fine.
Notice if you open a new brace, you define a new scope here.
That's why I cannot reference this error span, even though it was defined under the outer scope,
but it's inside an inner scope. And this inner scope will define a whole new scope for the local variable.
So be careful.
Now with that, I have the error span defined outside, which obeys the scope of this one.
The closest opening brace.
And it will now work. Just fine.
Click type. It cleared the error message after adding a new entry.
Okay.
So that's it for now. See you in the next lesson.


fff3-09 Adding an Error Message Next to the Button to Submit the Text

Refactoring JavaScript Code to Have a Separate Function to Add New Entry

Welcome to another lesson. Let's keep building our web application.
So, one thing I wanted to mention before we continue.
The last time when I did Aerospan in line 29 here, this assumes Aerospan is defined, but that...
That could be a case where when I did the guide elements by class name sub0, that could be undefined.
Because of that I have to do the ifAerospan on line 10. That thing also needs to be done for line 29.
So, let's add ifAerospan is defined.
Place the Aerospan class list at inside the block for that if.
Just in case Aerospan was to be undefined, you would not get an error.
Another way of doing this is using the double ampersand instead of having the if.
You can simply do like this.
So, this is like...
It's called the AND operator.
So, it tests the condition here.
If this is true, it goes on to the other condition.
And if all the conditions are true, then this whole statement will be true.
But if any of the statements starting from the left, if any happens to be false, it stops immediately.
It doesn't evaluate anything to the right.
So, if Aerospan were to be falsely, in this case it would be undefined.
Undefined is a falsely value. So, this condition would be false.
Because this is false, it would not even check anything else because of the nature of the AND operation.
This is logic, right? This comes from logic. This is the AND.
But if this is true, it will continue checking everything that's changed via the double ampersand.
In this case, going to be to the next one, is this value, true V, if it's not true V, if it's false V,
it will stop right then and will consider the whole thing to be false.
And won't.
But for our purposes, we do this so that if Aerospan is defined only if it is a true V value,
the condition is true, this statement will execute.
If this is false, it will not execute this part of adding the class to the Aerospan to make the error disappear.
Because there is no Aerospan to add class to.
So, this is an equivalent way of doing this, if here.
You can do it either way. Anyway, just wanted to show you that.
Now, moving on, I would like to show you a way of improving the code.
Usually when you find yourself writing a lot of code in one specific place, that becomes a mass pretty fast.
So, usually when you program, you want to split things into separate modules.
You want to think of modularity, and you want to think of separate functions that have a very well-defined meaning.
A function that has typically one concern.
You are responsible for doing this, and this only, and you do it very well.
This other function is responsible for doing something else, and that's something else very well.
So, that's a pattern, that's a very good practice to follow.
One thing I can see right now is the part where we create the new entry and add it to the DOM.
That could be one thing we could place in a new function.
So, we can start like this.
So, this one creates a new element.
It does not depend on anything else coming before, right?
It just creates a new element memory, and then it sets the content of that to the entry text.
Now, entry text is something that we depend on that came before, on line 5.
That could be as used as the input to this new function we are going to create.
Now, new entry.classList.addEntry, that's not dependent on anything.
And document.getIngList.id, that's not dependent on anything here in this particular area of the code.
So, we can fix this whole thing, and we can move it to a function outside.
I'm going to call it define function, keyword function.
Let me call it add new entry.
And I'm going to paste the code in between the body of the function that is the opening and closing curly brace.
Now, we have this name of the function is add new entry.
It has to take one single parameter, and that's the entry text, because the entry text, we got it from line, now the line 17,
that's outside the scope of this function.
So, there must be a way to communicate to the add new entry.
And by the way, we need to call it in line 28, add new entry.
We need to call the function right here.
So, meaning, what does it mean?
Like, you're going to say add new entry is calling this function, so it's going to execute the code that's defined in the body of this function.
So, it's going to execute new entry, create the element, new entry text, new entry text.
This is not defined here.
This was defined outside 17.
There's no way you can know about that.
So, you have to pass this as an argument to add new entry.
So, you say entry text right here.
Now, we pass this value, new entry, entry text to the function add new entry.
And that has to be defined as a parameter here in the function signature.
And let's call it entry text.
It could be any name you want, but that any name here, for example, if called ABC, you have to call everything that references it ABC.
Obviously, ABC is not very good description, descriptive name.
Always make sure to name your variables, parameters, arguments, or something very descriptive that when you get back to your code or anybody else,
there are going to be a lot of other developers.
They're going to see your code, they're going to understand right away what you mean.
If you just put ABC here, it's going to take some time for whoever reads this code to figure out what whatever ABC is.
So, always make sure to add a very good descriptive name to your variable names.
So, entry text is passed here, and it goes there.
It does change the text of this new div created in the memory adds entry class to the new entry and then finally appends the new entry to the div whose idea is entry list or element whose idea is entry list.
The element does not necessarily have to be a div.
I just know it's a div in this case, but just look in line 16.
In any case, that's one refactoring, right?
We could do and I'm going to save it and see if it still works.
Always make sure that after making the change, if it still works as intended, so it's working fine.
Click error, error disappears fine.
So, it's fine now.
So, we learn how to refactor that into a new function.
And this function has its only concern is adding a new entry to the list.
Right, it creates a new element, sets the text, adds the class for style and finally appends that to the list of entries.
I think we're good for now. Let's take a break and I'll see you on the next one.


fff3-10 Refactoring JavaScript Code to Have a Separate Function to Add New Entry

Installing Nodejs using NVM to Start the Development of the Server API

Welcome back to our lesson. Let's keep going building our web app.
So we have come to a point where we can start working on the backend. That's the server side.
So far we have done client-side programming. We have implemented the front-end using HTML,
CSS, and JavaScript. We have a working prototype, a working draft using fake data with Laura Impson.
However, when we add a new entry and reload the page, that data is all gone because it does not get persisted.
Normally, when you submit some data to a site, it should call upon a server, send that data to the server.
The server, in turn, will store that data in a database.
Now, we are going to handle that part with the server side and the database.
For the server side, you could use any programming language you want, but for this lesson, for this course, I will be using Node.js.
Let's go to the Node.js website. Node.js.org is the website. Node.js is pretty much JavaScript on the server side.
It's just an alternative name, but it's just JavaScript, after all.
There are many ways to install Node.js depending on your operating system and how you go about it.
One way is to go to the website and it provides you with an installer for each operating system.
If you use Linux, you may also install Node.js through your package manager.
For example, I use Ubuntu. If I try to run Node, it says, okay, that command does not exist, but you can surely install it with APT install Node.js in the studio.
Other distributions might have different package managers, but the concept is the same.
Now there's yet another way to install Node.js, and that's the way I suggest you.
That's through the Node version manager. Let's go to the Node version manager website.
This is the Node version manager website. Here's the URL if you want to go there.
It's called NVM. If you scroll down here to the instructions, it tells you how to install it.
NVM is nice because it allows you to install multiple versions of Node in your machine.
While if you download it for the website of your package manager, it will install only a specific version of Node.
If you want to switch to a different version of Node.js, then you can't do it.
Node version manager allows you to conveniently choose between the Node versions.
You can have multiple versions in your machine. This is what I recommend.
For Linux and Mac, I recommend NVM. If you use Windows, I recommend NVM Windows.
It's a different program from the one. It's the NVM-Windows.
Anyway, here's the instructions for installing on Linux.
You just need to download the install script that's in this URL.
To download it, you can use program like curl or wget. Then you got executed in the terminal.
My case is bash. If you use the latest Mac Catalina, you're probably going to use the z shell.
Anyway, I have wget, so I'm going to copy and paste this command.
I'm going to go to my terminal and paste that.
The command is wget. This is the URL to get the script file.
We are doing some options to jabberget. It gets that.
Then we're going to execute it and type it to bash, mainly execute this script using bash.
It's going to install the versions under the directory.nvm. It's a hidden directory under your home directory.
In my case, this is for Linux. It's going to be there.
The process is done. Now it's asking me to close and reopen a terminal.
Start using NVM or run the following. Run it now.
The thing is, it adds some code to the terminal profile.file.
In my case, it's .bashrc under my home directory. It should have added this.
For me to use our node right now, I would have to source that file or reopen a new terminal window.
Let's see. If I open a new terminal window and I say node, space-v, it's still not there.
So what's going on? Let's see.
I'm going to check if I have which profiles I have.
ls-al-h-soared-hidden-files-l-enlisted.
I'm going to type to grab so I can search for file that starts bash.
I have my bash rc right. I can do that.
tilde slash dot bash rc. Tilde means the my home directory.
I hear my bash rc. Let's go to the end of the file.
Should I add an nvmdir here?
And it should have worked. I don't know why it didn't work.
Let's see. I'm going to source that file.
bash rc. Let's try node-v again.
And I did not find it.
I wonder why.
Go back here.
Let me close my terminal and reopen everything again.
Still does not find it.
Thought nvm should be here.
Oh, I get it.
We got nvm, but it didn't install any version of node yet.
So nvm is the manager, but we don't have any version of node yet.
I should say nvm install.
If I want the latest long-term support version, I think I can do nvm install-dash-lts.
There you go.
So nvm install-dash-lts.
Install the latest long-term support version.
If you want a specific version, you can instead type the number of the version there.
Now when I say nvm list, I should have the current version pointed here with version 12.18.0, long-term support.
If I say node-v, it finally works and tells me the version.
Also, I should get nvm now, which is the node package manager.
Version 6, 14, 4.
We are all good here.
So with that, we have installed node version manager and we have installed node, the latest long-term support, as of the date of recording this lesson.
This case version 12.
So I'll see you in the next lesson.


fff3-11 Installing Nodejs using NVM to Start the Development of the Server API

Installing Express and Creating our Server API - Nodejs Tutorial

Welcome back after installing Node.js. Let's keep going. I'm going to cd to the directory
that contains my project. I'm going to do ls here are my files right now index.html script.js
styles.css. Now what we're going to do right now is create an npm package. So we're going
to generate the file called package.json. I'm going to need that so we can install
express which is the framework we're going to use to make the server.
So first of all do npm space init to create a package.json file. It's going to ask you for some
fields. I'm going to leave the package name as is. The version I'm going to leave at one can
change it if you want to give a description. I'm not going to give it entry point. I'm going to say
let's say server.js for now it could be anything. That's command no task command yet get
pro start no keywords no I'm going to just press enter. After you can say your name or
any of this there. License any license you want. I'm just going to leave as is.
This okay yes. After that it should have now package.json file in your project directory.
Let's check it out. Here's the file.
With that we can start installing new packages from node npm. So let's do
express. Before doing that I'm just going to show you that page for express.
Back to the browser this is the page for out the framework express. Express.js.com.
This is the framework we're going to use to
build our server side API.
Okay so let's go.
Go back to the terminal. I'm going to say npm install space.
Express.
After that it should check your package.json under dependencies you should now see express
with the corresponding version that was installed.
Now let's create a file called server.js.
Now we're going to build a very simple server that's not going to do anything yet.
First thing we need to do is to require the express package. This is like an import statement.
So I'm going to say const express require express.
Let me use double quotes here instead because I see I was using double quotes
in the client side code here in script.js so it should be consistent. I'm also going to use
double quotes here but you can choose single quotes if you want. So we got express. Now what's
doing here is requiring that package express so we can use it. I put it in a variable.
I'm going to call an express.app and that's going to create an express app. Let's put that in a
variable and call it app. Now I'm going to say app.get and the first argument from a slash
and we got pass rec res arrow function there. I'm just going to say res.send message.
Everything is working fine. Let's see. And then after that I'm going to do app listen. I'm going
to give it a part to listen to. Let's do take 3000. And if you want to give a call back here
saying that the server is listening you can see console log server is listening or for 3000.
Save it. Let's test it out and then later we'll explain what's going on.
Go back to the terminal. You're going to run node space server.js.
And I committed some mistake here. Press.app is not a function.
I think I know what it is. Let's see.
There you go. I don't need to say dot app. Sorry. I just say express and call it like so.
Okay. This detail.
Anyway the server is now listening for 3000. Let's go to the browser open a new
say local host 3000. And now you're going to get this
text in JSON format saying message. Everything is working fine.
Let's work out what happened here.
So first I require express. Put that in a variable so I can reference that. When I call express
is a function it gives me back an express application. I call it app. With that object I can call
and define routes. So when you hit certain routes on the server it's going to do something.
In this case the route is slash. This is the root route. This just means you go to
the domain colon the port slash. The slash is optional there. You could have slash if you want.
But it's going to redirect without slash.
So when it hits this route route it's going to call this function. This is an anonymous function
that I define two parameters. Rec request. Res for response. Now I can use the response
object res to send back a response. So when the client requests
a get to the slash route I reply with doing this and I say a response please send
this message response. The response is a JavaScript object hence the JSON notation there
with the property message having the value everything is working fine.
When I do app.listen I tell the server to listen on port 3000. That means it's going to run the
server and it's going to listen for requests at this port. Localhost is my localhost. Could be
127.00. So console log will show us the message in the terminal when I start the server.
Okay.
One detail I want to make sure here is go if you want to check we're going to be doing this a lot
when working with the server side you want to check the network tab.
Let's run this again and you can see the request is here in this list and let's click on that.
This is the preview of the response. This is the response raw. Click on headers to see the request
URL. You can see it's on the slash endpoint here in slash. The request method HTTP get
status code that's 200 okay that we got. That's the typical code for successful response.
Now for the response headers we got content type application JSON. That's fine.
That's actually what we wanted. I just wanted to check that the content type
header for the response is application slash JSON because our server is going to serve
in the format called JSON JavaScript object notation very common format to serve data through
a server side API. API means application programming interface. It's like the
means we can use to get to the database. So it's an interface that we can ask
it to do something for us to read or write data or update it if you want or delete it.
Okay go back to text editor. So we just run the server nothing is really
that's not too much right now. We can start by making a route. Let's go back to our
app here in the front end. Let's do the following. This is going to be our next goal in the following
lessons. Right now we have this data right here for each entry but that's a draft
written purely in the HTML document index.html. What we want to do right now is let's fetch
this data from the server side and populate our site with that data as we go into the site.
Now this is not going to involve any database yet so we are actually moving that fake data
to the server side in the Node.js file. We're just going to hard code an array of objects and each
object will represent an entry and we're going to take that and send back to the client as the
response. When we get that done the next step would be do the database part with the actual data
being persistent there but let's do one step at a time. So see you in the next lesson.


fff3-12 Installing Express and Creating our Server API - Learn Node JS Tutorial

Moving the Draft Data from the Client Side to the Server Side - Nodejs Tutorial

Welcome back. Let's move on to moving the fake data to the server side so we can serve it to the client.
Back to server.js, we want to add a route here. I don't need slash anymore.
I'm going to add a route. Let's add a route to serve all the written messages.
Written messages of entries. All the entries.
So when it comes to server side programming, you want to think in terms of resources.
The resources we have in question right now is the entry.
From the client side you can see here on the left hand side in the background.
There is a list of entries. Each entry is a resource.
The typical standard way naming convention for the routes is to give the route name the name of the resource.
I'm going to follow what's called REST convention.
When you want to get a list, when you get an index of all the resources, you do get for the verb, the HTTP verb.
The route is usually going to be slash resource name.
So app.get here, I'm going to change that to the name of the resource.
I'm going to say entries. I'm going to use plural but it's fine if you use singular.
Some people like to use singular, but people like to use plural.
I am going to choose plural.
Now, when I hit get entries, it's going to do whatever I tell it to do.
Let's try it out. Go back to the browser here.
One thing I want to warn you is when I change the code here, I have to make sure to go back to the terminal and kill the server and restart it.
For me, it's control C to kill, to send an interrupt signal and kill the server.
And I can run the code, node server JS again.
And if I go to 3000, cannot get slash because that route is gone.
So I have to say slash entries here now.
And now it goes to that same message. Everything is working fine.
One thing I didn't mention before is if you're using Windows to do these commands, you might want to use the CMD or PowerShell is up to you.
I'm a fan of using command lines.
So that's why I do all of these commands here.
And it's simple and straightforward.
So for Windows, you use CMD or PowerShell.
And it should work the same way as long as you install the NVM Windows or even through the NodeJS installer and all.
It should work fine as long as everything is correctly set in your path variable.
Anyway, continuing.
Go back to the text editor.
Now I want to move all this fake data that we wrote here to the server side so we can serve that from the server, send it back to the client and the client will dynamically populate the list of entries.
So let me just copy and paste each one.
I'm going to make an array here inside.
I'm going to call it entries like so.
Okay, I've realized just the indicators of constant.
Arrays made with square brackets.
Let me call it at the end of statement just.
I'm going to copy this first text.
Now I'm going to make an array of objects.
So I could make an array of strings.
That's totally fine.
And put the wrap here.
Ultimately, I want this data to reflect what's going to look like in a database.
And in the database we have what's called an ID and many other fields for a single entity.
So I'm going to refrain from making an array of strings.
You could do that for a time being, but I'm not going to do it.
I'm going to make an object.
This object, I'm going to say text.
And I'm going to paste that text under double quotes.
You can use single quotes if you want.
Now to each entry, I'm going to give it an ID, a unique identifier.
That's usually what appears in the database.
And I'm going to give an integer value.
I'm going to start counting from one.
With that, I'm also going to duplicate this.
And I'm going to do ID two and then ID three.
And I'm going to copy the other text.
And I'm going to replace for the second one with that text, the third one.
With the text from the third entry.
So this is the representation of the data here on the left hand side in the background in the browser.
We have an array of objects.
Each object has an ID to uniquely identify that object.
And it has a text, which is what we see on each entry box.
ID is a number, text is a string.
String is a sequence of characters under quotes, right?
We're presented under quotes.
Now with that, I can send this array of entries as the response for this route.
When a client requests slash entries, get slash entries, we're going to reply with this list of entries, list of objects.
So instead of the message object here, I'm going to say res.send, open parentheses, entries.
With that, let's check the browser.
Go to the tab where you have the localhost colon 3000 slash entries.
Reload, of course, not going to work.
Why? What did I tell you before?
Every time we make a change to the server side, you have to kill the server and restart it again.
The control C, node server.js again.
Reload the page.
Now we have the response here.
If you look at the network tab and click for entries, you can see the preview in a nice format.
This is the browser that does this formatting to make it better for us to visualize.
But the raw response is just on single line with everything without spaces.
But you can see that we have the data here.
Now let's hook up this to the client side.
That's the next lesson.
See you then.


fff3-13 Moving the Draft Data from the Client Side to the Server Side – Build Nodejs API Tutorial

Using Fetch API to Get Data from the Server JSON API Written with Express, Cors middleware

Hello, we are back.
So let's start building a request from the client side so it can get the data from the
server.
Right now the hard coded data is in the HTML document.
We don't want that anymore.
We want the client to make a request to get all the entries.
The server side will send back all the entries and then we're going to generate entries,
boxes dynamically and inject them into the document object model, this page right now,
right here.
Back to the text editor under index.html, we don't need all these entries anymore.
So we'll delete all the entries from the entry list, just skip the div for the entry list
there.
It's going to be empty.
Nothing.
Now back to script.js, we're going to add more code so we can make a request to get all
the entries from the server side and then generate those boxes with the entry text and then
inject that into the DOM.
Let's create a new function to do that.
The responsibility of this function will be to get, to fetch the entries or get the
entry.
Make sure to call this function here.
Of course we could have the code outside without being a function, but I want to encapsulate
the well-defined code responsibility to functions.
Ultimately later on, as you get better and better at this, you're going to have a standard
of organization for your code and everything will have been modularized into functions
with a well-defined concern.
In any case, let's...
So to make a request to the server, we need a way to make an HTTP request.
We can do that using the fetch API.
To use that, it's very simple.
Just call fetch.
Now this fetch function will take, by default, if your verb for the HTTP is get, you just
need to call get fetch like so.
Pass the argument with the URL of the server side.
This is the endpoint.
Remember we had done localhost 3000 slash entries.
This is what goes here.
So HTTP colon slash slash localhost colon port 3000 slash entries.
The endpoint.
Finally, this is going to give us what's called a promise.
Let me show you here in the browser.
If you want to try it out, copy the code, go to the browser, go to the console and try
it here.
You can ignore the error for now, focus on what's given back as the return value of this
function call.
You see it's a promise object.
Now the promise is something that we can use...
Let me explain.
So when you make a request to the server, it takes some time for you to get a response,
right?
So you cannot have the code work right away and give you the entries right away.
So there's a promise there going to get something back later.
Now first upon a promise is pending, right?
That's why you got this.
Now it's pending because, hey, I contacted the server.
I asked for the entries.
I'm still waiting for that data to be sent back.
Now while you wait, the program cannot stop working.
So JavaScript will have continue executing other things.
But to handle the promise, to actually do something when you get the response back after
that time was elapsed, you either get a reject from the server or you get some an acceptance,
right?
So the promise can be either fulfilled or rejected.
So in this case, my promise was rejected because we got some sort of error.
So the server got the request, but something went wrong and he replied with...
And we got a reply here in the promise.
We got a promise that was rejected.
Nevertheless, the promise is already finished, right?
We got some sort of response.
Now we got to do something about it.
Okay, that's the next step.
But before that, let's check out this error message.
Access to fetch add slash entries from original has been blocked by course, CRS, policy.
No access control allowed origin headers present on the request of resource.
If an opaque response serves their needs, set the request mode to no course fetch resource
course to sale.
Okay, I'm not going to get into much detail about this.
I'm just going to show you how to get rid of this message so it works locally, okay?
But you might want to do your own research.
If in the future you end up having to work with this, but usually you don't have to worry
about these things when you're developing because this will already have been set up
for you and everything.
In any case, to fix this problem, I'm going to use the middleware for express.
Going back to Adam, go to the server.js file.
Here after creating the express app, I'm going to say app.use and I'm going to use course,
but this thing is not yet defined.
Let me check out the, I think we have to install the package.
Let's go to the terminal.
Let me kill the server control C. I want to say npm install CRS.
This is npm package.
Now with that package, I'm going to require that here.
So const course, require course.
Let me see if it works.
I don't know if I have to call it or not.
So let me see if it worked without having to call.
I'm going to run the server nova server.js.
I'm going to test it out, see if it works.
I'm going to call fetch here in the console again, expand.
Okay, seems like it might have worked.
Let me try just see if it's something here.
Okay, so I think that I might need the rent is after all.
I didn't get any response.
So restart the server, do it again.
There you go.
Now I got back the response.
So you have to have the parentheses after all.
What I did here is use what's called a middleware.
Middleware is a very common thing when you do server side programming with these frameworks,
API frameworks serving JSON.
A middleware is something that gets in between your handling of the response.
For example, the client requested get slash entries.
Now normally when you request get slash entries is going to go directly to this function and
execute the code to send back the entries.
But what if you wanted to do something in between?
Before you reach this function, you want to have something in between, which is the cores
middleware.
And that's in between is what I'm doing in online six.
Now you can have this middleware go only in between here this specific route, or you could
apply that to every single route that you define in your application here, server side.
So that's what I did using the app.use function.
This will apply this middleware to every single request that comes in.
And it'll be shoved there in between that request and the response that you give.
So in this case, setting up something to do with that core, that header that we saw in
the error message to allow the client side to receive the data.
So that's it for that.
Now that going back to script.js, we got our fetch we know now it's working.
Now fetch returns a promise promise to something will be returned later.
Now until then we to handle that promise you have to use what's called the then function.
So you do dot then, meaning after this promise is fulfilled, then do this.
And in this case, going to give me back a response object.
And you put like a callback function here, response arrow, open braces.
Now if you want to take a look at that response, I can do a console log here.
Let's do that breakpoint thing that we saw.
Let's go back to the browser, I'm going to go to sources, I reload here, click on script.js,
put a breakpoint in line 15, right at the console log.
Let's reload a page.
Now it stopped at the breakpoint, right?
Remember the code is right here.
It hasn't executed this yet, but let's look at response.
So hover over response, you can see there's a lot of stuff here about the response.
Now if you look at the prototype, I think there's this function called JSON.
And this is the function I used before when I was quickly trying to see if fetch was working.
This is what we're going to need.
Let me show you why.
Going back to the console here, actually not there, I'm going to press escape.
So I can get this console running here.
I don't like this message.
Click console and go here.
You can type response to see what's inside that we already saw.
Now if I try something like response.json and call this function, what do we get?
Well we got a promise back.
Now to handle promise what we do need to do.
Then after this promise is fulfilled, do something.
Now this something I already know is going to return me the entries.
So that's why I named the variable like so.
But you don't have to name it entries.
You could name anything you want.
But it makes sense to me to name that parameter entries.
Then entries, I'm going to do the console log entries so it shows that prints that to
this console.
And why didn't they do?
Then entries console log.
It was like nothing worked.
Maybe because, oh yeah.
So I did F10 so it could go on in execution and it gave me what is this?
The response, that's not what I wanted.
Fail to execute JSON response but the steamer is locked.
Okay, it seems like it didn't really work as expected.
But might have something to do with the debugger.
Let me remove the code without the debugger.
I'm just going to run it without it being stopped like I did before.
Patch.response.
Oops.
Then response.
What happened?
Patch.then.response.
And there you go.
This is what is returning.
You can see all of them here.
So back here you have to say return response.json because this is a response object.
You need to extract that JSON response from JSON data from the response.
You have to say .json and that will return a promise that we saw.
To handle this promise you can chain it with another .den outside here.
And finally that's going to be the entries.
And like I said before you can console log it if you want.
Save it, that's cool back.
Let me remove this breakpoint.
Remove all breakpoints.
And reload.
And here's the console log of all the three entry objects inside an array.
Okay, now we need to extract the text of each object and generate a new div here.
To do that we're going to do what?
Well I have to iterate over each entry in the list and create a new div here.
Now to create a new div I have to first use document create element.
Remember line three?
Then I have to inject the text line five.
I have to add a class to style it.
Line seven.
I have to finally add that to the entry list, line ten.
So the same code that's used the add new entry function has to be used here.
Well, but I already wrote a function that can be reused so that's the benefit of extracting
that behavior that into a function.
I can reuse the code here.
I need only say add new entry with the entry text.
So let's iterate over entries of a loop.
So I'm going to say entries dot for each entry.
I'm going to do the following.
I am going to add that new entry.
Well the entry has to have the text.
So I'm going to say dot text.
Okay, so for each is used to loop over the elements of the array entries.
Each element which I call entry is an object.
That object has a property text which contains the text that I want.
So that's why I use entry dot text to get the value of that.
And then I pass this as an argument to the add new entry function which is defined here.
And that will create a new element, set the text for that element and add the style and
finally append to the list.
So this is going to be done three times, right?
Because there are three entries.
So add new entry what we call three times and it will be added three times here to the list.
Let's check it out.
There you go.
It went fast, right?
You can see under the network tab we have the call to get the entries.
And this is the response and this response was ultimately used to generate these divs
here.
If you want to see each one being added slowly, I recommend you go to sources.
It's like a debugging practice.
Click script.js, that's the file we.
And then go to line 18, put a break point, restart, then it's going to pause here.
Now what you're going to do is press F8 to click on the display icon and proceed to the
next hit of this line.
You see it added one on the left.
F8 again added the second one.
F8 again added the third one.
All right.
You can see it clearly is adding one by one.
Now let me remove this break point.
And that's it for this lesson.
I'll see you on the next one.


fff3-14 Using Fetch API to Get Data from the Server JSON API Written with Express, Cors middleware

Fetch Problem and CORS in Detail with Express middleware – Cross Origin Resource Sharing

Welcome to another lesson.
In this lesson, I would like to talk more about what course means.
In the previous lesson, we had a problem where when we did fetch, it would not fetch the
resource from our back-end server due to some policy, due to something called CORS
course.
Course means cross-origin resource sharing.
Now the problem that we had had to do with some HTTP header called access-control-allow-origin.
Now what do they all really mean?
In the previous lesson, I taught you how to get around a problem by installing a third-party
NPM package called CORS course.
Then we use that package as a middleware to our server.
A middleware is something that stays in between when the client requests something.
Your server is listening and takes that and directs that request to the appropriate route
handler.
Now in between that, we can put a middleware so every time the client requests for something
on the server, it will pass first through the middleware and only after having passed
through the middleware will it end up in the route handler.
Now let's dive into what CORS really means.
Let's reproduce the error again.
This lesson will be dedicated into going into more details about this problem.
So let's go here.
Back to server.js, we have the endpoint slash entries.
Now we have this app.useCORS.
We're using the CORS middleware.
I am going to comment this out, meaning it will no longer be executed.
A slash slash preceding at the beginning slash slash everything after the slash slash
the double slash will be commented out.
That is, the code will not be seen, but will not be run.
With that, we'll have the problem again.
Let's reproduce it.
Let me run the server because I had it shut down.
I'm going to say node server.js.
Now server is listening on port 3000.
Let's go back to our application in the browser.
So here I have, I'm going to refresh.
And before I do that, I want to click the network tab of the browser developer tools.
Now you can filter these by XHR, JS, CSS, and so on.
And you can see all is marked right now.
That means all the requests appear here in this convenient table.
We're interested in the request of type fetch.
That's fetching the entries, right?
If you hover over the row, whose name is entries, you're going to see it's a request to local
host on the port 3000 slash entries in the status.
The last time I run this was 200 real cake.
Now if you want to, I just want to teach you about these filters.
What we do with fetch is what's called next HR request.
Okay, it's a HTML HTTP request.
That's what that means.
So that's what we want.
Every time you use fetch to grab something from the server, you're going to be making
an XHR call XML HTTP request.
So I'm going to filter right that.
And you're going to see XHR and fetch.
It's the only one that appears.
I'm going to click on that and I can see the headers response from the response.
And I can see the headers from the request.
Now I can see the preview under the preview tab is the response where I know that.
Great.
Now I'm going to refresh and watch the request there.
Now the request turned red.
Now if you can see here the color changed to red because there was a problem.
You can see the status column now says fail.
Let's click the row and then let's see.
There's nothing here that tells us what went wrong.
But how about we go back here to the console tab and you can see that error again.
We had that before.
Now let's dive deeper into this.
What does this really mean?
Let's read it again.
So access to fetch at HTTP colon slash slash local host colon 3000.
That's the port slash entries the endpoint.
From origin no.
Now notice no origin is no.
So it's telling us that the origin from this request is no.
And that just means that I'm running it from my local file system.
That's the origin.
Now this request has been blocked by a course policy.
Course C O R S.
Right cross origin resource sharing.
Notice cross origin.
We're going to remember that for later on cross origin.
No access control allow origin access dash control dash allow dash origin header.
It's an HTTP header is present on the requested resource.
So it's telling us that this specific header was not present.
So the server.
Right.
Receive the with where the client we asked for the entries.
The server sent back something but the header was not set.
Now if an opaque response serves your needs set the request mode to no course.
Refatch the resource of course disabled.
It's telling us we can get around it by setting no course.
It will not use that policy.
But we're not we're not going to go that route.
So that's why it failed.
Now if you go back to the network tab and you click the entries row check out the headers
tab and you can see here you have request headers response header etc.
Now if we go back to the text editor and add back on comment the line with app.use
C O R S course and restart the server.
Let me kill control C and then I'm going to rerun node server.js.
Let's see it's going to succeed now right.
But keep it keep in mind what you see on the response headers or request headers.
Now click the entries again and you can see for the response headers.
Okay.
Response headers those are the headers sent by the server right because you have the request
and you have the response the client makes the request to the server the server and churn
sends a response and that response also includes headers.
They are HTTP headers.
Right now look at that there is a header here entry called access dash control dash allow
dash origin and its value is star.
Now this header from the response was set by the middleware course right the third party
npm module and its value is star.
Star means you can think of star as everything meaning allow any origin.
Okay.
Nice.
Now we got that.
Now let's dive into a little bit of theory like what is course now that we saw some things
here in practice let's dive into more of an overview.
So I'm going to go to my browser and I'm going to go to the npmmdn website developer.mozoo.org
now we're going to do a search here.
With the search bar let's type cross origin resource sharing and I have my the first entry
this is the page I want to read so let's read this.
Cross origin resource sharing.
Cross origin resource sharing is a mechanism that uses additional HTTP headers to tell
browsers to give a web application running at one origin access to selected resources
from a different origin.
Now you can see a different origin that's key so the cross origin means different origin
so you're going to have for example you have the client he's in some location a the client
makes a request to some location B. Now because the request that was made is is from a client
that is somewhere else right the server is in a different place so we have a cross origin
it's not the same origin it's a cross origin different origin because of that because of
the course policy the header that was not present it will not allow this because by
default it only allows same origin we're going to read it right now.
So let's read here continue reading.
Web application executes cross origin HTTP request when it requests a resource that has
a different origin domain protocol or port from its own.
An example of a cross origin request the front end JavaScript code that's that's our
write something app served from HTTPS colon slash slash domain a dot com uses XML HTTP
request this is XHR that's exactly what we did with fetch right to make a request for
HTTPS colon slash slash domain B domain B dot com slash data.json so domain B in this case
would be our server right well keep in mind even though they're in the same kind of computer
my local computer they're actually have different domains because I'm running the write something
in a local in a local file here in the browser and the service being run on port 3000 and
the domain there would be the local host while the domain for this app here running directly
through the browser with the file system page would be actually a no domain as evidenced
from the error we got here in the console remember we had the error no for the origin
anyway let's continue so for scary reasons third paragraph browsers restrict cross origin
HTTP requests initiated from scripts so it's restricted cross origin for example XML HTTP
request and the fetch API follow the same origin policy this is key that's why our our fetch did
not work because it follows by default the same origin policy meaning if you request something that
something must come from the same origin if it does not come from the same origin I'm not gonna
allow it you're not gonna be allowed to fulfill that request successfully this means the web
application using those APIs and only request resources from the same origin the applications
loaded from less responsible in other origins includes the right course headers the right
course headers now this is telling us we need to set the right course headers and that would be
the in this case in our case would be that header that we saw in the error description I open to my
text editor that would be the access control our origin header that's what we want to set right
remember it was set to star meaning any origin is allowed here's a nice diagram you can take a look
at this you have the domain a request something from the same origin domain a.com domain a.com
that's fine same origin policy now if you have something else in your web page that request
from another server right another place that's domain B that's not the same origin then then it
will not be allowed by default through the same origin policy so we need to find a way to allow
this to happen and the way is through adding that header right the course header to tell it okay
it's fine you can make the request and the origin can be whatever RG specify or in this very general
case that we're doing it could be any origin mind you that usually you want to set very specific
origins for your resource batch right operations because you don't want to allow just about anyone
right usually want to constrain all your new client can only make you make a request of some
servers different servers all different servers all these different servers are known to you so you
take those origins and you what you make up a list of allowed origins right and that's what you
usually put in the header that we're going to change but since we're doing just for educational
purposes here I'm just going to use star to mean any header okay star to any header you can read on
here if you want to know more about course I recommend a highly recommended MD and web docs if
you want to know more about it that's click same origin policy and follow up is something more
interesting here and you can read more about this one all kinds of stuff are interested in the header
actually is this the page that I want to know maybe I was in the wrong page I'm gonna go back
I am interested in the header that I saw something interesting before here
let me see if I can find it or source origin PPI let's go back same origin sorry I wanted to
see something here if they had the headers anyway I didn't find anything here but you can read
through if you want to know more about this in case we got a overview of course and now let's do more
practice what I want to know is kind of let us make a middleware like the course middleware to set
the header so everything works fine and this is in a way replicating the behavior the most
essential behavior of that course npm package although I was I would say it's not really everything
is just one thing we're gonna do so let's go back to the text editor go to server.js now let's
come coming out app.use course again I'm not gonna use it we're gonna get an error right okay let's
make our own middleware to make our own middleware simple just say app.use and now you're gonna pass
something that's gonna be the middleware before we had the course middleware that was already
set right but it was already written by somebody else and we just downloaded that npm package into
our application now let's make our own I'm gonna make an anonymous function here first argument is
rec second arguments resin the third argument important is next now put the arrow there open
the braces so this is an anonymous function the arrow function these are the parameters 3 first
being the request second the response third the next this next would be very important the
arrow and the braces and the body of the function let's go so what I'm gonna do here is I want to
find a way that when we send the response here line 28 for all the entries I want to send out
response with the HTTP header set that will make the course thing work fine and I'm gonna do the
following I'm gonna set response write res res dot set this method or function is used to set an
HTTP header for the response first argument is the name of the header second argument is the value
okay so I'm use double quotes here I'm gonna use that header let me grab the name again access
control allow origin right let me copy this paste this is the name of the header access dash
control dash allow dash origin and comma the value would be what will the value be well we can use
start to allow any origin or you can use your domain a whatever domain be whatever I don't know if
it's comma separated it's probably is I don't know what have to reference documentation anyway
let's let's try something really simple I want to know what the error message says again go back
to the browser let me see if I can restart my server back to the browser you click network tab
what happened here oh no it's hanging on the middle adder because I did not do something that's
something's calling next so it's hanging on the request because it's stuck in the middleware
and it doesn't know what to do just stuck there so you have to tell okay I did everything in the
middleware that I wanted to do now you can go on and go to the endpoint route handlers and to do
that you call next here after you do everything you want in the middleware make sure you always call
next so that the handling of this request is passed on to the next thing in this case thing
could be another middleware but ultimately it would end up in the route handler right the endpoint
in this case with these slash entries will end up here so let me have ads and I forgot restart my
server now we got a problem because this now I wanted to know it's from origin no now what would
happen if I added no to that value of the header let's check it out go back here I'm gonna uncomment
this and I'm gonna say no for the access control our origin so I'm allowing no the origin no
restart the server oh amazing it worked right so let's take a look at the network tab like the
entries rule up under hairs response header now includes the header access control our origin
whose value is no now because no no is origin here it worked okay so that's how you handle the
this problem with a mirrorware now we've seen in a way what happens behind the scenes of course of
course this is a very very simple part of that I'm sure if you want you could look into the
source code for that just go to the npm package page and see if you can take a look at that or
it's even here actually this package is installed under the node modules and cores and here's the
source code you can look at think it's live index and you can see everything when you call cores
this is what happens all this stuff and of course our version is a lot more simpler than
all everything that's happening here but you can see if you look for that allow I forget I always
forget the header name a lot origin let me remove this you see you can see here access control
our origin headers push seems like it's setting the header some way and the value star remember
saw star before and that means any origin right so it's saying if there is no origin
defining the options which we did not define because we just passed an empty that's no argument to
the course function code right or the options are just star just push the access control our
origin star that's what we saw before in the network that when we use the course and that's
essentially what it's doing right now this stuff all this stuff all this stuff all this stuff and
you can see there's rack res and next here too it's a lot more complicated any case you want to take a
look that just for fun it's there under node modules slash core slash live setting slash index dot j
s I'm going to close this and let's go back to what we were doing here semicolon just for style
so let's summarize and what we did let's go over what we did in this lesson in this lesson we
talked more about cores cross origin resource sharing we learned about this HTTP header access
control our origin access dash control dash allow dash origin and this is how we get around that
problem where fetch failed and this is because of security that's built into the browsing how it
deals with request and response to another server it's all about cross origin meaning if the client
request something that's on a different origin right by default fetch would not allow that due to
its same no same origin policy how to get around that too thanks to that problem right we have to set
the header on the server side we used a middleware before called course but here we set our own to
learn how to make a mirror where you're simply you can set and use app.use pass it an anonymous
function of three parameters rack res and next very important that after doing what you want to do
in the middleware that you call next otherwise the request will be stuck there and your client will
be seeing a pending request that will never get a response so important to call next so it will
proceed and pass and go on on the chain of request response in this case if there were
auto middlewares those middlewares would be called otherwise ultimately it always ends up in the
route handler here line 14 in this case in our middleware we use res the response object
dot set this method can be used to set an HTTP header the first argument being the name of the
header the second the value and we set it to no I use no because the way we wrote the app locally
and everything no is the origin when you run the file the HTML file directly from the file system
although this is not really recommended okay usually want to specify exactly which
origin is he wants to allow or for the purposes of our educational and educational learning I'm
going to use the star to mean any origin is allowed that means that your client and in this case
it could be any origin right any cross origin request is fine
okay
okay and if you want to keep this or you can go back to using course it's up to you
maybe I'll keep both or not maybe I'll just delete this and just let it use course and use the
default with the star okay and then I'm going to go here back in the terminal restart my server
and see how everything is working fine below the page is fine interest appeared and you see the
header response has allowed control allow or access control allowed origin for the star meaning any
origin great so for this lesson that's it for this lesson and I'll see you on the next one


fff3-15 Fetch Problem and CORS in Detail with Express middleware – Cross Origin Resource Sharing

Using nodemon to Restart the Server Every Time We Make a Change – Nodejs Express

In this lesson, we are going to learn how to use the third-party package called an old
mon to restart our server every time we make a change to the source code.
Let's get started.
You may have noticed that every time I make a change to the file server.js, I have to
kill my server that I can run with node server.js and restart it, that is, rerun the same script
again.
It would be nice if this process could be automatic.
To do that, we use nodemon.
So first, we have to install that npm package.
There are two ways you can install nodemon.
You can do it globally or you could do it locally to your project.
I prefer locally to the project so whoever downloads your project will also install the
nodemon dependency so they can run the command to develop your app easily and nodemon can
automatically be fetched and executed.
I'm going to show you the first way is you do npm install-g for global nodemon.
If you do it this way, it will be installed globally and you can just run nodemon by saying
nodemon and whatever script, in this case, nodemonserver.js.
That is nice but it assumes that you already have nodemon installed globally.
If somebody were to download your project and they tried to do this very command, it probably
wouldn't work if they did not have nodemon already installed globally.
So that process is not automatic for them to install it.
So that's why I prefer installing the package locally as a dev dependency.
So let's do npm install-saved-dev.
That means this is a development dependency that's not really necessary for production
but it's necessary for our development of the project.
Space nodemon.
Enter it and then let's wait for it to install that module.
You can go back to the text editor and inspect your package.json file and you're going to
see that it's going to be...
There is going to appear a new entry here called dev dependencies with nodemon added
right here.
Nodemon in this case I'm using 204.
So let's see.
Now that we have nodemon installed in our project dev dependency, it should be under
the nodemodules directory slash nodemon.
Okay, right here.
Now if I wanted to execute nodemon from the local install here, I could say nodemodules
dot slash nodemon slash nodemon, etc.
There is a way to avoid doing this and that's using the npx command.
If you do npx nodemon, what's going to do is use the nodemon that is installed in your
local project under your node modules.
So let's do npx nodemon server dot js.
Now server is listening on part 3000.
You can see that server dot js is running.
Now let's make a change to server dot js here.
Let's change the first text to be hello here and I'm going to save.
Watch as I save my file here.
You can see in the terminal here nodemon restarting due to changes.
So it restarted the server so I didn't have to do it manually.
I told you that I still have to refresh my browsers.
There's no so called live reload here.
I still have to go to the browser and press refresh and I see real low here for the first
entry.
Now to finish off, it would be nice if we could create what's called an npm command so that
we don't have to know the underlying implementation of the development server.
So let's kill the server here.
It would be nice if we could do the following npm run for example dev or development or
whatever name you want to give us.
So let's say npm run dev.
It would be nice if we could just save this command like this and it would automatically
start nodemon server dot js.
To do that you can see that it's a missing script because we don't have it yet.
If you want to create this go to your package dot json under the project root and you can
see there's an entry called scripts and this property that it's an object you can add a
new property here called dev and this is going to be the name that you're going to type in
the terminal.
Columns and I'm going to say nodemon server dot js.
No you don't need npx here.
Npm will automatically use the nodemon that's under node modules.
And just before I say that I want to make sure that this video uses npm version 6 14.4
in case there's discrepancies in the future as the versions get updated.
And I'm using node version 12 point 18 point zero npx 6 14 point zero usually the same
as npm.
Okay so let's test it out.
I'm going to say npm run dev and I didn't save my file sorry.
Let me save my file come back to the terminal here and you can see npm run dev it's going
to run nodemon server dot js and now my server is running.
You can also add a special command to start the server without nodemon if you want you
can say start and this one is special because you don't need to type run before.
You can say just node server dot js and that will run without restarting.
We want to use this one for production for your back end server.
So back here in the terminal I can say npm start.
No there's no run because the special one and it will do node server dot js.
This one will not restart every time you make a change if this is the one ideal for production.
Let me kill server okay nice.
So that's it for this lesson.
We learned to use nodemon to improve our development workflow that is we don't have to manually
restart the server every time we make a change to server dot js.
Nodemon will automatically do that for us.
We learned to add a new enter to npm script so we can run our desired command under a
certain alias in this case I give the alias name dev so every time I say npm run dev it's
actually running behind the scenes nodemon server dot js.
Also creating another one for npm start a special case node server dot js will not restart
and this one is the ideal for production.
Thank you so much for watching and until the next time.


fff3-16 Using nodemon to Restart the Server Every Time We Make a Change – Node Express JS

Making an Express Route to Create the Resource and Fixing the Frontend JavaScript

fff3-17 Making an Express Route to Create the Resource and Fixing the Frontend JavaScript

Validating the Presence of Entry Text on the Server Side – Nodejs Express JSON API Tutorial

In this lesson, we're going to learn to validate the entry on the server side.
So, if you don't type anything and you click right, from the client perspective, we are
going to get a narrow message. You need to type at least one character.
Now, client side validation is never tamper proof. That means anybody on the
client side can manage to bypass it. So, we also need to have validation on the
server side. We must have it also on the server side. Client side validation is
very weak. Anybody can bypass it. So, let's go to the code for server side.
Let's assume the user sent an empty, the text of the entry with no characters, an
empty string. So, how can we validate that? Well, you go to the route that handles
the creation of the entry. And that's here on server, in server.js line 30.
Here's the handler function and we see it's creating the new entry and pushing
to the array and memory that we have right now. Now, we cannot push if new
entry dot text, in this case the rack but body dot text is empty. So, we are going
to send back an error to the user and this will be this operation will not be
permitted. Okay, so let's break a line here. Go line 31. So, we got that new entry.
Well, let's see what I can do here, body dot text and so and so. So, let's do the
following. Well, I could do after the object here or I could do before. The
thing I'm thinking right now is because of this ID right now, we don't have a
database. So, usually we wouldn't set the ID here. We only have the ID after the
database operation succeeded. So, at this point we would not have an ID. So, let's
let's do the following. Let's try afterward. Let's make believe the ID is not
here. Okay, and I just messed up my window. Make believe the ID is not set yet.
Because ideally it wouldn't be set it would be here for example new entry dot
ID goes whatever and this would actually be done by the database. Let's let's
actually do that. I'm going to do that here just to simulate what we would
actually have later with the database. So, you have the client side sending some
body and then we try to build try first to get the all the accepted properties in
this case text only and that could be other ones after that is when you can
do the validation. So, we got that new entry build of course not saved yet. So,
let's do it. So, we can check new entry dot text. Well, what values could it be?
Well, first if the user doesn't give anything it could be undefined or it
could even be no if the user explicitly that did that or it could be finally
empty string. Right all the invalid cases. Invalid cases. We got those three, right?
Well, I can check if the new entry text is invalid. I can do something right. Now, I
want to check what first how can I check if it's even defined? Well, this one will
suffice as is actually because undefined is a fallacy what's called a fallacy
value. No, it's called a fallacy value and empty strings of fallacy value in
JavaScript. Okay, to illustrate that I could go here to the browser. On Soul tab
and the dev tools. And I can say, for example, if undefined, I'm gonna console
log. Yes, this will not work. This return value is from the actual way statement.
It's nothing to do with nothing was executed. That means yes was not shown to
the screen because this value, the condition was false undefined is false. So
that becomes false. Same thing goes for no, right? It's also fallacy value. And
same thing goes for empty string. All right. And you can verify with weak
comparison to double equals that this is false. Defined is not what I meant. Anyway,
let's go on. So this will suffice. But if you want to be explicit, you can also
say, okay, if the entry tax is undefined, or if the new entry tax is equal to no,
or new entry tax equal to empty string, this is a very explicit way of doing it.
Okay, you can do this. So if the first check is it undefined, right? Or if it
is not undefined, okay, it is something else. Is it no? Or the double pipe means
or right? So it's if this or that or that. So it's gonna check all these three
conditions, the first condition that matches that becomes true, it will
automatically take that and execute everything inside. It will not care about
everything afterwards. So if it was, if it was undefined, and this will be true,
it would ignore every single entry after the R because it already knows it's
undefined, it's invalid, already executes lie 41 without even bothering to look at
the remaining of the line. Okay, if you want to simplify, you could do like this.
For example, you can do double equal no, if you do a double equal no, that means
it's either no, or undefined. So if it's not undefined, invalid, and you enter
the text, find or can also check the length up to you. Or you can just leave
and do like this. That's another way of doing it. Because if this value were
undefined, it would take the inverse, right, the invert, falsely value becomes
true D. So this, this is true and execute everything inside. Same goes for our no
and empty string. Anyway, one thing you got to be careful about this one is if
you actually intended the value to accept any of these three values. So you want to
be careful about that. So perhaps I would go back to what I had before. Take care
of actually Emily, these other values. Anyway, let's finally do this after that
discussion. So if it's invalid, we don't want to add a new entry, right? We don't
want to do any of this. So first, we're going to send what's called an invalid
response. Well, there are several HTTP statuses we could use, right? Usually when
you get a successful, that's 200k. And you write you look at the network tab, you
got a status here, tab 200k. This is not going to be 200k. Okay. So the user
sent something that's okay, we got processed. I'm assuming it's a valid JSON
and everything. But only that the actual field itself is required. So the user
didn't really do anything wrong other than not typing what should have been
typed. But besides the formatting of the request and everything was fine. So we
can use unprocessable entry. That's 422. Okay, so I'm going to do res.status 422. And
I'm going to send some error message, for example. Maybe I could say message or whatever
error up to you to devise your own way of handling these things. I'm going to say,
entry text is required. And you have to be very careful here, you have to return. Because
if you don't return after this line, it's going to keep executing the code, even though
you set a response to be sent. So don't forget to return. So the code does not execute everything
afterward. Be careful. So you need that. Some people like to put it here before the
rest. I'm not in that league, I like to do it afterwards. So it's up to you. Let's say
this and go back. Let's now we have to test this now the front end. It already has the
validation. How can we bypass it? Well, I could look at the source and do some stuff
and try to bypass the code here and everything. Another way of using some sort of client that
can make client program that can make HTTP requests easily. It's a program that's convenient
for us developers to make those requests and to debug and test API's. One of those programs
called postman. And it's the one I'm going to use here. Mind you, there are many kinds
of these programs. You can even do this from the command line using the command crawl, for
example, it's up to you to use whatever you want. I'm going to demonstrate this debugging
with postman. So I have already downloaded it. And I'm going to click here, skip signing
in. And it's going to take me to this. I'm going to do some stuff here. So I don't care
about this right now. You want to So I want to click to get a new tab. You can see we
can make the request versus the verb. You can choose get or post. That's the one focusing
right now. So if we want to create a new entry that's post, and you give the URL in this case
is going to be HTTP colon slash slash local host, I think us 3000 right 3000 and slash
entries and point. Now to give the body to this request, right, you have to go to the
body tab here. Choose since we're dealing with Jason, let's do raw. And instead of text
to Jason. And then here in the text box, you type the Jason open braces. Now the first
key is going to be text under double quotes, make sure there's other double quotes, the
text on. Okay, let's first try without anything at all actually. Let's try something that
works. This works and then we're going to do the invalid cases. Okay, this is a new entry
that we want to add. Mind you, our API doesn't have any kind of authorization. So with anybody
can just do whatever right so that's why this client can just go there and do whatever.
If you had some sort of authorization, you would go under authorization perhaps and do
something or even change the header and add an authorization header here. But we're dealing
with very simple stuff starting from scratch. So that's not in the scope right now. Let's
focus on the request body here. We got that. Now I'm going to send. Let me watch first
the terminal here. Click send. And I had an error. What happened here? I forgot the zero
local is 3000 not 300. Okay, so if you don't have any logging in the server, I didn't see
anything but actually I got some 200 okay. And ideas for this works. Let's check the client
through the browser. Let's go to the browser. And I'm going to refresh. This works is here
now that work right now let's try. First let's try the case where the user does not send any
text key at all just an empty body. Let's try. We can send. Now you see the status now is 422
unprocessable unprocessable entry entity. And we got that response we created error entry text is
required. So that worked. Let's try the case where we actually pass no as a text value. This also
was validated for 22 unprocessable entity. Now let's try the empty text. Once again validated. Add
one letter at least. It works. So go here to the client and it's there a. So going back to the
code. Let's look at what we did. So we added validation to check if the text is has at least one
character right effectively. That's what this does. The way we did that was right after we
parsed the body right that is we just build a new entry that's not yet saved. We check is the text
no first is it undefined. Is it no or is it empty string if any of those cases match. We do a res
dot status 422 this will set the status code and you send dot send to send an actual JSON
object with the key error and the message here that the client can use to show this actual error in
the client side the web page. And don't forget to add return here otherwise the other parts of the
code were execute that's not what you want. All right. So for this lesson that's it. And I hope to
see you next time.


fff3-18 Validating the Presence of Entry Text on the Server Side – Nodejs Express JSON API Tutorial

Validating the Maximum Length of Entry Text on the Server Side

In this lesson, we are going to learn how to validate the maximum length for the entry text.
Let's get started.
So, let's say that the entry has a maximum length of 256 characters.
How can we validate that and prevent the user from typing too much?
That is more than 256 characters.
Well, let's first check the client to see if there is any validation.
Obviously, we know that there isn't, but let's just try.
Go back to the browser. I'm going to generate 256 characters.
Let's say A is character B.
And then I'm going to do a loop.
While A dot length is less than 256.
I am just going to say A equals A plus A.
In this case, it's going to concatenate the strings.
So, we got this. Let's say, let's get the length.
Oops, this doesn't work here.
Maybe it only works in the node prompt.
Anyway, I'm going to copy that.
I'm going to say dot length 256. Correct.
Let's try to type 256 to the work.
Okay, I copied the quotes. I shouldn't copy the quotes.
So, that works fine. They even have the style issue, right?
Oh, no. And that happens because of the word wrapping or break.
It thinks this is one single word, so we will not go to the next slide until you put a space in between the characters.
Anyway, realistically, we would have some space.
Let's add some space here and that counts as one extra.
So, this is 157. And is that still allowed? Yes, it is.
You can see that since there's a space, it knows how to break the line.
Anyway, our job here is to write validation so this cannot be done.
Let's first do it on the server side instead of the client.
So, let's start. Let's go to the server side. We already have some validations here. All we have to do is add a new case.
So, we can say else if, well, if it goes to the else if, that means that entry tags has at least one character.
But we want to check if the new entry dot text dot length is what?
Well, it's invalid if it's greater than 256.
In this case, we do pretty much the same thing. So, you can just copy and paste.
You can say rest dot status is going to be 42 to unprocessable entity dot send and the error message.
Okay, entry text. Just say is at most is at most 256 characters.
Or maybe my error message is not very good. I should say these are you typed more than the allowed 256 characters.
Anyway, return save that.
Let's try it out. No, it's running. So my server after I saved, it has been restarted.
Can go back to the client refresh. You see we lose the in memory entries. Try again.
This is 257. And we got 422 even though it tried it added something here.
So that's a bug net in our program that you have to fix, right?
Because we just added validation. So let's do. So let's see at the network tab.
We can see 422. What's the response? That's the error message.
Now let's do the client side. Let's see. Go to script.js. You can see when we click.
Let's go to the code where we have an event right out event listener to submit.
But when we click is going to execute this find out what the user typed and so on and so on.
So now what comes to my mind is, well,
so you could use the response from the server to actually validate it.
So there's two, two kind of ways here that I can think of as I'm thinking right now.
Well, one way is you can take the invalid input and allow the user, the client to send the request with the invalid input.
That would cost you the request, right? And it would take some time for the server to process and you get back a response.
Now, if I did everything on the client side, that means I don't, if I see something is invalid right away when I click the button from the client side,
I say, I, this is invalid. I don't have to make the request. So we save some costs there.
Okay, so there are two ways of thinking about that. Now, if you do that kind of, if you do the server side route,
just let the server side do it, you kind of have more, let's say the server side would determine the text of the error or something,
and you leave it to the server side so the client does less, a little less work, or you can have the client do more work and handle its own error,
custom error message. So you would have to pretty much do the same thing twice.
But it's, you choose whatever you want to do. In this case, I'm just going to do what we were doing before, just doing everything on the client side.
So we have, we can save that request. Maybe that request would be too costly for your users. So let's do that, just client side.
So we already have code from the front end validation here. And it's the just empty text. All we have to do is add another state else if okay, it has something but how long is it entry tax dot length,
if it's great and 256. You can do the same thing like you check is there is there an error span remind that variable corresponds to the hidden span that's there with the error message.
Now you can take tell the span hey, let me remove the class by its error span or class list I'll remove new entry dash error dash hidden, and that will make it show but the problem now and and don't forget to return
because we don't want to add any entry problem we have right now it's actually doing the create entry even though it kind of got an error. And actually that's not I'm thinking about this.
We have the create entry and we try to do the server side and somehow it didn't. It went here instead of handling the era. Let's come back to that later. Let's just focus on the service client side here.
So if I refresh here and I want to try type the 257, click right. You see nothing happened. Right. No, you can see the network tab there's no entry for any request so we save that request just by looking from the client side.
And the error message of course is wrong right. So let's fix that. You can say like we did before here.
Where's that? Oops, can say error span the text content equals some message, whatever we type in the server we can just copy that all can do our own entry tax.
Must not be longer than 256 characters something like that. Right out again.
There you go. Enter checks must not be longer than 256 characters. Now let's try removing one character and click right. We cleared the error we cleared the entry text and that's good. It's here.
Refresh and is all good. Try it again. Remove one. There you go. It worked just fine.


fff3-19 Validating the Maximum Length of Entry Text on the Server Side

Exploring Leaving the Validation to the Server Side – Nodejs Express Tutorial

This lesson we are going to explore a little bit more about the validation and this time
we're going to do rely on the server side.
This lesson is more for curiosity and if you already know and you already you're already
fine with just that client side that we did in the previous lesson and perhaps you can
just skip this.
So let's go let's explore let us explore what I mentioned before.
So instead of having the client side to the validation here let's do the server side do
it for the maximum length.
Like we saw before right if I get my console thing here again what was it this oops so
if we have the space there 257 we get 422 but we get this empty entry.
Well that's not nice right so let's go here and see what's going on.
So in the event at the submit button is click it goes here it checks okay there is something
there's no error it calls create entry.
Now let's go to create entry.
Go to create entry there is a call to fetch fine now when you call fetch we got a response
right now we notice that this even though there is a 422 you might think it's an error the
response was actually successful because we got a response.
So if you see here in the entries even though it's red if you can see the color is different
we have an error key and some message.
Well this is not a standard thing this actually could be anything you want for this key and
anything you want for this key so actually this is a successful response.
How can we account for that in our client side.
The client side doesn't yet know how to handle that so there are two ways I can think about
that here.
Well you could perhaps rely on create you could define right an output for create entry in
a way that if anything there is a validation error it throws an exception that's one way
and that exception could be caught right remember here we have a call to create entry and there
is a catch block perhaps we can leverage this.
Or you could also do a simple way and that simple way would be to simply if you have
the response here right you got a fetch and then you got a response fine you can just
check after the create entry you can go here and check okay let me check the if there is
the response right this is not the entry it's going to be the response and if that has the
error defined perhaps that's something we could account for we can perhaps copy this
and put it here and then else right in the other case we actually do the entry because
it's not an error we can do this let's try it out let's try it out.
Oops I don't have that anymore let's copy this I put a quote there for 257 and you can see
error is not defined oops what happened so let's debug this I'm going to go here and
line 64 I'm going to add debugger so if you add the bugger something called here it's
going to trigger in the depth tools of your browser the debugger so you can see because
the bugger line it puts a breakpoint there we can take a look about an entry let's look
at what's in entry here in my term in my console you can see it's an object has an error and
I don't know why this oh I see I see I see the problem was this there's no message inside
the error and there's no error right because that was from the catch and that's actually
wrong so that should be what that should be entry dot error right that fixes that I did
I remove the breakpoint I didn't let's make it go on and you can see entry text about
most 256 characters that comes from network and this actually coming from the response
now another way of handling this is perhaps you want to use leverage the catch here and
let's try it out I'm going to revert this and we're going to have what we had before
and what we're going to do is actually change the implementation of create entry to actually
throw an error that means when you throw an error from create entry I should expect you
should expect to go to catch and let's do something here now response here let's put
the bugger and check it out let's see I'm going to do this I got the bug what's in response
here and can see there's okay cold and fast this means it wasn't 200k there was some problem
like some like data problem even though the request response was okay and that's because
of 42 so we can perhaps leverage this to indicate there was a problem and let's see because
we know there was a problem we can maybe set the response here to throw an error with the
response error message let's go so so we're going to check here if the response dot okay
is false right if this is false not okay not a way of saying that it's using not then it's
going to be an error well ideally we want to throw the error but the problem is if I throw
something I don't know what the message of the error is going to be because to get the error I
have to fulfill yet another promise here and that would be another then and it's kind of complicated
here so to simplify one way is just perhaps I want to keep track of maybe has error or something
or error to whatever let's let's assume that there's no error initially and if the response is
not okay you set that variable to true so why why do I have this very because I want to do another
then here and I want to be able to check this and throw an error there in that in case that's the
case so I'm gonna add let's see response Jason I just gave the name like that this will be the
actual JavaScript object so I'm gonna check if has error right if it's true I can say
triple equal true the same thing as this because if the better has anything at all it's true with the
therefore it's true if it has an error I can just say throw a new error and what I'm gonna put
there is response Jason error because I know beforehand that the formatting of my error messages
my error objects from the server side is an object like right with the error key like that the
message right that's an assumption that I made so you got to know that so that's what I'm gonna do
and this message here which corresponds to this will be used to build a new error object okay and
when you throw from here what's gonna happen is if there is a catch block in this chain of promises
right and in this case we do have it from here lines 7 7 through 80 and it's gonna get that error and
you can say error dot message and that's gonna be whatever you put in the constructor right whatever
you put here and that's great but what if there isn't any error well what if there is no error I
can just return response Jason as is no changes there it's just one extra step to check if there's
an error if so throw that now mind you the throw here because I already throws everything after
that will not be executed so I don't need to care about the else there it's you don't need that so
the moments throw is immediately going to the catch ignore everything after it let's try that out
I didn't forget anything you're going to tracks out most 256 let's trace it with the debugger so you
can see what's going on so here I have the other burger I'm gonna put the break point here in line
35 and then I'm gonna put a break point 42 and a break point in the catch here let's try it out again
you see it has made the request we got it see the network tab third one now go back to sources
let's see response dot okay is false so because this is false this becomes the opposite false
inverted is true it's gonna be what's has error right now false so assume no error but now it's
gonna set the error so let's press F10 or what's it called here step over next function call so it
does set the errors error and then returns let's press F8 to go to the next break point and it
got here now what's in response to the JSON JSON it's the error with the message now has errors
true now because of that is going to go into the through you can see here and response dot
Jase response Json dot error is the message and your taxes odd most 256 here now you're gonna
build a new error let's press F10 to see what happens F10 is step over next function call and
you can see it went right away to the catch block and ignored everything afterward so that was
that's why I didn't put an else there this is ignore and with that it goes to the catch and we
can see the error here I hover over it why is not working is it always here it's an error object
and I can see error message is that and with that it should work fine press F8 to continue and it's
there let us test the normal case in case it didn't break anything let me move we remove all the
break points actually we can trace it again I can see it's skip this and it's returning the
response F10 let's put F8 and go went here there's no error false so it skips that and do a
response Json and it goes and it's there I'm gonna move all the break points the working fine but
doesn't work with the other case now there's one problem I noticed just now is we're clearing the
thing we don't that's not good because we want to allow the user to to fix his message right you
don't want the user to lose the message just because we went over the limit so that's not good
let's fix that so the problem here is where where is it clearing let's see so it goes here create
entry then and the catch because this is all asynchronous it keeps executing the code here
so what could we do well we only want to clear when it's successful right so where's the point
of success in this code here it's line 77 right when you add a new entry perhaps add new entry
would could have the okay add new entry add new entries fine fine fine so we we have to move this
part of the code where it clears the text error and error message to inside the then here okay
and because of the nature of the asynchronous nature it will only execute this if it's
successfully able to add a new entry so that's the fix here before it was always calling that no
matter what entry create entry was the outcome of create entry right because as you call create
entry that's a promise because of the asynchronous nature it just keeps executing beyond that so
it's okay it does create the entry it's there it's hanging it's waiting and it keeps going and it was
going right after to the code to clear and then to clear their message and then it finished but
the condition to call this now is only and only after the create entry is successful
try again whoops that's a whole code where's that less than again
copy 257 there you go now the user has the chance to fix it let me move over the code and I fixed it
is there okay so let's review what we did in this lesson we explored the server side relying on
the server side to validate everything and then just catch the message from the server side and
displaying that in front and one way of accomplishing that we have two ways right we could just rely on
assuming that the response would have an arrow key and not use any kind of catch block or you can
leverage what we already had which is what we did just now with the catch block and what we did is
add an extra step here I got to have this variable outside the kind of scope to the function it's a
flag variable to indicate whether there was an error assume there's no error like and then you check
if response not okay set the error to true so that in the next step of the then you can do the
throwing of the new error if there's no error just return the response as is this throwing will
immediately go to the catch block if there is one because there is one here the catch block would
actually change the error spend with the error dot message and we fixed the problem where the clear
was clearing even though there was an error and they usually lost the data and had no chance of
fixing his message and resubmitting it while this is nice approach I'm going to revert back to the
client side only so we don't have to make a request I'll leave this client to check it so the
server is not burdened with that and the client doesn't have to make that extra request sometimes
it could take time and it could consume bandwidth and I'll leave that here and I'll comment out the
bottom one just in case you want to reference it someday so all we have to do is true error and so
on obviously actually you could still leave it in as is if you still left it here it would actually
still work because it was just skip everything afterwards so it's fine I'll just leave it because
that's a nice way we can the Korean entry will return an error but maybe just in case some client
cannot do anything about some sort of validation maybe the server side only validation something
like that so I'll just leave it anyway so with that I'll see you in the next lesson


fff3-20 Exploring Leaving the Validation to the Server Side – Build a Nodejs Express API Tutorial

Installing MySQL – Nodejs Express Tutorial

In this lesson, we are going to learn how to install my SQL.
So so far, we have the client working with the server.
Now the server is storing its data in memory if we go to server.js, lines, and through 23
define an array of objects.
Now this data stays in memory as long as the server is run.
When the server is shut down and restarted, all that data is gone because every time the
server starts, it starts with entries anew because of this hard coded value here.
That is not a good way to start data at all because everything we type, everything you
put in there is not persisted.
It gets lost.
So enter the database.
We are going to use an SQL database called mySQL or mySQL.
So we are going to start in that database.
That we're going to have a database that database has many tables.
For our case, we're going to have one table to store the entries.
That would be the interest table.
The interest table will have some columns.
Since we already defined the representation of the data in this manner here in this object,
it's easy to translate that into a database column.
Simply take the keys from the object and make that the column.
So we'll have the ID as one column.
This column will be the primary key.
The second one will be the text.
Okay.
Now let's go to the mySQL website.
This is the website for mySQL.
There are many ways to install mySQL depending on your system, depending on whether you want
to use a package manager.
Okay.
So here are some ways you can do to install mySQL.
If you are a Windows user, you can simply download the installer from mySQL.dev.mySQL.com
website.
For example, if you go to the website, you can click developer zone.
It goes to my...
dev.mySQL.com.
You can go to mySQL downloads and here have the option mySQL installer for Windows.
This is the community edition.
You can see this is version 8.0.21.
And you can get the MSI here.
If you're using Mac OS, there's also an installer.
Here's a link I put for version 5.17.
It's still a stable version, even though not the latest.
And that's the PKG.
If you want, you can also go to the same website.
Let's go back one.
And that might be somewhere here for Mac.
We just got to look.
I think it's community server and I claim select the operating system Mac OS.
And there's a DMG archive, for example.
Now the way is using brew.
If you have brew package manager for iOS, for Mac OS, you can do brew install mySQL.
For my case, I'm using Linux.
The distribution is Ubuntu.
I can use my own package manager instead of downloading from the website, although you
can also do that.
You can go back and there's an APT here.
Now for other distributions like Fadar, there's YUM, and there's SUSE and so on.
Anyway, I'm going to do my case using APT.
APT has been on top of APTGAD.
You can also do APTGAD, it doesn't matter.
Very simple, just update the repository next and install the mySQL server package.
If you want to do the secure installation to disable certain features that are by default
to make it more secure, we can do this one.
And finally, we can use the client, right?
Because we have the database server, the mySQL server, and we need a way to access the database.
And that's through the mySQL client that we get.
That's the command mySQL.
Of course, you can use utilities like the mySQL workbench, that's a GUI you can use.
I recommend that too.
Up to you.
Anyway, let's get started here.
I'm going to use the command line.
I'm going to do sudo to get privilege.
APT update to APT.
Packet manager for Ubuntu.
Let's update the repository index list.
Might take some time.
And we can do sudo APT install mySQL Dev server.
Now it's usually asked if you want to go on.
I said yes before because I already installed.
And I'm doing it again.
So this is installing version 5.7 for me.
I'm using Ubuntu 18.04 long term support.
So the package manager recommends I use that version.
Of course, you can always find out if there are packages for the newer versions depending
on what version of your distribution you use.
So with that, let's try mySQL-desk version.
This should give us the version of the client.
You can do sudo service.
Maybe mySQL status.
We can see it's running mySQL community server.
Exact as year and so on.
Control C.
I think some of the configuration is under ETC slash mySQL.
And there are some files there.
MySQL comfd, mySQL cnnf, the one.
Just so you know.
Before do a secure installation, I just want to check if it's working.
So sudo mySQL, it's going to connect us to the database server.
We got it here, show databases.
And we got everything fine.
Let me exit.
We can do the optional mySQL secure installation to make things more secure.
There are certain questions that will be asked.
And it's up to you to choose to adopt them or not.
Let me try mySQL secure installation.
So the first one, let's see.
Connected to mySQL using a plan of password.
I think I already installed this so I didn't ask.
So there's something about the validate password plugin.
Can you choose to have it or not?
Connected to mySQL is a blank password.
The validate is installed because I already did.
But if you didn't have it, I'd probably ask you for that.
Subsequent steps to run existing configuration.
Set the password for root here.
You can set a password for root if you want.
Of course, that's a recommended study for production.
Length of the password and so on.
It's probably going to ask about the password strength also.
I already did that before.
And of course, you want to choose the strongest
for your production one since we're doing education here.
I'm trying to be a little less.
But always go for the strongest one.
Better strength, so on.
Do you wish to continue? Yeah.
Okay, so by default, the mySQL installation
has an anonymous user.
I want to log into mySQL without having to have a user account creator for them.
This is intended only for testing.
To make the slash go a bit smoother.
You should remove them before moving into production environments.
So make sure to do that as you go into production.
I'm going to remove it. I don't care.
Normally, root should only be allowed to connect from local host.
This ensures someone cannot guess at root password for the network.
Just allow root logging remotely.
If you want that, I'm going to say yes.
There's also the test database.
I want to remove it and access.
Remove the access.
Reload privilege table now.
Yes. Okay, all done.
So I can do so do my sequence should be working fine.
Mind you that when I do so do running the command as root, so it's working.
Okay, so that's it.
I installed my SQL and I can connect using the client.
Now we can start poking our back end to connect to my SQL database server.
And then we can start doing some queries to insert data.
And we're going to create the table and then we're going to do some queries to insert data and so on.
See you in the next one.


fff3-21 Installing MySQL – Nodejs Express JSON API Tutorial for Beginners

Installing MySQL Driver for Nodejs (Problems!) – Express Tutorial

Welcome back. In this lesson, we are going to install the MySQL driver for Node.js.
So we got MySQL server running. We verified using the MySQL command decline.
Now we need a way to connect to the database using our server, Node.js server.
One way of doing that, we need what's called a driver for the database of our choice, MySQL.
NPM has a package called MySQL, which is the same name as the database.
If you go to npmjs.com.slash package slash MySQL.
This is a package that we can use to connect to the database and perform queries.
There's a lot to this, but let's get started.
Let's go to the terminal.
First, I'm going to say npm install MySQL.
It should add an entry to my dependencies in my package JSON.
Let's verify.
Now it's here. Line 17.
Now with that, we can use it from our server.js.
Up here, I'm going to say const MySQL equals require MySQL.
Now we can use this and first we have to do, what we have to do is connect to the database when the server is started.
You can reference the guide here in their page. They say how to do it.
You can see right here after requiring it, we can call the createConnection function, pass it an object with options.
Those options will contain things such as the host, user password and database.
Right now we do not have a specific database for our application. We are going to create it later.
We have a local host. It's going to be our host here for development.
User, we can use root and you can use the password if you have root.
Then you can call the connect on the connection object that was created and you can execute the query here.
Then connection in.
Let's try it out.
Let's go to the server code and have this open at the same.
I got that, express and so on.
I can do it anywhere after line five. You choose perhaps I want to do before the server or after.
I don't know. Let's try here.
Call my SQL.createConnection. We are going to create a connection to our database.
Pass an object as the argument. Now they are going to need a host.
We are going to give local host for development.
Another key is the user. We can use root for development in our case.
Password will be whatever you type. I am going to defer that.
We don't have a database right now. Let's use something that is already there.
If I say to do my SQL and I say show databases, there is some information scheme or whatever.
Let's say my SQL is the database.
Let's try that.
With that, we can say, we have to start this object in a variable.
Let's say, const connection.
Mind you they are using ES5 var. That's fine. You can use that.
But I am using ES6 const. I don't need to redefine connection again after my first assignment.
That's why. There is also lat and so on.
We have a connection. Let's connect.
Let's try a query.
Let's check the tables here. Describe my SQL.
I don't think that's a...
Not described. Use my SQL.
Now we can see show tables.
We have a lot of tables and so on.
I don't know. Let's try something.
Select star from slow log.
Nothing. Select.
ID from user. I don't even know if ID...
Let's see what's in user. Describe user table.
Got a lot of stuff.
User table has a lot of fields.
As a field user.
OK. Let's try something.
Select user from...
What happened there? Select user from...
MySQL where user root.
Select user from...
MySQL where user root.
What was the name of the table?
I messed up here.
The table is called user.
.user.
There you go. We can use this query as a sample example
to see if it's working. I'm going to copy this.
I'm going to copy this.
Let's see.
We got this query.
We're going to get some results.
Let's see the way they do.
They're using...
We got the query first and they have a callback function here.
Right up.
Second argument will be a callback function.
We can use the error function or function doesn't matter.
Error, results.
What was the other thing? Fields.
If error...
We want to handle the error whichever way. Anyway, I'm going to console log
whatever this is.
What is solution on a rule? OK. So select one plus one
add solution. Probably the table.
Let's just do the results.
We got that. Make sure to close the connection.
The server dies.
I don't have a mechanism right now. Do I?
Let's do this.
I think this might be
asynchronous? I don't know. Let's see. I want to see if it reaches
this line.
We got a connect query and so on and so on.
Let's see. Connection
here.
Let's try it out.
So node monority restarted. Let me do it again.
Client
does not support authentication protocol requested by server.
Consider upgrading my SQL client.
Not supported.
OK.
Let's see. I think there might be a problem with the NPN package.
I'm not.
I'm just looking.
When you get this kind of problem and you don't know
what to do, you want to look in their page.
Usually there's a page where you can ask questions.
You can see other people's questions. In this case you can go to their homepage here.
And you can go here
to issues.
And you can copy and paste the error you got.
And you press enter and you can see there's some open issues and some close.
You want to see what's going on.
Let's see the close ones.
Try this.
Duplicate of this. Let's try
my SQL 8.
Although I don't think I'm using my SQL 8.
Let's do
the service.
SQL status.
My SQL community server.
My SQL. This is the client version.
My SQL. I don't know if you have server.
I don't think they have a command.
They have a command.
Okay. Let's go to
ATC my SQL.
ATC my SQL.
Nothing here. Okay.
Let's backtrack here.
Go back to the package
website.
Perhaps it's asking for my password. I don't know.
Let's see. So usually you don't want to put the password
in the code base. That's pretty bad. Usually you can store that in
environment variables. So I'm going to do just that. I'm going to save
my SQL.
My SQL.
Password.
Oops.
So I'm going to define this variable here.
You can do so like this. If it's temporary
you can save my SQL password. It's whatever.
If you want to make it permanent you can
copy this and add to your bash profile whatever
terminal you're using. ZSHRC bash profile bash
RC whatever you use. So I'm going to do
this while here. So give me one moment
I'm going to open a new window
and I don't want you to see my password.
Let me do...
...
...
...
...
...
Alright I'm going to source my bash RC.
Let's try again. I don't know if that's related
at all.
So still the problem.
...
...
...
Maybe we're going to have to use a different npm package
that's more updated in my SQL 2 I think. Maybe. Let's try to add
it in the next lesson. See you then.


fff3-22 Installing MySQL Driver for Nodejs (Problems!) – Express Tutorial

Finishing the Configuration of MySQL after Debugging – Express Tutorial

We are back. Let's start. Let's continue debugging this thing.
So, in my SQL, we have installed my SQL, in my case 5.7 server, community server, and
have a problem with my NPM driver. It's not working fine.
Client does not support its education protocol, requested by server.
Now, I think perhaps if create a new user that might work.
I know that this error happened if you have version 8 and the NPM package at some point did not support it.
Probably, I don't know if it still has that problem, but I was puzzled that it did a manifest in version 5.7.
Anyway, I suspect something to do with the password, the way it's being authenticated, right?
Something about the case of protocol.
So, let's do the following. Let's go into my SQL. Let's create a new user specifically for our application.
Alright, so let's do that.
Let's do create user.
Give it a name. I can be a write something user.
Okay, so it's going to be at Locos, in our case, identified with my SQL native password, in this case.
I'm using version 5.7 server, okay?
And you give it whatever you want for the password.
I'm just going to do it down here.
There's some policy requirements. Probably, it's asking for an American, so on. Let's try again.
I'm going to do 1, 2, 3, 4, 5.
Okay, I think it's asking for an uppercase letter.
Now we have numeric, we have lowercase. Let's try ABCD.
Okay, still does not satisfy.
Okay, let's try again. ABCD.
That's good. I don't know.
There you go. It needed a punctuation character.
Finally got something. That's flush privileges.
Let's try it out. My SQL issue.
What was the name of the user? Write.
Something user.
There you go, I got in.
Exit. Let's update.
Instead of root, we're going to use the write something user.
And for the password, we're going to update my environment variable. Give me a moment.
I'm just going to my bash rc and changing my export my SQL password to be equal to the new one.
Make sure to have a good password. I'm just doing an easy one for educational purposes, but you should always have a good strong password.
And don't tell anyone and don't put ever ever put it in the source code. I was using environment variables.
Never commit your password or any kind of token to your source control. Okay.
Give me a moment.
Okay.
Back here. Checking.
If I think I'm good.
I'm going to source my bash rc so I can reload it and load the variable.
Let's try this again.
Okay, I have the problem access denied now using password. No, why not?
Why not?
Yet another error.
Hold on, might be something to do. Let's let's check the issues again.
Oops.
Let's copy this.
Let's practice again.
So if you want to find out, learn more about if somebody had the problem before, right?
You want to go to the page for the package.
You should get some section of issues or problems or questions, whatever this case issues.
I can do a search here.
Look at this is one in this case. There's no open but there's close.
Read error, something.
Uh huh. What is this?
But this one is using yes.
Why is it not using password for mine?
Let's do a search here.
Search engine.
This is Stack Overflow. We got problem.
As like they ran command.
Fine.
Can reset.
You know what? Let me try something here.
I think maybe what I did in my bash profile was not proper.
Let me reload.
Oh, it just hit me.
I know what's going on.
Okay, so I have loaded my reload in my bash RC here by the actual session.
What the server is the other tab, but the other tab has not sourced the bash RC.
Therefore it does not know about my SQL password environment variable.
Try again.
And I'm afraid maybe that problem was there before and I didn't know even before our new user creation.
I don't know. Let's see what happened.
The access denied database my SQL.
Okay, let's let's create a database for our application now.
So let's do sudo my SQL.
Let's do create database.
Let's call it.
What do we call it? Right? Something.
I think we I'm going to use underscore here.
I'm afraid and dash that won't it won't allow us to use dashes.
Write something.
Let's call it development.
Okay, show databases should now have it.
And it's here.
Now let's try it here.
Write something development for our database.
Now this query being valid, right?
So I'm afraid that that our user does not have access to a database.
My SQL. That's why it happened.
Anyway,
let me just create a table here quickly.
Just for testing.
Table entries.
And we got say ideas.
Was it?
Is it in?
I forgot to use database use, write something development.
And then I'm going to create table entries insert into entries.
values.
ID values.
Select star from entries.
Now we got something. Okay, great.
Now let's do that star.
Sorry to have to change this select star from entries.
I just created a database for testing.
We can change that later and drop it.
Now let's try again.
Let's go to the other tab.
Access denied for that user's database.
So I'm guessing my user is not configured to have access to that database.
So we have to alter and give grant privileges, right?
So let me think about that.
So there's a command we can use.
Let's go to my SQL again.
So do my SQL.
We got to find out how to do that.
So let's do grant.
So you can grant certain kinds of privileges, right?
Can a user make it a database?
Can you read at least something or whatever?
Let's just grab our user everything.
Okay, so grant all privileges on.
And this is the database we want.
We're going to do the write something development database.
Okay, it could be any table dot star any table to we got the user.
I could be what it was a write something user.
Okay, we can say out local host.
Try that.
Now let's try again.
And finally it's working.
So wow, we did it.
So first problems with the password.
I think I had forgot to source my bash RC and therefore this session of the term did not have my password.
So that was a problem.
So make sure you source your RC after you define the environment variable in the file.
And in the same tab, I did a silly mistake.
Second step was my newly created user.
I usually want to have a user for your application, right?
I did not have privileges to modify that is to access my database, right?
So we grant, printed all privileges, so we can use the command in my SQL prompt grant all privileges on the name of the database dots star meaning any table it could be specific tables if you want it.
The star means every table in this database.
And to the user at local.
They finally got it working and we got some response here seems like the was it.
We do this.
So we did a console log for the results right.
So results is an array of row data packet.
And inside that we got the actual column that with value column ID value one.
We can get results.
Zero would be the first row right we found.
Remember before we had this is the first row here in the client.
And this is how it appears here.
Of course we had more right if I can do another insert.
Oops, and I forgot to select database again.
You can do the user we can just type write something development dot here.
That means database dot the table name.
And we got that.
Now if you do a select here of course going to get right to the score something development dot.
We got 132.
Let's try it here.
I just did some zero so maybe I want to remove that we got 132.
Nice.
Okay, so another thing is the hello thing I put there I wanted to do that to make sure.
So is this calling it is it is it a synchronous asynchronous meaning the moment this call that will continue execution beyond that will we will wait.
Until the server skill so it's not waiting at all right starting and then even after that it's doing the hello first and then doing the service listening later.
So it is asynchronous so we have to find a way where to place this connection and there must be a better place right because you don't want to end the connection as as what is happening here is it's listening on part 3000 but at the same time.
It already closed the connection to the database and that's not good because you need to have the connection open right so to be able to make the queries and so on.
So we need to find a better place with that.
Anyway, I think for this lesson that's very good.
Let's take a break and I'll see you in the next one.


fff3-23 Finishing the Configuration of MySQL after Debugging – Beginner Express Tutorial

Handling SIGINT and SIGTERM in Express to Properly Close the Database and Server

Welcome to another lesson. In this lesson, we are going to learn how to handle an interrupt
and a term signal for our Express server so that we can properly close the database connection.
So let's get started.
Here I have the file server.js. In server.js line 71 through 73 have a call to the listen method.
Now we have in line 77 connection.in but that's not in its proper place because
by the time I hit line 71 it starts the server but then it continues on executing the code and
it automatically and it goes on to close the connection right away right after the server
has been started due to the asynchronous nature of JavaScript. That's not what we want. We only
want to close that connection when the server is shut down. How can we do that? One way is by
handling the signals for interrupt if I press ctrl c and for term for termination.
And once we get those signals we can proceed to close the server
right after closing the connection to the MySQL database. Let's get started. So after you
make the call to listen you can do the following. It's call on the process object and you can call
process on and then you have to say the name of the signal that you want to do something
when that is triggered. For example, sig int would be when I press ctrl c an interrupt signal.
That's what I usually do to kill my server. So let's try that out. The second argument would be
the callback function you want to execute right after that signal was emitted. Let's put a console
log here. Sig int emitted. Let's see what happens. I'm going to save this. I'm going back to my terminal
window where I have my server running with node one. I'm going to press ctrl c to send a sig int.
You can see what happened. I got this text sig in emitted and it seems it happens several times.
Okay, so that's how we're going to handle
and you can see my server is actually still running
and address already in use. So it didn't actually close the server when I did that.
Let me kill the process with px. Let me grab that. I think let me see. Hold on.
Give me a moment here.
I'm grabbing the process number so I can kill it.
Okay, so you can in my case, I can just do px.
AUX then I pipe it to grab server.js and I can find out that server here is money on
process ID 73. I can do kill dash nine, 716 to kill that.
Anyway, and I can restart the node one thing. Anyway, before doing that, let's fix this.
So let's do the following. Let's say closing connection to the database and then we are
going to move line 80 connection dot in here. Then finally we have to close the server to fix that
problem where I cannot I have the server still running in the background.
So to do that, I need a reference to the server. And we can there's actually a method that you
can call to close the server programmatically, we can get that reference from the return value
of app.lesson. So let's put that in a variable called server. So app.lesson will return that
server. And then we can call that server dot close here. And that will ensure the server is closed
after doing after ending the connection to the database. And I don't need this hello here anymore.
Let's try it out. Now I'm going to press Ctrl C to send a sig int.
And you can see a side closing connection to the database.
And I can rerun it and I can still run in the same port, it's not no longer,
in no longer kept running the background because of line 78 to close the server.
There's also another process called another signal process on sig term, you can also do
the same thing. Since I would be using the same code, I can just take this and put that into a
function on shutdown, for example, I can put that in an anonymous function or you can I can
use the keyword functions up to you, whatever you want. So I'm going to place it here on shutdown.
And now I'm shut down. One thing I want to do is I want to say closing the server.
Now also when the second term is submitted, I will do the same thing.
Okay. So that's it for this lesson. We learned how to handle the signal sig int and sync term so
that we can call a callback function, which to properly close the database connection and the
server. Usually, for my case, when I'm doing development, I like to kill the server with
control C, that would be the sig int signal. That will properly close the connection to the database
and close the server. After I'll listen return an object that we can use and call close to
and the server. With that, I'll see you in the next lesson.


fff3-24 Handling SIGINT and SIGTERM in Express to Properly Close the Database and Server

Creating the Database Table and Making the Query to Find All Entries

Welcome back to another lesson. We are going to start doing my SQL stuff now. In this lesson,
we are going to build the table to hold our entries. Let's get started. So to build the
table to create the table, we can write it from scratch by hand. Or if you don't remember the
syntax for SQL, you can always go online and find some sort of online SQL generator. For example,
if I go to my browser, does this one, great table online SQL generator at this website,
you can see here URL, Wtools.io slash generate dash SQL dash create dash table. So it's pretty
simple, you can give the table name in this case, it's going to be entries. And the angel
leave the file, the only calling name you have is the ID and the text, right? So we can do,
perhaps the ID here, type in is fine auto increment for the primary key, allow no, no.
And I think the ski means primary key. So I'm going to check that. Let me let me see what it
gives us when I click generate, where's the generate button index is generated right here.
Create table entries, correct. ID is not no auto increment primary key ID, that's correct. That's
fine. That's going to be the primary key. Now we need the text, right? So I'm going to click add new
column, column names going to be text. We can do a bear care. And remember, we had some limits to
the length of our entry that would be 256 characters. Allow no, we don't want to allow a blank entry. So
I'm going to uncheck that it's not a primary key. Okay, so let's try generate. So now we have ID,
we have text bear cat 256 not no. So that's fine. We can copy this. And we can run this statement to
create the trade will we're gonna work on. Let me go to my terminal. I have a SQL, my SQL client
running right now. And I already had this table that I had created for demonstration, I'm going to
drop it the top table entries. And I'm going to run that statement here, I'm just going to paste what
I had. And I'm going to do that. Now we can see if we do describe entries, semi colon, I got a new
table. If I do select star from entries, I get nothing right at the set. Now can start working with
this. So let's see. Let's add some dummy entries. Let's copy the data that we have right now. Remember,
we have 123 dummy ones. Let's go to our server.js. See this, this is what we want to eliminate right
now, this array of objects. So let's do the following let's try. But we could write some script to take
all of these and insert programmatically. That is one way. I'm just going to add one. I'll leave that as
an exercise if you want to do it be able to take an array of objects in this format, and generate
SQL queries to create the cert those records, you could use the connection. Like we did here, it
doesn't even need to be under the express server.js could be a separate file. This is just a script
that runs once in and then it finishes. That script would look like the definition of all the
entries as an array of objects. Then you call to connect to the database. Then you run the query to
insert into entries, whatever. And then that's it. Anyway, I'm going to copy this text. I'm going to
my SQL client, I'm going to say insert into entries. And I'm going to say text here, under
parentheses values, and LVD. And I pressed weird character there. There you go. And if I do select
start for entries, I got the entry here. Okay, so once we hook up the my SQL connection to our end
point, we should be able to see only one in the list as we reload the page. So let's get started.
Here we have the route right to send all the entries. Now these entries are now in the database. So we
need to make a query select start from entries. How can we do that? Let's go here. Remember, we
already know how to do the entries here. Before, right? So we try this lines 13 through 19, I'm not
going to have this here anymore. So I'm going to cut this. And we are going to face it lines 36,
342. So we are going to use the connection object here, which is global to this whole file. So I can
access it from my endpoint. Mind you, of course, that these probably would the way it is right now, we
have everything in a single file. But in practice, we want to separate many concerns of our server
into multiple files, for example, file, certain files for routes, certain files for the database
connection configuration, certain files for the queries, so on. But since we're just getting
started, it's fine to have everything in a single file. So keep that in mind. Maybe you can think
of a better way to organize your code. So we have connection dot query select start from entries,
that's the query we want. Now, once this gets called, it's going to run the query might take some
time. After that, it calls this callback function right here. In the callback function, we first
check if there is an error. Well, I don't want to throw the error. That's not really a good thing to do
in our case here. If there is an error with the query there, well, I can only if we think about it,
if there was no there were no entries at all, that would be fine, right? There's no error there.
So we could still send the entries here in line 44. That would not be an error. But if indeed we
somehow mistyped this query or whatever happened here, you have to think of a way how to mitigate
that error. You probably want to log that error in some sort of error message so you can know
it can look up later for debugging purposes. As for the user side, perhaps one way we could
you could do is just send nothing to the user. And the user is going to think, okay, there's nothing
or you could make send an explicit error. But if you do send an explicit error to the user to the
client, he's going to know something bad happening in your server. And he's probably going to think
that he's going to think that your service has a lower quality. So you have to weigh in your
choices, think about what kind of image you want to give to the client. For now, what I'm going to
do is I'm just going to arrest dot send an empty array. And I'm going to make sure to return otherwise
all the subsequent code is going to get executed. Actually, if I think about this,
will this return be so this function, so I got to be careful there actually, this is going to
return from this. So be careful with the code after that. So I don't want to have this code
outside that function. So everything will lie will continue from the callback, and there won't be
anything outside. So let's try that, we have that we got the error, send the error. Before that,
I probably want to console error, and say that something bad happened, or I can just error the
message or whatever. Some sort of log message. I want to use back tick to interpolate here.
I'm going to send empty. And then if everything went well, it's going to go to line 43. Now what
we want to do? Well, we're going to get some results, right, an array of rows. Remember,
we had some sort of row object, we can access the properties from that.
Let's console log and see. Let's see something if I do res dot send results, what what's going to happen.
Let's try it out here. I'm going to reload my server. And I'm going to try reloading here.
Look at the network tab. So preview.
So we get this 200. Okay, seems everything went fine as a response, we got the JSON
with that. So seems everything went just fine, right? Let's look at the log for the console.
So the console log something an array of row data packet objects. And it seems like
during the process of JSON stringify that this object actually was stringify and is to JSON. So
we didn't have to do it ourselves. So that's actually a good thing. I was actually thinking
about do we need to actually convert this object into a simple plane object that can be used
and be converted into a JSON text. So it seems like it's doing it for us. So I'm going to leave it as is.
Now if you want to test this error here, we can do so if we stop the MySQL server.
Let me show you. I am going to stop MySQL server. Let me exit. I'm going to do sudo
so for my case, since I'm using Ubuntu, I can do sudo servers MySQL stop.
And I can stop the server, the database server.
Okay, let's try the browser. You can see now that we have
something going on here fail to fetch. Oh, what happened?
Aha. So I wasn't expecting this actually.
Server is listening, server is listening on the handle error, the server, the server closed the
connection. So I was just hoping that the server would keep would keep on while the actual database
would be down, but it seems like it automatically saw that the database
went down. So the server also failed. So error connection lost, the reclose connection.
We did error event, a connection instance. So it seems like we're not handling this.
We should probably handle that. Connection instance. That's something we could reference in the npm
package. Let me see here, if I can think of.
Next. Let me go to npm. I'm just going to see if there's something, if not, we can just go on.
I'm going to look for error handling. Connection require create connection, there you go,
connect and function error. Seems like connect takes a callback with the error.
So let me see that. So if we pass the function, you can say error or error, whatever you want to call it.
Console error, I'm going to do console error.
And I'm not going to handle anything. I'm just going to send a message. What I want, what I'm
trying to do is make the server still be up while the database server is down. So we can simulate
that error handling in our route. I'm going to restart this. I can't because the server is down.
So I'm going to restart my SQL server. And then I'm going to restart my server.
I said no, where's that from? Is that from console log?
I wonder.
Let's see my SQL stop.
So actually it kept doing it.
So this didn't matter. Actually, it's just called back after the connect were.
Oh, I see what they're doing. They actually did a wrong connection here. And that's why it called
error here. And then my error was no because there was no error. I got it.
So it seems like when the connection is properly set, this error will be no. That's why it comes
along no. So this gets immediately called after the connection.
What I was looking for is just a way to have the server upper running while the database
just closed. Actually, I have a better way to test this. How about we mess up our query?
That's actually a way for a simpler way. So let's say we did some mistake in the query.
And that's surely going to send an error here. And it was going to hit that. Let's try it out.
Let's let me restart my SQL server. And then my server here, my API server.
And I'm going to go back here. Everything is fine. So it seems.
Aha, there you go. So we actually got something right, an empty array of entries. So the client
from the client perspective, he didn't see anything wrong. He just thinks there isn't any
entry. But from the server perspective, we got a console error here saying,
error parse error, you have an error in a SQL syntax. So that's precisely what we have.
And this is great. Now from the server perspective, we know there was a problem.
We probably could have had some sort of monitor to look and be warned and be alerted that something
went wrong, we can fix it. And then the client later on will won't even notice, right? He will
notice something is missing. If he was keeping track of the data. But then he, if we quickly fix
this, he can try again, if we'll get everything fine, instead of having some sort of really bad
error, and bad user experience. Anyway, let's fix that query. And now you have it. We tested this
part. And everything's fine for our entries. So for this lesson, that's all and I'll see you in the
next one.


fff3-25 Creating the Database Table and Making the Query to Find All Entries

Writing the Query to Create Entry in Express Server Endpoint

Welcome to another lesson. We are going to implement the route to create a new entry using mySQL.
Let's get started. Here in the file server.js we have the push to entries in line 67.
This will no longer be a push, this will be a query to insert into the table entries.
Let me show you some notes that I have on. We already did the select star from entries this way.
How can we create a new entry? One way you could do that is using insert into values like I did before if you had seen.
You could do this and you could specify the columns and then the values respectively.
If you do it this way you would have to have a question mark like this.
And then the second argument to the call to query would be an array of elements that correspond to each question mark that appears in the query.
Another way of doing that is if you pass an actual object as a second argument like here.
Line 17. If you have an object and you pass an object as a second argument that object will correspond to the question mark here and it will appear.
If you try query.sql you can see that this is what you are going to get. That's another way.
Let's try this way. Let's see if we can do that.
Insert into entries set question mark and pass the object as a second argument.
Let's try.
Back to server.js. So we have the new entry here using the request body text.
Then we do some validation here.
It's important that we have this validation here. Of course that we could the database already has some validation.
If you see the description of our table entries for text for example cannot be no.
And the max is 256 characters.
Of course we can leave all the validation to the database.
But that's not a really good practice because querying the database might be expensive.
Especially if it's being used all the time by millions of people.
So what do you want to do is avoid any sort of database operation if you can.
If we can do that by simply validating things before even making any kind of database query that's very good.
So we still should have this here.
Now that's great. Now this part is going to change. So let's do the change here.
We are going to call on the connection dot query. What is the query here?
Insert into name of the table entries.
Right. Set question mark because the question mark will be the place holder for our things we want.
And you can pass the actual object new entry here that contains the text field in this case.
It could have any more other fields.
And then we can have a callback here.
And I think the first is the error. Let me see the notes.
First is the error results and fields. Let's see what all those mean.
Error results fields.
I'm going to cost a lot.
All of results and fields here as for the error.
We're going to handle it in some way if error.
So we're going to insert and I'm going to see something if there is an error.
Let's think about this. If we messed up this query and it's an insert query.
It's our fault.
Now the client is going to ask for a new record to be created.
Of course we messed up here in the server side.
There's no way we can guess the way you can mitigate this.
So we have no choice but to tell the user hey we cannot do it.
There was a problem on our end.
So actually I cannot think of any particular thing to do right now about return 500 in terms of error.
So let's just that.
REST dot status 500 send.
And you can send a message here with the error.
Failed to create new entry.
Please try again later. How about that?
And then that gives us time for the server side people to fix things and the user would be able to know that okay something's going on.
I have to wait. I'll try it again later.
If everything goes fine.
Going to have these and I suspect that I think in the notes we can get the insert ID and everything here.
Since we are creating a new record in the restful convention right there's something called rest.
And usually when you have a post.
Create a new record.
You want to send back the new record feels including the ID that was generated by the database.
And to do that we're going to have to set the new entry dot ID here.
And to do that we do.
I think we can use this insert ID. I'm not really sure but let's let's try it out.
I'm going to console log this results ID results that ID insert ID sorry.
And I'm going to comment this out for the time being and I'm not going to have this push and the sand here will be still be there.
Let's try it out.
Reload page here.
I don't actually don't need to reload.
There's something going on.
Let's see what the problem is.
I messed up.
Oh I see.
There's a syntax error.
I put an error function instead because I already had a function here so I don't need either one we'll find.
Okay let's try creating something.
Looking at the server side we have service listening apart 3000.
We got a console log results is an OK packet.
Some information about the query I guess results ID to that's the result insert ID that's correct right because the last record was ID one.
And we have.
Fields undefined.
Okay nothing feels.
So I think we're good with.
Let's see what we got from the response.
XAS whatever that's correct.
Let's get this going with the results that insert ID here.
And we don't need to console log anymore.
Remove lines 75 is the one now we have that object not object an array of object we don't need this anymore remove lines 19 through 32.
Goodbye.
Let's make sure it doesn't exist anywhere.
I'm going to search case sensitive nowhere to be found.
We got rid of that in memory kind of database fake simulation.
Let's reload the application here we can see it's persistent.
And if I look at the MySQL client and I do a select star.
Let's do my SQL select.
Select star from entries.
Oh I have to say the database.
Right.
Something development dot.
I can see that ID to is that as DS DS which confirms actually persisted the data in the database table entries.
That's wonderful.
Now we have we can kill the server.
We restart it and reload the web page and the data is still there.
The data is persisted.
Let's test this error here.
If we mess up the query.
Save this.
Try to create something.
We got a 500 into a server error and we got the message here failed to create new enterprise style again later.
Very good.
The user knows what's going on and he can try again later after the server side people fix the problem.
Let's revert the query to the correct implementation.
So this is it.
So this lesson we learn to modify our post slash entries endpoint to actually insert a new record into the database.
We use the insert into entry set question mark new entry as an object as a second argument send a 500 if there is any problem with the query otherwise set the new ID using results or insert ID and send that new entry.
Don't I would just want to close with pointing out that you don't want to be hard coding the new entry fields inside the query itself because of a risk of SQL injection.
That is the user the client can type anything they want.
They could type SQL statements, SQL queries that could be.
That could be something like deleting your database or doing something really bad to your database.
And that could be substituted here into the query.
And that would be really bad.
That's called SQL injection.
You don't want that to avoid SQL injection always always use the question mark.
And if you need to replace anything into the query do it as a separate thing.
In this case, as a second argument, leave the question mark in the query itself, and it will handle that injection for you that problem of injection.
With that, I'll see you in the next time.
Thank you.
