Complete CRUD Application with Node, Express & MongoDB

hey everyone and welcome back to daily tuition in this complete tutorial you will understand how to create the crude operation using express and mongodb database so we're going to create this user management system to manage the user i'm going to show you how to store and retrieve all this data in the mongodb cloud database now let me show you how this application work the application is very simple to use when you open the application you will get the list of the user from the database now let me create a new user so i'm going to click on this new user button when you click on it you'll have a form to create a new user i'm going to create a new user so i'm going to specify name to this user then i'm going to specify email then i'm going to specify gender female and status inactive i want to create this user so i'm going to click on this save button when i click on it i'm going to have the alert message data inserted successfully when i click on ok button this will receive the form and when you back to the all users here you have your user in case you want to update the user just click on this edit button i want to update this user so i'm going to just click on this edit button when i click on it the form will auto field all the user data inside this form so you just need to specify the updated data inside this form so i want to just update this email so here i'm going to specify test.com and i'm going to change this status to active now i want to update this data so i'm going to click on this save button when i click on it here i'm going to have a message data updated successfully when i click ok and back to the all users here i have the updated data now once you understand how to create and update the record let me show you how to delete the record from the database so i want to delete this record i'm going to click on this delete button and when i click on it you will have a message do you really want to delete this record yes i want to delete it so i'm going to press on this ok button when i click on it you will get an alert message data deleted successfully when you press ok the record is now successfully deleted from the database when you finish this tutorial you will be able to work with server and client side you will completely understand how to create an api how to make the ajax request as well as you will understand how to work with xio's library you will be able to work with easy as template engine and you will understand how to work with different http methods and so on if you are a beginner then this is what you need follow me and join this amazing journey before wasting your too much time let's get started so let's get started and see how to create this beautiful express crude application using node so what i'm going to do is i'm going to open the visual studio code editor and inside it i have this tutorial folder inside this tutorial folder i'm going to create another folder to create my project and i'm going to name this folder crude app if you want you can specify any name to this folder that doesn't matter i'm gonna name this project crude app i'm gonna create this folder and inside this folder i'm gonna create a new file and i'm gonna name this file server.js this file is going to allows us to start the server so i'm gonna create a server.js file you can name this file anything and just after that i'm going to just initialize this project as npm package so i'm going to open my terminal and enter into my crude application directory so here i'm going to say cd crude app when i press enter this will enter into my crude application directory and here i'm going to say npm init this command will ask me few questions about this package.json file so it will just ask me to specify the name for this package i'm going to specify the default name groot app leave the version as it is here i'm going to say crude application with express and mongodb i'm gonna specify description just for that i'm gonna specify entry point server.js i'm gonna leave this as it is test command is going to be as it is i'm gonna leave this git repository specific keyword crude and i'm gonna say here mongodb press enter and specify my name here as author i'm gonna specify the default license and press enter to create package.json file and initialize this project as npm package as you can notice i'm going to have here a file package.json and here i have my information as you can notice here i have the start command node server.js so when you execute this command it's going to execute this server.js file now just for that what i want i want to install some external module inside this project so i can use it in this code application so i'm going to open my terminal clear the screen and here i'm going to say npm i for install and then i'm going to specify my packages so i'm going to install few packages at the same time using a single command so here i'm going to say express in this project we are using express to rapidly develop the node application so here i'm chris express then i'm gonna install morgan as you know morgan help us to log a message every time when we make a request just after that i'm gonna install nodemon make sure you specify space between these modules so i'm going to specify here nodemon nodemon allows us to restart the server automatically when we make changes in the project just after that i'm going to install ejs which is the template engine i'm using for this project egs allows us to create dynamic html just for that i'm going to install body parser body parser module allows us to serialize the data and access the form data using body property just out of that i'm going to install dot env dot inv module allows you to separate the secret from your source code this is useful in collaborative environment where you may not want to share your database login credential with other people instead you can share the source code while allowing other people to create their own dot env file so once i have my dot env just after that we are going to install mongos using this module we are going to connect this project with mongodb database and at the last i'm gonna install axios library this library makes it easy to make a request in express application so i'm gonna say here axios i want to install all these libraries as dependencies so i'm gonna press enter now as you can notice we have these packages inside this node modules folder if you open the package.json here you can notice in the dependency section you have all your packages let me just clear the screen and just space over here a start command so instead of node server.js here i'm going to say nodemon server.js node mod modules allows us to restart the server whenever we make a changes so i'm going to say here nodemon save the changes back to the server.js and now let's create the project structure now let's take a look at how to create project structure of this cloud application so whenever you make a big project in node or in x-ray application you should have the project structure like this in your application you should have the asset folder in the root directory where all the assets of your project is located so inside this crude application inside this code app folder i'm gonna create a new folder and name this folder assets where i'm gonna have all the assets of this project inside this asset folder i'm gonna create a new folder with the name css i'm gonna create a css folder and inside the css i'm going to have my css file just for that inside this asset folder i'm going to create another folder with name js so inside the js folder i'm going to create all the client-side javascript files just for that inside this asset i'm going to create another folder with name img so inside this img folder i'm going to have all the images which we're using in this project i'm not using any image here but this folder is just for understanding just for that once you have this asset folder once you complete this asset folder structure minimize this asset folder and inside this crude app i'm going to create another folder so here i'm going to click on this new folder icon and name this folder views inside this views folder i'm going to put all the html files i'm using the embedded javascript template engine to create a dynamic html so i'm going to put all the html files inside this views folder this is the default folder of view engine of express just for that i'm going to create here inside this group application i'm going to create another folder i'm going to name this folder server and inside this server folder i'm going to have all the server side code for example inside this folder i'm gonna create my services model mongodb connection and so on once you have your server folder inside it i'm gonna create few folders because we are following the mvc pattern of application i'm gonna create few folders inside this server folder mvc is application design pattern that separates the application data and business logic from the presentation mvc stands for module view and controller the controller mediates between the model and view so in the mvc pattern we have model controller and view you can notice we already have the view folder here so i'm not going to create that again and now let's create the controller and module folder inside this server folder so here inside the server folder i'm going to create a new folder and name this folder controller just start that inside this server i'm going to create another folder with name model inside this model folder we are going to work with mongodb data here we're going to perform the data validation processing data creating scheme and so on just for that we have controller inside the controller we're gonna deals with user request for resources from the server so here in this controller we're going to create a different functions that's going to send the resources to the user so as you can notice we have this mvc pattern m for model v for views and c for controller now just for that inside this server i'm gonna create another folder this folder is for database connection so i'm gonna create a new folder and say database it is always a best practice to separate your code so you can maintain it very easily so once i have this database folder just after that i'm gonna create another folder inside the server and i'm gonna name this folder routes inside these routes i'm gonna create my different routes just for that i'm gonna create another folder inside the server and name this folder services so as you can notice your project structure is now completely ready inside your project you should have your asset folder the server folder and the views folder now once you have the project structure something like this let's create the http server so let me just minimize these folders and in the server.js i'm going to create my http server now to create the http server i'm going to just back to my server.js file and inside it i'm going to first require the express module so here i'm going to say constant express and call the required function so using this function we can use the express model so using this statement we can use the express module just for that i'm going to create my app so here i'm going to say constant app is equal to express like this i'm going to initialize this app variable as express application just after that here i'm going to just create my default route so here i'm going to say app dot get and here in the single code i'm going to specify root route so when the url match to the root route i'm going to execute the callback function here i'm going to say request and response i'm going to call the arrow function of es6 and here i'm going to say response.send and i'm going to send the response crude application to start that i'm gonna just listen the server on port 3000 so i'm gonna say here app.listen i'm gonna listen this board on three thousand so here i'm gonna say three thousand and just out of that as a callback function as a second argument to this listen method here i'm gonna call a callback function like this and say console.log and using the backtick operator i'm gonna say server is running on http localhost and then specify colon dollar sign and then specify my port name here i'm going to specify 3000 like this save this file open the terminal and as you know we have the start command inside this package.json file here i'm going to execute this command and execute this server.js file so here i'm going to say npm start so this command will execute this nodemon server.js and start the http server when i press enter you are going to get a message server is running on http localhost 3000. let me just click on this link and open my application in the browser oops i think i misspelled the l here i misspelled this billing localhost save the changes let me just click on this link and as you can notice we're gonna have crude application as it responds now once your server is successfully started let me just make some changes inside this http request what i'm going to do is just after this app i'm going to create here a variable constant port is equal to and i'm going to store my all details inside the dot anv file so here i'm going to say process dot env dot port and if the variable of this dot env file is not available i'm going to just pass the default value h0 and instead of this hardcoded 300 value i'm going to pass this variable like this save the changes open the terminal as you can notice the server is now started on port 8 8080 because as you know we don't have this port variable inside dot env file so what i'm going to do is i'm going to create dot env file and create a variable inside it and specify value to it right now it's going to specify the default value to this port variable which is 8080 so now your server is running on this 8080 port i'm going to just create a new file inside this cloud application and name this file config dot n v and inside this file i'm going to create my port variable creating a variable inside env file is super easy you just need to specify the variable name and its value using equal to sign so here i'm going to say port equal to sign and then specify the value 3000 so i'm going to specify 3000 value to this port variable let me just save the changes back to the server.js and now let me just save this file as well but as you can notice it's still getting the default port name so what you need to do is you need to specify the path of this config file and you need to inform the express server to use the variable of this dot env file so just out of this constant express i'm going to say constant dot env is equal to require and i'm going to just call dot inv module like this and just before this port variable here i'm going to say dot env dot config i'm going to call the method config and inside this parenthesis i'm going to specify the path of this config file so we can use the port variable so here i'm going to say path and then specifying the single code config dot env as you know we have this config dot env file inside the root directory so i don't need to specify any relative path here save through changes so as you can notice this will just start the server on port 3000 dot nv module allows you to separate your secret from your source code this is very useful when you work with collaborative environment when you want to share your code with other people so instead of sharing your credential you can share the source code while allowing other people to create their own dot env file now once you understand how to create dot env let's move on so just after that just after this dot a and b down here i'm going to just add the morgan module so up here i'm going to say constant morgan and call the require statement and require the morgan module just down here just after this dot env i'm going to create here a command log request so as you know morgan module allows us to log a request on the console whenever we make a request so here i'm going to say app dot use and specify the morgan module and inside it i'm going to call the tiny token so let me just reload the browser back to the editor and as you can notice this will just print the type of request the path and the response millisecond now once you understand how to print a log message using morgan let me show you how to add body parser inside this project so let's see how to do it so let me first stop the server because we don't need it and now let me add body parts and module now let me just add the body parts and module so down here i'm going to say constant body parser is equal to require and require the body parcel model and just out of this morgan down here here i'm going to create a command and say pass request to body parser so down here i'm going to say app.use and inside this parenthesis i'm going to call the bodyparcel module dot url encoded method and in the parenthesis i'm going to specify object with property extended true so this will just pause the request of the content type from url encoded so once you link the body parser module just down here i'm gonna just set the view engine so here i'm gonna say set view engine and as you know in this project i'm using embedded javascript so here i'm gonna say app.set and in the parenthesis i'm gonna first specify the view engine parameter so we can space out the view engine to this express application and then we need to specify the type of view engine i'm using so in the double quote i'm going to specify the extension of real engine i'm using ejs view engine so i'm gonna specify here egs if you're using pug or html you can specify here html or bug that's up on you i'm using the ejs template engine so i'm gonna specify the template name egs just for that if you create all your egs file inside this views folder then you don't have to specify the folder name to this hs template engine but if you change this views folder for example you create another folder inside this views folder and put all your ejs files inside that folder then you need to inform express to set that folder as a default view engine folder so to do that you need to call a statement app dot set and in the parentheses you need to specify views as a first argument and then specify the path of that folder so what you need to do is you need to call the path module of node application so here i'm gonna say constant path is equal to require and require the inbuilt path module as you know i did not install this path module using npm because the path module is inbuilt in node application you just need to require it so once i require the path module just down here at the second argument i'm going to say path dot resolve i'm going to call method of path result and then i'm going to specify here director name so this will just return the project directory name to this resolve method just out of that i'm going to specify comma here and in the double code you need to specify the folder name where you put all your egs files so for example if you put all your ejs files inside ejs folder then you need to specify here views forward slash ejs i'm not going to create any dedicated folder for this egs file so i'm not going to add this statement here so i'm going to comment it this is just for reference now just for that once i specify the view engine for this application just down here i'm going to just load my asset so here i'm going to say load assets i'm going to load my asset using middleware method yes so i'm going to call here use method and i'm going to first specify the virtual path for these assets so as you know we have assets inside this asset folder so i'm going to space up a single code and specify path for this css folder so here i'm going to say css then specify comma and then say express dot static i'm going to call the static method of express i'm gonna say path dot resolve and call the directory name so this will return the current project directory name specify comma and in the double quote i'm gonna say assets i'm gonna specify this this asset folder name forward slash css so now if you create the style.css file inside this css folder you need to just specify css forward slash style.css now for example let's say you have style.css file inside the css folder here inside the css i'm going to create a file style.css and now you want to access this file so what you want to do is you just need to specify a path like this css forward slash style dot css that's it you don't need to specify the project name the asset folder and so on you need to just specify the virtual path and the file name that's it now once you understand how to add this css styling let me just load the images and javascript files so i'm gonna just duplicate this statement so i'm gonna press shift alt down key two times and here i'm gonna just change this css to img this css became img and this became js like this now as you can notice we successfully load the asset inside this http server next we're going to create views for this express application now let's take a look at how to create html templates for this crude application as you know i already set up the view engine ejs to this code application so let's create dot easiest files to create html template so what i'm gonna do is inside this views folder i'm gonna create a new file and i'm gonna name that file index dot ejs as you can notice i'm gonna specify the extension ejs this is not the html file if you want to learn more about ejs you can head on to ejs website right here hs dot co ejs stands for embedded javascript templating from eggs.go you can get started with egs and understand how to work with easier's template let me just close this tab back to my project and inside this index dot egs i'm going to create a simple html5 snippet so i'm going to press exclamation mark and press tab this will simply create the simple html5 snippet and here to this document i'm going to specify title crude application just out of that inside this body down here i'm going to create the header so i'm going to first create here html command and say here header let me just close this command to indicate this is the closing header like this and inside this header i'm going to create a header tag with id so i'm going to specify here hash specify id name header when i press tab i'm going to have header tag with id header inside this header i'm going to create a now tag and inside this now i'm going to create a division tag with the class container so here i'm going to say dot container when i press tab i'm going to have a divisor tag with the class container just after that inside this container i'm going to create a div with the class text center i'm going to create all these classes in the style.css file so don't worry about that so when i press tab i'm going to have this text center class to this division tag inside this div i'm going to add anchor tag i'm going to specify forward slash this refers to the root route of this application just out of that here i'm going to specify class now brand and text dark i'm going to create these classes in the style.css file here i'm going to say user management system save the changes so let me just open my terminal here i'm going to say npm start and press enter my server is turning on http localhost 3000 this will return the response crude application now what i want i want to return the response of this html file instead of this response so instead of this response i want to render this index.ejs file so what i'm going to do is here i'm going to call a method of response object here i'm going to say response dot render this method allows us to render an html file so i'm going to say here render in the single code i'm going to specify the file name here i'm going to say index.ejs you don't have to specify extension for this file name because we already initialized this view engine with ejs extension and just are that don't forget to specify semicolon back to the browser and reload it as you can notice i'm going to have the user management system text so this will just load the index file on the root route let me just change few things inside this index.ages i'm going to just get this header and put that header in the separate dedicated header file and bring this footer and put it inside a separate footer file so you can manage it more easily what we are going to do is inside these views i'm going to create a new folder and i'm going to name this include if you want you can name this folder anything inside this folder i'm going to create a new file with underscore to indicate this is the partial file of index.hs so here i'm going to say underscore header dot ejs to indicate this is the partial file i'm going to start this file name with underscore in this header i'm going to just grab this header right from here from this closing header cut it from this index.js and paste it inside this header.hs save the changes back to the index.ejs and grab this closing body and this html cut it right from here create a new file inside this ink load and name that file underscore buddha dot ejs and put this closing body and html inside this file back to the index dot and here i'm gonna include both these files so i'm gonna just first add a command an html command and here i'm gonna say include header don't forget to close this command to indicate this is the closing header section of this template now inside this command i'm going to add my ejs syntax to include both these files so here i'm going to call each syntax like this and inside this ejs syntax i'm going to say include in the parentheses i'm going to specify the path of my partial files so in the single code i'm going to specify include forward slash then specify the header file like this and as you know we have the prefix underscore so i'm going to specify underscore as a prefix for this file you just start that i'm going to copy this statement and paste it down here change this header to footer like this and change this header file to footer like this save the changes and if you open your terminal then you can notice you make the changes inside your ejs files but the server is not restarted because the nodemon is only restart when you make changes in the js files so we need to inform nodemon to restart the server whenever we make changes inside these ejs files but instead of informing nodemon to restart the server every time when we make the changes inside this file i'm going to create a demo html file and use a live server extension of visual studio code editor i'm going to create dot html file and create a complete design inside that file and use the live server extension of visual studio code editor so we can easily save the changes and restart the server so instead of restarting the server and reloading the browser i'm going to stop this server like this close this terminal and inside these views i'm going to create a new file just for design and here i'm going to say index.html just after that inside this file i'm going to put all these index.ejs code so here i'm going to call this header like this and this footer save the changes and now let me just start the live server so i'm going to just open my extension of the wishes to record editor and here you can notice i have the live server extension installed in this register record editor if you don't have this extension just search for it in this search extension text box just search for live server and open it i already have the slide server so i'm not going to install it again using the slide server this will launch a development local server with live reload feature so whenever you make any changes inside html file this will automatically reflect on the live server you don't have to restart the server every time when you make changes so once i install this live server extension let me just open this file in the live server so i'm going to just right click here and say open with live server as you can notice i'm going to have the same result this is my node application server and this is my live server extension now we are going to work on this live server so let me just close this node application server now just after that once i have this live server let me just start designing this beautiful body section of this website what we are going to do is once i have the header of this website let me just create the main section of this website i'm going to create html command and say main site let me just copy this command paste it down here and close it inside this main section i'm going to say main and create id to this main tab so here i'm going to say site main i'm going to create a main tag with id sitemain just for that i'm going to create a container with div and inside this container i'm going to create a box nav class so here i'm going to say dot box nav with this box now i'm going to add another class reflex and i'm going to add justify between class you can notice here how i specify different classes in the visual studio code editor when i press tab you can notice i have all these classes to this division tag inside this div i'm gonna create an anchor tag and specify the path add user so when you click on this anchor tag this will navigate us to this add user url and just for that i'm going to specify here class border shadow inside this anchor tag i'm going to create a spatter with class text gradient just sort of that here i'm going to create a text new user and here i'm going to add an icon as you know i did not included any library inside this project so i'm gonna just add a simple library so i can import icons inside this project so i will just back to my browser and open a new tab and here i'm gonna search for font awesome cdn so i'm going to link this font using content delivery network so i'm going to just click on this cdnjs.com open this in a new tab and in this tab i'm going to open the font awesome icons this one and i'm going to just back to the cdnjs.com copy this first link all mean dot css right from here and paste it in the header section of this website so just out of this title here i'm going to paste this link like this back to the browser and back to the icons fonts and right from here i'm gonna first select the user icon so here i'm gonna say user and i'm gonna select this icon this one user i'm gonna right click here and say open in a new tab as you can notice here you can access this icon using this code this one just copy it and paste it wherever you want to add that icon here i'm going to paste that code like this back to the website and as you can notice you have your icon here so this is how you can add different icons inside this project so once you understand how to add these icons inside your project let me just back to my project and just sort of this division tag right down here i'm going to create a simple html command and say form handling and here i'm going to say form i'm going to create an html form and specify the root route to this form so when we click on this form i want to redirect the user to the root route just sort of that don't forget to specify method which is post and inside this form i'm going to create my table here i'm going to say table to this table i'm going to specify class which is stable inside this table here i'm going to create t head the header of this table with the class d head dot i want to specify dark color to this head section so i'm going to specify class t doc inside this head i'm going to create table row in th i'm going to specify id then i'm going to duplicate this th like this change this id and here i'm going to say name this became email i'm going to specify here at sign email then i'm going to specify here gender this became status and at the last i'm going to specify here action just down here just after this t head after this closing t head i'm going to create t body i'm going to create a tag t body and inside this t-body i'm going to create the body of this table so let me just save the changes first back to the project and here you can notice i have my table and now inside this body i'm going to specify data to this table so here inside this body i'm gonna create table row and table data i'm gonna first specify id so i'm gonna space over here one duplicate this statement like this change this second text to name or you can specify name here and here i'm going to specify example html.com then i'm going to specify gender which is mail status is going to be active and inside this dd i'm gonna add delete and edit button so here i'm gonna get rid of this one and inside this td i'm gonna add delete and update button so here i'm gonna create two anchor tags that help us to edit and delete these records so here i'm going to add ag attack and i'm not going to specify here anything right now so i'm going to specify here hash then specific class btn border shadow and then to access this anchor tag i'm going to add a class update so this will just indicate this is the button for update inside this anchor tag i'm going to create a spawn tag and to this spawn tag i'm going to specify class text then inside this pawn i'm going to add my icon so here inside this pawn i'm going to add i tag with the class pass f a pencil alt so this will import the pencil icon inside this anchor tag let me just save the changes back to the project and here you can notice oops where is my icon oops i think i misspelled here pencil back to the project and here you can notice i have my icon here inside my project let me just close this unwanted tabs back to my project copy this anchor tag completely and paste it down here instead of update i'm gonna say here delete i'm not gonna specify here any http attribute here so i'm going to get rid of this http attribute because i don't want to detect the user anywhere just out of that i'm going to just specify icon to this delete so here i'm going to say pass if a times save the changes and here you can notice i have my icon now once i have my design of this html let me just link my style.css file to this index file and style this html page so to style this index file i'm going to just add one style.css file here so i'm going to say here link specify the path of the style.css file so inside this asset i have css folder and the style.css save the changes and back to the style.css and let me just style this index file so very first i'm going to add the phone family inside this project i'm going to open a new tab and say google fonts and from this google phone's website i'm going to import some fonts inside this project and use it so in the search box i'm going to search for barlow this font i'm going to select the normal style the regular 400 style i'm going to select the style then back to the main page and i'm going to select pt sans this one i'm going to select this font and i'm going to select this regular 400 so i'm going to click on this select the style and as you can notice i have here two options to import this font inside my project here i have the link tag and the import tag i'm going to use this import tag copy this import statement and paste it at the top of this style.css file like this once i imported these fonts inside my project let me just create some variables so here i'm going to add colon root and inside this root i'm going to create some variables so here i'm going to say double dash dark and specific color to this dark variable and then i'm going to specify the hex value of the color like this so i can use this dark color using this dark variable name so i'm going to create few variables here inside this root directory i just started that down here i'm going to select all the elements of the html and remove padding i'm going to specify padding 0 margin is going to be 0 and box sizing is going to be border box just for that i'm going to select all the anchor tags let's specify text decoration none this will remove the bottom border from the anchor tags then i'm going to specify the font family so i'm going back to the google font and here you can notice i have this pt sense i'm going to copy this phone family paste it here save the changes this will just apply this ptsense font family to this text just down here i'm going to create my container so i'm going to create a container class container inside it i'm going to say max width is going to be 10 24 pixel then i'm going to say margin auto this will just center all the content of this container as you can notice this will send to this content just down here i'm going to say now brand then specify font size is going to be 1.5 and on width is going to be bold this will update this title just down here i'm going to say d flex i'm going to create a d flex class and specify display flex let's specify flex wrap wrap save the changes you can find this class right here you have this d flex and this justify between oops i think i specified here dash just remove it and separate both these classes back to the style and just down here i'm gonna say justify between then specify justify content space between just down here i'm going to create a class text center and here i'm going to say text align center then i'm going to say border shadow and then specify border one pixel solid and call my variable so here i'm going to say var double dash and call the variable name border btn just out of that here i'm going to say box shadow and here i'm going to say 1 pixel 3 pixel and 10 pixel as well as i'm going to specify here hex color to this shadow like this down here i'm going to create a class text dark this will specify dark color to the text so here i'm going to say color dark just down here i'm going to say in line and specify display inline block so whenever you want to specify inline block display property to the element you can specify this inline class i'm going to say here text light color is going to be light save the changes just down here i'm going to say text gradient and to this text gradient class i'm going to specify text gradient to this text so i need to add some useful css properties to specify gradient color to the text so inside this class i'm going to specify background property to specify linear gradient so here i'm going to say liner gradient and inside this liner gradient i'm going to specify 2 gradient color so here i'm going to say to write space of my comma and then i'm going to specify two gradient colors here just sort of that here i'm going to specify webkit background clip property this is this property is not actually supported to the chrome browser so i'm going to specify here webkit as an extension to this background clip property and here i'm going to specify text and then i'm going to specify here background clip text just down here i'm going to specify hyphen webkit text field color and i'm going to specify text field color transparent see the changes as you can notice this will just add gradient color to these icons because we have text gradient class to this html element just down here just out of this class i'm going to create my header section so i'm going to first select the header and then select the nav class inside this now i'm going to specify background color and i'm going to specify here hex color this one and inside this now i'm going to add some padding to it one em to the top and bottom and zero for the left and right then add a width which is 100 percent save the changes this will just add background color and add some width to the snapdragon just down here i'm going to select the site main then select the margin top 6 em so this will add the top margin to this table and just after that i'm going to copy this phone family and paste it here save the changes this will add some margin this table and add this phone family now just for that i'm gonna add some styling to this button so i'm gonna select first site main then select the container class then select the box now and inside it i have the anchor tag i'm going to select it specify font size 1 em and padding is going to be 0.5 am to the top and bottom and 1 am to the left and right save the changes this will just add padding to this button just out of that i'm going to select the form so i'm going to select this container and this sidemane selector like this then select the form and i'm going to add some margin to this form so here i'm going to say margin 2 em to the top and bottom and zero for the left and right just after that just sort of that i'm going to select this table then specify border spacing 0 pixel and width is going to be 100 just start that here i'm going to select dot table td select all the td element then select the table again and select all the th element and specify padding 0.75 em and then i'm going to specify vertical align top just start that i'm gonna specify text align center and border top is going to be one pixel solid and then specify my border color this one like this just out of that i'm going to select the button this one's so here i'm going to say table then select the td class inside it i have anchor tag with the class btn i'm going to select it specify padding 0.3 em to the top and bottom and one em to the left and right then add font size 1.1 em and margin is going to be zero for the top and bottom and point two am to the left and right save the changes this will add some padding to these buttons just down here i'm gonna add hover effect on this table so here i'm gonna say dot table on tr i'm gonna add her effect here i'm gonna say background color and then i'm gonna add this background color this one like this save the changes when i hold on this row i'm gonna have this background effect just so that as you can notice when i hover on this row i want to remove this background shadow from these buttons so i'm gonna select first table then select table row and when i hover on it i want to remove the shadow from the button so here i'm going to select table data inside it i have anchor tag i'm going to select that anchor tag and say here box shadow none save the changes whenever on this row i will not get any box shadow to these buttons just down here i'm going to just make this table dark so here i'm going to select table t head dot i already have this class to the table head section just for that i'm going to select the edge element and specify color white so here i'm going to specify hex color then specify background color background color is going to be dark so i'm going to call here my dark background variable like this just down here i'm going to specify border color and this is going to be a light color so i'm going to select the hex value and specify that like this save the changes as you can notice i have the dark color to this table head now as you can notice we successfully specify a beautiful style to this html page next i'm going to show you how to make this table responsive now we can understand how to make this table responsive so let me first open the inspect tool of chrome click on this toggle device toolbar and specify here viewport then 24. if the viewport is less than that i want to make this table responsive so i'm going to just back to my style.css file and down here i'm going to say add the date media only screen and say here and max width if it is 1 0 24 pixel then i want to change few properties of this table so here i'm going to first select table then select t head then select t body then select the edge element dd and tr and specify display block save the changes just down here i'm going to say t head table row and to this table row i'm going to specify position absolute top is going to be minus 99999 just out of that i'm going to specify left minus 49 pixel so this will just remove the top section of this table when the viewport is less than 1024 pixel just down here i'm going to specify table row then specify border one pixel solid and then i'm going to add my border variable just down here i'm gonna say table data then specify border none and border bottom is going to be one pixel solid and then specify my border variable just after that down here i'm going to say position relative let me just remove this border and that's better and save the changes okay notice the table is now responsive if you want you can add the table head as well but i don't want to add that that is why i'll remove that header from this application so now your table is now responsive now once you understand how to make this table responsive let me show you how to create a new user form in this project so when you click on this new user button i want to navigate user to the new form where the client can specify their username email gender and status so i'm going to create a new form where the user can specify their information so i'm going to just back to my editor and inside this editor here i'm going to create a new file so inside this views i'm going to create a new file and name this file add user dot html to start that inside this file i'm going to just copy all the code from this index.html and paste it inside this add user file like this and instead of this table i'm going to add form here so what i'm going to do is i'm going to get rid of this action attribute from this form and here i'm going to specify id which is update user like this save the changes and open this file in the live server so here i'm going to specify add user dot html so as you can notice this will just open this file and just sort of that i'm going to make some changes inside this box now so i'm going to get rid of this anchor tag here i'm going to create filter class and space over here an anchor tag with a root hdf attribute then specify text on users save the changes back to the project and here you can notice you have the all user text here let me add here an icon so let me just back to my project and i'm going to specify here pass if a angle double left save the changes this will add this icon to this text just sort of that just out of this box nav down here i'm going to create another div with form title class as well as i'm going to specify text center class and here i'm going to create it to heading tag with text new user and specified class to it which is text dark and after this h2 heading tag i'm going to add here a spawn tag with a class text light and specific text here use the below form to create a new account save the changes back to the project and you will see the result something like this now just for that down here inside this form i'm going to add a division tag with the class new user and inside this new user i'm going to create a division tab so here i'm going to say form group and inside this form group i'm going to create a label for name and specified class text light then specify text name then create input of the type hidden then specify name to it id and specify value and just for that i'm going to specify here input type text specify name attribute which is name and value is going to be empty and then specify placeholder which is mark stoinis save the changes back to the project and here you can notice i have my form input element if you want you can specify any placeholder here just after that i'm going to create another input element so i'm going to copy this form group paste it down here and instead of name here i'm going to say email this for became email then i'm going to get rid of this input hidden and change this placeholder here i'm going to say example at the right gmail.com and name attribute is going to be email you just start that copy this form group again paste it down here and this time i'm gonna specify for gender don't forget to change this email to gender and here i'm gonna create a division tag with class radio button so here i'm going to create a class radio with inline class so here i'm going to say dot inline as you know we already have this class inside style.css file this will specify display in line to this division tag inside this div i'm going to grab this input and paste it and i'm going to change this type and specify type radio then name is going to be gender and value is going to be male i'm gonna get rid of this placeholder and then specify this label copy this label paste it down here like this just specify here mail back to the browser and here you can notice you have the radio button mail just out of that i'm gonna copy this radio like this paste it down here change this value to female and this became female save the changes here you can notice you have two radio buttons i'm gonna do the same for the status as well so i'm gonna just copy this form group right from here like this and paste it down here and instead of this gender i'm going to specify here status this became status like this value became active and inactive i'm going to change it to active and this became inactive so here i have a status active and inactive now let me just add a button to submit this form so just out of this form group right down here i'm gonna add form group class and inside it i'm gonna add a button and this is the type of submit button then specify class to it btn text dark update and then i'm going to specify save as a text save to changes and back to the browser here you can notice i have the button save now let me just add styling to this form once you understand how to create this beautiful add user form let me specify some styling to it let me just back to my editor and open the style.css file and just toggle this window on the right side of the screen down here i'm going to create a command add user and update user template because i'm going to use the same starting for update and add user form so i'm going to first select the form title class then specify margin top is going to be 2em just after that i'm going to specify here dot form title and then select the h2 heading tag padding is going to be 0.5 em to the top and bottom just down here i'm gonna select the new user class and then specify max width 786 pixel and margin is going to be auto save the changes just down here i'm going to select the update user id and then select form group class then i'm going to specify margin 0.4 em to the top and bottom and zero for the left and right sales changes this will add some margin between these elements as you know i'm using the same form for the add user as well so i'm going to copy this selector paste it down here and change this update user to add user like this just sort of that down here i'm going to say update user and then i'm going to select form group and then i'm going to select input of the type text and to this input tags i'm going to specify with 100 then specify padding which is 0.6 em to the top and bottom and one am to the left and right then i'm going to specify margin which is 0.5 em to the top and bottom and zero for the left and right then i'm going to specify border which is one pixel solid and specify border to it like this save the changes this will change the border of this text box just down here i'm going to specify found family to this text boxes so i'm going to copy this this bordello font family and specify that to this text box which is down here i'm going to specify font size 1 em and border radius is going to be 0.2 em save the changes and this will something look like this just out of that as you know i'm going to specify the same styling to the add user as well so i'm going to copy this selector specify comma here and paste the selector again and instead of update user i'm gonna say here add user save the changes down here i'm gonna specify styling to this radio buttons so i'm going to paste the selector again and instead of input type text here i'm going to select radio and i'm going to specify margin 1 em to the top and bottom and 2 am to the left and right save the changes so this will add some margin to these radio buttons just after that i'm going to apply this styling to the add user as well and user save the changes and now if we just take a look at this form then this radio buttons is very ordinary i want to specify some styling to it to make this form more attractive so i'm going to just back to my style.css and down here i'm going to apply some styling to these radio buttons so here i'm going to create css command and specify adding style to radio buttons so here i'm going to first select radio then select input and it is a type of radio so in the single code i'm gonna say radio just start that i'm gonna specify position absolute and opacity is going to be zero save the changes this will remove the radio buttons right from here just down here i'm going to select this selector and just add a before content to it so here i'm going to say radio label and add before pseudo selector so here i'm going to say content specify empty string then specify background which is border btn i'm going to specify this color border btn then i'm going to specify border radius 100 border is going to be one pixel solid border i'm going to call my variable border just for that what i'm going to do is i'm going to add this class to the label first so i can see the result here so i'm going to just back to the add user and as you can notice i have here a radio button with label so i'm going to specify here a class so instead of this text light i'm going to specify here radio label like this don't forget to specify to this gender as well like this save the changes as you can notice i have the results something like this back to the style.css and down here i'm going to add styling to this radio buttons so just start this border i'm going to specify display inline block width is going to be 1 em and height is going to be 1 em then i'm gonna add position which is relative and top is going to be minus 0 em just for that i'm going to specify margin right 0.5 am and vertical alignment is going to be top save the changes just after that cursor is going to be pointer text alignment center and then i'm going to add a transition to this radio button so here i'm going to add webkit transition and select the css property so i'm going to select here all 250 millisecond and specify function is then specify the transition property and specify here all 250 millisecond is just down here i'm gonna first select this selector and paste it down here like this and then i click on this radio button so i'm gonna call here an event check so when i click on this radio button i want to select this radio label before sudo selector and specify background color and i'm going to specify background color to this radio button and then specify box shadow in set 0 0 0 4 pixel and then specify a simple light gray color to it save the changes just after that i'm going to copy this selector paste it down here when i focus on this radio button i want to select this before sudo selector and then specify outline none and border color is going to be this one just after that i want to disable the check property so here i'm going to select this selector like this paste it down here and if the radio button is disabled i want to select this before pseudo selector and then specify box shadow insert 0 0 0 4 pixel and then i'm going to specify this color so i'm going to copy this property and specify that here just out of that i'm going to specify border color and specify the hex value here as well as i'm going to specify background color and specify the same hex value save the changes and now let me just check my radio buttons when i click on the radio buttons oops nothing is happening this is because you backed your add user here you can notice this input type radio and this label is not connected so how do i connect both this element i can connect them using id so i'm going to specify here id radio 2 if you want you can specify any id to this radio button but keep in mind this id and this 4 need to be equal so i'm going to specify radio 2 to this label and to this input type radio i'm going to do the same but this time i'm going to specify id here radio 3 and 4 is going to be radio 3 do the same for this gender as well so here i'm going to specify id radio 4 4 is going to be radio 4 then this radio button is going to be id radio 5 and this became radio 5 save the changes and let me just click on this radio buttons as you can notice this is now working just after that let me just style this button so i'm going to just back to my style.css and down here i'm going to style this button down here i'm going to select first update user then select the form group class and then select btn class at the same time i'm going to select the add user as well like this add user and here i'm gonna specify width hundred percent then specify padding point nine em nine em to the top and bottom and one aim to the left and right then specify background color and i'm going to select this background color specify that here then i'm going to select border which is none on family and i'm going to specify this font family this pt sense like this just down here i'm going to specify font size 1 em cursor is going to be pointer and border radius 0.2 em and margin is going to be 0.5 em to the top and bottom and zero for the left and right save the changes and as you can notice the button is now successfully ready let me just add some hover effect on this button so let me just copy the selector paste it down here and add hover effect on it over and then i'm going to specify background color i want to add dark color when i hover on this button and then color is going to be water now as you can notice the styling of this template is now completely ready next i'm going to show you how to convert this html into ejs template engine now let's understand how to convert this dot html template into ejs template engine so i'm going to just expand this editor and open the index.js here you can notice i have the footer and this header so what i'm going to do is i'm going to open the index.html and here is the main section of this website so i'm going to copy this main section and paste it between this footer and this header right here like this and just on that i'm going to grab all the content of this table data and put it in a separate partial file so i can manage it very easily i'm going to grab this table row like this right from here save the changes open the explorer tab and here i'm going to create a new file inside this include folder i'm going to create a new file with name show.ejs and inside this file i'm going to paste all this content like this save the changes and let me just back to my index.hs copy this ejs syntax and paste it here like this and instead of footer i'm gonna say here show save the changes open the terminal and i'm gonna start the server npm start this will just start the server on localhost 3000 let me just open it as you can notice the styling is not actually applied to this template because if you back to the header i don't have the style here so just add this title down here i'm going to add styling so here i'm going to say link and specify here style.css so here i'm going to say css modern slash style.css css is the prefix of this style.css as you can notice here if we open the server.js we specify here css this is the prefix of this asset css folder just for that don't forget to link this font awesome website so i'm going to copy this font awesome website link this cdn and paste it before this link tag like this save the changes back to the website and reload it as you can notice the style is now successfully applied to this project just so that what i want when i click on this new user i want to navigate user to the add user form so what i'm doing i'm going to create a new file inside this views folder and name this file and user dot ejs and here inside this add user i'm going to put all the code of this add user dot html file this one so i'm gonna first copy this heading section and the footer section of this website so i'm gonna just copy this heading paste it inside add user like this copy the footer paste it inside the add user like this so once i have the header and footer of this website let me just put the main section of this website so i'm gonna open the add user copy this main section and paste it inside this add user dot ejs and now i'm gonna grab this form and put it in a separate partial file so i'm gonna grab this form like this inside this include i'm gonna create a partial file with the name form dot each s and here i'm going to paste this form save the changes back to the add user i'm going to copy this easier syntax and here i'm going to add that each syntax so here i'm going to first add html command and say add user form i'm going to paste the ejs syntax and call form dot ejs file save the changes back to the index index.ejs so what i'm going to do is i'm going to create about a new route and render this add user file so i'm going to just back to my server.js copy this get request paste it down here and for the add user i'm gonna render this add user template so here i'm gonna say add user make sure the file name is exactly same so i'm gonna specify this name and render it back to the project and when you click on this new user this will navigate you to the add user now just for that let me just back to my root route so i'm going to click on this all user this will just navigate us to the root out of this website so when i click on this edit button i want to navigate user to the update page of this website as you can notice here in this website i don't have the update page let me create it in the views i'm going to create a new file with name update user dot ejs and i'm going to put all the code of this and user inside this update user file so i'm going to copy all this code like this and paste it inside this update user file i'm going to change this text to update user and i'm going to change this as well use the below form to update an account just after that i'm not going to use this add user form inside this update user so i'm going to copy all this code and paste it right here save the changes back to the form dot ejs and as you can notice inside this update dot user i have the id update user inside this form dot i have the same id update user i'm going to change it to add user so once i specify add user you can notice in the style.css i specify the same styling to both these forms to the update and to this add user form now just after that as i said earlier when i click on this button i want to navigate user to the update page so let me first close the unwanted files from here let me just back to the issue dot ejs and here i specify the hash inside this update button let me just specify here forward slash and specify update user save the changes back to the server.hs and create a new route for update copy this get request paste it down here and specify here update user and instead of add user here i'm going to specify update user i'm going to specify this file name update user save the changes and reload the browser and when you click on this edit button as you can notice this will navigate you to the update page let me just back to the root route and when you click on this new user here you can add a new user and from this edit button you can edit the user or you can say you can update the user information now once we complete the styling and convert all the html into egs let me just delete this index files so i'm gonna delete this add user.html and index.html let me just minimize these folders now once you understand how to work with the client side of this project next we're going to start working on the server side of this project so in the next lecture we're going to create a different route and connect the mongodb database to this project once you understand how to work with client side of this application let's take a look at how to work with server side so i'm going to open my editor and i'm going to just create the server side of this application so as you can notice here in this server.js file i have these routers i'm going to separate this router from this server.js file and create a dedicated router file so what i'm going to do is i'm going to create a new router file inside this router folder you can notice here i have this router folder inside this server folder so i'm going to just click on this router and here i'm going to create a new file so i'm going to click on this new file icon and name this file router.js and in this file i'm going to create my routers so i'm going to grab all this router like this cut it from the server.js and paste it right here like this and just start that as you know i don't have this app variable so inside this router i'm gonna say constant express is equal to and require the express module like this and just sort of that i'm not going to create here constant app and then specify the express application because this statement will create a new app so what i want instead of creating a new app here i'm going to call a method of express so here instead of this constant app i'm going to say constant route is equal to express dot router this method allows us to create different router in a separate file so instead of app i'm gonna use this route variable like this so now you can import this file inside server.js and use this routes let me just save the changes save this file back to the server.js and down here i'm going to create a command and say load routers and here i'm going to say app.use and specify a root path and to this root path i'm gonna require this file so here i'm gonna say require in the single code specified dot forward slash server inside the server i have routes and inside this route i have router just for that save this file as well and back to the router.js you can notice here i just created three routes here but i didn't export at it so let me first export this route so i can use it in this server.js so down here i'm gonna say module dot exports is equal to route so now i can use this route variable in server.js save the changes back to the server.js save this file as well and reload the application as you can notice the application is working fine now let me just back to my server and back to the router.js file you can notice here i have these callback functions inside this router.js instead of creating these callback functions inside this parenthesis of this get method i'm going to separate this callback function so i can maintain it so inside the services i'm going to create a new service for this router so inside the services i'm going to create a new file and name this file render.js this file is going to allow us to render different files using router so what i'm going to do is i'm going back to the router.js and as you can notice the first route is going to render the index file so inside this render.js here i'm going to say exports dot home route and i'm going to specify a callback function so here i'm going to say request and response parameter and call an arrow function like this now this export keyword is going to export this function so i can use it in other files so inside this function i'm going to just grab this response dot render and paste it here like this so i'm going to say here response dot render and render the index file save the changes back to the router.js and here instead of this callback function i'm going to call this home route function so i'm going to just first require this file so i'm going to say constant services is equal to require and here i'm going to use pass services render.js this file just are that i'm going to use the services instead of this callback function so i'm going to get it off this callback function right from here like this specify comma to specify the second argument to this method and then i'm going to say services dot home routes that's it save the changes and now when you reload the browser it will completely work fine so now you can notice here this route is now very easy to understand this is the route path and i'm gonna call this function when the route is match let me just add here a description for this route so here i'm gonna just add some documentation for this route add the rate description root route or you can specify here home route as well and the method is going to be get just out of that i'm going to do the same for this route as well and for this route as well so i'm going back to my render.js file and down here i'm going to say exports dot add user and i'm going to just specify a callback function request and response parameter and inside it i'm going to render a file as you know here i'm going to just render this add user so i'm going to copy it paste it here just add that here i'm going to say exports dot update user is equal to call the request and response parameter with arrow and then i'm gonna just render this update file save the changes back to the router.js and instead of this callback functions i'm gonna just specify here services dot add user and this became services dot update user that's it save the changes save this file as well back to the browser and reload it and let me just check my other pages as well when i click on this new user this will open the add user route and if i click on this edit button this will open the update user route now just for that let me just back to router.js copy this documentation paste it here and this route is for add users and this is the type of get request on and user do the same for this last route and to the description i'm going to specify for update user and this is going to be the get request and route is going to be update user now once you understand how to create a routing in this application let's take a look at how to connect the mongodb to this application and create the testful api now let's understand how to connect the mongodb to the project so i'm going to open a new tab in my browser and here i'm going to say db i'm going to search for mongodb and here i have the result www.mongodb.com i'm going to head on to this website and from here i'm going to connect my application to mongodb in the previous lecture i already explained how to work with mongodb locally i created different documents and collection using shell now because we are working on a big project i'm not gonna store all the data in the localhost because if accidentally my hard disk crash i could lost all my data so instead of storing all these data inside my hard disk i'm gonna store it on cloud when you open the mongodb.com you have the mongodb at last where you can store all your data so what i'm gonna do is i'm gonna click on this start free and here you can notice you have mongodb at last from here you can store your data on cloud database mongodb atlas is fully managed cloud database developed by the same people that build mongodb at last handle all the complexity of deploying managing and handling your deployments on a cloud service provider of your choice so instead of working on localhost we're gonna work on cloud database so what i'm gonna do is i'm gonna specify my information and create a new account on mongodb so i'm going to click on this sign up button of google and sign in with my gmail account once i sign in with mongodb class you would have the result something like this if you are creating an account for the first time mongodb atlas will ask you to specify name of your organization you can specify your individual name here and proceed once you proceed you will have the result something like this here you can create a new project and create a new cluster cluster is going to manage all your cloud data so what i'm going to do is here i'm going to click on this new project button to create a new project i'm going to click on it and specify name for this project i'm going to choose name crude i'm going to specify name to this project crude and click on this next button and then i'm gonna add member and set permissions i'm not gonna specify any member or add any permission here instead i'm the owner of this database so i'm gonna just click on this create project so this will just take few seconds to create a new project so here you can notice the project is now created with the name crude and now let's create a new cluster so i'm going to just click on this build a cluster and here you can notice we have different cluster i'm going to use the free one so i'm going to click on this create a free cluster now here you need to specify the cloud provider i'm going to use aws and i'm going to choose my nearest server i'm in asia so i'm going to choose mumbai then i'm going to leave everything as it is and click on create cluster now this will just take few minutes to create a new cluster once your cluster is successfully created click on this database access from the security right here and create a database user so we can access the database so i'm going to click on this add new database user so i'm going to create a new user with authentication so here i'm going to specify admin and specify password admin 123 and click on this add user button this will create the admin user with admin 123 password and here you can notice we have resources all resources so this will just allows us to access all the resources of the database you can edit the user as well from these buttons or if you want you can create and delete the database from these buttons as well now just for that i'm going to click on this network access and add my ip address so i can access this database so i'm going to click on this add ip address and here i'm going to click on this allow access from anywhere i don't want to show my ip address so i'm not going to click on this add current ip address i'm going to click on this allow from anywhere just like this and click on this conform so this will just allows me to access this database from any local host just wait a minute so once you have the status active you will only be able to connect your cluster from this list once you specify the database access and network access let's back to the cluster and from this cluster i'm going to click on this connect button to connect this cluster to my web application so i'm going to click on this connect and click on this connect your application here you can notice you have the connection string using this connection string i'm going to connect this application to my project so i'm going to copy this connection string by clicking on this copy button and close this window back to my project and open the config.env file and here i'm going to create a new variable with name uri and specify this mongodb url like this and don't forget to specify password and database name so i'm gonna get rid of this password field right from here and i'm gonna specify my password admin one two three so this is my password of this admin user just out of that i'm going to specify the database name so i'm going to get it off this angle brackets and this db name and specify the database name i'm going to specify name users so this is my database name if you want you can specify any name to this database that doesn't matter now once i import this connection string in this application let me connect the mongodb database to the application i'm going to save this file and close it just so that inside the server inside this database folder i'm going to create a new file and name this file connection dot js and inside this file i'm going to make the mongodb connection so i'm going to first say here constant mongoose is equal to and require the mongoose module using mongo's module we can connect the mongodb database to the application so here i'm going to say constant connect db i'm going to create here a function db and call sync and await function so here i'm going to say a sync specify the parentheses and call the arrow function so i'm going to just create a synchronous function using async and await just for that here i'm going to call try and catch inside this try i'm going to make mongodb connection so here i'm going to create a command and say mongodb connection string just down here i'm going to say constant connection is equal to call the await function like this and say mongoose dot connect i'm going to call a method of mongoose which is mongoose connect just after that in the parenthesis i'm going to say process dot enb dot and then i'm going to call this variable uri this one right here just like this so now as you can notice i'm going to just pass this variable name just start that i'm going to specify here comma to specify second argument and in the curly braces i'm going to just stop warnings in the console when i use mongodb connection so here i'm going to say use new url parser true then i'm going to call a new property called use unified topology and i'm going to just make this property true just out of that i'm gonna say use find and modify false and use create index true so these properties will stop unwanted warnings in the console now just are that down here just after this connection here i'm going to say console.log and using the backtick operator i'm going to say mongodb connected and specify the connection string so i'm going to call dollar in the curly braces i'm going to say con dot connection dot host and just out of that if there is any problem while connection i'm going to say console.log and print the error message and exit from this process so here i'm going to say process dot exit and specify 1 which is true and don't forget to export this function so down here i'm going to say module dot exports is equal to connect db just for that back to the server.js and let me just call this connection here i'm going to just require the mongodb file so here i'm going to say constant connect db is equal to and require the connection file so here i'm going to say server database and then i'm going to select the connection file this one and using this connect db i'm going to call this function connectdb so just down here just after this morgan right down here i'm going to add a command and say mongodb connection and just add here connect db and specify parenthesis so i'm going to just call this function inside this server.js file let me just open my terminal and save this file when i save this file you can notice i have the console message i'm going to be connected and this is the cluster hostname so using this message this is confirmed that the mongodb is successfully connected to this application so once you understand how to create the mongodb connection let me show you how to create api and make crore operations now once you understand how to create the successful connection of mongodb let me just show you how to create a scheme in mongodb but let me first close this unwanted files right from here and now let me just open the model folder and inside it i'm going to create the mongodb scheme so i'm going to create a new file and name this file model dot js and inside this model i'm going to create a mongodb scheme so here i'm going to say constant mongoose is equal to and require the mongoose module just for that here i'm going to save our scheme is equal to and create a new instance of mongoose scheme so i'm gonna say here new mongoose scheme scheme allows you to define a shape and content of the document so here we have mongo's scheme and in the parentheses in the curly braces i'm going to specify shape of the document so here i'm going to first specify name and specify curly braces and inside it i'm going to specify type which is a string then i'm gonna specify required to just start that specify comma here email email is going to be of the type string then require is going to be true and unique is going to be true the email should be unique of all the users then i'm going to say here gender gender is going to be string and status is going to be string so this is a very simple scheme of mongodb or you can say this is a very simple mongodb model just have that down here i'm going to say constant user db is equal to mongo's dot module i'm going to call a method of mongoose model and inside this model i'm going to specify the document name so here i'm gonna say userdb so you can specify any name to this document i'm gonna specify document name userdb and then specify shape of the document so as you know i have this scheme variable and this is the shape of my document so i'm going to pass here scheme to start that don't forget to export this model so here i'm going to say module dot exports is equal to usertv so once the model is successfully created let me just create the controller of this website using controller i'm going to just make select update delete and create records so what i'm going to do is i'm going to click on this controller folder and create a new file inside it and i'm going to name this file controller.js if you want you can name this file anything inside this controller i'm gonna first require this module so i can use it in this controller file so i'm gonna say here bar user db is equal to answer required and in the single code i'm going to specify model and then specify model.js file so i'm going to just require this scheme inside this controller file so i can use it inside this controller just after that here i'm going to create my first api create request so here i'm going to create and command create and save new user so i'm going to just create here a function so here i'm going to say expose dot create is equal to specify request and response parameter and specify arrow function to it and here inside this create function i'm going to save a new user so i'm going to first back to my router.js and inside it i'm going to first require this controller so here i'm going to say constant controller is equal to and using require i'm gonna require the controller file controller.js just after that just down here i'm gonna create my api route so here i'm gonna create a command api so here i'm going to first create this create request so in the route i'm going to say route dot post to create and add new user i'm going to use post method so i'm going to call post method in the single code i'm going to specify forward slash api specify forward slash and see here users so this is the route path of post request just out of that i'm going to specify comma and say controller dot create so i'm gonna call this method when the route is match with this post method save the changes back to the controller and inside this function i'm gonna save and create a new user now let me just do the same for update delete and find so down here i'm going to create a command and say redrive and return all users or i'm going to use the same method to redrive and return a single user so here i'm going to create a function so i'm going to say here exports dot find and specify request and response parameter so i'm going to use this function to retrieve all the user as well as i'm going to use the same function to retrieve only a single user i'm going to show you that later in this tutorial just down here i'm going to create a new command and say update a new identified user by user id i'm going to update the user so i'm going to create here a function expose dot update is equal to call the request and response parameter just like this so i'm going to use this method to update the user and just down here i'm going to create a new command and here i'm gonna say delete a user with specified user id in the request so here i'm gonna say exports dot delete is equal to and call the request and response parameter with arrow function save the changes back to the router.js file and here let me just duplicate this statement like this and instead of this post request this time i'm going to make get request so here i'm going to say get and i'm going to make this get request on this route and i'm going to change this callback function so here i'm going to say controller dot fine so when i make a get request on this route i want to execute this find method just after that i'm gonna just say here route dot put i'm gonna just call a put method of http on this path and then i'm going to just pass a parameter to this path so here i'm going to specify forward slash colon id so when i call this boot method i need to specify value to this id variable and now instead of this controller dot create i'm gonna say here controller dot update so i'm gonna call this update method when the route is match at the end i'm gonna say route dot delete i'm gonna call the http delete method and i'm going to pass id with this delete route so here i'm going to say for slash colon id just after that i'm going to specify callback function controller dot delete so this is how we can simply create an api for this application save the changes save the controller file as well and next i'm going to show you how to create these functions and get all the information from the database now let's understand how to make crude operation using mongodb database i'm going to first create a new user using this create callback function so inside this create function i'm going to first validate the request so here i'm going to create a command and say validate request so how can i validate the request so here i'm going to say if exclamation mark request dot body if when the request make a post request with empty body i want to just send a response with a status 400 and then send a message so i'm going to say here curly braces and here i'm going to say message content cannot be empty and just return from this function so here i'm going to say return so if the user make post request with empty body i'm going to say return from this callback function so whenever the user make a post request you need to specify body of that post request as you know when you make a post request using a form all the data of the form is stored in the body of the request object and using this body we can access all the form data so down here i'm going to just create a new user so we need to create a new instance of the user td scheme so here i'm going to create a command and say new user so here i'm going to create constant user is equal to new user db and in the parentheses inside the curly braces i'm going to specify value to this document so i'm going to specify it to this name email gender and status so inside this controller inside this curly braces i'm going to first specify name and then here i'm going to say request dot body dot name so when the user make post request i can access this name property from the body just out of that i'm gonna say here email request dot body dot email just down here i'm going to say gender gender is going to be request dot body dot gender and just after that i'm going to say status is going to be request dot body dot status so as you can notice here the data is going to match to this model so inside this controller i'm going to store this data and create a new instance of user db model and store it in this variable just after that just down here i'm going to save this data in the database so i'm going to just create a comment here and here i'm going to say save user in the database so i'm going to call here user and here i'm going to call different methods so i'm going to use chaining system to call different methods so here i'm going to say dot save this method is going to save this data in the mongodb database and then here to this save method you need to pass your object so here i'm going to pass this user i want to save this user data in the mongodb database so i'm going to pass this user data here just start that specified dot and call the promise then method and inside it i'm going to specify data and inside this callback function i'm going to say response dot send and i'm going to send this data and if this promise return error i'm going to sketch it using this catch method with error so i'm going to call here a callback function and say response dot status and then i'm going to specify the error status score 500 and then send it using curly braces and inside it i'm going to say message and here i'm going to say error dot message if this variable return nothing i'm going to just specify default value some error occurred while creating a create operation don't forget to specify semicolons here that's it save the changes and now here you have your create callback function now let me explain this code and show you how to execute it so i'm gonna first check so if the user make post request without body i'm gonna just exit from this method and if we have body of the post i'm gonna just get all the content and create an instance of this model so once i have the instance of this userdb model i'm going to save it inside the database using this save method just out of that i'm going to call the promise then and then return this save data to the user and if there is any error inside this statement i'm going to call this cache method now let me just test this api so i'm going to open the postman api tool to test this api it is always the best practice to test your api before working with it so i'm going to open the post man postman is a free tool for testing apis if you don't know about what is postman then you can check my dedicated video on it postman is api testing tool that help us to test the apis if you don't have postman in your local system just open your browser and just head on to postman just search for postman and head on www.postman.com and from this website you can download the postman for your local system i already have the postman installed in my local system so i'm not gonna install it again so i'm gonna close my tab and open the postman again and now i'm gonna just create a new tab here and then here you can notice i have the request type so we have different request type here the requested url and the send button so as you know if you just back to your router.js we are going to make a post request on this url and this is going to call this create callback function so i'm going to open my postman and first select the post request then specify the url so as you know if you back to your browser this is your url of your application just copy it and back to the postman and specify that url right here and just out of that specify this api path this one and paste it right here like this and just after that as you know we need to specify body to this posed method if you just make this send request then you will get an error message because as you can notice here in the controller i just added if we don't have body to this post request i just want to exit from this post request so let me just add body of this post request so i'm going to click on this body and here i'm going to select the x www form url encoded this is the url encoded data i want to send with this post request and then here i'm going to pass body to this method so in the key i'm going to first specify name specify value here so i'm going to just specify my name to the user which is ashok talwar then i'm going to specify email just out of that i'm going to specify gender gender is going to be mail and status status is going to be in active so what i want i want to store this data inside my mongodb database so i'm going to pass this data to this body and just click on this send button to add this data in the mongodb database but before i click on this send button you can notice here if i open the controller here i have the mongodb scheme inside this game i have name email gender and status when i make this post request i'm going to pass this data to these variables so i can store it in this mongodb database so let me just click on this send button and store this data inside this database when i click on it you can notice i'm going to have the result something like this here i have the unique id then we have the name email gender and status so as you can notice we have the successful 200 message from this response so as you can notice we successfully inserted the data inside the mongolia database let me just back to my mongodb database so let me first open my cluster and click on these collections here you can notice inside this collection i have my data in the collection you can find the database name users and the document name userdbs so you can notice we successfully make the create request now once you understand how to create a user and save the data in mongodb let's understand how to find or you can say how to get the user using gate method now let's take a look at how to read the data from the mongodb database as you can notice i'm using this find method to read the data from the database so i'm going to use this find method of this controller file so i'm going to open the controller.js and here i have this find method inside it i'm gonna read the data from the database so i'm gonna first get the data from the database and return as a response here i'm gonna first say userdb dot fine i'm going to call a find method of userdb object and then i'm going to call a then method of promise so here i'm going to say dot then and then i'm going to pass parameter user and in the callback function i'm going to set response.send user just like this and then i'm going to call the catch method to return the error message if there is any error inside the statement so here i'm going to say response dot status and status score is going to be 500 which is the error code and then send the message object like this so here i'm going to say error dot message and if this variable is not available let me just send the default value which is error occurred while redriving user information save the changes open the postman and now i'm going to make get request on this user route so as you can notice i have this get request and i'm going to specify this url so i'm going to open my postman and here i'm going to select the get request and this guest request is posted on api users and then i'm going to just back to my patterns and just click on this send button when i click on it as you can notice i'm going to have the data of my database because we have only one data inside this database i'm only going to have one record as a response so this find method will return all the records of the database as a response just for that let me show you how to update the value of the user using this update callback function so here inside this update method i'm going to just first say if if the request dot body is not available then i'm going to just return a response with a status code 400 and then i'm going to return a send method with message object and then i'm going to specify here data data to update cannot be empty and just for that down here if the body of the put request this put request is empty i will return from this callback function just like that down here i'm going to say constant id is equal to request dot params dot id so i'm going to just get this id value from this request using this param object now in express there are two type of route parameters the url parameters and query parameters this is the type of url parameters we created a variable in the url so this is what we call the url parameter when we make port request i need to specify value to this id parameter so when i specify value to this id parameter so this value is going to specify to this id variable using this statement so when i make a request with id value the value is going to pass through this parameter object and to this id variable so i can get that value and store it in this id variable the second type of parameter is query parameters i will show you how to work with query parameters after a few minutes but just for now once i have the url parameter inside this id just down here i'm going to say userdb dot find by id and update i'm going to call this method find by id and update and inside this method i'm gonna first specify the id which i want to update so i'm gonna specify here id i'm gonna pass this variable then specify here comma and then i'm gonna pass request dot body i'm going to pass the data which i want to update and then here i'm going to pass curly braces and say use find and modify false just start that down here i'm going to call promises so here i'm going to say then and inside this then i'm going to pass parameter data and i'm going to say here if we don't have data then i'm going to just return a response dot status 404 and then i'm going to send a response so here i'm going to send in the curly braces i'm going to call a message key and in the backtick operator i'm going to say cannot update user with then specify the id and then i'm going to say dot maybe user not found just after that just out of this if statement i'm going to say here else if we have this data parameter i'm going to say here response dot send and send this data i'm going to just send this updated data with this statement just down here if there is any error in this then method i'm going to just catch it so down here i'm going to say catch error call the function and here i'm going to say response dot status status is going to be 500 and then i'm going to call send method with message key and here i'm going to say error update user information save the changes so once i have my update callback function let me just check it so as you can notice here in the router i have this put request so i want to make this put request on this route when i make this put request i need to specify value to this id parameter so i can get it inside this id variable and pass to this object so i'm going to just open the postman and here i'm going to first get this id so i'm going to copy this id and i'm going to select put request this one just out of that i'm going to make a request on api users and as you know in the router i have this id parameter so i need to pass value to it so here i'm going to specify forward slash and paste this id just after that i'm going back to the body of this request and now i want to update this status of this user so i'm going to uncheck gender email and name and i'm going to just say here inactive and i'm going to make this active now once i specify body once i specify the parameter value let me just make this put request so i'm gonna just select the id using this id parameter and update the status of the id and make it active right now the status of the user is inactive i'm gonna make it active and update the value of this status property so i'm gonna just click on this send button to update this status property when i click on the send button as you can notice i'm gonna have the status active so the postman will make put request on this route with this id and update the status property to active so this is how you can update the value in the mongodb database now just after that let me show you how to delete the record from the database now deleting records from the user database is super easy inside this delete callback function i'm gonna first get the user id so here i'm gonna say constant id is equal to request.params.id so i'm going to get the user id using this variable so when i make a delete request i need to specify id of the user just out of that here i'm gonna say userdb dot find by id and delete i'm gonna call this method and pass id as a parameter to this method this method is going to return promise so i'm going to get that promise using dot den method and specify here parameter data and see here if we don't have data then i'm going to say response dot status and say 4 0 4 then i'm going to say here send and in the curly braces i'm going to return the error message so i'm going to say here message and say cannot delete with id and then i'm going to pass here id variable and say here maybe id is wrong just sort of that if we have valid data then i'm going to say here else statement and inside this else i'm going to say response dot send and then i'm going to send a message so here i'm going to say message and say user was deleted successfully at the end just after that just down here if this then method return any error i'm going to catch that using this catch method and say here error and here i'm going to say response dot status and specify 500 as a status code and send error message in the curly braces i'm going to say message could not delete user with id is equal to and then i'm going to concatenate the id variable like this if you want you can use your backtick operator as well to print this value that doesn't matter just start that i'm gonna specify here semicolons like this and save the changes save this file as well and now if you want to delete the data from the mongodb database you need to call the delete http method with this url so what i'm going to do is i'm going to first open the postman and let me first add a new value inside a database so i'm going to make a post request and just specify here api users and then in the body i'm gonna pass name email and gender inside name i'm gonna specify user1 and in the email i'm going to specify user at the date gmail.com here i'm going to specify gender which is female and status is going to be active so now i'm going to just pass this data to the post request and create a new record inside my mongodb database i'm gonna click on this send button to create a new record so this will just create this record inside mongodb database so let me first back to my mongodb database and refresh it when i refresh my collections here i have two database records this is my first record and this is the second one i'm gonna delete this second record so i'm gonna open the postman and now i'm gonna copy this id and just out of that i'm gonna just click on this post and select the delete method and here inside this url i'm gonna pass value to the id variable so i'm gonna specify forward slash then specify id this one in the url and then back to the params and now i'm gonna click on this send button to delete this record from the mongodb database as you know when i make a request this id is going to pass to this variable and pass through this object and then this statement will delete this record from mongodb database now let me just make this request so i'm gonna click on this send button when i click on it i'm gonna have a message user was deleted now let me just check my database so let me refresh it as you can notice the second record is now deleted from my database so you can see how easy it is to delete the record from your mongodb database now once you understand how to work with create update and delete and how to find all the users from the database let me just show you how to get and retrieve a single user from the database when you make a get request on this route this will return all the users but what i want i want to retrieve a specific user from the database instead of returning all the users i want to return only a single user from the database now to retrieve the single user from the database i'm gonna use this same find method if you want you can create a new function to retrieve the single user from the database when you create a new function you need to create a new route for that so instead of creating a new route i'm going to just use this same route to get the single user and multiple users so inside this find method i'm going to just get the query parameters and get a single user from the database so let me first add a few users inside my database as you know i only have a single record inside my database you can notice here so let me first r if you record inside this database using post method so i'm going to just make some post request and add some users inside this database so let me first refresh my database as you can notice i have a few records inside this database let me show you all my database records so here i'm going to say get and i'm going to just make get request to this api users and i'm going to just make a request you can notice here this will just return all the records of my database but what i want i want to just get a specific record from this database so what i'm going to do is i'm going to just back to my find method and here i'm gonna just pass query parameter when i make get request to this route so when i make a get request to this route i'm gonna just return a query parameter and then i'm gonna get that query parameter and pass inside this callback function and get a specific user so up here i'm gonna say if request dot query dot id if i have this id parameter of the query then i'm gonna return the specific user otherwise i'm gonna return all the users so in the else statement i'm gonna put this code like this inside this if statement if i have query parameter to this request i'm going to just get that query parameter so here i'm going to say constant id is equal to request dot query dot id and store it in the id variable and here i'm going to say user db dot find by id and pass this id variable here just out of that i'm going to call promise then method pass data variable and here i'm going to say if i don't have any data then return a response with status 404 and i'm going to just send a response so i'm going to say here send in the currently process i'm going to say message and in the double quote i'm going to say not found user with id and then specify the id variable just down here in the else statement i'm going to simply say response dot send and send this data and if this statement return an error message i'm going to sketch it so here i'm going to say catch error and say here response dot status return the 500 status code dot send and in the curly braces i'm going to say message and return the error message so here i'm going to say error redriving user with id and then i'm going to concatenate my id like this save the changes and now open the postman as you know when you make a get request to this url this will return all the users i want to get a specific user from these records so for example if i want to get this record i'm going to just copy this id and in the params i'm going to create a key and pass this value here like this so you can notice here how this url look like now i'm going to just create here key and value pair so this is the key id and this is the value of this id key i'm going to access this id using this query id statement and i'm going to store the value of this id inside this ide variable and i'm going to pass this value to this find by id method so when i click on this send button i'm gonna have the specific record as you can notice here this will just send me a specific record from my database and now if i remove this ide from this url you can get all your records this is how we can retrieve all the users and retrieve a single statement from the mongodb database now you can see we successfully created the api of this application and we also tested this api on postman testing tool so once the api is ready let me show you how to use it and display all the record of the mongodb database in the browser so next i'm going to show you how to use this api and display all the record of the mongodb database in the browser now once you understand how to create api using express let me show you how to work with it so as you can notice in the crude application we only have one record inside this table so what i'm going to do is i'm going to get all the records from my database and display them inside this table so i'm going to just back to my project and open the render.js file and inside this file as you know we have this render method to render this index file but here instead of rendering just an index file i'm going to just pass data with this render method so i can access it in the index file so i'm gonna specify here comma and in the curly braces i'm gonna say users and specify data so here i'm gonna say new data i'm going to pass value to this user key save the changes and now i can access this variable inside my index file so i'm going to just open my views and here in this index.hs i can just access this variable this variable users so i'm going to just back to the index.hs and just out of this form i'm going to add each syntax and get rid of this statement right from here specify equal to sign and say users save the changes reload the browser and as you can notice i'm going to have my data here so now what we are going to do is i'm going to get all the data from the homegroup database and pass that to this user so i can access it and display all the records of my mongodb database in the index file so inside this home route i'm going to make the get request so up here i'm going to just say constant exist i'm going to just require exious module and this module is going to allow us to make a request just start that inside this home route right here i'm going to just make a get request to the api users right so here i'm going to say exious dot get i'm going to call get request of xcos library just after that in the single code i'm going to pass the url of the api users so i'm going to just copy this url paste it here and then i'm going to specify api users so i'm going to make a get request and call this get route this get request is going to return promise so i'm going to get that promise using then method and here i'm going to say function response so i'm going to send a response here so i'm going to just grab the statement paste it here and instead of this user new data i'm gonna pass here response dot data so inside this response i have a data property and inside this data property i have all the records of my mongodb database let me show you if i say here console.log and specify here response save the changes don't forget to call the cache method i'm going to say here catch then i'm gonna call the callback function like this and here i'm gonna say response.send and then send the error save the changes reload the browser and as you can notice i'm gonna have object as a response and when you open your terminal you have your response in the console so this object this response object will going to return the result something like this inside this object you have different properties you can access all these properties from this object this is a type of get request so you can access this method property as well and you can access this data property as well inside this data property you have all the response so i'm going to just access this data property so here i'm going to say response dot data save the changes and reload the browser as you can notice i'm going to have my data as a response so once i have my response let me just get rid of this console from here and it trade over this object inside this index dot egs file so what i'm going to do is i'm going to close this terminal back to the index.ejs and instead of display these users here i'm going to iterate over these users so as you know i have all the user data inside this show partial file so i'm going to get it out of this statement like this save this file and open the show dot egs file from this include folder this one and then here before this table row i'm gonna add ej syntax like this and here i'm gonna say for where i is equal to 0 i'm going to start the iteration from 0 and see here if i is less than users dot length if the i variable is less than user dot length i'm going to just increase the value of i variable using incremental operator just after that i'm going to start this iteration so i'm going to specify opening curly braces and don't forget to close this curly braces down here so i'm going to just add here ejs syntax like this and close this for loop and instead of these hard-coded values i'm going to get rid of these hardcoded values and print variables so i'm going to call each syntax with equal to sign to print value and then i'm going to first specify id so here i'm going to say i right now this i has value 0 but i don't want to start my id from 0 so i'm going to say here i plus 1 just after that i'm gonna copy this syntax paste it here and instead of i plus 1 i'm going to specify users of i and then i'm going to specify dot name i'm going to just get the records and call the name property from the records then i'm going to copy this statement paste it right here and this time i'm going to get emails then i'm going to just get gender and this will return status save the changes back to the project and reload it as you can notice when i reload the project i'm going to have all the values of my mongodb database so this will just return all the mongodb database value as a response now once you understand how to get all the records from the mongodb database let me show you how to create a new user from this add user form now we all know how to add a user using api now let's take a look at how to add the user using new user form so i'm going to just pass values to these input text boxes and create a new user and store the data in the mongodb database so let me show you how to do it so i'm going to open my editor and then i'm going to open the add user.egs file let me just close these files as you know using this method using this add user i'm going to just redirect the user to the services our user and as you know when the route is matched to add user i'm gonna render this add user.egs file and in this file i have the add user form let me just open this form so i have this form in the partial file of form.egs going to open it and here you can notice i have this add user form so let me just pass action attribute to this form so to this form i'm going to say action and in the action attribute i'm gonna pass this post request url this one so i'm gonna copy this route and pass right here like this save the changes so what it does when we click on the submit button it's going to pass this post request to this route so when the post route is matched it's going to store all the data of this form in the mobile device database so what i want when i click on this submit button of this form i want to redirect the user to this url and as you know on this url i have this post route so i'm going to just execute this post route and create and store this data in the mongodb database and then i'm going to redirect the user back to the add users so if you just open the controller dot js file you can notice inside this create i'm going to return the data as a response but now let me just redirect the user to the specific page so let me show you how to do it here i'm going to say response dot redirect and using this method i'm going to redirect the user to different url so inside this single code i'm going to specify the path forward slash add user back to my browser and you can notice here i'm going to just specify this path to this redirect method so when i click on the submit button i'm going to store all this data in the mongodb database and redirect the user to this form again if you want you can redirect the user to other pages as well that's upon you now once i've done that let me just add a simple message that the data is successfully inserted so i'm going to open a new tab and add a jquery inside this project so i'm going to say here jquery cdn js i'm going to open cdnjs.com and from this website i'm going to copy the jquery cdn right from here and then i'm going to just paste it before the closing body tag so down here we have this footer partial file i'm going to open it and before this closing body up here i'm going to paste this jquery like this and then i'm going to create my custom javascript file and link that here so let me just minimize the server inside this asset inside this js folder i'm going to create index.js file this is my custom javascript file i'm going to first link this so inside this footer i'm going to say script then here i'm going to specify forward slash js index dot js i don't have to specify the relative path of this file because in the server.js i have the virtual path js to add js file inside this project so i don't need to specify any relative path inside the source attribute let me just save the changes back to the index.js which is my custom javascript file when i click on the submit button i want to alert a message so here i'm going to just say dollar and in the parenthesis i'm going to just specify hash add user so i'm going to specify this id add user of this form inside this index.js when i click on the submit button so i'm going to call here submit event when i click on the submit button of the form i want to call this function so here i'm going to say function event and inside this function i'm going to say alert and in the double quote i'm going to say data inserted successfully save the changes and back to the browser let me close this down back to the crude application and reload it now let me create a new user so here i'm going to just specify name of the user and the email of the user then i'm going to specify gender female and status inactive now when i click on this save button this data will save in the mongodb database and you will get a message data successfully inserted when i click on this save button you can notice you will have a message data inserted successfully when i press ok this will reload the browser and when you back to your root route you will have your data you have six records in your database so now once you understand how to successfully add a user inside your database let me show you how to update the user now once you understand how to add a new user inside mongodb database using new user form let me show you how to update the record of the mongodb database so as you know i already have update form in this project so when i click on this edit button this will open the update user form here using this form i'm going to update the user but when i click on this edit button i want to get all this information of the current user and display them inside these text boxes as well as inside these radio buttons so how can i do it let me show you how to get the user data inside these text boxes and update it so i'm going to just back to my editor and i'm going to open the render.js file to this update user i'm going to surrender this update user template but instead of just returning the update user i'm going to return the data as well with this render method i'm going to just make a request so here i'm going to say exeos dot get and i'm going to make a get request and here i'm going to call this url paste it inside these parentheses in the single code and then specify curly braces and inside it i'm going to say params colon in the curly braces i'm going to say id and say here request dot query dot id now i'm going to pass this option because i want to get a specific user from the database here you can notice when i make this request this request will return all the data from the database but at this time i just wanted to get the specific user from the database instead of returning all the user so i'm going to pass here params with a query id just out of this query down here i'm gonna call then method inside it i'm gonna call a function with data parameter and here i'm gonna say response dot render and i'm gonna render this update user ejs template but this time i'm gonna pass the user data as well so here i'm gonna say user data dot data let me just change this name to user data i'm going to see here user data let me just change this as well user data so i'm going to get the specific user data and pass it to this user object so once i have the user i'm going to specify that data inside input text boxes so let me just get it out the statement and call the catch method so here i'm going to say cache enter and just say response dot send enter save the changes and now what you need to do is when you open this url in the browser you need to pass value to this id variable so as you know when you open this update user you don't have this id variable here so what i'm going to do is when i click on this user i'm going to pass id with the url if you just inspect this window then you can notice right here i just have the hdf attribute update user i want to add id with value because i just requested the query with id variable so when i make a request on this url i need to pass id as a key and value pair so i'm going to just back to the show.ejs file and here you can notice i just have here update user so instead of just update user i'm going to pass id with this url so here i'm going to just specify question mark and then call id is equal to and then pass the id of the user so here i'm going to just call this syntax and instead of user status i'm going to call id save the changes when i delete the browser you will see the hdf attribute is updated with the user id i have the user id in the url if i hover over to this user i have the id of this user as well so in the url i'm gonna pass the user id so when i click on this update i'm gonna have all the data of the user on the update page but right now i did not specify the user data inside this user form right here i have the empty value inside this value attribute so what we are going to do is so when i click on this edit button i'm going to just open this current user with id variable i'm going to pass that id variable to this parameter so this parameter will make a request to this url and get a specific record from the database then i'm going to get that specific record and pass that with this user variable so i can access it in this update user file so let me just access this variable so let me just open the update user so at the first input text box inside this value i'm going to simply call ej syntax like this with equal sign to print a value and then say here user dot name i'm gonna just get the user name inside this input text box i'm gonna just access this user from this user variable and just get the name id just for that i'm gonna copy this syntax paste it up here to get the user id here i'm going to specify underscore id you just start that i need to specify email so i'm going to paste the egs syntax again here i'm going to say email i'm not going to do the same with this radio buttons because the radio button don't have value attribute because the radio button has check event so right here i'm going to paste my egs syntax like this and here i'm going to call the if ternary operator so i'm going to say here user dot gender if it is equal to miu then i'm going to return checked otherwise return nothing that's it let me just copy this each syntax paste it here and here i'm gonna do the same but this time i'm gonna change this value with female i'm gonna copy this statement paste it to this status radio button as well and this time i'm going to change this user dot status and i'm going to change the value to active copy the syntax paste it down here change this active to inactive save the changes and reload it now let me click on this edit button and show you the magic let me click on this third user when i click on it as you can notice i have all the data of the user inside these text boxes as well as you will get this checked radio buttons that's super easy right when i click on this save button i want to submit this form and update all these values if you just open the updateuser.ejs then you can notice here i don't have any action attribute to this form i'm not going to specify here any action attribute because i don't want to redirect the user anywhere else so i'm going to save this file as it is close it i'm going back to my index.js and here i'm going to just access my update form so i'm going to say here dollar in the parentheses i'm going to call hash update user you can notice here in the update user i have this id update user i'm going to access this form using this id so i'm going to say here update user dot submit so when i click on the submit button of this form i want to execute this function with event parameter just for that i'm gonna say here event dot prevent default i'm going to change the default behavior of this form as you know the default behavior of the form is to render the browser when you click on the submit button but this statement will stop that default behavior just after that here i'm gonna get all the data from the submitted form where on indexed addy and then i'm gonna call dollar in the double quote i'm gonna specify user or you can pass here this both are identical just sort of that i'm going to say here dot and call a method serialize array this method is going to return a serialized array of the data so when you click on the submit button i'm going to get all the submitted data inside this variable let me show you so down here i'm going to say console.log and say unindexed array let me just save the changes back to the browser and reload it now let me click on this submit button but before i click on the submit button let me open the inspecto and open the console now when i click on the submit button you will have the result something like this this will return the name id and value of this id variable what i want i want to make this id as a key of this value so i can pass this array to the put request and update the current user let me show you what i want to say so just out of this statement right here i'm going to call the map method so here i'm going to call dollar map and as a first argument i'm going to pass my array on index array and then call a function here i'm going to say n n and i so the first argument will return all the data from this array and this i will return the index from this array inside this map i'm going to create my new array so up here i'm going to say var data is equal to and then pass here object so inside this map i'm going to say data i'm going to call this variable data and in the square bracket i'm going to say n specific square bracket in the single quote i'm going to say name then just start that i'm going to specify here equal to sign and say n in the square bracket i'm going to say value let me just print this data on the console save the changes and load the browser let me click on this save button as you can notice i'm gonna have the result what i want then i have email and its value so now i can pass this data to the put request and update this record just after this console.log down here i'm going to create a variable request you can specify any name to this variable that doesn't matter and here i'm going to pass an object inside this object i'm going to pass value to the ajax i'm going to use ajax to make a request to the server and get the response from the server so i'm going to specify here key url and in the backtick operator i'm going to pass url let's copy this url right from here and paste it inside this url section so here i'm going to say http localhost 3000 update and i'm going to get rid of this update user and call my route which is api users and here i'm gonna say api slash users i'm gonna just make put request with id so i need to specify value to this id variable when i make a request so here i'm going to pass forward slash dollar and in the curly braces i'm going to say data dot id so as you can notice here inside this data i have this id variable this one so i can access this id using this id key and i'm going to just pass this value with this url just sort of that i'm going to specify comma here then specify the type of method method is a type of put and then i'm going to pass a data with this request and as you know i have data inside this data variable i'm going to pass this updated data to sort start that let me just make this request so here i'm going to call dollar dot ajax using jquery ajax i'm going to make this request and i'm going to pass here request variable and then if we have the successful request i'm gonna just execute this done method and this will just call this callback function with response i'm not gonna print any response here instead i'm gonna just say here alert with the message data updated successfully save the changes and reload it and now let me update this data so i'm going to just update this gender and the status of this user i'm going to change it to mail and i'm going to specify status inactive when i click on the save button i'm going to have the alert message and this form will update this current user data when i click on the save button as you can notice i'm going to have here data updated successfully message and when you reload the browser you can notice this data is now updated let me change this email i'm going to just change this email and here i'm going to say test.com i want to update this email so i'm going to say here test.com and click on this save button when i click on it i'm going to have a message data updated successfully when i press ok and reload the browser you can notice the data is now updated and when i'm back to my root route here you can notice i have this updated data test.com now we know that how to create a new user how to get all the records from the mongodb database and we also know how to update the user using this edit button the last thing we need is to understand how to delete the user from the database so next i'm going to show you how to delete the data from the mongodb database using this delete button now let's understand how to delete a specific record from this database so as you notice i have this delete button to delete a specific record so what i want when i click on this button i want to delete this specific record from this database and i want to display a message as well that the data is successfully deleted so let me show you how to do it i'm going back to my editor and open the show.ejs file and here i have this button i'm going to use this button to delete this data to this button i'm going to pass a data attribute and get the user id so to this anchor tag up here i'm gonna say data id is equal to and right here i'm gonna pass this user id like this so to this data id i have this user id i'm going to get this user id when i click on this button and make a delete request and delete the specific user so i'm going to save the changes back to the index.js and here i'm going to make a delete request so here i'm going to create the if statement so down here i'm going to say a window dot location dot path name if it is equal to the root path then i'm gonna execute this if statement because as you know i don't have any href attribute to this anchor tag so when i click on this anchor tag i'm not gonna navigate the user anywhere else let me just back to the index.js and inside this if statement here i'm going to say dollar on delete i'm going to create a variable dollar on delete and i'm going to select my delete button here i'm going to call dollar in the parenthesis i'm going to say dot table i'm going to select the table then select table body table data element and select anchor tag with delete class as you can notice i have this delete class to this anchor tag i'm gonna select it so when i click on this button so here i'm gonna say on delete dot click when i click on this button i'm gonna execute this function and i'm gonna get the data id of this anchor tag so here i'm gonna say var id is equal to dollar this dot attribute i'm gonna call a method attribute and in the double code i'm gonna say data id so using this statement i'm going to get the current user id from this data attribute now just after that once i have this id inside this id variable i can make a request so what i'm going to do is i'm going to just copy this request variable paste it down here and inside this request i'm going to make a request to this delete route as you know i'm going to just call this api user and pass id to it so here i'm going to say api user and pass id i don't have this data variable here so i'm going to get rid of this data variable and just specify this id variable just for that this is a type of delete request so i'm going to get rid of this boot and say here delete and then i'm not going to specify any data with this request so i'm going to get rid of this data from here down here i'm going to get the user permission to delete the record so here i'm gonna say if and in the if statement i'm gonna call the confirm method this is the inbuilt method in javascript this will just get the permission from the user here i'm gonna say confirm and in the double quote i'm going to say do you really want to delete this record then i'm going to space over here curly braces and inside this if statement i'm going to say if the user specified yes i'm going to execute this if statement so here i'm going to call the ajax request this one copy this request and paste it inside this if statement in this alert i'm going to say data deleted successfully and then i'm going to reload the browser so here i'm going to say location dot reload back to the browser and reload it so let me just add a new user here i'm going to say user 1 example user update test.com specify gender mail inactive when i click on the save button it will insert this record inside the mongodb database back to the all users and here you can notice i have this record let me just delete it so i'm going to click on this delete button when i click on it this will just ask me do you really want to delete this record yes i want i'm going to click on this ok button when i click on it you can notice i have the alert message data deleted successfully when i press ok as you can notice this will delete this record from the database at the end let me show you how this application work i'm going to add a new user using this new user button i'm going to click on it and add a new user here i'm going to specify username daily tuition and inside this email i'm gonna say daily tuition at the date gmail.com specify gender mail and specify status active let me click on the save button to save this record in the database when i click on it the data is now successfully inserted in the mongodb database press ok and back to the all users so here you have your data but you can notice i misspelled this spelling of this daily illusion let me just update it so i'm going to click on this update icon and right from here i'm going to just update this spelling so here i'm going to say t so now we have the deletion inside this text box you can notice all the data of the record is automatically filled inside this form just after that i'm gonna click on the save button to update this record when i click on it i'm gonna have alert message data updated successfully click on the save and back to the all users as you can notice the data is now successfully updated just after that i want to delete this record from this table so i'm gonna click on this delete button when i click on this delete button the application will ask you do you really want to delete this data yes i want to delete it so i'm going to click on this ok when i click on this ok you will get an alert message data deleted successfully and when you click ok the data is successfully deleted from your database now i hope you understand how to create crude application using express and mongodb database if you find anything useful don't forget to click on the like button of this video make sure you click on the subscribe button to get all the latest videos if you want to download the source code the link is in the description that is all for now i will see you in the next one [Music] you

Channel: Daily Tuition

Views: 209,429

Keywords: nodejs, node

Id: W1Kttu53qTg

Length: 159min 37sec (9577 seconds)

Published: Mon Nov 09 2020