hey what's up guys it's pedro here from
newcoder.com
and in this video we're going to give an
overview of the crud application that
we're going to be building as well as
going over what things you should be
familiar with in order to follow along
with this tutorial series
so the technologies that you should be
somewhat familiar with
are node.js and express.js which we're
going to be using for our server side
we're going to be using a database
called mongodb and for our client side
we're going to be using jquery the fetch
api
and bootstrap and you should know a
little bit about html
and last but not least for our server
side and client side we're going to be
using a programming language called
javascript so now let's actually take a
look at the application that we're going
to be building within this tutorial
series
so this is going to be our to-do
application that we're going to be
building it's a very simple interface so
we just have a user input box where
we're going to type our to-do so let's
say i want to type
clean garage
i can do so hit create
and you can see that this gets stored
now if i hit refresh you can see that
the data persists so that means that we
are saving it within our database if i
want to edit this for something let's
say clean room instead
i can click edit
and you can see that we get updated with
clean room hit refresh
data persists
and if i hit delete it deletes the to do
and if i want to create multiple to-do's
i could say clean room
clean
house
and etc and all this data will persist
within our mongodb database
welcome to part one of building our crud
application from scratch
so essentially what we're going to do in
this tutorial is install our packages
set up our express application and
connect to our mongodb
database
so to get started i'm just going to go
to file i'm going to go to open folder
i'm going to right click go to new we're
going to create a new folder so i'm just
going to call it
mongodb underscore crud
let's select it
and afterwards what i want to do now is
let's open up the terminal
and from here i'm just going to type cls
to clear the terminal and that's because
there's a visual bug with visual studio
code at the moment
and what i want to do now is install our
packages that our application is going
to be dependent on so i'm going to type
mpm init and we're going to pass in the
flag
wife to get the default values
and now i want to install the body
parser module
and the body parser module is going to
be used to parse json between the client
side and the server side next we're
going to install express
and we're just going to use express for
routing next we're going to install
mongodb
and this is just going to be the mongodb
drivers
and this is going to help us connect to
our database
and last but not least we're going to
install the path module and we're going
to be using the path module just to
serve a static html file to the user
so now that we have our packages
installed i'm just going to go up here
i'm going to hit ctrl b to bring up the
explorer
i'm going to go to package.json i'm just
going to change the main to app.js
and this is just a personal preference i
prefer app.js as opposed to index.js
so now i'm just going to save that let's
close out of this we're going to create
two files i'm going to create my app.js
file
and our second file that we're going to
create is going to be called db.js and
this is where we're going to actually
connect to mongodb
now from here i want to code our app.js
file first so i'm just going to click
here ctrl b get rid of that explorer and
we could get rid of the terminal for now
and what i want to do is start importing
our modules that we just installed so
i'm just going to say cons express
it's equal to require express
and let's give a space here
and next what we're going to do is bring
in our body parser module
afterwards let's create an instance of
our express application so i'm just
going to say const app
is equal to express and let's call it
now we're going to tell our express
application to use the body parts and
module
and we're going to be parsing json data
sent from the client side to the server
side using the body parts module next
let's require our path module
after that let's bring in our database
stuff so i'm just going to say const db
is equal to require
db
and last but not least we're going to
have one more variable here and we're
going to call it collection
and we're going to call it a collection
to do
so we're going to have a database and
that database is going to have a
collection within it called to do and
that's going to hold our to-do's
so now let's head over to our db.js file
and now we're just going to import our
mongodb driver so i'm just going to say
cons
client is going to be equal to
require
mongodb
and we're going to require the
client from it
we're also going to require the object
id from the mongodb module so i'm just
going to say const
object id
it's going to be equal to require
mongodb
dot
object id next let's give our database a
name so i'm just going to say cons db
name is going to be equal to
and i'm just going to call it crud
mongodb
after that we're going to code our url
and this is basically the default
location of where your mongodb would be
located on your local machine so i'm
just going to type
mongodb
loco host
27017
and the last configuration that we're
going to give our database is
the options that we could pass in so i'm
just going to say
options
and we're going to be using the new url
parser
let's set that to
true so now let's actually give this a
state so we're going to be using this
db.js file to actually create the
connection between node.js and our
mongodb server
so now i'm just going to say const state
and the default state of this is going
to be equal to null
so this is going to signify that hey we
don't have a database yet
next let's actually write our connect
method so i'm just gonna say cons
connect
it's gonna be equal and we're gonna pass
in a callback
and we're just gonna say
the following
if state
dot db
so if there is a database connection
we're just going to call it a callback
if there isn't a database connection
we're going to use the client to
connect to the database
and here we're going to check if there's
any errors if there's an error we're
going to pass it back to our callback
if there's nowhere we're going to set
the state
and then we're going to call our
callback
all right so this is our connect method
let's not forget to add the semicolon
here and we got two more functions to
code so let's get to it
so the next function that we're going to
code is to get the primary key so i'm
just going to say cons get
primary key
and they're going to pass in the id of
the document
and all we're going to do is return
object id
and we're going to pass in the id that
they passed in to us
and this is going to return an object id
object which will be used to actually
query the database by the primary key
next let's actually create a method
to actually get the database so we're
just going to say get db
and i'm just going to say return state
dot db
so now let's actually expose all these
functions that we created so i'm just
going to say module that exports
and i'm just going to say get db
connect and get primary key method
all right so now i'm just going to save
this
and now let's head back to our app.js
file
so now that we have all this set up
let's actually connect to our database
so now i'm just going to say db.connect
and this is the function that we just
created in our db file we're going to
pass in a callback
and we're going to say if error
we're going to console.log
unable to connect
to database
and we're going to terminate the
application
and we should probably wrap this within
curly braces
and if we were able to connect to the
database successfully we're going to say
else
app.listen
and you could use whatever port that you
want i'm just going to use port 3000
and we're going to pass in a callback
and we're just going to say
connected to database
app
listening on port
3000
so now if i was to save this
let's
put a semicolon here and then save it
let's go open up a terminal
type cls again i'm going to type node
app
and you can see that we got no error so
that means we bypass this error
statement
and we executed our else statement so
we're connected to database and our app
is listening on port 3000. welcome to
part two of building our crud
application from scratch
so in this tutorial we're going to be
covering our server side read portion
of our crud application so we're going
to code two get routes the first get
route is actually going to send a static
html file to the user
and the second get route is actually
going to query the database for auto to
do's within our to do collection and
it's going to return that to the user so
let's actually get started encoding this
so i'm just going to go down here i'm
going to say app.get
and we're going to give it a path for
forward slash
give it this function
and then when we get down here all we're
going to do is send a static html file
so i'm just going to say res.send
file
and here's where our path module comes
in handy
dot join
now this file doesn't exactly exist yet
but we're going to be creating this
within a future tutorial
so now let's actually head on over to
our second app.get
and i'm just going to call this app.get
and i'm going to call this get to do's
then here we're going to pass in our
function
our request object our response object
and within here i'm going to say db
dot get db
now remember get db is going to return
to us our database connection
so now i'm just going to say dot
collection and we're going to pass in
the name of our collection
and i'm going to call the method find
and we want all the documents within our
to do collection
but this is going to return to us a
cursor and we don't want the cursor we
want the actual document so i'm going to
call a method called
dot 2
array
and then within here this is going to
take a callback function i'm just going
to say error
document
and let's actually move this over a
little bit
and then within here we're just going to
say
if there's an error
we're just going to console this out to
the user
but traditionally we want to send an
error message back to the user
but if there is no error
what we're going to do is first we're
going to print this out onto the console
just to make sure that we're getting our
documents back from the server
and we're going to say res.json
the document
all right so now let's actually test
this out
so i'm just going to hit
ctrl s to save let's bring up the
terminal
go to new terminal
i'm going to type cos
node app
let's bring up google chrome
i'm going to type local host port 3000
and we called it get to do's
and you can see that we get back an
empty array and that's because we don't
have anything within our database so
let's head back to visual studio code
i'm gonna hit ctrl c cancel out of that
let's start up the shell
and now i'm just gonna
go back up here ctrl b
let's find out what we named our
database so we named it
crud mongodb
so i'm just going to say use crud
mongodb
i'm going to say db
dot and let's go back to app.js and see
what we named our collection to do
so i'm just gonna say to do dot insert
and we're gonna insert a couple of
to-do's so i'm just gonna say to do and
i'm going to say clean room so let's
insert that
and let's insert clean
i don't know garage
so let's insert that all right so let's
cancel out of that
node app
let's wait for our express application
to boot up head over to chrome hit
refresh
and you can see that our to-do's are
being sent to the client side and that
it is in json
welcome to part three of building our
crud application from scratch so in this
tutorial we're going to be covering our
server side update portion of our crud
application so to get started let's
actually code our route so i'm just
going to say app.put
and i'm going to pass in forward slash
colon id
now this is going to be our route param
and id
is going to be the primary key of the
document that we wish to update
next we're going to pass in our function
so i'm just going to say request and
response
now from here let's actually get the id
so i'm just going to say const to do id
is equal to request dot
params
dot id
next what i want to do is actually get
the user's input and that's going to be
found in the request.body
the user is going to be sending us json
so i'm just going to say const
user
input
is equal to request.body
now from here let's actually connect to
our database so i'm just going to say
db.get
then we're going to call our collection
which is our to do collection
now from here i'm going to call a
function called find one
and update
and the first argument is going to be
the query object so what do we want to
find by so we're going to find by the id
so i'm just going to pass in id
and i'm just going to pass in to do
next what we want to do is pass in the
document that we want to update with
so i'm just going to say set
and i'm going to say to do
colon
user input dot to do
next what i want to do is pass in an
option and the option that i want is i
want the return original to be set to
false so i'm just going to say return
original and we're going to set that to
false
let me just move this here
now from here we're going to pass in our
callback function so i'm just going to
say error and we're going to get the
result
so now let's scroll down here
and from here we could test if there was
any errors and i'm just going to print
it out onto the console
but traditionally we want to send
something back to the user to let the
user know that hey when we tried to
update the document that you wanted we
couldn't fulfill that request
so now i'm just going to say else so if
everything went well we're going to be
sending that data back to the user in
json format so i'm just going to say
result
so now let's add a semicolon here and
let's just double check this
and all this looks good so let's
actually test this out so i'm going to
open up the terminal
and clear the terminal node app
let's start up our application
we're going to go to postman
and you can see here that i already have
this set up so the url is local host
port 3000
this is the id of one of the documents
that i have currently we're making a put
request
we're sending back json data here so you
can see here and this is the data that
we're sending back and we can make this
whatever we want so let's just change
this to
a clean
something
for tutorial
right so this is going to be our to do
and i'm going to go here and make a
request so i'm just going to hit send
and you can see that we get an error and
i right away i already know what's going
on
so when we passed in our to-do this is a
string we want an object id object
so i'm going to call db dot
get primary key
we're going to pass in the id of this to
do i'm going to save this
let's actually cancel this node app
rerun our application we're going to go
to postman again
and this time
let's actually go over the response we
got so it said the number that we found
was equal to zero and that's because we
didn't pass the right id for the primary
key so now if i send this this number
should be one and updated existing
should be equal to true
so let's send it
and you can see right here the number
that we've updated is one
this document did indeed exist within
our database so it's true and you can
see the values that we have the id is
still the same but we've updated it to
clean something for tutorial
and if we hit another thing let's
actually make sure that this update is
working
and we're going to say change to
something else
i'm gonna hit send one more time
and you can see the id is the exact same
thing
but we've changed the to do to change to
something else welcome to part four of
building our crud application from
scratch so in this tutorial we're going
to be covering our server side create
portion of our crud
application so to get started we're just
going to code our route so i'm just
going to say app.post
so we're going to be posting the to-do
that we want to insert within our
database
so we're going to give it the path of
forward slash and then we're just going
to pass in our function
the request object and the response
object
now from here what i want to end up
doing is getting the user's input the to
do that the user wants to insert inside
the database
so i'm just going to say cons user input
and we're just going to say request.body
so the client side the user is going to
post json to us and that's going to be
within the request.body next let's
actually get the database connection so
i'm just going to say
db.get bb
then from here i'm just going to say
collection
pass in our to do collection
then i'm going to call the function
insert one
the first argument is going to be the
document that we want to insert so i'm
just going to say user input and the
second argument is going to be the
callback function so i'm just going to
say error and i'm going to say result
now from here we're going to test if
there's any errors so i'm just going to
log it on to the console
now in a production environment you
would want to say something more than
just logging it onto the console you'll
probably want to display an error
message to the user
next i'm just going to say else
we're just going to send it back to the
user i'm just going to pass it as json
i'm going to say result
result
and i'm gonna say document
result dot ops
index zero
now we're actually going to test this
out so you actually see what's inside
result
and what's inside result.ops
so now i'm just going to save this
let's open up the terminal
new terminal
just going to clear it
i'm going to say node app let's start up
the server
let's head over to postman
and you can see that we have our
localhost port 3000 here with the
forward slash url
we're making a post request
and this is a json object that we're
sending back to the server
so let's say that we want to post uh
clean something so this is a to do that
we want to insert within our to-do
collection
so now i'm just going to hit send
and now you can see the response that
we're getting back from the server so
this is the result that we sent back and
this is the document so result has a
property of n so that's the number
inserted
and it says that it was okay so it was
set to one so that means everything was
inserted properly and number two
is the document that we just inserted so
you can see the to do here matches up
here
and it's given an primary key which is
listed here
so now let's actually see if this was
saved so i'm going to go back here
let's make a get request
remember what was our route we said get
to do's
i'm going to go to send
and you can see right here
that our to do
clean something was inserted inside the
database properly welcome to part five
of building our crud application from
scratch
so in this tutorial we're going to be
covering our server side delete portion
of our crud application so to get
started let's actually code our route so
i'm just going to say app dot delete
and the path that we're going to use is
an express param so i'm just going to
say forward slash
colon id and this id is going to be the
id the primary key of the to do document
that we want to delete from our database
next we're going to pass in our function
our request object our response object
within here the first thing we need to
do is get the id so i'm just going to
say cons to do id
is equal to request dot params
dot id
next let's actually connect to our
database so i'm just going to come down
here i'm going to say db.getdb
then i'm going to call the collection
method
i'm going to pass in our collection our
to-do collection then i'm going to call
the function
find one and delete
so the first argument is the query
object so we want to find this document
by the id so i'm just going to say id
now i'm going to say db.get primary key
and we're going to pass in our to-do id
the second argument is going to be the
callback function
so we're going to get an error or we're
going to get the result
so let me just fix this by adding the
curly braces here
error or result
let's see what's happening here and this
looks good
so we have our error and result
next we need to test to see whether or
not there was an error so if there was
an error that means we couldn't delete
any
so if there was an error
what we want to do is actually print
this out into the console you can also
send some kind of warning back to the
user that an error has occurred
otherwise what we're going to do
is send json data back to the user
so now i'm just going to save this
i'm going to go to terminal
new terminal
let's clear this out
node app
and our application is running if i go
to postmen
you can see that i already have this
running so
we have our get to do's route here so
i'm just going to send this again
so you guys see that these are all the
to-do's within our mongodb database
so what i need is let's say i want to
delete this to do inserting into the
database so i'm just going to copy this
primary key
we're going to go back up here
let's paste it so we have localhost port
3000 and the id of the document that we
want to delete
i'm going to go here we're going to make
a delete request
and now if i hit send let's see what we
get back
and this is the response that we're
getting back from the server so number
deleted is one
and you can see the value of the
document that we deleted
and we get okay with the value of one so
everything went fine so let's actually
prove this out
if i go back here get our to-do's one
more time hit send
you can see that the document that was
there is no longer there so this is
pretty much the server-side delete
portion of our crud application
welcome to part 6 of building our crud
application from scratch so in this
tutorial we're going to be building our
static html file that we're going to be
serving to our user so in the previous
tutorials we've created two get routes
one of them is to serve the static html
file to the user and the second get
route is to actually get all to to do's
within our database so we're going to be
focusing on this route
so to get started i'm just going to hit
ctrl b to bring up the explorer i'm
going to right click new file and we're
going to create a new file called
index.html
so now i'm just going to hit ctrl b
again get rid of that
and now i just want to head over to
getbootstrap.com so we're going to be
using bootstrap 4 in order to build our
html file
so from here you can see that bootstrap
actually gives us a starter template and
this is going to include all the css
that we need and the javascript that we
need so i'm just going to copy this
let's head back over to visual studio
code and now i'm just going to paste
this in here let's actually change the
title so i'm just going to change it to
to do
crud
application and we're going to get rid
of our h1 tag here
so from here let's give it a container
the first row is going to be where we
input our to-do user input the second
row is going to be an unordered list
which is going to be displaying our
to-do's to the user
now from here let's head over back to
bootstrap and we're gonna get our form
oh we're just gonna head over to the
search bar i'm going to type form group
and i'm just going to click that
and this is going to take us here
and this looks pretty good so we have
our label and we have an input where the
user can type his to-do's to submit
so i'm just going to copy this
let's head back over to visual studio
code and we're just going to paste this
within here
well let's actually tidy this up a bit
now we only need one of these so i'm
just going to delete the second one and
now let's just scroll over to the right
a bit and we're going to change some of
this stuff so we're going to change the
example label to to do
and we're going to give an id attribute
to our input field so we're just going
to change this from form group example
input to
to do
user
input and we're going to change the
placeholder to say to do
next we actually have to create a button
so
that the user can actually submit
and we're going to give it a class of
primary
and that's actually called a button
create
now you could call this button post
because that's the end point that we're
going to be hitting when we click this
button but i'm just going to call it
create and that's going to create our to
do
and before i forget let's actually
change what the label is for so it's not
form group example input is going to be
for our to do
all right now from here this actually
looks good so let's head over back to
bootstrap and get our unordered list
that we're going to be using to display
our to-do's to the user so from here
let's go back to our search i'm going to
type unordered
and let's click the example they give us
so this is an unordered list and you can
see that has a bunch of list items here
i'm just going to copy this let's head
back over to visual studio code so from
here let's just move over here
and we're going to paste it in the
second row
so i'm just going to tidy this up a bit
now let's give an id attribute to our
list group
i'm just going to say id and i'm just
going to call it display because this is
just going to be
displaying our to-do's to the user and
for right now i'm going to leave these
list items here
but we are going to be dynamically
adding these list items to our unordered
list
all right so that's it for our html part
let's actually start coding some
javascript so i'm just going to come
down here
and we're going to add a script tag here
next let's do a document.ready
so now let's actually get our html
elements that we attached id attributes
to so i'm just going to say const
display
and this is going to be the display for
our to-do's
i'm going to say const form and this is
going to be the id of our form
and i'm going to say const to do
user input
and this is going to be the to-do that
the user types in
so first off i think i forgot to add the
id to the form so let me do that now
right here we have our form we're going
to give it an id attribute
and we're going to call it form
and we're giving this id attribute to
the form because we want to prevent
default so when the user actually
submits we're going to prevent the
default action that takes place because
we want to make a restful call to our
server api so now let's go back down
here
so next we're going to code several
helper functions so i'm just going to
say const reset
to do's input and this is going to reset
the to do user input field
next we're going to create a function
called build ids and this is going to
build unique ids to give to our html
elements
and it's going to take in a to-do
document
and we're just going to return an object
with our id so i'm just going to say
edit
id
and edit id is going to be attached to
our edit button
so we can attach a click event to that
edit button
and you can see that we're taking
advantage of the primary key that we get
from our to do document to make it
unique
next we're going to code delete id
and delete id is going to be attached to
our delete button so we can attach a
click event to our delete button
next we're going to create a list item
id
and this is going to be the id of the li
element within our unordered list
and the last id that we're going to
create is going to be called to do id
and this is going to be the id of our to
do
so now let's code another helper
function and this function is actually
going to build the template the list
item that we want to append to our
unordered list
so i'm just going to say const build
template
and it's going to take in two
parameters i'm going to pass in our to
do
and the ids
and we're just going to return a string
that will be appended
so from here let's actually scroll up
and let's get our li element so i'm just
going to copy one of these
and realistically we could just delete
this
now let's go back down
let's paste this one within here let's
delete this
now let's give this li element an id so
we're just going to say id
and it's going to be equal to ids dot
list item id
next let's give it a row
and we're going to make each column of
size four
so the first column is where we're
actually going to be storing our to do
so i'm just going to give it an
attribute of id
and we're just going to say ids dot
to do id
and we don't want to actually display
our to-do to the user i'm just going to
say to do dot to do
next let's go back to the last column so
i'm just going to give this an
additional
class and i'm just going to call say
text to the right so we want our buttons
to be to the right of this
and we're going to have two buttons
within here so i'm just going to say
button
type
equal to the button
we're going to give it a class of
secondary
and we're going to give it an attribute
of the id that we created
and the button is just going to say edit
so now that we have our edit button
let's copy this
and now it's time to make our delete
button so we're going to change this
from secondary to the danger class
and we're going to change ids to
delete id
and the name of our button is going to
be called delete
let me just take a look at this to make
sure i typed out everything all right
and this looks good and the last helper
function that we're going to be coding
is called display to do's and that's
actually going to display our to-do's to
the user i'm just going to say cons
display reduce
and we're going to pass in data and this
data is going to be an array of to-do's
so i'm just going to say data.for
each
and we're going to get a to-do out of
each of these
next let's get the ids of each to do so
i'm just going to say let ids equal
build ids and we're going to pass in our
to-do
next let's actually append each of these
list items to our unordered list so i'm
just going to say display dot append
and we're going to call the build
template method that we just created
and we're going to pass in our to do and
our ids
afterwards we're going to call our edit
to do function now we haven't created
this function yet
and we'll do so in the next tutorials
but basically the edit to do function
and our delete to do function is going
to add a click event to our edit button
and our delete button i'm just going to
say to do
and we're going to pass in ids dot
do id
and ids dot
edit id
and likewise we're just going to say
delete to do
and we're going to pass in our to do
our ids dot
list item id
and ids dot delete id
so let's add a semicolon here
and this is pretty much where i want to
leave you guys at so we created our html
file
and we've added all
our helper functions that's going to
help display our data to the user
welcome to part 7 of building our crud
application from scratch so in this
tutorial what we're going to do is
display our to-do's to the user by
making a http get request using the
fetch api
so if you remember from our previous
tutorials we coded this get route this
get to dues and the job of our get to
dues route is to actually get all our
to-do's from the database and return it
and it's going to be returned within an
array so now if i head over to our
index.html
what we're going to do is have the fetch
api call this get to do's route
i'm just going to go here
and i'm going to create a function
called get to do so i'm just going to
say const
yep to do's
and within here we could use the fetch
api so i'm just going to say fetch
and it's going to be the url or the
endpoint that we want to hit so i'm just
going to say get
to do's the next argument is going to be
the type of method that we want to use
so we coded a get method
next we could call the then method
and we're going to get a response back
from the server
and i'm just going to say return
response.json
and this is going to parse the json for
us but this is going to return a promise
and when you return a promise we could
chain that promise
i'm just going to call it then method
once again
pass in our data
and now here i'm just going to
console.log the data and we're going to
pass this data this array of to-do's
to our helper method so i'm just going
to call display
to do's and we're going to pass in our
data so now let's just add this
semicolon here
and let's actually invoke our get to
do's method
and now if i was to save this
and let's open up a terminal and i'm
just going to clear it i'm going to say
node app let's start up the server so
now let's open up our browser
so now from here let's just type
localhost port 3000
and you can see that our to-do's are
being loaded so let's bring up the
developer tools so i'm just going to hit
f12
and we go to our console you can see the
array that the server is sending us
so if we open that up you can see our
to-do's
we have our primary key and the to do
now let's head over back to visual
studio code to see how this is working
so now if we come back here we can see
that our array of to-do's is being
passed into our display to-do's
let's take a look at what display
to-do's is doing so display to-do's is
actually taking an array of to-do's it's
building its unique ids for our html
elements
and it's calling build template now
build template is going to be used to
build our list element that we're going
to add to the unordered list so you can
see that happening here once we build
this html template we're returning it
and is going to be appended to our
unordered list so that's pretty much how
we are displaying our to-do's to the
user
welcome to part 8 of building our crud
application from scratch
on this tutorial we're going to be
making http post requests using the
fetch api
so if you remember from our previous
tutorial we coded this post route and we
just gave it forward slash it's gonna
take data from the users and we're gonna
have to post data back via the body and
you can see that it returns two things
the result whether or not we
successfully deleted the item or not and
it returns back the inserted document
that we just inserted so let's head over
to index.html and let's actually code
this so from here we're going to use our
form that we have up here
so this is our form and what we want to
do is prevent the default form
submission so we're going to come down
here
and i'm just gonna say form dot submit
and this is gonna take in a function and
it's gonna have an event and what we're
gonna do is say e dot prevent default
from occurring
next we're going to call it a fetch api
so i'm just going to say fetch
we're going to use our endpoint of
forward slash
the next argument is going to be our
options so the first option is we're
posting data back to the server i'm just
going to say post our second property is
going to be the body
what we're sending back to the database
so i'm just going to say json.stringify
and we're going to send back our to-do
so we're just going to use to do
use our input and we're going to get the
value
that our input field has at the moment
so now let me just move this over here
and the last option is we're gonna have
to pass in headers
and what a header is is it tells the
server what kind of content you're
sending back to it so i'm just gonna say
content
type
and we're sending back json
now from here let's call the then method
so i'm just going to say then
we're going to get our response back
from the server
we're going to return that response.json
which is going to be a promise that
parses the data for us
we're just going to call it then
on the promise that's being returned
and we're going to get our data back
next we're going to have to test to see
whether or not we successfully inserted
the document i'm just going to say if
the data result dot ok is equal to 1
and
data dot
result n
is equal to one
that means our to do was successfully
inserted into our database
i'm just gonna say let ids equal to
build ids
and we're going to pass in our document
next we're going to call the display
method so this is going to append a new
list through our unordered list
and last but not least we're going to
have to attach
our click events to our edit button so
i'm just going to call edit to do
which is a function we haven't created
yet
and we're going to pass in our to do
our to do id
and the id of our button
then we're going to have to attach event
to our delete button as well
we're going to pass in our to do
the list item id
and the reason we're passing in the list
item id is because we need the id of the
list that we want to delete
and we're going to pass in the id of the
delete button
so for now i'm just going to comment
these two out because they don't exist
at the moment
right now we have display.pen
and this looks good to me
and last but not least once this
successfully happens what we want to do
is actually reset our to do's input
so let's actually test this out so i'm
just going to hit ctrl shift backtick
let's clear the terminal node app
let's open up a browser so now let's
actually test this out so i'm just going
to come up here and
testing
post
i'm going to click the create button
and you can see that our to do was
successfully posted to the database so
i'm just going to hit refresh to see if
it actually worked and you can see that
our data is persisting so that's the
basics of using the fetch api to post to
the server and welcome to part nine of
building our crud application from
scratch so in this tutorial we're going
to be making a http delete request using
the fetch api
on the previous tutorials you can see
that we coded our app.delete route and
it's using a route parameter we get that
id of the to do that we want to delete
here
and then here we call the find one and
delete function we pass in our primary
key or the id
and what we end up getting is the result
whether or not we successfully deleted
the to do document within our collection
now let's actually head over to
index.html
and let's actually code our delete to do
function so now from here i'm just going
to say const delete to do
and it's going to take in three
parameters it's going to take a to do is
going to take the list item id and it's
going to take the delete id
now to do is the document that we want
to delete list item id is the id of the
list element within our unordered list
that we want to delete and the delete id
is the id that we've given to our delete
button so now let's actually code this
out first we need to get our delete
button so i'm just going to say let
delete button
is equal to this
next let's actually add a click event to
our delete button so i'm just going to
come down here
delete button dot click
and we're going to pass in our click
handler
and within here let's actually call our
delete route using the fetch api so i'm
just going to say fetch
and we're going to pass in our route
next let's actually pass in our options
so we're actually making a delete
request so i'm just going to say method
and we're going to pass in delete
now from here let's call it a done
method to actually execute this fetch
function
i'm going to say then
where we're going to end up getting back
is the response from the server
next we're going to return that response
and we're going to call the json method
on it and this is going to return to us
a promise so now we could promise chain
i'm just going to call then again and we
should get back our data that is fully
parsed
now from here let's actually test to see
whether or not we successfully deleted
the to do
i'm just going to say if
is equal to one
that means we successfully deleted our
to do so now we need to remove the li
element from our unordered list so how
do we do that well we have our list id
and we're just going to call the method
remove so this is going to remove our li
element from our unordered list let's
actually add a semicolon here
all right now from here let's go down to
our display to do's
and
all right so we already have the our
delete to do uncommon it so this should
work so now i'm just going to save this
let's go back to app.js
let's actually open up our terminal
and from here let's actually run our
application node app and you can see
that application is up and running and
now let's head over to our web browser
and let's actually test this out
so from here you can see our to-do
application is up and running so i'm
just going to refresh this just to
triple check
and what we want to do is actually hit
our delete button to see if it works so
i'm just going to hit delete and you can
see that testing post is gone if i hit
delete again you can see clean room is
gone and if i hit refresh
you can see that this does persist onto
the database and that those to-do's are
actually deleted from our database
and welcome to part 10 of building our
crud application from scratch so in this
tutorial we're going to be making a http
put request using the fetch api so in
the previous tutorial we coded our
app.put route so this is the endpoint
that we're going to hit
we're using route params and this is
going to be the id of the document that
we want to edit
we're also sending data back via the
body as you can see here and this is
going to be the data that we want to
update with so right here you can see
that we are finding by the id so this
gets the document that we want to update
this is updating the document here
and if you scroll here you can see that
we're sending back the result whether or
not we were successfully able to update
the document or not so now let's
actually head over to our index.html
file and actually code this
i'm just going to come down here and i'm
going to call the function edit to do
and it's going to take in three
parameters first is going to be the to
do second is going to be the to do id
and third is going to be the edit id
the first parameter to do is obviously
the document that we want to edit to do
id is the id of the to do
and edit id is the id of the button now
let's just come down here
and now from here what i want to do is
actually get our button
and once we get our button what we want
to do is attach a click event to it so
i'm just going to say edit
button dot click
pass in our callback and from here we
can use the fetch api to hit our
endpoint in our server i'm just going to
say fetch
and the endpoint is forward slash
and the id of the to do that we want to
edit
the second argument is going to be our
options so we're just going to say
method
and we're going to set that to a put
request
next we're going to set our headers
and our headers are going to be set and
they're going to tell
our server that we're sending back json
all right now from here let's set up one
more property
and it's going to be our body so what
we're going to do is actually send what
we want to update our document with
i'm just going to say json.stringify
and this is going to convert our
javascript object into json for us
and i'm just going to say to do
and we're going to get the user's input
now that we have our options set up
let's call the done method to execute
this fetch request
here we're going to get our response
from the server now we're going to
return that response and we're going to
call a function called json
now this response.json is going to
return a promise so i'm just going to go
down here and i'm going to call it then
and it's going to give us our parsed
data back so now i'm just going to test
to see whether or not we successfully
updated our to-do i'm just going to say
if data
dot okay is equal to one
that means that everything went okay and
now what i need to do is actually get
our to-do element so i'm just gonna say
let
to do index
equal
equal our to-do id
next what i want to do is actually set
our data so i'm just going to say to do
index
html is going to be set to the data that
we just got back from the server
now what i want to do is reset the
user's input so i'm just going to call
the reset to do input function
so now i'm just going to scroll down
just to check to see if we have
our edit to do is being called
and it's being called here all right so
let's actually test this out in our web
browser to see if it actually works
i'm just going to save this
i'm going to open up the terminal
i'm going to clear it
node app
and now let's head over to our browser
so from here you can see that we have
our application running just gonna hit
refresh
just to make sure
and right here i'm just gonna type
whatever
and now i'm gonna hit edit
and you can see that our to-do document
was updated so i'm just going to hit
refresh again
let's see if it persists to the database
and you can see that it is persisting
and let's try one more just to make sure
and you can see that it is indeed
working welcome to part 11 of building
our crud application from scratch so in
this tutorial we're going to be doing
some user input validation using joy so
to get started let's actually install
joy
i'm just going to come down here mpm
install joy
and now that we have our joy package
installed let's actually include it
within our application so i'm just going
to come up here i'm going to say const
joy is equal to require
joy
now from here let's actually develop a
schema for a to do document now if you
don't know what a schema is it's
basically a blueprint that an object has
to follow so let's come down here
and let's define our schema i'm just
going to say cons schema
is equal to joy
dot object
and now we want to define our keys
now from here we're going to give our
properties and the type that they should
be
so for example we only have really one
object within this tutorial and that's
what to do
so here i have a to do
and the type that this should be is of
type string so i'm just going to say joy
dot string
and we're going to make it required
so when the user inputs his to-do this
schema is going to make sure that it's a
string and that it's not empty so
required means that if the user tries to
submit a to-do that's empty we're going
to get an error if the user tries to
submit a number instead of a string
we're going to get an error but that's
how we're going to validate user input
so i'm just going to end a semicolon
here
now let's take a look at our route
so what we want to do is validate
anything we get back from the user so
for example
this route parameter here
we would want to validate now this is
not a to do object but this is the
primary key but anything the user sends
back to us you would want to validate so
this request body we would also want to
validate for
and if we take a look here request body
here
request params here
and that's pretty much it so for this
tutorial i'm going to do one example
with you guys and you guys could pretty
much figure out how to do the rest of
yourselves so i'm going to choose to do
our post route so we're going to
validate the user input sent by the body
so from here i'm going to call joy dot
validate
and validate is a method which is going
to take three arguments the first
argument is the object that you want to
validate so we're passing in user input
the second argument is the schema or the
blueprint that you want to check against
user input
so we're just going to pass in our
schema we just created and the third
argument is our callback function
and we get the error and we get the
result
now from here i'm going to say if
there's an error what i want to do is
we're going to create an error so i'm
just going to say const
error
is equal to new
error
and we're going to pass in the message
that we want to display to the user i'm
just going to say invalid input next i'm
going to give this error a http status
code so i'm just going to say error dot
status
and i'm just going to set that to 400.
next what i want to do is call the next
method and that's because we're going to
have a middleware handle our errors
i'm just going to say next and we're
going to pass in the error we just
created
so from here
since we're using a middleware we have
to pass in next as a param up here so
now from here
let's code our else statement so if
there's no errors with the user's input
what do we want to do so i'm just going
to say else and what we want to do is
actually get our database i'm just going
to cut this out i'm going to paste this
in within here
and now here what we can do is some more
error handling so right here i could
come here instead of just printing this
out to the console what i could do is
exactly what i did above i could copy
this
let's paste this in here
and instead of saying invalid input
i could say
something like this
i could say failed
to insert
to do document
and we're going to leave the status quo
the same and we're going to call our
middleware error handle here
so from here we could go down to this
else statement
and we're going to have to pass in a
couple more things and this is just to
make it easier for the front end so for
example we are going to pass in a
message
and this message is going to be
displayed if we successfully insert it
into the database so i'm just going to
say successfully
insert it to do
the next thing that we're going to pass
in is an error property
and we're going to set that to null so
that means that there was no errors and
we're going to be using this to test and
our front end
so this looks good to me
so now let's code our custom error
handler our custom middleware i'm just
going to go down here
and
[Music]
let's put it here and now i'm just going
to say app.use
and we're going to pass in our error
object
next is going to be the request object
the response object and the next object
now here what i could do is actually
send a response back from the server
well now i'm just going to say
res.status
and we're going to set the status to the
error status that we set in our post
route i'm just going to say error dot
status
next i'm going to call the json method
so we're going to be sending this back
to the user
and from here i'm going to pass in an
error property and this is going to be
an object
and it's going to have a property of
message and we're going to pass in our
error message so i'm just going to say
error
message
all right now from here what i want to
do is
let's head over to bootstrap and let's
get our alert that we're going to be
using to display to the user so let's go
to bootstrap and get our alert that
we're going to be using to display to
the user whether or not our post request
was successful or not so from here i'm
just going to go to search i'm going to
type alert
and you can see that we have a bunch of
alerts here what i want to do is get our
success alert and
we're going to be using this to display
when we successfully posted something
and i want to use the danger alert when
we get an error
i'm just going to come down here and we
only need one of these i'm just going to
pick up the danger one i'm going to copy
this and i'm just going to head back to
visual studio code now from here i'm
just going to save our app.js file i'm
going to go to index.html
and what i want to do is actually put
this underneath our display so right
here
i'm just going to paste this here and
let's actually steal some code from our
display i'm just going to add a break
here
just to give us some space
i'm going to copy this
i'm going to paste this here
and
what i want to do is get rid of this
unordered list and we're going to be
putting our
alerts here so i'm just going to copy
this
paste this in here
let's tidy this up a bit
and what i want to do is actually get
rid of this and let's add an id
attribute of message
all right from here let's actually
scroll down to our script tag
and what we want to do is actually get
our message that we just gave an id for
i'm just going to say const message
and we're going to be getting our id
now from here i'm just going to say
message.hide because i don't want to
show it yet
next thing i want to do is create a
helper function so i'm just going to
come down here i'm just going to say
const display message and the first
parameter is going to be a flag whether
or not we should display the success
alert or the danger alert the second
argument is going to be the message that
we want to display
now from here i'm just going to say if
flag so if this is true
and let's actually make a comment so if
we had a successful post
what we want to do is i'm going to say
message dot remove class
and we're going to remove the alert
dash danger class
and i'm just going to copy this
paste this and we're going to change
this to add class
and we're going to add the success alert
next i'm going to say message.html
and we're going to pass in the message
that we want to display and i'm going to
say message.show to actually display our
alert so now from here since we have a
success we need a else statement to
display the failure so i'm just going to
say else and now i'm just going to copy
all this and pretty much we're going to
do the opposite so instead of saying
remove danger class
we're going to remove the success class
and here we're going to be adding the
danger class and these two lines of code
are going to be the same
so actually by coding this i actually
forgot to remove this part from our html
so
yeah so let's get rid of this
and we have our alert and we have our
message okay so that looks good
so now let's actually go down to our
post
but here's our post
and from here what we're going to do is
actually wrap this if statement so i'm
just going to come up here
i'm going to say if and we're going to
use the not symbol so data.error
so there are no errors what we want to
do is execute this block of code
but what we want to do is actually
get our alert to display i'm just going
to say display message and we're going
to set this to true because that means
that everything went okay and then we're
going to pass in the message that we
want to display
i'm just going to say data.message
and from here i'm going to make an else
statement
i'm just going to copy this
paste this here instead of true we're
going to say false and let's display our
error message so i'm just going to say
data dot
error dot message
now from here let's actually go back
down we do have to reset our to do input
so i'm just going to call that
so now let me just save this and let's
actually test this out
so i'm just going to come down here node
app
and let's see what we got wrong
so joy dot string dot require
says require is not a function
let's go back to our app.js
and it's probably not required it's
probably required so now let's save this
let's clear the terminal node app
all right so now our application is up
and running and now let's actually test
this in the browser now we have our
to-do application up and running so now
if i was type a string and hit create
you see that we get successfully
inserted to do
and if i was to have an empty string and
hit create
you can see that nothing's updating so
that means that we made an error so now
let's head back to visual studio code so
from here let's just go back to our
index.html file let's actually take a
look at this so
we have our if statement here
and that's pretty much the reason
because this if block is only supposed
to be wrapped around this if condition
but we also have our else block here so
this code isn't being executed
so let's actually
copy this
let's get that out of there
and from here
you just paste that here
and we don't need two resets here
so now let's say this and now let's head
back to the browser i'm just going to
hit refresh to reload the page
and we could test this one more time
so we inserted our to do okay now we
have a blank user input
hit create
and you can see that we get a warning
invalid input that's pretty much how you
can validate user input using joy for
our to-do application