CRUD User Management System – Nodejs, Express, MongoDB & EJS (Reupload)

hey what's up today we're going to create this user management system to sharpen or create skills the application will allow you to search you will be able to add new customers update customers and also delete them the list of customers will be paginated and everything will be fully responsive thanks to bootstrap if this is something that you like to learn stick around and consider subscribing now let's get started hey welcome everybody and let's get started I've already created a node.js user management project folder and inside here is where we're going to be initializing a new project in order to do this open the terminal or Powershell on Windows you can do left shift right click on open Terminal in here and this CDs to the project folder that I've created but of course you can use the CD command if you're on Linux or Maca let's open this full screen and let's initialize any project by doing npm innate Dash white and this is going to skip all the questions and save us a couple of seconds I'm gonna clear everything and the next thing that we need to do is install the dependencies that we need for this project mpm I for install and then we can start listing them starting with TMV ejs Express ejs layout Express flash messages Express session method overwrite ant monkeys press enter and this should take a couple of seconds and the next dependency that we need to install is going to be a development dependency and that night mode is going to restart the server first every time we make a change so we don't have to do a manual in order to install normal we need to do npm I will install and then dash dash save Dash Dev and we do normal all right now let's open our project in Visual Studio code or whatever code editor do you have available so code Dot and this is going to open Visual Studio code with my project here on the side inside the Explorer if you can do this you can simply go to file open folder and just open your project folder if you open the package.json file in here you will see that we have the name version description script we have the dependencies and the development dependencies first of all inside scripts we need to create a new script called start so I'm going to do comma and then inside here we do start and we all we need to do in here is we want to tell nodemon to start our application so no one and then the application name which I'm going to go up.js save this the next thing that we need to look at is the dependencies as of currently I'm using these versions but in future some of them are most likely to change they're very popular dependencies so if you have any errors just Google them and hopefully you'll find the answer and the last one is obviously notebook which we installed and we are using here let's create or application file which is good up.js so inside the Explorer we can go app.js like so once you create your new file we also want one more which is going to be called dot EnV and this EMV file is going to contain some of the stuff that we want to hide such as the username of a database the password of a database and the string of a database which we're going to do a little bit later in this tutorial now let's create a very basic application so open up.js and let's focus on that now let's add the dependencies that we're only going to use right now and we're going to be adding the rest as we progress in the tutorial the first one is going to be or dot EMV that we just created so this is the only one that is required a little bit differently so require and then in single quotes we did dot e and V and then we do dot config and like so the next one is going to be Express so with the const Express equals require and then we require Express in single quotes like so we also want Express ejs layout which is going to help us to create layers that can be reused through the entire application and I'm going to be using ejs which is going to save us a lot of time inside here we're going to do cons Express layout and then this is going to be equals require and then we're requiring Express ejs layout like so now we need to create a new express application and in order to do this we can do const app equals Express and we start the function if you hover over this you will see that it should say create an express application the express function is a top level function exported by the express module which we have here we also need to tell application or port number to be using so so with the cons port and this is going to be equals 5000 if we're working locally this is going to be the port number that we're using but if we decide to upload this application on a real server so it's publicly visible we can do all and then we can use the environment port number set by the server as default and this is going to be processed the EnV port like so the next thing that I'm gonna do is finish up with Express and I'm going to do app.use and because we're going to be having forms in or application which is going to allow us to pass data then we need to do a couple of things so the first one is going to be Express and then inside here we're going to do Euro encoded and for this this is going to be in curly brackets extend it and then we set this to True like so close and if you hover over this you will see that this returns middleware that only passes Euro encoded bodies and only looks at requests where content type header matches the type option the next thing I want to do is app.use and then this is going to be express.json like so and then if I avoid this if I hover over this you'll see that returns middleware that only passes Json and looks at requests where content type header matches the type option so those two things are going to be helping with passing data through the forms later on but I wanted to set them up now and the next thing that I want to set up is the express static folder and what we need to do is app.use Express dot static and then inside here we're gonna do all static folder which is going to be called public now what this is is essentially I'm going to be creating a public folder which is going to hold or css images and JavaScript if you have value with this you will see that this is a built-in middleware function in express that serve static files and is based on server start so this is going to make us serving images CSS JavaScript so much easier later on and I'm going to show you how it works the next thing that we need to do is set up our template in engine and then to do this we can do app.use and then Express layout and then we're going to do app.set and then we need to set all the food layout is dot slash and then we're going to create layouts folder and then main so this is going to be our main layout so essentially we create one layout that can be reused for many pages and we're going to be including scripts CSS images and so on now the last thing that we need to do in here is app.set and we need to set all view engine view engine like so and then the view engine that I'm going to be using is ejs in this example and I'm going to show you a very cool extension that's going to help us a lot all right we are almost there the next thing that I'm gonna do is create a very basic route and this route is going to be our home page for example just so we can test the application to do this we can do up dot get an insert here we can just do slash which is going to be our home page and then we're going to do a function which is going to be a request and response like so and then this is going to be an arrow function an inside curly bracket is where we're going to do the logic and this is going to be res dot send and then we can send some data like Hello World so but we also need to tell Express to listen on this port number and start the application after listen grab the port number from here support and then this is going to be another function like so and then in curly bracket we can finish by doing console the log and then I'm gonna do in single slanted quotes like so which is going to allow us to bring in cons and inside here I'm going to do app listening on Port and then with dollar sign curly brackets we can put the port number inside here and that's it all right at this point we should be able to start the application and get the color World message so if you save this you can either go here on the three dots and run and click on Terminal New terminal and you can do your commands in here or you can do the command on the outside Powershell terminal as long as you are inside this folder you should be able to start your application by doing npm start press enter and now this should start to application and as you can see nodemon starting netapp.js and we have app listening on board 5000. if you go to the browser now and if you go to localhost of the port with column Port 5000 you should be able to see Hello World which means or application is working now the next thing that we can do is set up or layer let's go back to the Explorer here and start creating support so the first one is going to be called views this border is going to contain all of all pages kind of like all HTML but in this case it's going to be ejs inside views we're gonna have all main layout as well so let's create that by doing layout and then inside layout I'm going to create a file called main Dot ejs so this is going to be our main layout and I'm going to show you how it works right now and what we can do is if you start typing HTML in Visual Studio code we have some suggestions here and I'm going to click on HTML5 and this is going to create a very basic document the next thing that we need to do is make sure that all of our pages are using this layout and the content is rendered inside here and if you go to extensions here and if you look with this one here good ejs language support by digital brainsteam this is going to save us a lot of time right in ejs and I'm going to show you how now so I've already got it installed I'm going to close it and let's close this as well like so and now what I can do is I can start writing EGS super quickly by doing ejs and then it gives me a lot of options now for this option I actually want the EGS Escape so output escaped and I'm going to press enter as you can see this opens the EGS and closes it for me and I can do all sorts of cool stuff which we'll do later so inside here I want to be able to render the pages that we're going to be creating what we can do is just put body like so and we're done this is all main layout we will modify in a second but let's test it first of all so let's go to the Explorer let's go to views and let's create all first page which is going to be called index dot ejs so this is going to be all dashboard or in this case or home page so what I'm going to do is put H1 dashboard like so so what are we expecting to happen is that we want the index.e.js H1 to be rendered inside here and we'll have a look at how this works but at the moment if we go back to all app.js file in here and we're sending hello world we actually want to render this index.jsh here so what we can do instead of rest of send we can do res dot render foreign which page do we want to render and in this case it's going to be called indexed like so we don't have to specify dot ejs it's smart enough to do this and we should be good to go if we save this save everything so far that we've done and let's go back to the browser and refresh now as you can see this change we're getting dashboard and also if I do right click and view page Source you will see that we're getting the HTML here and inside the HTML we're getting the dashboard rendered which is exactly what we want and this is basically going to be reusable there now you can create many layouts with different pages and tell each page which layout to use but this is going to be the default one which we're going to be using for this tutorial let's close this and the next thing that I wanted to show you super quickly is that we are only rendering the page but if you wish to pass some data like a title and description we can do that later on we'll move the routes to another but just to show you inside here we can create a const and the discounts can be called locals and this is going to be equals in Cali brackets we're gonna have title and then the title can be node.js and I'm going to do comma and then let's do description description and inside here let's do three node.js user management system like so save this and now if you want to pass this data we can do comma outside this and then we can do in curly brackets we can do if you have a few things that we want to pass then we can do them in curly brackets and then we can say locals and then you can list a few more with comma but if we're passing just one we don't have to put them in curly brackets and we can just do this and that will work now you might be wondering well how is this going to or effect or page if you go back to the main.ejs which is all main layout inside here inside the title now we can actually grab that data and to do this I'm going to remove the document and I'm going to start writing ejs and then I'm going to do at the bottom here EGS output value and inside here I can just do locals dot title so this is gonna go inside locals and grab the title and I can do exactly the same thing with the description the HTML description is a little bit different so it's meta name equals description and then we have the content usually and the content we can write with ejs put the DJs out and inside here we can do Locus dot description and also we need to close this save this and make sure that you save app.js as well and now if you go back to the website currently you see that we have document here and if I refresh you'll see that we're getting node.js which is the title that we're passing and also if when you right click and view page Source you'll see now we're getting the title here and we're getting the content which we passed from here so that's a good one to know of course you can render this pretty much anywhere you like so I can grab this if I wish to unpaste it in an H1 here save it and then if I go refresh here it is rendered there we go just like so we don't want this and we remove it now the next sensible thing to do would be to set up or layout obviously we have a very basic layout so far but what I'm going to be using today is bootstrap to make or website look presentable and it's just going to save us a lot of time so what I'm going to do is go back to the browser go to get bootstrap.com and as of currently we're using version 5.3 and and we need to go here to read document click on this scroll down a little bit and as you can see they're giving you a little demo a few instructions what we need to do from here is grab the link the CSS link so I'm going to copy this and paste this into all main layout maybe underneath the method description here I'm going to paste the view well wrap so you can see a little bit better and also I want to grab the JavaScript just in case later on we've probably end up doing some pop-ups and you might want to experience with stuff so grab the JavaScript and let's paste it here above the ending body tag like so save this save this let's go back to bootstrap one more time and let's look into bootstrap icons search for Boost drop icons and then if you click on this learn more about Workshop icons link this will lead you to icons.getbystrap.com and in order to install this click on install and here it is the CDN I'm gonna grab this one here as is the easiest way to do and then I'm gonna paste the bootstrap icons inside here all websites should be using bootstrap now and if I go back to the website super quickly and if I refresh you will see that the font changed to the bootstrap the fourth one now I also want to set up a custom CSS right now as it makes sense as we're doing all this so what I'm gonna do is the Stars here I'm going to create a custom one so this is going to be link CSS and this link CSS let's call it main.tss and this is going to live in or css folder that we're going to create right now and as I said earlier if you go to app.js we set up a public folder for static files so let's create this public folder so inside the Explorer new folder public and this folder is going to be taurine or css images and JavaScript so inside here let's do CSS and let's create more file so main.tss and also let's create one more images IMG for short and we get now if you open the main.tss file let's super quickly test to see whether this is working by doing body and let's change the background color of to Aqua save this make sure that you have this saved as well and let's go back to the browser and refresh as you can see all CSS is working so we can continue with our project let's go back let's remove this because we definitely don't want it and now we can start building all that now for this layout I did use some inspiration from the examples here so if you go to the get bootstrap website.com and then you'll be able to see a lot of Snippets that you can copy and paste now and they will just work but the one that I used heavily is this one here which is called dashboard I'm actually not going to copy everything from here because of heavily modified there but what I'm gonna do is potentially I will create a little file for you that you can copy and paste because it will contain some CSS that I'm going to show you now so make sure you pause the video copy the CSS and then we can continue so what I'm going to do now is go back to CSS to all custom CSS and paste the CSS that we need now this CSS is only going to adjust a few colors and font it's not gonna do anything too drastic but it will make the layout look a little bit better done if we don't have it so I'll definitely have this Linked In the description below so you don't have to type it it's just as I said it's just changing font and so on that's the first thing that we need to do and now we can close it now let's start building some of the parts for websites starting with or header now instead of we could potentially write the header here the sidebar and so on but we can also stay organized by creating different partials if you go back to the Views here and then if we create a new folder and we can call this one partials these are going to be partial files such as header footer sidebar answer on so let's start by creating or header Dot ejs and let's create one more which is going to be our sidebar dot ejs so inside header let's just put something like header for now and for the sidebar let's just put sidebar so what we need to do now is go back to our main ejs layout here and let's include them in order to do this we can start typing ejs and then if we scroll down here we have include so if I type this this is going to write the include function um then we can tell it what to include and in this case we need to go dot dot NS slash R shows header and then dot ejs like so save this let's go back to our website refresh and as you can see that we're getting the head end here which is great and now we need to do exactly the same thing with the sidebar for the sidebar for the sidebar we can include it here for now so I'm gonna do sidebar and save if you go back here we go we have Heather and sidebar and now we can start constructing our page first of all if you're familiar with bootstrap I'm going to be using a fluid container which is going to make everything full width and then inside it we can do rows and so on so what I'm going to do is dot container fluid and this is going to create a div with the class of container fluid and with this div I want to wrap pretty much all the content including the sidebar and the body so all the content is going to be living in this container so I'm gonna do a space and also I'm gonna do a row so Dave with the class name of rolexo and close it unwrap everything as well save and now for the body here and I'm gonna wrap this in another div in fact this is going to be just called main which is HTML5 element and I'm gonna wrap the body like so and this is gonna have a couple of classes so we're gonna have a call Dash medium-9 ms4 margin start and this is going to be small to water we're gonna have this as column Dash large dash 10 and then Pat into the x-axis we're gonna have more medium screens to be full like so and that's pretty much all main layout then let's go back and refresh as you can see nothing interesting is happening just yet we do have our content here pushed to the side but we'll fix this in a second so now let's start building or header if you go back to the Explorer and click on partials header let's close everything else and now we can focus on the header alright so I'm actually going to give you all the HTML for this so you can pause the video copy and paste it so let's copy and paste them and I'm going to explain it this is a very simple header that you can copy and paste from the bootstrap website essentially we're creating a heading here with the class map of navba navbar duck we're making the header sticky with the with the dark background and or medium screens we are doing no wrap with flex button of zero and we're giving it a shadow then we have a link which is just another brand this link is containing or logo and the logo is going to on home page always so if you click on the logo it's just going to go to the home page that pretty much it then we have a toggle button for or mobile navigation so when you go mobile this is gonna toggle the hamburger menu and the last thing that we have inside here is our search form which has an input and that's pretty much it we don't have a button because this is going to work on enter so if I was to save this and go back to the project project and refresh you will see how simple this is it's just enough bar with the logo on a search bar now let's take this and go back close it and now let's have a look at the sidebar opener festival and we need to replace this so I'm going to copy a very basic sidebar that I copied again from bootstrap and modified it a little bit I will give you the file so you can copy this and save this a little bit of time but essentially this is a navigation with the ID of sidebar and on media screens we have the column set to free on large screens we have the column set to 2 or medium screens we have a display this block and we have the background as light and this is also going to be collapsible because on mobile it's gonna pop out with or hamburger menu and essentially inside here we have two lists is where you can list your pages your navigation and inside here we have links this is going to be going to slash which is going to be home page and then if we do create a mobile page we can just put slash about I have a nice icon from bootstrap icons and just about save this and let's go back to the project and refresh all right now we can close bootstrap super quickly and we can focus on all routes if you go back to the app.js file in here the first thing I'm going to do is scroll down to Home Route and we in fact going to be changing this and moving it to its own folder just so we're a little bit more organized I'm going to comment this by doing control and Slash and this is going to comment it out if we get a 404 error so if you go to any page that does not exist we can do a 404 10044 and inside here we're going to do app.get and then inside here we can do an Asterix like so and then this is going to be a request response a narrow function like so and then inside here there are a couple of ways we can do this we can just run the some text if you wish or we can even create a page super quickly what I'm gonna do is rest dot status and then this is going to be 404 and then we can render a404 page so dot render like so and the page that we want to render we can just go for all four and we need to create so if we go back to the Explorer inside or views is where we can create all four or four page and what I'm gonna do is I'm gonna be very lazy and just create a new page and just do 404. DJs and let's do an H1 404 save that's gonna be your 404 page of course you can design it and make it nice and now if I go to the website you should be able to see 404 and this is because we don't actually have any routes uh I can demonstrate this by going to app.js and comment this so our home page is going to be working now like so we have the dashboard but if I go to a non-existing page about you can see that we're getting 404 which is great let's go back and now we can create all routes all routes are going to be living in a folder called server let's create this folder called server an inside server is where we can create another folder called routes the routes maybe we can go for this project customer .js and this is because you could potentially have multiple routes for example login routes user routes dashboard routes whatever you'll see how this works in a second but we do need to let me close everything so we don't get confused but inside the app.js we do need to tell where our router so instead of doing the Home Route inside here what I'm going to do is grab this in fact I'm gonna copy it for a sec and then modify it in a second and what we need to do is put all right in here and then I can do app.use slash and then inside here we can do require and then we can do the route which is going to be dot server slash route slash customer and we don't have to specify dot Json here it's smart enough to do this let me tidy this up and we should be good to go now if we go back to customer.js there are definitely a couple of things that we need to do in order to make this work first of all we need to import Express just like we did in app.js so I'm going to do cons press equals require and then we require Express like so and then we do need to include the express router in order to make this work so cons router equals Express dot router like so and now a very important thing that you need to do is export this router this is important one that you could potentially forget so I'm saying it now so what you need to do is module dot export and then we export the router now this should work so essentially inside here we can list or route let me put comment customer routes or up route whatever you used to call it and let's start by building our first one and let's have a look at how this is going to work so this is going to be very similar to what we've done here but instead we're going to be making controllers so inside here I'm going to do router don't get so we are getting a page so when we go on a route we're getting we're not posting anything we'll do multiple ones later on just to show you how it works and then we're getting the home page in this case and then we can create a custom controller for this let's say we call it custom controller and then inside this customer controller we can call a dashboard home page whatever let's say homepage now we don't actually have this customer controller just yet and we need to create it so if we go to the server we need to create a new folder go to controllers inside here we control the route and inside here we control some of the logic and the controller in this case we can do customer controller dot JS just like we've done it inside here and now we need to include this customer controller inside our Rod so we can make it work and in order to do this we can do const customer controller because we're using it here and then require and then we require the file that we just created so this is going to be dot dot slash controllers slash customer controller like so and you can create multiple controllers if your application is a little bit bigger than this so now that we have our home page right in here we actually need to create this home page function so if we go to the customer controller we can create there in here so what I'm going to do is copy this comment and I'm gonna say this is gonna be a get route and this is going to be or home page and I know I pasted this but this is not going to work we actually need to have an export good home page now so what I'm gonna do grab this super quickly and let's build it from scratch so exports and then inside here we can do dot home page equals an asynchronous function because we're going to be doing some database stuff in a second so request response and then this is going to be a narrow function and then inside here we can do some of the logic so I'm going to remove this it's this is pretty much the same as this and let's see what we need so to start with we can actually deal with this I think this is going to be absolutely fine so we have our title and description and we have and we also rendering the uh index view page here okay we have everything connected this is connected save save save save everything and let's test super quickly so if you refresh we're getting a 404 because we're under bought so I'm gonna go to the home page and still we're getting the dashboard which is great on Route and controllers are working which is awesome okay so now that we have our foundation created we can create all database and include it to our project so today we're going to be using mongodb navigate to mongodb.com and if you're new to this go to try free and then inside here you can sign up by using the form on the right side of zoomed in quite a lot so you can see but we need to do is put your first name last name company email password and agree to their terms and conditions or you can just use single sign in with Google if you wished it I've already got an account so what I'm going to do is go back and just sign in super quickly all right so I've logged in and your dashboard might look something similar to this if you're new to this you'll probably just get an empty page here telling you to create your first cluster database but because I've already got a few it's actually showing me cluster zero so hopefully I'll be able to create a new one for this project for free so let's have a look the first thing that we need to do is go here and create a new project let's give it a name so I'm going to call my node.js user management system tutorial next then we're gonna select our project owner so this is me great project and now this is going to say that the current IP is not added and you will not be able to connect to the database from this address we definitely need to add this so I'm going to click add current IP and this is going to add my current IP and now I'll be able to access the database that's an important one and if you didn't get this you can always go to network access and react your IP from here now let's build our database click on build a database and inside here we have a couple of options today I'm going to be using the m0 which is a free database storage of 512 megabyte it's absolutely fine for testing and messing around and now if we click on this select the provider that you wish to choose I'm going to be using AWS in this case and for the region I'm going to go with the closest one to me which is Island I believe so I'm gonna go with that and then you can give your cluster a name I'm going to call mine cluster zero which is the default value great now this is going to ask us to create a username and password which is going to allow us to have read and write access to the database so for the username I'm going to call mine ready and for the password I'm gonna Auto generate a secure password and I'm going to copy this so make sure that you copy the password and you can actually paste it inside the dot EMV file for a second so this is the password and my username is ready already nowhere I'm gonna go back and just create the user all right we have the user created and now we scroll down a little bit more we have the IP added and or cluster has finished provisioning which is great the last thing that we need to do is click finish and close and this is gonna say congratulations on setting up rules I'm gonna hide the quick start and then go to databases right now that we have all database in here what we need to do is click on connect click connect and then go here the bottom where it says Connect using vs code click on this and this will give you a string connect your mongodb deployment so we need to copy the string and paste this string into all environment here so we actually need to give it a name and for this I'm gonna give it a name of mongodb with capital letters underscore u r i and then equals the string that we just copied and pasted so as you can see we have the username in here which is already set from mongodb but we do need to replace the password so for the password I'm going to grab it from here remove my username and paste the password inside here and then the rest is going to be the cluster that we just created and also this is going to be the I believe this is going to be the database name so you can call this whatever you like I'm gonna leave it as test and I'll show you how it works later on save this save you dot DMV file go back to the database and close if you go to browse collection we won't have anything created yet because we haven't inserted any data but we'll get to that so now we should be able to connect to a database through application and start reading and right into the database now let's set this up first of all inside the server folder is where we're going to be creating a new folder calling config inside this config is where I'm going to create a new file called DB database for short and then dot JS and inside here is where we're gonna be making our connection so const mongoose equals require D and then we require mongoose like so save now we need to do mongoose dot set and then inside here we do strict query like so and we set this to false this will essentially avoid strict mode for query filters now we need to make a connection to our database and in order to do this we can do const connect database and then this is going to be an asynchronous function so async like so and this is going to be a narrow function and inside this R function we can do a try catch statement and inside the try we can hit cons equals await and we're doing mongoose dot connect and then and then we're going to bring the connection string from all environment file here so we're gonna do process dot EnV and then DB underscore call u r i and this is exactly the same name that we have in here so in fact you can copy and paste it and then close this now let's console log one way every time we connect to the database let's console log this so we can do console log and inside single slanted codes we can do database connect it and then we can do the connection string so dollar sign curly brackets and then com and then this is going to be connection Dot host so essentially when we connect to the database this is gonna have an object that contains a connection and then host that doesn't look good that doesn't look good it's because I didn't close it and now and the last thing I'm going to do is catch the arrow so let's do console.log and then we do error perfect so this connection DB hasn't been used anywhere and we need to do that so in order to be able to use this window application we need to export it so we can do module dot export equals and then we export the connection DB here like so now we should be able to include this innov.js file and use it so let's save this close it close everything make sure that you save the connection string in here close it and like that now if you go up here at the app.js file and only maybe ejs layout we can do a const and we can do connect DB and this is going to be equals require the file that we just created which is under a DOT server slash config slash database and now we should be able to run this and I'm going to run it somewhere after here so I'm gonna do connect DB and just run the function connect to database save this save everything that we've done and now if you save the node mod would have restarted your application and you should be able to see database connected and the string that is connected to the mongodb string which means that we are actually connected and we can start reading and writing documents so what I'm going to show you super quickly is that if I made an error inside the DB let's say the connection string goes wrong in fact let's go to dot EMV and let's say the password was wrong I'm going to put one here and save it so if we go back you'll probably see I think that when I save the dot EMV file the actual application doesn't restart but if I save some Finance let's say I make some space and save here you will see that the application just restarted and now we're getting server error butt off which means bad authentication in fact it says here authentication failed so if you get this it's probably because it didn't put the right username and password or Shrink I guess so let's put that back obviously remove that and close it and let's restart the application so we get the database connected here which is great if you go back to application as well you can refresh it and it should work as it should all right so Inno dashboard is where we're going to be listing all the customers but to make it easier what I'm gonna do is I'm gonna start by creating some stars in here and a button so we can actually first of all add some customers we're gonna do the form and then when we add some customers we'll be able to display them in here so let's do that super quickly and if we go back to the Views and then index.ejs I'm gonna do some super quick styling inside here for all dashboard so I'm going to create a div with the classes so it's going to be a long one so this is going to be display Flex dot justify content between which is going to push stuff on the left side and the right side you will see in a second then we're going to have Flex wrap Flex medium no wrap align item Center part in top or free but in bottom of two margin bottom of prey and Border bottom right this is a long one I know let's go to V we'll wrap just in case and then I'm gonna do an H1 dashboard this H1 is going to have a class name of H2 just so it's a little bit smaller than H1 and now I want to create a button that is going to allow us to go to the page where we can create a new user new customer in this case so what I'm gonna do is create a div with the class of BTN Dash toolbar margin bottom of two margin bottom of two margin bottom medium to be zero press enter and inside this div I'm going to create another div PTM Dot group dot margin end of two and inside here we're gonna do a link so a href and this link is going to go to the ad page just to keep it simple and the class name for this link is going to be is going to be button because I want it to look like a button BTN small and then and then to make it smaller I can do BTN SM I want this button to be outlined so BTN outline and then we can use the secondary cut cool close this close the link here and the display Plus new user or customer and that should be good to go so if you turn this up save them let's go back and refresh as you can see this is looking pretty nice and now we have the new user button here which maybe needs to be a different color instead of gray but that's fine now let's create this page and then do the form so what we're gonna do go back to the server route and then custom inside here we're gonna create another get request which means that we want to render the add page where we're going to be adding a customer so to do this it's going to be exactly the same we can do alt shift and down and this is going to copy this line here and instead we're just gonna call it at for adding customers so customer controller we can call this something like maybe add customer but customer Alexa and we should be good to go now we actually need to create this inside or customer controller so if you go to controllers customer controller and somewhere below this I can grab the comment let's put it around here we can do get and then this is going to be new new customer form and now we can do exactly the same thing as here so I'm going to copy this paste it and we're gonna say export dot add customer of course this needs to match the one here so at customer make sure you copy and paste it if you wish and then we have an asynchronous function with the request and the response entered here we can change the title if you wish add new JS and then you can change the description if you wish I'm going to leave it as it is so in this case we're still rendering the index page which is not what we want we actually want to create a custom customer page and in order to be a little bit more organized this could stay the home page here but we can also create another folder for all of our customer Pages if you waste it so inside here we can do customer and maybe we can add all of the customer Pages inside there I know that the home page is here but uh if you wish to you can move it but it makes sense that the home page is here anyway and now we need to create all art page so inside here I'm going to put add and then inside the customer I'm going to create a new page called add ejs like so so this is going to be our customer page let's just put something like H1 customer let's save this make sure that you save the controller and this is going to the out page and in fact this is wrong we need to go to customer now because it's inside this order sorry and then add so now if we save this make sure that you have this get route ad as well that goes to the add customer controller which should be good to go if we save this and refresh everything is looking good and if I click on add user which goes to the slash alt page you will see that we are getting customer so our customer page is now working and in fact this doesn't look very good so what I'm gonna do is let me go to the index.js page and let's copy this to speed in the process so this is going to be our header I'm going to go to the and I'm going to go to the add page here and paste it so instead of dashboard let's say customer and instead of having a link maybe you can just do a button so I need to open the button close it remove the link and my idea which is maybe you can just do some I don't know informational stuff so let's put a question mark That's not gonna do much to repair let's go back refresh and that's looking a little bit better maybe you can just do something like about this page other giving some information or or just remove it right now let's start building this page so underneath or customer header here if we can call it that I'm gonna do a breadcrumb so I'm going to start with adding a column and button and then but into the y-axis to be free inside this I'm going to create a row so that row and then inside this row I'm going to create a column so inside this column I'm going to be creating a breadcrop so what I'm going to do is nav and then inside this nav in fact this is going to have area label equals breadcrumb and inside here we can create an audit list or L like so and this ordered list we can have a class name of breadcrumb Dash item like so I'm inside here we're gonna have a list now and this list is going to have a class name of breadcrumb Dash item and then the first one the first item is going to be a link to our home page so we do slash and then inside here we'll put dashboard so say we need one more so hold shift down and this is going to duplicate and instead of breadcrumb item we need to add one more active so this is the active link which we're on right now and this is going to be new customer like so and in fact we don't need the link here sorry so let's remove the link because this is not going to be clickable and save now the reason I created a row and a column is because I wanted to have two of them so inside here we're gonna do another call this time this code is going to have text Dash end and then font weight to be lighter and inside here I'm gonna do something like B both and user ID and let's say this in fact this is not going to be relevant to this page but it's going to be but it's going to save us a lot of time for the next page that we're gonna do so let's study this up super quickly and say if you go back to the page refresh you will see that right and that needs to be we need to remove the dash from here and also the oil of class Branch program item needs to be we need to remove the item save this and now we go back refresh you'll see that we're getting the dashboard link going back to the dashboard and the new customer so if I click on that we're going back to the dashboard and if we click on new user we're going back to the new user perfect now let's start building all first forms so we can insert some data in order to do this let's tidy things up and move after this so this is where we're going to be creating our form in fact let me close everything for now and say so we're going to be creating a totally normal form that is going to post data and save it so the database let's start by writing a normal form like so and the action which is very important is going to be slash add so we want to post data and I'm going to show you how we can deal with that in a second and then inside here we're going to put the method of paste so we're posting date we're gonna have to create a few inputs but once we've created two It's Gonna Get Easier so let's start with creating a div with a class of row and then form group dot margin bottom or four two columns so call one and then inside the First Column I'm going to have a label so this label is going to be for the first name and I'm just gonna say first name like so and then after the label I'm going to create an input and this input is going to be the type of text and then it's going to have the class name of form control the ID is going to be first name the name which is very important this is what can I get or data across so we're gonna put that as first name as well to make it easier the value is going to be empty but I'm going to put a placeholder of first name in case and also we can do some validation with the browser without doing any JavaScript and we can just put required like so one thing about bootstrap is that you can actually do a lot of validations with JavaScript and bootstrap but to save time I'm not going to be doing this today so I'm going to do it the lazy way of doing it with this required but it's going to work just absolutely fine and also when we do the model or database that's going to have some validation as well I don't want to mention that I do have a video on backend validation if you want to check this out I'll link it in the description below now the next thing that we can do is literally copy this and paste it and where it says first name we just need to replace everything with last name so last name this is going to be last last name so I'm going to copy the ID needs to go last name name needs to go last name the placeholder needs to go last name save and this is also required now that we're done with this we can actually do another row so I can copy this paste it and let's just add two more Fields this is going to be a telephone and the label is going to be for tell just for short and then I'm going to say I detail first name sorry name is going to be tell value is going to be empty placeholder is going to be telephone and we can also have it required the next one is going to be email so this is going to be email let's change this to email as well and now we can replace the ID to email name to email value empty placeholder can be just email and then we can set this as required as well and now we can do another div for the for the customer details maybe one thing that I just spotted now this needs to be form group sorry about that so I need to change it everywhere oh it's only two of them okay that's all good so what I'm going to do is copy this form group paste in here and I'm going to remove the first one and in fact I'm going to remove the call like so we probably don't need the row either and we should be good to go this is going to be the customer detail so I'm gonna have label for details and I'm going to say customer details and then this is going to be this is not gonna be an input this is going to be a text area and then this text area is going to have a name of details ID of details rows of 12 and I'm going to say a placeholder to be customer Adidas save this and the last thing that I'm gonna do is copy this one more time paste it and insert here I'm gonna create or submit button and inside here I'm going to do a button and this button this is very important is going to be the type of submit this is what's going to submit the data and now we're gonna do a class of BTN BTN primary and then add customer save if you go back to the page hopefully we should be able to see the page it looks this looks a little bit odd let me have a look at what I've broken so the text area probably needs some classes so it needs to have a class name of form control save this let's go back and that's looking a lot better so if I was to submit this you'll see that we do have some browser validation and this is purely because we have the required here all right now we need to create the post route so as of now we have a get route so we can go to the customer page but when we click on this we need to be able to post data let's go back to our route customer and maybe let's just make a space and here where we have the add customer add customer controller we can copy this and instead of get we need to change this to post because we're going to be posting data and this can stay the same so we want to paste on the same page but instead of ADD we can maybe do paste like so and we need to create this so if I was to do control and click on this one here this is going to lead me to the controllers customer controller here where we have all of the controllers and now we need to create this controller so what I'm going to do is copy this and then go here and then instead of get I'm going to do post and then I don't create new customer something like this and instead of add customer this needs to be posted as well very important it needs to match the route here by his customer and now you can change the title if you wish new customer added and we want to render the same page which is absolutely fine now before we do anything with the database let's have a look at how we can actually grab the data that we're posting so we have the forms each form has a name and we can use that name to actually grab the information and paste it so what I'm going to do is when I click add I'm gonna post some information and we want to display in the console here so to do this we're gonna do all of it in the uh post controller here and what we can do is do the console .log and then we can do the request and the body information if you remember early in this tutorial inside the app.js we added the where is it we added the express URL encoded and this is what's going to help us to grab the data so let me show you what I mean so inside here we have console.log request body and if I save this and if you go back all right let's put rad a some telephone numbers an email and then customer detail let's post this and now as you can see the page posted and it rendered but nothing actually happened visually so if I go back to the console you should be able to see that we actually got the data that we just posted so we have the first name the last name the telephone email and details so we actually can use this now to post into the database but before we do that we need to create the database Fields kind of like if you're familiar with mySQL you need to create each field so let me show you how we can do that and this is called Model so we need to model our data if we go back to the Explorer and under let me untoggle everything if we go to the server we can create a new folder called models inside this models folder is where we can create all customer model inside here we can do customer dot JS and now we need to require Mongoose so let's do cons mongoose equals require and then we are requiring monkeys like so and now we need to create a schema in order to do this we can do the const schema equals mongoose and then dot schema and now we can start creating all customer schema by doing const customer schema it goes new schema and inside here in curly bracket we can start creating or schema so we're going to have the same Fields as you know form so we can start with first name we can do different options today I'm gonna keep it simple so I'm going to do a type and then this is going to be a string I can set this as a required field by doing required set to true and now we can pretty much copy and paste this by doing comma and let's just copy this paste it and change this to last name because it's the same it's just a string it's required and then we can do the same for tell or telephone so string required email uh we can do string required created add so this is when we create the record it might be useful to know that so I'm going to do created that and instead of type string I'm going to do date this is going to be automatically created and the last one that I'm gonna do just in case which is going to be the updated that so if we update or record maybe we need to maybe we can put that in there as well and I'm gonna do the type of date again and this can be required or do we need them required I don't know maybe that doesn't need to be required and the last thing that we need to do is to export this by doing at the bottom here working the module dot export because mongoose dot model and then inside here we put the customer model and then we export the customer schema alright cool we have all schema configured here but we actually need to include this into a customer controller if you wish to use it so if we close this let's go back to the customer controller which is on the server controllers customer controller and at the top here we can include the customer controller so by doing cons customer this is going to be the keyword that we're going to be using later you will see and then this is going to be equals require and then we require dot dot slash models slash customer like so and we also need to add Mongoose in here as well cons mongoose because required and then inside here we require Mongoose like so right let's have a look at how we can actually use this model now in order to be able to insulinate let's go back here at the bottom where we're posting the new customer and we've already saw that we can grab the data by doing rack.body and we were able to display inside here which is great if we go back in here I can leave this in here just so you can have as an example but what I'm going to do is I'm going to structure the data as a new customer so it's easier to work with so what we're going to do is const new customer foreign and then in curly bracket we're going to start typing the field so for example first name the important and then we can grab the data from the rack.body so inside here we can grab first name last name tell email and details by doing reg dot body so what I'm going to do is copy this and in fact if you wish to you can just do it manually you can just put red and that will be inserted but instead of course I want it to be dynamic so we can do rec.body and I'm gonna put the first name to access that object so we can do so with a comma we can do alt shift down and we can change this to last name and copy this paste it and then I can continue doing this for the rest so maybe details details copy tell is going to be tell copy email this is going to be email in fact in our model just in case remove the created that required okay just in case let's remove that all right now that we have this object here and we can get all the data very important thing inside here is that we're using an asynchronous function and we can wrap everything into a try catch for example inside here I can do try catch we definitely don't need this because we're gonna be redirecting let's close it and inside the try is where I'm going to rest the render so I'm going to move that inside here but we need to create that record and to do this it's actually fairly simple we can do a weight customer which is our customer model that we inserted here at the top customer and then we can do dot create and then we can pass the data from the new customer object in here and save now when we do this what I'm gonna do instead of res dot render I'm gonna actually do rest redirect on the rest of the redirect I'm just gonna do in single quotes slash so we can go to the dashboard and I'm going to show you how we can use Splash messages just so we can say Okay a new user has been added and then let's study things up and then for the catch let's just do console.log and then the error oops like so okay this should be good enough in order to be able to insert data so let's go back to the browser super quickly inside here inside the collection let's refresh now you might be wondering well how did you create the test and the customers well first of all the test was actually created one way because we saved the project here node mode refreshed and it went to dot EMV and this is where this comes from so that's why you can change to whatever you like and then the second reason that we have the uh the table there the customer table is because we created the model in here and we've actually included it and we actually included it in our project and that's how I created it so saving this save absolutely everything um how do I remove the required for the created add and the updated art just in case and yeah save everything and now let's have a look whether we get some data so I'm going to go back to the website dashboard maybe click add new user and then I'm going to put red a telephone number the email and then node.js add customer and now we're going to dashboard which is a good sign and now if you go back to the database here uh there is there is a refresh button on the right side here and here we go we have our first object in here so we have a unique ID that we can use later on in order to query customers we have the first name the last name the telephone and the email which is awesome all right so everything is looking good but created that and the updated app didn't work and this is because this is why I got a little bit confused but basically inside on models I forgot to do something this is when I added required and I was like that doesn't look good okay so instead of so type date is correct but we need to set a defoot created that and the and default updated that and in order to do this we can just do color and inside here we can do default and enter the food value for this can be just the JavaScript date dot dot now like so and we can copy this and paste it so comma updated that is going to be the food date now so you can do the food values inside here as well save this let's go back and let's try to insert another record so dashboard add new user uh I'm gonna put Bob hey one two three then I'm going to put email Bob on the website and then and then Bob's details add customer and now if you go back to the database refresh okay now we have two records in here I'm gonna delete the first one and now we should have the last record in here which is Bob last name a telephone number email and now we have the created that and the updated that which we can use in our application all right what I'm gonna do now is I'm gonna post the video super quickly and create a couple of Records so we have something in our database and potentially I'll include those records so you can add them as well so you don't have to do it manually basically what I've done is I've created a super quick query that is just there's a weight customer insert many and then I'm just listing a couple of customers here like so just so we have some data and I'm gonna copy this and make sure that you have this as well if you wish to win or I can just put it as a Json file and then you can do this okay so save I'm Gonna Save this and hopefully I haven't tested it but we have one object in here hopefully if I go to dashboard and if I go to add new now if you refresh I should have a couple of users okay cool all right we have a couple of users and now we can start looking at our dashboard and the other Pages Cool all right I'm definitely gonna need to remove this otherwise just gonna keep adding stuff so since we since we just learned how to add data one thing that you might notice is that when we add a data it redirected this to the dashboard and we didn't really know that the data was inserted and for this you could use Flash messages but it's a little bit confusing but super simple so I'm going to show you how to do it so in app.js we need to include press flash messages and we can do that maybe around here so what I'm going to do is const in curly brackets I'm going to bring flash and then this is going to be equals require and then inside here we're gonna do Express flash messages like so and say so in order to be able to use Flash messages we actually need to bring Express session as well so so we're going to be using cookies and to do this we can do cons session and inside here we can do equals require and then inside here we can do Express session like so somewhere under static files maybe here I'm going to do another comment and this is going to be called Express session and I'm going to do a very basic example from the documentation so let's do app.use and inside here we need to do session foreign for example we need to set a secret word for this example I'm going to keep it simple resave I'm gonna put two false then we have save initialize this needs to be set to true and then we're gonna have cookie and then this needs to be set to max age and then the edge of the cookie 1000 times 16 times 60 times 24 times 7. which is one week okay that should do the job now we need to apply the flash messages middleware so somewhere inside here and to this we can do app.use slash and then inside here we can do session key name flash message make sure you close this and that's looking good all right restart the application and something is not looking good flash is not a function alright so I'm getting an error saying flash is not a function and originally I was thinking that it could be expressed messages but Express flash message but what I've done wrong is when I was installing Express message I actually installed Express flash message jet so what we need to do is close our application and then we can do clear and I'm gonna do npm uninstall and then I'm gonna do Express flash messages so we can remove this and now I'm going to do npm install if we install and remove the S at the at the end so press enter okay hopefully this should work now so so now we have message in here which is good save it and now we have so now we're requiring the message we also have the express session in here and we have the flash message middleware save this let's go back to Powershell and let's do npm start and now okay application is not working if we go back to the website everything is working and now we can start using the flash messages cool all right to do this it's actually fairly simple so what I'm gonna do is close up.js so we have rest dot redirect but before that we can create all flash message so I'm going to do a wait request dot Flash and now inside here I'm gonna do info and now we can do new customer has been added this requires one more step and we need to go to the dashboard page which is here at the top which is our home page at the moment and we need to include the message in here so cons message equals a weight Quest dot consume consume Flash info now we should be able to pass this message just like we're passing the logos but because we're passing two objects so we need to put everything into curly brackets like so and space them out with a comma so comma and then message and in fact instead of message put this as messages sorry like so and save and now if you go back to the Explorer and open in views open the home page or dashboard page inside here just to show you first of all I'm going to do ejs ejs and then I'm going to do ejs out here and I'm gonna display the messages like so now if you go back to the browser and refresh you will see that we have nothing we have no messages but if you go to add new user let's add a new user super quickly add customer now we have new customer has been added and this comes from the controller here at the bottom which is new customer has been added to make this look a little bit better to make this look a little bit better what we can do is wrap this into a bootstrap alert so to do this we can do dot alert dot alert success dot alert dismissable dot fade Dot show press enter and inside here is where we're gonna put the actual message we can set the row for this to be alert just like in the bootstrap documentation and then we can create the dismissal button which is going to be a button or the type of button the cars or BTN close data Dash push drop Dash dismiss it goes alert and then we can do area label off close and then close the button all right hopefully if we refresh now we're getting more alert here we're actually getting an empty alert here and there are two ways of doing this if you have more messages if this object contains more messages we can wrap this into a for Loop or you can simply check whether the message is empty or not so the first way would be let's just do a full loop like so or no for each here we go each and now if you have more messages in here we can definitely uh display them so I'm gonna with this I'm gonna put everything inside here and instead of messages now this becomes the message because we want to live through it and I'm gonna keep this element as element and instead I'm going to change this here so We're looping from messages we're giving it a name of element and then we'll literally Loop in from and then we are literally inserting the element if this had more elements in it so save this and now if we go back that problem itself let's add a new user Bob a telephone Bob one two three but here we go new customer has been added and that doesn't look right so I can fix it super quickly and this is because I spelled dismissable wrong it needs to be I cool and now I should fix the problem now and it should look like this and then you can dismiss it all right now that we have a couple of customers we can actually display them here on the page and we can look into pagination first of all I'm gonna start simple for the people that don't want to do the pagination and then we'll build on this so first of all let's go back and find the customer controller and let's scroll to the top where we have the export homepage so most of the stuff it's already done and we just need to do a query and get the customer in order to do this we can wrap everything into a try catch let me tidy things up so inside here I can just do try catch and we're using an asynchronous function which is good we can now query the customer so this is going to be the basic version to start so let's do const customers and then this is going to be equals await and then we're gonna do customers foreign ER here customer model and then this is going to be dot find and then inside here we can just put curly bracket which is literally going to find everything inside customer and we can chain this and put limit like so and then the limit can be let's say 22 right so the maximum customers that we're gonna get will be 22. now in order to be able to display them we can do exactly the same thing as logos and messages so I'm going to grab this put it into or try here and then this is going to be rest dot index and then we're passing the logos the messages and we also want the customers here we go here is the customers we're passing that and technically speaking we should be able to get the data now and and inside the catch we can do for now we can just do console.log and then and then the error if we go back to the page refresh everything is looking good let's build our little table now if we go back to let me close everything so we're gonna go back to the index.js which is our dashboard here inside views and now after the flash messages here we can build our table let's create a div with the class name of table responsive and inside this div we can create a table and this table is going to have class of table striped and table small we're going to create the table head by doing the head like so and inside here we're gonna do a table row TR and then inside the table row we're gonna do the H and inside this in fact this is going to be scope equals call and inside here we're gonna do first name and now we can copy this by doing old shift down this can be last name telephone email and then action this is where we're gonna put the buttons and for the action I'm gonna give it a class name of text text and to appreciate at the bottom you'll see in a second and then for the table body around here we're gonna do T body and inside the t-body we're gonna do A4 reach to Loop the elements so for this I'm gonna do let's do ejs and then I'm gonna put the each here so for each so we're getting the customers we pass sorry we're passing the customers from here let's copy that and put it and we are looping for them and you can call this whatever you like I'm gonna keep it as element and now inside here we're going to create the table rows so TR with the class name of align middle I'm gonna open ejs and put ejs out like so and let's do element Dot and then we do first name we copy this one two three four so this time we have last name tell email and actually for this one we need to remove this because we're going to be adding a bunch of buttons in here so I'm going to do a div with the class name of the flex row justify content end and then Gap two inside here is where we're going to be adding The View button the edit button and the delete button so let's do that these are going to be links href the first one is going to be View and then we're gonna put the element ID so for this I'm going to do ejs and then out we can grab the element and then the ID of the element in mongodb is just ID if you go to the database you'll see that and this is going to be a link with the type off button the class name or BTN BTN primary and BTN small I'm also going to add an icon that I've copied for brief strap icons and this icon is I class b i Bishop icons b i Dash I which is just an I so I'm gonna copy this so this is going to be a viewing button you'll see in a second and this is going to be or edit button and again we're going to leave the ID and instead of the primary we're going to do warning and that's pretty much and instead of the eye I'm gonna do pencil because this is an edit button and the last one is going to be a little bit different this is going to be a form and I'm going to show you how this works later on so I'm going to do form and this form is going to have an action and this is gonna have the action of edit slash and then the element ID like so but also we need to chain it with method equals delete and I'm going to show you how this works don't worry also we can do method post and class position reality inside this form we're gonna have a button that's gonna actually submit the form so type of submit class name or BTN BTN Danger and bdn small close this button and inside this button I'm gonna add another icon and save so we've written a little bit of code in here hopefully there is nothing wrong with it let's save it and let's go back to the page and refresh all right awesome uh that's not too bad so we're getting the first name we're getting the last name the telephone number and the email and we're getting the icons I do want the icons to be on the right side so that will be a case of just changing a class name potentially let's have a look and to this table data we can just give it a class name of align of text end and hopefully that I should summation all right text in and I've misspelled justify content I think let's have a look cool yeah that's it so we're getting 20 to results I don't know how much we have in the database and if I go back to the database and refresh so we have this one two three record here let's go to the bottom and here it is updated this let's just update all right so I've updated the record and if I refresh you'll see that it says updating this cool all right so for the people that want to do the pagination this is what I'm gonna do next you don't have to do it it's a little bit more complex than this and if you don't want to do that just skip this part and so on now and then the rest will work absolutely fine it it doesn't really matter so let's do the opportunation next so photoregenation we're gonna have to do a more complex query so in our customer controller where we have our home page at the moment we just screen the customer database and we're getting the 22 racket now this is not good enough in order to do the pagination we're gonna have to do a little bit something a little bit more complex and so for the people that don't want to do this I'm gonna I'm going to copy this and comment it out so we have it here as an example when I upload the code on GitHub but what I'm going to do is paste in here and start modifying this quite a bit all right by the time I actually coded this video hours on Mongoose 6.9.2 and now we're 7.0.0 and they're already new changes which is in a way a good thing so you get the latest but it's annoying that I had to pause and read the some of the code that I did but it actually ended up being better anyway so what I'm gonna do now is leave this as it is and I'm gonna paste it here and in fact the new code 1b2 but for the home page we're gonna have all flash messages here that's fine we're gonna have all title and description that's fine but now we need to have a look at the paginations that right above try is I'm gonna set the how many requests do you want per page so I'm going to delete but page equals 12 and then I'm gonna do let page equals and then request Dot query and then Dot Page or one so basically this is gonna grab the query parameter called page from the URL if I go back to the browser and if you have a look here at the URL if you do question mark and page for example and then if you put a number so let's say two this is what we're gonna be getting we're going to be getting this parameter by doing rack dot query page and of course you can change the name of whatever you want but if we don't get one so if we don't get a number that the food value is going to be one all right and inside here we need the accounts and the customers equals a weight and then we're gonna do customer don't aggregate I want to basically get the record sorted by updated at and in order to do this in curly brackets inside here we can do sort and then we're gonna do another curly bracket and then updated add and then we're gonna put minus one after this we can chain a few more options in here so I can do dot skip and then we're gonna do per page times the page and then minus per page then we're gonna have the limit and then this is going to be a page which is currently 12. and then the last thing we're gonna do is execute this I'm not actually sure whether we need this now uh but let's go with it the next thing that I'm gonna do is count the customers and in order to do this we can do const count equals and then await customer dot count and then we close now let's render all of the data so rest dot render and we need to render the index page and then in Cali bracket we can start with locals which is our title and description customize like so which is the data from the database and then the uh we're gonna need the current page page which is the page from the URL like so so that's going to be helpful with the imagination and then we're gonna need the pages and we want to run this by doing math dot Sally and then count divided by [Music] page like so and we're also missing the messages so I'm gonna add them in here this is The Flash messages and we should be good to go I believe so if we close this 30 things up save everything go back to the browser and refresh okay we're still getting the data which is great if I was to change this to either one I believe let's have a look yep we are getting a different order it's actually working so that's cool updated so now let's build the pagination and I'm gonna be using the bootstrap pagination styles to make it look nice if we go back to the Views and then index.js just outside the table that we created the responsive table where we're rendering all the data we can do the pagination inside here and before we begin I just want to explain how this is going to work so opportunation is going to look something similar to this we're gonna have first link and then in between we're gonna have the pages so one two three four five and then if you have more than five we're gonna have the dot dot dot which is not going to be clickable and then we're gonna have another link called last so essentially if you are on page one the first link is gonna look disabled if you are on the last page the last link is going to be disabled because you won't be able to click it but if you are anywhere in between those we're gonna have the first one clickable and the last one clickable and of course they're all going to be clickable as well and that's how it's gonna work pretty much so let's start by building this first of all if we go back to the query here you will see that we are passing the customer so there is no point of actually rendering the origination if you don't have any customers so what I'm gonna do is I'm gonna do an ejs if condition here and I'm going to say if customers dot length is bigger than zero then we can display the pagination and now if we go back and refresh you'll see that we're getting pagination which is good let's remove that and let's start by writing the navigation so I'm going to be using the example from bootstrap and let's start by doing nav we're gonna have a area label and this is just gonna say dashboard imagination like so and then we're going to have an unordered listing here and then this unordered list is going to have a couple of classes starting with pagination then justify content Center we want it to be in the middle and then margin top of five like so and then inside here is where we can start doing the checks and also we can start building the list let's have a look at the first one here and I'm gonna do ejs if and then the condition for this is if we have the current page which we're passing from here so we actually get in the page from the Euro and then we're passing it here so current so if the current page is equals equals one then we want to make sure that the first link is there but it's disabled so what I'm going to do is create a list this list is going to have a class name of page Dash item and it's gonna have the cast name of disabled like so and inside here we can create a link href I'm gonna have it as an empty link and then this is gonna have a class name of page Dash link and then we can just say first like so and then I need a nail statement we need to open it DJ yes close it and now inside here we can pretty much copy this list like so and then instead of disabled we can remove this and we can change the link to question mark page equals one so this is the uh if we click on it it goes to page one in fact we can just put slash because that's the fourth page but uh that will work either way okay and save Let's test it so now if you go back and refresh you'll see that we're getting the first link and it's disabled because we're on the first page technically speaking if I change this to you should be able to see it that it lights up and now I can click on it and it goes to page one okay so let's go back and let's do the rest the next piece of code will be actually the first dot which I kind of didn't explain so it's gonna be first we're gonna have dot dot dot if we are on page above five we can put dot dot and then we will have uh let's say one two three four five and then we'll have blast and then if we are all the way around if you're on page five we'll have the dots in here all right I hope that makes sense you'll see how it works in a second let's start ejs and inside here we're gonna do a variable of I equals we need to convert the current number to number so number current and then we can do a check if it's bigger than five or we can do number and then current we can do the subtracted by four and divide it by one and then inside here we can do ejs and if I is not equals one then we can display the dot so now we can do ejs close this and inside here we can pretty much copy the disabled link here so I'm gonna copy this one paste it uh we need to close it okay so page item disabled the link can be disabled the page link is fine and instead of first we're going to do the dot dot now we probably won't see this if we go back uh yeah we won't see this unless we is because I don't have enough record so we'll see this in a second or I need to change the query right we'll see this in a second how it works the next piece of code is going to Loop through the numbers so let's build that we need to do a for Loop so I'm gonna do bjs4 and then inside here we're gonna in fact I'm gonna change the whole thing so we need to initialize the uh I and then I'm gonna do less or equals the number and then we're converting the current into a number and then we can do some checks so plus four and then these are here we can do and and I less or equals pages and then we do I plus plus and inside here we can do an if statement so ejs if and then the condition for this would be if I is equals equals the current page then we want to show a disabled link so I'm going to copy this one here and Page item disable that's fine that's fine and instead of this we're actually going to change it to the actual number That We're looping from so I'm gonna do ejs and then out and then just put I right save this and let's have a look super quickly we have both the first links here disabled but do it but they're popping out and now we need to do the rest so we're gonna have a nails and then inside here I'm going to do ejs close DL statement and get another link so this one here and this one is going to be list class page item we're gonna remove this and we're gonna change the link to be slash question mark page and then we put the number here so we want this to every single link to change so what I'm gonna do is open ejs like so here we put the number and then again we render the number in here so it's visible to the user so now if I save this and if I go back to the page and refresh we're getting an error and this is because I've opened else and this is because I spelled elsewhere again else okay and now we should be good to go okay so we have first one two and if I click on two we're getting some more record and they light up if I go back to one we uh this is switching okay great let's have a look at the rest the last one is gonna be the dot dot dot link so for this I'm gonna do another if statements in here EGS if and then the condition for this is going to be if I this equals equals number current plus four and and I smaller than pages we can close it yes like so and inside here we can get another list so maybe in fact this one here the disabled one and then we can do page link can stay the same but this one I'm Gonna Change to dot dot dot like so and that's it and the last thing that I'm gonna do which is gonna be let me fix the indentation super quickly and the last thing that I'm gonna do which is going to be pretty much the same as this so you might as well copy it this is going to be the last link but it looks like I've closed another EGS in here which doesn't look good right hopefully that will work I removed it yes seems fine okay maybe I just put one extra that's fine so let's paste it in here and then this one is going to be different is equals equals pages and then the first link is going to become last uh this is gonna be Gonna Last as well and instead of doing this we're gonna change it to ejs and we're gonna do pages like so remove that okay I think that looks good if I go back you'll see that we're getting one two and last if I click on the last page we're getting page two with all the records and if I click on the first one we're getting the first one now if we go back to the actual query and the customer controls and let's change this to another uh six maybe and then if I go back hopefully yeah we're getting more pages now so we need a little bit more record so I'm gonna put this but a free per page here we go so we go free per page makes it look like we've got more records but uh when we're on the first page here we can't click them we can click two three four five six and now we can click the last because we're on the last page we're getting the dot dot I can go first last and so on so I'm gonna put this back to 12 but you get the point and that's pretty much gonna be all pagination all right let's refresh and now let's have a look at how we can view customers make a nice Details page and then how we can edit them and also delete them so starting from the first link here let's go back to the actual link which is under index.ejs and we've got them in here so we link this under views and we are passing the element ID of the actual record so this if I inspect this super quickly and we have a look it's I'm not sure if you can see but this is the ID of the record so if I was to go to the to the database you will see that each user has unique identifier and that's done by underscore ID and we can use this unique identifier to create the specific records and that's how we are getting it from here basically that's pretty much it so we need to create this view page and then we need to pass the ID first of all let's start by closing this down and let's go to views customers and let's create the page so inside here we're gonna do View Dot ejs and then I'm going to put View Customer just for now and then we'll come back to this we also need to do the route so inside route customize somewhere around here we need to add all new route are they around here and what I'm going to do is copy one of them let's copy a get route and this one is going to be router.get View and in order to be able to pass the ID and grab it from the URL we can do something like this so you can call this whatever you like I'm just going to call it ID and then for the customer controller I'm just gonna say Anna let's say V of your customer whatever you wish so let's keep it like that and now we need to create this controller so if I go to the I'm going to copy this if I go to the controllers somewhere at the bottom here let's create a new one so this is going to be get customer data and I'm gonna copy this from here super quickly so we have exports View async and then we close and now we can do the logic inside here so this is actually going to be pretty simple so what we can do is try and then inside here we can do const customer and then this is going to be equals the weight customer Dot point one and then inside here we pass the ID we want to query it by ID so ID and then we grab the parameter from the row which is going to be request.params dot ID this is how we grab it from the Euro I'll show you how it works all right and now we can do exactly the same thing that we've been doing with the rest of this stuff so we can set up some locals uh let's copy this and then this these logos View customer data that's fine and then we can do rest or render and then we need to render the page that we want to render so in this case this is going to be under customer which is here and then this is going to be slash view which we just created and then we can pass the stuff that we want for example we can pass the locals that's the title and description and then we can pass the customer data which we grab from the database right now and now after the try we can do catch and then we can cache the error underneath that here [Music] so that's pretty much the video all we need to do is render the data and make it look nice so if we close this and if we focus on the actual make sure that you save this by the way and if we focus on the actual view page in here let's make it work so first of all if we go back and refresh everything should be working and if I click on one of the records you'll see that here we're getting the buff view with the unique ID of the customer that we just selected and we're just getting View Customer because we don't have anything on the page just yet the first thing I'm going to do is grab the header from index.js I'm going to grab this just to make it look nice and I'm pasting here so instead of dashboard View customer and in fact let's display the customer name just to check whether this is working so instead we're going to do ejs and then for this we're gonna do customer fact equals customer DOT first name and then we can also do ejs let's do the last name is on so the same thing dot last name like so and save if we go back hopefully that would September Orton very cool name uh if we go back and if we click on Commit backup we should get coming back up which is pretty cool so we definitely don't need this add button here in the toolbar but maybe I'm gonna keep this empty for you maybe we can do something else like let's say a button a type of button just to make it look nice but it's not good it's not gonna do much so BTN BTN small BTN outline just so you have an example and then this is going to be secondary and then maybe you just put share I don't know what you're gonna do um we can copy this one one more time and then do export we're not going to be doing these features but just to show you that you can add them in here and make them look nice because we have this add new button in here that's pretty much it let's go to let's go back to coming back and let's have a look at the rest I'm gonna create a bunch of divs and display the information in a nice way so I'm gonna do call button to the y-axis or three and then inside this column I'm going to do a DOT row and inside this row I'm gonna.com and inside this column I'm gonna put some breadcrumbs so we've already got a breadcrumbs somewhere inside the app page I believe so I'm gonna copy them um here they are navigation breadcrumbs I'm going to copy them and paste it inside here and then this is gonna go to dashboard and inside here we can render the customer first name if you wish so instead of new customer we can render customer name save go back and we get a nice little breadcrumb in here cutting things up and now to make it even more fancy we can do another column and inside this column we can in fact let's give it a few more last names so text and because I want to push the text to the end font weight of lighter and then inside here I'm gonna do just some demo stuff let's say B and then I'm gonna say last updated and then inside here I'm gonna do EGS and then we can get the customer last updated but in fact let me show it so let's do customer dot last update no updated add is the last updated or updated ad I cannot remember updated ad is what I've used Okay so updated add and make this equals so what's gonna happen here if we go back you'll see that we're getting a lot of information last updated and then Sunday March 05 2003 and the time Greenwich name and so on now with a little bit of JavaScript you can convert this to whatever you like there are also some nice libraries that can help you with stuff like that but what I'm gonna do here is I'm gonna do new date then I'm gonna put the customer updated ad inside here and then I'm gonna do this too UTC string and then close the function like so and now if we go back you see that it makes it a little bit better for me so last updated Sunday 05 March 2023 and I'm gonna do a moon here so B to make a bold I think user ID and I'm gonna put the user ID inside here maybe I can put it after the B so I'm going to do ejs out and then we're going to do customer Dot underscore ID and now if we go back we should be able to get the customer ID we can do it a bit of space between them and make them both but these are things that I'm gonna do a little bit space lecture okay but these are things that you can always work up so now let's have a look at how we can list some of the customer data and I'm gonna do another div inside here and make it look nice so in fact this is going to be an unordered list with the class name of this group and then inside here I'm gonna do a bunch of lists so list and then this list is gonna have a class name of list group item there are a lot of ways you can style this but I think this is just an easy nice looking way and then we're going to create a row with a column and then we're gonna have this column I'm actually gonna do a little bit of styling here and you'll see why style and this is going to be equals max weight to be 140 pixels you'll see why in a second and then inside here I'm gonna put the name so in both name like so we close the div and then on another line I'm going to do another call and then inside disco we're gonna grab the name so ejs equals and then customer DOT first name and then I'm gonna do space ejs customer dot last oops last name like so save it and keep opening this now if you refresh you'll see that we're getting a nice table here and we have the name of Kami Becker I can zoom in a little bit just so you can see and now we can do the same pretty much for the rest of the styling and that will be really fast so what I'm going to do is copy this and the first one is going to be the telephone so I'm just gonna put tell and then instead of first name we're gonna put the Del and remove the name from here drop them save it yep looking good now let's do the rest this is going to be email let's do a few more details details maybe we can do created add so date created Maybe created add and then one more and this is going to be the updated date modified an updated app let's have a look at what we get right so naughty but details is the only one that didn't work um all right and this is because when I was building the actual database I actually forgot totally forgot to uh do the customer details and this is an easy one you can just go to the customer model and add one more field for example after email we can put details but now my database doesn't have any of the information so what I'm gonna do uh details will be absolutely fine let's have a look so maybe I can put rad a telephone number email and then rallies details okay if we submit this hopefully if we go back to the database I'll have to create new records with that field let's have a look so we have it's probably going to be at the bottom okay yeah we have radish details in here and yeah I didn't create any of the records with the field in mind anyways so if we refresh this we have Rodney and if I click on it to Via you see that the details actually working so I just totally forgot to add this which is why I'm not going to convert those because I've already showed you how you can do that um but that's pretty much gonna be all detail View and of course you can build on this and uh make it look the way you want the next one I'm gonna do is the edit so the edit is actually going to be pretty much exactly the same as adding a new user and which means that this is going to be an easy one all right so what I'm gonna do is let's have a look at the edit button first of all let me close everything and if we go to index.ejs and if we look at the edit button super quickly before we do the pagination OR at the edit button here so the early button is exactly the same as the view we are passing an element ID a record ID and basically we're going to another page so let's build that so what I'm gonna do is let's go to the route super quickly and then inside here we can create a new route and let's just space out so we can focus on it and this route is going to be edit again this is a get route and we're passing the ID and instead of view maybe we can just do edit that'll be fine and now let's create this controller so if I click on the controllers uh it's going to lead me to the controllers in here and somewhere at the bottom maybe I can copy one maybe I can copy this one here get data because it's going to be similar so instead of view we're gonna get uh get edit customer data this is going to be edit and then insert here we want to query the customer that we're looking for just like we did in the view uh we're passing some logo so edit customer data that's fine and then we're rendering the page which is customer and then edit we need to create this page so let's do that in views customers let's create one more page but I'm going to copy the contents from add because I believe that most of it is going to be the same so let's copy the whole thing and create a new page and do edit ejs hopefully it will be the same thing all right save this and now let's jump to the top here and let's say edit instead okay so let's have a look whether this works first of all before we do anything else save everything foreign save everything let's go back and now if we click on edit you will see that we're getting exactly the same form as the ad form but now we can just change a couple of things and make it work so the first thing that I'm going to do here at the top header I'm just gonna say which customer that we editing I'm just going to put ejs with equals so this is going to be customer dot oops not Capital small letter customer first name and then we can do ejs out and then customer last name like so and Save if you go back we're getting ready a because I didn't put a longer name let's go to commit here and I'll as you can see we uh oops sorry if we go to commit here and we press edit you'll see that we say edit can be backup or anything coming back go for the breadcrumbs we can do exactly the same here we can get the name instead of new customer we can just print in here and download critical dashboard and then comment maybe we can just do the last name as well you're getting so commit last name like so and that would be cool um user ID is where we can put the user ID as well so what I'm gonna do is put customer and then underscore ID let's refresh and we're getting the customer ID just in case if we need them because we're editing and now we can start populating some of the fields with the real data from the database so view will wrap just so you can see a little bit better and actually just to make it a little bit more interesting I'm going to copy one more line in here and I'm going to change this to last updated last updated and then this is gonna be um I'm gonna have to change this to make it look a little bit better so in the Bold here we're gonna do EGS out and then inside here we're gonna do new date and then I'm going to do customer Dot updated at and then to UTC s DTC string like so and I think that will make it look nice okay we get last updated so every time we update the record this will hopefully change yeah I think that would be fine and now let's have a look at populating the actual form now a very important thing in here is that we need to change the form action so the action at the moment is ADD we need to change this to edit and not only that we need to change this to uh which customer are we actually editing so we need to put ejs in here and customer underscore ID like so close ejs cool so when we press when we submit this form this is gonna edit this customer here now we need to do a little bit more triggering here and what I'm gonna do is question mark underscore method but equals put now I'm going to show you how this works super quickly and we can leave the method first in here now if you remember early in this tutorial we installed something called Method All right so this is going to allow us to do stuff like put the and delete let me show you something quickly if you go to the npm package method all right you'll see that it lets you HTTP verbs are just put or delete in places where the client doesn't support it so that's what we're going to be using and it's actually fairly simple to set up so let me show you so we're going to go back to app.js Super quickly and then at the top we need to include somewhere around here it doesn't matter too much we can do const method override because require and then we require method all right like so now we can do the middleware somewhere around here so I'm gonna do app.use and then we can do method override and then here the option is going to be underscore there are many ways to do this but this one is going to be underscore method and that's pretty much it so if your application yep application is working that's good let's go back to the 80s page and concentrate on done now and now we need to populate the values coming from the database and in order to do this we can do ejs and inside here we can do the customer DOT first name and now I can copy this and I can do it uh for the red so this one we can go back just to check but we're getting commit here which is that the name and now if we go back to last name let's do the same for the Redstone last name then we have telephone I think this will just tell we'll see this is just email and then the customer details we need to change inside the text area here we can put details and now we need to change the submit button so instead of adding customer we can do update customer or we can do another button here which is going to be all delete button so I'm going to copy this and change it a little bit delete customer but I'll have a look into this in a second let's make sure that this is updating and then we'll do the delete as well so if I refresh now you'll see that we're getting all the data we do not have customer details on this particular record but if I go back to rad editor you'll see that we're getting rat details and I don't know why there is a lot of space in here I think it might be because I've done this so let's have it let's remove the space from here so save it and refresh yeah that was goes into space I think so if I zoom out just so you can see we're getting update and delete obviously that can be changed all right and now let's sort out the update customer now when we click on the update customer obviously this is gonna have an action which is gonna be a method but we don't have this in our route so what we need to do is go back to Route and where we have the get so this is rendering the edit page we need to copy this and create one more and this is going to be but instead and then we have edit and the ID which is absolutely fine and then edit and then I can call this something else edit post Maybe right let's go back to controllers and I'm going to scroll down to the bottom and copy the last one that we created which was the edit get customer detail so I'm gonna copy this and paste it in here so instead of edit we need to change this to edit post and so I'm going to change it here and that's kind of it so I'm gonna rebuild the whole thing actually so let's just remove everything and start clean and then this is going to be update customer data customer data and now inside here we're gonna do a try catch and inside the try I'm gonna do the query so we want to get all the data from the form from the edit form this one here we want to get the data and update the record so in order to do this we can do away customer and then this is going to be find one and update and then inside here we put the customer data so we're gonna have first name just like before and then we're gonna do request.body because we are sending uh the information from the input just like within the add-in form and then first name then I'm gonna have to do this a few more times one two three I'm gonna have to do five times so I'm gonna do one two three four five and then I'm gonna start this with uh changing everything last name make sure that you we put comma pretty much everywhere foreign [Music] then we're gonna have telephone tell then we're gonna have email then we're gonna have details and then we're gonna have updated ad and then the updated ad is going to be the only different one we're gonna get the current date with the date dot now like so and then the last thing that we need to do is we make we need to make sure that we are updating the correct record by doing left and then inside here we select which record we want to update and we can get the request parameters so params and then dot ID um and then the last thing that we need to do is redirect to the edit page so the uh so we get the updated bracket straight away so we can do restock redirect and then inside here we can do with the single slanted words we can do edit slash and then dollar sign curly bracket and then request Dot param rams.id and then for the catch we can just do console.log error okay go let's study things up super quickly all right quick update on the update customer data sometimes the record will not update you would find a different record and update another one which is a little weird we don't want that and what I found is that we need to swap the find one and update and instead we can Define by ID and update and instead of having the where closing here I can grab this and I can remove an app like so and we can put the ID in here with a comma and that should serve the issue so now if I go to this user here I can edit it update update okay back to the edit page refresh make sure everything is working fine all right and now if I click on red and say updated updated uh update customer you will see that we have right updated straight away because he updated the record in the database and every director is to the same page so someone if I refresh the database we should be able to see that reflecting straight away I don't know where here we go rad updated and this is the last record here um as you can see the created that and the updated date has changed hasn't it so yeah it has changed so I created it at 12 and now is one and now it's half one so yeah the updated ad has worked and we can do the same thing with the rest of the records node.js and then I'm gonna one two three four five six and then run these details one two three update as you can see everything stays the same I can go to the dashboard uh it's all updated here I can view the record as you can see everything is B everything has been updated which is great last updated and it gives me the the time right now so as you can see 13 37 1337 so that's good so when we click on the edit here we also want to delete customers and we can do that next so if you go back to the edit page and if we go here at the bottom where we created the delete button since we're using bootstrap since we're using bootstrap we can do this potentially in a nice uh fancy way so instead of primary let's do Danger and let's change if you think so I'm gonna do this with a modem so when you click on the delete button it's not going to delete the record straight away it's going to ask you if you want to delete it so this is going to be button type of button we don't want to submit because he's gonna delete the record again and then this is going to have a class of button danger that's fine and now we need to do the data slash bootstrap BS and then toggle and then the toggle that we want to do is just going to be good model like so and then the ID is going to be delete button and we also need a Target so this is going to be data bootstrap Target and this is going to be equals an ID oops an ID of delete button sorry delete Model and then we have delete customer if I save this let's have a look as you can see we're getting the delete button here which is fine and now let's create the mode of super quickly so for the model I'm actually gonna create it at the bottom here there is a lot of examples on the bootstrap documentation if you wish to copy and paste one but I'm going to create one super quickly so dot module dot paid because we want that nice paid animation and then for this we're gonna have tab index of minus one row is going to be dialog and the ID is going to be the ID that we just added delete button like so and then inside here we need to create a few more divs so model dialog and this is going to have the row of document inside here we're gonna have a few more divs model content and inside the motor content we're gonna have model header the model header is gonna have model title and I'm gonna paste you are about to remove a customer record and then inside here we're gonna do a button this button is going to have the type of a button with the class name of BTN close and then data Dash bootstrap Dash dismissed equals model this is what's gonna close the model an area label to close but I think that's it here so for the body we just want to put some text so I'm going to do Dot model body and inside here I'm gonna create a paragraph and I'm going to paste something super quickly and this is going to say this will remove the customer record of I'm just putting a boat and then customer first name customer last name and then I'm just doing a break just so we can break this on another line and you just can you and it's just asking you are you sure now that we have the body we have a little bit more to go the last piece here which is the footer so dot model filter foreign I'm going to create a button and then this button is gonna have a type of a button class name of bdn Dash BTN bdn secondary data that are very strap Dash dismissed model and then this is going to just stay close we can put that back in one line and then the last thing we need to do is create a form which we can submit and delete just like we've done on the update so I'm going to deform and this is going to be very important here we need to put edit slash and then DJs oops I'm going to open ejs like so close it and inside here we're gonna do customer ID underscore ID and then again we're going to do question mark underscore method and then this method is going to be equals delete foreign this one we need a button that is going to submit so button with the type of submit and then this is going to have the class name of PTM BTN primary and I'm just gonna say yes remove guess not and let's have a look whether this works so save everything all right if I put the lead customer it's not working and it's because the ID does not match or ID inside here delete Model so I need to do that instead all right my mistake and now if I save and if I go back we should be able to click the delete button now it fades in and it says are you about to remove you're about to remove this customer this looks a little bit small but these are things that you can fix and this will remove the customer of rat update in node.js are you sure so if I click yes if I click close first of all this will close if I click this it will close and now if I click yes remove customer nothing is going to happen and this is because we actually haven't done the delete route yet so let's do that so if you go back to Route customer where we have put we need to make a delete one so I'm going to copy this line and put delete then we're deleting on edit and we're passing the ID and then instead of edit post what is it called a post oh okay it doesn't matter it's because we're posting uh yeah the naming could be a little bit better but it doesn't matter maybe I can put delete Crystal or I didn't think about it so delete customer and let's create this delete customer inside the controller so at the bottom maybe we can copy this one here and paste inside here so instead of get this is going to be delete customer ah this is going to be actually fairly simple so I'm gonna do so I'm going to remove everything and instead of edit post we're gonna do delete customer so here we're gonna do try catch super quickly and let's do console.log error and then for the try all we need to do is await customer and then we can do dot delete one and then we need to pass the ID that we want to delete cell we're gonna do underscore ID and then request Dot params dot ID which we are passing on submitting the form and then the last thing that we're going to do is redirect rest dot redirect and then we go to the dashboard for example and you could do another and you could do another flash message just like we've done with the added customers but to save but we've already done that so uh that will be your little challenge what we're gonna do now is go back to the page refresh and let's delete this customer so I'm going to click yes remove customer we have been redirected and now this customer is gone if I delete this one as well so let's go here delete customer yes and now as you can see that customer is gone as well and as you can see that worked quite well we can do exactly the same thing in here pretty much we can just put a form for this button and make it delete the customer so a quick way of doing this is if we go back to the dashboard here where we have the form actually created that already but it looks a bit early in this tutorial so hopefully this is just going to work but we're not getting the uh what's it called the model here we just deleted and what I'm going to do is refresh and let's say this one here red I'm going to delete and it's gone Bob I will delete and it's gone and so on so you get the point here where you can still add customers we can edit them view them and so on and the last thing that we need to do I think is the search bar so let's create that so first of all let's close pretty much everything except the customer route I'm gonna need them and let's create a new page so so I'm not sure where to create this page maybe around here okay in views I'm going to create a new page search dot ejs let's do each one search and now let's go back to the route and let's do another route here so I'm going to copy one and then this one is going to be router.host and then we're gonna have instead of edit we're gonna get search and this is going to be search customers like so and now let's create this controller and scroll to the bottom maybe copy this one here and paste it so instead of delete this is going to be search sorry this is going to be get and then this is going to be search customer data we also want to change the delete customer to search customer and I'm gonna wipe this out actually and start from zero which is so we know what we did all right so if I was to all right first of all let's have a look at the server so if we go to partials and header this is where we have the search bar so we have a form and that form it has and that form has a method of post and an action of search which goes to the search bar which goes to the search page now the important bit in here is this search input we have the name a search term so we want to be able to grab this search term and query the database let's have a look at how we can do that so inside here we can grab this by doing left search thumb equals request downloading and then we just do search term this is the name so I'm gonna remove any special character from the third so I'm going to do cons and then search no special characters equals search them dot replace and I'm gonna copy and paste a reject which is replace uh special characters List and now we can do the query so you do the query we can actually we can wrap everything into a try cut so try catch might as well have this in here okay and now inside here we're going to do counts customers equals and then a light customer dot find and then inside here is where we're gonna do the query so so what I want to do is I actually only want to find records by first name and last name now you can modify this word if you wish to but what I'm going to do is put all and then in bracket we can specify what we want to search for so I'm gonna put first name and then this is gonna be a regex in here so new reg X search no special characters let me copy this and then I and then I'm gonna copy this line and the last name regex and then search those special characters and that should hopefully search in for the first name and the last name and now we also want to render record so we can do rest Dot render and then inside here we render in the search page and then the stuff that we want to render will be customized maybe we could do title and description let's see where we have logos here we go I'm going to grab this as well and then where do we put them anywhere around here we'll be fine so I'm going to put logos search customer data and then we can do one more line locals okay for the catch console log so now let's build the search page first of all if we go back to the dashboard and if we submit anything I'm going to press one two three submit you will see that we're getting the search page I'm not going to do anything button here I'm just going to display AP record so let's go back to the search page and let's build it up super quickly in fact I can potentially get the heading here um yeah I can get the heading from the index.js and put it in the search here just to make it look nice search and now we can focus on this super quickly all right I'm gonna do a div with a class of table responsive all right let's build something super quickly in here so EGS if and then I'm gonna say if customers are bigger than zero hopefully I haven't tested this but I need to play around with it um so if customers are bigger than zero we want to display something and then else maybe we can display something like let's close ejs we can display in H2 now no results found let's have a look refresh okay no results one hopefully this is gonna work and now inside here we can display some of the results and in order to do that I'm going to create a table and then this table is gonna have a class of table strip table smooth the table head is going to have all right we're gonna have a t head and then inside here we're gonna have table row inside the table row we're gonna have a few th's so the age they will and then this is going to have a scope of column and inside here is gonna we're gonna put first name and copy this a couple of times so one two three maybe so we're gonna do last name we're gonna do tell and then we're gonna do email now after this we're gonna create a tea body and inside this tea body is where we're gonna do a loop so EGS I'm gonna do four reach so inside here we're gonna do customers for each element you can change this to whatever you like I'm gonna leave it DD and then for this we're gonna do ejs out and then this is going to be element DOT first name and now I can copy this a couple of times so let me first name last name telephone and email all right and I think that might be just okay let's study things up and now if we save this and if we go back to the browser and if we refresh all right no result uh let's have a look at let's have a look at Rebecca I'm going to search for that and the result right and I believe that all right and maybe it's because of this uh so if customers are not equals empty maybe or no let's try this and then let's have a look and now if I search Rebecca you will see that we're getting Rebecca and we're getting all the details in here all right when we search with something like a letter we should be able to get more names for example if a name contains R then we should be able to get all the names if that makes sense so if a search will r as you can see we are actually getting the records but this looks very broken so the first thing that I noticed is when I went to the search.egs is that I had the table class here as a table that needs to be table so that's just a typo which doesn't make much of a difference but the thing that is breaking it is that I don't have a table row inside the tea body so inside here inside the loop we need to create a table row like so and this table row needs to have a class of align middle and now we need to wrap everything in this table row like so maybe we can indent this or you can see Save Right hopefully now if I go back and refresh we're getting the records the way we should so if we search for one that is unique commit then we get one record which is fine but if we search for something that contains I don't know so eee there is a lot of names with e let's do e and as you can see we're getting a lot of names that contain the letter e and that's pretty much the search gun if you want to go straight to the record uh we can have a link in here so that means where we have the th we can create one more I don't know what to call this action maybe and then we can create one more in here TD and then we can just do a link or an icon I think we already had an icon in the index.e.js so potentially you could just copy pretty much them you can just do you can even do the delete if you wish so I can just copy the whole thing here copy and paste it into here into the TD and now if you go back and refresh you should be able to have access to a video record because nothing really changes The Links at the same the edit and so on and if you wish to create the about page it's fairly simple all we need to do is first of all if this is linked yeah that's linked to the about page all we need to do is create a new route so maybe we create a new get route in here about and then inside here we can do about and where we have home page let's copy the one that we copy one I'm gonna put it inside here change the comment so it says about about that's not needed about and then we can render the about page remove any of the queries because we won't need them and dash it just work now and then if I go back and refresh we get oh I didn't create the view so in views we need to create an about page of course so about Dot ejs and in fact I'm just gonna copy and paste some text that I've already configured so about we're getting an image from images which just demonstrates how it works so I'm gonna paste the image as well we have an image in the public folder and we have a layer of text and that's it so if we go back refresh and go to the above page foreign messages I think so we have only logos in here and we don't need the calibrate impact all right save this let's go back okay now it's just working so if you click about you will see that we're getting the above page we're rendering an image and so on so that's going to be pretty much everything for this tutorial I hope that you enjoyed it I hope that you found it useful thank you very much for watching consider subscribing to my channel and I will see you in the next one [Music] [Music] I'm just trying to give you something [Music]

Channel: Raddy

Views: 52,311

Keywords: nodejs, node, javascript, user management, express, express-handlebars, body-parser, nodejs for begginers, nodejs mysql, nodejs database, node js tutorial, nodejs event loop, node js, node js mysql tutorial, rednering, npm, tutorial, js, bootstrap tutorial for beginners, bootstrap tutorial, css, raddy, raddy the brand, mongodb, nodejs mongoose, ejs, bootstrap

Id: PAm_QcN6Ffs

Length: 157min 52sec (9472 seconds)

Published: Wed Mar 15 2023