How to create a portfolio webapp from scratch using node js | Ismail Taibi | Skillshare

How to create a portfolio webapp from scratch using node js

Ismail Taibi, Web developer

How to create a portfolio webapp from scratch using node js

Ismail Taibi, Web developer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
37 Lessons (11h 55m)
    • 1. Introduction

    • 2. Requirements

    • 3. Build Our App

    • 4. Routing

    • 5. Templating engine front and backend

    • 6. Clean the auth template

    • 7. Authentication install mongodb and robo 3t

    • 8. Authentication Link Database to our app

    • 9. Authentication set up registration page

    • 10. Authentication validations and registration improvement part 1

    • 11. Authentication validations and registration improvement part 2

    • 12. Authentication Login

    • 13. Cookies and sessions

    • 14. Send errors to user interface

    • 15. Middlewares

    • 16. Backend Creating the page and inserting data to database part 1

    • 17. Backend Creating the page and inserting data to database part 2

    • 18. Backend menus

    • 19. Backend menu 2

    • 20. Backend categories (CRUD)

    • 21. Backend portfolio part 1

    • 22. Backend portfolio part 2

    • 23. Backend portfolio part 3

    • 24. Backend portfolio relationship with aggregation

    • 25. Backend portoflio updateing images

    • 26. Backend portfolio delete

    • 27. Backend about

    • 28. Backend services

    • 29. Backend blog

    • 30. Backend blog edit and cover

    • 31. Backend settings

    • 32. Service edit

    • 33. Backend dashboard

    • 34. Frontend porftolio

    • 35. Frontend blog

    • 36. Frontend about

    • 37. Frontend finale

  • --
  • 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

In this course you'll learn how to create a portfolio website on your own. we'll be discovering how to work with mvc pattern, crud ...etc. we'll be working with expressjs modern javascript framework and build our portolio with going to containe the front & backend using bootstrap.

Meet Your Teacher

Teacher Profile Image

Ismail Taibi

Web developer


