 Hey, what's up? Today we're going to create this user management system to sharpen or crude skills. The application will allow you to search, you'll 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 and open terminal in here and this CD is to the project folder that I've created. But of course you can use the CD command if you're on Linux or Mac. Now let's open this full screen and let's initialize a new project by doing npm init-y and this is going to skip all the questions and save us a couple of seconds. I'm going to clear everything and the next thing that we need to do is install the dependencies that we need for this project. npm i for install and then we can start listing them. Start in with .tmv, ejs express, express ejs layout, express flash messages, express session, method override and mangos. Let's 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's Nodemon. Nodemon is going to restart the server for us every time we make a change so we don't have to do it manually. In order to install Nodemon we need to do npm i for install and then dash dash save dash def and we do Nodemon. All right now let's open our project in visual studio code or whatever code editor 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't do this you can simply go to file, open folder and just open your project folder. If you open the package dot 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 Nodemon and then the application name which I'm going to call app.js. Save this. The next thing that we need to look at is the dependencies. As of currently I'm using those 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 Nodemon which we installed and we're using here. Let's create our application file which is called app.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 env file is going to contain some of the stuff that we want to hide such as the username of our database, the password of our database and the string of our database which we're going to do a little bit later in this tutorial. Now let's create a very basic application so open app.js and let's focus on that. To start 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 env 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 do dot env and then we do dot config and like so. The next one is going to be express so we do 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 layouts 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 const 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 our application what port number to be using so we do const 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 process dot env port like so. The next thing I'm going to do is finish up with express and I'm going to do app.use and because we're going to be having forms in our 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 extended and then we set this to true like so close and if you hover over this you will see that this returns middle where 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 dot json like so and then if I hover over this if I hover over this you will see that returns middle where 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 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 going to do post 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 hover over this you will see that this is a built-in middleware function in express that serves static files and is based on server static 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 or 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 or default 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 or 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 going to 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 app.get and inside 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 and inside curly bracket is where we're going to do the logic and this is going to be res.send and then we can send some data like hello world like so but we also need to tell express to listen on this port number and start the application of the listen grab the port number from here so port and then this is going to be another function like so and then in curly bracket we can finish by doing console.log and then I'm going to do in single slanted quotes like so which is going to allow us to bring in console 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 hello world message so if you save this you can either go here on the free dot and run and click on terminal new terminal and you can do your commands in here or you can do the commands on the outside power share or 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 your application and as you can see nodemon starting notepad.js and we have app listening on port 5000 if we go to the browser now and if you go to local host of port with column port 5000 you should be able to see hello world which means our application is working now the next thing that we can do is set up or let's go back to the explorer here and start creating some folders so the first one is going to be called views this folder is going to contain all of all pages kind of like or html but in this case it's going to be ejs inside views we're going to 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 html 5 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 for this one here called ejs language support by digital brainstorm this is going to save us a lot of time writing 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 ejs super quickly by doing ejs and then it gives me a lot of options now for this option i actually want the ejs escape so output escaped and i'm going to press enter as you can see this opens the ejs 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 our 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 our first page which is going to be called index.ejs so this is going to be our dashboard or in this case our 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.ejs 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 our app.js file in here and we're sending hello world we actually want to render this index.js h here so what we can do instead of res.send we can do res.render and then we can tell it which page do we want to render and in this case it's going to be called index like so we don't have to specify .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 changed 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 layer now you can create many layouts for 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 this const can be called locals and this is going to be equals in curly brackets we're going to 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 free free 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 affect our page if you go back to the main dot 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 document and i'm going to start writing ejs and then i'm going to do at the bottom here ejs output value and inside here i can just do locals dot title so this is going to 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 ejs out and inside here we can do locals 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 we do right click and view page source you'll see that 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 and paste there in an h1 here save it and if i go refresh here it is render it here we go just like so we don't want this i'm going to 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 bush trap 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 bush trap.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 our main layout maybe underneath the meta 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'll probably end up doing some pop-ups and you might want to experiment 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 bush trap one more time and let's look into bush trap icons search for bush trap icons and then if you click on this learn more about bush trap icons link this will lead you to icons dot get bush trap dot com and in order to install this click on install and here it is the cdn i'm going to grab this one here as is the easiest way to do and then i'm going to paste the bush trap icons inside here all websites should be using bush trap now and if i go back to the website super quickly and if i refresh you will see that the font changed to the bush trap the fourth one now i also want to set up a custom css right now as he makes sense as we are doing all this so what i'm going to do is the styles 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 dot css and this is going to live in our 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 storing all css images and javascript so inside here let's do css and let's create all file so main dot css and also let's create one more for images i and g for short and we're good now if you open the main dot css 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 out 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 i've 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 gonna show you now so make sure you post the video copy the css and then we can continue so what i'm gonna do now is go back to our css to our custom css and paste the css that we need now this css is only going to adjust a few colors and fonts it's not gonna do anything too drastic but it will make the layout look a little bit better than 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 fonts 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 our 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 and so on so let's start by creating our 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 and then we can tell it what to include and in this case we need to go dot dot and then slash partials and then slash header and then dot ejs like so save this let's go back to our website refresh and as you can see that we get into heading 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 going to do sidebar and save if we go back here we go we have header 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 there 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 a 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 going to do a space and also i'm going to do a row so div with a class name of row like so and close it and wrap everything as well save and now for the body here and i'm going to wrap this in another div in fact this is going to be just called main which is html 5 element and i'm going to wrap the body like so and this is going to have a couple of classes so we're going to have a call dash medium dash 9 ms for margin start and this is going to be small to water we're gonna have this as column dash large dash 10 and then padding to the x axis we're gonna have 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 partial's header let's close everything else and now we can focus on the header right so i'm actually going to give you all the html for this so you can post 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 now you can copy and paste from the bush trap website essentially we're creating a heading here with the class nav of navbar navbar dark we're making the header sticky with the with the dark background and all medium screens we are doing no wrap with flex padding of zero and we're giving it a shadow then we have a link which is just a navbar brand this link is containing our logo and the logo is going to our home page always so if you click on the logo it's just going to go to the home page that's 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 or search form which has an input and that's pretty much it we don't have a button because this is gonna work on enter so if i was to save this and go back to the project and refresh you'll see how simple this is it's just enough bar with the logo and a search bar now let's save this and go back close it and now let's have a look at the sidebar opening first of all and we need to replace this so i'm going to copy a very basic sidebar that i copied again from bush trap and modify there a little bit i will give you the file so you can copy this and save us 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 3 on large screens we have the column set to 2 on medium screens we have a display this block and we have the background as light and this is also gonna 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 gonna be going to slash which is gonna be home page and then if we do create an about page we can just put slash about i have a nice icon from bush trap icons and just about save this and let's go back to the project and refresh all right now we can close bush trap super quickly and we can focus on all routes if we go back to the app.js file in here the first thing that i'm gonna do is scroll down to a home route and we in fact gonna 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 gonna 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 handle 404 and inside here we're gonna do app.get and then inside here we can do an asterix like so and then this is gonna be a request response another function like so and then inside here there are a couple of ways we can do this we can just render 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 gonna be 404 and then we can render a 404 page so dot render like so and the page that we want to render we can just go 404 and we need to create so if we go back to the explorer inside all views is where we can create a 404 page and what i'm gonna do is i'm gonna be very lazy and just create a new page and just do 404 dot ejs 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 i can demonstrate this by going to app.js and comment this so our home page is gonna 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 gonna 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 call for this project customer customer.js and this is because you could potentially have multiple routes for example login routes user routes dashboard routes whatever you will 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 all routes are so instead of doing the home route inside here what i'm gonna do is grab this in fact i'm gonna copy every sec and then modify in a second and what we need to do is put all routes 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 gonna be dot server slash route slash customer and we don't have to specify .js in 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 gonna do const express 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 const 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 and now so what you need to do is module dot exports and then we export the router now this should work so essentially inside here we can list all routes let me put a comment customer routes or app routes whatever you use to call it and let's start by building our first one and let's look at how this is gonna work so this is gonna be very similar to what we've done here but instead we're gonna be making controllers so inside here i'm gonna do router dot 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 a customer controller and then inside this customer controller we can call a dashboard or home page whatever let's say home page 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 called 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 j s just like we've done it inside here and now we need to include this customer controller inside our route 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 it in here so what i'm going to do is copy this comment and i'm going to say this is going to 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 code home page now so what i'm going to 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 all title and description and we have and we also render the 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 about so i'm going to go to the home page and still we're getting the dashboard which is great all routes 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 zooming quite a lot so you can see but all you 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 wish to i've already got an account so what i'm gonna 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 nojs user management system tutorial next then we're gonna select our project owner so this is me great project and now this is gonna 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 gonna 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 re-add your ip from here now let's build all 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 megabytes it's absolutely fine for testing and messing around and now if you 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 going to go with that and then you can give your cluster a name i'm going to call mine cluster 0 which is the default value create 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 going to 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 the inside the dot env file for a second so this is the password and my username is ready already now i'm going to 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 our cluster has finished provisioning which is great the last thing that we need to do is click finish and close and this is going to say congratulation on setting up rules i'm going to 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 at the bottom where it says connect using vs code click on this and this will give you a string connect your mongu db deployment so we need to copy this string and paste this string into our environment here so we actually need to give it a name and for this i'm gonna give it a name of mongu db with capital letters underscore u r i and then equals the string that we just copied and paste it so as you can see we have the username in here which is already set from mongu db 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 the env 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 our database through application and start reading and writing to 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 going to be making our connection so const mongus equals require and then we require mongus like so save now we need to do mongus 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 an arrow function and inside this arrow function we can do a try catch statement and inside the try we can do const con equals await and we're doing mongus dot connect and then and then we're going to bring the connection string from our environment file here so we're going to do versus dot env and then mongo db underscore core uri and this is exactly the same name that we have in here so in fact you can copy and paste them and then close this now let's console log when we every time we connect to the database let's console log this so we can do console log and inside single slanted quotes we can do database connected and then we can do the connection string so dollar sign curly brackets and then con and then this is gonna 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 means because i i didn't close it and now and the last thing that 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 in our application we need to export it so we can do module dot exports equals and then we export the connection db here like so now we should be able to include this in our app.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 loud 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 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 going to 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 one would have restarted the 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 was wrong in fact let's go to dot env and let's say the password was wrong i'm going to put one here and save it so if i go back you'll probably see i think that when i save the dot env file the actual application doesn't restart but if i save something else let's say make some space and save here you will see that the application just restarted and now we're getting mongu server error but or which means but authentication in fact it says here authentication failed so if you get this it's probably because you didn't put the right username and password or shrink again 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 here and it should work as it should all right so you know dashboard is where we're gonna 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 or dashboard so i'm gonna create a div with the classes so it's gonna be a long one so this is gonna be display flex.justify content between which is gonna push stuff on the left side and the right side you will see in a second then we're gonna have flex wrap flex medium now wrap align item center patting top of three patting bottom of two margin bottom of three and border bottom right this is a long one i know let's go to view well 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 gonna 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 tuba margin bottom of two margin bottom of two margin bottom medium to be zero press enter and inside this div i'm gonna create another div btn dot dash group dot margin end of two and inside here we're gonna do a link so ahref and this link is gonna go to the ad page just to keep it simple and the class name for this link is gonna be is gonna be button because i want it to look like a button btn small and then and then to make it small i can do btn sm i want this button to be outline so btn outline and then we can use the secondary card cool close this close the link here and just put plus new user or customer and that should be good to go so if you tie 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 different color instead of gray but that's fine now let's create this page and then do the form so what are we gonna do go back to the server routes and then customer inside here we're gonna create another get request which means that we want to render the ad page where we're gonna be adding the customer so to do this it's gonna be exactly the same we can do alt shift and down and this is gonna copy this line here and instead we're just gonna call it ad for adding customer so customer controller we can call this something like maybe ad customer ad customer like so 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 right here we can do get and then this is gonna be new new customer form and now we can do exactly the same thing as here so i'm gonna copy this paste it and we're gonna say export dot ad customer of course this needs to match the one here so ad customer make sure you copy and paste it if you wish and then we have an asynchronous function with the request and the response inside here we can change the title if you wish ad new customer node js and then you can change the description if you wish i'm gonna 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 homepage here but we can also create another folder for all of our customer pages if you wish to 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 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 ad page so inside here i'm gonna put ad and then inside the customer i'm gonna create a new page called ad ejs like so so this is gonna 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 ad page and in fact this is wrong we need to go to customer now because it's inside this folder 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 ad customer controller we 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 ad page you will see that we're 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 up the process so this is going to be our header and i'm going to go to the and i'm going to go to the ad 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 was just maybe you can just do some other information or stuff so let's put a question mark that's not gonna do much to be fair let's go back refresh and that's looking a little better maybe you can just do something like about this page i don't know giving some information 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 gonna start with adding a column and padding and then padding to the y-axis to be free inside this i'm gonna create a row so that row and then inside this row i'm gonna create a column so inside this column i'm gonna be creating a breadcrumb so what i'm gonna do is nav and then inside this nav in fact this is gonna have area label equals breadcrumb and inside here we can create an ordered list or l like so and this ordered list we can have a class name or breadcrumb dash item like so and inside here we're gonna have a list now and this list is gonna have a class name or breadcrumb dash item and then the first one the first item is gonna be a link to our homepage so with this slash and then inside here we'll put dashboard like so say we need one more so put shift down and this is gonna duplicate and instead of breadcrumb item we need to add one more active so this is the active link which we are on right now and this is gonna 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 gonna be clickable and save now the reason i created a row and the column is because i wanted to have two of them so inside here we're gonna do another call this time this call is gonna have text dash end and then font weight to be lighter and inside here i'm gonna do something like b both end user id and let's say this in fact this is not gonna be relevant to this page but it's gonna be but he's gonna save us a lot of time for the next page that we're gonna do so let's tidy this up super quickly and say if you go back to the page refresh you will see that all right and that needs to be we need to remove the dash from here and also the oil of class breadcrumb item needs to be we need to remove the item save this and now we go back refresh you'll see that we get in 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 gonna be creating our form in fact let me close everything for now and say so we're gonna be creating a totally normal form that is gonna post data and save it so the data let's start by writing a normal form like so and the action which is very important is gonna be slash add so we want to post data and i'm gonna show you how we can deal with that in a second and then inside here we're gonna put the method of post so we're posting that 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 of four two columns so call one and then inside the first column i'm gonna have a label so this label is gonna be for the first name and i'm just gonna say first name like so and then after the label i'm gonna create an input and this input is gonna be the type of text and then it's gonna have the class name of form control the id is gonna be first name the name which is very important this is what gonna get all data across so we're gonna put that as first name as well to make it easier the value is gonna be empty but i'm gonna put a placeholder of first name just 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 bush trap is that you can actually do a lot of validations with javascript and bush trap but to save time i'm not gonna be doing this today so i'm gonna do it the lazy way of doing it with this required but it's gonna work just absolutely fine and also when we do the model or database that's gonna 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 gonna be last last name so i'm gonna 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 gonna be a telephone and the label is gonna be full tail just for short and then i'm gonna say id tell first name sorry name is gonna be tell value is gonna be empty placeholder is gonna be telephone and we can also have it required the next one is gonna be email so this is gonna 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 gonna do is copy this form group paste in here and i'm gonna remove the first one in fact i'm gonna remove the call like so we probably don't need the row either and we should be good to go this is gonna be the customer details so i'm gonna have label for details and i'm gonna say customer details and then this is gonna be this is not gonna be an input this is gonna be a text area and then this text area is gonna have a name of details id of details rows of 12 and i'm gonna say a placeholder to be customer details like this and the last thing that i'm gonna do is copy this one more time paste it and inside here i'm gonna create or submit button and inside here i'm gonna do a button and this button this is very important is gonna be the type of submit this is what's gonna 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's 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 post on the same page but instead of at we can maybe do post 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 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 post 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 post it so what i'm going to do is when i click add i'm going to post some information and we want to display in the console here so to do this we're going to do all over in the 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 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 rat 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 my scale 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 our customer model inside here we can do customer.js and now we need to require mongus so let's do const mongus equals require and then we are requiring mongus like so and now we need to create a schema in order to do this we can do const schema equals mongus and then dot schema and now we can start creating or customer schema by doing const customer schema equals new schema and inside here in curly bracket we can start creating a schema so we're gonna have the same fields as in our form so we can start with first name we can do different options today I'm gonna keep it simple so I'm gonna do a type and then this is gonna 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 we can do string required create it at so this is when we create the record you might be useful to know that so I'm gonna do created dot and instead of type string I'm gonna do date this is gonna be automatically created and the last one I'm gonna do just in case which is gonna be the updated dot 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 we can do module dot exports equals mongoose dot model and then inside here we put the customer model call it customer and then we export the customer schema all right cool we have all schema configured here but we actually need to include this into our customer controller if we wish to use it so if we close this let's go back to the customer controller which is under server controllers customer controller and at the top here we can include the customer controller so by doing const customer this is gonna be the keyword that we're gonna be using later you will see and then this is gonna 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 const mongoose equals require and then inside here we require mongoose like so all right let's have a look at how we can actually use this model now in order to be able to insert the data 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 wreck dot 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 gonna do is I'm gonna structure the data as a new customer so it's easier to work with so what I'm gonna do is const new customer and inside here I'm gonna create new customer and then in curly bracket we're gonna start typing the field so for example first name the important and then we can grab the data from the wreck dot body so inside here we can grab first name last name tell email and details by doing wreck dot body so what I'm gonna do is copy this and in fact if you wish to you can just do it manually you can just put it right and that will be inserted but instead of course I want it to be the dynamic so we can do wreck dot body and I'm gonna put the first name to access that object so we can do so with a comma we can do old shift down and we can change this to last name I can copy this paste it and then I can continue doing this for the rest so maybe details details copy tell it's gonna be tell copy email it's gonna 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 gonna rest the render so I'm gonna move that inside here but we need to create that record and to do this it's actually fairly simple we can do await create 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 rest dot render I'm gonna actually do rest redirect on the rest of redirect I'm just gonna do in single quotes slash so we can go to the dashboard and I'm gonna show you how we can use flash messages just so we can say okay a new user has been added and then let's tidy 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 notepad refreshed and it went to dot env and this is where test comes from so that's why you can change to whatever you like and then the second reason that we have 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 we created it so saving this save absolutely everything by the way I removed the required for the created app and the updated app just in case and yep 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 no JS art customer and now we're going to dashboard which is a good sign and now we go back to the database here there is a refresh button on the right side here and here we go we have all 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 that didn't work and this is because this is where I got a little bit confused but basically inside on models I forgot to do something this is when I had it 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 default created app and the and default updated app and in order to do this we can just do comma and inside here we can do default and then the default value for this can be just the JavaScript date dot not dot now like so and we can copy this and paste it so comma updated that is going to be the full date now so you can do the full values inside here as well save this let's go back and let's try to insert another record so dashboard add new user I'm gonna put Bob a 123 then I'm gonna put email Bob 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 for 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 is also you don't have to do it manually basically what I've done is I've created a super quick create that is just as a wait 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 added data you 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 gonna show you how to do so in app.js we need to include press flash messages and we can do that maybe around here so what I'm gonna do is const in curly brackets I'm gonna bring flash and then this is gonna 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 we're gonna be using cookies and to do this we can do const 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 gonna do another comment and this is gonna be called express session and I'm gonna do a very basic example from their documentation so let's do app.use and inside here we need to do session and there are a couple of options for example we need to set a secret word for this example I'm gonna keep it simple resave I'm gonna put to 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 age of the cookie 1000 times 60 times 60 times 24 times 7 which is one week okay that should do the job now we need to apply the flash messages middle so somewhere out here and to do this we can do app.use flash and then inside here we can do session key name flash message 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 all right so I'm getting a narrow saying flash is not a function and originally I was thinking that it could be express flash message yes but express flash message but what I've done wrong is when I was installing express flash message I actually installed express flash message yes so what we need to do is close the application and then we can do clear and I'm gonna do npm uninstall and I'm gonna do express flash messages so we can remove this and now I'm gonna do npm install i for 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 are 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 our application is now working if I go back to the website everything is working 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 res dot redirect but before that we can create all flash message so I'm gonna do await 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 const message equals await quest dot consume consume flash and then inside here we put info now we should be able to pass this message just like we're passing the locos 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 common 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 gonna do ejs ejs and then I'm gonna 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 alert dismissible 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 bootstrap dash dismiss equals 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 all 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 for loop like so or no for each here we go each and now if you have more messages in here we can definitely display them so i'm gonna put this i'm gonna put everything inside here and instead of messages now this becomes the message because we want to loop through it and i'm going to keep this element as element and instead i'm going to change this here so we're looping through messages we're giving it a name of element and then we're literally looping through and then we are literally inserting the elements 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 123 here we go new customer has been added and that doesn't look right so i can fix this super quickly and this is because i spelled dismissable wrong it needs to be i cool and now i should fix the problem 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 go to the top where we have the export home page 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 are using an asynchronous function which is good we can now query the customer so this is going to be the basic version to start with so let's do const customers and then this is going to be equals a weight and then we're going to do customers sorry customer which is or customer here customer model and then this is going to be dot find and then inside here we can just put curly brackets 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 going to get will be 22 now in order to be able to display them we can do exactly the same thing as locals and messages so i'm going to grab this put it into or try here and then this is going to be res dot index and then we're passing the locals 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 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're going to create a table and this table is going to have class of table table striped and table small we're going to create the table head by doing t head like so and inside here we're going to do a table row t and then inside the table row we're going to do the h and inside this in fact this is going to be skull equals skull and inside here we're going to 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 going to put the buttons and for the action I'm going to give it a class name of text text and to push it at the bottom you'll see in a second and then for the table body around here we're going to do t body and inside the t body we're going to do a for each to loop through the elements so for this I'm going to do let's do ejs and then I'm going to put the each here so for each so we're getting the customers we're passing sorry we're passing the customers from here let's copy that and put it and we're looping through them and you can call this whatever you like I'm going to keep it as element and now inside here we're going to create the table rows so here with the class name of align middle I'm going to 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 flex row justify content 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 a view and then we're going to put the element id so for this I'm going to do ejs and then out we're going to 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 of button the class name of btn btn primary and btn small I'm also going to add an icon that I've copied for brewstrap icons and this icon is i class bi brewstrap icons bi-i which is just an i so I'm going to 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 i I'm going to 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 going to 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 relative inside this form we're going to have a button that's going to actually submit the form so type of submit class name or btn btn danger and btn small close this button and inside this button I'm going to add another icon and save so we've written a little bit of coding here hopefully there is nothing wrong with it let's save it let's go back to the page and refresh all right awesome 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 a line of text and and hopefully that should solve my issue all right text and I've misspelled justify content I think let's have it cool yeah that's it so we're getting 22 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 and let's just update all right so I've updated that record and if I refresh you'll see that it says updated this cool all right so for the people that want to do the pagination this is what I'm going to 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 pagination next so for the pagination we're gonna have to do a more complex query so in our customer controller where we have our homepage at the moment we're just creating the customer database and we're getting the 22 records 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 come I'm gonna 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 gonna do is paste in here and start modifying this quite a bit all right by the time I actually coded this video I was on Mongoose 6.9.2 and now we are Mongoose 7.0.0 and there are 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 redo some of the code 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 won't be too bad for the homepage 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 pagination step right above try is I'm gonna set the how many records do you want per page so I'm gonna do let per page equals 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 gonna 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 the default value is gonna be one all right and inside here we need to do const and do customers equals await and then we're gonna do customer or aggregate I want to basically get the records sorted by updated add and in order to do this in curly brackets inside here we can do sort and then we're gonna do another curly brackets 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 dot limit and then this is gonna be per 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 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 curly brackets we can start with locos which is our title and description customers like so which is the data from the database and then we're gonna need the current page page which is the page from the URL like so so that's gonna be helpful with the pagination and then we're gonna need the pages and we want to run this by doing math dot selling and then count divided by per 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 you close this type 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 is it one I believe let's have a look yep we're 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 render in 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 our pagination 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 gonna 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're on the last page the last link is gonna be disabled because you won't be able to click here 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 gonna 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 pagination if we don't have any customer so what I'm gonna do is I'm gonna do an ejas if condition here and I'm gonna 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 gonna 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 pagination like so and then we're gonna have an unordered listing here and then this unordered list is gonna 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 and I'm gonna do ejas if and then the condition for this is if we have the current page which we're passing from here so we're actually getting 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 gonna do is create a list this list is gonna have a class name of page item and it's gonna have the class name of disabled 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 in ejas 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 if we click on it it goes to page one in fact we could just slash because that's the fourth page but uh that would work either way okay and say let's test it so now if you go back and refresh you will 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 dot and then we will have uh let's say one two three four five and then we'll have last and then if we are would we're 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 divided 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 and we need to close it okay so page item disabled uh the link can be disabled the page link is fine and instead of first we're gonna do dot dot dot now we probably won't see this I go back uh yeah we won't see this unless we is because I don't have enough records 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 is gonna loop through the numbers so let's build up we need to do a full loop so I'm gonna do ejs 4 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 than number and then we're converting the current into a number and then we can do some checks so plus or and then inside here we can do and and I less recalls 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 gonna copy this one here and page item disabled that's fine that's fine and instead of this we're actually gonna 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 all 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 an else and then inside here I'm gonna do ejs close the statement and get another link so this one here and this one is gonna be this 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 close it and inside 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 else wrong again okay 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 records 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 ejs if and then the condition for this is gonna be if I is equals equals number current plus four and and I smaller than pages we can close ejs 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 it stay the same but this one I'm gonna change to dot 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 gonna be pretty much the same as this so we might as well copy it this is gonna be the last link but it looks like I've closed another ejs in here which doesn't look good right hopefully that will work I'll remove them yes seems fine okay maybe I just put one extra that's fine so let's paste in here and then this one is gonna be different is equals equals pages and then the first link is gonna be come last and this is gonna become 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 will 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 I go back to the actual query under customer controls and let's change this to six maybe and then if I go back hopefully yeah we're getting more pages now so we need a little bit more records so I'm gonna put this but three per page here we go so we go three 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't click the last because we're on the last page we're getting the dot 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 detailed 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 let me have a look it I'm not sure if you can see but this is the ID of the record so if I was to go 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're getting it from here basically that's pretty much here 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.ejs and then I'm gonna put the view customer just for now and then we'll come back to this we also need to do the route so inside route customers somewhere around here we need to add our new route are around here and what I'm gonna 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 gonna call it ID and then for the customer controller I'm just gonna say and let's say view for view 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 gonna copy this if I go to the controllers somewhere at the bottom here let's create a new one so this is gonna 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 gonna be pretty simple so what we can do is try and then inside here we can do const customer and then this is gonna be equals await 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 euro which is gonna be request dot 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 the stuff so we can set up some locals let's call this and then this these locals 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 gonna be under customer which is here and then this is gonna 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 catch the error and then inside here comes a log error from now cool so that's pretty much the view done 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 path 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 gonna do is grab the header from index.js I'm gonna grab this just to make it look nice and then paste in 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 gonna do ejs and then for this we're gonna do customer fact equals customer.firstname and then we can also do ejs let's do the last name is on so the same thing dot the last name like so and say if we go back hopefully that would september water very cool name if we go back and if we click on commit backer we should get coming backer 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 type or button just to make it look nice but it's not gonna it's not gonna do much so btn btn small btn outline just so you have an example and then this is gonna be secondary and then maybe you just put share I don't know what you're gonna do we can copy this one more time and then do export we're not gonna 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 commit backer and let's have a look at the rest I'm gonna create a bunch of diffs and display that the information in a nice way so I'm gonna do code part into the y axis of free and then inside this column I'm gonna do a row and inside this row I'm gonna do the code and inside this column I'm gonna put some breadcrumbs so we've already got breadcrumbs somewhere inside the outpage I believe so I'm gonna copy them here they are navigation breadcrumbs I'm gonna copy that and paste the 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 tidy 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 a few more class names so text end 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 you so let's do customer dot last update no updated at is it last updated or updated at I cannot remember updated at is what I've used okay so updated at and make these 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 or five two thousand and three and the time Greenwich now 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 at inside here and then I'm gonna do this to UTC string and then close the function like so and now if we go back you'll see that it makes a little bit better for me so last updated Sunday or five March 2023 and I'm gonna do one more in here so B to make it 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 gonna do EJS out and then we're gonna do customer dot underscore ID and now if we go back we should be able to get the customer ID we can do with a bit of space between them make them bold but these are things that I'm gonna do a little bit space like so okay but these are things that you can always work on so now let's have a look at how we can list some of the customer data and I'm gonna do another deep inside here and make it look nice so in fact this is gonna be an unordered list with the class name of list group and then inside here I'm gonna do a bunch of lists so lists 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 can 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 gonna be equals max with to be 40 pixels you'll see why in a second and then inside here I'm gonna put the name so in bold name like so we close the diff and then on another line I'm gonna do another call and then inside this call 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 will see that we're getting a nice table here and we have the name of coming back 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 gonna do is copy this and the first one is gonna be the telephone so I'm just gonna put tail and then instead of first name we're gonna put the tail and remove the name from here drop them save it yep looking good now let's do the rest this is gonna be email email let's do a few more details details maybe we can do created art so date created maybe created art and then one more and this is gonna be the updated date modified and updated art let's have a look at what we get all right so not too bad details is the only one that didn't work all right and this is because when I was building the actual database I actually forgot totally forgot to 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 radies 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 it's probably gonna be at the bottom okay yeah we have radies details in here and yeah I didn't create any of the records with that field in mind anyways so if we refresh this we have rad in here and if I click on it to be here you'll see that the details are actually working so I just totally forgot to add this which is fine I'm not gonna convert those because I've already showed you how you can do that um but that's pretty much gonna be all the 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 gonna be pretty much exactly the same as adding a new user and which means that this is gonna 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 start pagination all right the edit button here so the edit button is exactly the same as the view we are passing an element id a record id and basically we're going to an edit 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 pace it out so we can focus on it and this route is gonna 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 it's gonna leave 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 gonna be similar so instead of view we're gonna get get edit customer data this is gonna be edit and then inside here we want to query the customer that we're looking for just like we did in the view we're passing in some locals 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 gonna copy the contents from ad because I believe that most of it is gonna 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 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 I'm gonna do here at the top header I'm just gonna say which customer that we edit in I'm just gonna put ejs with equals so this is gonna 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 say if you go back we're getting ready a because I didn't put a longer name let's go to Kermit here and as you can see we are oops sorry if we go to Kermit here and we press edit you'll see that we say edit coming back or editing coming back cool 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 that would look pretty cool dashboard and then commit maybe we can just do the last name as well you're getting so commit last name like so and that would be cool 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 gonna copy one more line in here and I'm gonna change this to last updated last updated and then this is gonna be I'm gonna have to change this to make it look a little bit better so in the boat here we're gonna do EGS out and then inside here we're gonna do new date and then I'm gonna do customer dot updated at and then to UTCS UTC 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 which customer are we actually editing so we need to put EGS in here and customer underscore id like so close EGS 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 trickery in here and what I'm gonna do is question mark underscore method but it goes but now I'm gonna show you how this works super quickly and we can leave the method post in here now if you remember early in this tutorial we installed something called method override so this is gonna allow us to do stuff like put the end delete let me show you super quickly if you go to the npm package method override you'll see that it lets you HTTP verb such as put or delete in places where the client doesn't support it so that's what we're gonna be using and it's actually fairly simple to set up so let me show you so we're gonna 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 equals require and then we require method override 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 gonna be underscore there are many ways to do this but this one is gonna be underscore method and that's pretty much it so if our application is working that's good let's go back to the edit page and concentrate on that 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.firstname and now I can copy this and I can do it for the rest 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 rest so last name then we have telephone I think this was 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 gonna be all delete button so I'm gonna copy this and change 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 rad details and I don't know why there is a lot of spacing here I think it might be because I've done this so let's have let's remove the space from here like so save it and refresh yeah that was causing the 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 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 gonna be put 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 all right let's go back to controllers and I'm gonna 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 in here so instead of edit we need to change this to edit post and so I'm gonna 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 gonna 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 a wait customer and then this is gonna be find one and update and then inside here we put the customer data so we're gonna have first name just like before then we can do request dot body because we are sending the information from the input just like we done the adding 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 I'm gonna start this with changing everything last name make sure that we put comma pretty much everywhere and now let's change it so last name 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 gonna be the only different one we're gonna get the current date by doing date dot now like so cool and then the last thing that we need to do is we may we need to make sure that we are updating the correct record by doing where 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 and then the last thing that we need to do is redirect to the edit page so the so we get the updated record straight away so we can do res dot redirect and then inside here we can do with the single slanted quotes we can do edit slash and then dot assign curly brackets and then request dot ram rams dot id and then for the catch we can just do console dot log error okay cool let's start it 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 do find by id and update and instead of having the where closing here I can grab this and I can remove it now 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 go back to the edit page refresh make sure everything is working fine all right and now if I click on rat and say updated updated update customer you will see that we have rat updated straight away because he updated the record in the database and you redirect the rest to the same page so somewhere if I refresh the database we should be able to see that reflecting straight away I don't know where here we go rat updated and this is the last record here 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 no js and then and then 123456 and then rally's details 123 update as you can see everything stays the same I can go to the dashboard it's all updated here I can view the record as you can see everything is be everything has been updated which is great last updated and gives me the time right now so as you can see 1337 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 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 fancy way so instead of primary let's do danger and let's change a few things so I'm going to do this with a motive 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 it's going to 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 dash 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 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 model super quickly so for the model I'm actually gonna create 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 gonna create one super quickly so dot model dot fade because we want that nice fade animation and then for this we're gonna have tab index of minus one row is going to be dialogue 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 model 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 gonna have the type of a button with the class name of ptn close and then data dash bootstrap dash dismiss equals model this is what's gonna close the model an area label to close and 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 gonna paste something super quickly and this is gonna say this will remove the customer record of I'm just putting a bolt 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 you 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 photo so dot model photo and then for the photo I'm gonna create a button and then this button is gonna have a type of a button class name of btn dash btn btn dash secondary data dash bootstrap dash dismiss model and then this is gonna just say 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 gonna do form and this is gonna be very important here we need to put edit slash and then djs oops I'm gonna open ejs like so close it and inside here we're gonna do customer id underscore id and then again we're gonna do question mark underscore method and then this method is gonna be equals delete we also want method post and a class name of position relative and inside this form we need a button that is gonna submit so button with the type of submit and then this is gonna have the class name of btn btn primary and I'm just gonna say yes remove customer and let's have a look whether this works so save everything all right if I put delete customer it's not working and it's because the id does not match for 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 or write update in ojs 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 a cooler 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 customer or I didn't think about this 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 it inside here so instead of get this is going to be delete delete customer and this is going to be actually fairly simple so I'm going to do so I'm going to remove everything and instead of edit post we're going to do delete customer inside here we're going to 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 .delete one and then we need to pass the id that we want to delete so we're going to do underscore id and then request.params.id which we are passing on submitting the form and then the last thing that we're going to do is redirect rest.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 that will be your little challenge all we're going to 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 well it looks very early in this tutorial so hopefully this is just going to work but we're not getting the what's it called the modal here we're just deleting and what I'm going to do is refresh and let's say this one here right I'm going to delete and it's gone Bob I'm going to delete and it's gone and so on so you get the point here we 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 routes I'm going to need that 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.ejs let's do h1 search and now let's go back to the routes and let's do another route here so I'm going to copy one and then this one is going to be router.post and then we're going to have instead of edit we're going to 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 going to wipe this out actually and start from zero just so we know what we're doing all right so if I was to all right first of all let's have a look at the search bar 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 let search term equals request dot body and then we just do search term this is the name so I'm gonna remove any special character from the search so I'm gonna do const and then search no special characters equals search term dot replace and I'm gonna copy and paste a reject which is replace a special characters first and now we can do the query so you do the query we can actually we can wrap everything into a try catch so try catch might as well have this in here okay and now inside here we're gonna do const customers equals and then await customer dot find and then inside here is where we're gonna do the query so so what I want to do is actually only want to find records by first name and last name now you can modify this further if you wish to but what I'm gonna do is put all and then in brackets we can specify what we want to search for so I'm gonna put first name and then this is gonna be a reject in here so new rex search no special characters let me copy this and then I and then I'm gonna copy this line and do last name rejects and then search no special characters and that should hopefully search in for the first name and the last name and now we also want to render records 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 customer data maybe we could do title and description let's see where we have locos here we go I'm gonna grab this as well and then where do we put them anywhere around here we'll be fine so I'm gonna put locos search customer data and then we can do one more line locos okay for the catch console log error cool 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 gonna press 123 submit you will see that we're getting the search page I'm not gonna do anything fancy in here I'm just gonna display a few records 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 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 ejs if and then I'm gonna say if customers bigger than zero hopefully I haven't tested this but I need to play around with it 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 no no results found let's have a look refresh okay no results found hopefully this is gonna work and now inside here we can display some of the results and in order to do that I'm gonna create a table and then this table is gonna have a class of table table strip table small the table head is gonna 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 t h's so th table and then this is gonna have a scope of column and inside here is gonna we're gonna put first name uncopy this a couple of times so one two three maybe so we're gonna do last name we're gonna do tail and then we're gonna do email now after this we're gonna create a t body and inside this t body is where we're gonna do a loop so ejs I'm gonna do for 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 td and then for this we're gonna do ejs out and then this is gonna be element dot first name and now I can copy this a couple of times so I'm in first name last name telephone and email all right and I think that might be just okay let's tidy things up and now if we save this and if we go back to the browser and if we refresh all right no result let's have a look at let's have a look at Rebecca I'm gonna search for that and no result all right and I believe that all right and maybe it's because of this 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 for Rebecca you will see that we're getting Rebecca and we're getting all the details in here all right when we search for 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 I search for 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.ejs is that I had the table class here as R 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 t 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 a line middle and now we need to wrap everything in this table row like so maybe we can indent this so you can see safe 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 E E E 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 gone if you want to go straight to the record 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.ejs 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 our view the record because nothing really changes the links are 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 we can call it about and then inside here we can do about and where we have home page let's copy the one that we copy one and 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 the 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 demonstrate how it works so I'm gonna paste the image as well we have an image in the public folder and we have a little bit text and that's it so if you go back refresh and go to the about page we're having an error and this is because purely I didn't pass messages I think so we have only locusts in here and we don't need the calibrating fact 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 about page we're rendering an image and so so that's gonna 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