Build a Web Application with Node, Express, and MongoDB | Sara Al-Arab | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Build a Web Application with Node, Express, and MongoDB

teacher avatar Sara Al-Arab, Computer Engineer

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

16 Lessons (4h 49m)
    • 1. Introduction

    • 2. Install CMDER & Visual Studio Code

    • 3. Install Node

    • 4. NPM

    • 5. Express

    • 6. Nodemon

    • 7. EJS

    • 8. Install Mongo

    • 9. CRUD

    • 10. Mongoose

    • 11. First Application

    • 12. BMI Caclulator

    • 13. TaskList Part 1

    • 14. TaskList Part 2

    • 15. Deploying Application

    • 16. Project

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

Hello and welcome to this class where you'll be learning how to build Web Applications using three main tools: Node JS, Experss, and Mongo. Throughout this class we will walk through each of these three tools, introduce it, get familiar with it, and learn how to integrate it with other tools in order to build our Web Application. You'll learn how to deal with one of mostly used database, MongoDB, and one of the most famous backenn servers, Node JS, with the help of a package called Express that'll make the experience smoother. I recommend thst you watch first my previous class regarding Javascript as NODE JS is written in Javascript. We will be building multiple Web Applications, and through the project, you'll be able to test you're knowledge and build your own Application which reflects how much you well understood the class. Hope you enjoy this class!

Meet Your Teacher

Teacher Profile Image

Sara Al-Arab

Computer Engineer