Hi guys my name is Ismail Taibi From Algeria 26 years old, I'm a freelancer on Fiverr and instructor on Udemy I have 6 years Web & android development and SEO expert . My goal as an instructor is to help people develop their skills on web developement - penetration testing - programming language and more.

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.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

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: Good morning, guys. And welcome to this, um, you Siri's on how you can create or how you can program your own really script or Web app is in new GS or, let's say, a JavaScript framework actually going to will in this course portfolio. You can build this port for you, for you so you can add your projects that you're going to make in the future or maybe had or gay project. They want to make your own portfolio. I will give you all the things that we need to create that portfolio or this website. Well, you can if you want to use any of the template or you want to use your own from blade Or actually, I want to make your own port for you. Just focus on the way that I made this portfolio on. Then you can create your own by following the tricks. And if that I'm going to show you well, let's say in this course or I will create or will make I a long, long video in this course, and then I will spread them so that you can actually fall along with the episodes and each episode full of the previous one. Actually, the this is the website that we're going to work with all way are going to make, actually. So this is the portfolio. So we have here a logo, have a navigation. I will show you how to create a many a year. I have a meeting with a simple flat background which is attractive, you know, on a very clean that if you go down, have the categories off the work that you actually work on. And here we have the, um let's say the work or the projects with a the category that that's belong Teoh at the title, Of course, a background image. And you know, if we go down, we have a little more. But actually we're going to remove this and change it by three. The navigation or that said I will I will explain to you how to make this by Andrew from Page one to page two on one and the food here we have here the credit and this simply is made by Matt Sparrow team. And here we have thes social media's. For example, if I want to access into a blood, I can't just go ahead and you see the cool or beautiful slider and then in the block we have here the blog's you know, And this is the pageants. And I've I was talking about, You know, actually, if I click on, for example, a block, then we'll be redirected into the single page blood. Let me click here, and you will see. Uh, awesome. It is some information about the block. Cool. We have the about page here, and also we have the contact page. So we are going to work with all of these Sebesta and we are going to make all of these. Actually, what I want to mention is we're going to create or way are going to created back in so that we can control the front And because this is the front front end where the users can see your website about the back end, where you can change things like, for example, the tax, all the images, present logo, all the configuration or the system is going to be and the beckoned and I will name the beckoned as Edmund Area so s so that we can work with it. We will make a beautiful at an area about First of all, we have to, um, get a trump late for for to work with I. If you go up on the previous lecture, you'll see a link off. This simply can get this done. Plays on deluded. Okay, so once you don't load it, you will see it the fall. So this is the fire. This folder on this? What? Its contents. Coincidence? The documentation, actually, only documentation. So it is going to have the contact PHP two way will make our own by javascript on. We have here the assets and ass is going. It's contained CSS images on Java scripts full of coal. No, these all the father government to work with. No. We need to get the templates that we should work with. So I will go back into my brother on a new tab on the say who will dot com and then in the searchable here, old bootstrap. Admit that already searchable that and click in the first. Or I will use the SB at me too. You can feel free to use any had been area because they are similar Onda work in or and the forms or in the Tom playing just at the design off the form is different. So we're going to use this bootstrap, uh, admin, uh, templates. And then, uh, way should, um, stick. Or we should initialize or create a folder and shows the files and so on. So we'll go down and click on free download. This is the admin. You can click here. See the Life Review. Can we see? Looks very light. I called and you see, we have here the graph way Have love things Way can were do with this SB at. So that's remove the frame. Awesome. I will just save this euro. So just to see or to work with the components for the pages on utilities on. So what? Cool on DNA. Now let's go ahead. Um, no. Let's click on free download and we'll be directed to the get help. If you're using a Mac, you can just don't loot it or just get by the command line. Or you can just don't live it as I'm doing right now. If you don't if you have Lennox or a Windows you can choose, you can just don't load it, and you actually need the wind roar so they can extract the files into your desktop. I'm I'm going to copy all the files into my desktop, so feel free to copy anywhere you want. Okay, so we are waiting for the download. I know I have slim network, but, um, it's not a huge problem. We're going to fix this. Um, so let's see. Okay, it is going to be download. So, uh, the same thing I want to mention is 2. Requirements: um, it's not a huge problem. We're going to fix this. Um, so let's see. Okay, it is going to be download. So, uh, the same thing I want to mention is what? The requirement we need in this course so that we can go ahead and work with them. Cool. First of all, we need a text editor. In my case, I'm using the visual studio code. You can use Adam Sublime tax just to decoud or any. Um, I d uh you, like, even know pad plus plus anything you want. You just You just need to follow with me. I recommend this obviously occurred because it is easy, flexible on it has a lot off extensions of that. It's help you doing some stuff. Cool. You have to deal with this if you don't know how to. Don't know that, just go into Google on you'll. You could then click on the first line or good acting to kurt juicio dot com. Don't know the suggested you code from here and start into your into your operation system . Once you complete that, you need another thing called new GS. Thoughts are you have to go into noogies dot com. In my case, there is a version off 12.16 point one. This is the latest version of the cure. Treasure is 13 10 1 Maybe you enroll in Michael's in the future, and there's a different, um, vision off the new GSO. Uh, keep in mind, the work is the same. Everything is the same. You just need to focus and do what I'm doing. So just go ahead. Adult loaded recommended for the most users don't live this version. I start into your computer and hold me. I've already told this, um no G s. And if you want to make sure how this or if you have a new G s So you just go ahead, look for, um in the search wall for CMD and, of course, the come on prompt Click on it, then type node V or version, and you will see that version is 12 16.1 Onda se npm Dash V that the MPM is the package or that contains oh, are some sort. It's a library that contained a lot of packages that node offer for the JavaScript users. So just three mpm it's comes by default with the new GS. Okay, So once you install the new GS, then you will have the Indian. So I have a 6.13 for four. Okay, so now let's go back into my, um you go get don't loader. I use this free software to told myself my things. I click on it and then extract Oh, by Dragon Fuller into the desktop. I'm going to work. Use everything in my desktop. You feel free, Teoh, use the folder anywhere you want. So double click on it on. There's a lot, lot off works about. We are not going to work off all of these things. We are just going to grab some, um, sometime plates and put it into a world web. Cool. Um, no, let's close that. We have to farts. So this is the back end on this, the front end. Now we have to work with our A free Mork Ah, and the promote that I'm going to work with Cold Express. Yes, especially s is a web application from more based on new GS. I use this or I love this from because it is easy to learn fast on opinionated, minimalist web framework for note GS on. Of course, if you're not familiar with this or if you already use the level and or all the, um, wept film work. Once you worked with the Express, you will understand that the express it is easy to use on a very quick and scalable, then the the main problem that the developers or the beginners have with this library. Most of them don't know how to deploy the application once it's ready. So in this course I will explain to you how to deploy your application into Roco on Make Alive to people where people can see your resume or your for you, which is a great um, actually, this for more is going to be installed from the MPM library. No. So I just went one command pulled NPM Install Express. Then it's going to grab all the all the things from express to your projects. Cool. We need also something called more munger DP. So the market TV is a database for more than abs, like nauseous or every or the modern database. Let's say, is you why or the i d. So we're going to work with this morning to be. Maybe some of you said why we don't work with, uh, with a school on, you know, But I actually I prefer this because it is easy, easy to use and give you a powerful tool Like, for example, to work with the relations to get data from database and walk. Cool. Um, this is it. Now we have to Don't look a munger to be and started. Okay, So we have Teoh get into more HGTV by willing it from the navigator. Then click on the first results, or go doctor in German gtb dot com and then go and click on software. And we have here something called Compass on the compass, which means that this is the G y. Or the interface where it's made something a lot of things easier Teoh work with. But actually, I want to go ahead and work with the community. Sever, So select your operation system. I'm using Windows 64. If you don't know what is your version? You just go ahead into your desktop properties and then you will see the system type is 50 64 bit cold. If you don't have the 64 bit you can choose the the normal one off. 32 on for using open tour, the Lennox Candle division of clinics or the Mac. Cool. Now let's go ahead and don't let and you should. Now see they don't load cool, so it has trended to nine megabytes, so we wait for it and she is completed. Then, before I caught the video, I want to say I want to tell you that we need something that we can work with our database or to connect order bays and would work with the tables or say, in Bongo Baby, we can see collections on stuff like that. So let's go ahead and say google dot com and then click on, say, robo C three or three. T on on. Remember? Yeah. Three. Take not t three. Okay, so rubble three t this is It's like a g y or say that diabetes indifferent. So let's go ahead. And Allah, just the robo three t on Lee. OK, so both retail, not the studio on. I'm not going to work with a huge product projects or the group projects. We need just the simple one. So Robotti three or three t sorry. then don't and splatter for the Windows 64. Of course. And we need Jan star, then here. Okay, Now, we should, uh we should wait for, uh, these two important as software to work with our database, and then you will understand to help to work where the databases 3. Build Our App: set up our projects through the first step you have to do is stay focused, you know? And don't get tired. Just full long. Um, bring your cup of coffee and do the stuff that I'm doing. Okay, Because of the the end of this course you will not. You will not imagine that you have created your input for you. Well, with your own code from scratch, you know there's something good or it feels so good. But before we start, I want to say that you have to practice guys, so make sure to practice because practicing is the number one thing to, um, make your life easier with program. So let's get started. First of all, let's create and you've holder. I will name it, for example, sport for you. And then I will open my just for your food click on open folder, then click on desktop and select before that that we have created That's like folder. Now all folder is opened and the just your coat. So we are not going now to work with this folder. Instead, we're going to work where they used to do cook with first thing we have to do is by going into this or over on the name of our folder here. Thank click on new flock and type here with me app dot gs, Which means this is or or this fire is going to be the main father. We're going to work with our projects until the end. This is the first thing. Um, I recommend using the terminal off the visual studio. You could not start making this on this condition. So go ahead into extensions and search for terminal and grabbed the first result just by clicking on the general. Then install it. I actually used this terminal that was created by this, this coder. So what, You don't like this? You will get a small icon here off the temporal. Once you click on it, then the terminal with pop pop into your You just said you could me go and show you. All right. Sometimes, um, it takes a long because I have, um I live it slow computer. Okay. So, as you see here, we have our temporal there, and now we can work with their access to the folder, do some stuff with their, um So what? We're going to work with this a lot. Lot mawr the next episode. So let's complete your work. Once you've deluded this, you have to do some work, right? So we have to initialize or projects on. It's mandatory to initialize your project so that you tell the council or the problem that you are going to work with no g s application. So the first thing first way should go into the criminal and make sure they are in the san folder, which is port for you. As you see, we have desktop before you on. Then type in PM in it, which means initialized than his interest. Okay, I will ask you some of the questions about your project. Teoh, you should out we have to answer. So the package name is portfolio. Enter. The version is going to be one, for example, for description, Miss A for you grab at or you can leave it blank. And the entry point is Abdullah Abdullah gs he see or he looked at look at the folder and he find a fire called fgs, so he will make it as the default. So he entered that disk lament into make it empty the repository. Empty the keywords. If you want to add some keywords in it, just full on top. Keep it that the author is made and license. Okay, then don't know. But it's clear that by topping C l s in the windows. Go using Mac. You can just type clear. Cool. Now we have initialized or project and you can if you mentioned or if you see that there's a mother file has been created is called Package Jason, which is willing to contain all the information about the projects. Like the information about the prospect, the name, the version of the description and so won't either. The packages I thought we were going to install in the future course, this is the first of you shouldn't Dio. Right now we should install our express package or the film work. So how to do is very simple. Go back into our terminal but say npm install and then one express. So by typing express, he will knows that he will bring the friend more on all what is contained from result from functionalities methods objects into our project. So just by inter than Thean P is going to look up for this thing. Freemark. That's going to give us. Andi put it into our party. So it because, you know, I think the Thean PM has created this'll nude model, and it's no more content. All the things that express come with Teoh. Start working with experts. For example, when you import express and we will work with you want to work with some functionality or methods than all those stuff is going to be located inside this folder of that called nude models. So is she. There's a lot, lot off folders, and each folder has or folding is a Libra, for example. There we have a body Parsa that comes with express there is expressed to. If we click on it, you can see how it's has Bean. It's be included. Sorry. So it's a lot of stuff, but don't worry. We're not going to work with this folder on my going to touch it, but we need it in child products. Okay, cold. So we have no understand what hope what we should do? You should dio Teoh centralize and brilliant projects. The second, the second work or the second thing we need to do is to start doing some cooks, right? So we need to make our application. Looks, really, You know, we need to see how it's going on, how to code do that sort of stuff. So the first thing first we have to call expressed that we have already installed that via the MPM. So how to do this? Simply Just type with me constant and express. Uh, the constant is a variable. It's comes with the ear sex version. I'm not going to expect all the stuff off the programming, so you can just google it and you'll understand what is different between the constant and variable that equal on what I'm not going to require. Ah, library Cold Express for more express. That's it. By tapping this command, we've now imported our projects or important our friend Mark on can work with it within our projects. Called, um no. Let me make a zoom in a bit. This for you. Call. This looks good. So what we need to do then we have to go and use this application. You're use this framework. Okay. We have acquired off. We have called the express from the library oo from node model that now we have to work with this. How to work with it by simply created a new constant cold application or app. At the end, this app is going to call the Method Express. What does this mean between the application or the valuable app will contain the express and everything that comes with express for methods, objects everything. So, no, let's work with it and see how it's work. Actually drawn to run on application, you should specify on which port you are listening for. So drawing the application, you should specify the ports, and we are going to create the ports so hard to bear the port by simply typing app. We're going to call the available and then say, Listen, is going to listen to Port 3000. I can choose your own, for example, 80 80 maybe, or 80 like that. There's a bunch, but are these love ports? But as default that's worked with 300. So how to know if your application is listening on that specific port by just adding a new anonymous function on this function? Is going to, um, to console Lord um, some text the same. The server started on fourth. 3000 for them. Cool. Now that's safe. Go to file safe or just control s. And or if you're using a Mac, you can type that command s and you will say the party called. Now, let's go into our Tamil on time nude On the name of the application, we have Abdullah's. Yes, we need to work with this form of abduct GS, then enter. And as you see this ever started on Port 3000. If you go into your, um, Navigator, sorry for these tabs or exit along this tab. So type local hose because it's look at it locally. This Why, um you know, we can't see it. Some stuff cool, so cannot get slash. Which means that sever is working. But we don't have any water to work with, you know? So we have to specify robbed her. So to do this or to specify the doctor very simple. You have to go up up off the application and thought up again because we're going to grab all the myth. It's off the express. We're going to call and without cold gets and this gets is going to have our contained two parameter A and B. Okay, so the first parameter is going to take three euro off the router. So, for example, if you want to say about page, if you have a contact page, so are going to see all this stuff on the next or previous O are in the next life lessons. Then we have here, be on the second parameter is going to be anonymous function that is an animus Faction is going to have two kilometers. Okay on then I can't, For example, say something called Rest dots sent his response response percent. But before that, we need to specify the very So there's a request here and every sports. Okay, so the euro is going to, for example, send a request and get a response. For example, when user acts to this you're off, for example, a person or a user access to this euro or but just or by just typing this and enter, then he's going to send a request race ever at the service going Teoh, make a risk. Paul's to this and give you the page. So in vacuum in this case, the way made the request to the server. But actually, the several the doesn't see doesn't have any page. So he give us a risk balls, and this response is says this cannot get this rot. So how to fix this or how to make our patient looks into the front of the front page? We have to specify him. So we need a response. So risk paul's dot sent the response is going to send something like, for example, Hello. I am I am from From Home Page as an example. Save. Go back, Harry. Fresh. Sorry. Every fish. It doesn't make the changes because we should. Or we have to stop the server and run it again. So, control, see, stop sever. And if you're using a Mac, you can just type command see, and then go back. Type nude app dot gs enter and the seven starts again. Then go back and refresh. And what we have here Hello. I'm from the help fish, or I am that home page called. Uh, let me give you an exercise. So imagine way. Have a lot of love pages and the user want to access Teoh about page. So what do you have access to this page? He shouldn't see. They cannot get boat. But you should see the page healthy about right. So how you actually can't solve this problem? So I will give you a couple time and I'll back to you. I hope you find the answer. And the answer is we have to create a new or water on this roster is going to be app. Get the cold a mythical get Then here five about, uh, caramel that we need to call The anonymous function has a request and of risk pools, se risk pools and the same Bruce Paul's. There's Paul's is when to send a message pulled. Hello, I am above Page. You save Stop the server Going gold again Knowed abdel Gs running again? No, If we type refreshed, then we see elbow on the about page. If I go back into home, then I see other from, um, the home page. Let's go back and see a boat and you'll find another about which is great. You know, that's good. So this is how we actually work with brought in. So there is a lot love robbed him. There is the get method. There's a post method that is patch. These, um, deletes that. It's, um also say puce. Yeah. So if you want to know the rods worst just say express GS routes, carpenter. And you see the brought in, um, documentation off the exposures. ITT's well documented. So you have We will have all the admission about the broader, for example, here, who have Russian methods like we have get post method. We have, for example, all that ahead. We have. Um I won't check these olders. Yeah, So these are the methods. So we have rest alert. Driss and Jason Rez Adjacent P wrist redirect. And each one each one of them has some information, for example, prompt fire to be done with. For example, when you click on download, then you send the user into a number page, and this page is going to be Donald. Where is going to contain this? A specific file to don't. For example, if I click here, don't let and see how this going to work, and it will show you that you have to mention the type off your, um, file. Then you can also add a callback function which is called Okay, so let's go back into our projects, then I want to show you something. Clear that instead off making the changes and stop the server running against on several again. And there's another thing which is old or a package called nude More. And this note more is going to make these for us or a magical you. So when, for example, doing, for example, some changes and save it, then the no GS all the nude more is going to stop this ever and restart the server automatically. Let me show you an example. So let's go back into into I'm sorry into the general type in PM, install new morn and guess what Dash G, which means install this global for some when you want to create a little project, so you just type nude moan on. For example. In our case, we have apogee JSF type node more Abou Gs, then is going to be wrong without started again. So Inter, then its rate on his complete installing the note was going. It's not going to take a long time. Depends on the natural speed, you know, So that's where for it and cool we have a solid installed the nude more now just say nude more anymore. Ap dot Js injure and you say it's give us an error. It says that this is this is unexpected a don't fire. So after this, we've already delete this, so just fall safe, and then you will see that the saver has bean restarted again automatically. She's good. So this create a mobile. Roger Teoh. You understand this app, doc? Get they contact luncheon Request risk. Paul's their risk balls saying contact. Hey, save Awesome restarting. Sever on the seventies were right. Now go back time here contact and well, we've made it, but cold. So this, um how you can Actually it is how to create the Roger, right? The next thing I wanna actually mention is I think we have to I think we have to start working on our projects, you know, is I? Come on. Actually, you were this stuff on a lot of stuff by just practicing, you know? So we're going to start on our projects on well, our project and each time, Or if you feel that you didn't understand something, just pose in this or making Newt and you can actually contact me in environment website or doctor from my email. And I will make sure that I will be really to help you. Okay, so let's get started right now and this will all project. 4. Routing: no way no how to stop all server. No, we should start willing or act before that. I want to mention that we're going to work with something called Controller on. The Control is based on three NBC pattern and each program or each framework has the NBC parent so that the fall is going to be more structured and well organized. In today's video, we're going toe work with the controller, and I will explain to you what we got audio in discounts. So first of all, the control will replace this function Unanimous function to a single simple line, you know. But before that, we have to create a folder called Controller. So let's go had inside of the project click on the folder and type control and then inside of the controller, we need to create a new full file story on this fire called found, for example. That said, user come forward because we are going to work with the front and on the backhand. I named this as user control. Can you name where we want just before with May? Just keep this thing clearly and type to send. I'm typing in my computer so Hey, enter on now. We should see our controller. So the first thing first or the first thing we have to do we need to cut this one. Remember, we are in the application. Get method and go back and type exports dogs, for example. Say index equalled this function. Let me explain to you what actually is going on here More of this. Well, we have created something called index right. So this index, it's like or it is a anonymous function that contained a request response on this Respond. This function is going to response a new message or it's going to send the message into our brother, right? So instead, off writing the whole thing here like, for example, the contact page. We're going to write it inside the user controller or anything along the file on the inside of the controller, and we are going to call this file and work with it easily. You have to do this. It's very simple. Go back into the out of the app Gs and inside of the Abbot Gs. Here we have something called obligation get slash, which is the home and inside this close with Roxanne. So uh, all the perfect, um, parents. So we need now to just call the user control. So before this, let me explain to you while actually going to dio so way named the file using control. So we need to type its name. Controller. What dogs? Indians. What does this mean? As hey, go to the user control Or and inside of the EU's control. Look up. Something called Index. And we have already created a function called Index. So this is the function that is going to be called inside of the abduct gs. Cool. This is it. No way are going to get an error because we didn't import our file inside off our act. But gs, how to do this on a quick you have to five. Coulson's user controller. The name should be the same as the name that you have ran inside of the thematic right. So use a controller equal. We're going to require. In that case, we're not going to for a package. We're going to require a fire. So how did this point slash And if you're using video, so you coat, then you is going to give you the folders, dies there are inside off your project. In my case, it's called user controller that I will type here using controlled or upset sorry controllers because God going to enter inside of the control of folder, then select the user. Control them. Explain to doc slash controller slash user control. No need to create his extension off the doctor. Yes, Dr JavaScript Fire because they understand that this is a job control. Okay, that's it. Now let's go and go back into user control. Come too far and save. Then let's go back and launch your application. So let's, uh, what's remember? Yeah, good Nouman at dot gs Inter. So if there's an error than his should give you an error. Otherwise, it is going toe lock the message series. Go back on top local host and you see hello. I am from the home page on the home page or this message. It's come from the APP or the User Control Index, which is located inside the controller User control file on, As you see on the home page called This How You Can Create the Control. Now let's remove all of these on Let's create Oh, right now. Let's go back into old file. We have. Uh oh. I told you that way can actually we have. We have to down the falls or the projects, and you will find the parts of going to work with which is a portfolio. So the first thing first we need to do is just to copy the index inside of the honor showcase 10. Then go into your portfolio folder on creates a new folder cold views or to save you and collect Double click on it on paste the index inside of the view. Let's go back into our just in your coat. You will see that you have any full ical view with the index haste email template. Right. But before that, we need to do something called E J s, which is a template in engine made for the express. Yes. How to do this? We have to actually install the GS. We already we have just the experts here installed inside of my package or Jason, and we have to add the Aegis version. So to do this council or controlled see to exit the process of that seals. And then let's thought npm install BGS intern then the package should be installed. Raina cool were installed the package. And you may know it is that we have already or the package that Jason has added or a visa had been ad into our packers, Jason. Now let's go back into our app. And from here we can import e g s a constant e g s equal. Require media. Cool. Um, now we should go back into the views or the view folder, right? Click on the index, rename it and say B J s go HDs is going to take the same center of the ashamed. That is just in a shame obits, but it's going to be rendered as a template to engine for the exposure es on. You understand how to work with all these stuff in the future, right? Let's go back into our app And is it No, we have to located or we have to send the index dot gs off fall so that we can once we Internet inter into the helm, we can see it in front of us. Right? So let's go back and go to the user controller on. Let's remove this response and type Chris Paul's dot renda, instead of sent on the render is going to look up that one retyped Runda is going to look directly for a Fuller called the View. So free type rundown. Now we are inside our view folder. So it's time just index, and it's safe now this type nude more you will see that we are going to face an error here and let's go back. Refresh on Ben. We haven't error that called noticeable engine or specified, and no extension was provided between is that we do installed E g s and redo Create exchange extension of the far. But we didn't mention that the default population engine is the E g s. So to do that, go back into the app dot JavaScript and before the, uh, don't get we have to say but said and we're going to set the views to reviews. Uh, if you don't know from where I got this all these information, I just got it from the documentations or express. She has usually s document. Then you will see the documentation so we have e. G s in bad Java script template. Click on it or just go ahead to E G s CEO. It's great for it. That's where for the server to make sure every insane everything um, looks correct. Uh, yeah. So this is the website. We can go ahead and see how the E G s works, for example, as it to start to get a spot there on do some stuff for their you know? So I want to show you where I I grab Lincoln for the Express to say express using these just with express. So this is the get up occupation and from the get up here wicked page, we can see all the information about the ages. So you have to important express have to import or to call the express. We have also to sit this So I will copy this and go back into fear on top You engine it said a Z e g s it saved. Let's go back to our projects every fresh we still have homes which gold failed to look up View index in views directory, which means that we should we should rename file folder as a views not a few save go back refresh And then our template now has been rendered without style, according to be called Residents Import This year, says John, Script on the images cold. So this is the documentation of the easy s. You can take a look. Look at it and you can see how to work with the GS. Cool. Now let's go back to our application on No, let's let me show you how you can actually, um, export and lengthy public folder with this year's a job script. Andi images that that comes with, um oh, are projects. So let's go back into the owner, uh, top plays and then we have a full local assets that just copy it to a copy, then go back to your portfolio projects. Then right click you folder called Public. Probably on inside of this public folder. You can paste this file. That's it. Now let's go back into our, um, just your coat. And if you notice we have or de linked or view engine with the E. G s. So you have to do the same with the public to you have to link the public with the with your application so that the easiest on placing union for something from the public it can grab all these informations from the public's how to do this. Let me show you from the documentation, because documentation is really important for you. As a developer, you have to get all the information for the documentation and implement those informations your application. Sometimes you face a lot of problems. Like, for example, if you want to a link or if you if you want to use this the payment system into your application in pronto or how to use this. And if you look up, for example, some tutorials. We don't understand how to work with this. You can't just go ahead with documentation on see how it works and how to implement the A p r into your application called. So we are going to look through the documentation off or how to link public holder into express. Yes, enter on. We have says something called service static files in the express. So the Elby vv This is the line that we need to link it so this up or go down and see application. On that case, we're going t stepped on the cold use, and this year is going to say express static public, which means that there is a full lyrical look up inside of our projects a fuller called public and grab all the data from here implemented into the usually yes, cool knows. L always make it up here. Cool notice. Go back into our application. Then I refreshed. Let's see. Yeah, we didn't Front horse ever so new Gamal Abdel Gs And here. You know, our website looks awesome. What looks beautiful clean on this report about room to work with this project that we are going to do some stuff you may notice. Or you may know, maybe if you see this website and you say, Well, it's easy, Teoh actually make it life. But the problem is how to make all these stuff works properly. For example, if I click on the on the the title, I don't I don't want this error or something like that. I need to make everything function correctly. So let's get started. Let's have fun with this. Cool. We have no implement our products that the the second thing we need to focus on it, or is um is to you have to know every single thing about your partner for us up will be happier and many logo heading the categories, the images, all these stuff. So let's no create some off old stock with the rotting because way working with voting. Then we're going to see how crouching works of the first things. First, let's create something called Broader on the Rotor is going to call or I want to make our folder looks more organized than me. Let me explain to you what actually I want to do. Let's go. Go back into our project. The new far Name it Roger Thought gs court. So this is the water dodgy s. What is actually Rocket Lodge is the rudder is going to take all the routing or we're going to take all the rotting and put it inside of this far, which means in the future we are going to have the front end and the back end on. We're going to collect all these wrapped in and put them together inside of Morata so that our application is going to be more cleaner on the Abdul. Yes. Is it going to contain just the stuff unnecessary stuff that we're going toe to work with globally. Cool. So Let's go back into the Roger on. Let's start a cure. So we have, First of all, we have to I called the express SE require Express this the first thing we have to do. Okay, The second thing is you need to constant new constant. Sorry that this Constance is going to be called Rob. This water is going. Teoh actually have always wound to actually called the express. Maybe. Maybe if you mention the previous lessons we have linked the apple, we have learned the express with the app variable and we we call the express by tapping express on every about expressed in the water. I want to specify which expects we're going to work with service type. Roger. Remember, you have to make the first letter as a capture church. Otherwise, theatrics not going to work with you. OK, so make sure to have this cool. So the last thing we have to do this type module, I thought exports equal Rock me is that you're trapped with the AARP. Your application and you're going to tell your application. Hey, export this variable that contains the express because we are going toe work with this and the whole project. Okay, so it's no safe and go back to our application. And if you mentioned, we have I abduct Get Roger. So I will cut this. I'm pasted inside off our Roger. Now we're going to put all the rockers inside of a rancher. Five notice instead off making the app because we don't have here something called app. So we need to change the the app with the Roger. We're going to work with the express. Roger. So way have to talk router, get slash your controller index. So the last thing we have to do is we need to mention which which rocked her way. Which five we have to call so that we can implement the robbed him. I said, Oh, inside of our projects. So let's create a new constant that this concert is going to be called larger and it's going to require dots slash Let's get unfold. The what? Perfect. Now we have called the rotor top gs inside of our application. Now we can work with all the stuff that I think a lot the code inside of Roger inside of our lab dot gs. Cool. Normal. It's just add a new single line or ab stop use. And this means that we're going to use everything that has slashed and mawr Um, everything that contained slash on some want. Which means that we are going to actually calling all the rockers from just the roger dot far so does make a comma here, and that's called Rocked. That's it. Which means that hey, we are going to use the Roger right inside of every single. You are all inside of our project. Let's go save. Let's go back in, Joel Application and hit Refresh and you will see the same result. We don't have any problem in it. Cool. No, let's go back on. Let's complete working with our, um, application. But before that, I want to cut this video right now on completely next video and explain to you how to actually create the robbed him for your front had developed a front end Sorry application. So see you in the next lesson. 5. Templating engine front and backend: So that's complete coding and building. Or so first of all, we rug to look up at the many bar here, as in the menu. Here we have a portfolio blogged about contact on. Now we're going to just stick or copy and paste the pages that we need to work with and create the routing off all of these four on menus. Then way are going. Once we start working with the backhand, then we are going to link a lot these stuff into the database until database to actually hold the awful you block about contact and more pages, if possible. Then if we want to create a pitch, for example, that you will create a new menu here and it will pop up within you linked with the new page directly, which is cool. So then I'm going to work with the older stuff. Perfect. Now let's go to work. It's Open up or open up your video. You coud let's start creating I will rocket. But before that I want to mention that in exposure yes, for example, here you can't change the request and the response we just wreck and rest and wreck is request rest is response. So you can actually, instead of fighting the whole word, you can just type at E s and you will get the response called. Now, let's go back into the Roger on the start playing around with all the Rogers that we need. So let's create a rotor about blocks. So the poor for yours is the main rotter. Cool. So let's go back and create a roger for the block about and contact. So it's go back and guess what? We just need to type Robbed her. Don't. Yeah, and slash or example Blawg. This boy is going to be linked to the user controller Thought block, and we have to go. I create the other brought in and tow one. Cool. No, we if we save the application and running using new tomorrow and that is going to give us an error because it says that the doctor you need to have a callback function. Yeah, so, as you see, Roger is not defy our Sorry either Controller is not defined. Cool. So let's go up way removed calling off the control. So I would just say constant user controller equal to require going to be required folder controller and use it. Controller Safe. Go back. We have another error here. So, as you see, rough dots get requires a callback function, but golden objects and define. Which means that yeah, When we call the block on, we call the user controller. It seems that when he go into from the rocks, when he goes into this file, it doesn't see, doesn't find a function or method old block. So we need to create this one. So exports the log equal to a non Imus function that you want to have a request and response. No one can say rest. Rendah, for example, said block and guess what he the program or the code is going to look. Look up at the views holder and look about a block. He doesn't way. We don't have a blawg. Don't play. So I hope to do this by just going into your honor shop a template. Then copy the blood. Copy it, go to the portfolio, go to the views, paste it. So the lust lesson we need to do is right. Click on the blawg and change the extension. She's E g s. That's it. Done Now, let's go back and see or applications running correctly. Now, let's refresh. Cool. Not its type slash block. Perfect. Now, in our blogging page, which is awesome, I think. All right. The next thing I won't have mentioned or I want to give you an exercise. So we have to create a page for the above and contact by creating and your option here, then Lincoln into a new function that has a request in the response when he's going to render its name. Then you go to the folder off the template and copy the above and the contact page into the views folder on. Go back into your just your code, of course, and rename the extension as E. G s. So I don't let you do this and from us, and then I will back to you. Do it quickly. All right, I help you find that. So let's go back and copy the above on contact. Copy it and paste it here into the views. Then go back and rename the above extension Shame L E. J s on before the contact to you. G s. That's it. And now you need to say exports about equal a function. Does every person's response and rest Brenda about? Then we have to exports again. Contact function. That function Requesting risk. Paul's I made a mistake here from from correctly function. Said rest Ranga Contact City. Um, I won't go a little bit faster when I explained to you some off the trick, you know? So So that the course will be less this longer. Then I go to the Roger. Just copy this. They say it twice, and instead you say about slash about contact. So about foreign tax. We already already make this here. Cool. Noticed. Go back in time contact. And here we go. We have a form off the contact page. Just check up the about and done. That looks great. I want to mention if, for example, you type like that. A box with a capital letter at the beginning to have later directed into Oh, it will give you an error sometimes. Give you here. We don't. We don't have an error, but sometimes give. You hear that this pace or you cannot get the sever Come out, get this page. So at that moment, or when you link into the database. You will see this error on that moment. You have to specify the correct your are you guys gonna be in trouble? Cool. So we have, like everything there. Let's go back. Enter. And now let's go back into views and create something cold. Partials on this partials mean instead of were writing the national or hard coded Ishmael elements You, for example. There's some some of the codes we wanna created the same old same way we want to create it into multiple file. So instead off right. The whole code would just need to include this code from a specific fire. So let me explain to you, for example, if we I go to the index here, we have some tags here. Make it more. For example, here we have Dr P. Shamil, you see, on all of these stuff, we needed way work with it for each page, for example, here in the contact with the same old thing. The blogger, same thing about the same thing. The thing that changes is through the title that will surely have to change the towel off the website on some stuff there, for example, here and give blawg take a look. The hitting steel there. So we need to work with the hitting Blawg here, for example. Contact page? Yeah. Even even the heading or something again, Actually. Put it for each page. Cool. Now let's start work. So how to do this? You have to go into the views on a new folder called Parcel. Inside of the Parcels are going to create a new file called Hitter dot GS and food E J s. That's it. No, we have five. Cool. So that's, um, close this right now, So let's go back into the index page on also, like from this one, and it will see where it can stop. Here's the hitter. Idris There. Um actually, I'm thinking too. Take this area too, because it is, uh, on all the pages. So I'm going to take you. I'm going to take it. She's the hair area until the area. Let's see working. Great, Perfect. But that is a problem here. When if I took this area here, then there is something called main class on this this inside of the main class. So what to do? We need Let's create another partial called Let's say container. I thought B J s let's go back and took a header from the header to top. Caught this code. Go to the header on paste it going safe But that is go back into the index and took the hair area cards project into the container that we have created. Now that saver enclosed those two panels. So the first thing or the forensic first we have to type with me this and I'll explain to you What is it? Include? You want to include thoughts? Powerful slash Um on Just do it the same thing with Herro here they contain saves. Go back Check. Ha ha! It's works perfectly. So that may explain to you why did. Right now we have caught the header, right? So what? By writing this curd from the GS some player engine then is going to call a four a code, this code. So instead of fighting this code here and takes a lot of spaces and wear righted for each border. So we stole all the code inside off, decided for fire on well, took all the information from that far by including So the syntax off the E. G s is like that, too Type of something with it. Or to include something. You have to type it between percent age. It's like a tag so open, uh, open tag percentage and minus, which might at this minus is going to avoid all the national code to be as shown in your brother. This is every really important. And then you can talk. Include. And we are going to include this far here. So what? What we do here? We are telling the code or the application that it's going to take all the code. Place it here. The same thing for the container. We took the foot, the good from the container on. Please step right here, which is perfect and also cool. We'll do the same for all the pages services go into the contact page, go down and toe the header. Right. So raise it. So they just I'll remove this. I'm tired. Food parcels either include Jack. We forgot to add the for they were on. And here. Just copy this and remove this hitter. Come. This is it. So what I'm going to do right now, I'm going to copy all this code and PC for blood on for They are both page. So where is it from? Here you have? Yeah. Mobile, Uh, on all he's going to be dilated. Cool. No, I hate her here. All the code here is going to be set. Now, let's go back and check our website. The home page. Perfect. Ongoing about both page. Cool. Stay, clickable contact page. The same thing. Yeah. Cool. You still have the blood? Didn't see blocked page. Perfect. Anything that works correctly called This is it. This how you can implement include the partials in the E. G s from the aegis. Sorry on now, Uh, we have to do something else. So all these Rogers has a relation with the user controller service A user. Uh, Controller Walter on. We need a new area here. That cold? That means controller rock. Cool. Um, no. What? What? What we need to do is we need to include the back end so that we can work with the front end and make it works perfectly on before the Yeah, We need to copy the same as we did in the previous lessons when we copy department, the JavaScript, CSS, all of stuff in the assets with all the assets folded into the public holder. Okay, so let's go back into the admin start. Bootstrap, Bruce drops or SB admin to. So I'm going to call a copy some stuff from here and paste it right here. A copy of the CSS image JavaScript sec s CSS vendor a copy and paste them here. Cool. The second thing we need to do as todo use and move all of these files inside a folder called Front. And because we are going to split the projects into the front end and back end. So that way can we No way are working with the back end and we don't want to work with for 10. Then we know that we are working with the full intent. So this right, like, new folder and the sea called from 10 and like, like to type back. So all these files going to be inside the front end and the rest of the file is going to be inside the back end. But before the let's I mentioned here, inside of user controller, that case file all this folder is going to be inside of front and folder and in does not get in trouble. You know, if you don't do this, then people would not run for you. Perfect. Now let's go back and copy things that we need. We need a log in with the registration page. We need to or also we need some stuff, the blank page, those three things at the beginning, you to start with. So paste. And now it's, um go back with our address to do coat. Go to the back end and right click on your name extension. You know, remove the mission that replace it with E g s is the first thing you have to do. SE called. Now we need to create um Roger for a love these three lengths, if you remember, how can do this. Yeah, we can do this by adding rockers like like the phone. But before that, we need to create a new constant called, um se back and controller. People are going to be it's going to require from controller something called back and controlled. We didn't create this, but we are going to create right now, so go to your control of folder than a new far name Beck and control of JavaScript on leaving Empty right now. Save. Go back into I mean controllers and then say that. Can controller, right? Yeah, I'm sorry, but we need to type. Roger. Yes, slash Admin Back and controller got in days. Listen, I did this because we're going to work with slash each slash slash admin, for example, we need to work with, for example, storing data said, for example, that in slash full So everything that has a rich ship with the back and I will I will make it inside off slash admin and swarm and everything that has relation with the front ad. I'm not going to use the slash and new I will explain to you this. Uh, you will understand this in the future. Okay, so here, we need to work with Morgan. Registration first, So Oh, say register on. I need to go back into the back end here on time. Exports dot register people to a new function. This function is going to have requests in response. Right? So inside of it all said rest. Render what? Yeah, that kind slash Registered and safe. Go back on and take a look. Add me if I type add me then we had a cool picture with a little dog here. So we have some information like register account is with Google ap I Facebook on. So we have the length for the forget password or do you have an account and talk? So we're going to remove the bridges with Google Facebook? Uh, this moment on, maybe I want to help to root register using the's a p I in the future because in the portfolio we need a real account. And also the portfolio needs just one user to work with its data, you know? So it's school for the admit. But actually, I don't recommend you to use the admin slash admin for registration. Teoh, which means that I will add here register because the admin we're going to add a middleware in the future. You don't think about the middle where and so on Because this you will you will see that it is. This is easy to use or to make which means that it's like a block. For example, you are going to block something someone to access your Agni area if he is not a user. Okay, so we have here, Roger. Get admits register cool 6. Clean the auth template: she means that it's like a block. For example, you are going to block something. Someone to access your admin area if he is not a user. Okay, so we have here, Roger. Get admits register. Cool, save. Go back and say register. Enter. Well, we haven't error, right? This is not, you know. So this is It's like the file doesn't look up the bob public for did it, and it doesn't see the requirement that is that the the far needs to make the, um it looks beautiful because we are using slash, slash to register for it. So let's go back into our, um, far. So as you see, we have slash admits lost register right inside off the register. Roger way made the backhand thought register. So it's go back into the register. Here on you can see here we have back and register, which is this one, right? So how to do or how to fix? If you if you face like these problems easily, you can go back into your I'm area, right? Like click on the inspects elements. Then you start testing the falls where it can be, So just go up all this find out an image is an image? Um, yeah, I think it is an image because the image of the dog. So where it's can be this the roll tech center greeting account the form you have a couple things. Okay, so let's go back to the hitter and work with. For example, here we have a link with our CSS, so they may try double click on this. Says moved back into who moved back and step forward. Which means that in register about the user or what the program can dio is going to because the father is in the register. So when he, for example, which top hey, treff CSS then he think that the season is inside the back end, you know? So how to fix this is just by to tell orchard the program Here, go a step more or step um um, into the into the folders or into the whole project. Then click on public and look up for the far there on what to do This they simply dot, dot, slash for on. You should paste this into all the hatred through to make or too that there the five work properly. So let's look, let's find a trip equal. For example, this logging is going to be slash admin slashed log in and for the age of two slash admin floss register. Let me could be small. Like that index last Chris through Facebook. I've told you that we should remove the richest of Facebook and Google. So I'm going to delete this. This would register my Facebook Google save. Go back, take a look. Cool. No, we have a clean webpage. I just wanna see if these all the things forgot passport to make It has when we come to it , then we're going to fix and create a paid for it called. So it's take a look and see if these a sources Yeah, we have a Java script Sources We need to link all the jobs Good versus in the note. Click save. Go back to your project. Your web up and everything looks perfect incorrectly. So this the registration area that we need to create a new rock for for the logging area. Just copy this and paste it here and say le Guin and then log in to go. I'm going to name this function as Logan somewhere to export this log in in cold, a function that has a request and response on. Guess what? We're going to render a log in, pig. Cool. I just I made a mistake here. Cool. Now we have linked log in page, so we need to go back into the views law again and look up for a trip equal and replace the teacher was last lash like that. So replace. Let me check. Thank them up on Try to replace this. Yeah. So it's added here. I don't want to ignore this because it's in your all and then paste for the index and the same thing for the older things. So just index. Thus adsmi log in. Yeah, this logging. So we need to log in for the luxuries. Google and Facebook. Only this, too. And here we made a hash praising account. Every eight. Well, back to a lot of these bonds here and for the sources. I'll just type this save exit. Go back top here, Logan. And now we should see our bought and paid with this, uh, beautiful dog. Well, this is, um, the Morgan areas we have created. No, we have to link the latest page, which going to be called roger dot Yeah, adsmi slash ad was going to be the main page. So it's going to be linked to the back and thoughts index save. Go to the back end on time exports, index equal brain, not miss function That is going to take two parameters, a crescent response and then rest. Brenda, let me, um, name it back end index, save. I will rename this s Index, and that's it. Now let's go back. Enter. And we have our admin page or I mean, area Cool. You see? Looks beautiful. Now, um, the work is going to start from the next tutorial and to want so stick with me and do all the things that I'm doing inside of my computer. Cool. So now we need to remove all of these stuff. We just need one example for, um, like this one and this one for the navigation. So let's go into, um, our backhand folder. Close this. So in the back end here, I will create a new folder. Cold, Powerful, You know, what does the partners mean is going? Teoh took the hard coded Andi are going to call these, for example, Hitter for inside of our projects. So let's go back into the index. And I will do a with copy What I need from this page, we need this side, and we need the navigator of the top navigation on the site. Navigation. So the site navigation is stopped at this. I can so old. See where collapse we have divider. Adams worries Adams here. Okay, I can see Adam's. Maybe maybe it is inside. Uh, so we have new charts. Tables? Yeah, Charles tables, growing tables here. And we have divider. And then we have we should have this close sidebar total. Yeah, this struggle where you can minimize, expand navigation. So this is when we need at this time or until the until now. Need this one, so to say, Include what? Dogs laugh. Powerful. It's left. Hey, right now, this creates a new far called hitter dots gs and pays all of the stuff. Here. Let's go refresh old things. Looks perfect. So what if I remove this safe? You will see the Tom plays is getting no good. Yeah, has different, um, with no styling. So let's go back refresh. Cool. Now we need to add another areas where it stop this debt. This'd, if it's contains everything that has a relation. Um, the hesitation with the blood with page right here. So we have here that I can off the user log out. Actually, I actually to log settings profile. Let's go back. See? Please leave. Console gods said the same model. We'll go to model. Let me check if I click on walk out. What happened? Yeah, we have here. Really? It just looks so cool. Scroll to the top lookout model. We need this lookout model. So old do Oh, uh, back to it. Go up. Let me go. Exactly. For example. Look for profile of days. Here is profile because I want to take everything from this page to have to We are in the profile. We have here a gun user information. Yeah, this is what we need. We need to take this area inside off hither, or we can create a new partners for it. Teoh, my good boy. Reason Last month before phone messages, this is a message is yeah. Ah, new items, His deposit, your amount to this. Okay. Cool love stuff going on here. We're going to remove the most of them. Took down message. Where is the search ball? Yeah, this is it. This is a searchable top navigation bought top bosses Sidebar. Tuggle for the top. Yeah, the top bar start. From here on, we have here the main content, so I'm going to take the top ball. I don't know where it's going to be stopped, but I will say, And of the top bar, I was cut all the code, and I will type here food Luke Luke Top. Well, but say paul slash brussels slash towboat save. Go to the partials creating your file and say well, far don't t j s and pays the whole code here. Now, we actually have a couple things to do right now we have here the blank page and the div listed is going to contain blank page with the footer on toe. 12 I'm going to actually split the page into port, so that makes Thank you, actually need to do. Okay, so I'll just copy this end of the content off name, so stop for the food and I will say include include don't slash parcels slash for good to the partials you follow. If we're GS and peace all of these things there and then I think I have to copy this again . I don't need the topple Gs. Instead, I need to paste it just darkly inside of our what page? So the content or pitching and start from the content float. Right. So the whole code to the content right rapper is going to be pasted under the code here inside of the head of the A G s. No, If I we go back, we can see the results of the same results. Okay, so here refresh. And we have the same result. Cool. No, we can't stop working directly from this blank page. But this index page, I'm going to copy all the code, just do a copy and creates a backup for our farm. So go to the backhand. I'm sorry. Go to the back and new far and name it blank. So this is the top of that. We're going to work each time we need to create a new page so blank e J s. And that will please the code to to make it as a recovery called Now let's get started to work. So if you mention we have a couple navigation bar and decide menu and we have here the notification that we need to remove, we have the icon of the message is so just follow along and that's you have to remove this . So, first of all, we need to go back into our header from inside of the parcels. Don't forget to remove the top bar or delete this this fall court. Now let's go back here. A Zaev said. We have his message center. So look up like clicking on control and paste the message message center. So this is a drop down message. I don't actually need this drop down message, so I'm going to delete it. This is, uh, this is inside and a Y got navigation ball. I'm going to delete all of these code save Go back. Refresh. We have deleted the message. Be careful. A few add delete a tag or that doesn't have a relation than you would be in trouble because sometimes when you remove I dead or attack three top play, it's going to be, uh, rearranged into something not good. So Let's go back and remove the notification to so navigation bodies Information we have. The message here is to leave this. I think this is, um, a lot of lawyers yet, so it's like alerts. Deletes this saved. Go back fresh on it disappeared. Right. We have here the surf ball. Um, actually, we don't need inside of dashboard. Uh, so we need to relate it to because I'm not going to do a research. Oh, it's church. Because we are going to work and portfolio on the port for Doesn't have too much things, you know? So nous to lead the Tobar search safe back fresh on Won't. So this complete deleting all of these stuff. I just need a little the dashboard at the component on All of these will be deleted. So let's go back on. Let's take a look. Where's can be okay, So let's say, for example, that same tables, tables. Yeah. Never get you involved. The tables. We don't need this one. Toss to me. This one. We don't need theme page. All the collapsed. Many of I'm going to remove the heading to divider about two cities. Way have components. Let me save go and refresh. Yeah, we have two things, right? Bonds, cars going to rename all of the stuff. So discreet. Let's go and open a new tab. Type local hoods. 3000. Now we're going to work with the front end on the back end, so make sure, but you are going now to combine on to see what you need from the current and shooting into the back. So don't be confused, because this is the This is an important stage. Okay, so we have the SB admin blank page. Right? So what we need to actually run or at in this area? We need to actually do something. I wanna show you some stuff you can do with the back end with on front and back before we start working with the back end. I won't just mentioned that we have to start working with the registration and log in, which means the authentication with express. Yes, and this is exciting. We are going to know we're going to understand and see new things going on, and we're going to play around with some codes and some really stuff. So in the next episode, I will teach you the authentication. How to make a user hope to create a session, How to make a user hard to let the user sign in or register into, uh, into into the portfolio on make it, um, as an admin, which can do a lot of stuff with your projects. Call? No, but we need to do right now is to stop shooting. So she you guys in next episode and in the next episode you will learn a lot love things to you guys. 7. Authentication install mongodb and robo 3t: So talking about authentication is something awesome. Teoh education means that you give access to a user or multiple user into or give them the privileges to work with your website or your enemy area. Which means, um you have a beckoned and from and and in the back, and you will perform and do the configuration off the front end. And you will have all the, um, privileges to do whether you want with the foreign. Okay, um, so this is it way have on if we want actually to move on and do all these stuff, we need to create a quantification system so that we can create users at the user, sign in and create their own, um, or his own stuff in the website to First of all, we need to create a registration area and inside of the registration, we need Teoh, get all the data and send it into the database. But before that and as we have talking, we talk about the general base. We have to create a new database for our system so that it can so we can store, import or grab the data from database ascended directly to the um, website. So, guys, just for long. If you remember, we have already don't loaded the mongo db server on the Robo three or you three t to manage the databases on today's episode, we need to install the dollar based on our computer. Otherwise, you can use the mongo DB from the official website created Cluster and a self stuff. Well, in my case, I'm going to work with mongo DB locally on once we want to deploy ourselves over server on . Then in that case, I will show you hell to actually run your application into the 17 years in the Mongo DB cluster or the Mongol DB server. So, guys, let's get started. First of all, let's go into the Don't alert and go and look for the mongo db server. So this is it. Run it. I'm using the eagle. Get don't loader Or don't let money manager you can. If you haven't e g m or just don't let detective from your brother, it's up to you. I used this. So click next. Accept the agreement. Next, click on complete desolation and then keep everything as it is then next and next. If you mentioned that there is something called install mongo db Compass on the market to be compass is, um is a G y. Actually, I don't want Teoh work with the compass right now, so I'm not going to end. Check this or it's a starlet. Maybe we needed in the future. Then click on install. All right, now, the mobile BB should be astonished right now it is going to ask about privileges, so we'll see. Yeah, So click on Yes, And then the insulation is going to be prepared. So it's asked to, um, stop or close the application that I'm using right now. Actually, I'm using the cam recorder off temptations to do because I'm recording this tutorial. I don't wanna be I don't want to lose these two application. Otherwise, I'm going to stop this recording and then complete on record again and do the stuff so you have to close. If you have this result, think here. Okay. And it should be no installed. Then click on finish. So see you soon, guys. We'll come back way just finished. I saw in the monkey TV. Thank look unfinished on. Then we have to see if the moment it is already starting into our windows or our operation system or not. So we have first to go into these or run CMD Sorry. I am a lot top elder, A little bit slow. Okay, so click on. Ok, then I will just say mongo one God, God is not defined Trombone really be too cool. Which means that monk God is not doesn't, uh, added to the path in the window. So go ahead and take a look for it. So way are going to the the sea, then prevent falls. Then go to Mongo db We have some to conserve. Er the server and the folder called Ben. And here we can see you can see all the stuff that you can do and we have here we have the Mongols who just like this path Copy it, go to the desktop, click on properties. And then, um, we should go to the defense system settings and then click on environment variable and look up here at the path. Yeah, this one click on you or just hit it. Yeah, there's a couple things here. Okay, so click Select the path licking you and variable list a copy the Ben on the variable. I think we should, uh it it this one. Yeah. I need to put the coma. So, um semi colon and paste. This, um this path. Okay. Okay. Okay. And now it should be added to give it to the CMP path. Just lose this cmd and look for the search and type cmd or just great darkly with command or CMD on this way for the assertion. Cool. So the common pound click on it. And then let's say one golf Cool. No, we have a problem here. May I think? Let me check. But this a problem? Not so. It seems that we have a problem, but I think we can solve this problem. OK, so let's minimize this. And it's a stall. The rubble three t click here on the label on and click. Yes. Then go ahead and install this rob or three team installed it on. Let's wait for the installation process. Done. Let's run. And with the ruble, three t, we can understand or see if it's work or free off mongo db is running or not. So I agree with the agreement and finish I don't used I don't want to use my person information. Cool. So now let's click on Connect. I'm sorry. Let's create first the I just looked safe and the work click on it. Yeah. So, uh, running or the Mongolian here is running successfully? No, we can not exit the terminal on Dhere. We have our money to be a stalled. So first of all, we need to right click on the new connection and create click on Create database and inside of here you can type the name of deliveries that we are going to work with. In my case, I'm going to use on Wednesday a court naming port 40 actually going Create on now you should see the port for you. All the collections. If you are familiar with skill databases, any via the the SQL, it's cold tables. Andi in the manga diabetes gold collections. That's it. This is the difference is okay on the model T B is a no SQL on its comes with format off Jason. All right, so it's some informations put together into an object or Jason. Then it's gonna be implemented into the database. Cool. Now let's minimize this. Let's complete. It's complete the work. Let me just pin this here and remove it from my desktop cold. Now, let's go back into our text editor and do some stuff with it. Okay? Close all of these tabs. All right, Cool. So the first thing first or the thing that I want to focus on as you actually need to create a new fault in the main folder. So let me show you lose this inside of the mail folder, click on you for a new fire. Sauron on name it db dot Js And inside of the dp doggy s here. We can call our several. You don't know how you can actually. Or from where I come with the database connection, you can just go ahead into do or do some googling and type mongo db connection with express . Yes, right. And then you get a bunch of results on your show. You have to link your job based inside a film. Mongo db your express. Just as you see here, we have Darby's integration, so click on the database integration and you can actually and see how it's work. We close that cool says go move down and it says the in this case, they are using the Cassandra driver. I don't want to use a six under driver. So So we need first installed manga TV. This is the first thing you have to do to work with mongo db seven. What you do, You just need to go to your terminal command, See, too close your projects and then, um, type npm install moody B enter. And now it should, uh, install the Munger TV into your projects. So this is the code. So you can create. You should create a variable called, for example, more more clients on that monk clients going to require the Mongo db and its methods called Mongol clients that the Moncler is going to connected to connect. Um, your server the slash here means the name of the database and then you can give a callback function with their or the database is going to be over is going to return the dollar based on this is for the version two, we can see the version three. Here it looks. Maybe it's the same you see, and we have here all the things. So let's go up back. I want to show you all that example so that you can get the idea. So connect mongo db How connected to your database? So this is the official website, so set up mongo db. You have to install it first. Then you have to acquire the more clients as usual. And you can put the US all inside off. Or you can create a new model client method or boilerplate right on. Then you can type connect. You can list the databases and all these stuff you can do it with with this Teoh. Let's see, let's go back and see all the other things. For example, this first year old didn t you? There's a lot, lot off resource is you can get as you see all of them they give. They give us the same result with among clients, right? This is actually what we are looking for. So this is it. But I want I'm gonna show you another method so that you can link the diabetes is going to be the same. But we're going to, um, do some stuff and work with the port and link uh, and changing the application for the warrant renewed, more going to run from the APP then instead is going to be run from the database, you know? So all of this stuff we're going to make in this at two guys, Let's go on, do it. So we have installed our man Good morning TV, and then we have to run again. Or several rude Iman or seven No should be running perfectly. 8. Authentication Link Database to our app: or seven. No should be running perfectly. First of all, we need to import or require the Mongol to be that we have installed by NPM Install moment be if we, if you don't remember, can go ahead into the package or Jason and Metro that the mongrel baby is here, then let's go back into the database Js. And now it's create a variable or constant, and this counts going to be mongrel. Be that this market is going to be required or is going to require the Mongo DB package, that's all. And then way actually going to do some stopped. So let's say mongo db dot How long would you be? Sorry dogs connect, and it's going to have three parameters A and B and C, so each permitted here is going to be is going to have its own work. So in the first parameter, we're going to, um, link it with the You are all off the database, and in our case, we are using the local Mangane be so we have to just type longer TV Best slash and say local hood because because we're going to work with local host even if you change the server, you will get the full euro from the cluster. So I will explain to you how to change all of the stuff. One, we're going to deploy our application into the Hiroko or the weapons inside. So the default port is Ah, 27 07 17 and then slash. And after the slash, we have to mention the doubles that you have created into your database. So in our case is called port for you. So let's type it port for you. Even if you didn't create the database from the Mongol eBay that it's all created automatically one your type of this command. So this is it. So let me or in the section number B or the second parameter you have to do use your old four, sir, on this is going to be Jason on, right? I think it is, Jason. Or maybe um, let me check if it's true. Um, used you world four, sir. And take a look at what's the format? The, you know Europe are, sir Top Pit express? Yes. And there's another one called a unified topology. Let me check this when you fly. Beautiful apology. I want I don't want to call it the video because I won't teach you how you can actually look and fix your problem. But on your own, Okay? Use Unify 40. True. This is it. So let's see how its allies, the san talks how to, uh, creating. So we're gonna be client. Yeah. So it is, uh, a Jason. So let's go back. This is this going to be inside a Jason format and the first problem it was going to be used. You're a poor sir. As you see, it's getting a little medically to be true. And we need to add a unified using if I to porgy True, We can go ahead and check if you are true. Yeah, both of them is going to be true. So lastly, all this the third planter is going to be anonymous function or a callback function that's going to take two parameters. 2 a.m. B. And the first parameter is going to be an error if there is an error or there is no error than we should be a client. Cool. Now let's go into inside of the anonymous function and do some condition. So it's side If there is an air, then guess what calls a log. This error with the rise else. What to do? You have to model. Don't exports clients. I'll grant you. But does this mean so we did module exports If you remember, we did this in the controller. When we do, for example, the beckoned. I'm sorry we did this previously. I think the rotter Yeah. The writer we say here want to exports, which means that we're going to work with the rotter each Each method contained the Roger that is going to be called into the far right. So the same thing here we are going to call the clients or all the data that there is inside off the manga TV connect. For sure, we don't have any data right up into our database. But in the future, we will have said we says to the client to be exported on. We're going to work with a client for each folder. We trying to call the mongo DB database. Cool. Now, with the second option we need to dio is we need to make the database is the one that was ever should talk to, Not the doctor. Yes. So let's remove this blind. Or let's just cuts this line on type memorial exports at which means that we are going to call or we are going to use the app inside of our database. So let me explain to you so here we can create a new variable called Constants at and that is going to be to require the app right? And then we can say yeah dot Listen to that port. For example. 3000. I explained to you 3000 on Let's give it a function request response. Also, log connected. Cool. No, we've made that. And now we should see the result. So if you mentioned we have no error here, but the problem is, we are We still connect the abductee. Yes, but in my case, I want to connect the mongo db or the database taught us how to do this fair simply, um, cuts the terminal process by clicking on command. See, then yes, and then do the same thing. Newt More. But instead of app, we're going to work with DB doctor. Yes. Awesome. Our application is running again. So let's check if our application working on so refresh, and now we should see the same result. So it's going to sometimes takes a little bit of time because this is it's going to check the database and all those stuff, and then it's going to reconnect to your brother. As you see, our website works fine. So check say, for example, blood. I have the same result. If I do to admin, we still I taught Albelin. So we have admitted on the same result. Cool. No, we have connected to our database and we have here something called connected because the application is working just fine. So the next step we should do is to call a library called dot E N V, for example. Um what? We want to deploy our application. Andi, someone want to, for example, do some hacking tricks and have ability to take or two took this, db dot Yes, you will find that we have here. Oh, Doug, is that we are connected, Teoh. And if you're always in a cluster or the money to become compass, you will not see that the user name and the data the passport of the database is going to be located in this far. So also we need actually to hide for security reason. We need to hide the euro and everything. About O has a relationship with database pores and passwords, especially when you when we talk about that basis. So we need to do call a package so we're gonna just follow these package cold NPM Install dogs. Envy Cool. No, let's wait for dot envy package. Now it's start successfully and then we can rerun again. Our application. Then we can go on now go to the home folder or folder. The main folders worry, then creating you far and make sure that it is. Start with the DOT on top E and P Awesome. This is the dot envy. Let's keep it empty right now on the things that we need to do is to to call this dots envy . So let's create a variable called Constant. I thought the envy equal to require is going to require dot He envy and guess what we need At another thing called conflict. I just put put the dot on the views that you could understand what, going what I need. Actually, so click on conflict and now we should call the doggy M. V. So everything we're going to store here is going to be called here. Right? So the first thing first I wanna actually copy all this link or lines where you cut it. Let's remove this closing tax. And then here I will say, for example, connection. Make sure that you write it all on Capitol Little. You may write it in small caps back for, um, let's say for syntax reasons or more to pull devote developers so right big. Okay, So equal on pace. Euro if you notice we didn't put the two, uh, quote. You see, this is wrong format. So we have to put like this, that's all. And we need also something. Oh, we need to report the pores. Want to be 3000? So these are the two things that we need in this to length or database. So first of all, to link our thoughts envy, we need this connection video, right? So just copy it. Go back to that DVD RGs and here we need to type process dots, you envy dot connection, which means that hey, from from the does every file look about variable cold connection and give me its volume. Right? So this is it. Instead, off writing this, we should just type in the connection. Second thing we need to dio is the ports, so just remove the port on type process. Don't envy thought supports. Sorry, but port Cool. No, If you see we have a problem, we may face the problem. Let me check what is exactly so Mongol Parse error euro Your I mull form. It cannot be paused. So we have I just Let's say we didn't format in a greedy wait. We didn't format the string in a group formats Let me check and we'll see what's going on him. So we have made the process. I don't envy. The connection is going to be here. So this is the connection and connection is going to have that this route This which is more gtb uh, four slash local hose 20 0 17 Powerful. I think this is a mile former for So let's copy this error. Copy it and go to the browser and see what be stuck. Overflow Give us as a solution. So I have some problems. Please check that your your eye isn't defined and the Council db So it is check. Or maybe we did this wrong. Maybe Like that, For example. Let me check. Yeah. Yeah, this is it. So the conflict should be between print between two. Uh, parentheses. Okay. Make sure to make it like that. Not like that. Okay, guys, save it, then Go back to your website. Refresh and wow. Everything looks fine. Everything works correctly off. So we used the dot and the far for the security reason, you know? So this complete our work, it's complete our work, and we're finished. No. Set up our database. So the thing love we have to work with is the authentication with the use. So we need to let the user all the ad me, Morgan and manage his web called. So now let's go back and complete the work. 9. Authentication set up registration page: Hello again and welcome to this new episode. Well, today's episode will be making something great. So we are going to make the authentication for our web server. So already set up our, um, falls there in the views folder in the back end. We have already the register and some stuff. Right? So what we have to do right now is we need to actually send the we're going to receive the data that entered by the user and save it into the our database. So to do this quick, I also first of all, we need to go and see our form, for example, said register. And if you click on or we go to the register, Uh, I think it's admin registered. Right? Let me check. Where is the Roger? Yeah, I mean register. I think I think I'm a registered. That's it. So copy the euro, pasted and look for it. So, uh, seven is not running this. Why we have in this sheer to new them on, uh, say db because we are going to connect with DB instead of the ab gs. Go back fresh on a register register page is running successfully. Cold So in the create account, the user should put his name last name, email address on the password with the repeated password. But what I wanted to want what? What I want to do. Sorry. I want I want the user to end to insert his use name. Or we can create a his name from because we are working. We are going to work with just a single user. And this page is going Teoh, run! Just went the user. Oh, there's no data into, um, the database. Okay, so this page is going to be just shown when the user is not registered into our database. Okay, so let's go back into our file. Uh, for it it was going to check the log in and see, so we have to have to enter his email address and the password. Cool. Let's go back. Onside register and look for our coat cold. So does go back into our views and into registered. Don't e. J s. Then rules. As you see here, we have a couple things right here. I want let's minimize this. And look up here. We have a form class that has a clause of the user. So here we need to add in action. This action is going to be the rotter where you wanna post this data. So we're going to post it into a register, Right? So or let me copy this. You're all I want to post this and then closed the tag, and then we need the method. So the methods going to be posed Method host call. This is the first step. You have to go. None. We have to check for each input if it's has a name. So for the first name that doesn't have name. So we need to add for here. A name on this name is going to be f me. Which means it is the first name. This at a name for the last name to toe l name with me is the last name. So we're about, um or let's just say first name. I think this is to be or not be, um, confused. So lost name, shape, last name and then we have email address. Name is female. Finally we have the password and repeated password. So name here. Going to be password on the news that they lost input is going to be repeated the past week . That's it. It saved and go back to see. But before that, we have to We have to see if the bottom is it in the form or not. So this is a form. Let me go back and check. Register, account. This is the bond. So, uh, purchased. Second, this is a bond. So I actually I don't want to use the a a trip. So instead, I want to make the bomb because we have already make the form in the admin registered Percival's believe that I will use the same class and was dead for the A. I will say Borten, close tag and going to have this class will copy this register and face it here, save. Go back and see how of the Kurds of one. It's the same. But instead we have now I bought No, we have to just specify the type on this time is going to be submit, For example, when we, uh users click on it Alicante registered here. Then he's going to be always want you said meter data Assisi. I collect and cannot put because because we didn't specify the road of this post. Cool. Now we need to see if the data if we are receiving there, are from the register form. Sara, let's go up. We have opposed the admin. Don't register its competence. So we need to create a rotter off the post. Okay, so let's go into the Roger then it's inside of the admin controller. Let's make our code more stretchable. Roger posed instead of get because we are going to push data admin register, then they're going to say that can't control her. And that's for examples. A creates user. Now it's copy this and go back into our controller back and controller and say type for exports. Create a user going to have a function of request and response to and guess what? Here we are just going to console log the request body because the body has a great, um functionalities, which means when you talk request, a body is going to go through the register because we are calling the form from the register and is going to look up all the details here. And if we if he see the name result inside the import forms, they will look up the names. For example, the first name is under you will give you the value that entered by the user the last name and so won't let me explain to you because we didn't make the euro included. Way are not going to receive the data. But I will explain to you, for example, this last name, for example, email, passport and click on register. And once we clicked with ripped in the register, you will see that it's refreshing the browser, which means that because we just make the consul log here, we are not. We are just waiting for the data. If you go into temporal, you see, this is all the information. Information are not defined or and define. Why? Because we didn't specify they the body porter or we didn't include the body parts into our app. So what do you do this? Let me go back into our APP and said app dot Let's say, um about sits express Ural included, And this year included is somebody method that contains a objects inside of the objects Want to be extended truth to be true, safe. And I think this abuse not not said so, ab doctor use on because they express got Jason on. This means that if you get the result than a converted into a Jason format, cool Now let's go back. It refreshed our server and let's see the results if you get the results or no cool. So it's for example, type my name and the password and click on register. So once we click register now, we should get the result. As you see, we'll get the results from the server, which is the first name. And the first name is the name that we have created here. First name has a value with Jesus Maya. Less name, this one email, passport. And so now we get the data. I think that we have to do is to creo post this database cool. But the thing that I want to mention is I love working with dates. So whenever you put or at a user, try to add a date format for to him. So let me explain to you what I actually mean by that. So to post the user information into a database you have to create, something called Model on this mall has is going to be or it's a the NBC pattern, which is more of you. Controller. We've already seen the view on the control. Now we are going to work with a model. So the moral is had everything in that has a relationship with the database. So we're going to work with the database from the model. So how to do that just by going into our projects? Then click on the main folder, click on you, fold on type models or month that instead of the model creates a new fire on this fight. Should be, for example, the user. Make sure that the first letter is going to be upper case so you can make the difference between the control and the model. And now let's hit. Enter on. We should see our user control. Okay, cool. Now let's go back to our back end. Control them. And you see, we have created something called Create User on. This creator has a relationship with Theo. The post method off the registration. Right. So now we've collected the data, so we need to pass the data to the model of the model going to save or store our data into our database So how to do that? We have to create a border. Boy. I'm sorry. Boilerplate. Right. So it's something like a blueprint. Sorry, Blue Plate. We are going to create a blueprint. So when you whatever user trying to creates his data is going to be a resemble unusual. For example, I want Teoh sign as a new user. So I'm going to actually go on, type all the information into our into our forms that is going to be redirected and send it into our talent base as a new user. Okay, so let me explain to you how I actually going to do this. Let's create a constant and this constant going to be called usually because it's going to you have to You have to name the variable as the file name. Okay, so do not get in trouble. So functions going to have a anonymous function, and that's it. So make sure, uh, we are if you if you remember in the create User Council or the request body off the page 10. Authentication validations and registration improvement part 1: So we have to pass this request body to our user model so that we can actually oppose the data into our database. So I want to do this on a quick. So let's imagine that we have here a day a sort of data off inside off all function. So this there is going to be inside the user comes or the user. Um, I think this variable it's like, say, the blueprints went, for example, want to do some stuff with the users so we can have a call the user with different names that may explain to you How does this work? So we have actually created this variable, but contains the data, this blueprint, right? So we actually imagine the rest body is going to be this data, right? So we need to make this dog data is equal to day, which means that this means that we are going to work with this and replace it with the user or any other variable una name. So let's save this and let's go back into the back and controller and just remove this and this creates a variable on this variable is going to be o R said, let that, for example, um, user equal than you user stag user on this new user is the boilerplate that we have created . So as you mentioned here that the board of the sort of the blueprint has a dare as a parameter. So we need to actually add the perimeter here to request dot body now we actually, no, I think you understand the way. Now it's work. So request a body here. We have passed this data inside of our user blueprint. So the request body, which means that hit this dot request our body equal the request. Our body. Right. So you will understand this when you start your complete creating this stuff so that's now called the user and this coal from the modelled here we're going to call a function and this function, we are going to create its gold, for example at and that's it. So add user at. So let's go back in. Your user creates the user. First time user dot prototype dot add going to have an anonymous function. And from here we can at our user data into our database. Cool. So the first thing that we need to do it right now is to call our model inside of our back and controlling. So just go and five constant user equal. And while going to require from day model so smooth folder type model, it's left and using, Right? Good. So this that more do not be in trouble to not have any issue with the program. Now we had requested by and once we call the user door add method here. I just need to counsel log what? This data and we're going to have the same result. So doesn't meet Check. Hey, refresh on this. Add so information Regester user is not a constructor. This is an error. I made this error just to show you how to solve the problem. So if you have a face like this problem, which means that you didn't export the user. So let's go back into our user, Dr J. Yes, because we are going to work with the model instead of our back end controller on. We'll call it now. We have to do module dot exports equal to the user because we are going to call the user right now. Let's go back there application and refresh. Continue to stall the data and you should know, See the data cool. We have received the same data, which means that we have passed him through quest all body inside the blueprint, which is the data and the day, which means that hey, council, walk this request our body. Cool. Now let's go back into our website. Enter. Let me check again. For example, let's say John Doe does a gmail dot com 123123123123 For the password register on now we should have the same result. All the user Cool. The next option we need to dio is actually way should send a with this data to the database . But first of all, avoiding all the trouble we need to create, um, on validation for before we put all these information inside off our database, we should actually do a violation for it on the validation, for example, or it is important because, for example, someone want to do some hacking tricks into our website. He can do very easy because we didn't protect our registration form on the acres. Do what they want to dio cool So how to do or how to protect your, um, form validation. We're going to do this. So here, let's remove this here. I'm going to call this dot Validate. And this body is going to be a function on this. Functions were to be above. We're going to make it bob. Users, user doctor, prototype dogs validates cold. Now it's going to get people to a function. And now what we actually going to dio is we're going to evaluate all the data and put it on call the method, for example, with the at, um, method is going to be called from the create user or from the rotter. Then you should run the via date first that the older things cool. So let me explain to you what actually mean by that. So I will give a condition. So let's say if this dot um, data dots were going to access into our first, uh, register form, for example, this the first name, right? Dots, First name, first name. And if you if you don't know how from where I grab this I just copied this from here on basted frightening in this dots. Oh, this is is empty, then we are going to pass an error objects. So we are actual or we're going to pass or pushing error into our error direct. So this creates an error. Say type this doctor errors equal and empty wreck. Now let's go back and type this. I thought errors dot pushed regular into pushing here inside of this first name service. I just want to explain to you how this work. So if they there is an error push, for example, first name feel shouldn't Oh, or they said you must provide first name, so you must provide the first you can write anything you want in the message so safe on this the error this validate is going to take, uh, this area. So this validates So decide if there is an error. If this dogs error dot length, the length means that if there's an error inside of the theory, then give us the air So cause a log this dog earth l just say, goes the log. Just say say hello or everything is fine. Every things is fun. Good. Me. Go No, let's go and check. Refresh. Now let's make the person in empty and do some data register. Let me check out thoughts gmail dot com Register on. You should have an Arab. So there is that says there's an air cold. You must provide the first first name. I just put the first here. Okay. It's not a big deal. Okay, so this'd the first name way actually having their if we fill in, uh, this and click on register, everything is fine. Perfect. No, we understand how to make the error. Have to send the error message. Actually, Teoh avoid all of these things and make them or to avoid people or militias Kouds and your website. So we have to make the validation correctly. So let's go ahead with the validation and create all the things that we need into our website. So you must provide the first name on Let's copy. That's called this code and face it here for the last name. Last name. And that's at another one. That's room in her name. This last name. So, uh, email must provide the email. What about the password? So password on the repeated password. So you must provide password and you must provide Sorry. Repeated password save. Go back very fresh and take a look. Let's make everything empty and see what happens. Must provide the first name, last name, email, password, every piece possible. I type some of these things register again. You should provide the last night that provide the email. Nothing looks fine. Everything goes correctly now. The second option we need to do is to complete the politician because there's a lot of things going on there. So if this data Dr First name don't length way actually in the first name that way they don't want the first name to exceed a such a number. So if the length is bigger than zero and the length well, the first name is, um well, let's say is less than I always say is bigger is bigger than, for example, 40 30 characters. Then this dot errors dogs push What's first name should not exceed 30 characters Save. Go back refresh on the steak look. Grade a long string here register. Go back and see. Everything is fine. I think there is a problem here, or it is less than 30 characters. So let's say string blank. What? I just wanna see home. Many characters do we have? So please this and calculate. We have 54 which means that we have mistaken. So this their first name length should be if it's less than the character. Maybe so. It shouldn't be here bigger than zero. Not a less than zero. It should be bigger than zero unless they're 30. So between zero enters. So let's go back. Just copy this register, please. This, uh, hold the information register on everything. That's fine too. Maybe should have this issue. Um, okay. This is good. A law. I don't actually want to oppose the video because I won't Cute one with me. So let me check what he's or what the thing is happening here. So the length of the first name should be bigger than zero on it. Should be less than 30 characters. Otherwise is not going to always going to be give us a default or falls information, so register must provide email. Password, Password. We still haven't ever. So let's check. Let's see, I think the length here. We have a problem with the length. So, uh, we'll see. And the council log I don't on a council lock chip. They This adult first name. Those first name thoughts. Thanks, but his want to be dead? Because we are going to We worked with the data. Several. Let's go back, register and do this stuff here. Gmail dot com, for example. Register. We have 54 characters. Perfect. Let's make this The length is bigger than 30 on. See what happened right now? We should that Yeah, cool. I just have, um I was confused between the bigger and the less. OK, so as you see, the first time shouldn't exceed the 30 month. I'll see 50 characterised. So it's copy that code MPC again and again for the rest off. They our coat or fields Sort of say that last name here. Last name, too. On a yes. I talked. Last name shouldn't exceed 30 characters. No. Let's, um, go with the email. Actually, the email is going to have the validation. So I will explain to you how to make the politician for Amy. So we need to make this for the password. So we're actually with the password. We should be more than six characters. Otherwise, way he should get in error. And then there I would love to make it 50 for the length. So the passport shouldn't x t exceed. Sorry. So password fastball shouldn't exceed 30 50 characters. And if the user, uh, copy this again, The data in length is and is less six characters is less than six characters, then possible. Should have. Should have more than six characters. Say no. This check. Go back register. Refresh page on this. I want you 3123 I want just take a look. That is a problem. Everything's fine. The password The length off. Um, first name is six. Let's move this. I said I think it is fine. So the length of the password should be greater than zero. And it should also be greater than sex. No, it's less than six because I'm sorry. We actually made the mistake here. We didn't specify the password. This one, we have a problem. So refresh on the steak. Look for occurred then refresh. Continue of these five. Cool. Oh, enter to take a look of the registration 11 in. Sure. Auntie, I thinks find No, we should fix this because we still have the problem with the length of the password. Um, okay. cool this password you exceeds 15 characters on. He should be less than six register. They want to want your feet best wishes to have more than six characters. Cool. We have the results on. Actually, we need to copy this two lines of code and do the same with the repeated password. So repeated password. Is it going to be also the same? The pizza password And he had debated to repeat it. Password. Cool. No, we need to do some validation for our email. Right, So let's do it. But before that, we have to call a new library or a package. This package is going to be called validator. So this clear va or to see less likely and the general inside NDM install validate for under the bed that they should be amount installed by the MPM package installer on. Then we are going to constant or cold is validated. So constant validator father dates were equal to is going to be required, but it's going to require the validation save. No, let's one hour. That's wrong. Our application. No se if, um if valid, if validator that date like that, Yeah, don't is e mail then we need to pass the permitted inside of the function. So or this method this data dot email this is a really email. Then we have to move right? But if way actually we are, we need hit push a narrow That said so. This thought errors don't push e mail North Valley. There is no not found on Dhere. We need to add a exclamation mark because this that mean this. If this this is not an email than push this error else just else is going to be about email that we need to do something with. Or let's say we don't Actually, we need Teoh do. If this is this fellow data, uh, is America then? Um, this data dot first name and guess what This thought Error Stop Push. This is an American because we don't need this to be in America, you know? So we have a syntax error here. Yeah, I forgot to add this more so First name. She should not have numbers. The same thing with the older field. So validator is in America for the last name. We don't need a last name and first name to to have numbers you know? So last name. Let's make it this. Let me make this a little bigger. So let's go back. Refresh. You see, this is a development. You actually, every time you make changes, you have to look up at the changes and see very something wrong with you. Smart. It's my ill, for example. Like this one under, say, for example, Ask on register. Now let's see. So password should have more than six characters and the email is not valid. Why? Because the email as you see here way didn't make Internet about. If we don't dot com, then it will be at that. I think the second thing, as we still have a problem with is America, Which means idea? Misspell is numeric. Let me take a look, Father date or check. Okay. Validator in PM I just wanna see if there is. And if it is in America, not if it's not out far, there's going to be in America. I think maybe he's American. Yeah, I was going to take a string and sort of options. Sarah is go back, amedi it correctly. So this is the string. If the validator is in America. Oh, If this is does this has numbers? If this has members then should have shouldn't have members on the same thing with the, uh, the olders. Otherwise, let me say, if it's not al far, then I mean exclamation marks. This not far. Then we'll have a lot of cool things. So let's go back way. Haven't error. Right. So this is it on. This is it for the American empty register. So you must provide an email. Must provide password repeats, possibly is valid for snapshot and tap and numbers. Called this very, very, um, or things become fun. Right? So let's copy this and call it for the user to now. We should have our validation works perfectly. The last thing we should do, you should do. Maybe if we forgot something, we can We will add it, um, in the future. So we have fixed the length we have fixed the email. The password yet we have eye over things. Suppose, um, the user injured here a password and hear a different password. And in our database, we should have or should register the password. Or we should see the password with same. Which means that this password is going to be the same with this password. So how to do this in a quick? We need to added condition. So if this thought passport data don't password is not equal. Really? This data toe repeated password then if this is so this errors push password, no match. 11. Authentication validations and registration improvement part 2: let me check, Say, Go back with fresh and to say type, correct, think. And here I'm going to side a different password register and we haven't ever right Password don't match. So what if we just make the same password? I mean, check register. Everything's fine. Perfect. No, just let's let me explain to you sort of things right. So imagine when a user right his password here and here. And was he on we? Actually, we don't want to oppose the password like that because one for example, someone hack your web app or your website. Then you will be in trouble because he will get the password too much easy or easier than you think. For example, let's log the data hand So this don't dare save Go back and thats click register. And this, for example, at this stuff registered account. And if we go to the council, then we should you should see the information or the password. The password like corrupted, you know. So this went weren't a year. A hacker, for example, took their or having X to the database. Then he can read the password easily. 123123 and he can log in on do the things that he wanted it with your website. So what to do? We have to crypt this. And fortunately, there is a package called by crypt and his my crypt. You can't find it in the in PM This white groups want Teoh. Let's say crypt your password. Very cool. In a good way. So by crypts? Yes, I think, Yeah, by crib Gs. So that's what Yeah, this is the bike ridges. So the users, we need to install it first. So let's just do a copy and go back into our terminal Kamat, See? Let me explain to you Yes. See, Ellis on pays. I want to say npm install by crypt. I don't actually know. It's sculpting the name pasted that enter now we should install the bike. Ripped. Yes, I'm having fun when a programming, Because when you discover a new thing, then it will be fun. So just go on Constant on, say forms and all this. Just take this variable copy on, go back and place it here. Who is going to be inside the constant with this valuable So no, we have to see me check. You have to see, uh, we have to know how the past was going to be stored into our database so hard to do this, we need to generate a sold. So let me explain to you, so we need to create Let's take these two lines of code on. Let me explain, Teoh, what happens? So if there is no error than the password should be secret encrypted. There's an error. Then show me here. Okay, so we created a variable. So we are working with us six version. So we should have replaced the board with the left. So let's salt. We create available consult. It's going to generate a sold Sync by 10 on. Then this is the level off the encryption and we create. We have to create another, um, variable as what? Where we are going to combine the normal password with hash password. I'm explained to you how this works. So in here, we need to pass this data password, right? And we need to do the same thing with the repeated password. We are going to do the same thing with the, um with our variable. So this is the bike ripped let me cop caught this on. I will oppose this again into here into the constant looking. I want Teoh. See the passport. So this data password on I won't leave a message here. So this is the old password. Save and go back. Run our several new team on. Maybe let's go back into our server fresh. And that's for example. Take a look here register so password don't match. Yeah, yeah, yeah, yeah, for sure. I forgot to mention the password, so let's register. So this is the old password we have 12312313 And this is the password that was going to be stored in our database, which is encrypted, which is something awesome, you know, Now we level up the security to the high level off the encryption. Cool. No, let's complete the work. So we have to come, Teoh, Encrypt. I hope you understand the way that I've encrypted the password. So I'm going to now do some stuff on Put the data inside our database. So first of all, you need to create a collection, right? So the collection we need to create we are going to name it, so it's creating a new viable first. So call sense as going to be the user. Well, let's say adsmi collection. I prefer using users just complete with the user use. A collection is going to be equal, and it's going to require Let me check here says what you require require what is going to require DB Fire and then point type DB. And this function is going to call the Dell Abate's that called portfolio in our Robotti three or three. T story. If we go into our robot treaty, we can see the pope for you. Database. So this is what it's going to be called because if you remember, when we go to the database, we have mentioned way are exporting the database from by adding the model of exports. Cool. Now let's go back work and that's do this thing dot collection on the collection is going to be called its name it. What do you think? That's name it. Users see. No, we can't add this into our database. How do you want to add this into your Della? Based on a quick first of all, we need to create the specific fields that we need to enter into our dollar based this were actually or this is very important, you know? So we have to specify the field. So how to specify them? Simply. You just need to this data with me, we are going to override the object or the valuable objects. So let's go up into the terminal to take the example. So this is the example. Right on this. I will copy this. All based it. Here. So we have the first name that the first name is going to be. Let's remove all the informations. I just want to explain to you what we need to do. So the first name should be. What? Yeah, this data first name. So the first Navy is going to be is mild so that these mines going to be located into our database. So with last name, say, this data for last name, the email, this data email and for the password is going to be this data passport, right? No, we are not going to restore the simple pass. We're going to store the encrypted one. So we have created a sold before, right? Have you remember that if you don't remember. Let's go back into the biker objects in the MPM. Copy the code and paste it above this data. So we need just this, Curtis. Really just this code and it's removed the older thing. So let's sold people to the bike ripped and let's make it sink with the temple of the level time. OK, then the password is going to be by crept hash sink as going to really win here to pass this data. Don't password. We're going to pass the encrypted version of the password. This copy this on bases here, he is willing to be the repeated password. Um and so know everything looks cool or great way Haven't issue, I think here expected. Yeah, we did. With two clues. Cold. So this is it. This is the data? No, we can at the date that I've talked to you before about the day. So when for example really, really register users? So we have to post the data into our database. How degree of the date we have to google. Everything you don't know you have to go with about I already know this, but I want to show you how to Google it and implemented into your into your coat. So let's go to the google dot com. And that's right, um, used dates with its press. Yeah, or it's called a time Stamps, I think. Yeah. I mean, let's write this again on the same fine time stamps. I'll say fix press. Yes. How? Sent dump stamps in exposure es, um listen, stuck over, though. Is the friend off any development in the world? So make sure that you took three examples from the stock over Flip. Let's go and see what the people here helping are helping. So you need to use the date. Don't now, and you put some sort of data, but I want what I actually want to dio is I want to save this. As for, um, it's a year month, um, day on a date, of course. So let's see how this Well, let's see if there is a result on how you can actually create your your date. So this click. So get the month day, year by daytime in javascript. So days get month dick day. So one. So this is it. So we have to create a variable, right and no Let's let me explain to you what I'm actually what I need to do. So let's go back and your for file on this. Create a global variable at the top. Let's dates equal you dates this the first thing you have to do. Then let's darkly on the beneath this data object. That's consul. Log dates get days. Seriously, we're good time. Get month, get lost. Things get month safe. Go back. Refresh. So when we stole the data, we should get the date, for example. I just need to check for a week of the date. Yeah, We put this in the successful one cold. I will put it there underneath the herbs because I just wanna see the date. That's it. So the month is too, You see, for example, check without let's see with those, uh, closing. Well, we got Yeah, it's a function. So too. Let me see. We have dates, for example. Get seconds. Say get the full years. Four years or go back. Refresh. Contain e o. We have 2020 cold. No, we have trained, right? So let's at the space on at the date. Don't. I'm sorry. State as for example, will get the month save Refresh, Continue the month Is it to right on we all I think in Marsh. Maybe. Yeah, I'm are. So I don't know the month if it's wrong or not. Okay, so I will, uh We will see the month is here, so let me show you. I'll give you the full dates so hard to get the dates. Month, day, I'll show you the full Yes. So gets UTC month plus one. So the monster do in the month. You have to put plus one in it cold. You need to make make it like that to make it work. Let me check. Yeah. No, we have 21. There's a issue in there When we want to put this. Let me check this again. Or you know what? It's copy these variables and paste them together outside. So that way, that's let the part of the program understand where we actually what's going on. So let's save on. Let's copy this last one. So all name it, uh, dates that's removed. We call on Let's days equal this one. Save. We shouldn't have results. You haven't error did. Object is large. If I Okay, so date save. Go back. Refresh. Continue. Uh, we should know, See or did formatted correctly. Perfect. No, let's go back. And what We will add the get month seconds on You want, you know, love, um, things. So this is the format you can add the format you can Look, there's a lot of information inside of, uh, the get the stock overflow. So I want to make all of these things inside. Just one off. Uh, just one off. Um, variable. So on. Copy the I put peace to their copy the day. Um, yeah, I made a mistake. Me. So the full year. So the full year, it's going to be here the month No one should be here and the day I want to be here. Now, let's remove this three save. Go back. You have to test this loft time when you when you start coding cool, have the same result. But with the main issue is we still have a problem with 21 because it doesn't add the one to the date. Um, this is, um, cool. I like the way guys old. I like the way that we work with this Now we have to work on our own, and we have to get the full full dates on store it into our this data objects. Um, I prepared for you the code in interested Yuko. So all you have to do it. Just look at it. So let's, uh, let me show you the code so will create a new father. Don't create your or you can don't create this fire with me. Just for a long here. That's paste. So this is the code off the date. So we need to grab the date for the four year full year than we were separate with minus this for most of the day. And to make this get month plus one, we need to make it inside off to, um, to parentheses. And also, we have get dates, get hours, get minutes and get seconds. You can. You can copy this code on base it right into that. This data. So it's at a common hair and it's type o. R type with me. Created that and this link and updated. That's I'm taste this link to all right. No, we have created the days. Your server. So what? It's closed the file that we have created from the JavaScript. Um, it asked you should ask, Don't safe. Cool. So let's go back, user. J s on. It's complete the work. So we have created or we have, um that's it raised or fourth data inside. Oh, this data were updated all the information so that the user cannot inter other, um, fields dive, for example for the hacker or any s one else Cold. So this is the data. So we need to insert this day. I say, inside off our collection. That's cold users. So we ordered to created a variable court user collection. So we have to just go ahead underneath this data. We're going to call use a collection thought inserts one concert one and it's going to be inserted. This there were going to be to insert this data. The only thing here we need to do is we are going to add the a think wait function, Gillette, or to get the real results or instructed results. All right, So if you don't know the the weight or a sink, you can check out my YouTube channel. Let me show you the by YouTube channel and I will upload to you on explanation about the A sink weight and how to work with the racing weight on catch, resolve and reject. We're going to work with all of these. If you don't want to watch in my channel, you can just go ahead and complete the course and you will have understanding or the basic understanding off what's going on. What is going to be with the casing and waits function. So this is the Might Channel. You can take a look. It's called It's motive Js Let me show you. This is the logo. So this is the smarter GS. You can go ahead subscribe if you want. Um, I'm going to pose a lot love tutorials about JavaScript. No GS react on the lot off other things. So see you guys, um, you can go ahead and just it's just it's knew this channel on. You can go and watch the videos. All right, so let's go back to our, uh, ab some here this side or let's say wait and let's go to the top and should be inside of a function that waits on the function. Is this one right? But let me explain to you, while actually going to do so first. Let's, um let's grew up along these things from this to here and do it cuts, cut it from your clipper and then type with me Return. I'm going to return. New promise on this problem is going to take resolve resolved and reject, right? It doesn't need to do this one. So this is the resolve and this is going to be always were to return a function. Sorry, sir is going to take an anonymous function. Let me show you. I just made that mistake. I will return to the coat so I will have caught this to the my clipboard and type return you promised on. This problem is going to take a 90 miss functions that contains two parameters. The 1st 1 is called result at the signal is going to be reject then make this URL function and paste the code that we have. Really? Then here it's up a think every time you put the await you should at a think with it. It doesn't work without the racing. Okay, cool. So what does the real result and rejects? Dio is going to send I a Rick. Well, my response to our create user I will explain to you what this means. So if there is an error, which means that we haven't right and actually write what I want to dio is I want to explain to you how I can send this error to the front on page. So it's instead off making the council log the side, reject this error, which means that we are going to receive the catcher blawg from this errors. Otherwise, we're going Teoh, insert the data. So once it's inserted, we need we cannot resolve, which means everything is done and we have set up or we have entered Insert our data. Cool numbers go back into or back end controller and inside of the create user way have we have created a blueprint off the user and that the user called a function called at right. This is a function and now the function has two parameters. It has a resolve and reject. So what's I'm gonna do? We gonna do dots that then, So if it's resolved, event is going to have an anonymous function and this function is going to return, um or is going to set rest. Redirect Means is going to be redirected into into a page that we specify to it. Redirect Direk Direct is going to be redirected into law game. I'm going. I wanna read I to this you Earl into a walk. And otherwise, if there is an error So we are going to catch this error and put it inside of anonymous function and I will name instead of naming this X on them at this Arab. So if we have an error, then rest. Um, send are going to send this result often error as a page. Let me explain to you what I'm actually I'm going to do. So let's go back and enter into our browser and run our admin slash register on. No, it's fill in a correct information. So it's type this field, and once we create type register now, we should react to log in. We actually we did mistake here because we didn't call the admin because Logan is in the admin area. So once it's log Dan that is going to be redirected into the admin slash law again. Yes. So if we go back in our robo three t on right click on the My Collection on. Now we should see a new collection appeared. So just click on Refresh and the collection here is going to be refreshed. And we have created our very first collection called Uses, that contains all the information that we have inserted from the fullness of first name. Last name email password had repeated passport. Right? So this is the first object. Let's open it and it's generate a random i D o r I don t fire for us this user and we have a first name the last name the email of the password, which is encrypted in by crypt on the repeated password. And also we have the dates, which is the other three over the 14 more 2020 which is cool. So this is it. We have created our first use of successfully. Now let me take you back to register and there is something wrong. For example, let me type, for example, without I just say, like that password not match and register. Now we should have see an era called password should have more than six characters. Email Not valid password north much if we go back into our, um, mongo db on checking these new collection added received these no collection, which means that the catch block is stopped. Um, the or the catch way are in the catch on. And, um, the resolve when we were in its resolve than the day I was inserted this all about rejecting We are pushing this errors directly into this function, and we're going to recent or send this error and to to the application. Um, in the future, I will teach you how to change. It's a beautiful message to the client. So when he made the mistake, then he can he can see that he made a mistake. So we have done this. We have created our registration page. No, we have to create our walking page on make it struck correctly. Then when, for example, the user logged in, uh, what when he registered successfully than with his credential. He put his email and password on once hill Logan. He should be redirected into the admin, and we are going to make a middleware for the admin. So the any user, or any user if he if he want to accidentally, to the admin will not be able to act to this army until he created or until he into the correct is an email and password. So this is it for today. See you guys in the next episode. 12. Authentication Login: hello again would come to this new episode. Well, today's episode we're going to create a logging system for our app. All right, so, uh, look, system will work very simply, just But we're going to retrieve the data from databases that we have resisted before from the registration page. Then, uh, check if the, um the words or it said feels that the user, right in the log in page all the same with the data from the database. Then he can log then or he can look into the admin area. Otherwise he will not be able to look well. We will get some errors. So let's get to it. I just do, um, this festival, let's go to the views in front end and look on for the back end. I look for the log in dot e g s. Then let's go down and take a look at the field. So these all the fields way have here the form. So it's not the form of action on this. Actions were to be equal to the slash admin slash law again, because this is going to be the method post. It's a method first. Good call No, we have the first input, which is the email. So we need to add a name with full email. And we have I feel, with a password to his type passport. Then save. I will work with this their own with their Remember me This this going to work with the session. But I prefer to use it. Don't use it at this moment. Old elite, this one and we need here Finally said what one? So when he click, it will see oil um, rigid. We're going to do the data so the type is going to be submit and this close both in here and we have had logging. Let's remove also Logan with Google and Facebook on his to save this. You're always going to be the hash. Andi is willing to be redacted to read the admin flash register cold out. Let's go run our absolute lawn db on this week for our service or one Cole notice. Go back and refresh. We have a problem, maybe. No, I don't know why it's come on being launched. Way still. Yeah, we didn't get the message connected right now we can access to the website. Cool All right, then let's do slash Admin slash Well again. And you should have no log in. I had the problem here. I've already We have already fixed that. That I think in the previous listen, So I will fix it right now. So this is it. The vendor CSS and other stuff like the JavaScript defender source. They've go back. Refresh. Now we should see our page works or function correctly. So these are the field that we need to retrieve. But first of all, we need t understand. Or to get the data that we've or the user going to import here. So let's go back into our views to your coat. And then let's create a rotter underneath the log in type rotor. Those slash admin slash Logan, and then we're going to call a controller. On this control will be, uh, retrieve Ridge. You have you save Copy this and let's go to the back and control needs off the bottom. And before Yeah, the Barnes exports thoughts reach ive user, Do you have a function progress and responds and we're just going for a walk. What's request our body? Because we're going or we won't want to see the result So refreshing. The same, for example, time like, for example, this email. 123123 Click Log in. No should see the results Cool. We have the email and we have the password. Awesome. So the second thing we need to dio is we have to work with the model as we did with the register. Separates. Create a new user. So I will live with that user equal new user as wound to award me to send the report off body to this new book blueprint. Right? So the user doing to say Rich Reeve on that step for the moment, So retrieved. Then let's go back into the model user and it's open up the user. Cool. Let's go down and type User thought it all the time. I thought treated equal functions And then inside of this function, we need to retrieve the data that we get. Right. So this first called for a walk this to make sure that the data is working correctly. So refresh. Continue. Then we should see the same result. Cool. No, we understand that we have a day or so. We need to retreat the day right? So going it not we need to return. And you promise this problem is going to contain on a sink function that's going to take the result and reject as two parameters. And then inside of this, we are going to work. Cool. It's no go ahead and work with debit or contacted database. So the weight use it collection adults. And there is a method called Find one on inside of this. Find one. We're going to, um, look up at the database and see if the result is that same. When you talk, find one is going to take just the first, the first objects. And inside of the users, we have just one object. So just keep doing this. So we have the first name last name. I want to check the passport. And the aim is those two things we need to retreat from the database. So find one, and I will insert this entire a variable in this very was going to be called, um no get user user. Cool. Let's consul log get users. Why? Because we need to see if there is a data instead of our data. So Let's take a look on the browser so fresh on. Just submit with empty data. Okay. Just submitted to see the result. So we got the result off the database for from the television of the email on the past world, those two things that we need to do more to work with and to access to a specific object. You have to just write the name a phone by the point, for example, lots email and save. Go and refresh. And then really, just deep the data that has all the volume of this e mail. Okay, so this is it long That's complete work. So we are inside off our model, right? So we have to know you have to do some work. So let's get or just say, at a condition to compare between the request dot body and the day that we are going to retrieve from the database. So if this thought data thought email is the same as what? Yeah, get user dots female. Then if this is true, then Consul log True, right? Se true. Els cause log fools, right? Okay, not it's safe. Go back, refresh. Continue and we'll get the results force. Why? Because there is a worthy email inserted there is, or there is no limit inserted this while we get fourth. But if we, for example, tried to add this image this right, a male log in, then you should sigh, or you should have a result off. Quote. This is the first step that we need to dio now, and the second thing we need to do is actually we need to retrieve the data also for the password, not only the email. So there's two options here if you want to. For example, if you want to, uh, send an error for, for example, the email, just the email, you can just go ahead here. If it's true, then leave it as it is. Check the password, and if it's false that you can hear send an error of the email. But in my case, I wanna give uh, said error for the both of them. So I hope to do that. And simply here we object. If the condition is true, that post truth else puce falls. No, I need to check for the password. So is set, and this don't data password also is equal to get user password. If this true then is a district. But remember, I will create the same path word. And so you want to give us a false not atrial. I will explain to you why So let's go back and refresh on that side The same password with the same user. Hello again. And now I should say force why? If you remember, we have encrypted or password by using the by friends. And the server here is comparing the strength password with the encrypted password, which is not the same. For example, here we have in our database, we have this password, right? But this password is encrypted. So the program is going to compare 123123 password as a string with this, a long password, which is not the same. So how to fix this is by doing a new command command line off the big bike ripped. So let's go back into the Google and look up the bike writ. Still be crypt npm gs dot com slash package slash b crypt gs. Then let's go back and look and find for it can cap because we are going to compare to off to all of the the volunteers. So this is the byproduct sink. This is they way are looking for. So by cramped dot compare sink we're going to compare. The first volume is going to be the simple password, which is this data password. All right, I'm going to split this with a comma and then the hash password or password hash. In our case, it's scared into the therapist. Get user dog password save on LA We should have Sam password. Cool. Now let's go back. Do it again and see our password. I will make this passport. So this is force password because I made a wrong password. You see this ad this log in and password along is true. Which means that we can or we are able now to log in with this password. So what? The next thing we should dio simply here, If it's true, that resolved and if it's falls reject and safe Now let's go back into our back and controller and inside of here. If its result. If it's true, then we're going to do that, then function so that inside of this thing is going to be an empty function. Andi, From from here, we're going to redirect the user to the admin area or admin dashboard else or catch going to rest. Redirect the same user. True admin Log in notice. Hit Save on, Let's go back, refresh and type the result. That's true law again, we should be revived into our SP admin area. Otherwise, if we go back, refresh and type, for example. Wrong password on the wrong email, for example, Law again. Then we should be retired to the same page. Cool. Um, no. This is how you can actually who's your data and compare and do some stuff with security, right? I think we need a dimension. Is we're going to send some messages or error messages once we do A wants me creates our session. So in the next episode, I will teach you how to create the session and the cookies inside off your application, so t understand to compare between each user's or all of this stuff. Then we are going to, um, make or send the errors because the errors is going to work with sessions. Okay, So see you guys in the next episode 13. Cookies and sessions: to access or to make the user the ability or to give him the period stay. I'll Morgan in his application or his website. So we have to do something to make something called the cookies on this cookies is going to be inside a session all right, soon. I'm not going to expend all these stuff. If you don't understand the cookies, house, work, how the sessions work, you can just google it and you will find information. So in this palace and we're going toe work with the session with cookies. Cool. So, as you mentioned, for example, if we actually or with a user here, type or low again and it wants he click on log in, then it will be redirected if we stopped our application from working or we restart our application that he should log in before he access to the admin dashboard on this, what we don't need at all, we need to give him a period so that he on we're still his information side off the session . So what went here, for example, or when you stop the application restart again, you need to log in with user and password, just going through the Admit Desk port and complete his working series. Go back into our code and this Open up the app dot Trieste already, um, greet a boehlje polar play for you guys. So we just go ahead and copy and paste discuss. So listen. So we're going to call these three variables and the first variables called session that is going to require the express session on this one. We are going to start right now that it's caught this on the stop or rabbits from running clear. And then top 10 p.m. install and paste Express session. Andi, make space. We're going to install the cookie parcel. This group Parsons has the ability to work with the cookies. Um, no. On friendly. We have connect mongo on this connect mongo eyes going, Teoh, or it's going to give us the ability to store the sessions and the cookies inside of our Mongo DB database. So we have you just one collection. And when we start working with the sessions, then you'll see another collection appeared called sessions. Cool. So this is it. We need to connect more go on its own stall, then way store. We called from the Mongol store connect mongo recession, which is this one. Right? Then we're going to create a variable called I've Called Assessment Options than inside of this session. Options to create a new session object, and we are go and we type secret. So the country's secret for anything you want. I mean, let me try this. For example. Jobless good from scratch. Immediate jobless case job script called. Now we have to add another object or another the data called store. And this story is going to take the mongo db as it would just require the database, which is portfolio. And then it's going to be a pool or was going to post it inside the client that the recent move to be false. You don't need to remember all of this stuff, for example, for the same pension initialized, for example, the next age, all of the stuff. I grab them from the documentation off the sessions. So session cookies express Yes. And you can get or you can see the documentation and get all the information about how to set up these with the explosion. Yes. So, for example, we have express she s so express cookie session as a middleware. So, as you see here, abuse group sessions they renamed the unvarying variables on all the stuff he As you see, we made the same. I just work around with the coat. So then you actually need Teoh do ab use session options and abused the cookie Parson. Actually, this code or this thing you're going to learn mawr, or you're going to work with the app a lot so you can make this as a boiler plates, plates of when, for example, you want to create another project. You've just copied these things. I have pissed right there. You can do some little changes inside of your coat called. So it's complete our work website up correctly. Our session cookies call Now this thing that we need as when the user register or when the user has successfully registered inside of, um, log in, let me give you him. Let's go. We're slash Agnes list will again when he successfully looked. And then, in that case, we're going to create a new session. So and they need the user retrieve type with me. This is a request session dot whenever everything wannabe want Teoh user equal to, um it's what? Here we are going to call request session use and we are going to pace the data that we need. For example, it's a objects first, so we are going to top the things that we need hit. So the first thing is the user name say e mail to use email is going is going to be, um, request. Or if we remember, we have created this as a porter place. If we go back into the law user model here, we should see on go to the retreat. We should see that we have created, um this on This is this data. So we are going to call this instead of this. We are going to replace it with the user data. Okay, so let me even examples Here we have created a variable called user rights that we are going to type and user dot data because you are going to access directly to the day. You see, we have called the retrieve inside of the user model on this is the retrieve right? Called, But we were in the in that case, we don't want to accidentally to retrieve. Instead, we're going to have access to the data so we can just replace the this with the data or with the users are so user data don't email comma and we need all say just this one out. Let's give it some of property. So, for example, um, favorite color is going to be example read as an example just to show you how. Session work. Cold number. It's a, uh stopped the server clear and we're on it again. Then let's go back into our browser and here refresh Cool. No, let's complete all its Sinan hit law again. And now we have logged and successfully, but nothing happened. Right? Called notice. Go back into our model bdb or robo three tea and go to the port for your collection on Then refresh, and then you can see that it's a new table or new collection. Cold sessions appear. If we view the documents off now, we can see the result off the session that we have created. Right, so right click on this object and click on view the document. So we have inserted the document is, as you see, we have inserted the emails on Gmail is Zeki this one right at G Manta come this image that we have said and this is the favorite color. Go what the benefits off working with sessions. For example, if I want to change this name off the user here, so no need to achieve this from the database and do all the those stuff by simply going into, um, the let's say, Where is that? The log in the index in the back? And then let's look up for the name. So Valerie's Luna so fine. Luna. So this is the name. I want to change this to the user. May right, Cool. So on any type or say user e mail. And there's going to be equal to print out the user email. So remember we talked user email you, and then we have to mention what this use a main means. So let's go back to the back edge controller on inside of the back control. We're going to be redirected to the admin, right? But instead of productive directly here, we need to let's copy this or let's no, um, side request session. Don't say, because we're going to save this session on this session is going to take anonymous function on now we can say redirects to the rocker that we need to the path that we need somebody to stay at cold number. That's close. That the application running again Because sometimes you get an errors or you didn't see the result when you just restart definitely the court. So we have no registered survey. The user we need to go into the router that has slash and the renter that render this page . So let's go up. So this is it. This is the index that rendered the admin for Go back to the Roger and say slash. Admit that it has a relation with the back and controlled index method does go back into the index, and here inside of the restaurant beckons slash index, do a coma open through the likes, like objects. Then go back to the E. G s. Copy the name that you actually, uh, rent. Then go back and paste it here and specify What is this? A request session User e mail Safe and not if we go back and take a look. Refresh. We should see the email instead off a user name Court. So this is it. This is how you can all this, the Google, all the good benefits off the session's. Remember, don't use the path word. Because if you use the password with the session or if you stole the past would decide the session. Then you will get in trouble on hay acres can access to your information easily. Cool. So now we have understand how to work with the cookies. We understand how to implement them on right now for sure. We are going to send some errors inside off our admin registered page and the admin log in page separate them. When we did a mistake here, we shouldn't see this error. I mean, let me show you presidency and this error off the J saw or this weapon instead, we should see it inside off the page with the arrow. So let me explain to you this in the next episode 14. Send errors to user interface: if you remember, we have a couple, um, stuff there went, for example, when we write some stuff here and we click on register Way Gone errors, for example, where you must provide the password and you must provide the repeated password, right? But actually, I want to show this error of to the user. When we click on the register, I want him to see the areas inside of or above here, or just like pop up there. Let's go into our, uh, add me and templates and look up for things like for the pop up. It is possible, Um, if it's possible. Sorry. So it's open it here and let's check. Otherwise we're going to work with the alleged. Okay, so just go to the components we have fragilities. Let's click on the animation we have here just dropped down. That's it. On others on. We have no hints there. Okay, let's take a look off the components. It's limited or this one's the minute. Okay, there's nothing here about this. Okay, let's say here's problem. So this work with the alert. But first of all, we need Teoh install a new package called Flash Teoh Flash or connect flesh last. Yeah, This one. This package. So it's called Connect Flash Motors. Go back to our code just to coat. Onda stalled this package. I mean, if you so just copy this basically into a terminal inter than the pack should be installed . So the use of this request Plus we have to configure a session with the cookie parcel. We've already done that. So we are not going to use this now. We should introduce you, or we should create error. So we have to create a request off flash as you give it a name as a variable and then the other that you want to display on l. And then you have to require retired to this specific values and to call this error, he had just need to specify the guest All flash, which with its variable so cool, let's not go back into our registration for and let's take a look, cool weapons told the because flash Now to say, new Dimon db enter on. Then we have to get into the registration form inside of the back end and click on register template and then me closer to do them. You see the coat properly. So these is our Tom plays right way are going to work with later on with me, we push the error inside of it. So let's go into um, let's go into the user and something. Usually we have a couple of errors here. So we've said in the president I add which which has the relation with the post registration so that there is an error reject this ever else result. So we already pass pass and the errors inside of the reject, which means that when we go into the back end, we should see the error go. Now let's implement this with an error. So we have the create user, this great user. If it's true, that is going to be redirected into the admin. Otherwise, if there's an error that there is going to be catched so it is instead off rest sent this error. We are going to change this with request. Don't flash on. We're going to give it in. For example, I will give a name off registration wreck error as an example and comma on this in the second, I feel we should give the errors of the area is going to be first is called errors because we're going to put all the arrows inside of the registration form. Right. So this is the ares. Then we have to request we do the request. Thought session Don't save as usual, because what are you working with The flash? Okay, so this session, save and rest, redirect and what's predict to admin. Lost slash, story, register, register. Cool. Safe. Now, if we go up a little bit, we can't see the export register. That's going to be that's going to render the registration so well, when we got the error that we will be redacted to the register on the register is going to be a rendered. So we need to pass hand the parameters. So just say, for example, errors. And there is going to have the request flash on the name off the air of the were passing safe? No. The last thing we should do is to show this error to the client. So let's type or let's go ahead with errors. You have to copy this or remember this that is going to the register. I want, for example, to push the error underneath they create an account. So let's go and look for decreasing the count, which is this one underneath this I'm going to create and you death on this day is going to have a class off alerts and alert. I've given a color off danger. This is just color and inside of the depth I'm going to pass in. Let's say, for example, what about a paragraph? And the paragraph is going to be the air so equal? There's saved, Go back hit refresh and that's we have a problem called request Flash is not a function called Let's see, Where is the error? Yeah, this is there. This is not a function because we should or to implement this, we have to work with the four Each serve errors because we have a law. There's there's dogs for each for each error. As as an error that show me the results. That's closed. Tag on inside of there. I will say equal to this area safe. Go back fresh. There's a problem. Let me check where What is it when you go back to the app? I think, Yeah, we didn't import flash. So Coulson's blast equal to acquire is going to require the connect flesh. This the first thing we should do that I think we have to use it. So let's go back to the function. Are the documentation Yeah, we need We should use the app used flash inside the conflagration off the app. So that configure function doing to have a cookie part, sir, And the name so up used Flash Let me check this that up Thought used left save Go back to the errors. Refresh on way should not see the results So we have no air here this while we regard this empty thing. So let's go back and fix this. Let's go back to the register form And here we thought way say thats the power of this Why shown I think saved Let's go or sorry, this is going to be inside four beach lots outside. This is the air. Let me show you here. Let's go back, refresh on it's gone notice type things wrong and register. And as you see we have got now that the clean on beautiful area code, which is Patrick should contain more than six characters, repeated password should contain more than six characters in his Levada password. Do not match Cool. So I just want to go back into the errors. There is a post in the user on Dhere. Repeated password. Just remove this make space Court. So all the things he is going to be at coal, So let's go back. Refresh. For example, if I registered as a new user, for example, say John does, for example, Joan. It's a John at Gmail com and the password registered as a new user. Now we should be Logjam. Notice me, just log in and we should have a problem. Maybe with this problem, it OK, I will check. I'll go back and see if the user Yeah, we have on you registered you user of the men and the password. Cool. I think it looks great. Evidence is perfect. We have created this users, so because it doesn't give us the ability to war game because we're four d log with the same problem with the user. So it's not going to let us do this stuff Then we need with a with a this person with this user. So to make the drawn, for example, log and you have to destroy the cookie, then looking into with another, I think from a walk outside I will show you how to do this. Well, um, this is it for for how to send the Earth's off for the registration page and not ultra have to send the errors into Logan that would create the law. Girls cold. So does go back into walking area, and that's to do with same with the air. So I'll just copy. So be it. I'm based adopting to log in, and I want to be above the welcome back or underneath it. Save on Let's go back into the user. A model on Let's check. If we did the errors, we didn't did the errors for the this for the logging. So let's do the errors for logging so that we can actually do the stuff with their. So that's great user growth time. Dogs clean up, for example, has clean up function, and we'll do some stuff with them. I just go ahead and copy some of stuff. We're going to work with the email. Copy this email Good basted here. Um, the password with peace password, too. I'll be a here called donde I don't want to recreate that. Killed. So the password, pizza, password, All these stuff. So I say that. What about the email volley data? Let's say I think cool. Yeah, that's it. And then we have to specify, um, the data. Right. So let's go here, and you need that inside. This data is equal email, e mail and password. You want to be this, uh, dog past this? Just overwrite the data on Don't let the user to do some malicious things. Call. So this is it we have done with this. Now we have to send this errors inside of here. So let me check this. If there is. If there's an error than going to reject, the error else is going to give us the results. So this copy this. It's got this The meat. Uh, yeah. I just got this one time. The condition. If this there's length, there's an error. Then reject this errors. Cool. Els. I don't believe that. Just based on paste the code. Now, let's go back at the admin here. So first we need to destroy so that we can log in again. So let's go back into our Roger and it's created this as a water. So robbed her dogs, kids admin Oh, I think I should make it post because we don't need to get the log out otherwise can't pushed. Loga chose this spot a problem when he collect, for example, that we can make this as a form. So let's work with closed. Who's add me? It's last logo and he's going to be inside with back and controller on a log out. Let's go back to the backhand Down Exports don't look out. It's going to have a function as usual. And this is a postman to not be fears. We're going to say something. If the bond is close, then read a request session. What? This boy and then requests session se. I want to call the function sorry function, and the function is going to be arrest redirects. We're going to be redirected into logging se. Now let's go back into our dashboard index on inside of the index. We have to mention the coat. So index on find log off one, this one. So just make this point inside of form. Just just cut this inside for fully formed and something this fall is going to be most on a trip for a bond. It's good to tag. And then let's see if that is an area. For example, we don't need the hatred, the terms of the model we'll see going. This'd is going to be working. Admin slash More gout on the method is method. It's going to be those save Let's go back, do the refresh. Let's see if we go way can be retired. Logged out on the same is off undefined because we have logged out so many you don't need the safe for the procession. So let's remove the session here. If it's destroyed, then relax me. So let's go back. I mean, as you see, there's a tough they can read the property mitt because we've already linked the user with the email so we can not access to the admin area. But if we type for example law again, we should see the air. So that is something wrong. Case of errors is not defined. Cool. We have a problem. Um, this is a cool thing, because a lot of working with these stuff I don't want to stop the video. And two just the rial or just that this the programming works correctly. I want to show me the errors and told to solve them by yourself. So here is called. It says that errors. But this one is not defined. No, let's go back and see what's what's happening. So it's Go on, take a look for Googling that we have a request session request especially destroyed. Let's take a look. How did this have to destroy this session? So let's go to our friends stack overflow dot com As you see, we've done the correcting. But inside of the destroy, we should pass in the function cold. No, I have understand. So inside of this, we have to pass him. What? I functioned, right? So function on his function is going to be was going to retire to walking system saved. Let's open up terminal Close this seminal. Yes, they re writing gone mentor. Then let's go back the law again. We still have the air off or the errors is not defined. So this go back into the register I inside the register here we have the errors. These errors, right? Copy it. Go back to the back end. I'm sorry we are going way. Didn't mention the errors inside of the war games. We have to go up instead of the log in and your coma here and specified the air's because we wanted to make the arrows inside of the log in. If you remember that, so request flash and he said, Type log in and let's go back. Let's go to retrieve the user on If there is an error, we should announce that Say her here and now. Just copy and paste. That's it. Said it's Copy the old coat from here. This is the coat and it's copy him. Or is there this one? Is there to request flash instead of red, he's going to look our war game. Let me check. Yeah, we'll get her on working error coal. Now we have a recession. Save this and redirects to logging to show the error inside of logging up inside of the registration. Cool notice. Just make sure that we have scented. We have sent this inside of our user, so let's see if they error reject this else. Just put or else we can type here the type of the air that we have what we want to send. So instead of the rejecting the or team invalid e mail or passwords, just to make sure that this is the picture that we have passed this error inside of our Lord game flash. So let's go back. Enter another. Arabic should work. No, it's actually let's. John, for example, would say, for example, that or first user it law again on now should logging without any problem. And let's go back, log out. You cannot get log. And this is the main issue because we did slash Bargain. Not the admits last longer. This one admits last Morgan saved, admits lost Morgan. Cool. No, I won't try something like that. Look. And this is not a female invalidpassword an email. As you see cold. We have made it. Guys we've created or free or back Greece, our air call. We're finished with the errors and the flash everything that works with the sessions with the flush. So we've sent it. We've learned how to send thier errors t to the template in engine or to the user on. Right now, what we need to do is we are going to create the middleware so the middle way are going to create in the next list 15. Middlewares: So you make up more or saying more structured, on more secure. We need to do some stuff with it. We need to create a middleware. So that made this middle world is going to stop the user from Axinn or any other users Or I guess the say, uh, to access to the admin dashboard area directly. For example, for every, for example, when we complete the application, who will be able Teoh See this page? So I don't actually want to make the user see this page. Okay, so hope to fix this is by usually Oh, simply let's go back to the log in. So we need to make a middle worse when, for example, he type admin, he should be redirected to the log in screen and with a simple error message. So how to do this any quick? First of all, let's go to the back under controller and type export dot Let's say, for example, is authenticated. This is the function of Teoh call. Same function has a regret with balls. Cool. This is it we have here and there. Don't you fire expected. Let me change this. This more save on a vibe this why we should wear received in this error. I just, uh the images is fun. Ticketed just is off. Cool love. Error has gone. Save cool. So is off now. We can do a work here. We need just a condition. So if there is a user which is every request session or if there is a session for that specific user, then he should be way we can say next. And the next year is going to be added as 1/3 parameter inside inside of function here next , which means that if there is a user, then move into the next action. Otherwise, we type here else and do rest redirect. I was going to be redirected into law game, which means, hey, if there's a user, which means we have a user, um, looked before, so go into the next thing. Otherwise just stop here and revived him into the log in and here instead of just log in. We need to pass an error, so I won't say request flash and this will be middle. There are only as a middle error, and I will say this there. I'll say, um, you know, sorry, but you due north have access. And then I talked to you, Felt wash right there like that, and then request seven save going to be inside of a anonymous function. Then we can rest redacted, log in. Cool. So what we need right now is go back to the roster here and inside of the router we need to look up for. Thea admits we need to block the user, dress all the euro off the admin. So here just say karma. And here's type that can't controller dot is off cool. So he's going to stock from here if it's log in or dialogue, and then he will be axed the in depth. Otherwise, it will not be access into the understand it will be redirected to log in. So the same thing with the register. So if, uh, actually we're going to work with the register just one time. So if there's a 10 user So we are going to make a middle where to, uh, what, am I going to make the privileges for that register? Okay, so let's hear. Type and other hours grease back and controller. Don't check if there is a use. It to make a long I think he wants. Okay, so I'll go back to back and control. Then also, I will say exports this which have functional request response and next and right now it can work. Probably. So this check in the user is already or if we already have a user service, stay here. That's user collection dot Find what? That's it if there's a user whenever every anything unusual we want. So this name this variable as a user equal on Don't wait this and is going to be inside a sink function. Okay, cool. Let's go up and import this user collection. We've already created this from the user model, so let's go to the user model and go up and copy this year old cold. The collection does go back to the back end and call it from, um, at the top of the file that lets go back and check. So if they if there is no user by exclamation ham or type future, we're going to call the available. If there is no user that rest, guess what? Redirect to admit slash register Els. It is if it is a user inside of the music collection or our collection. Then we should now rest redirects to walk again. Cool. Now let's go back and check if or could this success? Now we have made this middleware for the registration. If we already, if there's a user start here register now, I should be reductive to the law again because we already have the richest. Yeah, we had just made a mistake. I didn't call the a slash engine slash a user so admin possible again, I would check this for the same. First of all, go to the admin because we didn't have the privileges that we will bear dive to the way we have here the same thing. I mean, it's last war game, and we need to pass in this error or flash to the law game. So let's go up into the log in ham on. Let's say middleware ever request. Laugh the flash. Won't you have a middle Senate and then I will go back to the log in in the back end area a little copy the same thing. The thing that we need to know change. I will do the same coat. I just want to import this middle Where and change it with this. That's it. Now let's go back. Go back to the admin, and you should know. See that the problems that sorry. But you don't have access, you see? No. If I got to register, register that we should go back to the walk in. So doesn't let me show you here. Register. We should get lucky about. First. We need to, um you need to pass in, uh, variable them. Explained Teoh. Actually, Meteo means here. We need to pass another error that says you there is already a user because we're going to work with just an admin user. Right? So let's go back into back under control, and they sort of the back and control where we are going to do the things that we need to do, right? So what we need to do you and we need to pass in an error inside of our function, which is the check of the user. If there's a user function not inside of here, if there is a user than you need to get your past request flash and this fly is going to be located inside of a middle are full name as it is. Just no old say sorry, but there is all there is worried the user cold. The last thing we should do is a request session Save are going to say this session on. We were going to give it a anonymous function that was going to die right into the admittance. Slow again. No, let's because we are in the same log in. We have already do the request off the error, as you see here. So we are going to now pass in there. So let's check this right now. Register. Sorry, but there is already a user's call. We have done it. Now Let's, for example, time. This one had Logan. Now we should see the admin area. But if we do the log in again, then we should way have to stop this. We need to make a break for this. I don't want if I do logged in that I can't go and see this point this side for the register. So for the rest is going to be a redacted into a lot. Getting what we need to create another middleware for log in. Right. Where is the log in this logging. So let's go back and check the previous code. So we have written here. If there is a user, then go next. Otherwise, send me there. I'm going to do or create the middle where that do theon pa's it off. This is off how we actually can do that. Remember, we are going to We need to hear at a middleware for the log in. So when, for example, someone is already sign in. Then he should go back to the admin, not to the war get. And here we have with written the okay, So if it affair, if he's off them, explain to us exports don't is all I say already. Oh, is going to be a function as usual. Request response. Next. And now we should take a f request. Um, session user that that is a user then, um, rest. Redirect to the admin page else. If there is no user held, no can do thing. Next. The opposite? No, just copy this on. Go to log in that can controller thought is already off. We need this to be the same in the person because we don't actually need to give the access to the user for the off for the post. So the same thing here in the registration, a copy on post and for the Lord God, um, he should be. Oh, he should long dead toe. Need this one called love. We have special app. Lets go back. Refresh Now we should be react to the admin. Right? So, say, I thought blogging. I say register, register, then you should be go. Should go back to logging. Not if we destroy, uh, the application. Now we should, um, see another thing. Look out here. There is a problem here, so let me check. I just did. Yeah. You don't need actually this save Go back. Refresh. Now let's go back and destroy. Good. No, let's go back to see if we can go. Know what about register? Same thing. Cool, not it's log in if you remember. Uh, a few maybe mentioned there's a poppet for a reason model here for click should be to give us a model to ask us about the war game. So let's go back to the register and you didn't see this. Um, I'm sorry. Let's go back to the partials on Heather and take a look for the and me. I don't know. It can be. So Yeah, this is a log out cold. So these two type war got nothing. So if it's low guards, then should that the data targeted is called workout model. So I will look up this It's an idea. Yeah, this is the I D. Look out model. You see, we can actually do the same thing here, but I don't actually on this model to be so. I will remove the data. Toggle save. Go back and refresh. Log off cold. Perfect. So this is today on in the next ad story. We're going to move forward further, and we start will our fault. Remember, if you mentioned I've just removed the component, but don't. You can go ahead and remove the component from the front or sorry from the index. Okay to see you guys in the next episode. 16. Backend Creating the page and inserting data to database part 1: So let's start. The designers thought I'm making three the admin back panels for a the design off the menu where I want to start with the menu. So if you go back into the out, our application on you can see some sort of stuff that we're going to make up function. So the first thing we need to do is this many, which is performed your block about contact. So remember, we have if you mentioned we have him, um, portfolio, the portfolio is going to have a slog, and we're going to combine these two things together. So let's go back. Let's go ahead into the admin. A panel here. So we have a black blank page story. So let's create here the A table so they can answer inserts a new page, cold sores, go back and go to the views and some of the views. Let's go to the backhand. So instead of the back end here we have the index dot e g s on. From here, we can start importing, are creating the forms. So, first of all, we need to go back into the, um, Tom Blake theme. Let me. Is it didn't exit them. Just go back into start bootstrap at the admin, and I will just choose. Or is the index Yeah, this one. So I will run it in my browser, and then we'll see how the tables are mates. So these far cold table slash email. So we're going to take this format of the table and put it into our website. So let's go into tables and a couple of the tables here on that's open it with our text editor. Um, I'm sorry, guys, for my my my my PC, Sometimes it becomes Slough. So this is the table, his nimal. I'm going directly to look up the tag off table. This is it so that the table tag is his inside sort Dibs on, let's say the cart. If so, I want actually copy the dip. So this Dave that contains everything. So I would copy this until, for example, that's until the body to copy on does go into the index or E G. S and inside of the black page, we're going to paste this. But before we do this, we actually need I need to create And you knew many. Okay, I didn't need the desperate because that's where we're going to calculate everything we need. For example, from Port four year. How many products? Etcetera. So let's go and create a new never war on create the page for this. So let's go on to the backhand and let's just duplicate this A blankie gs. So let's go here. Copy old this code copier and creating your file on this file should be called many. Makes it that many. And you don't a gs cool e g s not E t s. Uh, yes, right? Perfect. No, let's go back and complete our work call. So this is it. So I just paste this and before we start before we complete our page, we should I want to mention for something. So we we need to create a partial so that we need to avoid right to rewrite this for each page. Cool. So let's look up for the blank page. Here we have a blank page aan has a blank page Hasty Mel Andi sort of stuff there. Let me check. It's copy the index page because I'm sorry, because we have delayed a lot of things there, So we move these and paste Theo Index page from the index page here. I'm going to take golf a lot of things there. So we will. From the end of the Tobar, we just select all of these called Cut Their This and write with may Include include the parcels include fourfold and parcels slash Enter save. Go back to the partials hitter on peace. There on. Make sure at or to go back lying just to Mr Copy just to make the design works properly. This is it for now on what about the food? Er on the first, we're going to take the rest off fall. So the end off the future start from here. So cop caught this on PC here. Make sure to this. I don't know why I keep doing this. God be thes these safe. Cool. No. What we need to do right now as um too. Copy that the tables by this is it copy? Actually, there's a lot of things are going on here. I just need to copy, um, from where? It starts from the courts. Right. So we need just this thing until two body a copy and inside of the menu We have a blunt page on. Didn't need that. That's paste that in. Now let's remove all this stuff we have here. Name on that. We have to tea or tea foods. Some of this when you just to force means the foot. Okay, We don't need to. Actually, actually, we don't need this. So save. And we need just careful now. We need the name off the menu on the slug off the menu. Save also. We need another attack th I was going to take to end it or delete fun. You will understand. What does this mean in the next lesson? Then let's go. Uh, say to body to body, we need a hero or a wrote this was going to contain a TV, right? So the TD, for example, the name that category is going to be port for you as an example and slogs. Want to be support for new with lower case, remember? And then t d I was going to be today on here instead of making this would say actions save . Now we have to close the rest of the dips and we have 12 Actually, we have This has a rich with this one have to three on the table. Let's save and see. Always work now. Refresh. Nothing happened, right? Because we didn't touch this pace. So we need to mention here. So let's go back into the header and something. Heather, there's something called dashboard, right? So type dashboard. This is the dashboard. This the menu. Just copy it and paste it here on instead of the death board. That's a menu as one Teoh to be admin slash menu. That's it. Notice Screen are roger for this. So go to Roger and say rock. Yeah, this Roger And we need to save that can Controller on dot is remember, way here way have to make a middleware first. So which one way are going to make your toe with the 1st 1? Cheese is off and then back and fuller to close this full of don't His name is menu save. Go back to controller back and controller instead of the beckoned controller. We're going to add the menu method. Cool. We're going just to run to the page. That's it on. We are going to referenda on admin slash money. So we're we guilt to the page. We will see that many. So let's go on the complete works of exports menu, You have a function press pause and start breast render. I was going to render from the backhand something called Many se. And now let's go back. Take a look. Oh, refresh. Now we should see, uh and you Chad here. I don't know why. Um, computer going. Uh, Slough. I'm waiting for the pastry Drew fresh. I can't see the dashboard here, so let's go back and check. We haven't. We had an error. So for the head of Avery s going to work with the backhand. So this a navigation bar on having a list? This is a trap. Let's make this okay. I'll try to see these. Just one. That we have just one dashboard, maybe days a problem. So let's go back to the menu that included, uh, correctly. No. I was going to refresh. I don't know. Why doesn't Sharon there? I tried to make Where is it? Header company. A boy temperate inside the alternative way are inside of there. You will cool. So, navigation. I, um this the class many All these stuff I don't know what happened? Actually, I don't know what happened, but I don't try to fix it. So I will just remove this se and I will go back to many. I think he I think from the partials. Maybe we have a problem. No, I don't think so. Yeah, I understand that. OK, ok, OK, because we didn't import this to inside off the index because the index is still with the old one, You say so let's go. And the end of the Tobar end of Main Content bar. All of this stuff is going to be replaced with this on the footer is going to be replaced to end of the Cold War Is the header uh, revolt? Many Dignan content. Um, I'm going to call include, um portals slosh for wholesome. No one is good, but the index and refresh this page. Where is it where it starts and all the content save now. We should see you say we didn't off course before. I forgot to. I've deleted uh, the rays danger link. So let's go up and look for it. Dashboard. Yeah, So I forgot. I just deleted this'll and this wife We had this problem So save. Go back, refresh. And you should see our menu. So we have the same. I can. We're going to change this there because this just I flout Awesome. I think so. Let's click on the menu now. We should have a nearer back at the page is work. So your email is not defined court. So let's go back into our back under control. And it says that user email is not defined. It was Check out for you The email. I will copy of this. Yeah. This is the limit user. Just to check if these there is here or not. But I'm not going to use this anymore. Instead, I'm going to use another method. I will show it to you in the next video, so I will remove this. Then I will go into the hitter. I think here we have the user email or way can be in the men E g s, of course, in the head of G s. We have this user in it. Okay, so yeah, this is it says stressed side user, random user refresh And we should see our table ready. Cool. So we have created the table right. But, um, the problem here is the for is inside of our data table. Example. This is wrong. This is wrong story. So how to fix this? I just need to go back into our menu a lot easier. Yes, I look up inside of four. So as you see here, we have the big in page content. The end of the main content is that this def has relationship with this one. This day has a relationship with the container of this one. Yeah, let me explain to you. So we need to add the diff closing def for this. I'll just dio like that. This is one on this issue. We need to two lives here on 30th is already cancer is now trying to refresh on take a look at it. So we still have the problem. Well, got Footer and the other copyrights Dave content rapper and page rap. So let's go back. Where is it? Teoh indexed E J s. I love thing with bad thes stuff, you know, so many of then let's call it home Need If we had here still, maybe if I think maybe save refresh. I don't actually. This to be here. I don't know why it's showing inside of it. Did. Veritable said. And here we have the body. It's maybe it's inside off death, maybe. Okay, I'll try to to make this manually, you know? Okay, so inside the page, heading right. So they said page hitting so before is is replaced the card body and this Why? Um, I had this problem. So we have to dip on. You have a table. We didn't close the table too. This so I think Why way Get in trouble. So the two body here we have true to body, I should say table, let's go over and see Cole. No, fix it. Well, okay, so this is it. We have created our what's a blueprint? Always say our template. Now we need to import the men's. We didn't have any minutes right now, so we need to create a new me. So that's inside of the data table. Example here we need inside of it. Where is it? This one I mean, inside of this death treats. And you born on this boy is going to have a class off duty and and began to say success. Uh, before type is going to be submit on this Here, for example. Say so when you click on this ad, you should be redirected into se into another page to add many cold sodas. Now create a four on this fall, has an action off admin menu slash Create on the middle is going to be the method is going to be get this time because we are going to get a page not post. Cool. So now yeah, done this. We have added this bond, so there's going to check the bond added, Uh, yeah. So the Barneys and in here. Cool. Um, I didn't like the way the bond charged me. Make it outside and see these outside. I didn't I didn't like the way Oh, I didn't like it trying to they they're They're going to be this on here. Uh, ball say class on this car's going Teoh to be guard Heather safe. I don't see cool. I like, uh, the weight it's situated Call. Now, when we click on this bond, we should be directed into any rotter, right? Yeah. So let's go ahead 17. Backend Creating the page and inserting data to database part 2: to the Roger Five type. Roger again and slash admin slash menu slash creates cool. Then we need a back end controller. We've made that. Make sure I pontificated that back and controller menu 38 Now let's copy that and go into the back and controller. And now you should type export function. Request response. And guess what we need right now. We need to rest. Render a new page and this page is going to be the page where we are going to put the form in it. So rest Brenda on this is going to be create. Maybe this is the page ringing. We wanna so beckoned. Slash creates many coal. Let's go back and you fall. Create many of Dr E. J s and I will copy the same code from the many E g s and paste it into creates many safe. I know the thing we need to remove as the table. I don't actually need to work with the table. Instead, I'm going to work with forms So say, for the action is going to be Let's say this 1 may be I'm sorry, this'll one. We are going to opposing it so the myth is going to be going to be first say no sort of the form. We're going t o to add some imports. So let's go back to our top plates and look at these. I form fields. So of course charts Morgan register table or doing Okay, we get a few. If you stuck on this, I usually don't. You boots drop, create, I feel. And now we should create an import field from boots because this admin dashboard is it's based on bootstraps. So forms. This is the form. So let's take a look on how the form I want, like, this form. So I'm just going here to see the code of that. So we need to create Inform Dev with phone group. That's just take this one as an example. Save. Go back. Um, we need all too. Not for God. We need also to get yeah, way are getting patient. Think I thought I didn't get a page? Let me check here. Yes, Renda. I think it was cool. I think it's great. Local host admin on. Then. Many of if I cook on the mound the ad bond. We should see a new page. So create page. Um, the design is not working. Let me check. Creates mania is it creates mania. This is it, right? Human is inside the the back. And so it's called the header on for actually the hitter foot. It doesn't work because the fire is not properly. So That's, um, let me check by inspecting element. Okay, so that's for example, Let's go up to the header on its of Heather. Here we have the vendor, so it's Let's see if we add, uh this. Yeah. So he's going to work. Cool. Let's go back into the header and add another next up. Always were going toe forward. More on this code. Let's remove just one. Add one here save and I will see if for not get problem. Other pages. Let me ask you to called. Be based based on peace. Se Go back, refresh on their looks. Cool Now we had our fault. Cool, Awesome. Let's go back into the media and everything looks properly called. All right, so let's add and sort of the adhere. Actually, I don't need to put this born right here in the ad. Eso Let's go and remove it Where is the ad born? Here. So just remove this do. And instead we're going to complete the work. So first of all, to create a menu, we need a name address. Right? So the name of the menu and And you need that. So you see, the type is going to be fixed. Give it a name. Name is going to be me, Andi Placeholder Going to be, for example, Block as an example, I'll do you copy This is there inputs here is going to be to cycling slot and the decks do Is log on the collapse in prison too. Don't say, for example, slash block as an example, I'm not going to write slash nasa just from that the, um let's say being in trouble. So it's no. The last thing we need to do is we need to add a number dead. On this day, it's going to have a class or my form group as usual, The former group inside of this, we need to add a bond. Bonds want to be a top of submits on the plus went to be born on success here Say you may save go back refresh Awesome no. Again at our many cold. Now the did a table example. We're going to change it with, uh, call. Now, let's go refresh. The next thing we should dio is we have to receive the data from All right, cool. I see that the Fuhrer is right here. I don't know what is happening here. Maybe with the diff It's from a one and c Yeah, we were We were adding your deaf called. So let's when we collect on the admin you we should receive a get. So this creates and your router on this Rogers should be the post method. So instead of here, who's on a great many? Many creates That's it. Carby, go to the back end controller and then said exports function, request response. And guess what From here we can work with our model. So this is the time to create a new model. So new model on the small is going to be called menu with a couple of as usual, and we are going to create a new coal since cold menu, and this money was going to have a function that received many of or data. So this and then you going to equal to received information now? Just more Your exports, then you Many of this Is it for this for now? No. We should check if we always seem to get Our lots are awful. Walk, request body save Go back. Refresh on the sea, for example. Port Folio on is going to be with a lower case. Add new menu now we should receive from the terminals. Open up terminal and check. Yeah, we have receiving the portfolio with the slug. Cool. This is awesome. You know, they think that I actually want to mention is we need to create the dates, everything you actually creates. You can add the dates for In this case, I don't actually want to use the day because I don't wanna know what time this Emmanuel's created purpose. Now let's go back to remove this. Close this and complete over. So that's creates a new menu for variable that want to call they as a blueprint. So you menu on before the I want to say request when she has everything going to receive from the user and talk se costing menu many years if is going to require model, many cool. This is the first thing we have to do. No, because we have understand how to work with the den and the cash. Well, let's group right. All contact with so many of dot on this create am method And I will name it as at then anonymous functions going to redirect it into the same page. So the same page is add me creates menu. Otherwise cash rest Direkt No. Here. When we got an error, then you should see here at the air. The air. Oh, sorry. Bells. We should be redone into the menu darkly. No, let's go into the menu on Guess what? Menu for outside. Add people. They function and from here we can do some stuff for that. Cool. So we have to think so. This got menu is going to be equal name. And the name is going to be this. When you dog's name and this log, I'm going to be this many slug remember, And the user we, instead of writing many of writing data, something here. We're working with a menu. OK, so this is it for now, Andi, Finally, that's the weights for many you collection. Could you specify the collection yet, but I will specify right now for you guys are going to insert this many. This is it. Um, but before that, that's copy this one. Let's come to your clipboard and return and palms. Don't forget the problems whenever you want to use the database Result. Andrea Jacks. I'm based in Cool. This is it. Novelists go back into the user control user model and just take the example from hand Copy A go back to many of at the top. Taste it. Instead, the users are going to create menus as a collection on Dhere Going to plays this many collection with many collections like sorry within mini collection, is it now? We should see. Should grab a result. Now, let's, um I wanna do something, so yeah, result Once we should do the results. Otherwise, the work or otherwise, the car is not going to work. Cool. This is it. So what we need right now? Let's go back to the back and controller. If there is a problem, let me ascend. Uh, error. Request flash. Um, about creates errands on this. Say sending something went Wong. This is the error. And then are going to request session. We're going to say that it's a function requests session Save I'm for a here. We've already done that. So we need here to just response. Oh, rest re diets. And then we can call this request flush from the create menu days and error. So this area, you should typing. So log, I said logs cold. Copy this logs and go to the create mania on above the our underneath. Uh, card. Maybe, I think didn't either fall. Look, making the form dip. Andi logs for each from from each log, then guess what? Run O r equals lock on this. Open this tag and closing here. Understand this. This is E G s formats. Quote love inside of it. If it's given a class on this was going to be, uh, alert. Alert. Uh, thing saves. Go back and see if there's something were drawn. Not so add Is here error? Yeah. I forgot to put this inside of Lord. Not outside of it. No, no, She didn't see any other Cool. No, we should specify that this to feels not shouldn't be empty. So let's go back into the many model menu. floor card quality. Why they function? I was going to be here. This what's many name is empty. This errors sport Say your name. Feel not empty The same thing for on this log says log, you're going to use log on. Sure. This capital. Um this is it. Actually. No need to call this right here in this Valley days. This is it. And now we can do our work. So yeah, for this, girls, life isn't area then. Sorry, Re Jack this Arabs Els do this thing call notice at this people empty array and that's it. Save called notice. Go back and refreshing T or Page. I will try to make this empty so he's going to give us in here. If I type for example, log a blogger at this menu Should the man should be added? Let's go back and take a look here Portfolio refresh. You should see the new collection many years instead of the menus we should see or blood menu that we have right now. So let's wait for Has stopped working. I didn't expect that. But Lori Guys so back reruns again. And let's see, let's sing the code. Um So where is the many artists menu? I think there's something wonky because I've seen before, um, changed its place. Still have a problem with deaths because a great many Oh, here. This is the problem. I think the years Yeah, we have to do from here se Let's go back. So let's connect over for full year collection. Many years, Yeah, we have added the block. I perform each other before, so we have added the blood. You see the slide so we have inserted the Dera successfully there. Let's try to click on add on, make this empty So something went wrong, which is awesome. Cool way Have done this with the men you know we should send or we should receive the data from the database and pretended to users. So when or the admin should see a lot the categories here. So see you guys in the next countless 18. Backend menus: if you remember the last time we just created the I mean sure you the admin area. I just click on the menu. We've just created this and wear understand how to insert the data inside the database. Have to create the page off the minute that no or today we're going Teoh print out everything or every record inside the dark based inside off our menu, and we're going to change this text and distance for the blank page. The next thing we should do what you do in the Distrito really are going to add the edit and delete bond. So when you click on it, you can this specific category under Lee the specific Ivory. So for further do, let's do it. First of all, let's go back or it's going to our text editor on Let's open up in the back and let's open up the create or the menu story. So this is the menu, right? So Sposa and we have the day data table. Example this one. Let's change it to another one. Andi, Let's say, for example, here many years and then we have blank page here. Attention name it. For example, many of area as an example say go back. Refresh on should change cold. So this, um, prints off the record first. So if you remember, we have just added this into our database. So in the dark, because we have to right now have a blawg on the portfolio and when, for example, you click on the add and you add a menu. Then you can. If you are able to add the menu, this is it. Now let's go and work with them cold. So let's go back into the controller than the back and controller at inside off, the many of which is this one render menu. Here we are going to create any variable. This variable is going to take the many or otherwise you can just go ahead and added inside off the objects for as a second parameter inside of the request or responsible. So let me give you so many you on on same many years as poor flora because I'm going to look through the wreck of the records. Then older await for the many collection dot and we're going to find the menu click or if we do the fine, then we are not going to get the result, but we are going to get the result but a lot of stuff going on with this. So we need to add to convert this to erect so that we can work with just this. That collection not We just created this. We need to add them facing function because we are each time you put the way to show its follow the a sink. Then let's go up and add the collection. So I just can't be the constants off the user collection and hit. I will time many of collection and he is going to be many. If you want to check, you can go to many doggy s and take a look at this Or just copy this on pasty directly here . Cool. This is it. No, we have added many collection. Now we have seen that the mini collection has been added to the menu in the format, off or as an object. Now let's go back into our backhand and on the many of inside of here, I'm going to live through the menu. So let me show you. So let's do this. So menus thought for each function each menu. Many of this is a blow RL on this single. This is value. I'm just It's like the way developers work. No, it's just council log all the menus that we have. Cool. This is it. Now let's go back. Andi, refresh on now we should see the menus inside of our APs about. Before that, we didn't at the closing on opening tack for the E G s save. Go back, Refresh. No way. Let's go to the General. And as you see, we have to record the first record. His book is called Portfolio and 2nd 1 called Block that each one has a specific idea on this ideas Will. It was created by the man greedy the mongo db Automatically. When you insert a collection on, the idea is going to be generated automatically coal. And these ideas want you are going to work with when we try to edit and delete the a specific item called. The thing that we need right now is we need to print out the result here side of the browser. So the result inside of the brother it's got this is want to be here inside of the body to body. So instead of rail right in this too much, we're going just to put the for each new that inside of the fort each Let's remove this side of the for each loop. We need to actually create a T. Rowe for each one, right call safe on inside. No, let's go back. Refresh. We should see a duplicated one. Yeah, not which means that he knows that we have two records inside of our database. So here name should be. That's I drink all the name. Name should be Menu Don't name on the same thing with hopeful you slug Look safe, Go back refresh. And as you see, we had a lot of the Blak on Blak slog. Let's try to add another one. For example. I want to add yeah, both page so evolved and at the menu, and you should see now the new record has been added automatically. This at the last one. She's contact page contact and these contacts going to be contact at the new menu and what we have already created the many coal. Now let's move it, move ahead and that's creates the edit and delete bond for our actions. So to do that in a quick let's create a structure, create a form or let's say I bonds. There's two ways the 1st 1 is just by creating a form or by just creating an a trip in contact. So I don't know what actually need to do. But let me try. Try out this With that in contact, I think that in Qatar is going to be, um, darkly. So let's do it. So first of all, let's get a draft. It's a trip on. The Metro is going to have a a your own that's going to be redirected in on the name off the bonds of the first bond. We are going to create his cold and then plus, and the claws going to be gold. One one E T. A. For examples. Success save. Go back every fresh and you see, we have created a bond for each Adam. But when you click on the bond doesn't have nothing or nothing happened. Why? Because we didn't specify what we're going to do with this one. So let me explain to you so in the Atria. If I need to this point to go into admin slash menu slash it and it is going to take the i d off the specific many because the idea is the identify rare for the specific records. For example, this poor for his i d the border line you about his i d. On contacts and idea. And each idea is different from the older one. So let me explain to you what I'm actually going to do. So let's stop here. Adami slash menu slash and the i D off the and menus for all time. This I will add with GS tag inside of it. So menu dot slash from the school i. D. This is how you can call the idea off each Adam, then slash Guess what we need. Teoh. Look up on. For example, let's add a to specify this a lot. This is the slog that way want to work with? So this is it now it's safe once we add going refresh present. If I click on here, then you should see the idea of the specific product. If you wanna understand, know that this is the real brother that you actually worked with, you can just copy it Open up your rubble. Three T um, Mangane be database manager, and then you can find the product. Let me explain to you all the ideas I'm explained to you. Well, see, that's lunch. Um, the app. So portfolio collection menus. So instead of the menu here, we have a four records way already at that. Now, to find a record, you can just that control inside of your keyboard and look up the document. Otherwise, you can just go ahead and take for example here. So we have you find Southside, find one and inside of find one. Let's say three I d. I want the idea. Is it? I did this one. Enter. Sorry. This is it, um, long to see. He's going to find this. Sometimes it's need t add objects. I don't know how to do that to me. See, in search of your documents to view documents way have this. So let's compare. I think this is the records, right? Click a document and paste. Yeah, this is a record. So we have tried to beat the record of the about page right cold? No, let's go back. And you will understand that this is the record when we create the page off the edit. Cool. No, this is it. No, the next thing we should dio is to create Let's say a Roger for this. So let's copy this and go to the Roger Dr J s type here culture. Yeah, And here we are going to get the Roger backhands. Control is all or we don't actually, I need this user to be locked in t the the page. This is going to be in the front and back in the back. And we should he's all then back end controller on its name, it menu in it. That's it. Now I'll just copy this in the name based. It saved then and let's go to the back hand controller on then at the bottom five. Exports the name of all the I was going to have regressed under his balls. And that's it. Call now. We should Orender rest. Renda. We should render for the backhand. Something called a day. Many right on what we need right now way need to go into the create menu like all of these things, copier. And then go back to the back end at New folder and that name it Menu under school. It what? So many of the school. It don't BGs hunter on face. That so the main thing we need to do leave is the form inside of the form here. We actually we don't need Yeah, I'm sorry. Way Don't need this one really need for laws or otherwise. Law is going to be about their days an error than it should give us an error by. Actually, I don't want this to be here, So let's delete this one. And right now think or the main thing we need to dio is we know we need to actually put the values off the that specific many of inside off inside of the right. So let's go back into the Roger so inside of here. As you mentioned, we have put the i d off the menu, but here we don't need the easiest, but we need we need a parameter. We need to pacify meter instead of the You are tourists. Type this and, for example, an idea. This is the name. And to call this to call this name because this is wrong to replace for each page that we need to go back into the our back and controller and inside of a let's say yeah, so we have here to pass in directly to our menu here. So too, does this into the many here. We need to specify. The page on the page is going to be inside of the Roger right. It's not make sounds complicated, but I was playing to you. So here we need to render the page right. I will save this on double back to, for example, would go back here, and I just explained to you what, actually, so let's click on India for their specific user and as you see, it doesn't look, doesn't find the edit menu. So let's go back and check if we have a wrong Miss Pond. Yeah, it didn't mean you're not many. It it it it menu saved. Let's go back, refresh. And that we can see the page of that specific many. Right? But the problem is you, as you see here or with past were best and the idea of the product directly inside of the I D. This is it, so no way have to check if this idea is truly inside database. If it's in the inside of a database that we can render the page otherwise is going to read art as to for for page error. So let's do this. Let's go back and here to remove this and create a new variables. We was going to be called Menu. This menu is going to be a human here. We're going to passing here through West Body and request Palms. I d. With this, um, could we're going to call this idea this I just want to be called by request prompt. I li So we're going to check the requests that happened from the user when he click on edit . So the idea is going to take this one would take this idee and, uh, put it inside this old model and do check it. It's already in our database, but this is not going to be automatically. We are going to make it automatically. So it's called the menu dots on, Let's say and then if it's true, if there is, if there is ah perimeter I d than response, render the page. She's in the backhand. Slash it it many. I'm sorry for the misspelling here menu cool. Otherwise, rest. Redirect or, let's say, send, um, send for for just as an example. After that, we are going to make a beautiful white design for the 44 pages cold. No, let's go on, create this edit. So let's go to the many of model. Then at the bottom state menu. Dog prototype dogs it it equal a new function. This function is going to check parameter. If you remember, we have added the West Palm idea, which means that we need to add this into the data service making comma here and skip for examples and menu idee and is an example. No, I'll have this many idea people did the main idea that is going to be returned cold. No, we need to call the many collection. So let's do that. So a weight or we need to return problems first, turn your promise. I think results and reject and just complete work right now. So let's right now for weight for the results on which means which is in many collection boats flying what, just 11 thing. So inside of the off many collection, we need to find a new I d. And this idea is going to be the same as, um, the menu idea. But this time we need to do something in the model. T. B will not recognize that this is an object idea that was going to render it as, um as a strength. And sometimes you get an error because this is a strength and we are going to look up for the objects idea. Fortunately, there is a solution. The solution is you have to acquire. I'm a object object. I A novel idea is going to be required from the Mamba Levy dog object. Heidi. Do not say no. We can pass in the object. Isay Inside, many so object I d. And inside of it we are going to pass it many ideas parameter safe. So this is the first thing. So let's say type. Who's this inside of variable like? Fine. Then you say flying menu by I think save. Now let's go and check in phase eight minutes. Find anybody I D. If that is a menu, then result otherwise reject. Inside the error that is no object, I li specified, and you can hear go back to the back and controller on here. Can Coulson log the error on? We're already passing in the areas that sort of the catch cold. So if there's menu that resolved otherwise, that rejects. So let's check if these a there's this idea. So we are going to refresh data. So as you see, it's rendered successfully and really without any example of the type this as an example, or let's go back on. Its changed this point. This one, this number Now we should see and there should get an error or the pain is going to be just stuck like that. Let me check the council. Yeah, there isn't a cc air passes in a single, which means this is a wrong format. Off often. Object. I did this one. We didn't get there. So, as you see, we have 44 errors. Perfect. This is it. This is how, actually our application work. For example, if I wanna go into the menu and click on it it for the last one, I can render the page without any problems. Cool. So it's rhino, but, um uh, print. I'll put or let's send the fund money, but I D to the results like that on inside of the back of controller, we can get this result from the den site result and this passing into the result inside, if we are the objects of the surrender method called. So here s type, for example, menu is going to be the result. That's it on what we need to do right now to make sure that this work we have to go into the edit page. Um, actually, there is a problem with him. It doesn't render the car colors on or the styling sheets So mean expected image and take a look. You should go back two steps or we should remove a step that I will remove a step on check . Nothing. Change about to start. I go to a nothing. I tried to check this. Yeah, you need to back. Um, we need to add I'm back for two times. So this on this one on basis here, they have to work each time with this in your place like this Problem save. Go to the footer inside it for can to also add this. Say, if I go back, refresh the page. No, we should see everything was fine. So let's go back to the menu to make sure that everything was fine. Cool for faith. Now you can edit the page, go back to many of it's click on edit present for the block. So we are here in the block on I need the the I need to print out here the name off them in the world going to work with. So let's go back into the edit menu on inside of the edit menu here we have on this form, right? So inside of the form we're going to add instead of the placeholder, I'm going to change it with the following So the value is going to contain um, we have already named this, um, as I may be copied. Many of unnamed many dogs name on the same thing with Copy this. The same thing for the slog making here. Slug save go back. Refresh. Refresh. Okay. These a mistaking here or really made a mistake, I will see. Yeah, it's not a mistake by this is the block because it was the placeholder. And with blocks of this trial about pays. Yeah, we have a ball page. What about contact the same thing. Now let's instead of a human your updates many years and they were going to say updates manager of this menu Page C No, we need to mention all The last thing we need to mention is the roger company. You all that we need to work with ons go back, edit menu is that and And he answered the i d I'm going to paste in the idea of the menu menu dog on this court. I d cool. It's closed that it's open here. Call. So this is the many, right? We have done that. Cool. Um, uh, yeah. With form here. Something went along with this. Do we have a Do we still have a problem? Well, I will see if there's a problem. There are cool. So this is that it now specified. What? What? Well, when we click on the bun here, we need to specify which which Roger we're going to work with. And I've already put the admin menu menu idea and made it inside of the post. I need to create with the same Roger. Yeah, well, same after I need to specify when I click on this menu. I need to do the changes that happened with by the using. So let's go to the Roger Copy the same Roger and faces here instead of the pope. Get meet your postings that it on here. We need to introduce the changes. So I will remove this post on This is which means that this is the get and this report this I worked with the's stuff. So let's go back to the back end. I will copy this name. Just this. Say, absent will be We were fine. Don't worry. So here just copy. It's a function on dysfunction is going to take right now. I was going to post So let's create and new menu of this minutes when you have new menu as usual. At that time you got Bari on Request Farms. I did the same thing, so it's called the menu enough. It posed. But if its success should be redirected, let's redirect. You're going to be reductive into the admin slash. Um, many, I think, did the menu the name off this lot, yet we need to be a reduction to this page so we can see if the changes that we have made otherwise. Catch rest green. Irate Oddeman menu slash on you, um, at the idea. So that's a plus. Request bottoms. I d. And you're tied, for example, are top to go back to this page. Cool. That's it. Let's save and see the results. 19. Backend menu 2: to see the results we need actually to at a specific code here so that it's can do the so let's copy the menu it imposed on this is going to be is going to call the Post Life does go back into the many of model and taught menu as usual prototype on the man off the Method Court. This is it now we need to return and your promise and this problem is going to be facing, resolved and reject on. But this is it. So this is the first thing we have to do, right? So the next thing should dio is to let and it's many we are going to create at variable. You know, so many, um, I i d and there's going to await or let's directly without writing of Avery. Just a wait for the result explained you for many collection, many collection. I thought it said Now off, find one. We're going to update a record, so update one on this record is going to have a specific idea on the i. D. We are going Teoh pass in is the same as we've done for the fine. Find one. This one So this is the objects idea. Oldest copy it. I'm basted here. Call now, the thing that we need to do right now inside of a problem to add if a callback function to stop here function This function is going to have two parameters. The 1st 1 isn't if there's an error or there's no error than you should be a result. All right, so now we can do a condition. So if there's an error, I reject that else. What? We're gonna do it else? Yeah, we don't. We are going to, um, resolved, right, but not at the moment. We need no to push the result or to update the results. So in the update one here, that is a method called sit. So we need to set this thesis. It's going to be as an object. Let me explain to you let's go ahead and Google to leave those two panels. I never saw it on Time update One among would be and we will be way will go to the girl with the talk documentation of the Mongo DB offshore website. From here we can see how we can push or update a record using the Mongol Devi update. So let's go down. And as you see, we can, Um, we can update a record, and then we can do some stuff with it by including a J song format. So let's find Let's look up, sit Here is the sit, Let's click on it. And NBC we have to put the sit. And so they said, we need to put the filament update so which means no need for the callback function. Instead, we need to do with this disclosed attack. Now, so is that you need to do this. So be careful. Notice a dollar sign type sit inside of the city. We should add objects right inside of this object. We are going to know, sit the stuff. They're so first of all, we need to update the first record, which is the name. So the name is going to be the same as above. So I'll just copy these two lines on a piece. Then they're here. That's it. So way actually have in recruiting services for or this is last one. I think we have added, yeah, we're adding and you brackets and closing granted entities called, So save this So as you see now, we can just go ahead on sold this. So let's see where it's closing. Check this one type. They need that result on. Now we should see the results. It is. Go back and refresh school, for example. I want to change. I want to change the name off the about page Or let's create a Miller. For example. I will name for this as, um, my website just as a menu. And the blog's going to be my website slots or add. The many were already added this minute, right? I actually I wanted, for example, a made the mistake or I want to get it this minute. So I reconnoiter instead of my website say type, for example videos and I'll copy the same thing. I just make sure that this letter that update when I click update to see the reference error request is not defined on this is this is inside of the decade patrol. So let's see where he is. The area that we have made it so does go back into the back under control. So inside of this, yeah, we did intervention to request. In response, you say Let's go back. Hit, refresh and change this with videos on top in videos. Update the menu now, Orman, you should be updated. You know, we have successfully updates or many of the same thing with the older thing. With the older blocks, we can't, for example, blawg and whatever you want, you want to dio cool. So this is it. We haven't made this. So the next step we need to do is just by adding the delays Bond, for example, I wanted to leave a specific specific menu. Said all they have to dio is going to, um, raise their going to the menu here. E g s and I. I should add a tech inside of the the to remove or the edit on here can say delete and the slogs will be deleted. Teoh and Cole, I was going to be a warning. Warning save. Go back. Refresh. As you see, we have added a delete. But I don't. This color danger save as you see, our website looks burden before way. We need to make this delete function correctly. So what we have to do in here? We have just again so we can do all this stuff in the get request. That's it. So let's go or it's likely Go to Roger. Copy this one. The Gibbs based it same instead of delete it. Space the leaves and you're saying menu delete and thats copy there. Let's go into the back and controller inside the sports. So he leaves many here and contrary functional frequency response. And when we click on that specific Minya, then we should get the result. So let's do that. So let on about we should the weight se thought Wait menu collection. I thought delete one on the inside of the menu. We should include a Jason or an object This always want to be I d and you need to call the objects i d. And now we can just type request cutem. I think that's a because we're already mentioned this I d the delete deceit. Now we can just call it Request Parliament Your I d on the last thing we have for Judy or less thing. We have to do this copy paste. Everything looks far. So the thing that we need to do right now is just to check if you are born, is working. But you see, if you see here, we have a crushed because we didn't. So the next thing we need to do is to call this one. Let me show you the object idea. Because we didn't call this inside of the back and controller. So let's go up. Is this good in as they say, objects. Now, if we save to see if our obligation works Fine. Cool. Every fresh it was. I wanted to delayed the videos, but I need a head. You mentioned that once you delete it or was the menus deleted? Now we need to rest. Response. Redirect to the Adami. Many se go back. Refresh a non stick on the late. And we have dilated our Adam successfully, which is cool. Right? So this is it. This how you can make delete on the agent functions correctly. So see, you guys in the next episode and next absolutely are going to create our world ritual in tow. How you can add, insert, update and delete the category collections. See you guys in the next hour. 20. Backend categories (CRUD): we'll come back. Actually, sometimes when you write the code on you, you see that this code will be the same for the next. For the next thing you wanna, for example, world or create. So you don't actually have to rewrite the code several times. You just need to copy and paste into the change that you want. And this one, Actually, we are going to do in this tutorial so before beside me. First of all, we're going to create the categories, right? So let's go into local 1st 3000 and then, as you see here, we're going to create this guy agrees that the port for you will belong to you. Cool. So this is the kind of are going to create, um and actually, what? What we need to do is simply by, um, adding the name of the slot. And we have already done that with the main right, so we don't actually need to recreate this. Instead, we're going to copy and paste the code and do the change that we need to do cold. So let's go back into our code. And first of all, I want company. All Roaches, the ref created with the menu from here. Do you copy? I'm going to face them here, and I will do the changes right here first instead of accented many removed actually category the same is going to pay for all the means here. And also many is, for example, menu creates. Would you be kind? Recreate, Agree Opposed categories category today and I agree many. This is it. So we've done that and see it's easy. The next thing we need to do is to go back into the model. I mean, it's creating a new models escalates. Select the model, choose a new folder. This fool is going to be called category with singler or single off the categories. Carrie, I agree, but yes, cool. Now I will go ahead the category and then go to the many and just do select All right, click, copy and paste the whole code inside the category. She s the main thing we need to do right now, as we are going to just do that some changes. For example, here we have the menu colored collection is going to be category collection and he's going to be categories on. What about the many years to be Category two old this category, and he's going to be a V i. D. This is it. That's what you need to replace the same category and that a group I d on the copy coffee and pays and then copy copy. I see many names. Would you be category names? Lightning's going to be the same. So he is going to be category for each of these. The world is going to be faster when you start working with these things. Now let's go and take a look if we have missed anything like here, for example, Tiger Name of Slog. This category this category We're going to set the sky, agree to so find menu or fight category. But I d Day way have you category collection this category I d Sometimes game trouble. We have to write things in the right way. It's a category to make this through this small C on. Let's go into Yeah, I agree. Yeah, Minya say I d No, it's fine If there is something called many. Yeah, you forgot to name this, so I agree. Mania collections? No, we're finished with the menu on. I just want to see if we made, like, a capital T in one place. So this check out category collection Catty. Yeah, this one. This was a small seat on That's it. Saved? No. So we have now finished with them. All right, So, no, we need to create in the back and control. I need you to do this stuff for the back under control so you actually can do this. But copy all the stuff that we have bringing with many from the menu here from exporting the menu until the deleted minutes. Let's go up. So this is the mania. Just copy. See something here? Yeah. So copy and paste cold. So just go up with many of and he is going to be a ivory exports categories because these all the Rogers all of these methods way have Iran in the in the Roger. Copy this and then inside of, um, so here. So instead of many say category on Guidry election Well, obviously wrong to the second category. Yeah, So the back and creates category. You see, you may get confused, but this is, I think, the easiest way to countries whose so you I can't agree on here can be the category. I mean degrees degrees. Yes. Cool about this. With flash, many of category creates saying so. Here. The same thing. Can agree with a couple c category category Here, too. Did the category mania results Going to be the same on. Lost kindly from the idea is going to be the same too. The menu here is going to be changed. He is going to be categories, not type many Collection is a great coach. These were directed Cool. I'll just go back on. Let's look up Battery. So let's take a look. Runoff carding, beckoned Library? Yeah, this is he is going to be before we're all sort of call now, I would say now we have finished working with the back end on the model in the Roger. Now I've set up correctly. The last thing we have to do is to actually create or duplicate the create many, many on many. Right. So let's go. And inside of the back end, I'll create any farm this was going to be called category because say, PJ s the category e g s here. We're already go up. I said that in the back and days Kyra were created far. What are actually going to do right now? I do copy for the the code of the many Gs, and the whole place is in the category. Easy s safe. No, we have to do some stuff with it. First of all way. Have to check if the category collection we have to, um, called the calibri collection. So menu category collection on categories. The cost is going to be called Scotty Breeze like that. So copy this code on the back to the model. Do the same with fist degrees. The same thing. Cool. Now let's go back in the category. E g s on work with it. But first of all, we need to see, um, what way have passed as a result. So we were best category into Brenda. Yeah, the past category. So the e g s. I'm going to change the menu here. Everything has a menu. Let me explain to you many of you replace it with a category. So would you place this? So, first of all, we have this category and has been changed. We have many acai berry. Now, as you see is going to be changed by here? Yes, for the links. It's not gain trouble, you know. Guys Degrees? Yes. Um, the menu. I actually why here? I think put like that. This is the thing that I wanted put. And he is going to be chi breeze. So onwards replaced the menu here for each Kyra as in category on Do this stuff. Degrees goes this a slug categories Final Scott Every day. That's it. Finish now. Set up our category collection. All the functionalities in the The last thing we need to do is in the header inside of the back end. We need to specify the water, so I'll, um, at the Roger right now. So look up at the menu here, So copy the same. The same code instead of many type categories. Categories? Yes, on. He is going to be fruits, but said Perfect. Great. No, it's going refresh our website. Now you should see the category inside of the safe site bar. So, as you see, click on the category. We have created our category as this year, so we can just know. Add new category on. We haven't Eric. So there's no create category mentioned way didn't create the category. So let's close all of these taps and let's do the same with the rest off the plot. So let's go to the back and on to this. It's me. This copy the name they looking for. Can God agrees, creates categories into the same for the categories, so create many older the copy and paste it here saved. And now I will do. If you find a menu, please change it to category. So let's go up. We have a new category. This is it on here. Tired Here. Here's Kyle Avery's because we are working with, um, slug on. Then we have many call. This is it. There's, um, awesome, uh, way we need here, too. Great. So this is it. I think now we should see are paid. Refresh on what we're just added, and you write the kind where I'm not going to say blood instead of the placeholder. Or is it the placeholder to say, For example, the category that's good should be about, for example, landscape as an example? Was it small? Will save go refresh. So let's say, for example, photography uh, P is going to be here. Everything in small slot or work. So click on the and new category on a Caribbean is not defined. This is the error that we're facing right now. So let's go back and look up for degree. Basically defined, but there isn't back and control. So let's go back to the back and controller. I look up to create that. We apprehended this successfully. Now we have here the errors. So category. Yeah. Didn't find the Khyber because we didn't call the model since copy this and instead of many of the category and is going to be category two no safe. Go back every fresh on recent data to see what happened. It seems that we haven't ever I think check with this era felt Look up this old ever category. Um, the property name is undefined. Cool. So he doesn't or he can't find the guy Very cold name. Court this for Stop this. Let's go back door code on. Go down to the create post here. So when he pass in, do president body to, um to do the same. The model. Let's go tomorrow at Yeah. So the Congaree. Yeah. What? You see the swat this the category So para green Small ST not the capital of this. I think this the main air this way I'll face in this era. We have to, uh, take this so as they have successfully at our breakfast category. Now, if I go to the rubble three t application on, then refresh my collection or my database, which called Portfolio. I can see the new collection appeared That cold creates also the culture libraries. My, I'm so sorry for my laptop, you know, is the I three laptop so sometimes takes a long to run. So refresh on. You can see Now the Kairos has appeared on We are going to see the new objects to So all we need to do right now is just expand it and you will see the photography. And after after over slug in the name successfully has been ad. If I won't delete this one, I can delete it clicking on this. But first of all, gonna make sure I want to make sure that, um I have completed the work. I've just added the Greek. I agree, but it category. So let's go back into back and controller on here. we have a category. Copy this on inside of the back end. I will you fall e j s a couple. The code of the many faces inside the category and then inside of it, I will change something called menu to the chi. Agree So category is going to be libraries like that? I didn't mistake. Really? I did a degree. Your I d on that set. Cool on. Finally, let's go back to the back and control and make sure the quote So let me explain to you let's do the refresh. And, for example, if I want to do leave this one and I click on the delete that I didn't get the categories off defined this undefined, right, let's go back. And three, The action happened when we click on delete. But the problem is, he hasn't been defined It him, you say? Say what is the really, um, sorry. It was re diet nothing. So instead, here, do dive to something else. I think we did the mistake to here. So we need to rid Ike this do the into the menu and in here I want read. I've this to the admin Carrick, please cool. We should Oh, can't we know we I can't say that work is done. So this, for example, at an incredibly called video on If I do the video No, I should see the interview page. But when you see this still running, which means that you have an error in your coats, let's go back to the channel and see if way haven't error off course we have No this always called Carrie Collection is not defined because we started to the sea capital letters. So let's go back on instead of the edit. Here. I made that mistake. So let me check so very opposed category collection. There is a category collection. I'll do copy and looked up from this category collection. Cargo quote. Let's go back to the model and you got this one Cherries. So we need to make it this small cup with small letter. Cool save. Now let's go back. Refresh. If you feel that you're you are confused in this, you can just go ahead into the stuff that we have made with the menu and instead off with many EU countries, demanded the name of the menu with the name of the category. Coal perfect. So let's go back. So find February. But I d is not defined this another problem. So let's go back to the back and control. Look up for this. Um, so, like Ivory? Yeah. I made a mistake here. Save. We should see the results a date on. I want, for example. Yeah, So we are going to eat it. So let's go back to the category in it. And I want you to video to example. What about present comedy? As an example update the category. They initiate the slaughter of the names committee on this, like state as walls, which is a video, if you want to delete. It happened early on them every story. So this is how you can create the category. Thanks, guys. For war, chance you in the next episode 21. Backend portfolio part 1: Welcome back, guys. I help you. You, you you You took the experience and had the idea on how to create on manipulate with the exposure. So now we are going to create our portfolio. So the poor fool you need I'm image tattle the category that belongs to on without forgetting the three older stuff. So, Percival, let's create the categories for So let's go back into the admin deaf board on the screen, these cars and skate ad. And now I'm going to add the design, art and development libraries. So So here we have the design. So design head, I did multiple category. Then court finally development. I just want to take the same example. Let's say you can use whatever you want. Okay, so this is thes arm the library's No, let's go back on. Take a look for for the older stuff. OK, guys. So first of all, let's create here. Roger, um, the portfolio section inside of the Okay, let's go back in your code inside of the views on the back, and we're going to go ahead into the header. And he said, the hitter are going to just copy and paste the code that has a relationship with the Roger . So it's good. Um, I don't know why. Sometimes it's crashed. Um, otherwise I will try to use the Adam and see if it's going to be fine. So Okay. No, we should see the hitter. Okay, I'm going to open up the Adam does he may 2nd, guys, I'm right back. If you are using Adam, you can can use Adam. Otherwise, if you see that the views of you is good for for you on just work. Fine. You can complete the work because the mystery thing is the code that we're going to read right inside of the sort of the next image or not, Detective, who will make the changes? We are the responsible. Andi. We are going to make the changes for the coat, so we're going to create area like this one, but it's going to have a lot of things happening right there, like the images description session. So I've already all opened this project from Adam Can Just if you are using, if you want to change the text is already just drag and drop the project inside of your Adam. That's it. Cool. clothes these tabs cold. So actually, what we need to dio is as if I told you we need to go to the back, and it's of the back and way. Have to go to the partials hitter on inside of the hitter way are going to create a new folder. Oh, Are you on a side bar menu? So does go down on Dhere. It's Copy this and paste it here. As if categories old say Ford for you or for Yeah, this is it. No, I mean, that's it saved. Now I need to copy this. I will go back into the rotor gs instead of the Roger. I'm going to add this Roger under the back and controller cold. So this type roger dot um, gets on this euro. We need to get back at Controller is off. Sorry is all. And that kind controller, I thought I will name it portfolio. Say no. Copy it. Let's go to controller back and controller to go down. And it's time exports or for you to be a function has a request in response as usual. And here we're going to just render rest render page back in. Don't say poor for well, the page is going to take. It's going to be the similar one as the menu or category. When you enter the kind where you will see, he add, You didn't delete all these stuff. So let's go back way Don't have here the criminal inside of the Adam We can just go ahead and start directly from Adam or we can or otherwise we use the Timina So I will go and use the terminal c cmd desktop and see the portfolio on from here can say good morning TV and then see if our app is working out. So there's a problems call days, the Beckham strollers all here or this problem. The reference ever back was not defined call. So we didn't write the code correctly. I think a copy is on pace. I'm sorry. Yeah, say now we should see the results. Refresh Our election is going to work. Cool. Now, As you see, we have added the portfolio. But if we collect, nothing is here. So we need to create the portfolio inside of our views. Views back end on sort of the back end. Would you fire this possible into gold. Um, portfolio. So this copy this from here. Type this thoughts E J s. And then I'm going to go into the menu Or is it many of here copy the whole code? And he said I decided that performing. And then we're going to do some changes. So first of all, we have the ad. Bonnie, is this as going to be retired? We're going to redirect this into portfolio creates This is the first, Then he and Port Folio and for the area called Now let's go down. And you have yet the t. Rowe for the name and slaughter actions that actually in the profile you need, I think, all the things. So let's go back into the owner short case file or the compilation file. Then I'm going to run or execute the suppose we have post single in the work, single page. We need the work. Single page. I think so. Let's see how it looks like we enter in a colt. So let's click. Um, yeah, this is it. So we need to hear we need we need at the image. First we need on the sky agree that won't still need the title, and we need hear the description that description are going to use a text editor that going to make all these and finally, here we have sort of images off the hook for yourself. First way need to do some stuff on me the day this is going to be with the time stamp or already done the only to create the clients on the services coal. So let's go up on start with the first thing. So first of all in the image, I'm sorry in the image way. Only the name instead need the category possible that this before you belongs So caddy for me and next is going to be the title. We're not going to change with the images. Um, here, let me let me show you. Come in. You, for example. I'm not going to show the image here, and we just focus on the main things, like the name off or the title of the pay off the portfolio on sort of stuff. So I think these stuff and also I need to make the dates so here say date. Maybe you can add the client tired clients. That's it said we have four rows and Metro is going to take the work. So let's remove all these stuff. Let's remove the for each loop that remove this one. Some of this one on the tag here. We're going to let this as it is. I just hear. Make idea for now on. That's it. Three. Now want to be for and finally fit to be actions. You know, we should forget this. 3412345 Colt. Let's go back into our AB portfolio on no Should see category title dates. Client's actions. Cool Now, if we click on the add, we should now go should be redirected into a new page in this basement to add us the pro for you. So just keep in focus, because this, I think, is going to be a long time call. Now let's go back into the water inside of the rotter here. We need to create a mother. Rogers is coming paste, and this was going to get as to create a new um, Newport. Four year on for four years in the school. Creates Skopje is go to the back and controller and some back under control. Add exports function, whereas response as usual and then on way are going to work over the stuff. We have already done that with creation in off the post category or they create everyone first to render the page and then we're going to post inside of the patient. First of all, let's run the new page first. So let's go back here on five Pacers Brenda back and slash what portfolio call now copy this. Go Teoh back and New Far pays on side B. J. Yes, that's it. Now let's go back into the, for example, create menu this same stuff copy and go into Where is it before you create peace, then think that we have to focus on a Z to change some stuff. So this is really the first thing or, said Eros, then at new portfolio or send on you work because the work every strip with portfolio so in the form we're going to work. I'm explained here, I'm going to work with portfolio, right, So in the performing the category title dates, client action. So we have we have to work with these four things way should also in clear the images if we go back to the team here. So first of all, we need to mention the category. So to the category. You need a drop down list, right? So let's go back on and look up in the bootstrap. I like show you the way that I developed on my application from the assertion, looking for them some stuff, you know. So you have to learn that, too. So it is going to help you so much for his go into Bootstrap and inside the bootstrap are going to look up three options or the drop down list on See what's happened. Way have as an option. So let's go into the bootstrap on Look at the components, so click on documentation. Or you can go ahead. Dr. Teoh, get bootstrap dot com and you do the same work. OK, guys, So don't judge me guys for the network. So I'm so sorry for that. So let's go into the components on. Let's look here for this group as an example. See, the list group we should have here, um, coal have a lot of examples by actually, I don't want this this off the group. What about John Jones looking for something different. This is the drop down. Yeah, I don't actually need to drop down, so let's go. They got Yeah. Tuesday's spinners. Poor progress publishers, Imagination, Netball models list Group born show off things there. So the components badges breath on. Barnes collapsed. That's what about collapsed. See, um, not this one. Let's go to the forms and check if we can't find. Yeah, I want to see like this one by actually, I need this example. White toe example selects. Let's go and see the code. This is the code. So we need to copy this. It's seven options. Let's go to the Adam. And now we need to remove all of these instead of the bond. I will let the bonds of add new, uh, work cold. No. Inside of the work. Many of the same poor fool you slash create colt. Um, just go back to check. Create cool. No, let's copy or it's paste. The code that we have a cup or the space because they have copied from the bootstraps website instead of example select. I'm going to say, um, categories cool. No, we have select the option and we have options. But actually, any teacher grabbed the Kuipers. Let me thank you actually need to refresh, click on, add. And as you see, we have a search of a certain number off categories. But I need you to, lest the Congress, How you can actually do that simply is removed all of these options. Let's let this one options. Then let's go back to the back and controller inside of the this render we need to mention a new object school on. Then its name it, for example, categories. This category is going to be category collection. Discoloration is going to be all are going to find all and convert this rate. Then let's go back into the powerful you create. And now, before the options, can you just side this? So, uh, you can say categories dogs for each category. All right, don't forget to close the opening and closing tag for each category. Prints are the category, so that puts the option here. And let's say category tonight. Cool. Let's go back. Refresh in love. We haven't earned degrees is not a function. This is, um, sometimes happen. So let's go back on. Look up the beckoned controller. You will see that we didn't mention there waits a same functions. The methods of, say, I think it weighs Go back refresh and the work or the app is going to work. So the categories, you will see that we have imported the category starkly cool. So the next thing we need to do is we need to mention that the volume of this if we save this as as its value, we are going or I'm going to get in the truck because the next or in the future lessons we're going to combine. For example, when you when we want, for example, to push or let's say, send the data here, we need to do some relationship on television. So I want to mention this AM at that moment. So let's go back to work and this at something called value. So the boys want to be in the portfolio and create, so the options here slight value. The value here is going to be the category dogs what it is called idee. That's it. Now we can specify this character I need by its idea. We're going to take not that career me thinks the first thing way should give inside of form. No. The next thing we need to do is we need to add a simple text here. So let's go back and let's copy this problem. The Minya. Where is it? Creates many. I will just copy this dip. Copy it on. Go, uh, based it. And in here, for example, You have here slog. And so it's like the same name. All it's safe, that's all. It is going to be the title that shows here. Okay, Cool. Uh, what about the name going to be here? Battle and the placeholder. We're going to be the same way had here. So copy on pace. Cool. Now let's check our page. Refresh. Now we should see the tower. Perfect. So we need also, um, the image. Right. So the image I just say here, image on responsive images. Ever hear the responsive images, But I actually we need this from the form. So let's go to the component component story and then look for forms and said forms we should see, uh, file. So stop fire. Yeah, this one. I need this import for this simple example. I don't want I don't know if there is another one. Okay, I just copy this. Couple different copy on. Let's face this because we are going to work with a life or the package called Walter. We should specify in the form of the following code. So, yeah, you can say I think a type and stop muted. Apart from there. This. Make sure whenever you pose or whenever you try to add a fire or you you want to upload image. Then you should specify this in Qatar. Okay, this is it. Cool. So here, we're going to say, for example, cover on Discover is going to have a name. All cover. That's it. Um, cool. Let's go back to take a look at our, uh, image way Did it? Post it inside of the form or it's above the bonds is crazy. Service go down. Said this fresh court. So this is it. This is Oh, I see some function correctly. So, uh, as in the image, we have added the title on the category? No, we need to add decks it or four. Our image. And also we need to add or we have to add images. So decided the images. We need to just, uh, copy the same file here, and his one is going to be for them to follow on. Remember, this is the images, but the work save this is going to be images cold. So this is it now I think will be good, but we'll import. We should add more people. This is to upload multiple five. Because here, I'm not going to be able to select multiple fire. Instead. In the 2nd 1 we can actually upload beautiful file school, no. 22. Backend portfolio part 2: I've just uploaded this to sculpture. Okay, let's remove this call. The next thing we need to do is to at, um text. Don't say that defense. Thank you for I forgot the name off. Yeah, time tiny and see. I'm saying we see this, Uh, take see the tour. Let's see how it's. Is it good for us or not? So I see when we got here. So this is a text editor. If we work with this, we can add this to our application. So let's see. Yes. In land mood at such I see this. Great. This is cool. Let's see another one. For example, the CK editor thinks the this this looks to so, uh, cool to a soy. So I will try to go with documentation. Let's see what we should do to import this one will make it works. So this is a documentation. So features examples of reference. We have integration and Euler react on the view. Okay, Futures developers guide. I don't want to cut the video, you know? So I want to teach you how to look up these myself so safely. Let's go with the quick start. Okay, so this is a documentation. Now let's go first. If you're using, if you want to use this M p m, you can just type PM a stall ck editor or download from the official website. So I'm going to download it. So don't load on this code. Uh, I don't know this one. So save. I don't know how much he's going. It's gonna take. That is the quality. You can use the cdn too if you want, But actually, I prefer downloading describes. So what is don't loads Doesn't deluded. Okay, so that's really under this click on down there again. Okay. On his don't it Cool. So, first of all, we need to call this ticket Digital mentioned. This is just an example. And then all this the so just open it. I'm sorry for this. So open the secret editor. This is it. Open your portfolio project and desiccated. Or I would love to put this folder inside of the public polling folders. So I'm going to put this inside the public, and I would click on the public Sorry for the public. I wouldn't move this, um, darkly to or I will live here because this is thes are responsible for the backhand. It is for the front and call. Now let's go back to our code. And that's thought doing that. So it's going back into the header because my way through the head of for each base. So we are able to put this the first. We need to call this script first copy and paste it, for example. Here, don't forget at this because it should be following the same rules. Save the next thing is to add a text area inside of, um, your coats and let's go back here. Time it's at a dip and paste this skirt some of the there. And if should have I formed or should be inside a form group safe. The last thing we should do right now is to add this script at the bottom or inside of the fall. Okay, so before form is closed, open this. Could you can choose your I d. Ok, but I don't actually want to change the idea. So there's no this refresh and see the text editor. Um um uh, want to say it looks simple. Look, any functionalities, But I know we had some problems. We have solved. So let's check. We've added this one. So the name thesis the I d ck it or replace place Text area with the sea caves. Instance. Using different configuration cold. So this is it. I'll try to copy this. Cut this base inside the footer and see if we got the result. Save back. Refresh. Um, let's go and cut this from here on base inside the food on here. We have to move for the three. Have to follow the rules. Uh, text, doesn't It? Looks good. I see. Yeah, The sick a doctor? Yes. If we go back into the public, we have a folder called Zika Togs. Have this folder we have that this name. So it's renamed this copy Onda Space. This folder there safe. Just take a look. Yeah, cool. No, we have implemented our code. We have forgot to add the folder. You see, Call now. Our secret editor works perfectly. We kind of like a lot of things we can do. For example, bowl we can do you love with campers on making cures, etcetera. OK, this is it. No, we have added the description description. All of these things going to be inside of the description. Then way have added the total. As you see, we have added the image for the cover story. And finally, we can add images off the work. Perfect. Now we need just to implement all these things are coat. But first of all, let me or let's cut server from running and then top NPM install Moulter, enter the mortuaries package off the hazard, or that is responsible to upload the photos into your website. So click on the multi, um, dash and PM on, Go ahead on C the documentation. So first of all, when you just all the multi, we've already done that. Let's see. Okay, sometimes takes takes a little bit long. Okay, So when you, for example, at a action you have to add the in Qatar community for me, a body at that on that inside of the file, you have to mention its name. We've already done that before, and then we need to do these stuff. So first of all, we need to call the Moulter. You need to specify the upload, and that's it. But there is another thing we need to add is we need went, for example, Motor Richard Register. Or when we upload an image we should see its extension with. It's a real name. So if we didn't add function, then the motor will rename the image. We will not give it an extension. So let's see. No, we have installed Moulter. Let's run our service by adding nude, more TV. Then let's go back into. Because all these let's go back into ab togs inside of the APP. Here we can copy and paste these things upload, save constant here should be and constant Moulter equal that's going to require. Moulter then calls here to upload multi destinations going to be in a folder called Uploads . And if you see when I when I click or double click on this, it's it's created. It's created a new fuller, a close call. Those go back. It was folded and not created. Don't worry, it will create the flight automatically. Call. Now let's go down and a cup function. So this is all the things that you can do with them, Moulter. So we'll stick with at this until the end. So this is it. This way. This stores and engine gives you full control off storing files to disk. So I'll just copy this on. Go back here and paste it here. Let's let's storage equal. Multi. This source on will do things. Okay, That's it. This when we need right now. Now let's go back to the Roger and specify what the the father we need to upload. So to understand this, you can go to the views, and instead of the views we have probably create inside the 4 40 create, we have added two parts with 1st 1 is called Kovar and Second World called images. Right, And each one has a name. But if you, um, notice we are going to upload Milt to kind of images from 14 on to do this, you know, we need to actually go to the documentation and do something called upload Multiple? I think so. Let's go up on look up for this way. Have to Yeah, blue blue tingle upload fields. It's an array and images cold. This is, I think, yeah, this is a blow to fields. Cool this stick. Look off, lose single array fields or not stop. It is now let's go back into the Roger we're going to work with this powerful you create, right? Right. So we need to add another middle where this man there was going to have to represent the multitude inside of it. So just type upload fields and inside of it is going to be in Ray. And so this the rate is going to be on objects inside of the objects. Need the name, and we need the Moscow means home Need pictures. You want to upload for the first feel? Let's go back and take a look. So the first field? Yeah. We need to transit the names. First Field is going to be the name off your projects in this case. I name it here. All five. Name it cover. So copy it ongoing type cover, and then check the video recording. And then the marks ground. It should be one, because we're going to upload just one thing off. One image right here, Then at another objects. This object is going to have a name off images. Don't forget to put this between two quotes on the max calm I was going to be Let's say it's called as maximum images in here. We have just on disability have just, I think, for maybe three. But you can add 12 images as the highest level cold. So this is it. Now let's go back and print out the request. Our body from this page. Cool. Let's go back into the back and controller. And so the back and controller, we need to go down to the probably create and so this portfolio create. Let's, um, do the stuff. So first of all, we need to post way didn't create the post for this. We are working with gets We don't actually need to put this middle where the get boot. Instead, we need to put it inside off the post. Let me explain to you, Roger Post. Aside from admitting flaws, 44 year creates the same broad, typical girl when to push himself. Roger back and controller. Thought is all authenticated. The easiest, authenticated and beckoned to shoulder for then. Sorry. You need to face the upload fields then that can't controller dogs on support. Four year creates those saved Go bag. Copy. Go back inside. Exports this side function which you have requested response on Now we can contact with our model if you remember. So the model here way are going to connect this way. Are going to stall this into the doctors. But first of all, it's called the law. The results. So request don't apply to see if we are in the correct path. So let's go back. Refresh. The application is crashed here. Think. Yeah. So what is the problem? So we have a problem here inside the fiend Rogers. Let's go back to Roger. And that seemed What happens? Him. So we have added the first object. The second object, right? And each objects has values. Name, name. It's an array on upload fields, which is the main problem. Upload is not defined. Cool way. Didn't mistake. You know what? The miss, What is the mistake in the APP? We need to just copy the whole entire curve that we have faced in before on couples before . We need to paste it right, he said. Roger, not about sort of the app. So let's go back. Refresh on the application work perfectly. Now let's elect, for example, development on just give it a title. For example, this is this is my very first, um, poor fool. You work Then let's use an image from my desktop. I will choose this one and we can. Let's make this a text, for example. 1st 1st let's make this as balls. Finally, let's upload the images. Resentful. Multiple images. Let's click on this. Let's see what's what's the result? So, as you see, we have here the title on the editor. That's just true things, but we need to actually oppose the whole entire things here. We just received the channel on the text. It is also way just received this one. And this one the other one. We didn't receive them. The problem is way. Need to go and check for our, um let's say O R, hopefully you of the portfolio. He and we've mentioned the we we've done working with the images, but we didn't call the images so called images. You have to do something called a request files. So let's go back into the back under control on inside of the council log because the body s consul luck too, through quest told father on the Fozzie here has risked ship with the multi. Okay, so these are two things that way are looking for so before that. I want to mention that in the report before you create, we have created the categories right, but we didn't give it the name, so we have to go into the select inside. It's like you have here categories category. I did. Now let's save, go back and go to the website and now we should see the result correctly. Side. This is my first before you work. It's called me the same thing here. So, like the art on let's bro's. So this is the image make. This is before you, uh, text editor make this bold on for the works. Let's say say these twos images. Thanks. So what we add now we should see the results. You say Let me make this bigger for you. So we have added Dick, I agree I d on value Is this idea this the idea of the cover of art and we have the title we have added the text editor. Here we have the editor cold and here also we have the cover image and we have the images called perfect. Now we need to stall this inside of our database. So how to do this in a quick, uh, See, Let's go back into old file here and go into back and controller says, Let's close the older that the older tabs here, let's remove these two lines of code. And let's say here let uM, let's create this. Create post That's all this saying that's, um, work equal New port for you. Uh, I think making create works is better than pro for you. So this work is going to take the request or body and request Don't files, too. So these do things that we need to add. Now let's call the work. And there was going to call a method inside of our model, which hold, um, say, for example, ad and this ad, if its success, or if the result is success, then rest, retire, retire. It's going to redact the admin slash portfolio to see the Adam that we have added for otherwise. Or else catch the error inside of the cafe air this sand for for air Cool. No, let's add a moral at the top. Copy this constant faced, uh hey, se work, work. Just copy this and let's go to the model right click New Fall. I worked or JavaScript. And it's not the job scripts created constants work that would have a function off. Um, work and images. So this we're equal work on this images is going to be this is it No work thought through time dogs at youthfully function and inside of this function, we're going to raise the data inside of it. So that makes plain too So this work, this work, it's going to be an object. So this object is going to have, uhm I'm going to have before these had that we had the category i d. So it's type this work, uh, or sweet story. So the category i d on this card good idea is going to take, um this where category i d Let's go back and check here. Yeah, I agree. I d Then the title is going to take this work titled and so warm with this work Cattle you need Also, people see the cover image to be or I will put the images together. They're wrong and we have also What about their digital one? So I won't rename this inside of the views. So where is the create portfolio on? Let's take a look here. Has this name on change this to description? Save a couple of description and paste it here. Description. Contribute this work those description on Finally, I think we have 123 Finally, the images images this well, not this work, but this image is on. That's it. This image is cool. No, we're, um we're right in the structure off this work now. And we have implemented that this image is to the this work cold. Now we need to insert just this data instead of our database. But before that, I want to add something called the time stamps. Since time stamps is the timing. So let's create Listen important this the date and I will just copy the created an updated at because this is really important when you work with data. So this is it now, save. And underneath that await or before that I'm sorry. We need to return. And you promise. So it's cut all the good that we have, uh, Ben and its return you promise on this. And a sink resolved on reject on pace this discordant, then aways and say, Wait, what about, uh what do you think they the collection That way. Have Teoh to call. Copy this collection. Could I think we are going to name it? Portfolios. Well, say works on, Say, work collection awaits. We're collection thoughts. Insert one on this one is going to be this. Don't work. That's it. Finally, it's result. Cool. This is it. No, we should see if the good results. Are you sure you can see the results when we do that? Let's go back into our back and controller. And here we should be. We should see that the admin portfolio. So let's go back to the poor for you. Thank Click on add. And now we should see the perfectly I think he there is a relationship here because I see that there is in category called portfolio and we didn't add a powerful yet inside of our database. I don't know. Um let's Let's take a look inside of the coat. Powerful before you e g s and see. Yeah, we just put this empty while. Okay, I understand. Right now. Cool. So let's go back on. Complete the work. We don't have any works here. Collection. Just click on, add and then it's great for example, development. This my first port for your work. I'll just copy and paste this to me Too much time. I'll need this. Make this with Why? What's that? Then? I would include some images. Don't forget. I don't remember. Do don't let this empty because you will get an error. Okay, so click on add new work. And now let's see if we got a result. No. So there's an error. Got connected. So let's go back Contin ear. So there is an miracle. Work is looking construction if you see like this error, which means that you didn't import export the module. So need I'm here to say more Your got exports. People work were saved. Go back. Distressed. No should see results. Yeah, Cool. Ah, Now we have added our collection does go back into the portfolio. Refresh. Now you should see a new works collection appeared inside the works collection. We need to make sure that everything looks as we have mentioned. So click on their separate issue with cover idea The title description the images inside of objects we have the cover image on. We have images cold after images, school. Then we have a time stamp call. Everything looks perfect here. So the next thing we need to do and we are going to do it in the next toil is we're going to push or to send the data here as a Z. We've done with many of the category, and then we have going to work with it and delete. So see you guys in the next Detroit. 23. Backend portfolio part 3: Okay. Cool. We have started doing a lot of things. We have started to develop ourselves our skills, and now we are going to work through the portfolios. That's complete work. So the next thing we need to do is to go to disclose all of these. So the first thing we need to do is to go back into the back and control all backhand side of the back end minutes. Create in your file. This file is going to be called, um, portfolio for you in the score. Said it for ideas, and then we're going to copy the creates to the idiots this occurred that we need to do. Cool. No, um, we need also to create a brought over this. So it's great. Roger. Perfectible all this crate motor and then we will be back. Let's go back. Culture go down, Brought her, gets the admin portfolio know are going to eat it. But I did what we need You the idea for several. Say I d on it. Cool. No back and controller is going to be check if the user is a fund dedicated or not, is off back and controller. You need to create this as portfolio. Last did it say Cool? No. Let's go back to the back and controller as complete work as usual exports. Name off the controller that we have created breast response. And now we have to make sure that this parameter that we have going to work with is available. So that's work equal. You were. I'm going to be request a body request on file and requests or problems. I did cool. No work. And it that's called me the same crude here. And if its success, which means if we have updated, then we need to go back. Otherwise we'll go to four full years. Slash waas class. I need to go back to the edit, Request off problems idea President. Now let's go into the work. Add its methods. Let's go back to the model way. Have category or sorry work as other work here. Let's work for a time for it, fully function as usual and we're going to return. You promise, I think resolved be jags and those that work. So now let's add the i D. So the idea is making the idea, that's all. So this i d call idea and they make it simple. So let's take a look right now. So, first of all, we need to away for the work collection, right? And we're going to find one on this far. Finds me to be an i d. This court, I dig going to be an object. I d off the this idea date. So we need to create a new constant I object i d that acquire longer. Davey object today, let's say of this idea. They lost two words in capital letters. Is it? No, just put this in a variable. So let's make sure so if this make sure available, if it's true, then results resolved the same variable or this result else are going to reject on we're going to rejects. Um, an air of this was going to say what form quote notice to go back and you're back in from shoulder. So if it's a result, then go back else or Brenda think way are going to work with the edit, which means way. Don't want to find. Instead, we need to get it. This is the I hold him in this, but we need your first to render it because in front of this and then we need to get it first. Okay, I just get in trouble. And I usually get in trouble when I work a lot. So we need to render profile for 40 story. Oh, was diffuse backhand performing a did it. So I want to run to this one. It saved. Go back, Refresh on Meteo. Add this to our properly. First, let's go to the back and controller and here we need to call this the back and cultural for four year here. That's as object inside works as we went to wait on and I think here. So we're going to wait, um category collection. Um sorry. Work collection and find everything to Iran. Cool. Let's say if we have the work election, we didn't commission it yet, so let's go copy this. They said right here. And what? We should have the collection. So what we need to do run out? We will need to check all code running cool. Nothing. We have no Arabs, No. Let's go back to the e. G s portfolio on implement those things I've made. Let's add here, since it works for each function work, do these things, So don't forget the GS. Lose opening inclusion tags on. Then let's move this good inside of it. And in the first we need category. Don't. Well, I'm sorry where I don't category I d The 2nd 1 is the title. 3rd 1 is the date so created that I love from the updated as updated. And finally the clients. We didn't add the clients inside of database that we're going to add this Laurent. Don't worry about that. So refreshed. And we should see the category. That's what we are going to put. Push the category name here inside instead of three. I d. Also, you have to do this. Don't worry. Called Web Other dis successfully. Now if I click on the edit, which I should see the so let's go inside of the other here, say, here, work dogs, I d. I say go back for fresh and it we have for four years. There's no, um, there's no I d. Here. Uh, I'm sorry I work with me. So for full year, I think Let's go back to the Roger and see Hopefully, yeah, the perfect cold. So refresh. And it there's no profitability inside of directories. Scott be or rename this Andi. No, I remember this the back because we're going to render Save. Go back Refresh. Now we have another aero. She's categories is not defined. Call. Um, that's rendered. And so this Let's stop. That's called being piece this one refresh. And now our app should work all right beside your otherwise, If we have problems, it's mentioned. So we didn't at a nascent function here. Basic called fresh. And as you see, we have Theo updated version. Now we need you to just put the values there. So let's go back, save. Let's go back into the portfolio in it. And this hoping work. Cool. So where is the total the value here is going to be for you about Let me see the back end. I want to work with a portfolio and it and that purported it. I want to mention I want to add why I've got so here we have the So let's go back into the work model and sort of the end here. We have to pass and make sure and the mixture is the collection or there that off this specific collection saved go back to portfolio in it, uh, Beckett story and inside of here saying result as usual. So results on say, work is a result. Come on, Cool. Let's go back to populate it. Work as of the world's going to be the work total as copy these same value and put inside of way have the image actually round. We are not going to update the image. Dear Leader Image Something for the images. Yeah, to now let's go on and complete the work with this. So here way Don't need the volume. Instead, we need to just type here description save, go back, refresh. And they see this My first work and this idiot version cold No, we have done this. Have created this. We should know a blight applied the work. So let's say here site updates, work call. I think that I want to mention is, um the expression Yes. You make again trouble with multiple when you want up. Wanna want when you want to upload images So I'm going to make this for for is single Let's put you this in the next episode So let's stick with this and let's do the updates we're going Job. Just three things here. So what we need right now we have created the back entrance stroller. Now we need to create the post for the back of For the portfolio. Says go into the Roger and Skopje the Roger Paste on type he opposed and hit it it post carpet is back and controller exports before you on regress responds No, let's do a work with the editing. So let's cut the same code here or one of you pose. We need to get the data. So I need to copy this code and older Some changes its instead of rendering here. I will dio at me slash me slash support for you and he is going to be redirected. Go! No Here is it. Um I want to, uh let's say did it to move this resolves out. Otherwise going to be reductive to the, um the idiots. Yeah. Now let's go check for in the work to work Ty Depos every time you promise on a Sinclair is old Jack. And now we can start update right cold. So the first thing we need to dio is a waste for the work collection updates point on the subway was going to be a good idea. Object. I d this I d as usual. No, When you just sit on, we're going to sit here. The data. So we need Teoh said the title as this work title on. We have also description this were description and finally category I d to do this work, whatever I d that's it. If its success then result. Let's go back fresh and take a look. Talked, for example All changes to arch update the work. And we have here partner, we have just add, I think so. Let's go back and eat it. Um decks, Yeah, cold. So both to to second update instead of updating his adding I What is it? Let's go back to the edit for the portfolio and look up for Yeah, we have. We're calling the create this they the issue. So we need to say here work thought I d and then it this the roger If we go to the Roger Disturb Raja Disagree, Writer Roger. Sorry. So let's go back. Refresh on a school 83 stop three here Part three and did the work. Now we should see we have an empty result? No. Let's check why it's empty because we are mistaken way have or wept on a mistake. So let's go to the portfolio or controller. So this left work and you work because body was filed. Response. Your I d work on those three things from the model. So this the work, the work image and I did call this the first thing Next thing we call this variable and we give it Aun said. We said if its success then retired else. Um no a c send his read. I'm sorry. So the problem, I think is in our model was go back and check if we had made a mistake. So we have just say updates one and we have to update the following results. Sometimes you said you feel like this is hard to fix and so on. But don't worry, guys, you can't fix this. So let's go back on into the create really update it. As of the end here, we have, um, just changed this one. And the problem is why this doesn't give us give us the empty because we didn't go into uploaded images, so he felt that there isn't images, this one or this life that I need the problems. It's no safe. Go refresh and though should see the it Hello again. Example. Low game. Sorry. Again. Again. Go back. Update the work on. You know, we should see the results. You say perfect. Cool. Well, this is how you can get it. See you guys next episode. 24. Backend portfolio relationship with aggregation: looking back, guys would come to this new episode. Well, these episodes we want to be special, you know, going to warn about relationships with mongo DB So imagine he went, for example, we are recreated our app, right? But we need here. So it we have a sort of identifies your sort of code, you know? But actually, you're only what this actually means, especially when we talk about categories, menu, etcetera. So instead, off person or imprinting this code, we need to print its name, right? So, for example, this is a pro for you. I don't know where it's belong, so I need to do some code. So that makes this code redirected or changed its a real name. So how to do that? Well, there's admitted in Margarete be called Aggregate, and this aggregate makes some everything's there are all these things easier than you think . So it's going to take this. I don't fire and it will go to the Calgary I collection. Then it will see the idea of the cannibal category collection story, and this identifies going to be on. It's going to compare, um, this. I don't know if it's true that is going to give us the name. Otherwise nothing will happen. So let them explain to you so crucible instead off or let's go first to the work dot Js model or sorry, the back and controller and out of the back. Of course, we have to go into the export for four year section this one. So if you remember, we've done this with work, election don't find Dr Rape. But in that case, I want to change the to find with the aggregate. I agree. Get thank that So the idea is going to take an array and side of this race is going to be a list of objects. So to start with the object first objects on, it's going to be Look up. Don't forget the dollar sign. This is the scent dies off. Look up, then something look up is going to be another object. So no, we are going to work with, right? Cool. So first of all, we need to look up from which collection we need to grab this information so it's not from and we need to grab this from the categories collection, right, and it's going top categories. Then we have also something called Frayn's Field from I Feel, which means that from the from the category, give me while you are looking for on What we Are you are looking for is called the I. D. So this is the idea you are looking for. It's an object, remember, it's an object, not a string. OK, so this is the obvious idea. So let's go back on the foreign field here on start here and the score idea. So this is the field that we are looking for. This is from where we are going to take the day. Now it's about or above this we need to mention local field, that one or we want to match to the next field, which means way outta here. We are actually in the inside of the rocks collection, which means we all here we are in this collection are working with this collection. I want to take this card, agree I d on match it with the categories. I d. This one I need to match. If it's it's the same, then I want to print out its name. Let me explain to you. So here we are going to type category idea from where I got this from here. So I That's couple the name or just write it yourself. Okay, copy this. And then in which collection you actually want to print out this information, for example, let's stop here as I don't wanna get create said. It's like a virtual collection and this want to be called the same category. So I want to bring I want to get the data. When I grabbed the data, I want to put all the day that I got from inside off the Keurig idea. Remember, we are going to actually face, um, sort data inside of a race, so we need to look through it when we start working with the data. OK, guys, So let's go back. Let's save now this Do let's go back. Refresh. We're going to get the same result. Nothing changed. The real thing is changed. It is going to create for us a new collection, which is the goal, which is called No, let's see. So don't forget to add to Iraq, right, guys. So then you can work over the correct through the collection story. So it seems that we have a problem with mongo db. So let's say on health problems rejection, warning, Mongol error and the arguments. Look up. Okay, let me check up local field. It sees it Seems that we made a mistake with local field. So, Frank Field, local field. Um, there is a problem. Hands checks from the categories. We're going to take the data from this one. This place here and then local field is going to be work electoral inside of the work. If you don't understand from where I got this code, you can go ahead on top here, look up mongo db, and you will be redirected deathly to the documentation of the mongo DB. And from that you can understand from where I get all these. First of all, I understand the code. Who is works that I implement Implement code inside of my coat. So let me explain to you how I actually did this. So this is the documentation. If you see here, we have to mention the look up inside off our code on. Then way Have some fields. We see we have local field, which is this one we have from Skopje phase. If we have Mr everyday mistake with the, uh, word on we have, as as you see on each or each objects how each volume The object has an explanation for collection to join fields from the imports, documents, etcetera. So just go back and take a look into our website. We see that we have a problem. Or let's see if we can fix this problem a lot. Syria's go back. What's the man problem here? So it seems that happen. Unknown argument. Look up inside a local field. This is the argument that we have a problem. Okay, let's save Let's stop the server for the moment. I'm sorry for this. So yes. Then this running again. Let's take a look for the portfolio. You have caught every I d print out this one on. See what we got. Now it's work. Okay. We just, uh I think we had a problem with the writing off the way we write local faith cold. No, we have done with this. So as you see, we have get or we got with the same result. Actually, I need Teoh on it. You know, just this file what I can do with this if you see a few. Now go and do some work here. So, for example, let's go to the portfolio. Actually, I don't. I don't wanna print out the caliber ideas, so I will delete this category idea instead of this. I'm going to cause a lot of this cause old log, the work, just the work. I want to print out everything and see if way already added a new collection to our database. So let's go back and see if you see, for example, we have had the idea or the last portfolio. We have something called Category as a new collection of a new collection, off a year object, new list off Ray and instead of our among with the collection, which means the character. But if you mention or if you see it is empty, the problem here is we actually going to compare between night and not object on their strength. If I go into the category here and if you collect on the object, you see that this is an object here. The type is an artist, I d. And in the work here we have the carry gravity. We have a strength and he cannot compare between a string of attacks on the object. He needs to be an object. Still for category. So here we have two options. The first option is right. Click click on documents and then change the top to the top Here to object, i d. Otherwise you have to remove all the collections from your doctor is Let me explain to you so works. Select all of these three collections. Delete the documents. Click Yes. Known is go back and refresh. And we know we have removed data instead of the elevator. Didn't think we need to do right now As you have to go into the model and said model We have something called work. She s right. So it's not the world orgs we have There's something called category idea. I've already done that in your coat. You should see like that which is this work category? I did cold. No, we need to convert this until our application that this is an object, not a strength. So it's coming to your clipboard on type objects? I d I did We paste in the work, which means don't forget Teoh. Mention this because because this Obst I D recalled from him. Right now, when we start creating our hopeful, you know we should see that carry very I d cool. No, let's go back, click on add and that we have a couple of permission hand, for example, the type, for example, our categories. I would say It's my very first Before you work, let's add a cover image. And then it's like the images of the work it open on that add new work. I see love. If you see we have nothing in the category. Now let's print out category with its real name. But first of all, as you see, Rip added a new category. But if we go to the Mahdi Be collection, double click on it. We should see an object, i e. Instead of strength, which is cool. Now let's go back into the, um, terminal, and you can see right now that we have added a category inside the category collection, which is category instead of Ray, the idea calibri and the name of the calibri to now where we need to do it. We just need to print out the name off your our category. Let's go back into the portfolio e g s from the back and click on the portfolio dot e. J s. And now that remove this on, let's do a look or let's loop through the Calvary. So here what we need to do What did you call the work? Right? Work dogs category vitriol Clinton that were created from the code dot For each, we are going to look through the legal categories function and sort of the function. It's thought, for example, cat as category. So here we cannot beat out the categories. Say, here, Cats, dogs. That's close. This closing tag opening tank, my game trouble. So cats don't under name off the collection, which is this one. Now, if I go back, refresh now you should see that the calibri now or this portfolio information is or has a relationship with the Chi Bree or this So this May I let me add a new trigger, a new thing. And let me explain to you, for example, on at something with developments. For example, this is just example selected pictures the cover on at the new work working on the out new work never see we should see the development and so want. So this is how you can actually agree. Sorry. Create your port for you. Now we're finished with this weapons with the aggregation we have wanted to created relationship. Now let's go more. Go ahead and show you how you can actually can update the cover image for your portfolio to see you guys in the next. 25. Backend portoflio updateing images: Whatcom guys from getting to this new opposite. I hope you have understand the last or the previous episode Well, in this episode will solve a problem. So if you mention if we click on the edit now, you can't just the category, the title on the description, that's all. But if you remember, when we click on the add, we have here the cover image and three images off the court for years, right. But as a developer, you have to make solution for your clients. So one, for example, someone want to change. Maybe he made a mistake, one uploading his picture. So you know, he shouldn't change the whole contact instead, off printed out or getting or instead off changing the whole product. We need to make Spacey. We need to specify the update just for, for example, for the cover image. Because if you send an empty array or an empty or you didn't mention or we didn't upload a picture here, you will get an error on this area to fix this, Or you should be always should go to the database and remove the collection and someone so you have to make attention. So Let's in this course create an update for the comfort image, and I will let you do the updates for the older ones. So see you guys, that's working. So first of all, I would love to actually at him inside of it and delete, I love to add Changed the cover image here. Bonds, Let's go back in your code On the side of the powerful GS here we have the actions, right? So the actions are has risked ship with this t t d. But so is above. I would copy the same code above. I will do this one. So work here and it corporate image. Right? Says, Hey, Cooper se. And we need love to create the Roger for this one. Right to copy Lost one and go to the doctor with JavaScript. Let's go down and create this rotter dot Yeah, slash admits lost sport for you slash day of the specific portfolio on even cover then made me to make sure that the user is a fun ticket to the changes. So is our on back and controller. I thought it it cover It said hopefully combined, I think sounds good se. Now let's go back to the back and controller at the bottom. The side here. Exports for 40 cover image requests and response. As usual, on day, we can do the trick. I remember We're going to work with the energy so inside of the image we are going. Teoh, we are going to charge the Amos. So let's go and read the image of its structure Inside the work, for example, let's take the first object. So the image is it is inside off the image. Is this the first thing we need to do or to specify? Sorry on image is going to be inside something called Kovar. Right? Which means that we need to make an upload fields for that because language update, just one field and the field is going to be called color. Right, So this is it. So this is the image we're going to, um It s so this is the details on the image call. Now, let's teach our Kurt. Sorry. Let's go over. First of all, we need to create a page for the editing one. Sort of go into the back end. I'm sorry for this. So Vek end, right click New father is going to be called it is cover. Yes, cool. So does take, um, I want to take the menu. Example. Save on here. We're going to render surrender from the back end. Something called it Cover. Say cold. No, let's go back and t r Cover the pot successfully. Now let's go back to change its color language the portfolio E G s. And do the warnings here save when I click on the cover should see a result. It's now menus is not defiant. It's not a big problem. We just need to add all you hear. So is a menu. Before that, I don't actually the menu, so I'm going to the late this manure from the recover, all things that we have all. Also, I don't need a table road here, So let's delete the table and say, Look, se, let's go back for fresh and they see you have a little cold. Um, no. Let's remove the bond here. Let's change the name off the menu with change cover in a save with fresh cool. So here we need, um, love, too. Do just a file. So let's go ahead instead of the holo form form is not going to have a class bus is what you have to be or have a post. And the place is going to be this one because I'm going to create the dot first method, the first of the ideas going that is gonna be, um, work. Yeah, the work I d on. Then we have the middle post cold. So inside of the method here, we need to have a death. All form a group most of the day. If you want to be open to input a fire and the name is going to be cover on the bottle without bodies, save and check out. We go. Right. Because you didn't specify the specific or the area here. They say work and the work's going to be a wait for the work collection. And we need to find just one promise. The i d. The object idea. Remember, we after combat every time, the thing, strength of the objects. So the obvious going to request problems? I did se You're going to take this idea now Let's hear refreshed and those who get the results We have a problem. Yeah, we didn't add a sink function. Thanks. In function. Saved. Go back. Refresh work. Idea is long to find. Cool. Uh, we're looking for this one. Find one with the object idea. So work. A copy is Let's go to the edit cover. Um, yeah. Work dot work. I d this is it Not the idea. It's like this phone. No, we should see the work. Now we have had they upload down. We need no, simply another dead with the form group as usual. And now they need to add one. Buying time is going to be submit on. Let's give it. Actually, only I want I don't want to give it a name. Instead, I'm going to make it. Give it a class and the claws going to be, um, success of the say Go back. Refresh Done. No, we need Teoh. Um, council log What the dead up way are receiving here? So let's go back into our text editor, Then go into the Roger Doggy s and copy the same code here and placed it here on top, imposed on so that the pillows here, let's change this cover on the spore post call. Just copy this. Go to the back and controller on Create exports the same name with that request and response call. Now we start way can counsel log the data by just typing here. Council don't log request Don't body. That's it. Let's go back into the deck over and make sure that we give it a name for fire. Just cover. Cool. Now we need to make sure that we have had it's a and middleware called upload. Start single. Um, the name off the image. Coal. This that's it. Now let's go back, refresh and check if we got the result or if we get the result. So, for example, I want to take this image update and see if we way we are going to have an image. So, as you say, we have the results called covert on Name off the image. If you see here, we got one single data cool, which is called right now. Let's go back and update that specific inside of the image. So just take a look here and this creates a new upload equal to you. Um, I would love working with our outworks model. New works work everyone to send the reports about body to the application. That's it. No, let's say a blue Don't, um, an example. Then, if its success off for the results of success could be redirected into the admin portfolio otherwise or ask but catch that should get in error. Rest Send for four safe Go back. Refresh. Nothing happened because we didn't make this one service complete. Disclosed all of these tabs to work properly. So click on the work in the model and let's create our APP. Prototype function work the first time dot name of it. I'm sorry, but it's absolutely so the function. Yeah, no way. Need to return And you promise the promised want to be in a same function Off is going to take to prompt to resolving Reject as usual, guys, is when you take this or when you got this at the first time, then I think will be easy for, you know, we need to wait for the work collection. Don't we need love to update They just want feel, which is the cover, right? So updates one on this one is going to be in front of the I d. We're going to take the objects by day, but here's the trick. So let's start with this idea like this one. But here's the trick. You have to go and take a look. We have included the first parameter. Is that the work off? The request? Our body, then crystal far on. Then the requested prompted. If you push the requested pumped idea in the second primary that we go in trouble, guys. So let's go back to the back of controller on here. Even if we don't have the request filed, you have to put this west on fire. We worked with a single or with uploads single. So it's file, then requests farms. I d. I. We have the president fall here, but I'm not going to work with that. I'm going to work with the repressive body because I'm going to change one single line. If you want to change the whole line, you can do the changes with this president. Cool. Now let's go back on. See, let me show you. Um, this first. So we created this. It's common this I want to show you what I mean by that by their crystal far. So first of all, also log request fun, right? Cool. No, Let's go and check if we got the results. So upload six image on updates. Now we should see the results. Have you been defined? Why? It's indifferent. I will check. Maybe we had a problem because don't file. And the post match? There's go back and take a look at the Roger. We have made a mistake with upload upload single. We have the upload fields whole upload single, um, going on defined result. I think the because off, um Then we go to the back, and I'm sure you is a full year cover cover. This one, uh, may I think the in Qatar, but didn't, um, into the Inca top minute. So yeah, I think a type. Um, sometimes I forgot to work with these stuff. Okay, let's be used. Problem. Something creates will take in the form. You could talk. Yeah, Let's go back. I think a type formed a Let's go save fresh the image upload update notion to the result. Cool way. Had the results on reality uploaded the far right? Cool. No, let's go back and take a look of it. So we need to edit the specific cover image on the cover image is inside. Um, Ray Cole, this is it. Now let's go into the model. She's worked RGs Let's bring this wife on here. This here. Sit. What? We are going to sit here. We're going to set some updates, right? So we need to, um first of all, we need to call the images we need to work with images dot cover. I just want to make sure, um, if I actually not wrong se zero because this is the field number zero on. We can no update data by just adding they that this don't I did. Or images. Sorry. Images. This one. Because we have sent this for reports filed darkly here. Images. So this is the image this image is now. If it's true, that resolved call, this is it. Now let's go back and check if it if we made the changes, remember, here we have the cli banks Try to change this with the road tip. Let's see if it's going. It's work or not. The ab graft don't cover expected token. We have a problem. Here it is cold. This the problem. So let's go back and check. Oh, update, child. Um, with more real Levy. Let's take a look and see how can actually change. The child's in it in there. I made this issues especially for you guys. I want to teach you how to solve this problem. When you got, like, this one, we can do this. Okay? We can't actually explain to you. We can't do this instead of the images changed the cover image that safe and see with this work. Make sure you explain to you we still have the problem to cover. Uh, is he wrote through this cover like that, for example? All right. And here, going to be in a right. Right? Say this images noticed. Refresh. We have a problem too. The resolve, its inside. We need to make it outside. You. See, you give you with all of the the compiler, give you the error where it's with exactly so refreshed, like the image road tip updates. You see, we have successfully changed the background, but I want to make sure that this this Clyde back had been changed. So go then. View the documents. Go to the images and Kovar. We have successfully updated. But here there is a problem and there's a big, big problem. The problem here is we have deleted the previous images. If you see, we have updated the images for the cover that has just one field but were removed. Three other images. We go to the images we have. Let me check. Yeah, here we have just cover. They have cover and images on the problem here is I want to just touch the cover, not the to You see, I don't actually touch the images. So here's the code on them. Explained you were actually what we have done. He said he and sit inside off, um, our our code inside the image inside of the images or updates or go into the images. And so the images that is something called Colbert Right inside of the cover. Um, updates with the images. But here before God's explain tier. Second, we forgot the images killed. We have the images here, which means way can't update, or we have to update images to for our projects, which means that you should upload the images to make sure that everything looks everything works probably. Okay, guys. So how you can actually do that simply by typing images and the image is going to be inside off request files in general. So we are going to Instead of doing this, I show you how to upload or just one image when we have run image inside off your code. But actually in here, we're going to work with the fields, as I've told you before. So how you can actually do this? Let's move this lines of goods, this court So we actually can do this. That makes me to go back for the rock to the G s. And here we can add a copy the same code here and based it exactly with the coat se the same thing, right? We didn't do anything. We just can't copy and paste. Then we have to go into, um, create portfolio before you create. And guess what? I'm going to copy the coat off the multiple images on the good for the images to So you copy this. Let's go to the creates or it recover here. And I didn't need that. I'm going to pass the images of the work. We did the same thing with the actions. I just need Teoh label here say some plant holders cover way. We need to give it an idea, right? This is the tour, and they should be the one call. This is It was Go back. Refresh. Who's involved with on the cover on? We shouldn't have a problem. Yeah, we didn't complete the work. Asks us players go back into the work Js in here. We didn't mention any code, right? This why we got an error. So that's common. This it's common. This out or this cop Cut this on. Refresh. No, we should see the cover. An image of the work, right? It's go back to the cover here on Let's see some of the goods here. Maybe we have so we need to add the class. Of course. Young here. Stop being a blast for control. Fire cold. Cool. Let's go like the cover image and select images of the work and open the my click on update . We should see the result but visible. We need to console log this a result Consulate. So consul log requests fives. And here five. That's it Fresh. Shouldn't we should. Yeah. So now, as you see, we have the same results. Well, you have to do right now is by going into works like Js. I'm sorry I spent there were the I just split them. You know what happened for me today? Okay, Goal. So here, let's go down. And it's away on his because they were really that's removed. This too. Not confusing, you know, Let's add sit. I want you to sit all the data. Is that our code call? So since on, we're going to sit the images with this. Todd five. That's it. Let's go and take a look. Fresh click on the cover image to uncover True's discover through this two images. I'm sorry for what happened. Just image guys and save money. We should see the results that is going refresh. And now we should see the images. We go a no result here. This is a big issue. We're receiving data, but we have challenges. Let me Let's see what actually the problem is yeah, not that this file, but instead, is this images that said this? They mean issue saved go back dates like the cover image. So two images update and now we should see the results through the documents and we have the results here. Cover on. All the information has been updated successfully. Cool, guys, this is it. This is for today. See the next episode, where we complete with the delayed bond and finish the portfolio section. Then we move ahead into the block section. See you guys in the next episode. 26. Backend portfolio delete : all available Guys welcome guys to this episode. We're going to do some thing have very easy on just spike. Looking over the delayed, we should delete for you this easy. You know, we have already done that. So let's go back on to our coat and go to the Roger Got babies. Uh oh. Just company one of, uh, lions. Just make sure on Dio, please. You are going to get the method delayed and we're going to instead of eight of the post When I would you lead the portfolio items cold. That's it. Now let's go back into the deck and controller. So let's go to their exports. Hopefully, the leads function and I have a request response on Let's see now we need to do cool. So no, we need we have a request from the idea that we need to a weight. I said I'm sorry. I said that they sink and then await for the work collection, and the collection is going to draw Going to be your phone to delete the whole um, collection area selected the I D on. I just want to be an object idee as usual and some of the old guys. You want to be a request Palm? I did. That's it. Now this redirect do you admit sport for you? Cool. Let's go back and take a look for the Kanda Late. For example, this one we haven't right. What is the error here? Uh, it must be all okay. This is already And objects? I think it's really as an object. Or let's go to the roger dot Js Yeah, they put for you. Admit before you leave. Uh, yeah, we didn't mention the delays. Bond. This way. We have problems. Let's go into hopeful you. You do? Yes. On here. We should see the delete delete here. Well, to be work. I think you've already done that, right. So just copy this. See if we right. This is the least pool. I always go back. Refresh. Live. Yeah. Okay, let's go back and see. What is this error? We didn't mention this save. Go back. No, we should see or should know. Yeah, I believe this easy. So see you guys in the next episode 27. Backend about: Hello, guys. This is we're about finished the course, so I hope you understand. Sometimes I get a little bit fast in some off, um, or were not want write code, because I know we have learned that before, so you you should not be able to understand what actually actually was doing. So let's complete our story. So, guys, we're going to make an about page today, so make sure that this is, uh there's going to be a long, I think is going to be a long episode s Oh, I hope you will not say and not be tired, you know? So just bring your cup of coffee and let's complete the work with a cold. So this is Theobald Page. So we are going to do some stuff with it. I going to do the description. This the first thing we need to do we need actually, we need to hold. So we need the It's a the hitting. I don't like this one. I think maybe I'm going to delete it little cold. So we need the title of the about Paige, we need some bleeding if you want to. We need a description also the services and clients Entous emotional. All these things are going to make indecent or us. Okay. So make sure to follow along with Nicole. So first of all, we need to create, as usual, a navigation bar. So let's go into or disclose all of these. No, let's go to Heather is out of the back end, and it's create another navigation bar. Is not there was going to be called about Page and his Ah, Bo page is going to be a bolt. Your safe back refresh. Cool. No, we have the school perfect notice. Create the Roger to render that page. Oh, I think we've already done that before. Let's go. We didn't make that because, uh, this world this was in the front answers go into the Roger on the bottom Going to say rotter, yeah, admin about something. The code that we have before a copy face Just remove the cover on middleware. And this is not about court. Let's go back to the back end on some of the back end here. Going to be Newman for the album. Right rest rounder. That can last about Cole. No, Uh uh. Symphony's in a boat the same, I think, as the book page. So just copy this. It's first of all, a reasonable about e j s on going to copy the Borg e J s to the body. Yes, on this Do the work with together. So here we're going to be both area had knew about Paige. I don't think so. We are going to get it horribly, because we have the about face. So we need to edit it directly without, um added Right To have to understand that this while trying to explain this to instead off add in the page, we're going to update on the update is going to be at the at the collection, Doctor. What? By trying by typing It was going to say boats cool. So less here is not going around. We don't need a table the at all. So just just leave this table. And instead we need tops on force. So first of all, we need a form on this form is going to be about Look at me slash above methods to be first also, um, going Teoh state in good time, Mr. Because we're going to work with multi for proposing the image off. They're both page. Otherwise, I think we I see. I think, Yeah, this is the description. So it's maybe going to be inside of the description. Cool. So we'll make this description out, so I'm not going to work with the in Qatar. I'm not going to work with the motor right now. Safe. Go back. See the services we have seriously here. A lot of stuff going on there. Cool. I actually love to make a services alone on clients alone on this emotional love. How I will explain to you so here inside the header did. Yes, I want I will copy this twice. How? So you are going to say services. I think the service. Yeah, And then we have outlines. I'm going to start our planes. And finally, we are going to say this emotional coal cool. So let's do the same with the Russian hand. This emotional Oh, our planes. I just thought clients tiredly about five services called this. Is it fresh? You should see navigation buffalo about your service or plans of this emotional. These are things that we need to do. And look, what about Paige? Troops who are going to call these and the phones and off the about page. Okay, guys. So see you. Now, let me show you how to actually implement this cold. So we have the ball page, right? No, let's go ahead with, um about and these arrests is not defined because we didn't mention this. Go back to the back of controller on type. Request response. Response. Say go back. Refresh. No. Should see the page call. This is the page. So let's complete the work. Input. We have your text inside of here. Actually, we have your text. But the type was going to be objects. Of course, because Robert going to tithe total so pay style. Well, say, hitting on the value he is going to be. Let's say you guys want to be a placeholder as other placeholder. I'm going to copy the same. Um, total Here. Creative. Cool. No. Let's, um remember to add the class name claws form, I think, um, for me to be here for my group story. Well done, guys. Sometimes you get confused when you complete programming. So the inputs feel he should be inside the diff on class. Been to be informed of this. The first thing you need to do that. Input in the form. Um, let's take a look at the other falls. A gs, for example for the blawg. Or maybe for the edit blood that form control. Sorry, guys, for control on that set. Let's go back. Refresh and see. Cool this the head intact. Now it is. Go back. And we need now to mention or two at this this field, so I'll just copy this. So the label too total Andi should be an i d for the specific label. It's going refresh cold. Now let's complete the work. I'm going to call the What is the content? This one. So I'm sorry for that, Guys. Cool like that? No. Here. Although a box just as an example. Cool. Let's go back to the same thing. We have sex everywhere. Um actually, I think we need to do right now. I think those two things, maybe. Yep. I need just those two things. We need a submitting texture. Copy this on this here. Skopje The diff before. Let's make this three three on. Copy this. Put it inside of the placeholder and that's it. We have done with this? Let's go back. Refresh on love should complete about paper. Cool. Uh, it's your move. Ate it. I don't actually need the bottom to be at the top. I'm going to believe this. And then some of the phone I need I want this. Sorry, guys, since born, and this bond is going to talk to submit and I every class off BT and video and success and the name that we actually don't need a name. Instead, I'm going to post a problem. I want to change the color. So you say Cool. Save, refresh. No. Should see this court. Um, lube on him often. This is it for the about page. No, let's complete the work. That's do the for the about page. So you have You can do this darkly. Meals create a post. Roger, for this will do to this copy face. It is going to be a post request and about who's cold. Let's go ahead. It's a back and controller complete or do the stuff that we have done. We've made before, like with, like the stuff we made before. So now we're going to let's evolved equal. You above request That's it. About 38 and then a copy, then on the catch. So go back about a otherwise Sandy's Centenary. Copy about. Go to the top constants about equal to requires when we go to acquire, uh, from the model, the blockage or there but more so you far above? Yes, close tens a ball. Sometimes when you you write good love time, you will get the idea. So a ball on this above you hold about and about logs Prototype for time, I thought creates you have a function and now you are going to return You promise? As usual, I think resolved, Reject and complete the work. Cool. Now we have done that. We need your mortal exports a lot. Way or not Will not get an error about Cool. No, it's a weight for about collection, right? It's copy the collection on the object are going to work with these lots. We worked with this lot back as I told you. Way still work with this a lot. We're not gonna stop until the product finished. A bald collection is going to be about collection. Too. Cool toe. It's a boat collection. Don't of date one If you didn't do this, then you will, um, se you will actually going to allow the the code will understand they are going to work with the justice first results then and here we're going to say then and catch instead of instead of writing inside of it. And I love codes in and we can do that then and catch can then a catch instead of then we can You can try it, for example, for passing variable and is variable like that. You can complete the work. And for example, this variable what we got with this variable on So on some stuff, you know, So we're going to actually complete Oh, let's go back. And now we need to say updates one and making clothes empty, um, object and then comma on the more interest said following the results so said on here inside of this said we're going to, uh, side the data that we need to So the dead a year. If you go back into a bottle e g s, we can see that we have the name hitting. So just copy this hitting going to be this above getting global. Two people show. Um, submitting have you submitting submitting tag here as some reading this about submitting and finally the content of the page content contents, This about content. Some boys. I just know it's not calling cold. So this is what we need to set. And then we can result. Cool. Let's check if if the program will actually do the stuff that we actually going to act. But first of all, make sure that we have implemented dare a successful. So we have called the create here we have to create and so on. So let's go back. Hit. Refresh. Now let's see if we have Arabs. Require Constance require require is not defined. I didn't write it. Exactly a copy on a piece. Where is it? It's inside. Yeah, this require refresh. Now you should know. See the page. Otherwise, we have a little problem after missing after our list. Inside of the about models is going to the about model. And let's see what we have here. Maybe like that? No, not this one. Because this is going to be is out of this one on this one to take. You're just a moment, guys. Yeah, Forgot this one Not too close, is this? Yeah. So decide to say creative, More creative as an example. Creative. Okay. I just want to make sure that everything looks fine. They wanted it on the bench as successfully updated. Let's see if we have created a new collection refresh way don't have about Paige. Right? Which means you didn't find the aboard paid. So how you can actually do that? You can't go ahead on creates new collection, so creates collection disclosure. You want to be about creates Now, let's see now we can Foot's This is the result. They wanted it. That's check If we had data inside of the about we haven't ever right now. So let's check what is the main? So we're going to grab data from about on. We have called this about right. So let's see if you are receiving data first cause a lot This boat, this is the first thing we need to do. Cool notice. Check the beckoned. It looks fine because the body that was go back do the same thing here, here, it it and see no way are receiving their instead of subject. And we are not receiving any day. I don't actually. Why? We'll check Mom. Cool. I think it's fine. There was even data Cool. Paris uniform. Um, from this about. But we didn't send the the day I die so older than this in a quit. Let me explain to you. Well, now let's just insert the death first. So do copies or cuts inside the insert one on this. The boss save refresh. I want to just take and this cool. So you go back now we're inside of the data notice. Go back and do the same. Could cool notice. Check If we can object first. You can end it. Go back into box. Refreshed. Yeah, we can get it successfully without any problem. No. Let's see how we can actually complete the work. So we have updated that. Okay, guys. So we need to insert the data that way. Have data call everything looks fine with it. Now we need to just print out. Sorry. We need to print out there by adding volume. Let's go back into about E. J s and about the A. G s. We have a place. Holders have placeholder here. I'm going. I'm going to say value is going to be, um, above starts hitting, for example, and the same thing with the older values copy based here and here. I think we have some meaning like that. Cool. Yeah, we have submitting something getting cool. So now say we need a more thing about on the content. So say the boat thoughts, content pool. Let's go back on, look up at or it's going to the back and mature on instead of the about here. Let's say about equal aways about collection on their own. Going to save, find one. That's it. But see, Jake, if we already have, you don't have about says here about collection about that's it. Go fresh. We should sit down with the results right now. That problem? Yeah, the icing function. We still have problems. Asynchronous function. So a saying, Yeah, this one face cool. Say back. And our code now should successfully have been updated. No, let's complete the work. I'm going to stop here because we have finished with about I'm going Teoh Next happen. So I'm going to teach you out to to create this and 20 laws directly inside off your services. So see you guys in next episode 28. Backend services: If you go to the code, you truly understand that this is all about a shame. Attacks, right? And if we go to the coat, you understand how this structure, for example, here in the services in the front end about PGS we have just the 1st 1 is in, or it's written in the capital or in age and heading tech, right? And then we have the other things. You can create this in multiple. You can just by adding for green any of fields that you can add the name off your service and the Khyber that belongs to all. You can just type it. Doctor, I would you explain to you the right way? Cool. So let's go back. We are going to not work with services, right? This is services the services. We need the name of the service right? But this you can just change it from here. So let's go into services and create a page full down. So it's going to the water and tried the same thing with Roger Side View Services. And here's one to be services call. Let's go back to back and controller of a very Bomb club services function. Request response. Usual restaurant. Uh, back and services service and then copied is go to the back end, you fall services. This is, um, what we have bean working for. So, guys, we're freezing the services. We're going to just along with this. Cool. I'm going to go to the block E g s coffee. The same code. This is on the services. No, I'm going to delete the cover. I'm going Teoh and deliver a little This two things uncoated leads this one on this one too . I'm going, Teoh. What? I'm usually the category because I'm not going to go over the counter. But right now we re delete posts. So we need the category off the service she's present was booked. Design, development, design, marketing, visual communication. And we need We don't need a slight for this guy. So many Just the name we need, Um, card agree on service Name, name of service on. That's it. Only the date called me. There's just there's a few things, so let's go down. You have TD this one. I don't need this one. Just two things. So, for the border area is going to be services services area s here. Uh, yeah. I need to add on here. Side services. Cool. No, let's go back. Refresh. Sorry. Refresh. Click on services. No, we should see the same page, right? Cool. No, We need just two things which went to be much, much easier. No, configure the ad, but let's go into Roger Gs. Copy the same rotor based here on day. Here's what to be. Create service on services. Would you be creates to copy, Go to the back and patroller exports, the service function question risk balls and then we're going to rest Brenda back and slash Greeks. That's a cool. Let's go on. Do the same thing. Back and services. Yeah, services create court. Oh, good. The deck and right click your It is like creating gs. And here I'm going to copy and paste the same thing for the Hollywood copy and paste. Cool. So this is a category. I will remove this log stuff. So here services create because we're going to work with the services post method. Cool. So, in the services, we need a drop down list for the categories first. So we've already done that for the post. More sensors blood grease and let's check for the categories. But actually, we didn't create the calories, so we need to on services need to add. You make this specified for the categories. Let's go back for the services. Start creating. Oh, so it for services. And here, uh um category. How do the same for Oh, same thing. We have a look. It on service creates category for this on here is going to be 38 that we're going to work with this risible I want create to create category First success. Primary. Cool. There are three things here I'm going to add. Simply refresh. You should see it to Bonds. I will make this in a car. Just, uh, I'm heavier upon when it I just have fun. When I stopped program save fresh. We should see into a single life. Cool. No, we are working with this death. Um, cool. So we have the problem? Uh, the problem here. Yeah, I need the card either. Not the cultural calls. You fresh. Called me a degree. And Kat Cole. Um Let's complete the work guys on. Let's make this works called. So start with acai Berry. That's when you click on the add category, then you should see the the page. So let's go into the back and controller. And here is her Create services. Create category for that copy. This creates services. Raise IT services creates three name. This isn'