 Today we're going to create a simple note-staking application using Node.js, Express, MongoDB and for the templating we'll use EJS and BUSHRA. So this is what we're gonna be building today, starting with this beautiful landing page and then we're gonna move on to building a basic above page and once we're done with those two pages we're gonna move on to the sign in page which is using Google authentication so it can ask me for my email and password and once I log in this will present me with the first screen so if you click on create new node inside here you can add the title and the body of now I've already created a bunch of nodes so I'm gonna show you how they look by going to dashboard we have the search bar at the top we have the logout we also have the name coming from the Google account we can create a new node and at the end here we also have a fully working pagination and if you wish to update a node you can click on one you can put for example v1 update if you wish to delete a node you can click on it then you can click on the delete button here delete node this node will be gone from our dashboard and it will be deleted we can also search for nodes for example let's search for node and press enter and here we're gonna be presented with the search results and if I click on any of those for example how to use .emv and this will present us with the node which we can update and so on if this is something that you're interested in building stick around give this video a like and a comment below and now let's get started hello and welcome everybody and let's get started if you haven't already got node.js installed make sure that you go to node.js.org and download the latest version the installation is fairly simple all you need to do is pretty much follow the instructions and press next next next once you do that you can check your version of node.js by opening the terminal command line or power shell on windows I can do right click and then open terminal and then inside here I can just do let me zoom in a little bit you'll be able to do node.v and this will give you the current version that you have and because this is well I've already created a project folder called node.js dash note and inside here is where we're gonna be creating the new project and the first thing that we need to do is to initialize a new project in order to do this on windows I can do left shift right click and open the power shell or the terminal inside here and essentially what this is going to do it's simply going to CD to the folder that I'm currently in the node.js dash nodes folder of course you can use the CD command and to go forth to a folder or backwards and you can use the ls command to list the files that are in your current folder so if you're mac or linux make sure that you do that and make sure that you are in your project folder now in order to initialize a new project we can do npm init dash y and this is going to skip all of the questions and just create the package.json file for us inside our project folder now the next thing that we need to do is install the dependencies that we need I'm gonna install all of the dependencies and then I'm gonna explain them as we use them inside the project so let's start by npm i for install and then we can start listing all of the dependencies so connectmango is the first one we have dot env we have ejs we have express we have express ejs layouts we have express sessions session sorry and we have method override we have mongoose we have passport we have passport google 0 or 20 and that's it if you press enter this should take a couple of seconds to install and the next thing that we need to do is install one development dependency which is called nullmon so to install nullmon we can do npm i for install and then nullmon and then dash dash save dash dev like so and this will install nullmon as a development dependency and essentially nullmon will just restart the server every time we make a change in our project so we don't have to do it manually okay now that we've created our project if you go back to the folder you should see node underscore modules you should see package dot json file you should see package dash log json file which means that we're good to go to start creating our project now i'm gonna open this project in vgstd code so in the terminal here i can do code dot and i believe that this works on linux and mac and this will open the project inside vgstd code here you will see the project on the left side the project folder and i've zoomed in quite a lot so everybody can see well now before we begin one thing that i want to make sure that we create right now is a git ignore file so i'm gonna create a new file and this file is gonna be called dot git ignore and essentially what i want to achieve here is that if you decide to upload your project on github unless you do the git ignore and you ignore some of the files it will upload absolutely everything this could mean that you might upload your passwords and secure keys so i want to avoid that the file that we want to avoid uploading is gonna be the dot env file which we're gonna create later on in this tutorial and also i want to avoid uploading the node modules just because there are a lot of files and you don't need to upload them so let's do node underscore modules like so and save we're good to go so now if you commit your changes to github they won't upload say this and close and let's open the package dot json file the first thing that i'm gonna do on the main i'm just gonna change this to app.js because this is what we're gonna be calling for application file app.js and then under scripts just below the test i'm gonna put a comma here and i'm gonna create another script who'd start and this script is gonna start or application with node one so node one and the application is gonna be called app.js which will create in a second if you scroll down a little bit further you'll see some of the dependencies that we just installed and you'll see the versioning of them as of now. Note that the versions might change in future which means that they might change the way they work slightly but usually if something changes you should get a nice warning in the console and it will tell you what you need to update change in order to make it work. The other alternative is to actually install exactly the same dependencies as me and follow along if you wish to but i would advise you to just use the latest and fix things as they as they break again and the last thing that we're gonna have a look at is the development dependency which is node one here it's installed and we're using it here in the start which is great let's save this and let's close it let's open the explorer and let's start creating our project so to start with i'm gonna create or app.js file and i'm only going to start with the packages that we need as of now and then later on we'll build the project as it makes sense so the first thing that i'm gonna do straight away is i'm gonna create or .env file which is gonna contain all secure keys and passwords and then in order to require this we can do require let me close this and let's do require and then you say here we require .env like so and then we do .config and then for the rest we need to require express just so we can create an express server const express equals require and then we require express like so we need to require express layout equals require and this is gonna be express ejs layouts and this is essentially going to help us create different layouts for a website that we can reuse through many pages so we don't have to copy and paste pages all the time and now in order to create a new express application we can do const app equals express and we do the method of express here which if we hover over you'll see that it creates an express application the express function is a top-level function exported by the express module and we need to give it a port number so const port this is gonna be the port that our application is gonna be running on so port 5000 as default but if we publish this and there are environment variables that our application can use we can do process .env .port so this is pretty useful when you publish your project we need to add two middle ways in here so app.use the first one is express.url encoded and then inside here we need to put extended to true and the second one is gonna be .app.use express.json like so and essentially those two things are gonna help us pass data through forms and pages for example i'm gonna give you a very simple example if we create a form that submits some sort of data this is gonna help us pass the data from page to page and maybe submit it to a database the next thing that i'm gonna create right now is the static files so i'm gonna put a comment here static files and this is gonna be another middle way i could app.use express.static and then we put the the folder that we want to be static so in this case i'm gonna call it public and this is gonna make it very easy for us to link files inside or html documents or ejs documents in this case so we'll be able to link or images styles and javascript very easily straight from the public folder and i'm gonna show you this very shortly how this works so we will have to create this folder we also need to set the templating engine i'm gonna do it here templating engine and i'm gonna do app.use and we're using express layouts as we added there above then we need to set the default layout app.u app.set layout and then the layout i'm gonna set as default is gonna be called slash layouts main and i'm gonna create this in a second as well and explain it and then we're gonna do app.set and then inside here we're gonna set the view engine to be ejs in this case like so and the last thing that we need to do is potentially create a very basic route so let's create something like app.get and then the route inside here is gonna be just slash for homepage and then we're gonna do a function this function is gonna have a request and a response and then inside curly brackets here we're gonna do res.render and then we can render the homepage which is gonna be index in this case and i'm gonna create this now in a second as well and then the last thing that we need to do is app.listen and then we just need to put the port which is coming from here the port 5000 in this case comma and this is gonna be a narrow function like so and then inside curly brackets we can do console.log and then we can console.log inside slanted single code so we can use template literu's app.listen in port and then with a dollar sign and curly brackets we can pass the port constant like so and save now we definitely need to create or layout in order for this to work and we need to create our first page so in order to do this let's open the explorer and let's build our layout so we need to create any folder and this folder is gonna be called views and inside the views is where we're gonna store all layouts and our main layout as i said inside here is gonna be called main.ejs and also we're gonna be storing all pages in here so this is layout but i want to store pages inside the views so what i'm gonna do is create our homepage which is gonna be called index.ejs so for this i'm just gonna say h1 load and then save this now let's jump inside our main layout and i'm gonna show you how this works so first of all we need to create a very basic html file so in this case i'm gonna do html and select the html5 and let's do the very basic for now just so we can see whether our app is working and inside here what i'm gonna do is the less time percent and then i'm gonna do percentage and this is gonna open and close it for me but i also need to put dash and i need to put body so essentially this creates a reusable template and all of our pages are gonna be inserted in here the content of the pages so this is our main layout and then the page for example the homepage will be inserted in here and we should get hello world inserted in here essentially so if we save this save pretty much everything and now let's run our application in order to do this i can jump back into PowerShell make sure that you are in your project folder i'm gonna clear everything and then i'm gonna do npm start and this should start the application with NoDemon as you can see we have a first error and this is because i spelled extended through wrong so i'm gonna go to app.js and put where is it extended through save this and then let's go back and as you can see we're getting app.listening on port 5000 if i stop this with ctrl and x terminator and then press y so this will stop the error once again and now let's do npm start so you can see but as you can see now we have NoDemon running the application so starting node app.js and then app is listening on port 5000 which is great this means that we can actually visit our application in the browser now so i'm gonna open the browser and i'm gonna type localhost of 5000 in here and as you can see we're getting hello world if i was to inspect the code of this so control a new or command a new film mac and then you should be able to see that we get the html that we've written in all out and then inside here is where is rendered the actual home page so if i was to change the home page to hello world 123 save it and i will refresh this page you'll see that it renders the page in here which is great so this is pretty much reusable let me zoom out and the next thing that we can have a look at straight away is let's set up this layout for success i guess and then we'll continue for the main layout what we can do first of all for the title i want this to be replaced dynamically so depending on what page we are on i want to be able to pass some data and these two update in order to do this we can do very similar thing like here so i'm gonna open and close ejs like so and then inside here i'm gonna create a locals dot title so we'll create an object which is called locals and inside this object there will be a title with some data i'm gonna do exactly the same for the description of the website so we can do meta and then this is gonna be name equals description and then we can do content and then inside here is where we can copy this paste it and then we can do locals dot description and we should be good to go now we need to close this as well like so and yeah we're good to go now now if you wanted to pass the the data inside here we can go back to app.js and here where we have our route we can simply do const locals equals and then inside curly brackets we can put the title and then the title for this can be something like node js nodes and then we can put comma and then we can put the description and then the description is going to be free node js nodes and in order to pass this inside and render it so we can grab these locals put comma inside here and then paste it so now if you go back to our website and look at the document here the document name if i refresh you should see that we're getting node js nodes and if i do control a new zoom in you'll see that we're getting the title here and we're getting the description that we just added so far so good everything is working well but obviously as we build our application we're gonna have a lot of routes and you could store them all in your app.js file but it's gonna get a very very long file and it could get very messy which leads me to the next point of this tutorial where we're gonna create routes and we're gonna create controllers so this is gonna basically split up a code in different sections and hopefully it'll be a little bit easier to work with so in order to do this let me close pretty much everything for now i'll leave the app.js open but if i go to the explorer let's create a new folder called server and inside this folder we're gonna have two more folders so controllers and i'm gonna have another folder called routes so for the routes for the main routes such as the home page, a valid page, FAQ whatever you wish to create i'm gonna call index.js and then for the controller maybe we can call a main controller so let's do main controller js perfect so there are a couple of things that we need to do first of all we need to move the code from app.js this code here i'm gonna grab it and we need to put all routes in here and we need to change how this works so i'm still gonna require the route in here so the applications know where they are but we're gonna do it slightly differently so in this case i'm gonna do app.use and then inside here i'm gonna do slash which is gonna hit the main route of our website and then i'm gonna do require and then i inside here i'm gonna require dot slash server and then we're gonna require the routes and then i'm gonna require the index route which is the main route which means that we can now store all routes inside the routes file here and dash it work so if i save this for now that should be absolutely fine let me close it let's go to the index route so inside routes index and since we are gonna be creating a router inside here we do need to bring express so i'm gonna do const express equals require and then inside here we require express just like we done in the app.js file and then we do need to bring the router from express const router equals express dot router like so we need to bring the controller that we created the main controller so this is gonna be const main controller equals require and then we require the controller which is under dot dot so we're going backwards controllers and then main controller like so and we close now a very important thing that you need to do straight away in here is to export the router so don't forget that module dot exports equals router so that's very important and inside here is where we can start listing all routes so for this i'm gonna grab a comment and i'm gonna say app routes so the first route that we're gonna do is gonna be the home page so essentially what we've done in the app.js but we're moving it here and we're moving the functionality inside the main controller so the way this is gonna be working is gonna be router dot get because this is a get method and then and i'm gonna put which controller do we want to use so we're gonna be using the main controller and then we need to create a function that we want to run for example i can just put this one as home page you can name it whatever you like and now we need to create this inside our main controller so if you jump to server controllers main controller inside here what we can do is maybe put a little bit of a comment get home page and inside here we can do exports dot home page as this is what we call there and then this is gonna be an asynchronous function and then inside here we're gonna have the request and the response and then like so we create the function and then we can repeat exactly the same thing that we had in the app.js file so i'm gonna copy and paste it here so we have the const locals title of node.js nodes description free node.js nodes app like so and then if we move down we can do the rest dot render and then we render the index page and then we pass the locals inside here like so so essentially we're rendering this page here in views index and this index page has a layout of main how this makes sense and now if we save this save the route make sure that you have the app dot use uh routing here as well save everything's looking good hopefully if we go back to or command line or terminal you shouldn't see any errors and if i was to refresh you will see that the application is still working and we're still getting hello world from here so i'm gonna move that and save refresh and everything is working just like before but our project is much more organized just like that we can create more pages so i can just show you one super quickly so for example if we go to the route index.js we have the homepage router but if you want to create another one we can just do alt shift and down this is gonna create another is gonna duplicate the line from the top i can just call this one about and then this is gonna be called about as well and now we have a new router for the about page but we also need to create the inside the controller so main controller here i can literally pretty much copy this whole code here and copy the whole thing and i can just say get about this is gonna be exports about and we can do title add a node.js about about dash node.js nodes and then i'm just gonna leave the description as it is and instead of rendering the index this time we're gonna render an about page which i can create inside the views so for example we can literally just create a new file about dot ejs and just put an h1 about save this let's close everything else and now we should have two routes if i go back to the website obviously we don't have any links yet but what you can do is post slash about and then this will lead you to the about router and as you can see it's working so that's pretty cool okay now let's have a look at making our website look a little bit better and for this i'm gonna be using bush trap so first of all go to get bush trap dot com and as of now we are on version 5.2 and in order to get bush trap all you need to do is click here read the doc and they give you a very clear instructions of how you can use this it's important to have the scale for mobile for the mobile responsive behavior and we have the titan here and if you scroll down a little bit more we have the bush trap css link inside here which we can grab and i can paste this into our main layout which is under views layouts and main so under that so inside the head element somewhere around here we can do the bush trap file and i can do view well wrap so you can see absolutely everything so we have the css from bush trap and also just in case for later years i'm gonna grab the scripts from bush trap so i'm gonna grab this and this needs to be pasted just above the body here i can just paste it around here and that should do the job now if we go back to the website and and if you look at the font hopefully we'll should see that change whenever refresh so here we go so this means that bush trap is already working from the cdn that we just added now the next thing i wanted to show you is that we can also add custom styles just maybe above here let's say that we want to add a custom style so i'm gonna put link css and then inside here we put the file that we want for example i can call it main dot css and this is going to be living in a css folder that i'm going to create right now slash css slash main dot css and this is what the public in app.js is doing so now where i have the public here so now i can create a new folder first of all let me create the outside everything else this is going to be called public and inside this public folder is where i can create the css folder i can create an images folder i can create javascript folder and so on and i can access it from my main layout for example just by putting slash css i don't have to put public css and so on i can just put slash css main dot css and that should work and to prove you that this works we can create a new file in here inside the css folder called main dot css and let's just change the body color of our website so body and i'm just gonna put background color and let's just put this aqua okay save this and actually if we go back to the main dot uh ejs let's move this underneath the boost shuffling just so we can override styles as we need to otherwise the background might not work in this case so save this let's go back and if you refresh now you should see the background changing which means that our main dot css file is working and that's great just as we're here i'm gonna check some of the images that i have for this tutorial so i'm gonna go inside here reveal in file explorer i'm gonna paste the images that we're gonna be using like so and then we can style our homepage now let's close everything let's remove the body background here let's close everything let's close the app.js and let's close the index.js in here and let's just focus on this for a second now we have our main layout in here everything is working well but also i want to separate the some of the sections such as the filter and the header so they can be reusable throughout our layout and if i change here on one place they'll change everywhere essentially you don't even need to do this but it will it might be nice to have and we'll see later on so what i'm gonna do is i'm gonna split some of the sections into partials so inside let me close everything here so inside views where so inside views i'm gonna create another folder called partials and inside partials i'm gonna create two files so the filter dot ejs and then i'm gonna create another one called the header dot ejs and inside here is where we're gonna split the filter and the header so i can put header just so we can see it works and then i can put photo so if you wish to include them in your main layout it's fairly easy we start ejs just like so and then we put include and inside here we can do dot dot slash partials slash header ejs like so and then we can do exactly the same for the filter so i'm gonna do inside here and this is gonna be further instead and just like this if you go back to the website and if you refresh we have the header and we have the filter of course we need to style them and make them look nice so let's start looking into styling our website a little bit and before we do that actually i've totally forgot to add the font so now will be a good time to add them if you head over to font.google.com and click on font from here you can select the font that you want for example i'm going to be using the poppins and i'm going to be using this unbounded font which looks absolutely amazing so if you click on it you can select the font from here as you can see i've already selected this one and i've selected the bold font and it's added here on the right side for me and then exactly the same thing on poppins i've selected the light and the both and then this is going to give me the link to the font so i'm going to copy it put a no main layout here maybe just around here and if we put these on two lines you're able to see that we're getting the font family of poppins with the weight here and we're getting the the other font family of unbounded and the weight in here which is great so save this and here is how you can use them they give you the css rules as well which i'm going to write myself later on so let me close this now that we have the font if i refresh nothing is going to happen and we are good to go okay if we go back let's start by building the header and the filter and then we'll do some of the styling and move on so for the header let's go and open that inside partials header dot ejs and for the header there are two ways we can do this you go to if you search for bushstrap headers you should be able to get get bushstrap.com docs 5.0 example headers and if you like something from here what you can do is right click inspect it and then you can literally just copy the code from here so you can do right click edit html and then you can just grab it and copy and paste it okay i'm going to grab this one here and now i'm going to modify a little bit and walk you through it so let's grab the whole container edit copy and then i'm going to go back to the header here and paste it so the first thing that i'm going to change from here is the container to be fluid because i want this to be full width instead of contained and then for the header i believe that i want to remove let's have a look the border bottom from here and i'm going to toggle the world wrap be world wrap and for the logo i'm going to remove the svg from here and i'm going to put notes instead and let's modify this a little bit more instead of take that text doc i'm going to change it to text primary i'm going to change the text decoration to none that's absolutely fine and then i'm going to set the font to be font weight both and then i'm going to set the font size to be two to make it a little bigger if i save this let's go back to the website you should see that we're getting a working header with a logo or links in here and some buttons what i'm going to do here is i'm going to remove the pricing and i'm going to just link the homepage so this is going to be slash and then for the about page which we've already created i'm going to put about i'm not going to bother with the other ones just because you've already got an example of about and a homepage so these are going to be exactly the same you just create two new routes and then for the buttons here at the end i'm going to have the sign up button here and then i'm going to have the sign in button here and then that's pretty much it and instead of buttons these are going to be actual links so instead of buttons i'm going to put a href and then this is going to have the link of fourth slash google and i'm going to explain this later when we create the actual authentication and we need to end the linking here instead of a button so oops like that like that and then we need to do exactly the same for this one so i'm going to remove this put a href and then i'm going to put exactly the same link as the sign up and the login will be exactly the same and then last here i'm just going to put a to finish it so now if you go back if you refresh you'll see that i have sign up and sign in which is great and now we can do exactly the same thing for the footer so maybe if we change this to footer footers nope okay i will search for bootstrap footers and then this is going to be in the getbootstrap.com docs 5.2 examples photos and the one that i'm going to use today is going to be the first one here actually i'm going to right click inspect and then i'm going to grab the whole container here edit html copy and then we're gonna open the footer so partials footer.ejs and inside here we swap this instead of container i'm going to make this full screen by doing fluid and now i'm going to modify a few things let's have a look so border top is what i don't want for the actual logo here in the middle i don't actually even want this but let's just add anyway if you have a nice logo maybe you can add it and this is going to be notes like so and i wonder whether to do the same thing as the header where we added let's have a look where we added the font bolt like so and the text primary okay so inside here i'm going to do font bolt font size 2 and instead of link dark primary or let's have a look whether this works if i refresh that's working well i mean it's a little bit bigger than i want maybe i can just remove this okay that's a little bit better so now that we have the footer let's change a few of the links so again i'm going to remove the pricing leave the links that you want and for the home page this is going to be just flash as usual and then this is going to be flash about and this should now work we go to the website as we have the about route working we should be able to click on it and you'll see that we're going to the about page and if we click on the home you'll see that we're getting hello world and so on now let's do a tiny bit of styling it's not going to be much and then we can continue and we won't touch css after this anymore so what i'm going to do is let's close absolutely everything from now and let's concentrate on the main dot css file which is under which is under public css and then main dot css to start with i'm going to create two variables route and then inside here they're going to be called background color and the first variable is going to be a bright yellow color so ffc 700 and then the second one is going to be bush drop primary rgb and then this is going to be a well it says rgb but this is going to be a hex value now nine so one two two nine six c which is a dark blue color as you can see in here and now let's change some of the fonts that we added and make our website look a little bit different and better i guess so body inside here we put the font family and the font family i'm going to be using poppins as default and this is a sans serif font then we can change the background color to be all variable color from above so background color like so then we can change the color of our text to be the dark blue color we can use the variable bush drop primary rgb the font weight i want to change as well to be 300 and then i want to change the font size of the whole website to be 1.2 rem which is going to make it a little bit bigger than 16 pixels which is i believe the default and then the background color sorry the background image is going to be a new row and then inside here we can add the image of images and then i have a noisy image that is going to make our website look a little bit retro i guess and then save let's have a look at the changes super quick refresh as you can see our website went yellow the colors are starting to change this one didn't change but i can fix this later on now let's go back and continue i also want to change all of the headings so what i'm gonna do super quickly is h1 h2 h3 h4 h5 and h6 and let's just change this to the font that i added earlier so font family and this is going to be unbonded and then this is going to be cursive so this is a really good font for headings i really like it and now font weight i'm gonna do of 800 as default to go back as you can see this changed as well as this was an h1 tag and that's great the next thing that i'm gonna do is i'm gonna create a custom fluid grid so i don't want the default custom container or bootstrap because it's fairly small it's gonna be around here i want to make it a little bit larger and to do this i'm gonna create my own custom container for this let's do container and then this is gonna be called fluid and then maybe custom inside here i'm just gonna put the max width to be 1600 pixels and that should do the job so essentially now if i go to the home page so view index.ejs i can wrap everything inside a diff with a class name of a container fluid and then i can just do the container fluid custom and now that should make the container look a little bigger go back as you can see the container stops around here and it's gonna be somewhere around here which makes it a little bit better let's jump back to the css and finish the rest i also want to make the buttons a little bit different so what i'm gonna do is paste a comment in here and i'm gonna change the buttons so btn to grab all of the buttons and i'm gonna do padding left for 1.6 rem and i'm gonna do the same for the padding right and then i'm gonna do border radius just to make a little bit more interesting of two rem this should make the buttons look a little bit different as you can see like pills i guess and then what i'm gonna do is actually change the colors of those buttons and an easy way of doing this is if you inspect the website and if you go to the button here you should be able to see the button primary here so i'm gonna grab the whole bit paste it inside here and i'm gonna grab the outline button as well so i'm gonna inspect it and here it is the outline one and what i'm gonna do is super quickly just replace some of the colors so these are some of the default colors and what i'm gonna do is for the background for example here i'm gonna do a variable and i'm gonna pick my variable from the top so this was uh bush trap primary and dash rgb so i'm gonna copy this and paste it everywhere it makes sense so the the border color i'm gonna replace the active background color i'm gonna replace the border color again one more time here the active one and the disabled background i'm gonna replace and i'm gonna replace this one is one for the covers i'm gonna do zero zero four three eight eight and i'm gonna do the same thing here zero zero four three eight eight and now we can do the outline one so let's do the same thing here we paste the variable paste the variable in here as well the active background is going to be replaced as well this one is going to be the border active is going to be replaced as well the disabled color i'm going to replace as well and the disabled border also is there other one yeah the hover background i'm going to replace to zero zero four three eight eight and let's do the same thing zero zero four three eight eight save up and now if you go back so website refresh you'll be able to see that we've changed the buttons here and the only thing that i need to change is this here and one more thing one more thing before we finish with the main styles and we start that home page i'm gonna change the colors of the pagination that we're gonna build later on so essentially i've done the same thing i've got the pagination last name and i've just changed the colors to the primary color that's pretty much it you don't even have to do that you'll still look good straight from bush trap now if you save this all out it's actually looking pretty decent the only thing that we're going to change is this super quickly so inside the photo where is it uh views partials photo and instead of if we go view world wrap instead of primary link maybe i can just change this to text primary let's have a look whether this works and yeah that changes so i'm pretty happy with this so all main layout is done and if i go to the about page now you should see that this is also working but i didn't wrap the about page inside a container you could do this if you want to for every single page you could essentially go to the main layout here where is it so layout main and wrap everything in a container but this will this might constrain you of doing a full width section sometimes so i would rather do it in the actual page so like if we grab this and put it wrap everything inside the about here then i'd rather do it like this and then that should work so if i go home about this is all working now for the home page i was thinking of making something a little bit more interesting it's only gonna take a minute so i was thinking of creating a custom layout for the home page and then we'll continue we close absolutely everything and this is actually a good exercise to make to show you how we can change the layout so first of all if i was to make a brand new layout for the home page maybe like a different one so what i would do is let's copy the whole bit here because everything is going to be pretty much the same i'm going to copy this go to layout and maybe just say front page pj and i'm going to paste it in here say front let's say front page layout just so we can see the difference and in order to tell the front page to use the front page layout we need to go to route so server route index.js and we need to find the controller which is here and we need to pass it inside here and in order to do this we because we are going to be passing more than one objects in here i'm gonna wrap everything inside curly bracket and we can start listing them in here so we have workers then we have a comma and then we can have layout and then for the layout we can just list in here so dot dot slash views and then slash layout and then i can put front page like so and now this should take the front page layout from views layout from page dot ejs let me save this and let's have a look whether this is gonna work okay um layout front page okay i'll put dash instead of slash here so slash and then let's go back and refresh views layouts from page third to look up okay oh okay um okay so the mistake here is i've put front page instead of front page so let's rename this to front in my mistake and then that should hopefully work now so let's refresh and as you can see we're getting the front page layout working now okay let's style or home page super quickly and then we can move on if i was to go to the front page layout and remove this i'm not gonna change too much in here but i'm just gonna give it a custom class home and i'm gonna convert this to a deflect so which which means converting this body to a flex and i'm gonna say this flex to act as a column and i want 100 height is well on this so if we save this everything should look pretty much the same and now we can use this class uh only on the home page so if i go to the main dot tss file here i can actually use this class and style or home page before we do this let's jump into the actual home page and add some of the data that we need so i'm gonna close everything else and and concentrate on the home page so we've already got the container fluid container fluid custom that i've added but i want to add a little bit of so i'm gonna do button y middle which is top and bottom essentially of five and that's only on medium screens and then i'm gonna do margin bottom of five always on all screens and then inside here i'm gonna create main like so html element and inside the main so inside here i'm gonna do row and then i'm gonna do padding to the y of middle five so top and bottom one more time then we're gonna do text dash center then i'm gonna do justify content center since we're creating a row rows are usually displayed as flex so we can do justify content center like so and if i press center this will create a diff for me and inside here i'm gonna create a column or call and this is gonna be medium screens i want this to be fluid and then on larger screens i can do large column large six dot margin bottom of six and margin bottom of medium zero so we reset it on medium screens and above and press enter so inside here i'm gonna have an h1 tag like so and this h1 tag is gonna have a couple of classes first of all display two this is gonna make it a little bit bigger and then font weight is gonna be both margin bottom is gonna be four home and i'm gonna set the position as relative and i'll show you why in a second for the title i'm gonna grab something and say write your thoughts down as they come to you and then i'm gonna create a paragraph just underneath here so for the paragraph we're gonna have a let's say class name to make a little bigger fs or font size four margin bottom of four and for the paragraph i'm gonna copy and paste something so this is gonna be notes is a simple to use three notes taking up made with no j s e j s and mongo db and the last thing that i'm gonna do is create a button so a href and this button is gonna be just an authentication button so all so we need all and then google like so and this is gonna have a bunch of classes as well so button btn for short btn primary and i'm gonna make a btn large as well let me close this and this is gonna say try notes it's free that's pretty much our homepage done now let's refresh and have a look at what we get that's already looking pretty good but what i'm gonna do is add some stars in here and add two nice illustrations in here as well what we can do for the h1 here we can create a custom class name of home title and since we have this position relative this is gonna make it easy for us so let's go back and paste the inside here like so for the title first of all let's do content and then i'm gonna do euro and inside here we're gonna put dot dot slash images to select the image that i want and the image that i want is called stars dot svg i'm gonna put the position for this by the way i need to i'm gonna make a set across on this so this is gonna be dot dot before and then after this we're gonna position it as absolute and then i'm gonna position this to the left of minus 50 pixels and to the top of minus 30 pixels like so and i'm gonna do exactly the same thing but i'm gonna create another set of class which is gonna be called after and this is gonna create a kind of like a ghost element in our html page you'll see how it works in a second if you're not familiar with it so this is again absolute but this time we have instead of left we have right and instead of top we have bottom if we save this and if you go back you'll see that we have the stars pretty cool now let's add the two illustrations and we should be good to go now i'm actually only going to add the illustrations on the big screen because on small screen it could get a little bit distracting so what i'm gonna do is i'm gonna wrap this into a media query media and this media query is gonna be a simple one so minimum minimum width is gonna be one two zero zero pixels and then i'm gonna put the home class inside which is put on the body tag and then i'm gonna change the background so let's do background i'm gonna have a couple of backgrounds so let's put them oops let's put them on a new line here so we can see a little better so URL and inside here we put dot dot slash an image and then we probably need this single quotes and then image uh human one one dot sbg and this is gonna be positioned left bottom and it's gonna be no repeat like so so we put another comment duplicate this this is gonna be human too and we're gonna have right bottom no repeat then i'm gonna re add the noise because this is probably gonna override it so what i'm gonna do is one more here and i'm gonna put noise dot bg and then i'm gonna put this to the left in fact it doesn't matter too much top and then this is gonna be repeat because i want to repeat this background everywhere and the last thing that i'm gonna do is put a background color so i'm gonna put the background color of the background color that we added earlier which is yellow save this refresh okay that's already looking good we have the two humans in here and if we scale down the website you'll see that it's not looking too bad or mobile it's working well so i'll leave it as it is and you can spend a little bit more time to make it more interesting if we click on the about page you will see that this is working and so on all right this is gonna be the css for the entire website and now everything should be fairly straightforward to do let's close everything else and let's undo the 404 page so for example if we go to a route that doesn't exist let's just type some random letters you'll see that we're getting cannot get so in order to fix this what we can do is if we go back to the app.js file here and if you go down to the routes inside here we can create a new route inside here but it needs to be the last route of all so make sure that is the last route otherwise this will not work and this route is gonna go something like this so when we just put under 404 like so and then we can do app.get and inside here we put a star and then function and then the function is gonna have the request and the response like so and then we're gonna have in curly bracket for example you can do res.stated and then we can put 404 and then you can do send and then we can send 404 page not unlike so and that should work if I save this and if I go back so let's go to a page that doesn't exist refresh you'll see that we're getting 404 page not found of course you can render a custom page if you wish to so instead of send let me copy this instead of send what you can do is render and then you say which page you want to render in this case maybe just call it 404 and of course you need to go to the views and make a 404 page so in this case maybe we can grab the index here copy everything and 404.ejs and then inside here I'm gonna put instead of the title here I'm gonna put page not found dot and then I'm gonna put something else like here then I'm gonna remove this and let's put a button here that says explore notes so and this can go to the home page or something like this let's go back and oops I probably zoomed in too much and as you can see this is now saying page not found which looks pretty nice it has the class of the title and that's why they're appearing like so but yeah not so bad so if you go to about home and if we make an error we have three rows cool save this let's close everything that's done okay let's set up all dashboard right just because we're gonna need this for the next section so what I'm gonna do is let's minimize everything and I'm gonna go to app.js and where we have all routes first of all I'm gonna create another one and this is gonna be routes dashboard and then everything else stays the same so we're gonna have to create this route in server routes dashboard so server routes and dashboard jes and then we also need to create the controller for this so I'm gonna do the same here dashboard controller jes and we should be good to go let's focus on the route dashboard here first of all and include everything that we need so we're gonna need express and the express router in fact we can grab this from this one here so let's grab pretty much all this and paste it in here so we have const express require express const router express router we have the main controller and this is gonna be in fact this is gonna be dashboard controller dashboard controller and dashboard controller problem and we do need to export this as well so module dot exports equals router like so and inside here is where we're gonna create four routes let's create a very basic one I'm gonna paste a comment for the dashboard routes and let's just get one from the index router here I'm gonna get this one here save a little time and then I'm gonna paste in here so router dot get this this one is gonna be dashboard and then we're gonna have the dashboard controller this time and then this can be code home whatever you wish let's call it dashboard I guess dashboard like so and now we need to jump into the dashboard controller super quickly and create a very basic one so maybe we can go to the main controller here and copy the home page like so and paste it in here so get dashboard we can say dashboard for this it's fine and then we need to render the dashboard page so dashboard I'm thinking of making a custom layout for this so maybe we can call a dashboard as well and the page that we want to render maybe we can either have it in views here or we can make a new folder for the dashboard so what I'm gonna do let's make a new folder for and I need that here is where I'm gonna create the page so for the ejs the only issue now is that I'm gonna have to do render dashboard slash dashboard but we could have called the index maybe yeah let's call it index and then we can call this one index as well whatever that maybe that would be a little bit better and we need to create this dashboard layout as well I want to make it a little bit different potentially we'll see how it goes so on the layouts I'm gonna get the main layout from here I'm gonna copy it and I'm gonna create one more and we're gonna call it dashboard.js well this is gonna be all dashboard I think that's pretty much it just to recap we've put the routes in here to the dashboard we've created the dashboard route in here which has only one route when you hit the dashboard it goes to the controller which is here and the controller is fairly simple in fact this needs to say dashboard very important so this is gonna trigger and render the dashboard index page which is gonna be the main dashboard page and is gonna use the layout of dashboard and I think that's pretty much it let's just test it super quickly so if you go to the website and if we put slash dashboard you should see that the layout is working and then if we go to let's say the dashboard and the index maybe we can just put h1 and say dashboard now okay cool this is all working we'll style this a little bit later on the other thing that I wanted to do is for the dashboard layout I wanted to change the header so if we go to the dashboard layout maybe we can just do a different header for this let's do header dashboard header underscore dashboard okay and now we need to create this partial so I'm gonna literally copy this one here and create a new one header underscore dashboard dot pjs and then we paste it so this is gonna change ever so slightly pretty much instead of having this I'm gonna have a search bar later I'm gonna put it like that so this is gonna change a little bit I'm gonna have a search bar in the middle so let's toggle the wrap and let's do a form I'm gonna show you how to link this later on anyway so let's do a form with the class of navigation and then call 12 call medium also flex fill margin bottom of two justify content center and margin bottom of medium two for this the row is gonna be search like so we're gonna have a method of post which I'm gonna explain later on and we're gonna have a an action of dashboard and then search cool so inside here is where we're gonna have an input for the search bar so with the input like so and this input is gonna be the type of search and then we can do name we can put the search term which is gonna be important for later use our explainer as we go pass is gonna be form control border primary and then I'm gonna have a place order search and then I'm gonna have a area label of search so that's all good and the last thing I'm gonna do here is just create a logout button instead so logout and then let's remove this let's remove the margin and let's just say logout instead okay if we've done this correctly now if we refresh we have search bar and we have the lawyer button which goes to slash logout and that's absolutely fine now that we have this we can actually focus on creating all database and then doing the authentication for the database we need to go to MongoDB and you can create a free account by clicking the button here the top right corner I can zoom in a little bit and then all you need to do is fill up your first name last name company email password and create an account or you can just use the sign up with Google which is kind of like what we're gonna be making today I guess and I've already got an account so I'm just gonna sign in instead and login with my email here super quickly all right once you're logging your dashboard should look similar to this I've already got a few projects so that's why it might be a little bit different but usually it greets you and it tells you to create a new project or a new database so this is what we're gonna be doing now so what I'm gonna do is I'm gonna click on projects here and I'm gonna create a new project let's give this project a name of node js dash nodes and then create it for this I'm gonna be the project owner create the project and now here it says current IP address is not added so this is actually for security reasons you can add your personal IP address so when you're working locally you'll be the only one to to be able to access the data which is great so I'll definitely recommend you to do there so you can access the database but also when you upload your project on a server you'll have to change this from the network access in here so let's add my IP address first of all and this has added the IP address for me and now all I need to do is build a database okay here we have three options the one that we're gonna be using today is the free shared one click create and then if we scroll down a little bit I'm gonna leave the default to amazon the closest region to me is island so I'm gonna leave it as default and if you scroll down a little bit you can read about the specs and so on but all we need to do here is create the cluster now this is gonna take a few moments to create the cluster but until that's happening we do need to create a username and password for database so the username in this case I'm gonna put ready and then the password I'm gonna auto generate and copy now let me make a note of the password somewhere in fact I'm gonna open the because everything and I'm gonna open the .emv file here and I'm gonna make a note of it so this is my password and then let's create the user okay as you can see the user has been created and the cluster has finished provisioning let's scroll down a little bit more everything is looking good the IP address is here which is great and now we can finish and close congratulations on setting up access rules go to the databases all right so this could take a little while to start but what we need to do now is click on the connect button and then go to connect we're using vs code so I'm gonna click on this and this is gonna give you some instructions but essentially all we need to do from here is to copy the string this one here the connection string I'm gonna copy it and then go to the .emv file and inside here is where we're gonna create our first .emv variable so for this I'm gonna call it MongoDB URI underscore URI and this is gonna equal the string that we just copied and if you look at the string super quickly you will see that it's using my username which is ready and it has the password as blank so this is why I copied the password earlier I'm gonna cut the password and paste the inside here so we have the username and password for database and then we have the rest of the MongoDB URI in here which is not important for us I guess and then we have kind of like I think this was the database name so if you don't change this it's just gonna your database will be called test and I don't really mind I'll show you later on but yeah just the database is gonna be called test you can name it whatever you wish maybe name it notes or whatever let's keep it as it is and save let's go back to MongoDB and close this and as you can see the cluster is now ready to use and if we go to browse collection well we won't get anything because we don't have any data so this is all good let's have a look at how we can actually connect to the database so we go back all right if we close everything and let me minimize everything all right if we minimize everything and let's navigate to the server folder and inside here I'm gonna create another folder called config so inside this folder I'm gonna create a file called database so db.js and inside here is where we're gonna be adding all database connection now we actually need to start by requiring mongoose here so const mongoose equals require and then we require mongoose and then the first thing that we need to set is mongoose set and then we need to set the strict query and this is basically going to remove some of the warnings that you get in the terminal and now we can make connection to a database by creating a const connect db and then this is going to be an asynchronous function like so and then inside here because this is an asynchronous function we can do try catch and then in the try we can do we can create a const const as connection for short and then this is going to be equals await mongoose connect and then inside here we put the connection string which we saved in or dot env file so essentially we want to bring this string here and in order to do this with dot env we can do your process dot env dot mongo db i make sure that you spell that correctly save this and now we can console log the connection so let's say console log and inside here we can do database connected and in fact we need to do it with slanted single quotes like so so we can put template literuze and i'm gonna do a dollar sign here and we can do con the connection comes from here and we do connection host so save him and then the last thing that i'm gonna do in here is catch the error by doing console log and then we catch the error from here we should be able to use this in our application but before we do that we need to export the connection db and we need to do module dot export and then we export the function here and now we can import this file into our main app.js file so if you open that here under the express layout we can do const connect db equals require and then we require server slash and then config folder and then we require the database file that we just created like so but we need to actually start this function somewhere so maybe here under the static files we can just do connect to db like so and then i'm gonna put a little comment just so people know connect to database and that's it if we say technically speaking we should be able to see database connected and it's gonna give you the URL now if you didn't connect you probably won't get that and you'll get an error and i'm gonna show you super quickly let's say if we didn't change the password from here we put it as let's say it was one two three something that it's not the correct password let's save this and now you will see that maybe refresh the page let's have a look it gets stuck let's have a look i don't know if i saved it oh it's because the .emv doesn't auto relate when i change stuff in the .emv okay but as you can see bad authentication failed so if you get this it's basically gonna it's most likely gonna be your username and password so i'm gonna leave it as it was and hopefully if i restart the server we should be good to go all right now let's close everything except the app.js file and let's start building or authentication so inside here i'm gonna bring in a few packages so we're ready and i'm gonna start with the const session and this is gonna be equals require and then we require the express session this is gonna help us store sessions in our database so when a user logs in they can be kept logged in we also need to import the passport which we're gonna be using for login so const passport equals require and then we require passport we also need monger store so const and this is gonna be equals monger store equals require and then inside here we do connect monger think that might be it so the first thing that we need to do is initialize passport somewhere around here maybe so we can do app.use and then we do passport and then initialize and then we need to do app.use and then passport session and we'll come back to the sessions in a second but let's start by creating or authentication route so what i'm gonna do is in app.js one more time i'm gonna create another route and this one this one is gonna be called off so i'm gonna copy another line and let's change index to all like so and that's absolutely fine so in routes we need to create it let's go to here and then just do or.js and we should be good to go in that front and inside here is where we're gonna need to bring the router so i'm gonna grab this from the index.js and just bring the express and the express router to start with and as always make sure that you export it so module dot export and then this is gonna be equals router otherwise it won't work and now we can look into passport the first thing that we need to do is include passport in here so const passport equals require require passport and now it's a good time to have a look at the password documentation super quickly so if you go to passportjs.org and if you click on strategies you'll see that they have a lot of strategies such as the http bearer the facebook uh google world twitter and so on but if we search for google you will see this one here passport dash google dash all 20 which is what we installed early in this tutorial this is the most downloaded one as you can see currently so if you click on this this will give you a little installation guide on how you can actually install it and use it so as you can see early in this tutorial we installed it so we're done in this case and then if you scroll down we need to include this strategy so let's see that i'm gonna copy it and paste it in here so instead of i'm gonna put it as const so we have const google strategy equals require passport google dash 0 or 20 dot strategy now if you want to use this if we scroll down a little bit further you'll see this code here i'm gonna copy it super quickly and paste it inside here and then and then essentially we're gonna need to get a client id from google and a client secret from google as well and a callback error so let me show you how we can create this okay go to console dot cloud dot google dot com and sign in with your google account or register i guess and once you do hopefully you'll be a disc welcome screen here and all you need to look for is how to create a new project so inside here i can click on the drop down menu and click on new project so if you find that just name your project i'm gonna call it note j s dash notes tutorial like so and then i'm gonna leave everything as default okay this is going to create the project for me and it's going to take a second now that we're done i can select the project you'll see that the project is selected here and then i can go to the dashboard on the dashboard you should be able to see this api's column here and what we need to do is click on go to api's overview then click credentials and then we need to create a credential the one that we need to create is the zero off client id and then it's asking me to configure the consent screen which is fair enough so we need to do this first of all let's configure it so for this i'm gonna be using the user type external so everybody can register to my website and create that name is gonna be nodes and then the support email i'm gonna put my email if you have a logo put your logo that might look really nice in the login screen as you can see here i don't have one unfortunately so i'm gonna skip this and when you actually publish your application somewhere online it would be good to put your actual domain name with the privacy policy link and the terms of service but other than that if you scroll down under authorized domains i'm just gonna put the developer contact information as well and then save and continue for this i'm just gonna skip all the steps and save and continue save and continue and then just back to dashboard at this point if we click on credentials now we should be able to create our credentials in here so let's click create credentials one more time and click on zero auth client id and in this case we're gonna have a web application so select that i'm gonna leave the name as web client one call it whatever you like and then inside here is where we need to put authorized URLs and in this case i'm gonna grab the local host and paste it in here add and we should be good to go and then we also need to authorize redirect uri but this this is very important we need to put http localhost for 5000 and then we need to say google slash go back that's it and now we need to or do we need to add uri no okay it's not like in the session here that's absolutely fine and now we can create it note that it can actually take five or more minutes to take effects or be patient let's create this this will give you your client id and your client secret which is what we need for here so what i'm gonna do is i'm gonna grab this and i'm gonna go to my dot env file and inside here i'm gonna paste the first variable and then i'm gonna copy the second variable and i'm gonna replace it in here so let's fill the date in here client id it's gonna be equals this client id in here copy and paste and then the client secret is going to be this one here copy and paste and save now we can access them from the or dot env file and to do this we can do process dot env and we put the name the same for the other one process dot env google underscore client underscore secret in fact we can do the same thing for this one here but we need to change the year the google callback is what we put inside here if you remember inside the old client here and so what i'm gonna do is instead of this i'm gonna put local host of 5000 like so and then i'm just gonna remove this and put google callback but we can definitely move this as well to the dot env file let me copy this and maybe we can say google underscore callback url and this is gonna be equals the URL that we have in here copy paste and that should do the job and now if we replace this i need to copy this and if we put it here dot env dot google callback url url in this case save okay let's go back to passport here and then let's have a look when we scroll down we have to route so for example as a route middleware in expense application so we can get the auth google which this is where we linked all sign up and login buttons we can get this and also this is a successful authentication redirect now so they're gonna be very useful let's copy both of them and we can paste them somewhere around here in the same old file and let's have a look at what we need to modify so this is gonna be your google login route and this is gonna be receiving the user data route the only thing that i'm gonna modify from here is this remove the auth so we have google callback instead and instead of doing the successful function here what we can do is we can do an inside here so we can do another comma and so we have failure redirect and this is gonna be maybe we can redirect them to the login page we don't actually have a login page so i'm gonna redirect them to home or you can create a different page if you wish but then we have a success page success redirect and this is gonna be or dashboard so slash dashboard so when we log in i want the user to go to the dashboard and that is looking good we probably don't need the comma here if you wish to have a failure redirect so maybe you can say maybe you can say failure in here then what you can do is create a quick routing here so i'm gonna put router if something goes wrong and then you can do router dot get and inside here we can do the login dash failure page and then this is gonna have a request and a response and then this is gonna be equals and then we can just send rest or send some data or you can render the data if you wish but i don't want to create the page so something went wrong essentially if we get the failure it's gonna go to this and it's just gonna display something went wrong which is fine and now if you scroll up a little bit more let's focus on the passport dot use one more time and we've already done here the client ID the client secret in the callback but let's have a look at the actual function so depending on what you're doing you could have an access token and a fresh token but today we're only gonna be using this profile in this CB so the CB it's a little bit confusing but if you search for in here you will see that the CV the verify callback must call CB providing a user to complete authentication i'm gonna show you how we can do that as well but what i wanted to show you now is as you can see they have an example of find or create user we're gonna have to do this slightly different but before we do that i want to show you how we can actually get the user data for example let's do console dot log and then i'm just gonna log in the log the profile or the profile comes from here and also we are only getting the password authentication scope profile but it might be helpful to actually get the email as well so what i'm gonna do is put email and then put comma and now we can get the email and the profile which is great but what i wanted to show you here is that when we click login i want to display the user object so when we click the login button it's gonna go to off google which we've already done here if you however you see on the left bottom corner that it's gonna go to off google so let's click that and see what happened so i cannot be reached okay um app is not defined okay so because we copied the code from the website i totally forgot that we can't use this in here we need to use the router so let's copy the router so router dot get router dot get and yeah and i've done this one correctly okay and then we explore the router one more time everything is working so let's go back refresh uh login session require session support and this is happening because in app.js we have the app.use passport session so let's comment this for a sec and let's go back so everything is working fine no errors if we click on sign up you will see that we are getting we are presented with the accounts that i'm currently logged in so if i click on ready here and if i put my password you will see that something is happening it's redirecting let's have a look at the console log so this is what i wanted to show you we haven't configured the rest of the step but this is what i wanted to show you so we're getting a full object of the google account so we're getting the google id display name the name family name given name we're getting the email now and then i'm getting a profile photo which we can also use if we wish so let's finish the rest and then we should be able to sign in successfully and make a user profile in our database as well so there are a couple of things that we need to do in or.js at the bottom here we're gonna have to create two more functions the first one is gonna be persist user data after successful authentication and the second one is gonna be retrieve the user data from a session so those two functions can be found on passport as well but i'm gonna write them super quickly passport.serializeUser and inside here we do function and we do user done and then we do done and then we put no or send the user id after successful authentication and then the next one is gonna be the retrieving user data so password.serializeUser and then this one is gonna be function id done and then inside here we put user dot find by id and then the id and then function error user and then inside here we put done the error and the user so this is not gonna actually work because we haven't actually created our model and also just to finish this off before we created the model let's go back to app.js and somewhere somewhere below the port number maybe we can definitely un-toggle this back app.use passport.session and inside here we can do app.use session and then we can do we can do secret and this is an example from the official documentation make sure that you change this and then resave we're gonna change to false then save initialized we're gonna change to true and then for the storing sessions we're gonna store them in our database so store and then we're gonna do mongo store this is why we're using mongo store by the way and then we're gonna do create and then we can create a new session for the user mongo URL like so and the mongo URL is gonna be process dot env dot mongo db ur i this is going to come from the dot env file and now the last thing that we need to do to finalize or authentication is to actually create the model so let's close this and let's go here at the top of of js let's bring in a model so what i'm gonna do is first of all inside the server i'm gonna create another folder called models and inside here i'm gonna create our first model which is gonna be the user of js and this is essentially how the data is gonna be structured in our database i need to link this authentication file to the user so what we can do is put const user equals require and then we require the model so dot dot slash our models and then we do user and now we need to create our model so inside user.js we need to bring mongoes so const mongoes equals and then require and then we require mongoes okay and now to create or schema we need to do const schema equals mongoes dot schema and then we can do const user schema equals new schema and then inside here is where we list the schema but before we do that let's export it so we're gonna do module not export and then we're gonna do mongoes not model and then i'm gonna call this one user and then we want to order essentially the user schema from here and we're good to go all right now we need to create or schema the first one i'm gonna get is the google id and the way i've done this is by looking at the data that we get like the id the display name family name given name email and profile photo so this is how it's gonna work let's start with the google id and then the google id is going to be a type excuse me and this is gonna be type of string this is gonna be a required field so we need to put required true and we are actually good in this one so what i'm gonna do now is copy this and paste it a couple more times so this one is gonna be display name type of string required true paste it one more time first name this is gonna be type of string required to true we can do last name type of string required to true we're gonna do profile image type of string required to true and then the last one is gonna be the date that the user has registered so create it at and then this is gonna be a type of date and this is gonna be have a default so it's gonna have a default value which is gonna be the date now that's it let's remove the comma and we should be good to go with our model if we close this indy on auth.js file what we need to do now that we're getting the profile what we need to do is in fact let's change this to done and inside here let's remove the console log now first thing that we need to do is use the profile to create an object of it so we can insert it to a database if the user hasn't registered yet so for this i'm gonna do const new user and then this is gonna be equals and then from here we start listing all the fields so google id and this is gonna be equals profile.id so essentially we're going into the profile object and we're grabbing the id and then i'm gonna do comma and then we're gonna have display name and this is gonna be profile dot display name like so now we're gonna do another one first name this is gonna be profile name dot given name and this is like that because we need to go into name and then we can then select first name or given name that's why it's like this by the way and then we need one more so this is gonna be last name profile name and family name okay and then we need the image and the image and for the profile image we can do profile dot photos and then we select the first object and then we select the value inside just to show you one more time we have photos value and then we select this value in here so this function needs to be converted into an asynchronous function so async like so and then inside here now we can use try catch and then for the catch i'm gonna do console dot log and then we're gonna log the error error and then for the try there are essentially two things that we need to do we need to first of all query the database and see whether we can find an existing user and if we do we can successfully log them in and if we don't find a user then we can create one and then we can log them in to do this we can do let user and this is gonna be equals await user dot find by now find one is the one that i'm looking for and by the way this is coming from the user model and then find one and then inside here we can put the parameters that we want to search for so in this case we're gonna look for google id and this is gonna be equals file dot id coming from here and that's already looking good and now we can do if user we get the user then done and then we can put no and then user the next bit is gonna be else if we don't get the user we can do user equals await and then we can do user and we're creating the user this time create and then we can just put the whole object from here which will give us the profile id the name the given name family and picture so we just put it in here like so and then we can just do done and then no and then user i've got the catch around here as well and let's study things up sorry okay let's study things up super quickly and if we do right click and form a document that might make it a little bit better okay because i'm using pre-tm i think that might be it so if we go to the website by the way make sure that you don't have any errors i might have to scroll down a little bit yep now it is so far if we go back to the website refresh it's all working so if i click sign up and then if i click on right a user find by id is not a function yeah that's correct so if i go here we need to do just go down a little bit online 65 i've made a mistake i put d so find by i've missed the iron here so find by i think it's found by id dot find by id like so okay very mistake and now if i go back okay website is working no errors all right now if we click sign up and then if we click on my username let's put the password in and just like that we were redirected to the dashboard which means that we've successfully logged in and we're not getting any errors and now if we go back to the database so as you can see earlier we had no data but now if i refresh we should be able to see the test here the test database which i mentioned earlier in this tutorial where we have the dot env at the end here i've put test so this is the name you can change to whatever you like but then if we look closely we are having a session and this session has an id expiry date and a session cookie on and it has a lot of data such as the expiry and so on and then the other thing that we need to look at is the user so or user model we need to check whether we get all the data so i've got the object id in here as you can see i've got google id i've got the display name the first name the last name i've got the profile image and we've got the created which means that our login is actually working and that's awesome if i was to right click and inspect you also see under applications that you probably have a new cookie created here and that's coming from the session code that we created in our app.js and one thing that we need to do for the session is to hook up or log out button so let's do that inside auth.js let's do the round around here i'm going to do destroy user session in here so this is going to be a router dot get and then inside here we're going to do log out okay we're going to do okay we're going to do slash log out and then i'm going to do call and then inside here i'm going to do request response and then we're going to do a narrow function like so and to destroy the session we can do request we can grab the request and then session and then destroy like so and then inside here error and we just need to but if we have an error then we want to console login and then we want to press dot send and then we can do a message such as error log out but then we can add a nail statement here and if we successfully logged out maybe we can just redirect to the homepage so rest dot redirect i'm just gonna put the homepage of course you can choose whatever you like maybe even create another page whatever that should be all log out working and if you remember early in this tutorial the header i actually linked this to slash log out so we already done here and i can click on him and as you can see it goes to the homepage now the issue here is that even though that i just logged out and i can even let me remove everything from here that we don't need even though that i logged out and i can even remove the session here let's do that i'll show you how this works in a second as well if i go to the website and if i go under slash dashboard you will see that i'm able to go to the dashboard even though that i'm not authenticated now so let's fix that in order to do that i'm going to create another folder in the server folder called middleware and in this folder we're gonna have the check fourth dot j s and now inside here we're gonna do a simple function that we're just gonna export sports dot and i'm gonna do is logged in equals function and then we can do request response and next and then inside here we're gonna say if we get a user request dot user when we log in then we go next and then else if we don't get a user then we want to return something like turn and then we can do rest dot status and then inside here maybe we can do four one and we can do send and then we can send access deny to something like that of course you can do instead of rest dot send you can do rest or render and create a another page for access denied in this case we've got the check in here and we can close this and now inside or route so i'm gonna go to route dashboard and then inside here we can bring that function by going const and then we can do is logged in and then we can do require and then we're gonna require dot dot slash middleware and then inside here we're gonna do check or so we're requiring this file and now if you want to secure this route or any of the route we can get the is logged in but inside here with a comma and now this route should be protected in order to test this we can go to our website and then dashboard and if we click enter you'll see access denied which means that it's protected in order to see whether this works we can go back to the website and let's sign in or if i click sign in oh you already signed me in because i think the browser knows that i'm already logged in with google so but what i can do is i can open a new browser super quickly maybe and then i'm gonna go to the website sign in and then if i sign in with my account you'll see that i'm now logged in i can go pretty much anywhere i can go to the home page if i wish to i can go to the dashboard if i wish to but now if i log in log out sorry and if i try to go to the dashboard i can't so the authentication is working and also if you go back to the original browser here and if we go to sign in so we're signed in right now and let me show you how the sessions actually work as well if we click on sessions we should see new sessions in here and i don't know which one is which so i'm gonna delete both okay now that deleted the sessions i was logged in here but look what happens if i refresh access denied so this is pretty cool the sessions are working as well and one more thing that i could show you about the sessions is that if we go to the app.js file and if you look at the app.js session with the keyboard cutting here you could change the cookie expiry if you wish to for example you can put another property here so cookie and then this could be you can put the max age in here for example let's say max age new date and then this is gonna be date.now and if we do plus and inside here if we do three six with five zeros one two three four five i forgot to put the dot okay that should now work and now that should make it an hour and if i was to save this and if we go and log in one more time okay so sessions refresh hopefully you'll see that the expiry now has changed it was no before i'm not sure if you can see but it has changed it was no before and i can show you and you can mess around with this obviously i think it's best to just leave the user logged in as long as possible without compromising the security if you wish to know how to do something like seven days you can do something like days you can do something like this or if you wish you can do 30 days if you wish so this is gonna be the days you can create a variable or you can just put 30 days and that should work as well i'm gonna leave this here if you wish to mess around and i'm gonna comment this okay let's have a look at what do we have next all right now is a good time to start looking into the dashboard so for this let me close everything and let's start by creating a new model so while we have seven models let's create a new one and we're gonna call this one notes js and inside here let's have a look at what we get inside here i can copy those two paste them in here and so we have const mongoose require mongoose const schema equals mongoose schema and we need to export this we need to create a new schema so this one is gonna be const node schema equals new schema and just like before the way we've done the users we're gonna list all the fields in here and once we do that we do need to close this we do need to module export it towards equals model and then the model that we're gonna export is gonna be called note and then i'm gonna export the note schema like so so let's create a very simple model for the nodes every single note will have to have a reference to the user so when you make a query on the dashboard you can only see your notes not everybody else's and in this case we can do user and then inside here we can do a type and then this is gonna be schema dot object id and then the reference is gonna be user after this we're gonna get the title for the title this is gonna be a type of string and this is gonna be a required field and now we can actually copy this one more time dot comma and then this is gonna be the body of the note and then this is gonna be a type of string required i've misspelled required required like so and then the last thing i'm gonna do is created ad and then we're gonna do type it's gonna be date and then this is gonna be the food date dot now so we get the current date and time and we should be good to go oops close this all right now that we have the nodes model let's go back to controllers and let's click on the dashboard controller and we want to focus on the dashboard page here so we actually want to be able to use this controller we want to be able to read nodes add nodes update nodes and so on in order to do this at the top here we're gonna bring the nodes model so we can do const node equals require and then we require the nodes by doing dot dot slash models to go to the folder and then we do notes that's done and then we need const mongoose to interact with the database so we require wire and we require mongoose now if we were to go on the website right now we'll need a little bit of work maybe we can put this in the middle and so on so let's start building that so leave the dashboard controller open and let's open the actual views and then dashboard and then the index which is the main dashboard page so from here let's build it up i'm gonna wrap everything into a container fluid and then i'm gonna add my container fluid class we're gonna do adding bottom of five and then margin bottom of five as well and press enter this will create a div and inside here we can start designing or layout so to start with i'm gonna create a row with the margin bottom of four and this is gonna hold kind of like a hey message and maybe a link to uh adding new nodes let's create two columns so call and then inside the first call we're gonna have hey and we're gonna have the username which we're gonna replace very shortly and in fact i can wrap this into an h1 tag just to make it look a little bit bigger and nicer and then we can close the column here and we get to go create another one so div with the class name of call and then text and to push it to the right side we're gonna have a link so a href and this link is gonna be to the dashboard and then maybe we can create an ad page for the notes that that's it let's give it a class name or button and btn primary and maybe we're gonna do plus new note so if you go back and just refresh you'll see that we have a username and we have the note here which is supposed to be on the right side maybe i misspelled something yeah i spelled text and wrong if i refresh you have it on the right side here and straight away if we go back to the dashboard controller here we should be able to get the username by doing for example we have the lurkers we have the layout here and we can keep on adding to this so for example we can do user name and we should be able to access the request dot user and access the first name for example first name like so and save so essentially i should be able to use username inside here with ejs so put the username in here and i will save and if i refresh you'll see that it says hey ready and now we can have a look at adding some of the notes for the notes what i'm gonna do is inside here i'm gonna create another div with the class name of row and inside here is where we're gonna be displaying the notes now i actually haven't got any notes in the database and we need to create the add note page in order to do that i want to finish the first page first here so what i decided to do is instead of going backwards and forwards i'm gonna insert some dummy data straight away from here from the home hit the dashboard i'm gonna insert some dummy data and then just remove the code if that makes sense we could put a try catch inside here super quickly and i can say await note which is our note model here so we're waiting on the note model and we are just saying insert many like so and inside here as an array and inside here we can create a few objects since i already know how the database looks like we're gonna have a user and then we're gonna have some data we're gonna have a title body and created that so what i've done is super quickly i've created some data and let me just show you before paste it all it's just very simple data so the user that i actually copied the id from the user when i've registered so this is this might be a good thing to change so if you go to your mongo db just copy user id or you might have available in your console copy here just so you can insert that instead and then have a title a body for the note and then like random create it out it doesn't matter too much because later on we're gonna be inserting this with a form and it's all gonna be nicely done this is how it's gonna work right so i've copied and pasted a little bit of data here just so we have a few notes for the example all right let's try to insert those notes and obviously this is not a good idea we need to remove the code straight after because we don't want to keep inserting documents but technically speaking if we hit the dashboard route we should be able to insert some notes and this is also gonna create the notes collection for us as well so if i hit f5 hopefully is done the job if we don't have any errors and then if i go to the database here and if i refresh we should have a few notes now here they are here we go and that should be good to get started by the way i'll put this data on my blog or the description below you'll find it someone and now let's remove it okay let's do a very basic query and display some data and then we'll build on top of this since this is an asynchronous function inside here we can do a try catch and we can do something like const notes equals and then we await note and then we can do find like that and we can pretty much find everything if we wanted to and maybe even console.log the notes if we wish to so if i was to run this we should get in the console it's because i put note instead of notes all right if we console.log notes and if we refresh the page inside the console you should be able to see all the notes that we have and we can actually display them we obviously gonna want to do something a lot more complicated than this but let's start with this and we'll build up the query so essentially we want to move the rest render inside here and we want to render the notes so i'm gonna make some space and make a note and in this case we're literally going to the database getting all the notes and rendering them if i go back to the home page here sorry if i go back to the dashboard page now we can actually loop through them super quickly if we open and close ejs inside here what we can do is if we get notes dot length bigger than zero then we want to do a for loop so let's do for variable i equals zero and then we can do and then we can do i if i is less than notes dot length then we do i plus plus and we and we open we can put them on one line here and we can close the ejs like so we can close the ejs here and then we can close it in here and then we can do that if we put on one line here just so you can see we're getting if notes the length is bigger than zero and then we're doing a for loop and inside this for loop we can loop the data for example i'm gonna create a column sm3 and then margin bottom to be four and that would be for column for the card and then inside here we're gonna create a card so dot card border dash primary and then for this i'm actually gonna give it a height so i'm gonna give it a style of minimum height so they will look a little bit more presentable 210 pixels and then inside here is where we can loop the maybe we can wrap the whole card to be a link itself so i'm gonna do a href and then inside here we're gonna do slash dashboard and this is gonna be getting item and this is gonna be the link to each node basically and inside here we can start writing ejs to get the id for the card so for example we can grab the nodes and then and then we put i in here to select the object and then we put underscore dot underscore id and we need to close the ejs like so so that's gonna grab us the id also i need to add a class of card body and text decoration then as this is a link i don't want it to be all underlined let's close this we're gonna add a title of h5 and this title is gonna have a class of card title and inside here we can literally copy this based in here and we can do nodes i and then instead of i this time we're gonna bring the title of the node and then i can literally do the same for the rest so i'm gonna do paragraph and this is gonna have a class name of card dash text and inside here we can do body like so that's kind of it if you wish to have a button instead of wrapping our card you can create a button and just link it but i like it button less so let me tidy this up because looking a little weird so this is checking if we get any nodes and if we do we loop through them but also if we don't get any nodes we can do a nav statement here open the curly bracket and then we need to close them somewhere so i'm gonna copy this and just close the curly brackets somewhere down the line and inside here we can do another div with the class name of row and then inside this row i'm gonna add a nice image so source and this is gonna be under slash images slash human dash free dot svg and then this is gonna say human pointing hand towards a create button make it look nice it would be nice to add the height and the width and we can actually put this into a column of three and just wrap the image like so so we can put another column on to the next side so we're gonna have another call and then this call is gonna have a margin top of medium four and then inside here i'm just gonna put a title to okay dot dot dot and then we put a nice text for example let's put an h4 and we can put let's start with your first node and then we're gonna do i'm gonna be a little bit lazy and i'm gonna do br a breakpoint and one more breakpoint and then after the breakpoints i'm gonna do a link so a href definitely not good to have a link into the h4 for the driver now dashboard and then add this is gonna be a create note button so create one like so and close the link and we should be good to go make sure that you close the ejs at the bottom and hopefully now if we save this and if you go back to dashboard you should see that we don't have any notes which is a little bit strange and then it's asking us to create one if i was to go back to the database let's have a look at what's going on we do definitely have some notes in here let's see okay and the problem is because i misspelled length now if you go back and refresh you will see that we're actually getting full notes and they are all linked and so on if we didn't have any notes then obviously obviously if we didn't have any notes if i change this to bigger than zero so it doesn't show then we're gonna get okay let's start with your first note so basically we are checking the database if we get any notes and if you don't get any notes we're getting a nice message just to style it so essentially when you create your account you're gonna get this okay let's start with your first note and when you click this is gonna go to the dashboard slash add which we'll create later on and then we'll be able to add notes but for now we do have some notes which i added so we're all good to go now there are quite a few problems with this first of all we are looking on the database and we're literally adding all of the notes that are available we don't want to do that we want to do them specifically to the user that's logged in and we don't want anybody else to be able to delete them or update them but not only that we're getting a few other problems in here now potentially notes can get very very big these actually very small examples and obviously if they're fairly large the text is gonna be insane although you can put the height to whatever you want and hide the text that's probably not a good idea especially if you have a lot of notes so what we're gonna be building now is i'm gonna do the pagination and also i'm gonna constrain the title characters and the body characters as well so we're making the page a little bit more efficient i guess okay this is gonna get a little bit more complicated here but essentially this is all cool and if we go to the dashboard here so the dashboard controller let's start looking into the query so first of all we'll also need to think about the pagination here so i'm gonna do everything at the same time let's start by doing let per page and then inside here we can say how many notes we want per page and let's see one two three four maybe i can fit 12 and he's gonna look nice so let's say per page we say 12 and then i'm gonna say let page is equals and then here we're gonna do request dot query and then we're gonna say page and this is gonna be if we don't get any query it's just gonna set it to the first page you'll see how this works in a second we will have in fact we can have this outside so let's have it just outside here with the locals and then inside the try is now where we're gonna start or query all right so we need to create a more advanced query now and to do this we're gonna grab the note which is our model from the top here and now we can start with aggregate inside here we're gonna put all the options so let's start with a curly bracket open and close and the first thing that we're gonna look at is the sort so the sort is fairly straight explanatory created at and i'm gonna put minus one so we want to sort the notes when we get them by the newest first and then everything else follows so this is what we're gonna do here the opposite can be done with just one i think and that will work and then we need to match the user now so what we're gonna do is use match and then inside here we can get user and then we need to use mongoose dot types dot object ID and then we're gonna get the request user and the ID so we want to match the notes that we get from the database to the user and then we need a comma and inside here we can modify the result for the title and the body so we can get less characters than what we get now instead of getting the full note if that makes sense so inside here we're gonna do project and i'm gonna do title and then inside here we can do the string like so and then we're gonna do title well that needs to be in votes and then we're gonna put zero and then 30 so i want 30 characters for the title and i can put comma and copy this and this is gonna be the body now exactly the same sub string but in this case we're gonna select the body and in this case let's say we want to return 100 characters so we can save this there are quite a few ways of doing this but that's the way that worked best for me here we're gonna add some of the pagination as well so the next thing that i'm gonna do here is i'm gonna chain it and put skip and then i'm gonna put per page which we created earlier here per page 12 so we want to skip 12 and then times that by the page and then by the per page page so the page is the actual page that we're gonna be on i'll show you how to do this with the parameters so for example the first one is gonna be times about one then it's gonna be times by two minus the current page the next thing that we can chain here and in fact i'm gonna put them on another line so it looks a little better and we can do limit and inside here we can limit the results that we get and again i'm gonna put per page so we limit 12 results per page like so and then we can do execute and inside here this is gonna be a function we're gonna have an error and then we're gonna have notes and inside here we can do note dot count dot execute function and then we're gonna have error count and then inside here we're gonna say if we get an error return next error and now we can render the results just like we did earlier inside here so i'm gonna grab that and paste it inside here so we want to render the first name that's fine we want to render the titles we want to render the notes but we also need to add a few other things we're rendering the dashboard layout that's fine but also we want to render the current page page and last but not least we're gonna do some math which is gonna go pages math dot celly and then count slash per page so math dot celly is a function that always rounds up and returns a smaller integer greater or equal to the given number think that we might be good to go now do we have okay if we have tried do we have catch yep it's just a little bit down here so if you tidy it up and we do need to do console the log and then inside here we're gonna do error okay that it is up and that's it so if you go back to the website now and if you refresh you will see that i'm getting object object okay so we are getting data but something has gone wrong let's have a look and we'll fix it okay and this is because under here where we have project title and substring substring we need to add the dollar sign one more time and then if we refresh you will see that we are getting less characters now and let's say that i don't know let's say that we're getting 20 just so we can test it and now if we refresh you'll see that we're only getting 20 characters here which is exactly what we want i don't actually have 12 nodes which is not good all right i should have inserted a few more notes for this so what i'm gonna do is insert a few more notes and then we'll continue okay i've inserted a few more notes in here and now if you go back to the dashboard controller if you remember we've put per pages 12 and we have this let page equals request query page so this query can be actually put on the URL and this is actually gonna trigger the pagination so i'm gonna show you how this works and inside here after dashboard you can put page equals and then the number so for example i probably won't have enough records but i'm gonna do page two and now you will see that we're on page two and we are getting one more record this is because i've only got 13 records in here i should have added a little bit more but you can see that the pagination is working and if i change this to let's say eight or like that now if we hit on this obviously it's gonna split it so we're gonna have a few here and if i go to the first page page number one we have the internet so this is how the pagination is going to work and of course we need to display inside here now since we're using bootstrap 5.2 i'm gonna be using this as an example but i'll create a step by step just so you can see how it works and i'll probably modify a few of the things so if we go back to the index.js here and let's have a look so we have a row and just want to close that after this row here we can create our pagination let's make some space all right so this one is going to be tough to understand i saw this example online and i slightly modified it to my needs and i will link the article below and i'm gonna try to explain it as much as i can and also just to mention we're going to be using the bootstrap pagination from here so potentially we could just copy this but i'm not sure if it's gonna make it worse so okay let's copy here just so we have a few examples but this is how it's gonna be working so we're gonna have the nav we're gonna have the pagination list and then we're gonna have a previous next let's open ejs and write if so we want to check if we have nodes and then the length is bigger than zero then then if the link is bigger than zero for the nodes we actually want to display the pagination me close ejs and don't forget to close so and we should be good to go so essentially now if we put this in here just to test it we should be able to go back refresh and we get a pagination here of course we don't want it this one just yet but what i'm gonna do this is gonna get very messy now so for this for the nav i'm gonna copy the nav here and close it like so and then for the another list i'm gonna copy this here paste it we need we don't need to close it and then inside here is where we're gonna start doing the check first check is gonna be whether we are on the first page or the previous page start ejs and we're gonna do if current is equals equals 1 open curly brackets close ejs and now we need to display it a list so i'm gonna grab one of the lists here the previous one and paste it and then we need to open ejs here and put else and then inside here we need to do first so i'm gonna copy this and see whether we can modify and potentially modify so i'm gonna do page item page link it's fine and then this one is gonna be just called first and when you click on the dashboard obviously we want to get the first element so what i'm gonna do is just put dashboard back so if we refresh unexpected catch okay yeah it's because we haven't closed ejs in here i just wanted to test it super quickly that's why i'm rushing okay so if i refresh we're getting previous which is working and this is just a demo okay so far so good the next thing that we need to check is that if the current page has a value less than five then we can display the first four links if that makes sense so what i'm gonna do let's start another ejs here variable i is equals and we're gonna put number we're gonna put current and then inside here this is gonna be bigger than five else number is gonna be current minus four column one and then we close ejs inside here we need to if i is not equals one do that and then inside here we need to first of all close this and then we need to display another list so i'm gonna copy one of them paste it inside here and this is gonna be just dot dot dot and the link is gonna be empty as it is that should be absolutely fine and the next thing that we need to do is actually loop through the numbers now to display them the available numbers so i'm gonna do let's start a for loop and inside here we do i bigger or equals number and then we're gonna do the current plus four and and and we're gonna do i less or equals to pages i plus plus we need to close the ejs and make sure that you start and closing here so we don't break anything and now we can check if we're on the current page if i is equals equals current we need to close this then inside here we're gonna do a list i'm gonna copy this one here so list pages but this one is gonna be a little bit different we just want to display the page here so in this case we can just use ejs so i'm gonna ejs here and then equals and then we're gonna do i to display the number and let's close ejs cool so this is not gonna be a linked one but then we need an else statement and for the else we're gonna do another one but this time this one is gonna be linked and it's gonna be linked to we're gonna leave this here but it's gonna be linked to slash dashboard and then this is gonna be uh is gonna have question mark page and then the number just like i showed you earlier on the browser uh we need to close the else statement as well don't forget that we need to open the else statement first of all and then close it and the last one that we need to do in the loop here is if the number uh if i is equals equals number and then we have current plus four and and and then we have i less than pages okay let's make sure that we close this as well and this is gonna be another list so i'm gonna copy one from here okay and this one is gonna be instead of three we're gonna put a one two three dots and the href is gonna stay the same that's absolutely fine uh we could potentially even test this server okay if we check the website super quickly we are getting an unexpected token and this is because on 965 i've put this on the wrong spot so we need to fix this and now we should be good to go and for the rest let's have a look we're gonna have a new ejs here and i'm gonna say if i equals equals number we're gonna have current and then inside here we're gonna have plus four and and we're gonna have i smaller than pages then we close ejs we open it here and close it and inside here i'm gonna put another list like so and then instead of one this is just gonna have three dots let's have a look okay everything is looking good and the last thing that we're gonna do is the last and the next page so essentially uh this here so what i'm gonna do is let's start a new ejs so open ejs and if we get current equals equals pages then the then we close ejs inside here we put the list and this is gonna be last and i'm also gonna make this one disabled and then we need to close this else open close it and inside here i'm gonna do another list and then this list is gonna have a link this time so let's remove the disabled and this is gonna have a link to dashboard and then slash page equals and then we're gonna bring the page number of the pages like so and we have instead of last we're gonna put next next and we need to close the ejs okay let's me tidy things up and now if you go back we should see that one navigation is here and let's remove the dummy one from the top and i also want to justify it to the center so where we have pagination i'm gonna say justify justify content center margin top of five okay this is looking pretty good one thing that i'm noticing here is when i hover the link is not the way i wanted so i'm gonna go to the index page here and find the link which is gonna be the link for the card here it is i forgot to put slash and then we'll have the id so when we go to dashboard item we're gonna pass the id of the note and then we can see the note all right let's do that now so what we can do is let's close all this we're gonna leave the dashboard controller open for now and what i'm gonna do first of all is in the dashboard views i'm gonna create a new page called vnotes.ejs and this is gonna be all view page and then we also need to create the router for this which is gonna be in the dashboard so we can essentially copy this one here and this is gonna be dashboard and then maybe we can just put slash and we can put item like that and we also need to get the id for the item so i can just put dot and id so we'll be able to get this from the URL this is gonna be the get route but we will need to make a post one we might as well make it now we have the check ought middle here and we do need to change the dashboard function to be something else such as our dashboard view note and now let's duplicate this one more time and this one is gonna be post so we want to vdata and we want to post data when we want to update the note so this one is gonna be dashboard control and then dashboard maybe update note and then we should be good to go now let's create those two functions the dashboard view note and we need to create them inside the controller so here it is and we have to do it pretty much exactly the same thing as here so what i'm gonna do make a little space this is the first one that we need to create and i'm gonna paste a comment so this is gonna be the get one and it's gonna view a specific note when we click on it let me grab this and let's do exports and then this exports the dashboard view note and is equals async and then this is gonna be request response i'm gonna do another function here and then we can start building the logic for the logic here is that when we click on a note this has the id so i'm gonna refresh probably need to start it and let's create the other one so i'm gonna copy it around here and i'm gonna copy dashboard update note just so we have it and i'm gonna put it here we don't get any errors and yeah and it's all working so if i if i reload the website when we hover over you will see here on the bottom left of the screen we have dashboard item and then the item id so we want to query the database for this specific id and we want to query specifically for the user that is logged in so let's have a look at how we can do that and what we need to do is the const note equals await and then this is gonna be note dot find by id and inside here is usually where you can do the actual query so in this case we need to query the id which in MongoDB is underscore id and then we can put the actual id that we are passing so we can get it from the actual URL by doing rec dot rams dot id and just like that we should be able to do the query but we want to make it so that the user that has logged in can only see their note so in order to do this we can put a where method for this method let me put on another line so you can see and this method is gonna have the user and we're gonna put the user id that is currently logged in so request dot user dot id and just like that this is gonna be unique to this user and nobody else is gonna be able to read the note and also because we are using a get method we can actually put lane and that should be it now pretty much we need to check whether we get the note and just render in order to do this we can just say if we get the note let's say if note and then inside we're gonna render the page that we want so rest dot render and then we want to render the dashboard slash view dash note this is the page here so dashboard view note which we're gonna make in a second and then inside here we need to do comma and we need to pass the values that we want in this case i'm gonna pass the note id and then i'm gonna do request dot rams and then id like so with a comma we can put the note the result from the notes and then the last thing i'm gonna do is the layout so for the layout i'm gonna do dot dot views slash views and then slash layouts and then slash dash what and the last thing now we can do is put else and then maybe we can just put rest dot send and we can just send the message if i'm wrong okay so good if we go back and if we click on one of the pages we should be able to render the items page with the id in here so now let's have a look at how we can actually display the notes and so on so to start with let's wrap everything into a container so dot container fluid dot container fluid and then dash custom and then padding bottom of five and oops adding padding bottom of five and then margin bottom of five inside here we're gonna pretty much do two rows the first row row of margin bottom four is gonna have a column so call and then inside this column we're gonna have a breadcrumbs let's create a navigation for our breadcrumbs and this is gonna have a area label of breadcrumbs so and inside here i'm gonna have a list so or l and this or l is gonna have a class name of breadcrumb so inside here we're gonna create two lists the first list is gonna have a class name or breadcrumb item so breadcrumb item and this one is gonna have a link so a href equals and this link is gonna be basically a back button to the dashboard so we can just do dashboard and then this is gonna say dashboard like so let's copy this or shift down and i can remove the link and instead we're gonna put ejs in here and bring the title so equals note dot title and then we can close ejs and then this is gonna be an active one so and now if you refresh you'll see that we're getting the dashboard and the MongoDB tutorial which is actually coming from the database so if we go to another one let's say learn Morgan you'll see that it says learn Morgan and so on now let's build the rest of the page so underneath nav here in the same column actually we can create another column so call this one is gonna be d flex and it's gonna have justify content between and then this is gonna have a line item center okay and inside here we're gonna have two things i'm gonna have a title h1 with the class name of h3 to make a little bit smaller and then this is gonna say view note and then i'm gonna create a button here and this button is gonna be the type of button it's gonna have the class or btn dash danger is gonna have margin e and we can close this so this button is actually gonna be the delete button like so let's have a look but what i want to achieve is that when we click on the delete button i actually want to bring in a pop up here so we can delete the notes so it's basically if you click it it's gonna warn you whether you want to click the notes so we're gonna definitely do this and in order to do this we can give this a data dash bs bush drop toggle equals model we're gonna give it an id and the id is gonna be delete button the world wrap and then i'm gonna do data dash bush drop dash target it's equals and then we can do the example model okay and now if you wanted to create this model because we added the bush drop javascript early in this tutorial we can create this somewhere somewhere outside pretty much so what i'm gonna do is search for model in bush drop i think that this one is gonna do the job so what i'm gonna do is copy this model this model and just change a little bit so to start with this is gonna have model and fade the top index is gonna be minus one the id on this one is gonna be the same with the example button here example model so in fact let's do the delete model so it makes sense and then we do delete model for the label i'm gonna do you are about to delete this note we're gonna have a close button that's absolutely fine and inside here inside the body i'm gonna change it and say this will note and then we're gonna put b with the class name of font weight bolt and then we're gonna put the note title so with egs we can do dash note title like so and then maybe we can do a vr break and then we can do are you sure are you sure and then for the buttons we're gonna have a little how they work close and save changes okay so we're gonna have a close button which is fine and then we're gonna have a delete note button okay let's save this and let's see whether it works let me go here delete the model is coming up which is great i do want to change the position but this is looking okay a little bit different than what i want it's but that's absolutely fine so what i'm gonna do is just change this and then we hook it up a little bit later so and say okay now let's finish the rest of the page if you scroll up a little bit the next thing to do inside this div here so outside so not in the first row let me tidy things up so just after the first row i'm gonna create another one here and this is actually gonna be a form we'll be able to output the note and also we'll be able to update it so let's create a form okay this is gonna have an action and we're gonna do the action in a minute when we actually build the logic so i'm gonna leave this as it is then we're gonna have a method this method is gonna be post and then we're gonna have a class name of position relative let's close this form and inside the form we're gonna basically have two fields so the first one let's make it in a group so div with a class of form dash group margin bottom of form position absolute and i'm gonna show you why position absolute i want this to be to look seamless like it's one note instead of two different inputs and then i'm gonna just put some styling to this to make it in fact let's leave it for now i'll come back to this and inside here we need the input so input and we're gonna do the type to be text and then inside here we're gonna do the class name of form control and then fold font weight bold border zero fs form and the idea of this is very important we need to have it as title the name and we need the value and the value is gonna come from the database so we're gonna do ejs in here equals not dot title and let's close ejs like so and then i'm gonna put a place order if there is nothing so place order equals maybe title that's looking good let's have a look if we refresh the page you'll see that we have the mongu db tutorial in here that needs to be full width so what we can do is on the div here we can put some styling because i made the absolute style equals left minus one pixel and then top minus top one pixel and then right is gonna be one pixel something like this close down and we should be good to go okay now this is full screen and this is actually coming from the database so if we go to another one learn morgan as you can see we have learned morgan in here right let's do the other one so for the other one we're gonna be doing pretty much the same thing just here below we're gonna have another form field this is gonna be form group margin bottom of four we're gonna have a text area this time as we want to write a little bit more so this is gonna be a class of form dash control add in top of five font size of four and then i'm gonna have the id body and then the name is gonna be also body very important and then the placeholder is gonna be take a note dot dot and then i'm gonna create a few rows so rows equals 12 and then the last thing that we're gonna do in here is actually put the actual note so in this case let's with ejs we can do note dot body instead and now we can close it save this let's go back refresh and now as you can see we're getting the note here this looks a little bit odd maybe it's because i put minus one pixel i'm not so sure yep that needs to be one picture and that's now inside so now we have the title and we have the actual note which comes from the database you can see who the next thing now we need to do is the button so let's start it things up and let's add the button here so this is gonna be the submit button when we want to update div with the class form and then group and then inside here we're gonna create a button and this button is gonna have the type of submit very important and then this is gonna have the class name or btn btn dash primary and then btn large and then we need to put something like update so we can update the note so let's start with updating the note festival let's go to the action here and all we need to do is put slash and then dashboard and then inside here we're gonna put item and then inside here we're gonna put the item id now we've passed so we're gonna put note id like so and then we're good to go essentially this form is gonna have the note id and when we post the form we can grab the id and we'll know which one to update because we're updating a form we want to use the put method in here so we can do this by doing question mark underscore method equals put like so but we do need to change something so if you go back to the app.js file and if you scroll up the top here somewhere around the top we can put the method of right so let's add around here let's put const and let's do method of right and then this is gonna be equals require and then we're gonna do method of right otherwise this will not let us to do put and patch in order to use the method of right it's actually fairly simple somewhere around here maybe another json we can do app.use and then we can do method of right like so and then we put the way we want to use it is gonna be underscore with method and just like this we should be able to use put to update the note now that we've done this we also want to do the logic for this so if you go back to the dashboard controller and let's go to the update here what I'm gonna do is put a comment and this is gonna be put and we're gonna update the specific note so this should be fairly simple to do we can wrap everything into a try catch and inside the try we can do request dot body user inside the try we can do await note dot find one and update like that and then we need to put the query so in this case we want to find by id so the first one is gonna be underscore id and then we can pass the id by doing wreck dot around id and let me do it like this because it might look a little bit better okay and the second thing that we need to do is we need to pass the new title and the new body so in this case we're gonna do title and then we're gonna do request so we're gonna get this from the form body and this is gonna be dot title so if you remember if you look at the form we added somewhere on the form a name title so that's how it works he actually grabs the data from this input and that's how he knows which one it is and then we need to do exactly the same for the body body and the body is gonna be request dot body dot body in this case two bodies and then the last thing that we're gonna do is we need to put the where method so we don't let everybody update on it so in this case we're gonna do where user is request dot user dot id like so and that's pretty much it the last thing that we need to do when we updated we need to do rest dot redirect and we need to redirect to the dashboard yeah that looks a little weird but it's fine and then the last thing I'm gonna do is console log the error okay safe by the things up and now hopefully if we go back if we refresh and if we change MongoDB tutorial to one two three and we change this body text to one two three and we click update okay we're getting cannot put dashboard item and the item number and this is simply because and this is gonna be because if we go to the route and then the dashboard route it's because I've actually put this as post now although post will work if we didn't do all the method but we do need to change this to put like so and that should fix the error hopefully so if I go back back like this and if I put one two three one two three update and as you can see MongoDB tutorial one two three if I click on it it's all updated I can remove the one two three like so update it and I can do the same for Morgan hello and then update and as you can see this update straight away and it brings me to the dashboard now let's have a look at deleting a note we've got the delete button here when we press here we get the actual drop down menu and when we press this delete button I want to create a new route which is gonna delete this specific note for this user so again let's start from the route here so what I'm gonna do is create a new one and this one is gonna be router delete and in this case we want to render item dash delete and then we pass the ID this is gonna be called something else let's give it a name of update notes so this is gonna be dashboard delete night and now if you go to the dashboard controller let's copy this make sure that this router is dot delete and now we can scroll down to the bottom and create a new one and I'm gonna copy something and just put delete delete note and then inside here we can start by exports dot dashboard delete and then we can do async and then we can do the request response and then the function and inside here we can do a try catch super quickly for the catch we're gonna do console log the error and then for the try we're gonna do something very similar so we're gonna do await note dot delete one and then inside here we put the parameters so for example ID and then we can do rec dot grams dot ID let's leave this on one line so you can see a little bit better and then we can do the where and we can put the specific user so where the user is request dot user dot ID and we're pretty much done the last thing that we're gonna do is res dot redirect and then we're gonna do dashboard like this tidy up a little bit save everything yep that's it so if we refresh this MongoDB tutorial note for example and press delete we're getting this nice animation and then if you press delete one more time nothing happens now this is because we actually need to wire this form so let's go back to the actual page which is in this case dashboard view note and where we have the model now in order to do a delete one it's a little bit weird but if we toggle the world wrap so the delete button we're gonna have to wrap in a form or inside here we're gonna do a form and then we're gonna do action and the action is gonna be dashboard and then item delete and then we're gonna bring the note ID and then we're gonna close EJS like so after this we're gonna do question mark and then again method and this is gonna be equals delete like so and then we're gonna do method posting here and let's give it a class name to make it a little bit better position relative and we need to wrap the button inside okay and we also need to change the button here from type to button to type submit otherwise it won't work okay save this and now if you go back to the browser and then we refresh this page we are looking at the MongoDB tutorial and if I click delete and then if I click delete one more time you will see that the MongoDB tutorial is now gone and nowhere to be found and now we don't have much pagination because we don't have enough notes okay now let's focus on adding a new note and because we've already done this page here we can actually copy most of it and hopefully speed up the process so first of all adding the new note the link will be under dashboard slash add this here so we're gonna have to create the router let's go back to our explorer find the routers here and then inside the dashboard we're gonna create one more router this one is gonna be add item and because I'm doing zoomed in so much this goes on all the line and that's absolutely fine and then for the add item I'm just gonna copy this one here and I'm gonna put this is gonna be router dot get first of all and then we're gonna go dashboard and then add like so and then we're gonna have the login here and then instead of dashboard we're gonna change this to dashboard add note and now we need to create this controller so in dashboard controllers somewhere at the bottom here I'm gonna paste a comment which is gonna be get add notes and inside here all we need to do is export dot dashboard whatever I call it dashboard add note and then this is gonna be an asynchronous function and then we're gonna have the request response and then we're gonna have a narrow function like so and we're gonna just render the ad page which is gonna be res dot render and then inside here we can render dashboard and then we're gonna do add like so words by the way with s at the end so dashboard slash add and then cover and then inside here we don't really need to pass anything except maybe changing the layout but what I'm gonna do is just say layout and then the layout I'm gonna set it to be dot dot slash views slash layout and then slash dashboard okay that should be absolutely fine and now we should potentially see the ad page but of course we need to create this ad page so so on the views we're gonna have dashboard and then we're gonna have another page and in fact we might get away with copying the view note page so let's copy the whole thing and we'll just modify a little bit create a new file and we're just gonna call it add dot j e j s like so and if we if we paste the whole thing from view note let's see whether we can modify it super quickly at the top we're gonna have exactly the same thing the container we're gonna have a row which is gonna display the breadcrumbs with title we can't pass this so we're gonna just say add note like so and then and instead of view note we're gonna change this to add note and we're gonna remove the delete button as we are only going to be adding notes here save this and now the form should be very similar hopefully so instead of dashboard item in here we're just gonna remove everything inside here and just put add so we just want to post the action on dashboard add which we will have to do a post route so in this case we have method to post and everything else the important stuff is that the input has the name and the ID the name of title here and the text area has the name of body so we can actually pass the data and submit it to the database so the last thing inside here is instead of having update we're just gonna do plus add note and we should save this so the model is well we don't need so we can just get rid of that code as well and now we should be good to go if I was to save this and if I was to click on the add new page here we'll see that we are getting a problem and this is because I left the EJS on the title and probably the text area so that's why we need the view world wrap and here it is so we don't actually need value insert here and we can just leave the place order as it is and the same for the text area we can just leave this as empty but instead we just have a place order that says take a note save this and now if we refresh one more time we have failed to look up views layout dashboard let me have a look can't really tell what it is so I'm gonna copy the layout from here and just paste it in here so layout what did they do wrong dash dash views layout of I missed the s okay so I'll just miss the s in here and if you save this now and if we get back and refresh we should be able to see the page obviously zoomed in a little and now if we click on add note then as you can see we're rendering the ad page we have the title in here and we can take a note as you can see cool now let's make the ad note button work and in order to do this we need to make another route so if we go to go to server route dashboard and this route is gonna be similar to the one that we just created so router but instead of get we're gonna change this to post like so and then we're gonna have dashboard ad is logged in dashboard controller dashboard instead of dashboard add notes unfortunately I call the ad note so I'm just gonna put submit okay that would do the job and now we need to create this so back into the dashboard controller here we can create another one maybe around here so we're gonna do exports dot dashboard add note submit and then I'm gonna paste a comma here this is post add notes and then this is gonna be again an asynchronous function so async request response this is another function and then we put the logic inside here so I'm gonna do try catch and then for the catch straight away I'm just gonna do also the log and we're gonna log the error all we need to do is await and then we do note and then create and then we can put the data that we want to create in this case we're gonna do rec dot body because when we submit the form this is gonna submit the title and the body of our form but also we do need to insert the ID of the user that is certain the node and so what we can do is request dot body dot user and now we can insert the request dot user and then the ID of the user just like this hopefully I just removed all the notes by the way and so hopefully if we go to the dashboard now and if we refresh here you'll see that we don't have any notes now I remove them one by one but now if I go create note and then if I put a title of hello world testing 123 and then we submit you will see that this is spinning and this is because I'm waiting here but I didn't do a redirect so we don't need to redirect or render page so rest dot redirect and then inside here we need to put dashboard like so so we do need to redirect otherwise it's gonna keep on spinning and now if I go back this might have inserted the data that refresh yeah this has inserted the data but just so we see it so if I refresh this we'll see the data here hello world but let's create a new one and then node.js tutorial this is a this is a node.js tutorial and then I'm gonna add a note okay as you can see the latest note that we just added comes first and then we get the other ones after so as you can see we don't have any more pagination in this because we haven't actually submitted more than 12 nodes and at the moment I believe that those fields are not required themselves but in the database in the model here of nodes we do require the user the title the body and the day created is created automatically and there are two ways of doing this so if you go to the ad form here the first and easiest way is to make the input so here it is let's say let's go to world wrap and for example on the text input we can say required and then on the text area we can do the same somewhere around here we can just say required and now if we save this the browser will be smart enough to actually not let us submit anything as you can see please fill this field and it's gonna be the same for the other one please fill this field also if you wish to make a little bit nicer you can use bootstrap you can look into bootstrap validation there will be some examples here with a form if you wish to add them and the other thing that you can do here on the back end so inside here maybe you can check if the body if the request body title and the body body maybe you can look into flash messages where if you submit it it's gonna pop up on the screen and tell the user but these are the things that you can do and for now I'm just gonna leave it as it is and then let's have a look at the last thing that we need to do so first of all let's go back super quickly so we have the node just tutorial and if I update it one two three and click update it's all working and if I wanted to delete the hello world I'm gonna click delete and then delete note the last thing that I'm gonna do is do a search and for this we're gonna need a few notes so for example let's create a couple of notes super quickly do that and I'm gonna hide a word in here so for example I'm gonna put Batman like that and we're gonna add it and let's see let's add one more I'm gonna copy some content from my blog super quickly paste in here and submit and in fact for this one here I'm gonna add Robin so just so we have different words that we can look into okay so a couple of notes in here and now let's have a look at how we can do the search for the search let's go back let's go back to the route and then the dashboard route and inside here is where we're gonna put the search so for the search let's copy one of the routes in here and paste there at the bottom maybe and this one is gonna be router.get and it's gonna be on the dashboard and we're just gonna put search so it's logged in and then for the last bit I'm gonna do search and we need one more because when we we can display the search and we can also submit a search and now this one is gonna be posting so we're gonna do post and then dashboard search is fine but instead of dashboard search maybe we can just do submit as well okay let's go to the dashboard let's go back to the partials and then we have the header dashboard here and early in this tutorial we added the search form so if we do world wrap you will see that we have a form the form has a post and then the action goes to dashboard search which is all get we have both of the both of the routes and now we just need to create them okay we minimize everything and just open this one and let's open the dashboard controller everything else can go away and I'm gonna copy a comment and this is gonna be the get and for this we're gonna do the exports dot dashboard search equals async and then inside here we're gonna do request response and then we're gonna do an arrow function and inside here we're gonna do a try catch super quickly and then inside here we're gonna do rest dot render and then inside here we're gonna render the we're gonna render the page dashboard and then search which we'll need to create in a second and then comma and then we'll put the options in here so we're gonna do search result which we're gonna grab from the actual form so I'm gonna show you this in a second okay we want this to be empty for now and then I'm gonna do layout and then this is gonna be dash dot dot views and then this is gonna be layout dashboard and then we should be good to go since we used this layout quite often in here maybe you can make a global variable that you just put in here and leaves at the top and that's absolutely fine so potentially now we can create the search page so if we go to for views dashboard we can create a search page in here new search dot djs and for the search page we can potentially copy some of the dashboard here but in fact I'm just gonna copy the container and make my own one so what I'm gonna do I'm not gonna do anything fancy in here let's just add the container fluid container fluid custom and then close it and then for the search we can do another row so row and then this row is in fact I'm gonna have a few more classes so row row columns two and then row calls large is gonna be five and then gets a two gets a large three in fact I don't think this is gonna look very nice but we'll see and inside here we're gonna do some ejs so if we get the search results which I'm passing from here and first of all this is gonna be empty so if we get search results equals empty we open curly brackets close ejs and then inside here we can do we need to close ejs first of all and inside here we're gonna do open ejs search results and then dot for page and then inside here this is gonna be a function the function is gonna have two parameters which is gonna be the notes and the index and then we can close ejs in here and then inside here we can actually display the notes so we can do h4 let's say and we can do note the title and you can do the body as well if you wish so we could potentially just link these to the actual note let me just have a look so this is gonna be dashboard item okay so if we do a link href and then we can do dashboard item and we put the notes id I think this should be underscore id and now we can close the link and let's see what happens in a second we need to close the ejs in here and then we're gonna have an else statement so where we have if we're gonna have an else and this is basically going to say if we don't have any results I'm gonna put some for like three no items found and then we're gonna close the ejs in here the else statement sorry and then we should be good to go and we do need to create the post one as well so let's grab this and then we can add it around here so for posting notes search for a note this is gonna be exports dashboard search submit async request res and then inside here we're gonna put the logic first of all if I save this so it's all working okay so this is gonna be a long one this is gonna handle the submit for the search and we're gonna wrap everything into a quick right catching here and then for the catch let's just do also log the error and then for the try this is gonna be a little bit more complicated so when we submit or form let's see where it is first of all search nope it's gonna be inside partials and the header here so and one thing that I noticed is that on the header here we do need to change the link to dashboard so if you click on the logo it just goes to dashboard if that makes sense instead of going to the actual website here we go that works and now for the search what I wanted to show you is that we have this name of search term so this is very important because this is how we're gonna pass the data so we're submitting under dashboard search but this is the term that we're grabbing if we go back to the dashboard controller dashboard search input we're gonna we're gonna have to grab this so let's say let search term and to grab it we can do request dot body and then we can do search term well search term is essentially the input name and that's how we get it and now if we wanted to remove special characters from the search term we can do const and then we can do search now no special character and then we're gonna do search term like so and then inside here we're gonna do replace and I'm gonna copy and paste a rejects it's gonna help us replace bad characters copy this quickly and then if you wish to you can and now hopefully this will further some bad characters press and we can do the query and I found the next example on static overflow on how to make sensitive queries and this one I'm gonna explain now so we're gonna do const search results so we want to get the search results and we're gonna query the database await and this is gonna be node dot find and then we want to put what we want to find so this is the tricky bit here we're gonna do dollar sign and then all and then we're gonna do because I want to search in both the title and the body we're gonna start with the title and then inside here we're gonna have rejects and then new reg exp and inside here we're gonna put the search characters this is gonna be the search result without the characters so we put that inside here and we put I like that and that should be after those two curly brackets we're gonna put a comma and I'm actually gonna copy this and change this to the body and everything else stays the same I can remove the comma here and the last thing that I'm gonna do here is we need to only be able to search for results for the user that's logged in so we're gonna do web and inside here I'm gonna do user request dot user ID and since this is this is a post so I'm just gonna leave it as it is and close it we're gonna do rest render and inside here we're gonna put the dashboard search cover and then equally brackets we're gonna just do search results and then I'm also gonna change the layout let me copy the layout from here I always make a mistake here is layout so I'm gonna copy this and then we're gonna put layout and then views layout dashboard and then we should be good to go let's start it up okay and now if you go back to the website and if we search for batman and as you can see we get one result which is the node limiting network traffic and if I click on it we will see that we have the word batman in here and also if I put the batman with it's already a small letter so let's put it with big letter you'll see that this is case sensitive and it's working and to prove you that it's working let's say so we have today today and let's do that here we go we get two results obviously they don't look very good I should have styled them a little bit better but you can do the styling inside the dashboard and the search results basically maybe instead of having it as two columns just remove it like so and just have rows or something I don't know let's have a look yeah maybe like do a little bit of spacing between them and it should be good to go of course inside here you can do the body as well but the body can be quite long as you know so maybe title is the right way to do it so we only search inside the body here of the nodes but what about the title so the title should work as well I'm gonna do HTTP which is here and I'm gonna search for it and as you can see we get one result which is good and that's pretty much everything I can think of so if I log out we are back on the homepage and then if I log in it logs us in straight away which is great if I go to the database you should be able to see all of the data in here if I log in with another user it's gonna create another user ID and so on and if I go to sessions and remove the session from here so delete it now if I was to refresh here you'll see that we're getting access denied which is good and so on so that's pretty much everything from this tutorial there are other things that you can do such as encrypting the nodes and make more checks but I think that if we encrypted the nodes the search might get a little bit more complex so I was testing the website because sometimes when you add nodes too quickly the day stamp is exactly the same and some nodes can appear behind the other nodes which is not an issue normally you add a node and you appear just fine so last and we can do 123 and then this should appear as the last node which is absolutely fine but one thing that I noticed and I totally forgot about is that when we update a node we potentially it depends how you want to do it of course but potentially if we update this node here potentially you might want to have this node to be the first node as it was last updated of course this is personal preference but if you want to do that it's actually not so bad all you need to do is if you go to the server and then if you go to the models and if we click on the nodes inside here where we have created that we can do update that instead of created we do update it we can leave as default this to be date and the default to be the date now so when we create a node they both get the same default date in here and now this means that every time we update a node for example this updated one we actually want to update the updated add value here so in order to do this we're gonna have to find the controller for the update so dashboard controller let's see here we go put update specific node so inside here we're updating the title we're updating the body and we just need to update the updated add and then we just need to put updated add and for the updated add we just put the date now and that should fix it so now the other thing that we need to do is when we query the nodes inside here we also want to make sure that the last updated node is at the front and in order to do this you can go to the dashboard one so this was the get dashboard here essentially where we have the sort here we can do instead of created that we can do updated that and then we can do the minus one so we have the latest one so if we save this and if we update the updated one more time oh here we go i think that just i think i was messing around with it earlier so that's why it probably worked but let me update for example this one here so what i'm gonna do is new newly updated this was just updated and now if i update it you will see that this now comes to the front here as the latest updated node and the other thing that i noticed is that if you wanted to delete a node so for example this one here and if i click on the delete button here we get the model and i noticed that we can't close it and for some reason even in the bush draft documentation we just copied and pasted it but if i go back and find this so this is the ad page we're gonna go to views dashboard view node one and then if we go down to the model here so we need to just put data dismiss on the dismiss button to be bs bush draft and then we need to do it for the other close button here which is close button here let me toggle wrap so you can see so we have the close button is we just need to say data dash bs and then dismiss now if i refresh and if i click delete if i click outside the node that was working anyway but if i click on the x here that would work and if i click on the close button that would also work and of course if i delete the node the updated node is now gone and i'm sure that there will be more flows of the design but it's one of them things that you can work on forever that's gonna be pretty much it i hope that you learned something useful consider subscribing to the channel and hopefully i will see you in the next one