Hello, I'm Sara. I'm a computer engineering student at LAU. I'm currently working on web develpment and programming and seek to share my information with as many students as possible!

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Introduction: Hello everyone and welcome to a new course. With steering back-end software. We're just going to be our NodeJS. We'll be exploring how to explore the engineers and the backend server. And we'll be using MongoDB database that we'll be using throughout the back end in which he lived. A package which is called Express, which is going to make things a lot more easier for us while working with NodeJS. So in this course, you don't need to have your knowledge of databases. We'll be diving through a belonging to be monitoring for my just need to know the recent subjects. And you could just have a look on my previous call, a course called JavaScript, if you want to just have a basic knowledge of the language. So let's dive in to this course. 2. Install CMDER & Visual Studio Code: And also installing several tools in order to run our applications. And these tools are called to be commander and visuals do coke and I'll walk you through each of these. So if you're using Mac, you don't need to install commander leverage. You're using Windows, you need to install it. So go ahead and start with commander. So install commander. We'll click on the first link. And so commander is a software package which is created for the absence of a console emulator on window. So it's going to act like as an emulator. Could just type in commands like starch is going to be basically a shell for us. Things that we could not typing on the Windows commander. So that's the commander command prompt for Windows. If we let's say ls, ls is not recognize. However, when we go ahead and download this Commander, ls is going to be recognized as it's going to be as an emulator for the shell. So you could download the whole package will get or the meaning, doesn't matter. I already have the evidence thoughts and let's just go ahead and look at it. Here it is. So let's say I diagonal as you can see, that the discs of the things that I have inside of that directory. So spree, if spoke with using many commands, this Ls, it's just going to list the files inside of that directory using it in order to run our Node applications later on. So that's for Commander. We also need to install Visual Studio. So go ahead and type and tall and Visual Studio Code. And go ahead and enter that first link. If you're using Windows equivalent that if you're using Linux or any type of Linux operating system could use that. Or if you're using magically do that. It's pretty simple. You just click on that. It started. So we don't need to work through it. And if you did please any problem, just go ahead and visit my previous courses. We have some videos that show you how to install these applications over. Hopefully you won't lose any problems. So let's now dive into note. 3. Install Node: So in order to use now, let's first install it. So let's go ahead and install Node JS. So firstly, you can see that this is not shares that. Click on the Windows installer wrap and solar, so on support. And this is recommended for most users who are committed to just click on. One of these. Also have the Linux on a Linux operating system. So let's say I click on that. So I've already have Node installed on my PC, but I'm just going to go through the process just to show you what you have to do. So when it's done downloading, you click on that. So let's just play it. Now as outtake. Here, they said it was a Rolling Stone and JS next, of course she accept the license. Next. You don't need to install. Chocolate, will not be using it. So the storm. So here we're validate installments, updating. It could take a little while depending on how fast Wi-Fi characters. So here we have known successfully installed. So you could say that we have this command that is telling us that this group is going to install Python and visual system called the tools. However, we're not needing that. So that is going to download many unnecessary packages that will be not using. So what we're really doing is we'll be manually downloading everything that we need. So I'm not going to press any key to continue. I don't want to install all these packages. So whenever you get this, you just click on it, just exit the terminal. And you're done in order to make sure that we've installed. Now, what do we do? We go to Command Line and regard. Click on node. And you can see that we have virgin node version 14.1744, which means that we have successfully installed on our computer. 4. NPM: Now, whenever we're dealing with NodeJS, we need to keep in mind one important topic which is npm. Npm is a package manager programming language maintained, but npm, npm is the default package manager for the JavaScript Runtime Environment NodeJS. It consists of a command-line client, also called MBM, and an online database, public and pitfall private packages called the NPM registry. So we'll be seeing how we'll be using many important packages from MPM in order to run our websites or applications. And there are many important packages that are essential, like Express, which we'll be exploring in the next videos. But first, let's just get an overview of what packages could we use and how to just use them in general. So let's go ahead to Visual Studio Code. And let's create a new JavaScript file is called MPM dot js. And we'll see how to use npm packages. Let's go ahead and visit the npm website and just look for practices that we could use. So let's go ahead and type in npm. Okay? So this is the official website for NPM. And as you can see, we could search for packages. So here is where you can sign up. And as I said, it's an open source. You could just go ahead and use many free packages and use them for your projects. So let's go ahead and maybe search for a package that would give us random fruit names. So maybe just say and fruits, and we'll just see if something comes up. So here is random fruits name, which is a package, a package that's going to generate the names of fragile fruits are random from collection, get a random set and distinct values. So this has to do with maps and sedentary. So just go ahead and click on the first one. You could always go ahead and explore a package, how to install it, how to use it in different languages. So how to use it in Node.JS to use it and we act, how we act, how to install it in general. Let's go ahead and try to install it. So the first thing we need to do is install that package in order to be able to use it. So what we'll be doing is we'll be opening commander. Our commander, as I said, we're using commander a lot. I'm using throughout this course. So first we need to go to our folder at the project that we're currently in. So here is my folder. I'll just go to that path, copy it, and then just go ahead and type in cd and that path. So now as you can see, our path change to be the folder that we are currently working in. Now, what we need to do is install that package by just saying MPM install random. So we will be seeing your will just be Installing through MPM. And that's because we're using conundrum. So now my answer. So random fruit names instance store. So now we go ahead and go to NodeJS. Since we're working, our NodeJS will be just copying that. And so how would you know that you're working on NodeJS? Well, we act is not a JavaScript language, as you can see. However, NodeJS is a JavaScript language. And since our file is dot js, so it is a language that we can use JavaScript language. Let's just take a look at what this code is going to do. So the first line has caused their trend and fruit names because you require a random name. So as you can see, this is the name of the package. In order to use the package, we need to require it. So keep that in mind. Whenever you need to use any package you need to require it. You can give it any name that you want. So here they gave it the name GetRandom fruit name. You can give it any other name, and it's a constant. So if you familiar with any programming language, we always are. If we give the variable a. So maybe if you're familiar with global, we have, we have floating numbers, we have integers and so on, so forth. So in JavaScript we have calls, we have var and general. So here we're just giving a constant, a name which is getrandom fruit names. And we're going to see that that is going to be the name of the package that we are requiring. Now, how would we use that name? So console.log is going just to, it's like printing the output. Soldiers moved to print that function. Whenever we have that name just followed by an empty parenthesis. So that is a function. So what we're doing here is that we're calling that function, which is going to give us sorry, and random frightening. And we're going to print it through console.log. Now, here, as you can see, whenever you go and install a package, I want to know more about it. The good explained to you something's using comments. So here they're telling us that English is the default language. So if we don't specify what language do we want, we're going to get a random name using English. In the English language. We also have the function with the parameter. So here you could see what parameters we could use. And these are all the possible parameters that we can include. So if we include the parameter which is as drink of M, E M, This means I need food name in English. So here, Apple is just an example. We don't need to get apple. We could get, get any other name and the other fruiting. And here I think that is a Spanish branch. So there are many languages, languages that we could specify to get that rounded pruning. So now how could we just that this is working? So first, let's save our file them. What we'll be doing is going to be doing as we the upcoming command line command or sorry, Go to that path. And let's first check npm installed R package. So in order to do that, we'll run our scripts note and pn dot js. Okay, so here is the first item that we encountered. Whenever you see an arrow drawn, Tory, just read through the code and figure it out. So let's see what they're doing. Giving us here though is cannot find module random fruits name. So we did actually type in npm installed packages. Why wasn't it installed? So here, you need to pay attention. You can't name a file by special name like MPM because that was going to confuse our commander. So what we're really doing is just change the name of our file to maybe MPM one. So now let's go ahead and listless inside of that file we had IBM wonder JS. So now go ahead and say npm install. And random name is the name of our brackets, then it should download it correctly. So npm install, so you can see that now it's installing. Let's go ahead now and try it again. So node. So here it's giving us MPM name, fruit not found to learn and check if we wrote it correctly, so it's fruits. And okay, so let's go ahead and copy that and just re-install it. So npm install. So you can see that you need to be careful when writing the name of the package in order to find it. Correctness. Here it's random fruits name and not randomly fruit. Now if you click on that, it should installed it correctly. So you could see that one package is added and that means that you've installed it correctly. Now, that is actually that we make sure that you've installed a package. So that is looking not good CTD ever. So you could figure out that your package was not installed correctly. So now let's go ahead say a PM, one dot. And you can see that we were given a name of a fruit and all these languages. So I'm actually not familiar with that. Fruitless. Just go ahead and try that again. So MPM B1, 30 years. And you can see that now we have to grow. And as you can see, that whenever we run that file, every time we'll give, getting another, another new fruit name. Here again, mandarin, orange. And he got me know, wartime banana. See that banana has different needs and different languages. Weren't news that I cannot spell. So yeah, it's actually one cool package to have this random routing. Of course, there are much more important factors that we'll be using in order to run our website. And we'll be seeing one of the most important factors express in the next video. 5. Express: Now we're going to dive in deep into an NPM package with is, which is the Express package. So what is express? It's a web framework that lets you structure a web application to handle multiple different HTTP requests. A specific URL expresses a minimal open source and flexible NodeJS web framework designed to make developing websites, web apps, and APIs much easier. So why would we use Express? While express helps us respond to requests with route support so that you may write responses to specific URLs. So it supports multiple templating engines. You simplify generating HTML. So the nice thing about it is that it's very simple and it's an open source. So if we go ahead and open MPM, the NBA website, and type in Express. So let's fix that for us. And that's the package that we need. So let's go ahead and see that. So as I said, whenever you up into a package is going to give you the installation, the features, how to use it, so on support. So here we start by installing. Dependencies are all the factors that depend on the Package Express. So let's say you want to install the package express. If you want to install it, this package is actually dependent on other packages. So when you install Express, it's going to automatically install all the other packages that depend on Express. So, and the first thing we need to do is just say npm install express force whenever we need to use any package, the first thing we need to do is install it. And here is how we will be using it. So in order to answer, understand what's happening over here, I'm going to write for you and note what application without using Express. And then we'll be using Express and see the difference how expresses going to be much easier than we thought. So let's go ahead and open a new file in Visual Studio Code. And maybe let's call this file without express. So with smoker, so without express that JS. So now we're doing a node application without express. So, so in order to have a Node.js application without the expressed, we need a package, which is the HTTP package. And let's go ahead and install npm install. And then HTTP. Let's click on Enter. So you can see that now we've installed HTTP. So the first thing we need to do is go ahead and give greater constant, let's call it B. And then equals to require, need to acquire a package which is called HTTP. So that's the first step in order to start writing a NodeJS, a pure NodeJS app, what application? So now that we've required this internship HTTP package, we need to use it. So the reason we actually require this, required this package, is that we need to create a server. So go ahead and create a new constant. Let's call it server. And we'll be using this package, which is the HTTP, in order to get an, a, sorry, a method, or let's say a function that's going to create for server, and that function is going to be quicksilver. So elegant. See everything that is in purple is a function. So these are functions. So we need the crate server as a function server. And now that function is doing so. Every HTTP server had a request and a response. So that function is going to take an ass parameters that request and the response. And it's going to give us, and we'll be writing the description of that function. So that's a way to write functions and JavaScript with the arrow. If you're not familiar with it. This is just like saying, Maybe function. So slicing function, request, then response, and then just like that. So instead of writing each time function, we could just try the parameters of that function and then just use that arrow and order to begin writing that function. So whenever we create a server, we have a request and a response. So now what should we actually write inside of that function? We need to give a response. So we need to respond and see something on the screen on our web application. So we'll start by saying rest dot, and then we'll be setting a header. So we need to set the header for our page. And that header is going to specify several things. And one of them is going to be the content type. So here, if you're familiar with HTML, you understand that. And even if you're not, don't worry, just go along with that because that's not our priority. I'm just showing you what would we have written and instead of, um, without expressed objects, however, throughout the course we'll be using expressed. So that is just going to be a small explanation in order to begin with Express. So we need to set the header inside of the header. So if you're familiar with HTML, we have a header and a body. And inside of the header, we specify all the boring things like the links to the CSS files, the title of our page, so on, so forth. And here we just want to specify the Content-Type. And we wanted to be Turks, the HTML. So you want to write an HTML? Let me go ahead and rest dot, right? So we need to write that and, and that webpage. And so since specified that near via writing in HTML. So everything we write is going to be in HTML. Here. Start as saying HTML, and then closing that much still. We could specify the head of your page and the body. Body. And of course, every opening tag means a cofactor. So here maybe you say hello to the node server and see that. And maybe we could give it a title. Let's say node server. Of course we need to specify what's that? That is the title. Okay, So inside of our head, we wrote a title which is node server. And inside of our body, we typed in hello to the Node server. And now we need to go ahead and end that or close it. And of course, every function needs to have this brand decides whether it requires parameters or not. So now we've set the header. We've written some HTML code inside of our HTTP server, and then we've ended that response. Now let's go ahead and save that. Now, one last thing we need to do is to set up our servers. So where is this request and response go to? To which port? So we need to listen to a certain port and an order to do that, we need to set up a server and that that's the route that we've created, is going to be listening on a certain port. So let's say we be listening at port 3000 and maybe let's add a function whenever we listen on that port. So whenever we listen on that port, so whenever we are opening that Pij, we let's say 12 console.log just to make sure that our patients working. Perfect. So let's see. Yes, server on port 3. Now. Let's go ahead and save that. Now. Let's check if our server works. So Let's go ahead and type in notes or 100 to run any application we need to start with node. So node, then the filename. So without express that. So as you can see, we have here the service life on port 3000. So we can see that our application is working fine. And now all we need to do is open that on our webpage. So we go to a new page. Now since we said that we're on port 80 thousand and we're working on our host to a local host or not. Opening this page on a different computer. So we're working, we're working on everything on the same PC. So first we start by saying localhost, then proceeded by that port number, which is 2 thousand. And our case that, oh poor 3000, we have hello to them observers. So you can see that our webpages will be fine and a Node application is working fine as well. So that's how we were able to create a Node JS application with just using HTTP, we did not use the Express package. However, we'll be seeing the difference when we're using the Express package. So that first install Express. So let's go ahead and terminate this server. Just click on control here. Now, let's go ahead and say npm install will be explored for installing express. So we'll be waiting until it's sold. So you can see that we've added 1500 of packages. And as I said, since Express has dependencies, so it depends on other packages. So these packages are here. So FES and the other dependencies. So now that we've installed Express, Let's go ahead first and create a file was cool, it spreads. So expressed that there's obviously the first thing we do is required a package that express packages. So cons express equals to require, require that Package. Express would express. The thing that we're doing is that we'll be creating a constant called application. So this is going to be like our application. It's going to be expressed function. So using that express function, we'll be creating an application. Using that application will be able to do several things. So the first thing, as we previously mentioned, that expresses going to allow us to do is to have routes. So maybe I'll specify that on a given route, I need to have an ERP or a different crowd. I need to have a different HTML page. So the thing that we'll be doing is you'll be getting, so if your communion with God, post push, push, push terms, these are the terms that we'll be using in order to have the HTTP methods. So get is going to give us page, unlike post, which is going to allow us to send the server some information from that page. So I want to get when I'm on the default route, so I don't have anything. So it's like we're on localhost 3000 slash slash main page or slash, any other thing. So whenever I'm on that page, I need to help function. And that function is going to have a request and response and send a response. So response dot. And then it's seeing from the source. For that, we just set up one page of our application. Now of course, every server needs to set up. So we'd be listening on a certain port. So app.use, listen. Maybe let's see. So here it's going to also have a console.log. So console log is like listening on port 3000 and one, and that's it. So let's go ahead and see this foreign and then we'll discuss what is different from that without express. So let's go ahead and open our terminal or commander. For us, dot js servers listening port the 1001. So you see that it's working fine. And now of your hand and click on local host. And hello to express server. So it's working fine. Now, we go back and let's just go ahead and see some comparison. So. First of all, let's just do that. Okay? So without express, what happened is that we create an HTTP and then created a server. And then we set the header for the response page and drew it just some code and then ended that response. And of course, the server is listening on that port. However, I express it required this express package Credit nap using that package. And through that person, Abby were able to have a route and we were able to send a response to that specific graph. And also they were able to listen. Sorts important. So why use Express? Well, to begin with, NodeJS is an open-source, cross-platform runtime environment for executing JavaScript code outside of a browser. You need to remember that NodeJS is not a framework and it's not a programming language. Most people are confused and understands framework or programming. However, we often use NodeJS for building backend servers. I like API, like web app or mobile apps. So it's used in production of by large companies like paper over that flips Walmart and so on. However, express a small framework that sits on top of the OJS web server whatsoever, which functionality? To simplify its API and add up, pull UP shoes. It makes, it makes it easier to organize your application's functionality with middle ware and routing. It's helpful. It's helpful to at least, you know, CSS3 objects have, it facilitates the rendering of dynamic executing object. So as you can see, express Moodle, we were able to route. However, in Node.JS, there is no routing. So here let's say I want to add another route, the hips just say hello. And then here. Well, just to differentiate between that. And now, you can see if fresh. Of course first we need to rerun our applications. So so express that. And now ahead. So now you can see that here is our main page. Now go to slash hello. Now we're going after, and you can see that now we want a different crowd and held expressively route. So as you can see, using Express, we'll be able to have different graphs and you see different projects that we'll be able to have. Other methods like the post method, where we'll be able to send some information from that application that what obligation to our server. Also printing is that with Express, and they use it chooses word. So it's going to use within word for the arrangement of functions is systematically on the server side, over and NodeJS, nanofarads. So as I said throughout this course, of course we'll be using Express dot js. And don't worry if you're still not getting the hang of it will be writing more Express applications than you could imagine. So you'll be familiar with the code as soon as possible. 6. Nodemon: Before we go and dive into the Database MongoDB, I'd like just to introduce you to this package is going to be very useful to us. It's the node one package. So what dispatches 0 to 2 is like whenever we do a change to our application. So as you've seen when we've had ours and we needed to fix them, we just fix them. Number code. We had to just rerun the code over again. So we just have to go ahead to the commander and type N nodes, mon. So we're just sorry though, and say note dot First up at Atkins. Yes. Every time we change something, we have to rewrite this. So an easy way to actually naturally on our application, each die is using this node one application, sorry, package. So let's go ahead to NPM and just seven note man to see what that is. So if you go to nochmal, you see that node one is a tool that helps develop NodeJS based applications where automatically restarting the node application, what file changes in the directory are detected. So we don't need to each time we run our app. So we just need to install it. And in the command line instead of writing note and then our app name, we just go ahead and type in node one. So go ahead and try that. So if you go ahead and say MPL, state and PM and store load model, it's going to go ahead and install it. So it might take some time. Then than now set of saying no, just say no. And then first dot js. Okay, let's go ahead and see what's wrong. So MOND decorated from. So maybe this is too ahead and try doing that. And Pn is true. So maybe we just need to add those and it would work. So now if we go ahead and note man percentage. Yes. Yep, that's working. Okay. So now you had to local host, which is on 1000. Okay? So let's say I want to change that color to be another color. So for that we go to footer and maybe I don't want to be that color. Let's say I want to be that one. Now, I've saved it. If I go back and refresh my page, you just see that the color change without me having going to Commander and rerunning. So far, maybe using from now on node 1 in order to just detect the changes that we do in our web application. 7. EJS: Since returned to express, we need to mention EJS, also known as embedded JavaScript templating. So what is EJS? Ejs is a simple templating language that lets you generate HTML mockup with plain JavaScript. Know will just be registers about how to organize. They know reinvention of iteration and a corporal is just plain JavaScript. So let's go ahead and see an example in order to further understand the functions of this embedded JavaScript competing. And of course, this is an MBA that we'll be needing to install. So that's called a first application may be cursed up. Don't say yes. So first thing we need to do is of course, go ahead and require Express. So fire. And then express. And then we go ahead and create the app, which is a function of press. Sorry. So and now you go ahead and get, let's say the first round after that, say attempt before trout, request response, then the arrow function. And of course, let's not forget to listen on which port that's the most important thing. Without you won't be able to get our webserver to be liable the ports. Let's go ahead and make it listen on port 1000. And let's just add a console.log to just make sure everything's working fine. So server is listening on port 3 thousand. Okay, So this is our first row. Let's say we want to, let's say, let's say more to record. Sorry, respond with Hello Kate Chris application. So response to, right. Let's have it. Each one having so each run hello application. And maybe we'd like to have another route that as that see the login routes and maybe the couples routes. Let's say we have three routes. And as I said, you could have as many routes like. So. Let's go ahead. Here is composts. So first things. First, let's say I wanted to have a really well organized with all these features, maybe a navigation bar, paragraphs, lists, so on support to be an, actually really hard to just write it up these two parenthesis. So that's why we could use another function that's called to enter. So you'll be rendering HTML page that could be creating over here. So do that. First thing we need to do is create an HTML page. Let's call it up. That sterile. What we'll be doing is that we will be going and just removing that, right and just rendering. So first, let's just put who you spoke to be our home to the Shema or otherwise known as EJS, as you'll see in a moment, why we'll be calling it home.html and up home.html. You'll just see that how similar that EJS to darker Shamil. However, we'll be able to add some JavaScript inside of them. And we'll see why we need that actually does go ahead and create that. You'll also see that this is an HTML page. Just like HTML. You can see that it's going to be much, much easier to write over here and set up just going over and writing side of API. So now will be just rendering that EJS page. So here you'll see that's a body. Let's have each one heading and say hello to your first location. And maybe let's have paragraph and just add some Laura. Yeah. Let's go ahead and see. That actually works. So the render that, Let's try that out. However, we forgot just one more thing, which is that we need to require our EJS package mortgage using it. And so for that, we first need to, as always, uninstall it. So npm install EJS is going to be installed. So we're just installed it. And now what we need to do is we need to require EJS, so wire EJS. And one last thing we need to pay attention to is that for EJS, our patients to work, they need to be found within the views folder. So let's go ahead and just try and run this. And you just see what comes up. And I'm trying to fix that from group just to show you why it's important to have diffuse folder. So open commander, note, burst, the js. Let's go ahead and go to local host. We can say that and we get an error. That is that no default engine was this part and no extension was provide that because we did not add those files inside of a few files. Just go do the extension and the engine, which is going to be the EGS. So we need to specify two things over here. First, we are going to be saying After sets will be sitting something and that something is going to leave the view answer that you engine's going to be of type EJS. Thus the first thing we did not. Second thing is that we need to create a folder. We'll be calling it use. And inside of that folder, we'll be adding our EJS files. So everything There's EJS is going to be inside of that views folder here. And use. Now. Let's save that. Let's try again. So here, as you can see, any error that you see on the websites will also appear over here. So now, first up. Yes, he is. Now you can see that it's working fine. Hello to you first allocation. And this is some text. If you don't know, it is just the apps that is written order to fill your page when you're still not under just to having assembled base, for example. So the first thing we need to keep in mind when working with AKS is that we need to have a Views folder because automatically note is going to understand that if we have a JS for you to look inside of a folder called views. And we set the view engine to be VGS. So we're telling, wrote that Hey, and moving VGS, so make sure that the view engine is an EEG. Guess. You could say that we just rendered that the JS folder, which is hope. So now we don't need to just go over and right inside of the text, we just have to render and we could have as many EJS files as we want. So go ahead and create over here, lock in Dart ETS and maybe couples that pulls the details, so on so forth. Okay. So here instead of saying right, is saying render, render, the name of file. So log n, this, and over here, it's going to be compose is for you. So another good thing with VGS is that we could add JavaScript inside of those. And we'll see how to do that. Why would we need to do that in a moment? So first let's go ahead and try to make this little paint freely. Move them. Login for now, let's put our contact me. Instead of that. Let's also have an about page. So copy that. And let's have an About page. Let's change that to about. Also remove that and rename it to me. And we need to have a contact contact that NGS. And so we have a contact that each year's composed and about. And let's also have the header and footer about page. However, that's just put these two to be common for all of these. And we'll see what I mean by that in a moment. However, let's just put partials over here. And then selling that partials will be having maybe let's say the most common parts of our page. Sorry. To create a folder which is called partials and sort of Bukhara. Partials. And inside of that will be adding the two files, header and footer. So I don't judge me EJS and footer dot EJS here because the header and footer dot js. So on your Visual Studio code, you might not have that. So I don't know why it's coming falling off sometimes for me. So don't worry if you're just screening for each, create it immediately. So here is our views folder. Inside of our views folder, we have a homepage, a contact page of portraits and about page, and a footer and header, which will be having common for all of these patients. And this is our first app. Here's our contact crowd out about route, our default route, which is the hole, which is over here. And we have the compose route as well. So, so let's go ahead and start with the header. So for our header, so we need to have inside of our body a header tag. So as we'll have to add a header tag. So here is, we'll be adding our head. Let's create a navbar. So here we'll be having our own navbar. So I'm just incrementing this. Let's add a math class. And so in order to have a really good looking page, maybe reproduce and Bootstrap. So for that, let's say this is my title. Let's go ahead to bootstrap to copy the Syrian. So if you're not familiar with Bootstrap, bootstrap is a popular HTML open source website where we could use many HTML and CSS attributes by just copying the link. So we just need to have SSS format. So we'll be copying that link and adding it to our health. So here, this is our link. And let's go ahead and add our layer. So let's actually, we could just go ahead and copy one of Bootstrap's nav bars. So if you go to proponents, I think so, yeah, you can see that we have and our four over here. And some of the nav bars are already created for us. So maybe we could just copy and have a good of modifications on it. Let's go ahead and copy that. And we'll just add it here. So that is our, therefore, let's call our network ideally tuned to journal. Maybe, so maybe this is going to be like a two row website. And we have the toddler over here. And we have the home button. Let's say here is the About Us page and the Contact page over here. So contact page, the couples page. Let me just get so let's just choose that just to have the list items like that. Yeah, I guess that would be better. And you can choose your everyone, but I'll be choosing Yep. And just need them as list items. That's all. So contact us about contact and about us. So we could just say context for here. The last one, let's have it be ofs. Okay? And now what I'll be doing is I'll be adding an ID for each list item. So the idea of that is going to be home. The idea of that is going to be id is like a unique way to refer to a specific attribute in HTML. So that is going to need either stay in contact. And then we have here the about. So id equals. And lastly, decompose. Okay? So now we have our nav bar over here. So as I said, my total over here, well, that's for our header footer during each. So let's go ahead over here. So let's just add some Bootstrap attributes. So let's have it to be fixed, pattern. Let's give it a style. You have a background color, maybe aircraft color, Apple Loops, goods. Inside of it. Let's have a Dart Container. And you don't actually need to stress about these things allowed you to just go ahead and copy whatever you want from Bootstrap, since our course is actually mainly about NodeJS. But just to have a really good Engage and just writing some HTML code over here. So don't worry about the details when you're running HTML content. So maybe I wanted to be a light. Let's give it a over the y-axis would be maybe have the text at the center of our bottom. Okay, Let's have certain order to have the copyright theory we could this is what you can use to have this separate C. I can see the movement. So copy. Right. Sorry. Let's see. Okay. So now that we've added the footer and the header, Let's see what we could do next. Now let's go ahead and open our page. So now the main pitch them no script. And let's go ahead and add some extra information. So let's say I want to have some content for each page. Maybe I want content for the homepage. So contact. And let's go ahead and add. That won't work over here. Let's just add some Lorem, maybe about 40 words, and just copy that and take it over here. And let's go ahead and also have some content for the about page. So about contracts. And you'll see in a moment, why are we writing those content over here and not, for example, on the about page. So why should we, why are we including them in that page and not just and the about page. So lorem teeny-tiny. Let's go ahead and add one for the contacts. So Hunter content about. So yeah. Right. And now we've added those contents that we'll be using. Let's just put them at the top. So medial over here, to make a page with more organized, you know, that those content using EJS, we will see how we could include them and those pages. So now that we've added those contexts, we go ahead and transfer them. Let's say I want to transfer the content to the homepage, which is here. So how would I do that? Well, while I'm rendering my page, I'm going to pass by some variables. So I'm going to go ahead and call a variable and stay home, content one. And that new variable is going to take the variable. Information helped by that Bible, which is Hong Kong as well. Copy that over here. And let's go ahead and do the same for the about and the context. So we'll go ahead and transfer and when we rendering got About page. So here let's see about contact for content. And you have to make sure that what you're transferring is over here. So how content is the one that you take? It has the same name and window over here and contact. So you could actually have the same name, but just to differentiate between what is the variable and what the variable is holding, I'm just changing the names. So we'll go back, we'll get back to compose in seconds. Or he could see how using EJS, we are able to transfer some graphs, some new content to our pages. And now we'll see how we could make use of these Bibles inside of the page itself. So inside of about EJS and contact EJS before. So starting with the contact page. One thing we could also use with EJS is using inheritance. So the reason why we just added feature and Hadoop once. All we want is that we could utilize them for all the other pages because they are income. So what does that mean? Well, I could just, so that's the syntax for including some JavaScript using EJS. So whenever you want to write some JavaScript code, you need to add those brackets. And so now I could add which is called include, which is going to include and he page EJS page that I want. So let's start with the header. So here is the header. However, header is inside of partials, so in order to locate it, we need to write the starting from views. So if it is a site of use and just write contract, however, if it's inside them, use them partials than I need to specify. It's inside of a folder called personal. It's going to look for that folder, it's going to find it, and then it's going to search for that. So that is how inheritance works with EJS. Those go ahead and add a class of container that's like a special feature using Bootstrap. And now let's have a heading and let's give it a contact. And that's our heading. Now, let's say I want to write some information about that page. We already did that over here. Now, which is about contact contents or so. Okay, we are working with a contract, so let's just move over here. So how would I just take that over there? So it's reasonable, we just include a variable and to our page which is cool, content, content one. And now all I need to 0 we need to do is just let say I want to add a paragraph and I'm going to include it. So the way to do that is by adding that, oh, starting with that syntax. And that was an equal pulled by the name of our variable. And then we close that. Wherever you want to use inheritance, like including something, you need to add up brighter than that sometimes, however, if you want to include a viable way to do that is just by adding that here. Now that we do that, let's also add the footer over here. And let's go ahead and just change handler. Okay, so our contact digits, but let's go about the about page. So I'm just going to copy that and just change the title to be an About page. And of course, we need to change that to about. So the name is changed. You still have on the course homepage. So that's why that same thing. Hope which is over here. So let's go ahead and remove that. So now that we have our header, we just add them up. And let's change our torso to be home. And maybe Hong Kong over here. So here is our hometown. Maybe because that is a tumor website. We want to add some daily posts that guided the whole bridge. So what would you do that let's first create. Maybe also the user could. Click on that post and that area of hosts and it takes him or her to that specific posts. So what we'll be doing is that we're creating a new folder. Let's call it post that EJS. So that is a single post. And inside of our home will be having like a list of posts and work. And click on More. And if you click on it, it's going to take us to that specific post. So you could actually, it's really hot. It's actually pretty hard to do that using HTML, pure HTML. Because if you think about it, you'd be having to just create an HTML page for each, sorry, each post. However, using EJS will be able to just specify the name of that post and just take us to that post by teaching the Bible of the content. And it's going to be changed over here. So will be having the same variable, which is going to change by passing each time on the one that we get over it. If you don't understand what's happening. So we just write a code, walk through it. You'll understand more. And of course when we finished will be just making this launching this NodeJS web server. And you'll see how it all around so far. Well, let's go ahead and just include inside of the post. Now, since we added that hosted EGS, we need to also add a route for that. So make sure you don't forget any route. So that gap and we'll be adding a route over here for that. So hosts. Now, since we have many posts, it's not going to be one post and we need to actually differentiate between those posts. So the way we do that is we're just adding posts slash. So this is first the posts. And then we need to specify a specific post. Let's say a specific topic that pose. Now, the reason I added that is that this is going to be at a variable. So when we go to our page and just go ahead and write local host, the Rouse going to be like that. So pose and not Topic, know that's going to be available by rule which could take any other work. So it could be TB MOOC. Maybe, I don't know. Evening. So it could take any word. So that's why we call it as a variable because we'll be carrying on the topic, the title of that post, and we'll see how to do that in a moment. However, the first thing you need to do is just add a semicolon to specify that that's going to be a bang. And when we learn about MongoDB, you'll see how whenever we click on our topic, using MongoDB will be searching for a topic with the same title married. And if you find it, then the user could just go ahead and visit that page. However, if we don't find it, then we'll just say there's no such topic. For now, we just go ahead and test if these contents are actually appearing on our page. So in order to actually do that, we need to go ahead and drunk. Then note first. Yes. So what is there's an error? Let's see what the error is. So here, what the error is saying is that it cannot find module, so it's not finding that file. So what we do in that case, I probably should have just gone with a different path, which is just actually the file itself. That first app is found. So we go ahead and change the path. And then for node are the same person. Yes. And now the poor Sterling on the server-side, important. Thousands have 3000. Okay, So here, this is probably not what we want you to see. This is definitely not what you wanted to see. So let's go ahead and share why this is not working. So this is our first out when we go to the homepage. Okay, So we forgot to remove that. We have to get routes and it's going to the first one. It's not recognizing the PIP added a variable. Delete that, and now we need to restart our server. So let's go ahead and note. Now if you go ahead and click on Enter, so you can see that it's working fine. Here is our footer, here is our therefore my daily journal, home contact about. So right now we cannot click on those risks that this is our homepage. Let's say I want to go to the Contact page. So now, Okay, I guess with the Tiber. And let's go ahead and fix that here. And let's put that to the post, which has got two over here. Now let's go ahead and we run the course. The first thing. And now this is running as refreshing. Now a co-host, thousands. And now if you go to the contract, okay, inclined the same heading, a tutor over the content is changed. Maybe let's go to about whom. So yeah, it's working. And also have the post rush, anything for now, nothing. Pages blank as you see. Over here. We'll be adding more stuff when we learn more about MongoDB, how to have the pre-post and just dynamically change that postpaid to change every time according to the topic of that post. So we'll see how to do that in the next videos. 8. Install Mongo: So now we reach the database that we're using switches the MongoDB. Mongodb is an open-source non-relational database management system that uses flexible documents instead of tables and rows to process and store various forms of data. As a NoSQL solution, MongoDB does not require a relational database management system, provides an elastic data storage model that enables users to store and query multivariate data types with ease. So as y hat first and see how we could install MongoDB. Please keep up with inflation because we have several steps that you need to do in order to make MongoDB work properly. The first thing we need to do is go to the official website of MongoDB. So the first thing we need to do step in MongoDB and we go ahead and click on Get started. So let's go ahead and click on that MongoDB. So takes us to specify a university. And I click on that. Okay, so we go ahead and this is the mean piece of our MongoDB. And what we need to do is just scroll down and we need to run on the DV in ourselves. We don't need a Cloud database for now, so we go ahead and click on that. So here as our Download button. So make sure that you pick the package to be of MS. This is going to make the download easier for us. And this is the most new version of that freely downloading and of course choose on which operating system you're working on. So keep it on Windows. And then you click on download. Of course, you've got those and just submit. So whenever you do that, I've already installed MongoDB on my database, but we can go through the documentation. So we'll be installing. So if you're on Windows, the way you do it is just go ahead and click on the package, select them psi and download. And then of course it should leave found in your downloads folder. And then you just double-click on that file and it should give you the setup solution. Whenever you click on Next, You see that was going to show you some information. Just make sure that you remember the path of the data there actually because we needed it when you install it. So some are usually like that. However, the version might change. So this is 4. The version that you're downloading might be. So now we're on Mongo DB, I think version 5. So yeah, and you may be having more new version of babies. Just make sure that the path of your data directory. So once you've installed it, we could go so I already solid. So if you go to your local disk and they're open to Program Files, then go ahead and search for MongoDB. So over here, and then you go click on server. And you can see that my version is 4.4 and then you click on BIM. So what we need to do is just create a shortcut for us in order to use Mongo and Mongo, sorry mom, God, but he xy. So in order to do that, what you need to do is go ahead and go to your local disk C and create a file called data. So I've already created that file. So just create a file called data inside your local disk. And then inside of that file, create another file called db. Make sure that you call them the same name. So then TV and lowercase island, that what you need to do. So those, we get to that. So you'll be creating an empty folder for DB. After that, what you need to do is go ahead and open on your where we were so probes or program file and then the MongoDB that we've already been to. So and so for the asking you to proceed from that, we need to use a Git Bash shell. So if you have, if you don't have that, just go ahead and install it. So you just click on install Git Bash. And I think it's dot length or so. Yeah, I think you could just no electron here. You click on windows and so forth. And then you just click on which version you have. So yeah, you just click on the first link and you download it in order to use the bash shell. So once you've installed Git Bash, what we need to do is operate obviously. So if I go ahead and click on Git Bash, so that is the application that you should stove. And so what do you do? Just first go ahead and see here. So this is my main directory. And what you need to do is create a folder and the way to create a folder and Bausch to write term touch, touch is going to create a file which is called bash profile. And we've already installed, so created that file. So I'm not just going to click on Enter, but just to make sure that you have already created that file, you can click on Alice says list all the items that are found and this folder. And you should see a folder named by bash profile. So that's why others he is over here. So I think I could, I should list with a dash a. So I can see also the hidden worlds. So with that, you also can see that the hidden files and our file, which is bash profile, which is already created for me. And whenever you click on touch that file, it should be great for you as well. Now the thing that you should do is go ahead and edit that file. So the term that she'll be using is when and then proceeded by that. So by the name of the file which is bash profile, and click on Enter. So this should appear for you. Now. If you open for the first time, these won't be appearing, you should add them. So I've added them manually when I first and slow MongoDB. So make sure that you add these. Now one thing that might differ from my coat, yours is just one thing which is the version. My version is 4.4. So make sure that when you want to write those, you change the version two, the one that you have. And just to make sure what version you have, we could just go ahead and click on New and just go and say, oh, version, just make sure, you know. So it's 4.4.6. And if it doesn't work, just go ahead to the website and check which version that you download it. So this is 4.4. Now, in order to actually write, you need to click on I. So I adjust that later. So for now I click on, I could just type them, write anything. So make sure to write those exactly the same. Just make sure that you put your version, your own version. So now that we've added, that you add those that think that you should do now is click on Escape on your keyboard. Just click on Escape. And now I could not write anything, but you need to just get out of that file editing. So what you need to do is go ahead and click over here. And type W, that two columns, WK and then followed by an exclamation, exclamation mark. Sorry. So now if I click on Enter, you can see that I'm out of editing that file. So you create a file called bash profile and side of your directory wherever it is. And then you go ahead and edit it and add those two lines that I told you about. After that, you click on that term over here out of your file. So now in order to make sure that it's working right and burdened mobile version. And this should be working right? So earlier I told you to check the version. I think if you are downloading mongoDB for the first time, this won't work. That just to add to the website and just check which version you're installing. Mongodb is working fine. And in the next video, we'll see how to use MongoDB in the South before we start using it in Visual Studio Code. 9. CRUD: So now let's go ahead and try to use the crud operations that are used by MongoDB and the relationships that one GB acquires. And let's just try to use them for now in our bash shell. And we'll see how to later use MongoDB in our visuals you coat. So if you go to the documentation and you can see that there is this section for MongoDB operations where we'll see how to insert document store database, query documents or to update and delete. Now, first things first, we need to go ahead into our Git Bash shell. And first of all, we need to connect to monk, go deer or some people call it as well God. So you click on that. And you could see that here we have a message that is waiting for connections and the port is 27 year-old 17. Once you see that, that means our server as light is reaching for commands. Now, once we run that, we go ahead and open a new command line, sorry our shell. And what you need to do now is go ahead and click on logo in order to start our server. So now go ahead and first grade and click on helped us to see the commands that are given when Mongo. So you can see that we have these. So let's go ahead and first try showing the databases inside of our MongoDB and not new that we just type in the command how humans. You can see that for now I have three default. By default created DBs. They are empty. However, sometimes you might not be empty, but you still see that it has the zero-point years. Use your TV that because, that is because the size is really too small, so they just put 0. However, if you have a database that has some information and you should see, as you don't worry, it's not empty about sensors too small. You just see this 0 over here. So this is how we would show our databases. For example, we need really to create your database. They're willing to do that. Click on Use. And let's say I want to write maybe a database for clients. So News client dB. So now you can see that we have switched to give me Client B. Now since this database is not in, our system, is going to create it. However, let's say I click, I write him, use admin is going to switch modalities. However, if I switch on to switch to every database that does not exist, It's going to create that phase. So now you'll have an rewrite. So DBAs. So sodium is, you can see that now. Well, it does not show it. And I think the reason is that because we did not add anything to order a straight now. So let's just continue for now and see what happens. So let's first start maybe with the insert. So this is our insert documents. So let's say I want to insert an item to my client database. Let's say I want my client to have a firstName and lastName. And so we'll way to do that. So here you have this dotted or here where we have an item that is our like the attributes that we could add. So let's say I want to add a client to my database. So the way I would do that is by first connecting a collection. So what's a collection that? So I have this database called quote client and I need maybe to have several collection modalities. So what does that mean? Maybe I want a collection to relate it to their first name and a last name of each client. Maybe I need another convection for the health information required for each client. So there could be many permission I need to have all my clients, however I want them separately. So one for the names, one for you to help information, maybe one for their insurance, so on and so forth. So to make sure that you're in the right database, you just click on TV. It's going to give your client dB, meaning that we are, sorry, in diaries. So now let's go ahead and create our first query, right? We first need to create a collection and act to that collection. Collection I want to create is the names of my employees or clients. So the reduct names that insert, insert one. So that's what we'll be inserting. So let's get our first client. So that's the first flight, an ID of one. And personally, maybe John Smith. So just heard. Yep. So close those. Let's go ahead and click on Enter and see what happens. So cold exception. Let's go ahead and copy that. Over here. Just click on it. So you can see that now acknowledged true and it's inserted and so it did not work. Here's me and just add some space or something over here. Okay? So now we've added actually first collection of names. Okay? So now what we're doing is finding this item. So in order to find this item, I think it's good to be somewhere over here. So this is cool. And yeah, that's it. So maybe we want to find a specific item or we just like to find all the items. So the way to do that is by adding some queries. So maybe I want the items that have, maybe, and let's say we have sizes for quantity. For each client. You'd like to find the clients that have a quantity that is greater or less than so in that case it's less than 30. So this is going to give us all the clients quantity less than 30. So these are like different queries that you could use if it is less than us. Or so, we could use many things in order to find. So let's go ahead and start with the most basic thing. That would be db dot, the name of our collection, which is names. And up, fine. So over here, and you can see for now, we only have one item in our collection, which is right over here. So that is for right, sorry, finding. I guess it should be in the read state. So it could be allocable. Find, find it. So maybe let's add another client just in order to see how you could find specific one. So go ahead and say, okay, so db dot, dot, insert one. Well, let's just copy that and change that needs to be much easier. So here, copy and paste that and lastName to 80, well, and firstName to Sarah. Now, of course we need to change the IT to now is actually manual. So if you don't add an idea, it's going to be incremented. So if you have one, you Have a new RDD with two. Now, let's go ahead and copy that. So sometimes we need to rewrite it from the beginning for it covers. Okay. Hey, come out of the shell I to resist fill in. Let's go ahead and copy. So just to here and now paste, see and watch TV RVs. So no, that's your head is the one we're using, which is client. So you can see that we're not in the client's units, so now we switched. So we'll go ahead and paste up. And you can see that uncertainty. So now I can go ahead and say db dot, dot find. Could actually see that we have to one, John Walker and I'm sorry, transcripts and other client with Sarah. For now, let's say I want to find a client with a specific name, with a specific first thing which is Sarah. So the way to do that is by saying db.find names dot find. And I want to find a client which is going to how it first name sirrah. Let's see if it works. So I don't know why this arrow keeps coming up. It's just going to copy that. It shouldn't do that. Yes. Depends times. So you can see that now we come up with that client has firstName to be 0. We could also find using the ID and have some default parameters. So what do I mean by that? So db.find anions. Sorry. And then let's say I want to find the person with an ID of one. However, I just want to see Let's see last name. So I just want to see the last three. So the way to do that, let's just go ahead and see last theme and then one. So meaning I want to find the ID of one partner. I just want to see the last three of God query. Now. Go ahead. Most probably. Maybe not. So it did not give us. And you think I guess, let's go ahead and see what's happening. So maybe you dot dot to see if that happens. Just go ahead. And I was just so yeah. Go ahead over here. So you can see that it's actually quite difficult to work using the shell. That's why we won't be doing that. This just for you to know some of the commands that now click on logo. Go ahead and use client. And so it's not cast. So you could just forget that for now. So you get the point. Another thing, rather than fight, you could also update. So let's say I want to update a product. So I want to update maybe the first client to have an age also. So the way to do that is just by typing db dot dot p21. So go ahead and let's say I want to update the one with the client that an ID of one. So like that and then the oven column. And then we go ahead and we want to sets, Let's say you come to change or an algorithm side of query. And we'll want to set an age of 43. So if that variable is already there, it's going to update it over. If it's new, it's going to add to now, go ahead and close that and that, and that. So I'll just copy that over here. Paste, copy, and then paste and match. So you can see that now this has been acknowledged, so it's working fine. Now if we go ahead and say db.close finds on to us all the queries and you see that now we have a new attribute, which is the H. Let's go ahead and do that for the second one. So db dot dot update one. So let's update the second one. So the way to do that, IT to close that parenthesis and then I want to set, so we built that dollar sign that said, and then what do I want? Well, I want to set an age of, let's say 0.6. Okay? Getting a little bit annoying, going to just put it on a wrong keyword and just pull it from the beginning. Use client switch. Okay, so let's say on the 32s, close that, that and that. And now it's been a closet knowledge from our db dot dot five. It seems that we have now these speeches. So what did we could also use with find is by using the larger or smaller than. So. The way to do that is by saying db.find means fine. And then what we do, and go ahead and set an attribute which is the age. I want to find a client who is going to be maybe greater than your GTM is portraiture that, and I wanted me to be greater than 25. So as we're at. And then Reagan had I'm just at 25 like that. Close that parenthesis and then the other and then the other. So now click on after. You can see that it will be only the Cerro ocher, which is a page that you do, which is obviously equal you that 25. Because in hell, helpful and useful matters and not just greater, but also less than other. Let's say. They're actually called queries that you could use your elements in a collection. Now one last thing we could do is 38. So let's say I want to delete a client from my database. So the db dot name, dot delete. So delete one, and I go ahead and delete one with the ID of two. So like so it's giving me an error. What do you do? Well, you just go ahead and copy the copy. And it's acknowledged. So now your head and say db dot, dot, find. Answer to see that now we have one part. And you also see the collection inside of our database which show collections. And you can see that now we only have one collection which is the limbs because have many collections in a database. So inside of our client database, we have four, not one collection which is lips. So I guess that's all we have for crud operations. So we could have all less than the relationships that we could have inside of MongoDB. So let's go ahead and put an empty, blank page right off the graph. Rather dark. Let's go ahead and just type in here just in order to not have that error every time or the shell which is copy from here. So maybe I want to insert inside of my client the product. Each client by client has a proton. And so I want to insert, and since we don't have that collection is going to create it. And now go ahead and let's give it an ID. Once it's gone to your first ever. See the bottom. So this product is a father. And let's say it's sorry, comma here and price maybe 50. 0. Let's say we have a stock around 50. And now let's say for 0 or just t. And now let's go ahead and see that. You can go ahead and saying, Okay, I don't want to confuse you by just adding the client the other collections or just media reviews. For now, I'll see you when we dive into Mongo DB inside of Visual Studio, how to connect to separate collections feature. But for now I'm just going to separate them. So here maybe their reviews from clients, but I just want to have them separately, meaning that I'm just going to let's say client here. The meaning that I'm just not going to write Sarah, which is connected to our collection, has been trying things maybe. So. But over the client, you see rating is going to be fine. He could see that he could have relationships. So here we have one product which has many complaints over. So this is like a one-to-many relationships here, Jack maybe. And you could have many more to go ahead and copy that into my database. So now it's giving me C1s. Okay, so I guess I need to add over here. Let's copy. And now I think everything is okay. So come over here and over here as well. Don't forget this. Let's go ahead and try to please. So now it's still giving me that error. So I think everything should be. Sometimes it's just impacts all the spaces. Maybe. Let's return for the last time. It does not work. Let's just insert. But honestly that's what's real problem. That's just that's just one last time. So I think I've felt yeah, I think we just need to add doubt. Well, so I guess that should do it. So I forget the parenthesis. Happy. Now. Let's go ahead and price. Yeah. Crying over time. Anyways, we won't be actually working with shell. So this is the example. However, you could get the idea. Just 1 second. Okay? Yeah, as I said, we'll be working with those. So don't worry, you have a much easier way to inserting such things. You don't worry about that. It could be just simple syntax error or just prepare practice. So that's the video and we'll see you in the next video how to use Mongo and introduce another topic which is mongoose, hand side of our vehicle. 10. Mongoose: So in this video, we'll be introducing modules which is an enhanced version of MongoDB word first, before we go ahead and start with mangers and love to show you how to use the MongoDB driver inside of Visual Studio Code and sort of NodeJS obviously. And then we move to mongoose and we'll see how long is it going to be much easier for us to work. So well to MPM, there is a MongoDB driver that we need to install in order to start using MongoDB entire country, yes. So obviously, we need to npm install GDB in order to initialize our project, then, then install MongoDB. And here is the code in order to ensure that we have a database and the server connected. So let's go through the code. So here we have the MongoClient where we'll be requiring package MongoDB, which we'll be installing. So here we actually through the currency which is actually not understand the code. So we're importing that, maybe something from packages called Model Client. And then we're going to connect. We're adding collection URL. So the URL is going to be long delay followed by the localhost and then the port number of MongoDB, which is 270, 17 mighty fault. Then in order for the client with connected, we're going to make a new MongoClient. So this is why we will be using MongoDB package and then it takes a parameter in the URL. So now we create a Abby's name, which is a concept called my project. And then we create an asset to connect to the server. So we wait until the connection is established. And once it's established, we go ahead and go and just add a database. So dv is going to be accessing Actually the database of the client, which is going to be that TV days, my project over here. And if it's not found, It's going to create a new one as you see Michelle. So it's going to have the same functional. And then we have the collections, which is called documents, will be saving it in that collection and then return. Okay, so once that function is done will be consonant log n. Then if there was an error, will go to also counsel that error to see it. And then I'll also overhearing constantly that we're connected. So just to check that we actually did connect over here. And finally, in closing that client. So you could say that it's a lot of things to write just connected with a client, with a database and just without actually inserting anything to insert that help those. But I see that it's going to be much easier in Mongo's to work with this. So let's just go ahead first and copy that code and try it to see, hey, it's going to work. Here I've created a file called modeling. Let's go ahead and save that. And let's run our ladder. So over here, CD. And then go ahead and note Mongo in one dot js. So you could say that it's connected successful as an observer, done here, returned on. You see that we are connected successfully to the server and me. It's just like insert delete documents. Maybe we could check if we have a lioness by the name my project. Probably it won't show because we didn't not maybe had something. So go ahead and open the posh, as always, then grandmom cost. And then open a new terminal and go ahead and run Mongo. So show dBs. And so it did not show here, I guess, is because as I said, we did not add anything to the database as we've seen with the client. So maybe see show teeny, which are currently or use to me. Yeah. No. It's switched any database coli. So I always say it's okay. We're not actually interested in that, but we're interested in is the Mongoose. So let's go ahead and start with Mongoose. So as I said, modulus is going to be like an elegant MongoDB object modelling for NodeJS. It's going to be everything that's written MongoDB much easier to read in the modules. So you could see that it's only just directly server and database. We only need those four lines. So as I said, as I said, Mongoose provides a straightforward human-based solution to model your application data. And it includes several tools that could be cuz like casting, validation, quiet building, so on, so forth. Let's go ahead and just copy those and use open your code. And let's go and create a new folder. Let's pull it on those. So Mongoose dot d mu and the cisco dot js. So over here, let's just put it over here to see the difference if evolve. So what MongoDB in 07 lines, mongoose was able to do just those actually five points. So of course, we need to require mongoose. And then in order to connect, instead of having all this to just connect to the server, we only need to see more moves that Phonak started by the URL which is over here, which is also here. And then these are just some exceptions that in order for them to appear as an warning when you run application. And here is so, yeah, among Jews in order to create a collection. So here is our database is called test. And in order to create a collection, we create using the model. So here we go ahead and say Mongoose dot model. And this is the name of our collection and data than that, the model name should be similar. So let's say I want a collection of cats. I don't write chats or here, no, I write cat. And by default mucus is going to create the collections. And when we visualize the databases is going to say cats and not kept. Here. We also have, so this collection is going to be off, have objects that have a name in form of string. And here we created a new object inside of that collection called cat, which is going to have this weird name. It'll just change it to maybe you've seen. And then you can just see that kitty. And then just in order to make sure that it's added two, we say meow a console that, okay, So that's pretty simple. So instead of adding all of that in order to connect the server and have a database of the collection is good. See how we made this effort much less by using markers. Let's go ahead and actually use that. So of course we need to npm install. And now what do you install? Mongoose, obviously. Okay. So it's installing. And now we'll go ahead and say node mongodb one NodeJS. And you can see that it's connected. I'm sorry. Yeah, we need to go ahead and save on to Simone whose dot Mongoose WAS. And see, say up, it's actually working. Let's just check on it if it's working. So let's go ahead and type in Mongo. Show is you can see that it's working. So you can see that with Mongoose, you actually were able to add that database to our databases. So now we find the test, so on, so forth. So some from now we'll be using Mongoose. And we could actually now go ahead and fix our first application over here that was talking about. And in that way we'd be exploring furthermore, how to use the collections so known as models among goose. And the whole thing. Let's just go and just show the collections over here. So show collections 0. First we have to use test and then show collections. And you can see that it's the collection name is cats and not cat. And I said You add the collection name is singular and plural and levees. So before we actually go ahead and continue with the first app application, what's required. For could some of those tools just to get familiar with how to use Mongoose in general. So I've changed human into heroes, the database name. And let's say we want to meet a database for heroes. Now here, what is written over here is usually known as a schema. And you don't need to add it inside of these parentheses because sometimes you will see that you'd be writing many things over here. So for example, let's say I want to have a heroes here. So here as I said, this is a schema and we leave it up to the database name. So heroes, I'm database. And so here is the hero singular schema, which is equal to new. And then that schema. So here, this is the way we create the schema using psi molecules. So instead of writing this over here, will be moving, this will be just adding hears him over here. So it's pretty simple. It's pretty the same thing, but here we can just have as many things as we want and have just become fused. Four is the schema and for this demo, so let's say I want my hero schemas heavily. And that is going to be of type string. So here I want money to be of type string, color required. Let's add an attribute which is called required. So here is going to be true. And if the user did not add this attributes, so the whole idea of a hero, heroes that a basis to know which hero are we talking about? So in the case that we don't add a name to the database, there's something wrong and we could just add a message that says, please add the name. So if we try to add a empty string and to the database the sperm to give us an error, which is please add a name. Now, we also have something else which is maybe the rating. So maybe I want to read the heroes. And in that case. So yeah, required and then you have to put this. So now for the rating sorry, I'm district. I forgot about those. So maybe I want the type to be a number. So I wanted the rating to be a number. I don't want the user to intermediate electrical h. No, I want that. I want the user to enter a number and if it doesn't, it's going to give me my error. Maybe I want the user to enter a number with a minimum value of one and a maximum value of 10. So the user won't be able to enter a larger value. Maybe we could add a review as well. So if you about that hero and the review is going to be a string. So if you don't want to add additional attributes like the required attribute to the Min and the max, you could just go ahead and save it view string. However, if you want to add attributes, you just say type number and then continue. So here you don't have to say type string. Longus is going to understand that this is the type of the review variable. So now let's go ahead and create that model. So here I'm going to teach that to hero. And as I said, we always say write the database name and consider four. So here it's going to hero and the hero schema, which is over here. And now we can go ahead and create a variable inside of that model. Let's see. So here cons, so maybe I want to go ahead and add a huge is maybe Captain America. Let's go ahead and see that. So hero one equals to u. So that's how we create a new Haldol for randomly. So you Hero. And inside of that I'm going to be giving it a name, which is, I'm obviously should be a string. So here, Captain America from Moscow. You so thank you. And that you should be totally 4. Sorry. Yeah. Chapter 4 and 3. So 3 obviously, so maybe nine. I just remembered that I was Captain America and review. So that's ratings or the review maybe. Review. And maybe you could say one of the ventures or one of the original pay attention. So you're adding a new model. However, if we don't go ahead and say, Hey, Rwanda, safe and sat phone to add to our database. So your hips up in order to see it inside of our database. So I guess we could just go ahead and run it and see if that is working this out. Go ahead and rerun our database or our server. So I sorry, I forgot to save that. So now control C and then we want, okay, So let's forget something that sorted out. So here we could say maybe console dot log hero added. Okay. And now we run. Okay. So now this should be working. Let's go ahead and check it fits inside of our database. So go ahead and type in Mongo. So we have the heroes databases over here. So yes, heroes. And you can see that almost all of the databases are all small and not CAP, cap blocks. So they're all not on high top locales separately. So now go ahead, switch to heroes to be. Now show collections. Collections. We have cats and heroes. So a model is obviously a collection. And here is that schema of that model or collection. Let's go ahead and type and heroes or no, sorry, heroes. Yep. That for me without fine. Let's just check if that works. Yeah. No. I guess it's db.collection or it's TB. Strike out. Put a spring. Sorry, find heroes. That fine. Let's try it out. Yeah. So you could see that we have inside of our heroes collection object, which has an id name, rating of nine or review of one of the engineers. And this is by default and obviously the ideas was alibi for. Now, let's go ahead and try to add a, another, um, variable or another model objects. However, let's go ahead and say maybe the rating is more than 10. Just say, let's see, sorry, if that would give us an error. So maybe here, that's here to stay the same. And let's go ahead and save you to see. And we say Black Widow. Just keep the review as is and maybe put that to be 34. And let's save that and see what would happen in that case. I had to combat. And okay, so you can see that we have an error. So here, you can see that here validation field grading is more than the maximum allowed value, which is ten. So you can see that this actually works. So we did not add it like that. So it actually gives me that gave us a warning, that rating is greater than 10. It did not add it to our database, so we need to go ahead and change it in order for it to be. So maybe also at, and the name not a string may be a number. Let's go ahead and see what would that give us. So here. So here, I think it did not give us an error because we did not. Merely a string could be also a number. Maybe let's just tracheid and tear. So like that and see what would that give us? Yep. So here P site a name possibly can not keep tension. And we go to our database. Let's just see what was added over here. So show Mongo. Use heroes TV. And Td dot heroes, top five. Okay. So you can see that we have yeah, Since we ran the whenever we had the error, although that was giving us a wrong format. But this was correct. So every time we get regard the error here, the first hero model object was added. So you have to pay attention to that. Sometimes when you're working on projects and you get that error, and then you just fix that error and rerun some items to be added more than once. So here we are. As I said, by default, if you enter a number, it's going to be spring. However, if you add an empty string or nothing at all, it's going to give us an error. So that is how we add collection or add objects to our collections. You could also update, update those. So let's go ahead and also you could just add as many modulus you want. Maybe I want to add another model over here, of course, with the schema. So the first thing to model scale, so I'm just going to copy that here. And maybe I want to have an actual schema. And, and let's say I want to have a name, strengthen the same attributes. Okay, and here we change the model tree and act. And act. And let's say you want to add a new action over here and see the act of Islam to the chorus. Hey, sorry. Chris. Here. I go ahead and see here. Actual one, DOD safe. So check first in each run. So note on those. So dot js. Now the database. So Mongo DB, let's show collections. Can see that now we have an output collection. Now DB data actors, third pi k. So you can see that we've added a new object which has a name. And you say I want to update this objects. So the way to do that is Let's first comment this out. We don't want to anymore. So you could just comment this out. So over here, we'll go ahead and, and the way we actually over here is that saves, so the way we're doing it is saying jot and actually sending our model. So here are two models. We seeing actual drug. One. So firstly specify what object are we going to obtain so we can filter it by the attribute reaches the name. It has a name which is a BAD. Want to have another review meetings so that the tail of u, so u to be one of the original Avengers who that the accuracy. Okay, sharp. And he will have a callback function. So it's going to happen. And just say there is an error. Then go ahead and cancel. That are here. That are actually here. Yes. Go ahead and check our database so that actors, actors. So you can see that now our object has been updated. So it does not have the actual anymore, it's just the adventures. So you can see that also update objects in Marcuse and it's pretty simple. You get also actually update many. So maybe I want the reading of all the factories that start with Christy evolves. And so instead of each object on its own, I could just update them all at once, giving them the same rate. Now let's go ahead and just add some other objects because I want to try to find objects. And to do that I need to have some data in our database. So we'll go ahead and write them down. So do you know so Natalie Portman. So it's okay for now. I'm just putting these at random. So here maybe. Let's go with that. Okay, folks, let's change those. Poor to run. Now, let's go ahead and comment this out. And what I want you to do is find some objects. So I've commented this out. And what I want to do is find function, Sorry, function over here. And it's going to give us an error. And the callback, which is the heroes that, so it's fine. So here, if we have an error, let's go ahead and cancel. Log that URL. And I'm going to first close the connection. So I'll suppose that. So first of all, I need to Mongoose dot close the connection. I should. Actually, I don't I'm not sure that would affect everything, but it's just more, better, safer just to close the connection. And now heroes dot forEach. So this is a for each loop. Here I'm going to function to put the parameter that for each is going to pass through, that's going to pass through each object in the heroes. For our ER, Here's array and I want to punch console dot log that hero. So now let's go one more time. You can see that we've printed all these actual objects over hero. So in the future when you're working on a project and you wanted to print on your website all the names of the actors. And if realize that their name is not appearing. So maybe you could just go ahead and print what you are getting. So maybe you're not getting the accuracy and just getting an empty array or maybe different kinds. And should make sure you go ahead and console.log. What, what are you actually getting to make sure that your axes right objects. So we could also try and do one last thing, which is the delete. So I could go ahead and comment this out. And actually taught many, maybe I want to delete. Let's say everything that has a rating, which is so, let's say many houses that had it already looks good now obviously I have only one. So this is a callback function. It's going to maybe have an error. So if error than just console.log that console dot log. Let's go ahead and let me double-check. Yep, so it has room for rerun our molecules. Now. You could just see it from here. So Margo, heroes, heroes. The heroes with this dozens of times each time I forgot to comment this out. I guess. Saving it is we want the TV actually, not the heroes, actors to find pockets. So you can see that the one which is now deleted. So we'll only have these three objects. So you can see that we could, instead of using that much messages each time we need to rerun our terminal. So instead of doing all that over here, we could simply just go ahead and do that. Now over here, we could also visualize what you have in your database using just find and printing out all this. The objects that we are finding as we did over here. And the next video, we'll go ahead and finish our first step with the marginal, which is called maternal. 11. First Application: So now back to our first app application. So if you call, we had this much uno database, which had a homepage and About page, the product page and a page to compose. So we're going to be proposing some posts and we'll be publishing some posts on the journal. And you can go ahead and access those posts by just writing the topic or maybe the title of a specific post. So first let's go ahead and set up our composers EJS. First things first, don't forget the inheritance, so we'll be including the footer and the header. So maybe you could just go ahead and copy those and go to propose. So let's say here we have headings, H1 thought, maybe this play, four. Notes have a molecule and four. And let's compose. This is for the two poles. So now we need to have a form since the Arab posts to our database say, we need to go ahead and have a form and punished for his actions. So here, whenever we click on submit, that form will be going to dash slash proposed methods, going to be a post method here, host. So whenever you are submitted something over the Internet for our website, this is called the post and you don't get it back case VR for class. And if it's slurred, heat deficient. Now, docked on. Lets me we have also humble. We hear we don't meet out. So this is for the container. Let's say species. Of course not. Now let's have a label gone to for the title. Maybe the classical to bootstrap. The label. Of course going to be touching. So here will be entering the turtle. Absolute speed inputs coming from p tags. And the class is going to be also form label. Sorry for control. Since that's been put. Let's give it a name of title. Will be giving a penny in order to access them what is written inside of that and put on. Let's go ahead and copy that for the for the post-production now the title. So over here, let's say for the text, post text, that's called post-tax. This formula. Here, it's going to be posts itself. Here we could add a text area, since it's come to be a post that writing a paragraph. So we want to know what the box to be. So you're and let's give it an a post text. So obvious, obviously, texts does not have a type. Let it be a rosary. So rows and data flows that area. I was very close the text here. And over here we have submit water. So type, type, submit class C or class. Let's go ahead and give it both sort of peripheral tolerance, a posthumous happen. So maybe. And the column, something that works. So the background, something and the powder itself is given the poly-A me. You publish. Pop this thing through time. So that's for you to pose. Now we have actually all our images ready to be, except for the post. Um, so, so go ahead and add a post. I'll just add those basics here. Let's see the H1 is the title, so title of outpost. And of course we need to specify what my title in our app.js. We do that. And here we will be doing content. So we need to specify whether these head and our first app. So when we post, yep. So so if your call reset you that this is going to be a variable. It could be anything. So let's say that this is the title of the post. So let's go ahead and first savers, so past maybe let's call it title equals two. In order to get that title, what you do is go ahead and request to the parameters of this request. And I want to get the topic parameter which is over here. So now that we've done that, let's go ahead. We have to search for the database to find a post that has a topic title similar to that. So how do you do that principle? So deeply actually created the post model, not you did it as well and do that first. So cost post schema. Then on new mongoose dot model, sorry that schema, schema. And then go ahead and type in. So it's possible to have a title and the target itself, Let's say that content. That's it. So now that we have a post schema, you have the model's pants host equals to new porno mongoose.model, so on booze, dots, model and model, you get a senior hosts. Now we are ready to use that. So now we're working with here. She has ever said we'll be going host that find one. So we find it. We want to superimpose, which has a title smooch that the three drugs over here. So let's just say topic just for you not to get confused. So your topic, if I do find it on the function, so then say found topic purposes. So if I did find, so in Python, if this is not none, so it's going to be true. However, if it's none, it's going to be false. So here it's saying if this bound is not none, so if you actually found something that you're ahead and render will be running that post over here, poster VGS. Suppose. And we'll be giving it some parameters as we did above with the Hong content and stuff. So the title is going to be what we found that title, because we'll finally an object. So we need to access this variable and a content which is going to be found dot contents. So that's yeah, ahead and close that and we'll say else. There's no such proofs needed to see. I'll just read our work too. Oh, direct. Like that. Yeah. So here it goes to home. So are you add slash reader to home? At home, we'd like to also pass. You'd like to pass all the posts as well to see them at home homepage. So do that. It's very simple to find all the objects and what do we do from here? So function and then found T and then go ahead, F3. Actually, I found that it's actually doing is here. We'll just take that, put it over here. So you ended it started over here in the passing by both. So siphon the whole content, the posts which are the found C. Like that. Yeah. Yeah. Or maybe we could just say if there's no error, so maybe there are stone, posts are empty. So in that case, look, it's so random the homepage. Now we still only have one thing which is the propose. So when you're rendering the two poles here, we have no problem. We'll just go ahead and open that space. However, we need to have a post grout as well to get the information back. And for that, we need to go ahead and get it posts a toast. So pose, so here if we submitted for, here is where we'll be. So since we'll be creating a new post, so let's go ahead and read that post. So transpose equals to new post that you pose is going to have two attributes. So it's going to have a title, which is going to be the west party dot title. And recall that this is actually the name of the input. And we also have the contract which is going to be able to pass them. Are the dark form correctly? It is. Oh, sphere. It's post text. Okay. So you had coffee and go back over here. So yeah, post-tax. That's it. So now maybe possible that law and order just to see it pose do we need to do asteroids? That is to say that in our database. And in order to do that, what you do is pause that save. The function is going to be function. And let's go ahead and see or actually a personal error. Let's go ahead and you're directed to the homepage. So you could notice that the director is going to teach you to one of those over here in that list is going to give staff. However, render is going to take us to one of these stages over here. So that's just the difference. So let's go ahead and hope that this is going to work. Hopefully it will first say yes. Okay, so we have post overwrite that 26 to go ahead and see what's there. The six new thing. Who post and oh yeah. No need to install the package. Person has this EJS files. Otherwise with it and try it and see. Then the Cauchy path from here, see that? It's a CD. It's just drove the first app.js and then go ahead and nodes first ab.js. I think everything is working fine. Now. Aacn, so local host 3 thousand. Okay. So this is our whom. Let's go on. Contact us. I think is contact only. See about. And let's go and see recompose case. We can see that this is our compose, this is the title, this is a post. Let's go ahead and try something. Title like Monday. Let's just add some of my interests. And let's click on Publish. Okay, So we're having a typer cannot read property title of undefined. So this may be because of the partial, maybe not. So just to be on the safe side, let's go ahead and do just a solid. So over here, sorry for that. Service costs. Person t equals two. So it's a body parser, so wiring. So here, buddy portion. Let's go first to click on No, I'm sorry, npm install and body parcel over here. Okay. So we install the knowledge and use it. So over here you have the Jews, but the parser which is here, dot URL and told it, hey, so let's go ahead and now we try again. So we'll say No.2 first up and down. Let's see if that works. So let's just go through here. Then go to compose and Dragons one day. And then just publish and see that it worked. So if you know more about the bodyParser, let's go ahead and click on body parser. And PM of course, you could just bring more about package, so occur. So here it says note as Western bias sheep is based on a user controlled and put all properties and values and its objects are untrusted and should be validated before trusting. So for example, why do we want and Cedric was that part of the title. Over here. You can see that there was a typer and we could not read this property. So here, for example, the food poverty may not be there or may not be a string and toString function or whatever. So by partial is going to do is going to lead us or help us read these properties with the Content-Type request header, which is going to match the type option. So long story short, this is going to help us read when reading data from the website that we get in the post method. Okay, now let's go ahead and check if we actually have that. So let's go ahead and type in Mongo and then show the V's. So you can see here that now we have this journal they read. Let's go ahead and say use Sure, No, Libby. And now we switch to this TV journal. And then now let's see show collections. Show collections. And now you see that we have posts. The ED, the post.rb file. All. You see that this is the object that we've added. It has a title and it has counted. So you can see that you are able to actually add data from a website. But it's not that hard. You just go ahead and add that toast. So go ahead and time that actual K posts or you get everything you want, the page that you're inserting data into. And you have to have inputs, obviously in order to read those data. You just and then inside of your database. So it's pretty simple and easy. Now one more thing that you could just see is that if you want to add some CSS files to your father's, especially if you do that in mode. So in order to houses fall, we cannot just add over here. Similarly, similar to having views, we will be having another file which is going to equal public. So we create a new file. I sorry, your folder. And this folder is going to be public. It should be made public. And sorry, not inside it. So it has to be here. So call it public. And then inside of public will specify what kind of public power, the amount, and that is going to be CSS. And outside of that, okay, I think I've added a folder. So K so you file a CSS file, I'm going to create a new folder which is going to be style CSS. So that's the way to do it. Okay, and you could add whatever you want. And one last step. So I just added, I've prepared some style code to pattern. And in order to read that, we also need to do another step, which is over here. And we go ahead and app.use express.static public. So it's like all the files are in public are going to be static files. What are the side pause, pause that on. Do not change dynamics, so we're just going to be there, they're not going to change. And so in that way we use them. Let's now one more thing that we also need to. Now I also need to do, but you could trust him because of, let's say over here. So remember the title that we've added, which is Monday, Love, I can guess. So it was Monday. Yeah. Let's go ahead and see your database. So it's Monday log. So maybe if we add the dash, I think a doubt and other sorcery like escapes me, stop on database or something. Hey, did not. Oh yeah. I see. It's posts them longer blog posts. Then. Mongo. And I think we need to do it without the scrotum. Let's go ahead and see how that works. So it has to be post slash the topic and the topic is the title. So it has to find it. Let's go ahead and trans time. So it's thousands spores that when they cannot. So our poly-A, okay. So He's going to rupture. Let's go ahead and do it again. First, AngularJS, Node.JS. Okay, So what is it saying real title is not defined. So let's go ahead and shark. Why is autonomy and defined? And the other is, we're yucky. So it's NGS quest dot next. So let's go ahead and see request dot next, which should be somewhere over here. So this is the app.get. Have your costumers to direct. Okay, yeah, I forgot to remove that. So that would cause errors if you have more than a response, response. So you have to have only one. So let's go ahead now and again. So it's Node JS. Nouns go ahead and dry. So we go ahead and see posts slash Monday. Okay? And it works so Monday block. Now, the reason I'm doing this is because sometimes we go ahead and just say, let's say Monday. And in that case, we did not find a post, but this is not practical. We don't want to hard-code our post title. So for that case we could sum, we could use some package, package called blue dash. So that's the islands. Just see it though dash. Given that. So Let's go ahead and see an explanation on it. Yeah, basically, so let us was no dashes going to do is that it's going to put all the uppercase to lowercase. And that case will be able to find our topic no matter what font, what kept, what's capitalized or not. So we're going to change the post title. Just use the o dash, o without any dashes, underscores without and capital letters. And we'll do the same to what we are writing over here. And we'll compare both awhile while using that dash. So let's go ahead and use it. So go ahead and copy that. Here. Attach cards. Just that concert violinist imagining in that case, what we are doing is that we'll be using the term Hello Jasmine researching when we're getting posts. So firstly, change that to be dot. And then it ultimately chase. Write that in your head. And when we want to find our title, Let me doing here to here, the target is over here. And it's going to search for all the topics now to make sure that all the topics are also lowercase. When you go ahead and add a new post will also use that and add to our database all lowercase as well. So that way, all our topics, the topics are going to be in lowercase and the ones that we are searching are all innocuous as well. One last thing we need to do is to require our package so NPM and store it and see. Oh, no. Go ahead. So now we go ahead and say Monday blog, like, Hey, that's not going to work over here because Monday logs already capitalized. Let's just add a new item. So let's say that adult is hello. My publishing. Now if you go and say hello, right there, we could. Yeah, I always forget that. Posts lush. Hello. We'll get that. And if you go ahead and just say hello, small age will also get it. So we don't need to just hard code it and write it as it was. So that video I will be doing similar things, just exploring how to use Node.JS in the next videos. 12. BMI Caclulator: So now let's go ahead and create our second application called a BMI calculator application, where we'll be completing the BMR as the title indicates. So let's go ahead. And so from now on, let's go ahead and create a new folder for every project and initialized package, NPM package with NPM in it. So firstly folder called it PMI. Outside of it. Let's just copy the path, path and I'll cd to the path. That's the first MP. And that's yes, two answers for all we need to enter. So they answered them and said of us entering them. Know that you've added that. Let's go ahead and just copy it first needs. And let's just go and create a new file, which is the JS soluble. So we need the Express. For this. I won't need the modules. So on is more like application mood among girls. And let's go ahead and of course install these packages. So npm install to install, the eye, of course, expresses the mean application that we need. And second is going to be the bodyParser body system. If we need anything else, we'll forget that we start. Now, of course what we do is to add those. First, the app. You don't need to set the engine for EJS, skip it at all. Yeah. Dose, we could just start with our routes. So let's go ahead and create a file. So let's try and work with that channel is time. And so rather than quality BMI calculator, Let's go ahead and just add some basic things. So first, the document could be cobia, my calculator. And inside of the body, we will be having a form because we need to Sunday. And the actual respond to me going to pilot or a not so clear. Then the method of course, I'll post. So now we need two inputs to calculate the BMI. We need the weight and the height is go ahead and add those. So type tax name, let's give it a name of weight. So that is our personhood and a place holder of. Now, another input, which is going to be a packed text as well. The name is going to be high. Place holder is going to be high-touch. Well, now pushing the parent submit that form. So Bern says procreate the MRI. And of course you need to, but it affects them. Now let's this is our germline. Today for the shell is returned router JS. So now what we need to do is say dot-dot-dot and we need to get worked well, Bamaga helium, the route that is by. So we'll have an yet and oppose them to either get obviously a function with the request. And so we have two variables, constants, this case, our weight. And how do we get that weight? Well, who's going to be request dot body weight. And another variable which is going to be the height. Hi, class body. And now we could create BMI, which is going to be weight height squared times height. So that is how he could be the BMI. And now we can go ahead and say corresponds to send, and it's going to be your BMI. Then, then we add this BMI and let's go into them. Now, one of the most important things you need to add is that listen more to the center. Let's go ahead and listen. I'm sorry. The 1000 plus our function just say that console dot log servers running, running on port 3000. So we also need to get that is the post. Yeah, I don't know this to be a gap. So now we have a gap. So app.get and also BMI calculator. And now let's go ahead and add function request response. And we need to go ahead and see that near miter gauge but shell. Well, in order to do that, what we do is go ahead and say response that same file. So you need to set a file and that follows from that, the MIT Plato. However, since this is a non-esterified, we need to go ahead and specify the directory. Now, we don't need to hard code the directory we could use to use the luxury name. And it's going to automatically find where is this 55, and then add to it the liver. So directory is going to search for the project site actually. And inside the project, we'll have venture or BMI, calculator dot HTML. So now we have the get method. One thing regarding the post method that we could actually enhance is that we could use here a parse float function, since our widths and heights are not going to be exactly integers. So it's been read, hour would be, let's say 50 point 1 to point 2. And so in order to have these decimals, we use that function and parse float function. So now let's go ahead and run our application. So no, JS Server is running on local host to local host, 3 thousand. Okay, So they're actually name. So I need to add them. So now we have two inputs, the weight and the height and the plate, the Amazon. So let's say I enter 52, 0.3445 and it's in centimeters. Maybe putting our lady, I see that now they are being sent to a page which is actually this one. And we are seeing your BMI is and you have the BMR over here. So I think I'm not sure it had to be sorry. Yeah, the heart she needs some losers. Well, he get ready. We could also have a renowned for its go ahead and do that as well. So let's just go ahead and copy those rather than here, but instead about the arbitrator calculator. So here we need to have a new HTML folder. Let's call it calculator for that channel. Channel. Happy that, and add it over here. So removed. Just how quickly action is going to take us to, let's say completer. And we have these two. Our goal is to save first number, the first number. And here is our second number is the type. And let's see. And now let's go ahead and see that. So over here we have this equation for the gaps, for the post, which is also they have to add Solver here. So for the MRI is the result of the calculation. As we go ahead and see that that's going to be less than two, so that's num two. Num 1. This is going to be the same. You want them to be numbers, those surrounding them, which points something. And it's going to be num one, num two, num 1 plus num 2 num 1 because that's what he wrote in that channel. And here, and here. And those don't have. So you could actually see not much. We'll use it. Okay, I will need to install them on number one. Let's just stick with Node.js. Now let's go ahead and just go to tuck the first number 4, second number 8. A great result of the calculation is plot. See that we recreated the threonine calculator using node S. And we were able to also use extreme also JS. And you could use that to just have supple applications where you don't need to use EJS and will be, will be also having other applications have been working on in the next video. 13. TaskList Part 1: Okay, so now we'll be creating a new to-do list. Using Mongoose, will be creating a database. And this database is going to have these to-do list object that we can update, delete, and insert, inserting new things to do to our application. Let's go ahead and get started. And we're also launching our own application on Heroku. So we able to open this app on your phone or your laptop than the one that you're using. So it's not going to be only a local application. So let's go ahead and get started. So first, go ahead and create our new project folder. To do this. Inside of that, we'll go ahead and copy that. And, and, and, and paste that. So let's go into NPM. So first let's go ahead and I'm going to just say yes and auto-fill everything. Now, let's go ahead and npm install body-parser. Mongoose. What else? Useful dashboard as well. So let's go ahead. And if there's anything else, we could just wait until they aren't solved. Okay. Now, let's go ahead and I'm just going to copy those over here. Just to not go ahead and rewrite everything from the beginning. Now, you go ahead and copy this and use, sorry, not that. I have to create an app. So app.js. So we start over here. And let's just move this for now. And let's go over here. Okay? And install everything. And what we now need to do is install. So EGS, so I'm just going to copy the package here to connect to our database here. And so we'll be holding our database DB. Hey, let's go and create our upload file where we'll be having our static. Static. So I think so, Yeah, so we have public to add the CSS and the EJS files. Since we have since we will have k or k and we have the view engine which is a. Yes. So the first thing we need to do is go ahead and create our schema for the database. So this IM schema, and let's call it a task schema. And capital. Schema. And let's give it a name. So this is the first name. So we just need a name. Eigen itself. So I is going to be a Mongoose model. So mongoose.model, let's call it task over here as well. And automatically it's just going to be tasks in our database. And here tasks. So let's now maybe the first item, two tasks at the tasks over here. It's going to be the first title of our customers and we can just go ahead and add the arms. So I'm sorry about task. Okay? So task 1 equals to new tasks. And now inside of that we create the attributes which are just your tasks over here. Okay? And now this is how you need to just go ahead and create a array. This is going to have invited called the first item to be Task1 and really adding to the list of tasks. So we create a schema for the tasks model. Now let's create one for the list of tasks. Page 10, the pH of that. So I'll schema. I'm just going to be an object which has any string and also tasks. So here also That's going to be of type tasks schema. So let's go ahead and recap. So here we are having a model for every task. Then react. And we're also having every model for the list. And this list is going to have an LEA. So maybe we want a list of tasks under the list or advertently work. So having these different lists are different tasks under each theme. So you don't want to merge these tasks for each other. You want to have different groups of tasks on a page. So the way you do that, let's just create this schema which is going to have this tasks list four, which is going to be a schema. Now, why would we have a schema? Because we also have a default page and the default page just doesn't have any passion. It just has this task schema. So the main page is going to have this class. And the others are going to have a name along with the tasks. And thus why we call it a list. Okay, so now we'll be creating a list. So it was the Mongoose dot model. Now, obviously this skew. So now we first models so the task and the list. And now we have to start with our routes. Now, let's go ahead and start with our first term, which is the quarter. So applet gets, Let's go ahead and get started. So what we need to do is go ahead and put them at our default page. So let's find that task and outreach from passing this stuff. So our base function with the error and tasks that we found from the database. So you're really having to conditions. So if the tasks has a length of 0, so actually didn't add any past year. So in that case. So we'll add some code and also add at a pretty cool. So let's start with the easier part. Outs. So if our list of tasks is not empty, empty is go ahead and Granger. And which is our list. Inside of it. We need to have also to pass on some variables. So let's say I want to have a list of tasks. What it is, you know, is to know the length of that list or the hurdle of that list. And the list itself in order to visualize the list with a title on our application. So Let's go ahead and add that. Okay, So maybe first list title. And this is going to be found Title, which is we call it so yeah, bring k, so that name and come up. Then list tasks is going to be found T tasks. And this. So we've access the name and we access the tasks. So now that we've done. And the else part, which is laser partners go ahead and add for the first part of the condition, which is found length equal to 0. So one thing over here we should point out is, let's say we are at our default page. We don't want our TA for pitch to have a title today. So we'll be having everything that is on this slash is going to be today and everything else is going on. So put lists with the name is going to be on a different path. So here, let's just change the I'm tasked to me today and that's of course title. So today we don't want to choose it by, by the user. We want to do it, do it by default. Okay? So now if we don't have, so if we have a 0 length, let's see what we should do. So we first have to insert the first item, which is our default item. Soon. So let's go ahead and insert did pull tasks, which is the array that has this only task which says, Ask your tasks here. Okay? So if you don't have items inside of your tasks database, our list is going to add our first item, which is Azure pass here. So we'll just call that function. And if there's an error. So let's first start with a higher. So k error console.log. And sorry for that. However, if we don't have an error so ALS, but when you're doing is going back to this stage. So rested with direct to such. So let's just have a recap and explain why we get this fixed. So we'll go into the default route. If we have a 0 length array or list, what you'll be doing is creating a new list. The default one, which will contain only one task, which is the your tasks here, which is the default, that's okay. And if there are no errors, we want to retire to slash. So we go back to get. And then when we go back to this graph, and now we find that the length is not you. And you go to the else statement. Now that we're in the else statement, we're rendering how paging, which is list, which has those citing TV and the list tasks such as fan ti, dot tasks. Okay? And so the schema has this name and tasks. And we pull tasks which is the ideal gas over here. And our first item is going to be added tasks here. And now in the other route, we'll have a way to remove that, pass the test that we actually add. So now let's go ahead and first let's me for deleting this. But for different pages for a custom type that today's topic that like that. Over here. Over here we'll add a custom proceeded by that petition, which states that this is a variable. So we're customizing our link of this page of this list of tasks, which is not. So here we'll have t dot the name Qe. However, firstly, to find that or all the tasks that are inside of that certain list that has discussed in me. So the first thing we need to do is go ahead and save that name or the title of that list. So go ahead and add a little dash. So hard coatings. So if it's capital or not, we don't care. So key. So capitalize. And and how do we usually get that request, that parameter. So it's requested params and that specific router which is called customer k. So maybe just in order not to have that confusion. Let's add also. So let's go ahead and search for that list. And really finding that listed chest, which is which we recreated inside of that variable custom out. Now let's go ahead and write a callback function which is known to have found lists if there are any. So if there is no error, we continue like that. So let's just go ahead and do that. Now we have a list and not just the task itself. So it's just that different than UCC, which is okay. Let me just close and agreements like that. Okay. Okay. Let's see, just check this. Okay. I think that's it. So this is the default rounds. Okay? So this is what we entered GAP default front, and this is for the customers graph and let's just delete this case. No. So seeing if there's no error, just really having two conditions inside. So we first did not find this list step we are searching for will have a condition and the US. So if we already found the list item, so we don't find such a list. That means that we're accessing stuff tasks which I have already created. So in that case, I'm going to create this. So we first go ahead and add a new list object. So Haskell was new list. And this list is going to have an attribute and the tasks k. Okay, so now this is in case we didn't find the list. And we need to have a custom name which Parkland and a task list is going to be a new task list. And we added tasks over here, since this is the newest. And so this is in case we did not find that new list. Now, for the else statement. Okay, Perfect, Just save it. We don't see you don't have that US, so we need to save and of course, direct tour. Well, regard to this customer page. Because now our task, our list is found. So now we actually have that list. So will be redirected to this route that gets slashed custom. So now in the next iteration we'll go into the else statement and have a particularly hard atlas. So let's go ahead and render that list. And we also have to pass those variables that particle and tasks. So. However, without the font name k. So here it's found tasks. So don't get confused. And tasks are going to access from that model that we created. However, here request a custom, custom as just suggest to avoid any confusions. Here are the tasks. So we just pass in the variables. We've added. The default routes for both the lack of the default route that the customer pay for the get methods. Okay. So now we have the post after post. So maybe one to two hour today list, function, request, response. And then, yeah. So add our code over here. Now before going, Let's just go ahead and create our views. So open folder and create the part, let's call it footer, EGS. Another one which is hadn't low VGS. Vgs. So let's go ahead and start with header. So our document title actually is going to eat like that. And let's go ahead and distribute those. So the header starts with those. And so this is our hadn't. Let's go ahead and add the footer. So it's going to be having the body. And so maybe let's just add some stuff regarding Twitter. So maybe let's just say copyright 2020. Okay. She has actually habit US lives. So this is now on. So now we have to go ahead and inherit these header such as happy. Just inherited the line, the inheritance which is the extent. It's so I think just before I need to copy that, I think it's just a copier. Let's go ahead and add that. So let's add it over here. So let's just go ahead and copy those and added to the list from that. So let's go ahead and see this one here. And let's add in. Let's give it a class box. And let's give it an ID which is 3 heading. Let's add each one. Also, which says that partly variable which we added when we render the page just like that. And let's go ahead close that div for the title. And now let's just listen to excess. Now let's create another one. And actually with different costs, which is the same class name growth, giving it the same attributes and CSS when you add them. I'll go here, really heavy items. So go ahead and add this list items, I think gets less tasks. Okay, let's just go ahead and fix that. So this tasks. And then go ahead and create a loop. So this is Python code to the steps that for each function. So I will, anything inside of those is going to be written in Python. So it reads anything inside of those brackets and spoken language. And so that for each function, I'm going to go ahead and iterate over it. So and we'll pass in the function that are in that state it over. So let's go ahead and add those brackets over here as well and the percentage signs. So here is not Python and JavaScript yet. Okay, so now let's go ahead and see what should we add. So first thing it does is the hole and then an action, which is going to be the route that you're going to add a post or two which puts Article 2. So we'll be going to post slash. So deep it will keep it like that. And now let's use a post method. And so adding the phone, because this is a list of tasks where we can just delete that. And so that's why we need to add this form or add a class. So now inside, which has a className, which is task, we're just going to be a checkbox. Here is the list of tasks where we could just simple checkbox in order to delete that task. And the value is coming. Soon. Also here a conductor like similar to order if you've added equal because this is a parable and not function or a function call. So task that associated over learn from the function itself could have the value to be also the id. The task is not something that we see. It's just something that we refer to when we want to check the input in the back. So I want that task with that ID in order to read it. So The adding the ID because it's not viewable. So we just need because every task has a unique ID and the best way to find the specific task is just to grow lights AD. Since we have access to that class, would have access to its ID. So now we can just go ahead and do this. Let's say on change. So I will click on the checkbox to check, just click on the box or not. We want to have, I'm a function which is going to be or not function just to submit that form. So this at home, the summit. So our change, I'm going to submit this form. So this is fully input. Now. Let's go ahead and actively. So, so like that, we go ahead and add that sign task, task name in order to present the knee on the task itself. And so we have this input pass clean. So they aligned inside each other, the Checkbox, the task. And so now we have another input which is going to be hidden, is going to be the listing. So here in this, okay, So here we're adding a task. We need to check status. However, when we submit the form, we actually don't know on which lists are we checking? Is it on full page or the page we don't know. So, you know, we need to have an input which is headed. This is going to allow us to access the listening. So it's like an extra model that you're adding an order to get that listening. And how do we get that asleep while we call it by its name, which is asleep. And when we call, needs to return for us the value, which is the title. Okay, so we added with this practice purposes of our percentages. So whenever we're working with ties of different paths or customers futures, this discussion page. On which customer page or if we are on in the shark, we are the oldest. Submit this hidden variable. Let's go to help us to identify where we actually are on our webpage. So it's going to allow us to know more information about our webpage. So here is this custom as gong to be passed in order to just centroid value and the lists. This is going to help us more in further logistical with these other inputs. Also, we could also add them in order to know more about it's ready. So now that we've added four, we will be adding input, the title Hidden. Okay, So, so that's for the coin. Here. We could just add a slash to me. If we click on the checkbox, we could delete it. So that's the new update. And so this is for the first form, which is going to allow us to remove something or added. And now we'll add another form which is going to allow us to maybe add a new task. And so we'll add the slash route for this phone on this level, which is post. So you have like this plus icon which is going to allow us never below these tasks will have this plus icon, which is going to allow us to add a task, of course, quantity right at us. So I'm just going to be of type text. So let's have it have to be either ASU ID and this is a place holder which is going to be new item, week, capital and medial. So mu Now button, which is going to be of type, submit order to submit that form. Okay, and let's give it a name which is less and less value to be this name, an element that is inside of that form. So now let's go ahead and write our post-fact. 14. TaskList Part 2: Now, for our posts will be actually running a post code, this column over here. So here is where we add our new tasks. So that equals to request by the new task. So you getting that new task from our page and cause ListItem. Sorry. It's going to be so the default page or the custom page. So this strap is portable. So we need to get that listening. So I think. Okay, so let's just go ahead and see your task is the same as new task. So this is our first task. This is over here. So what's going to get that delivers that value, which is just listening or this type. Okay? So whenever we see requested by less, That's going to give us a value which is this type. And similarly we have an input of title task and we're going to give us the thing that we've entered inside of the input so that those, Let's go ahead and create a new task. So that equals to new. And are we adding that name, which is going to be item, sorry, the attribute which is the task for you to check on which tasks. So, so, so listening today. So we wanted to both current condition. So we want to write something that's, so Let's just go. Okay. So if we're on today for new tasks and just go ahead and direct, so hard to reach because the list name is today. So going back to the code over here. However, if we add our customer list, what is going to happen is the person first finding that list that we got. So listed. We want to find that one task that has a mean. And then we go ahead and see that actual. And we might get an error. So we have these two parameters. So let's go ahead and say maybe found. So maybe just as go ahead and see a task. Let's just get the tasks of this and then just go ahead and push. Here. We actually have so far. Since this is an array and JavaScript push, pushes. So instead of just saying new task versus not find that list and then push that task list. The services are going to customize that. So I think that's just me check something. Fun. I'm just taking it all in. So okay. So now let's go ahead and remove those. So I'm just so let's say let's call it a day. So we go to a form. You see that checkbox. So here we want to check it fits, click or not. So go ahead and save that check box or check. Check. So maybe we can get the ID of that task that we just checked. So whenever we click on that, it's going to take us to this output. And we just get the ID of that thing that we clicked on requested by that checkbox, which is going to get the value of this chat room. The task, IT. And we have also the listener to know the name. You can see it right here. So they have to see two identical. So earlier the first step. So now secondly, we need to check the last name is. So as we did above, we have also over here. So and Customize page. So it's just the same task. And I want to find the task I want to remove. So this feature is just going to click on that file and delete. So that's actually the main reason why we got the ID as the first argument. Obviously it's ID and then we have that function or that function. And it's going to have an error if there is an arrow as a parameter. So if there's no error, what we want to do is just say console.log removed just to check that condition. And then we re direct. So rested. Return to the main page, which is this. Okay? Now we go ahead and just parabolas, so less. Fine. So here we don't want to remove or delete the list, we just want to update it so far. So I want to update a list that has a name, which is name that we got from our cross. Another. So I would love to have and that function is going to give us the Arab world. So there is no error. What I want to do is just go ahead and run the country. Oh yeah, just here. Above. We just deleted it by say, find by ID and delete. However, here we specified the name that we want to update. And now we want to actually specify what you want to empty. So this is the second parameter. So what do we want to chew in that list? So we add that term, just pull, which is going to actually pull or remove something. And what do we want to call? Well, first, I want to access the tasks list, where I want to pull a specific task which has an ID, which we got here, which is going to be the check IT k. So let me repeat what I want to go ahead and delete that task for someone to find that list to which this task belongs to the state. And then find that exist. I go ahead and pull, and then I go ahead and search. That asks a certain task which has this specific ID, which is defined over here. So here it asks you for that task from the array tasks, which has this ID, ID side of return to a four page. But the Iceland for listening. I just need So I think that's all what you need to. Make sure that everything looks fine. And here we have the default tasks. Okay? Everything looks pretty good. So we've added those. Now. I already have some code that just to save time. And let's say, let's call it V reference. So it's going to go to, so you want to specify which folder of public we want to go to. So it's cool to go to CSS and then discuss. So now all we have to do is go ahead and style. So these are pre-defined that I've just added. So things that are related to the button to some classmates that I changed. Okay, so you see here the classes. One last thing is to have the thing which is the listened to the server. So so we need to specify which port number which isn't. So since we're on this or deploy this on Heroku, going to have a different port number. So we could do is just have a variable that is called port and move just two, so it will decline. So to Heroku, what you do is go ahead and type in or it's just a process that gets that port, which is going to be predefined by Heracles and which don't have access to. That port equals two. It's going to be process. Before that. Let's just see if equals to empty string or it's undefined. So that means that we did not yet deployed on our boat. And in that case, we're just hard-core, about to be 3000 as. And here will be listening to put 1000 function, just console.log listening on port 3000. Medications. Server is running server-side. So as I said, your goal is going to give us a certain unique port. And so what you could do just in order to toggle between the two, is just one process that port support that specific port number. We usually don't put it here. And we don't want to add it to our clients when the cloner to Eric call. So in that way, so if we're not on Heroku, we just get 3 thousand were just running locally in that case. Now before we deploy it, and let's just go ahead and check our view. So our header, our less the fixed overhead costs, we didn't create a partial formula. So let's just check. This is our practices, our form. This is the third. Let's just go to the app.js. So missed something. So here is the task that we're getting and it has a name. However, I think we did something wrong over here. So RT is actually that task because you are asked to find. So it's not this two prime. And however here, it's correct over here. So we found a list and then we access the past. Because the task is specific task were returned by that. Plus there's anything else. Oh, yeah. Here. We have to have these three. When we're comparing two strings in order to make it more accurate. Sometimes it won't work if you put the two equals. First of all, one is wrong. You have to either put two or three. But three is better because it's of the same type. So this has the same content, so and the content. So let's see the relevance also summarize here. Okay, so now let's go ahead and try to run our application locally. Then we can never deployed application properly and make sure that everything is fine. So now k, So here, so page two, tasks. Let's try adding a click. Okay? So now why is this happening? So it's getting an error when I'm posting on the homepage. So on this one. Because we have so let's see why sensory actually over here. So maybe I think we need to change this. So let's just try them all. Let's check also hold the key. I think here we're not finding by ODEs, so we just go ahead and update. So now let's just go ahead and try that. So since the area is neither here, this could be it. So let's just check if the teachers that are actually going to fix this or not. Let's just check over here. Yeah, I forgot your name over here. So in order to access the value, we have to just check box. Okay, so now let's go and run our application again. Fresh. So you could see that the elements are still there. We refresh, the data is changed. So that's like an inclusion that our database would be fine. So now you can see that it's working. We could remove our hour tasks. So actually, let's go ahead and customize that work. And now okay, we're facing another problem. So let's see why are we getting this? So unless the tasks for each reading this. So let's go ahead and see why it's not. Cost for each is a function. So in order to get custom were getting. So actually pulling first, not found the task. And that task has to have the same name. For us, has to have the same attributes. But it's just getting less. Tasks. This font 12, sometimes the facts. So let's just go ahead and click. Okay. So you see that sometimes aren't the right term for finding something in deleting good, we're updating it. So here we want to just go ahead and see if you can see that. Now, if you go ahead and click on task and click on maybe to slash home and seeing finished. So you can see if we go back to work. So you can see that now will have a different group of tasks then that whole or maybe the default curve. And you just go ahead and delete that. You want on that. You could see that it's a really nice application that you could actually what? This is going to be your partner that we'll be discussing the last few. But for now, now that we have it locally. And then next year you will be deployed on heroku. 15. Deploying Application: So now we'll go ahead and deploy our application that we've been working on the past or the to-do list. The application will be deploying it in via Heroku and will also be connecting to the Mongo database. So nothing is going to stay local. Everything was going to be on the Cloud regarding the database and on via Heroku regarding the owl. So it's not going to be on port 3000 anymore. So go ahead and do that. So the first thing we need to do is to create our Cloud database to store our data inside of that cloud. Because when we deploy our application, it's not local anymore. So the data, the data that we are actually storing is not going to be stored locally anymore. We need to store it on a cloud. And MongoDB is going to allow us to do that using Mongo DB address. So on main page of mongodb will go ahead and click on the cloud over here and click on Atlas. And we could go ahead and click on Try free. So we go ahead and click on that, and we're already over here. So your company, this is optional where I'm using I'm learning your work e-mail so that he had won. So now we have some information about yourself, FirstName, LastName, and the password. He and I agree that gets started. Stat. Think I've already used that before. Okay. So at, it should work. So it gets target. Okay, Just, just click here to log n. So okay, so now we go ahead and create your organization. Let's call it to do this. Task close, I think. So tasklist k and we click on Next. Moves on. We actually don't want to add any members discrete organization. Now. So now that we've created this organization, which is called actually identify tasks as I call it my name. And now here we'll create a project that is needed, maybe tasks k. So our project is going to be task list. Now next, my email as a project owner. And now that we've created this project, we could go ahead and get started. So this is the, our project. And the first thing we need to do is go ahead and create or build a database. So we have several options to choose the databases. So we'll be choosing the free one since we're just learning now. So go ahead and create a free cluster and choose which provided could have. So you just click on touch one. That one and swell. Inside of cluster tier will be choosy also, this one, the free and the name of the cluster, cluster 0 to x plus 2. So now we're creating the outer search. When creating this might take a few times. But that's why. So we have sodium can flip anything done. I think if you go to me, security, database access. So here we create our four, add, our user who's going to be able to add things to the database. So on. So maybe let's say that it is Sarah Allen. And now the password, let's say it's test 123, That's Spam checker and testlet 2, 3. And so auto generates. Let's stay on test 1, 2, 3. Hey, so you can go ahead and click on Add User. So you can see that this is the user and make sure that you memorize the password because we'll be using it in order to access the database. Now we need to go to network access, click on Add IP address, IP address, and allow access from anywhere, then confirm. So here it's like this is local IP ampersand it precludes our IP address. So now if we go back to the databases, Yep. The cursor is now ready. And you can see that we have the connections that we could add. So in order to absolute collections that you could browse collections. And here is where we could create our collection, so on and so forth. Now let's go back and first thing is to connect. So we need to connect our cluster two. We're working with the MongoDB shell. So we could do that. Click on here. And now we'll go ahead and click on the version. Just go ahead and click on 2.4 or earlier. Sometimes even if the version that you have is 4.4 or more upgraded on, sometimes it won't work over there, just put the loss function will fall over there. So it's good for all of the above. This is a topic that often gets SHE and go ahead and copy it outside paste. Now, we need to put here a set of password, the password that we've gots, which is 1, 2, 3. And they already wrote easily for us. Now if you've taken and to see that it works. So now for product C, should you release, you have to the admin and the local. So now to make sure that our database is connected to the shell, you can go ahead and create the clusters. So Proust clusters, and then go ahead and load. So it's unknown data. So that's called the ministers and the collection name also does. And create our cluster from me. Let's go ahead and add the object inside of that collection which is test. So insert document and maybe let's say that document has name attribute, which is Sarah. And let's go ahead and insert document. So it's inserting. Now, go ahead and let's rerun our application password. We don't have them type in testing 23. So now your head. And so, so that raises social, is that. So now we have a test database. And let's go ahead and say dv, test dot find. And you could see is it yeah, I think I might've put in it's wrong. I think we need to switch to that. That is so yeah. Okay. That's me to tell again. So test 1, 2, 3, then. Show the ease. Now. Okay, it's month, which is freezing. So naturally, the main thing is that we were able to see test. And I'll try it one last time. With this topic. You to make sure that there's news pieces. Shell and within, please. Okay, So now show dbs. So use test. Now db dot test, lab find. Okay, so now you see how this object, and it has a name with as an attribute and it has a value of 0. So you can see that our database is working just fine. So now that was just letting the MongoDB shell. However, since we're following our application, we want to connect to the MongoDB shell, but to our application itself. Go back to Overview and they can connect again. However, this time I'm going to connect on my application. So we have Node.js. It's better to just keep it two points. Okay, So this is not a reason to point 2012 or later. Let me just check this. Let's just put 3.7 copy. And we need, as you see, to place the password, the password itself, and my database with any of our database. So now if we go ahead back to our application, which is over, here's the to-do list. And we go back up. What we'll be doing is we'll be replacing this. So our local host on port 2, 17. 17. Now since we're on the clown, we're going to place this file, the Cloud URL. And here we go ahead and remove that password, which is test 123. And also here, this is the for the database that we need to face. So we go ahead and just group all of those and connect to TB, which is our batteries. So now Let's go ahead and save that. And let's go ahead and try and see if that works. So we copy the path of my file. Let me see d 2 and node JS. And you can see that server is running. Now we're still on the local host, but we want to check if the database is working. So go ahead and local host 3 thousand. So this is our database that will have another new item, E3. Click on Enter it soon. Now it is an outlet. This is maybe play. Okay, so now let's go ahead for cluster and let's refresh our collection here. So here we have a to-do list, and in our list, we have this array of lists. So let's go ahead and check it. So here is an array that says add your tasks here. So this is for the lists if we are not on the today on our default page. So here tasks, see that we have here Eat, Play and added tasks to South Island. See that everything the answer here is now on our Cloud, our cluster and MongoDB Atlas. And you can just go ahead and open that on an EPC So you could check what happened until the database from a PC. Just you just have to log in. So this is for the database and now the NAS subnets do is connect to Heroku. So now this is the official offset for heroku were really deploying our application. So go ahead and sign prompt. So again, leave he or she meal maybe I think is not an option for Google's role. K, Let's just say student countries in Germany slept language. So NodeJS and I'm not a robot. This is surely verify and create an account. So please now go ahead and plug in life, receive a confirmation e-mail. So now tom login. Continue. So connect excuse, I can cancel. I don't want you to say OK. So now we are on the main page of Hiroko. As you can see over here, let's accept those and k. So now if you hadn't quit a new application, so our athletes don't recall task list. Okay, it must be lowercase task first. To do this, just as good. Thus, this 1, 2, 3. Maybe free to add to-do list. Maybe if task. Okay, so task of this teeny bit little t. Okay? So this is maybe the URL entry, choosing Create. So now that we've created the start, the deployment method is really choosing Heroku git. So that if you did it in stroke your group, you could just go ahead and install. It, says go ahead and do that. I'm happy with this move. So I think we need to install first step. So you could just go ahead and follow these. So let's go ahead and save that file. Yes. So next, so this might take some time. K, So almost done. So close it. Now, we should be able to go ahead and created surgery. So let's go ahead and step over here. Can install first copy, paste k. So, so the package that we done here. So take some time to have a strong synopsis. Go ahead and check if it's working. So striking. So now let's go back here. And so go ahead and lock in to present a case, to present k. So we can do that. Good luck in that we are logged in. Now. Second thing we should do is go to our project. So we are already have a project which is over here to do this. So get it and it's going to initialize it for us. And then we go ahead and type in her book home, get. And then we move dash a task plus 12. So this is to create the new Git repository. And then let's click on Enter. And the thing worked. So now here is a wild time. We'll be deploying our application. So now we need to go ahead and get at adding everything to worry Pro. Just adding the eyes. So yeah, I think I know what's happening good. So it did add everything, but we could have just ignored the packages as well. So now the patches are also installed. That's okay. Now. And then new project. So this is a side comment. Please. I think I need to configure, so let me just do it out quickly. So it come from just basic things that you need to do. Global. So user name. And then under cease. Until again. I think we just need to also configure the e-mail. So let's configure that as well. Hey, So we've added, recommended everything that we've added over here. And now we need to get to it. Push heroku master. So we go ahead to that master. Now before we go ahead and push, we could first create a remote. Hiroko gets. And to do that, we go ahead and see the Roku creates. Creating art. So now that we've created this up and you have to go to our application and we need to create a new file. And this file is going to be called poor AP file, like that. Inside of that file, what we're really doing is typing in Node js. So after the S means one. So go ahead and save that. Now if you go back to our application. So we've created that file. And if you go to app.js, we can see that we've added this. Now you see why we added this port here. If, since we will be deploying it on, Heroku, is going to provide us with a specific port number that really accessing. However, instead port is null or empty, then we are actually locally running this provocation and it's going to be running locally. So that's why we put two options so it fits on the web. So it's that port if it's not standing over here. And the last thing we also need to do is that we have to do to package.json. And below license will be adding a new object which is engines and really specifying what as the version of our Node.js. So here note, and in order to know where your head and have a new one over here, so you consultation on search. So let's just go ahead and see Node version. So it's 14.7.14, twenty-one point four. So Z1 and Z2 at that 2.17, 34. Let me just check. Yeah, that's it. And now what you need to do is just go ahead and create that gitignore farm functions folder stories. Here. It's ignore. So it ignores going to ignore the files that we want to don't want to add to our repo. So this is going to include the node modules. So you don't want to have the node modules on our IPO. These are some default if you're on Mac and also the data ends over here. So let's go ahead and save that. So no reason why we add actually not modules is because we see that node modules. So a lot of files and we don't want to have this heavy data and our IPO. And so what Heroku does is it just goes to package surfacing and it's fun to see our dependencies and it's going to install them. And that we are going to have all the node module see it on the Cloud. So go ahead and save that. Now if we go back here, what we need to do is go ahead and say git. Like that because we added new files. He is that he is Hey, will you please yeah. Now we commit silicate. And the judge doesn't matter. Now we go ahead and push to master. And you click Enter. And it's going to push manufacturers. And it's going to build something and give us these things. But what we care about is actually to see words. The thing we care about compressing, launching sulla. So you can see that this is the only thing that we care about. So this is the link of our application that is deployed over here. So notice the kidney. So let's go ahead and copy that. Copy. Now, if we go ahead and click on that and enter. So let's go ahead and just see why did he get this? I think the note so here. Let's try again. So let's go ahead and just so let's actually yes. So get out. And then you get this. And now let's go ahead and hit Push. So if torques now, just wait until those are fresh. A venture. Okay, So Turks see that we have the same things, the same data that we entered, but now we don't have to go to local host, but just to dealing that regard. So you can open it on your phone, on your tablet and your iPad. You can click anywhere. And so now if you go to 20 slash work, could see that now we are in work and we could add like, like finish coding. They cannot. And now if we go back to the beginning, it could see that we have a different lab explore different data over here. So you can see that with MongoDB and hurricane, we were able to create an application that could use for your daily. For really use actually, maybe you want to do list a customized realistic view. Actually. You want to use it not only locally but on your phone. So this is just one example of how to do it. So I hope this tutorial of how to deploy your website was beneficial. And it's just the beginning to creating many nice, easy apps. 16. Project: So now reached the last part of this class, which is the most important part, which is to reflect what you didn't understand this course, which is the project. So the project is going to be pretty reflecting to what you understood. So that's why I'm excited to lead the project is going to be very similar to this occasion that we did, that we do is let's step in it. But on your own and the item your own. Another feature and different feature known as she had to do is to just make some changes. Maybe just don't do that task. This may be another thing. Maybe could be a notepad, it could be a stickler. It could be anything you like to implement. And if you don't have anything in my, you could just go ahead and implement this phage. So go ahead and add maybe these lists, these tasks, or these may be sticky notes. Maybe add some stenosis at each other. Have pores, want to delete things, want to also have the print crowds or maybe customers wants. So maybe if I go ahead and press and gt, I want to go to here. So wherever the thing that I type, I want to go to my graph. So you will have different routes, different things that you saw in databases. There are many things that you could do that with our government. So I want you to enhance what you learned and discussed by practicing, by experimenting. Let's go ahead and just created a goal sheet that you could just check in order to follow up on what you should achieve. Project goals over here that you have to achieve insight throughout the project. So one is running on port 80 thousand, return this and all the applications that we worked on, she always assume 40 thousand. This is pretty simple. Of course is the Express package. We never use node without the express package. I want you to have a local TV, but the one at the Cloud, which is Atlas and 30. However, you could just start with the local districts through that and see if everything's working and then just go ahead. We'll launch occurs. I also want to lock those stats that are used in order to delete or insert things to our arteries. Also at least use for different routes like app.get slash, slash, about four contacts on support. However, also include variable graphs. What I mean by including her Bible routes are my stats. So on the See you. Hello. Paige. Not necessarily in that way, but in some useful way, could include the spiral graphs. Once you have these two chromatids for each route, we've talked about a quarter of it, like push put. Yet. The lead songs for. So at this used to crud methods for each round have a header and footer in sport and most referring to add them in partials folder, color, palette, inherit this header and footer or no, also known as partial. In other speeches, of course, there will be other visual features. So pass on variables. So of course, you have pattern variables. In order to read data from a database. That's inevitable. We have to do that. Of course, use a functions from on girls. As we said earlier. I also would like for you to just not necessary, you write CSS code, just unleash your website with pretty just in a way to just go ahead and when you deploy it, you can just go ahead and use it on your apps on so forth. So it's nice to have a good-looking uppercase. And of course, as we deploy your application on Heroku, Heroku, we already did that with all of these have. So it's really nice when you actually succeed in deploying your applications. And children links, shirt your friends, family, and see them, see what have you, what application you have. Both. And of course, as I said this on different PCs and laptops, on different types of cones, so on and so forth. So good luck on your project and you hear any questions, please don't hesitate to ask me. And I really hope that this was discussed was useful and you are able to understand everything. Thank you very much.