Introduction

Here's what I'm careful, hey, hey, hey, hey, yo, good morning, good afternoon, good Good evening. No matter where you're coming from. Hope you all are doing. Well What's going on? Everybody? Welcome back. Welcome back in different goes. Hey, thank you for the 10 Whoo. Thank you so much. I appreciate that Thank you for being here. Hope you're doing well That's wild starting off a banger folks Thank you for the gift of subs. I appreciate that. Thank you so much. What's going on? Everybody.

Welcome. Welcome Paco's watching class 7 on YouTube wanted to stop by and say live. Hi. What's up? Welcome What's going on? Everybody? Welcome in welcome in Ha ha ha let's go indeed. Hey Argon Curtis a thank you with the raid. Thank you for bringing the crew along. Hope you're doing well Hey, let's go. Everybody. Good to see you tonight tonight Campies on class 1 Hey, let's go. What up, Frank? What's going on everybody tonight? Tonight's one of my favorite classes We're gonna we're gonna go on a journey tonight folks We're gonna go on a journey tonight.

We we we started like come on think about what you've been able to do recently Think about what you've been able to do recently. I see your apis you've been building some apis Have you been building some apis Have you been, have you, have you been building some APIs? Are you, are you a full stack developer now? Let's go. I've been trying. I feel that, I feel that you're trying. If you're trying, you're a full stack developer, baby. Let's go. Let's go. I see y'all out here. Oh, to think, to think just a few weeks ago, we were in the throes of HTML and CSS. and you threw yourself at that and you came across clean. Then you threw yourself at JavaScript and you came across clean. And now you're throwing yourself at the back end? Let's go, come on.

We ain't normal folks, we built different. Other folks ain't giving up their nights and weekends or mornings and afternoons to do this. Get out of here. We built different. Let's go. So, tonight is one of my favorite classes. By the end of tonight, we should have an idea of how to build an API that not only reads, because that's what we did. We built an API that get, right? We went out and got, right? Our APIs were able to go get, right? But now, after tonight, we're gonna be able to do our posts, to do the creating, right? To do the creating then we're going to be able to do the the read which we already got on lock and then a little bit Uh, what a little bit of deleting just a smidge a little bit of a little Delay-tay. All right a little a little delay-tay tonight, right? And so after tonight, you're gonna have three of the crud abilities on your tool belt to start building to start building real applications. After tonight, you can build whatever the heck you want.

Yeah, we're gonna add some other stuff. We're gonna add like authentication, but that's just taking some stuff off the shelf and plugging it into what we already know, right? After tonight, you can build the things you wanna build. And yeah, we're gonna have to do a lot of research. We're gonna have to pull stuff off the shelf from other places, but the core of modern web applications you're going to have in your tool belt. That's wild. That's wild. That's wild. The fact that if you started this journey in January, right now you have an understanding of what the heck I'm talking about. You're like, well, Leon, I understand that we have client and server side devices. Clients make requests to servers, servers hear that request. There's some code running on that server. We call that our API, our API hears that code, and then it does some good stuff for us, all right? We've been serving up some JSON recently, but tonight we're gonna introduce MongoDB and EJS so that we can get data from our database, plug it into our EJS templates, and respond with some good old HTML. That HTML gets rendered by the browser, and guess what?

It makes requests for the CSS, it makes requests for the JavaScript, it makes requests for our images, and we're gonna have some codes set up on our server that's listening for those requests and serves it up. If you have any idea what the heck I just said, you should be proud of yourself. You really should. We go get it. If you understood like 50% of that, you should be proud. Cause that's a lot of work. It's a lot of work to get there. It's a lot of long nights. It's a lot of long weekends. It's a lot of reading. It's a lot of typing. It's a lot of fingers hurting sorry you call but not the right time. I got some code to do You should be proud of that Nobody can take that away from you That knowledge is in there You got this so tonight We're going to add some layers on And what I want you to do tonight Is to realize That I am telling a story I need you to understand, right? I need you to understand the story. I don't want you nerding out about the details of the story.

I don't want you being like, oh, did Leon say they were in San Francisco and that they ate at the Crab Shack? And then you're trying to remember that they were in San Francisco, they ate at the Crab Shack. No, I just want you to understand that they were having a good time. So tonight we're gonna paint a story. we're gonna paint a picture of how a full-stack web application that can create, read, and delete works. But I don't need you to go in to be like, all right, well, I gotta put this dot here and that parenthesis there. No, that's not tonight. That's Thursday. That's Thursday. Tonight's about understanding the why exactly, MJ. It's the understanding the why. It's understanding the concept. It's understanding the big picture exactly, Casa. It's understanding how this is happening. Looking at some of the code, but we're not gonna code anything from scratch tonight.

We're not gonna type things out. We're gonna try and connect the dots, right? We're gonna try and connect the dots to understand how this big picture gets painted, right? how the big picture gets painted, and then on Thursday, we'll walk through it again, right? We'll get our fingers on the keyboard, we'll type everything out from scratch, we'll see how all the pieces come together. But even as we're looking at this stuff, you have to remember, I ain't got this shit memorized. I'm copying and pasting my ass off. I got templates out the wazoo that I'm using and yanking the stuff together because we're using building blocks. We got really fancy Legos that we're piecing together. And so it's not important to understand how the Lego company is molding the bricks, how they're getting the little dots on top. That's that's too much. We just want to understand, are we put these blocks together? We can build dope stuff. I'm dope and I do dope stuff, And tonight we build some amazing apps. We're going to build a really cool app that extends on the API that we did last week.

We're going to understand the why, the how, but give yourself some grace on when you see the wall of code, you ready? Hold on. I'm going to keep it small. So you can't, you can't freak out when you see the wall of code. You don't freak out, right? You're like, Oh, that's not today, right? I'm keeping it small. So you don't freak out, right? When you see the code, you're not going to be like, all right, let me, let me. Let me do my best. Let me get some water. Let me get a deep breath in. Let's think through it. Let's diagram. I'm going to channel all the inner nuns I have in me tonight and you're going to digest it.

You're going to rewatch the VOD. You're going to redo the Zelle reading. You're going to come back on Thursday and we're going to repaint the picture again so tonight big picture building full stack web applications that can create that can read that can delete what is going on we can do this stuff now and it gets all much more sweeter we're gonna add the updating on Thursday and then you got it folks the world is yours you can build whatever the heck you want and over the rest of program We're just gonna add some other tools some other things that we can pull off the shelf to do some more heavy lifting Alrighty folks, let's get into tonight. I'm glad you're here. I'm glad you're putting in the work. Let's get you across that finish line All right Tonight we're talking about a hundred devs. We got some stuff to talk about We're gonna do reviewing some crud We're going to review a little bit of Express. We're going to learn about that post and delete. And then you're going to, for homework, mold what we have, mold what we have to start building your own apps. Not tonight, but after Thursday, you're going to start building your own apps. Cool. All right. Questions. Let's always give folks a second or two to get in here. I know we give a little bit of a speech at the beginning, so folks might be here already.

Let's do one or two questions and then we're going to get started. Crud and REST the same thing? For right now, yes. We'll nerd out about the details in a little bit. But for now, yeah, you're building RESTful APIs at the moment. We'll talk about the actual kind of nerdy definitions once we figured out CRUD. Once we understand CRUD and we can use it, we understand it, we're building real stuff with it, then we'll go into the understand phase. Right, remember, we said use, understand, build. We're in the use phase. We have to be able to use CRUD first. We have to be able to use to create the read, the updates, the deletes, right? Right? And then once we've used it, we've seen it, it's tangible. It's not some nerd stuff that we're talking about, something that we've built, then we can transition to the understand, right? And in that understand phase, we'll understand, all right, what are the mechanics of a RESTful API?

What really goes into it? And then we'll worry about the building and start to build more and more stuff on top of that foundation. Does it count that I contribute to open source even though my PR hasn't emerged yet? Technically not yet. Because you want to be able to show that to an employer that, hey, my code is in this app. All right, are we coding along? Not today, not today. Today's about understanding, it's about digesting. Yeah, we were shouted out in the Code Wars newsletter. That was pretty dope. We do a lot of Code Wars, so we out here, we online. That's all I gotta say. So we did get that nice shout out in the Code Wars newsletter. I've been trying to get on their newsletter. I've signed up for like four or five times.

I still don't get it, but I appreciate all the folks that tagged me on Twitter with it. Code Wars number one customers for sure, blah, exactly. Definitely. Definitely. All right, folks, glad we are in here. Glad we are here, that we're online, that we're live, so we can jump into these important topics tonight. Thank you for the questions. Thank you for being here. Let's get into it. If you haven't already, folks, please check in for me. Go ahead and do exclamation point check-in if you don't have the link tonight. Once you do exclamation point check-in, it'll give you the Twitter link that you can go ahead and like and retweet. I will give you a second. Remember, this is your attendance. If you want all the wonderful benefits that come post-program, one of the things I'm gonna look up is, were you here?

So please like, retweet, so that I know that you were here, that you were live with us in line, so I can say, yes, they did learn about CRUD. Yes, they did learn how to create, read, and delete on June the 7th. I saw them, they were here, they were online. All right, so go ahead and do that for me, please. It's also a wonderful way for folks to find us not to dish out all those monies for a paid bootcamp. Alrighty, thank you for checking in. Submitting work. I wanna see your API work. So if you worked on your API this past weekend, something I asked you to do for homework, I wanna see what you're able to come up with. I saw a lot of people tagging me on Twitter, APIs are looking fire. Go ahead and submit that work for me. You can just click the link either here in the slides or in the Discord message. And I wanna see what you're able to build, what you're able to come up with. It's gonna ask for your GitHub link and your Heroku link. If you, for some reason, weren't able to get on Heroku, that's okay if that's struggling, just give me the GitHub repo.

Or if you only have it on Heroku, push the GitHub so I have that too. Cool. So no like, no like zips or anything, just give me the Heroku link and the GitHub link, please. Submit it to Spice Girls API. I know you really wanted it. Hey, I'm excited. I got an error trying to install Heroku. Swing on to our node help or our general programming help. If you're getting stuck with those types of problems. Cool. Alrighty. Thank you for submitting your work. If you need a little bit time after class, Let's go ahead and jump into it. Cool. I asked you to do some video watching.

It's super important that you went through the Jake Archipald videos, the Philip Roberts videos, to really understand what's happening behind the scenes in that event loop. Yes, we covered it in class a few times, but it really does help cement that understanding. Also, just want to shout out Zelle again. If you didn't do the CRUD MongoDB reading, It is absolutely essential that you get through that reading. Not only do they break down all this stuff, they show you pictures like step by step, how to do things on Mongo Atlas, like step by step, how to do all these different steps. It's a lot of work. It is a hard bit of code to get through, but it is totally worth it. Zelle, I keep saying it, but they make some of the best things online for new devs getting into it. So if you're like saying watching this on YouTube for some reason, definitely make sure you read the Zelle reading that's here in the slides. Cool. I actually don't know if the slides link is updated today. Hold on, let me do that real quick. We might have the old slides link right now. One second. Yeah.

Sorry, I didn't update it. One second here. Yoink. I'm going to grab it from the Discord. I know some folks have a hard time grabbing it on Discord before class. There There we go, grabbing that one second off screen here. All right, slides have been updated if you need to use that slide command to grab them. So once again, just huge shout out to Zelle. A lot of the, some of the examples we'll be using, some of the things that they recommend is very similar to their work. So I want you to be able to transition from that reading to our examples here. So if you haven't, they also have tons of other articles. It's it's really impressive. You need to go watch and read their stuff. Cool. All right summer break folks So this will be our second to last class before our summer break.

So we have class tonight We have class on Thursday, and then we won't have official class for two whole weeks two whole weeks now We will have some project nights if you want to partake. We'll have some cool stream team streams if you want to partake, but two weeks off. And why we're doing that is because some folks need a break. We're getting to the point, right? We're getting to the point where some folks need a little bit of a breather to catch up, right, to decompress. We put a lot on your plate. After Thursday, you can build full stack web applications, right? You deserve a break after that. So some folks will use it for a full decompressing break. Some folks will use it as a catch up. We have a lot of folks that are really grinding hard to catch up and join us live. They wanna get here to start building these full stack projects. They wanna get live so they can join project nights and things like that. So catch up crew is gonna have two weeks to get further caught up if they wanna use it. Also, there's a lot of personal stuff that you have to work on, and I want to make sure you have some time if you haven't finished it up yet.

So break's important, catching up is important, but your professional stuff, that checklist stuff has to be done. These things need, right, those things need to be finished and percolating and perfect so that by the time we're ready for the hunt, you already have some inbound interest. Things are already showing up in LinkedIn for you. You're already showing up in the search engine results, right? You need to make sure your checklist is done. It also might be a start for a lot of you of your 100 hours project, right? Some of you might use this time to start fleshing out your project. After Thursday, you could build the whole thing. You'll have all the tools you need to build that project. Right? So some of you might put that time into your a hundred hours project. And then some of you might start, you know, scoping out the job market in your area and building out your hit list. It's up to you how you want to spend these two weeks. I will have some light reading, slight like materials for you to read. And I expect you to have built an app, right?

So you'll take the code that we use tonight and Thursday, and you're gonna build an app of your own. So there is some slight work, some small things, but it won't take you the full two weeks. So you can use Summer Break as a break. You can use it to catch up. You can use it to work on your professional stuff. You can use it for your 100 hours. You can use it for HitList. You can use it to build an app so you have something solid on your portfolio. It's up to you what you wanna do. Now, the other reason that a break comes into play, personal responsibility. When we get to this point, you gotta make a decision, right? You gotta make a decision. Is this something that you want? Is this something that you're going to go full on out for as we switch gears into the building and job hunt phase? And so I want you to take these two weeks to search the depths of your soul and see if this is what you truly want, right?

It's a, it's a, it's a, it's a, it's a time of reflection. It's a time to get your, your, your loved ones on board and make the decision. You know what? I am proud of the things that I've been able to do. I'm proud of the things I can build. I'm proud of the work that I put in and I want to continue. I want to put in the work that it's going to take to get the job, because I said it before, and I'll say it again, the getting the job part is the hardest part of this entire process. And it has really nothing to do with code. It has everything to do with you getting life together for a momentous push that could change the rest of your life forever. And so for some folks, this two week break is a chance to recharge. It's a chance to get family and loved ones or their own life in line. Right. To say, you know what, this is something that I want. I know what's to come is going to be difficult. I need to figure out ways I can support myself, whether that's getting healthy over these two weeks, living your best life, drinking healthy, eating healthy, exercising, getting your stretches in.

I'm committing to get my stretches in. My hands are getting a little too tight, right? Doing whatever you can during these two weeks to just get ready for the push that is to come. So I like to give a break at this point, right? Right? I like to give a break at this point because I think it's a good time for you to recommit, right to recommit to have that time to use however you want and then come ready after these two weeks right come ready after these two weeks cool cool Alrighty. So, feel free to use it how you want. Break, catch up, purses of 100 hours, hit list, it's up to you. But I need you to make that decision. That says, you know what? I'm proud of the things I've been able to do. I trust myself to do the next phase, and I trust myself to go into this hunt ruthlessly to come out with the job. All right. So, we'll have class today, we'll have class on Thursday, and then no official gatherings, well, official, no class for those two weeks. We will have kind of stream team streaming, we'll have some project nights, we won't do office hours, so yeah, we'll have some events and things planned, but a real break.

Cool. Alrighty. Let's keep pushing. Back end, baby. Let's talk about the back end. So we've been using our lovely, lovely Node.js. Lovely Node.js. And we know that now that JavaScript notice a JavaScript runtime built on the Chrome V8 engine and and that's no longer Disrespectful, right? We understand and a lot of this terminology now we understand that node is an environment where we are running our JavaScript and It's using this V8 engine which comes with all these goodies that helps us compile our code that does memory management that does garbage collecting that enables us to utilize C and C++ APIs to do things with speed, right? It's not as disrespectful as it used to be, right? Now we talk about the V8 engine as an engine versus just a compiler, because it does come with all those other goodies, right? Right, that comes with all those other goodies, right? Now, we have this lovely idea of engine versus compiler where we have the V8 engines coming with all these goodies that's giving us access to all this stuff. And just like when we were running our JavaScript in the browser and we had access to the web APIs, now that we're running our JavaScript via node, we get a bunch of other stuff. What is some of that stuff that we get now that we're running JavaScript via node and no longer just in the browser chat.

Yeah, we're getting access to our modules. We're getting access to C and C++ APIs. We're getting things like the HTTP module, which gives us network access. We're getting access to the FS module, the file system module that gives us access to the disk. We get access to millions of other packages via things like NPM. And underneath the hood, instead of it being handed off the web APIs, we get these lovely C and C++ APIs that make the code we're writing pass. It works well. We're using battle tested stuff that's listening to these requests. That's gonna enable us to generate responses to get stuff off the disk, to get stuff from a database, to do all this heavy lifting, to have an event loop, to have all this good stuff, it comes because we're running our JavaScript via Node. Can you explain running JS via Node? Eggnation, if you're new around these parts, do !100 devs. We had six plus classes on that topic. So you can definitely go back and start at the beginning of our Node classes. We go super in depth to that. If we have any new folks, it's !100 devs.

A lot of this stuff right now, typically that first hour is just raw review for us. We all buy into this idea of spaced repetition and active recall. And so every class we're just getting our active recall in. So if you're kind of lost in some of these beginning topics, definitely go back and watch our past classes. They are on YouTube and as VODs here on Twitch as well. Cool. All right, we started off by, We started off by building very simple node servers that were using these core modules, the HTTP module, the FS module, right? These things that are just wrong. There are ways to build and communicate on the server side, but it's not pretty. We had to do everything manually. We had to write all these routes manually. We had to write all these things that just look a mess and really aren't that easy to read. Yes, these are disrespectful code, right? And so we asked ourselves, how could we clean this up? How could we not be stuck coding everything manually to not just be using these raw HTTP methods?

What if there was something that could give us access to a myriad of HTTP methods that could give us access to a simple framework that we could use, and that was Express, right? Express makes that server, that creation easier because it's handling a lot of the heavy lifting for us and giving us simple, plain, easy to use language to do the things we wanna do. And at first Express can seem a little odd, but we realized that we're just doing the things that we said we wanted to do. When I said I wanted to send an HTML file, it was send a file. when I want it to send some JSON, it was just JSON. Tonight, when I want to render some EJS into HTML, it's literally just render. So the ability here is that we're able to use this express to abstract all these heavy things away and give us a simple, easy to use language to do the things that we want to do. Cool, and so we saw this idea of it being a fast, unopinionated, minimalist web framework with a myriad of HTTP utility methods. We were like, that's disrespectful. What the heck does that mean? Well, we understand that fast, right, right, right. We understand that fast means it's fast. Unopinionated, what does that mean, chat? Why is express unopinionated? What does that mean?

Yeah, it doesn't care what you bring to the table. You can use anything you want. It's just gonna do one thing and one thing really well. And that's what we mean by minimalist. It is a minimalist web framework. It's gonna help us handle that request and response. That's all it cares about. You can bring anything else you want to use with it. It doesn't have a way that you have to use it. It's very flexible, it's unopinionated and it's minimalist. It really only focuses on one thing and that's building your API doesn't want to do anything else other right then building your API and so it comes with a bunch of methods that enable us to listen to requests to generate responses and it comes with a bunch of middleware to make our lives easier what the heck is middleware what's what's our making the nerd shake definition of middleware Yeah, anything that kind of really exists between the request and the response and we're going to see some stuff that we used to use that's even kind of getting baked into express now too. So yeah, it's it's it's it's this wonderful tool that enables you to build out your API and gets out the way. And that's why it's so popular when you're building full stack web applications with node cool. But before we can jump into using Express, we want to spend some time. But first, but first I want to spend some time talking about how does the internet work?

And then once we've had a chance to talk about how the internet works, we're going to dive into some new topics tonight. We're going to dive into things like MongoDB. We're going to dive into things like EJS and we're going to see how it all relates to building beautiful web applications. But that we're getting ahead of ourself here. Let's jump into this idea of how does the internet work? All right, so on the internet we have two kinds of devices We have client-side devices and we have server-side devices both the client and The server are both what? Client and server are both what chat? They're both computers, exactly. Both the client and the server are both computers. Now, when we are creating our original code, right? When we're running our code locally, the confusing thing, right? The confusing thing is that when we're first starting out, our client and our server are both what? What makes this kind of confusing at first? Yeah, they're both on the same machine, right? Both the client is running on our local machine and our server is running on our local machine.

But what did we do differently in the past couple of classes that changed that so that the server wasn't on our local machine. What did we do? Yeah, we hosted it and put it on Heroku. We literally took our server code and put it on someone else's computer. The cloud is what? Chat, what is the cloud? I always, people always respond, Leon, we put it on the cloud, we put it on the cloud. What's the cloud? Yeah, it's just somebody else's computer. The cloud is just somebody else's computer, right? So we eventually will take our server side code and put it on somebody else's computer, right? That's going to run the code that we told it to run. And most of the time when our clients are making requests to a server, right? Our clients are using the browser and one of the most common things they'll do in the browser is type in a URL and when they type in a URL and hit enter What did the users do from their client side device? What did they make a humble request Exactly.

Our users on the client side, maybe they were on their mobile phone, their desktop, their tablet, they typed in a URL, they hit enter, they made a request. And that request left our client side device and found its way to the server. Now, once that request made it to the server, there was some code running on that server that could hear that request. What do we call that code that is running on the server that could hear that request? Yeah, we're gonna call that our API. And our API is gonna be coded to handle a series of different kinds of requests. what types of requests is our API gonna be set up to hear or to listen for? Yeah, it's gonna hear those sweet, sweet, sweet quad requests. It's gonna be set up to hear our gets, our posts, our puts, and our deletes. Cool, now, get, post, put, and delete are terms that come from what? Where do we get these get, the post, the puts, and deletes? We like to call, those are too fancy. We like to call them CRUD, create, read, update, delete. But where do these actual fancy terms come from? Yeah, it comes from HTTP.

Because the thing that actually enables us to make these requests, to listen and receive these responses, we sit on the shoulders of some giants and that technology that enables us to make requests and receive those responses is the hypertext transfer protocol. And these gets, posts, puts and deletes are methods that HTTP understands, right? The GET, the POST, the PUT, the DELETE are the methods that come with HTTP. And when we built out our API, we could have written some raw code that listens for those HTTP requests. We could get closer down to the raw node, but we decided to use something else that helps us manage all this HTTP request response, the gets, the posts, the puts, the deletes. What are we using that helps handle all that stuff for us? Yeah, Express. Express makes dealing with this so much easier. It gives us a bunch of methods that we can use that enable us to listen for the gets, the posts, the puts, the deletes, and handle those responses. We wanna send an HTML file, we just say send file. We wanna send some JSON, we just say JSON. We say we want to render some EJS to spit out HTML, we just say render. What? That's the coolest stuff ever. That is the coolest thing ever that I don't even have to understand.

I don't have to understand anything about this. I don't need to understand how the HTTP method is working. I don't need to understand anything about TCP. I don't need to understand anything about IP. I don't even even have to understand like how these get, post, puts, deletes are doing the thing. Express what all that away from me. Express what's all that away from me. Yeah, it abstracts all that stuff away from me and just says, hey, Leon, what's up? What do you want to do today? And I'm like, Express, we're going to do the same thing we do every day. Try and take over the world. Or, you know, build some full stack web applications. It's beautiful. That's exciting. Like to me, this is like the dopest stuff ever that I can just write, get, post, put, delete.

my server understands it, and then I just get the focus on what I want to have happen, right? So we had this original request that came over, they typed in a URL, they hit enter, that made a get request, we have some code running on our server called our API, and it's set up to hear that get request, right? And when it hears that get request, we get to say what happens, right? When our server hears that get request, when somebody typed in the URL and hit enter, right? Our API that we wrote heard that request, and we get to decide what happens when we hear that get request. And tonight, we're gonna do some extra stuff that we didn't do last week. Last week when we heard that request, we responded with some JSON. But tonight, when we hear that get request, what are we doing? I kind of just teased a little bit. Tonight when we hear that get request, we're doing something a little bit different. Yeah, uh-huh, a little bit different. We're gonna go to a database to get our data. Instead of that data being an object, right? Instead of that data being an object that's already on our server side, when we hear that get request, we're gonna go take a trip to our database and we're gonna get that data. And once we have that data, we're gonna plug that data into a template.

And that template is gonna spit out what? That template's gonna spit out what? Yeah, that template's gonna spit out some delicious HTML. And then that HTML is what we're going to respond with. HTML's what we're gonna respond with, right? And so we get control of what happens when we hear those requests, and tonight we're taking it to the next level. And instead of having data that's hard coded as an object server side, right? We're gonna go to the database, right? We're gonna go to the database, we're gonna get that data, and we're going to respond with it. Let me show you what we're gonna build tonight. I have a live version and I have a, uh, like a local version because I'm sure we're going to tank the hosted version. As soon as I show it, don't be a, don't be a crumb bum and like, try and tank it. Uh, I have this rap names, a hundred devs dot Heroku app that's live. And you can see from the last cohort people popped off, right? You can see all these different wrappers with their birth names here.

And we can upvote the name and we can delete it if we want to, right? Right? And so what I want you to do is to see that we're gonna build something cool, but I made a simpler version here that's local cause I know that you're going to, it's gonna get wrecked, that's okay. It's gonna come down, there's too many of us, that's fine. I'm not paying for my Heroku instance, and so it's just gonna pop off the internet. But here's my local version. And so the cool thing here is I can add wrappers. I can delete wrappers. Sorry, little Nos X. Boom, so that wrapper is gone, right? I can eventually upvote my wrappers, which we'll see more on Thursday. We solved the deleting and I can also add. So let's, let's add back little NOS X. Beautiful. Uh, I forget what they're, there we go.

Boom. Boom. And what I want to ask you, what I want to ask you is. Did I know all the rappers people were going to submit? Like, was there a way for me to like hard code how many rappers are going to show up? No. So there's a lot of little pieces that are happening here that we have to introduce tonight, right? There's a lot of little things we have to introduce tonight. One, I need a template that I can plug my wrappers into so that I'm not hard coding my HTML, right? There's no way for me to have known the wrappers that you were going to submit. So instead of having a hard coded HTML file, right? Instead of having a hard coded HTML file, I need a template that we can plug data into. Think of it like a fancy Mad Libs. If you ever played Mad Libs growing up, it's like a, it's a sheet of paper that has a story, but you get to fill in the blanks. That's what we're gonna use.

We're gonna use our EJS files as templates that we can plug data into. The other thing is instead of, instead of having to, instead of having to keep track of like a messy, a messy object on our server side, we are going to use, right, we are going to use, we are going to use, right, we're going to use our database. And so you can see here, each wrapper that I added has a specific spot in my database, right? So whenever I add something, I can see that object, right? And I can keep track of it. And so instead of having like this messy JSON object on my server, each wrapper gets its own document in my database and I can go and get all these documents. I can update them. I can delete them. I can do whatever the heck that I want, right? To these objects, right? Cool. Don't pay attention to the old wrap app. That was my honeypot. I just wanted everybody's IP address. So all the people that are acting a fool, I'm just gonna ban them from Discord based on their IP address.

So don't worry, you're good. It was a honeypot. We got them. They couldn't help themselves. We're good. Hope they use the VPN Appreciate you. Thank you so much. Thank you for participating my grand experiment That's I'll be using my break time to do you got got So we'll just leave that running for them they can keep doing their the little their little things I'm not even gonna show it Let's just close it for this evening. It was just there to get them. They got, got, got, got. We're good. Peace. Hope you enjoyed Discord. Hope you enjoyed this community. Have a good rest of your, rest of your life.

The whiteboard's still up for a reason. The whiteboard's still up for a reason. Let's think about this. All right. Let's think about this, right? I, on the client side, right, right, I was able to type in a URL, hit enter, all right, That request made it to my server. Made it to my server. There is some code running on my server. There is some code running on my server that heard the request. That heard the request. And when I heard this request, All right, when I heard that request, what did I do? All right, when I heard that request, what did I do? I decided to respond. But to respond, right, I decided to respond. and the way that I responded was by going to the database right by going to the database right by going to the database I got all of the wrappers right I got all the wrappers, and then I used that data to plug into my EJS file, which we haven't really talked about yet.

It's just a template, right? To plug into my template, and then that template spit out HTML, and I responded with that HTML. And that HTML, right, that HTML came all the way back to the client side device, right? Came all the way back to the client side device and that's what they saw. So we're building, we're building on this idea, right? We're building on this idea that we can, right, right, that we can type in a URL, hit enter. When we hit enter, when we hit enter, that request leaves the client side, makes it all the way to the server. The server is set up to hear that request. And when it hears that request, right, when we hear that request, right, When we hear that request, we get to control what happens. And as we start to progress, we're gonna be doing more and more stuff. Cool. Now, we did the reading before. We also have to do tonight the creating, right? We have to do the creating, right? that we got to do the creating.

So here we saw that when we enter in a form, we were able to create something that happened. So when we come back from break, we come back from break, we're gonna talk through the creating, we're gonna talk through the deleting, and then we're gonna start adding the little things that we need to understand tonight to be able to do this process. So, lots of fun stuff to get to tonight. We're gonna have the ability to create, we're gonna have the ability to read, we're gonna have the ability to delete, and we're gonna see the tools that we need for that to be able to work. Cool. Alrighty, folks. Let's go ahead and take our five minute break. I'm gonna go ahead and put that on the clock here. There's no files that you need for tonight. We're just kind of looking through some stuff that we're sharing you have the slides if you need them But five minutes on the clock when we get back folks. We're gonna talk about that creating and talk about the deleting We're gonna see how a project like this comes together and by the end of tonight You'll be able to build any app that you want. This blows my mind. This is like the best stuff ever. All right, folks Enjoy your break. I will see you in five minutes already so I I know some folks I I joke around a lot if you haven't gotten that by now.

I joke a lot on stream I know some jokes are they they're hard to understand but like I joke a lot I'm not banning anyone from being reckless and any of the stuff that I hate that I share, right? it I People people really be like sending message like how can you ban people because come on now? I'm not gonna ban somebody over that right? I was a 12 year old little shit back in the day, too Right. Like if you're still in like your 12 year old little shit phase, that's okay. That's on me to design systems so that I don't get got right. It's disappointing that you're a little shit, but like. I understand how the internet works. I know that there are folks that are little shits out there. I was a little shit back in the day. So if that's where you're at in life, that's okay. I'm not going to ban you over it. I just think you're a little shit, right? Like, come on. We were there.

I was there. You're there now. It's okay. It's cool. Right. But I understand how the internet works. And I'm not going to ban anybody over deleting something on my Heroku app. I just got to do better things to stop that from happening. And so one of the things I could have done, and we'll use this as a lovely little segue is when you are using Mongo Atlas, you can actually, you can actually block IP addresses, right? I could have limited it to just my IP address or I could have whitelisted it, right? And so what it had was a whitelisted IP address. So it means anyone's IP address could have been accessing that instance of the MongoDB database. Now, the one I'll be sharing for the rest of the class, it's whitelisted and targeted to only my IP address. So even if you have access to the database, Even if you have the ability to edit stuff, you shouldn't be able to do anything because it's tied to my IP address Right. So there are ways that we can prevent this stuff in the future, but I'm not banning anybody Come on folks that that's that's just me joshing around and so it will see that a little bit later tonight cool Everybody's like still ban them Leon just ban them No, no, I want you to, I want you to click around.

I want you to play with stuff. I want you, I want you to break stuff, right? Like I want you to, I want you to have fun with it, right? Just don't, just don't be a little butt, that's all. It's how we learn, it's a part of learning, right? Cool, all right. So we talked a little bit about, let's go back to the slides real quick. We talked about a little bit how the internet works. We talked about that get requests, right? but there's so many other things that are happening that we need to be able to handle for our applications to work. And so tonight, we're going to build out our API so that any client can talk to our server, right? And when they talk to our server, we're going to write our API to do a bunch of different things as a response. So far, right, so far we have seen a file response with send file, we've seen a JSON response, and tonight we're also going to see a render of HTML that gets responded with. Cool. Now, the four things that we're setting up to do are our CRUD request, our creating, our reading, our updating, our deleting.

And to be able to do the getting the posting and the delete that we want to do tonight We need to add two more things into our repertoire That first thing is MongoDB. And then the second thing is EJS it's in the game. All right, so MongoDB is a database and the beautiful thing about MongoDB is that if you have ever used objects, right? If you've ever used objects, right? If you've ever used objects, you can use MongoDB. That's it. If you have used objects, you can use MongoDB. MongoDB has two really important terms. They have collections and documents. A collection is just a group of documents and a document is just an object. That's all it is. So here we have a collection and our collection is made up of individual documents and our individual documents are just Now, if we are talking about our lovely wrappers API, right, we're talking about our lovely wrappers API, what type of collection are we going to see? So if we're thinking through the data that we need to collect, what is our collection going to be called? Look at our app, what does our app do? It keeps track of rappers' names.

So what do we think our collection in MongoDB is gonna be called? Yeah, rappers. We're gonna have a collection of rappers. Great. We're gonna have a collection of rappers. Rappers, like. And each document inside of rappers is going to be one what? Each document inside of our wrapper collection or our wrappers collection is going to be one what? One wrapper exactly one wrapper So this one might be Chance the rapper. Please say the rapper this one might be 21 savage. This one might be polo G, right? But that's it MongoDB is a collection of of documents where the documents are just objects, right? So each one of these objects is something that we can use, that we can consume, that we can utilize in our app location. And we can actually see it when we look at our Mongo Atlas account. Look, here's my collection of wrappers.

And you can see Chance the Wrapper is one object, Holo G is another object. Little Nos X is another object, right? And 21 Savage as another object. So a lot of folks say, a lot of folks say, Leon, why MongoDB? Right? Why MongoDB? Why do you start MongoDB? Why not SQL? One, if you know how to use objects, trust me, you know how to use MongoDB, right? It's super easy. If you know how to use objects, you can work with the data that's coming in and out of the MongoDB, right? The other thing is that when you are using it, you do not need a querying language. Like you don't have to use, you don't have to learn another language which to be able to use what's happening inside of your database. If I want all of the documents out of this collection, I simply just say, find. That's it.

Just find. And it will find all the documents in this collection. If I want to add a wrapper to this collection, like if I want to add a document, it's simply insert one. If I want to delete a document, it is simply delete one. So no querying language to learn, it's plain English for what you wanna do in relation to your database. So if it's made of just objects, which we should feel comfortable with, if it has a very easy to use language, you don't have to learn a whole other querying language on top of it, that makes it a great place to start with understanding how they build a full stack web application, right? Because when you're building this full stack web application you are using stuff that kind of already sounds familiar or isn't too wild to understand. And then the last thing that I really enjoy is that we have Mongo Atlas. I asked you all to create a Mongo Atlas account And what this does, instead of having to have like your database locally, we are using somebody else's computer to host our database. And this is really important because we all wanna work with each other, right? We're eventually going to work in groups. I eventually wanna be able to share my code with you, right? And the cool thing about Mongo Atlas is that they're handling hosting that database, setting up that database and all I have to do is connect to it and I can do all the stuff I need to do so MongoDB gives us a lot of flexibility. It gives us the ability to work with objects that we already feel comfortable with a plain simple language to interact with the database. And then we also have this phenomenal free service where we can host our database and be able to work in teams, just be able to share code and it all just works.

So that's why I start with MongoDB. We will see some SQL later on in program. This is why it's a good place to start here though. Cool. So we already talked about our wrappers here. We know that we have a collection of wrappers and each document, right? Each document that goes into our collection will represent one wrapper. Cool. We're gonna see this in way more detail in a little bit. I just want to put that into your brain. If you haven't already seen MongoDB, if you haven't already seen EJS, you probably didn't do the what? The homework. And so you're gonna see that I'm purposely, I am purposely using examples and similar enough code to what was covered in the reading so that you're not transit, So you're not transitioning, like, without having seen this stuff, right? So please, you gotta do the homework, especially as when we come back from break, if you're not doing the homework, it's gonna be too much while you're sitting in class to be able to suck it all in, right? So make sure that you are putting in that effort to get through it.

You don't even have to, like, really rockstar. You don't have to really 100 devs it, right? You can just get through it. That way it's not too much. It's not the first time you're hearing about documents and collections. It's not the first time you're hearing about EJS. This is a little bit of review, a little bit of review. Cool. Cool. Next. Next we have to talk about EJS. Now remember, when we're looking at this code here, when we're looking at this site, right, when I'm looking at this site, when I'm looking at this site, each one of these is an LI, right? Each one of these is an LI. Did I hardcode four LIs into my HTML so that I could respond? No, I had a template and what I was able to do, what I was able to do was plug data into that template that spit out the HTML that contained four LIs.

But my HTML was not hard-coded. It was a template where I was able to plug data in and then spit out HTML that I then responded with. So when we look at this right here, what we're actually looking at is some EJS. So here's our EJS. What you're gonna notice about EJS And the reason why I start with EJS is because this EJS kind of looks a lot like what? Does this replace our normal HTML file? It does. It looks like a lot of HTML with a little bit of JavaScript sprinkled in. It has its own syntax. Like things are a little different. Like we have like this, this, this, this caret parentheses type syntax. But what it is, is just regular HTML with a little bit of programmatic stuff thrown in. And so it's a really good transition, right? It's a good transition from just regular HTML, right? To being able to have a templating language, right?

That we can plug stuff in. And once we get a little bit further in, we can use other things that make this template a little bit easier to do. I use things like pug and stuff like that. But to start off with, definitely start with EJS, right? I have a lot of students that run into other templating languages, and the problem they run into is it's too different than the HTML they're comfortable with. With EJS, this is just HTML with some stuff plugged in, right? And so we start here so you can build applications and eventually we'll get to the point where our front end or our views are handled by other things, maybe some React, maybe some other things. But starting with EJS has always been the smoothest pass for my students. Cool. So what you're seeing here is I have a for loop. And what is this for loop creating? It's creating LIs, yes. So what I am going to do is I am going to take my data and I am going to plug it into this EJS template with the goal that this EJS template spits out what? What does this EJS spit out at the end? HTML, so my goal is to take some data, plug it into this template and have it spit out an HTML file.

And so what we're going to see is that I have this info. Info is representing my data, the data that I got from the database. If I look at my database, how many documents are there? There are four documents. So how many times do you think this for loop is going to run? How many LIs is it going to create? Yeah, this for loop's gonna run four times. If there were four documents, this is going to run four times. And each time it runs, it's going to build an LI that has a span holding their stage name, a span holding their birth name, and a span holding a delete keyword or word, right? So what this template is able to do, it's able to see, oh, there were four bits of data. let's build four LIs that each have a stage name, a birth name, and a delete. And so this EJS runs, right? This EJS runs and it's building out an HTML file. And when it is done, it sends that HTML file back to our user, right? So this enables us to not have to have stuff hardcoded anymore, we can do stuff dynamically, we can build stuff based on the data that we have in our database and not be required to just have hardcoded HTML anymore.

Now, one question that always comes up is Leon, isn't this violating separation of concerns, right? Aren't you introducing like JavaScript? No, this isn't JavaScript. It just looks like JavaScript to make your life easier. What is the end result of this EJS? What does it spit out? What is the end result of this file running? HTML, exactly. We're still getting HTML at the end of the day. This HTML could link to other JavaScript, but this in itself is not actually JavaScript. This is just a combination of HTML and something that looks like JavaScript to make our lives easier. If you know JavaScript and you know HTML, you can write EJS. And that's why I start with it, right? So there are some little bits of syntax that we're going to have to learn. You're gonna have to learn that, oh, when you are doing blocks of code, those blocks of code go in between the caret and the modulus or parentheses, right?

When you are plugging in variables, it's a little bit different with the equal sign, right? So there are some little bits of syntax that we're gonna have to learn to write good EJS, but what are we not doing tonight? What are we here for? We're here to paint a what? We're here to paint a lovely picture. We're not really cared about the details. We're not really worried about like how EJS is doing this, how we're generating the HTML, what the syntax would be, right? We're just trying to get the big picture of how all this can come together. And then exactly, we can be baddies and write bad code. We're here to paint the picture. So, to paint this picture, we need to understand that we're going to store our data in a Mongo database. And a Mongo database is just a collection of objects. We call those collections, collections, and we call the objects documents. For each bit of data, or in this case, each one of our wrappers, we're going to have an individual document for each one of those wrappers. And then And the thing is, eventually we want to be able to show all the wrappers to our users, right?

And if we want to show all the wrappers to our users, we're going to need a template that we can plug that data into, right? That we can plug that data into that spits out HTML so we can respond with that HTML. What's the difference between EJS and a script tag? Good question. Let me show you real quick. Oh, we can look at some code real quick. Views, EJS. Here's our EJS, right? It looks like regular HTML. We have some special syntax, but down here is a script tag, just like normal. Nothing changes when you're using EJS other than when you wanna plug stuff into your HTML, right? When you wanna plug in stuff, You got to use this little bit different syntax when a plugin like you want to pull out like variables You got to do this a little bit different syntax, right? It's the exact same thing as HTML with a little bit of different syntax mixed in But all your other stuff is the same like if I want to do a link to a JavaScript file Boom, it's still the same script tag Well All right Talked about Mongo, we talked about EJS. Let's talk about the big picture, right? Let's talk about the big picture here.

Cool. So let's use this application as our example. Here you can see I just refreshed the page. When I refresh the page, what type of requests did I make? I made a get request. So let's talk about it. Let's talk about that get request I just made. In the browser, I hit refresh. That made a request from my client side to my server. And my server had some code set up to hear that request. What type of request was it first? It was a get request. By refreshing the page or typing in the URL on hitting enter, we made a GET request. Now, what code was running on our server that could hear that request? Our API, exactly.

So here's our API code. Our API code was set up to hear that GET request and what route was that request made from? It was just my localhost2121. What route was I on when I made that request? When I hit that refresh or I hit that enter? Yeah, I was on the root route. And we represent the root with that lovely forward slash. Great. Now, what I needed to be able to do, like if we look at this application, is I needed to be able to respond with some HTML that had all the entered wrappers. What I need you to see is that it's not magic, right? We made a request from our client side device. That request made it to our server, right? Our server had our API code on it that heard that get request. And what did we need to do when we heard that get request? Where is our data stored right now?

It's no longer a JSON file. Where did it have to go and get the data that we were going to use? Yeah. So the very first thing our get request was coded to do, right, the very first thing our get request was coded to do was to go to the Mongo database and find all the documents in our wrappers collection. Once it went and got all of the data, each individual wrapper is a document in our wrappers collection, right? Once it got all of that data, where did it hand that data off to? Yeah, it handed that off to our template, to the EJS, right? It took all this data and handed it off to the EJS. Now, our EJS spit out what? It spit out what? What did our EJS spit out? It spit out HTML, exactly. This EJS spit out some HTML, and once we had that HTML, Once we had that HTML, what did we do with it? We respond it, exactly. We respond it with that HTML.

And that's why we were able to see all these different wrappers, right? Inside of my application. We made a request to a server. The server heard that request. It went into our Mongo database, grabbed all the wrappers from our Mongo database, put that into our EJS template. The EJS template spit out some HTML and we responded with that HTML. It's really wild how fast all this works. So I completely agree. Some folks said, what is views? Well, right now, all of our code is kind of all mixed together. Right now, our server.js file holds our API, everything that set up our server, right? It holds a lot of stuff, right? It holds a lot of stuff. Eventually, we're gonna introduce an architecture similar to like how we had separation of concerns where we had HTML separate from our CSS, separate from our JavaScript. Eventually we're gonna separate out our concerns on the backend as well.

We're gonna use something exactly called MVC, our model view controller. All of the stuff that we write to talk to the database, that's gonna be handled by our model. All the stuff that we're gonna write that handles like the templates, the EJS, like what the user eventually is going to see will be our views. and kind of like the middle person in between that's like listening to the request and figuring out how to get those responses, that'll be our controller. So we're gonna get to that in a little bit in the future where we'll have that architecture. It's not something we need to worry about right now, but you're gonna start seeing me put all my EJS files in a views folder so that we can start getting used to that idea that our code is gonna be in separate places, that it all comes together. So all of the things that my users will eventually see like all my EGS templates They're gonna be in a folder called my views folder. That's where that's coming from cool now Some folks are asking what the heck is public, right? Some folks are asking what the heck is public and what I got to ask you is Let's look at this HTML file real quick this template this EGS template spits out HTML What's at the beginning? What's at the beginning of this template and at the end of this template? What do these represent? They're asking for some client-side JavaScript. They're links to files. They're links to files, right? And so the cool thing, remember I promised you last week to show you one of my favorite lines of code of all time.

One of my favorite lines of code of all time. You ready for this? You ready for this? I'm gonna show you. Here it is. App.use express static public. What this line of code is doing is saying any file that you put in the public folder, like the public folder's real, like I have a public folder right here, my JS files in here, my CSS files in here, any file I put in this public folder, right, any file I put in this public folder will just be served up by this line right here. I don't need to create a route for it, I don't need to do an app.get for it. Anything I put in that public folder, that's just like a regular static file, any of my HTML or any from anywhere in my application can request those static files and it just serves them right on up, right? Mind blown, right? It's the beauty of Express, it's top 10 favorite lines of code. It just blows my mind that like somebody thought through to do that, to make our lives so easier, especially when we saw how hard it was to hard code all those things when we were writing our node server from scratch every JS file every CSS file had to have a route we had to handle we had to tell what file to send we had to do all that heavy work that this one line of code just eradicates and it works folks get this it works with images too yeah a lot of folks are like Leon how do we do images, it works with images too. Yeah, baby, exactly. Cool. So any static file that you have can be served up by that public.

So the interesting thing is we responded with that HTML file and then that HTML file made two more requests. It made a request to our server for our CSS file. It made a request to our server for our JS file. And it wasn't necessarily our API that had to handle that. It was just Express that handled it because it was already in our public folder. It knew what to do. So we can put anything into our public folder. We can get our main JS. We can put our CSS. We can put our fonts or images. Everything can go in that public folder, all of our static files and just get it served up. Cool. Now, we did a big hop, skip, and a jump here, right? Everybody, let's take a collective deep breath one more time. One more.

All right, now we don't need to know how all these pieces work underneath the hood. We just need to understand how they're being connected. So I'm gonna walk through what we just did, and then I'm gonna show you the code. And I need you to be okay when I show you the code. I don't need you to understand. I don't even, like, I don't type this shit out. I can't tell you how much I have templates that I use for this, that I copy and paste from my past code that I've written, right? Like, you have to understand that you don't need to have this memorized. Sorry, one second. You don't have to have this memorized, right? You can just, you can start playing with these Lego blocks and build some amazing things. All right, so what we have here is we went to our application, I refreshed the page or let's say I typed in localhost 2021 and I hit enter, right? I hit enter, right? I hit enter. When I hit enter, what type of request did I make?

I made a get request. All right. Hit enter, made a get request to my server. What code is running on my server that heard that get request? The API, exactly. Since I was on localhost 2121 and I hit enter there, what is the route for my GET request? Yes, it is that lovely root route, that forward slash. So, there was some code tied to that route. it heard that request and then I wrote out what I wanted to have happen when I heard that request just like a click event when I heard the click I wanted to do X Y & Z when I heard this get request on the root route I wanted to do a few things the first thing I wanted to do was go to the database and get all my wrappers out of the wrappers collection I wanted to grab each document from that collection, and once I had all that data, right, once you have all that data, I wanted to send it where? Where did I want to send all those documents to? Where did I want to send them to? Yeah, I wanted to send them to my EJS. Beautiful. Once I sent it to my EJS, I was able to plug in all that data to the EJS template, and what did that EJS template spit out? It spit out an HTML file.

And once it spit out that HTML file, what did I do with it? What did I do with that HTML file? I responded with that HTML file and we were able to see what we see here in our application. Great. Now, once this HTML file was rendered by the client, what else happened? What else happened? What else happened? Hey, thank you for the hydration. Cheers to you. Let's look at this. Look, let's look at this, right? Let's look. What is this? Let me look at current rappers. What do I know about current wrappers?

That's CSS, right? It's red. So there was probably some CSS that it needed. And I saw before that I can like click on these things and stuff happens. So what's the only thing that can hear client-side clicks? Our client-side JavaScript. So when I sent my HTML, I did not send CSS. I did not send JavaScript. It's only once this was rendered in the browser that it made those requests. And the cool thing is when we're using Express and those get requests get made for the CSS and the JS, do I need something as part of my API that's listening? Do I need anything that's part of my API that is listening for the CSS request or the JS requests? Not really, not the API I'm writing. The cool thing is that since I'm using Express, if it's in the public folder, Express will handle those static files for me. I don't need to do anything else other than put it in the public folder and it will just work as long as I have this gorgeous line of code on line 19. All this line of code is saying is, Hey, any requests for regular files like HTML, sorry, regular files like CSS or JavaScript or images or fonts, as long as they're in your legitimate public folder, like I have a public folder here that's like a folder in this code base, as long as it's there, it'll serve it on up.

Does it always need to be line 19? No, that's a good question. A lot of this stuff, it doesn't really matter too much the order. We're going to see some things need to like call things, but remember we're still technically writing JavaScript and JavaScript technically still has stuff called hoisting. And so scoping in a big file like this is weird. We don't have to worry about that. It doesn't always have to be line 19. You're going to swap out, do things differently throughout the days. Alua Bunmi A, thank you for the posture check. Let's get into this. All right, hold on, let me get up, sit up straight. Ooh, ooh. Is the process the same even if we don't use Express? Yes, any static files can use the public folder. It's not dependent on your view engine.

If we look at this line of code right here, we're saying that our view engine is what? EJS. This is literally the line that says we're using EJS. It could be any other templating language that we want. There's ones that are, there's so many different ones, Pug, whatever you want to call it, right? There's so many out there. We're just telling it here that we're going to be using EJS so that it knows, hey, we're going to be using EJS to generate our HTML. Cool. So we walked through that whole process where we made a request to the server. Our API had that code that heard it. That API then went to the database. It got all the information from the database. It sent all that information to the EJS. The EJS spit out some HTML and then it responded with that HTML back to the browser. Let's see the code that's actually handling this.

You ready? All right. Look at the code. Here it is. Here it is. All right, we've already seen this part. The app.get on the root route. You've already seen that. That's easy. When we hear that request, this is what we're doing. Remember, everything that goes inside of here is what we are doing. This is just the lovely callback. This is exactly like a click event. All right, exactly like a click event. You should feel comfortable with this.

Now, inside the click event, we're gonna tell it to do some stuff and treat it like it's readable, because it is. Here's what we're gonna do. We're gonna go to our database. We're gonna find the wrappers collection. We're gonna find all the documents in the collection and we're gonna turn it into an array. Let's get rid of this for now. We're just gonna eat this for right now. And we're gonna turn it into an array. Let's think about this for a second. We know when we heard the get request, We had to go to the database. This is it. Go to the database, find the wrapper's collection, find every document inside of that collection. If we look at our collection, here are all the documents. All the documents are really just what? All of our documents are really just what?

Objects. So if we're getting all these objects back from the database, what's the only data structure that we've seen so far that can hold a bunch of objects? An array. So we tell it, hey, put all these objects in an array. That's all it's saying. I know it can look a little scary, but it's so readable. It said, go to the database. It said, find the wrappers collection. Find all the documents inside that collection and put them into an array. So now I have this big old array, right? a big old array that is holding all of the objects from my database. And is my database like on my machine? It had to make a request to the database, right? And so we're used to making requests and getting what back, like at like a really high level, we were dealing with stuff in the browser that we called what? Promises.

So we can kind of just carry that knowledge here, right? This whole thing is, we'll just say for now, a promise, right, that gives us an array of objects. Objects and that means that data is holding our what what is data holding? The result yeah, it's holding that array It's holding all those objects. We know that the then fires After we get that request that response right the result, right? so data is It's holding our array of wrappers, right? We could console log this. Let's console log it just so we can see. Cool, let's try this again. I'm gonna restart my server. Cool, connected to my database. Let's go ahead and refresh the page. All right, I refreshed the page. And let's look, when I console logged, look what I console logged. What is that, chat?

What did I just console log? It's an array of objects. So, we can see that data really is holding the response from our database, right? data really is an array of objects that came from the database. And what are we gonna do with that array of objects? What are we gonna do with all that data? What are we gonna do with all that data? What are we gonna do with all that data? We online, what are you gonna do No baby. Oh I gotta go find a new place. What are you going to do with all that data? What are you going to do with all that data? What are you going to do with all that data? What are you going to do with all that data? Hey.

All right. We're going to put it into our EJS. Now, please, come on. Give me two seconds of focus. Two seconds of focus. Two seconds of focus. Come here, get in. I need you for a second. You were on your phone, I need you to put your phone down and come back for a second. All right, you're here, all right, I see you Weezy. Thank you for coming back. All right, funny, because I know you. We've been together for how many weeks now? Come on now. All right, you're with me.

When I responded in last week and I wanted to send a file, it was response what? Response what to send a file? Response send file, beautiful. When I wanted to send JSON, it was response what? Response JSON. If I want to render some HTML out of my EJS template, what do you think the term's going to be? I wanna render some HTML out of my template. Thank you. It's gonna be render, right? We've seen this already. We've seen response.sendfile. We saw response.json, but now we have response .render. So think of it as two steps. What do you think this side is going to do? What is this going to do?

Some people are like, Leon, I did the homework. I know, that's the point, that you're coming here prepared, that you're seeing it again, you're asking questions. It's solidifying in your mind. It's our spaced repetition, our active recall. Yes, it's rendering our HTML. It's spitting out our HTML. This whole right-hand side here, what it does is it spits out our HTML. Had one thing to do and I spelled it wrong, right? It rendered out an HTML file, and then what the heck did we do with that response? What the heck did we do with that HTML file? We responded, we re-spawned it. We responded, we responded with that HTML file. Come on now. I know you're getting this a little bit. I know you're getting this a little.

I know, I know, I see the gears. Taking a little while, but we're getting there. We're getting there. Because once you understand just this look a little bit of code. It's just a little bit. It's just a little bit of code But once you know how to use this bit of code you can build whatever you want You now can go get any data from a database Plug it into some EJ s and return some HTML Like that blows my mind, right? It blows my mind that you can do it, right? Now, are there a little bit of extras that we have to talk about? Yes, we have to talk about like what's happening in this EJS file, which we're gonna get to in a second, but it's just a series of requests and responses. That is all we're doing. We're requesting stuff and we're responding with stuff. And now the stuff that's happening between the request and the response is getting a little bit more complex, is getting a little bit more full stacky, but you're just doing the same thing we were doing last week it's just we're doing a little bit of extra stuff in between that request and that response. So render is a method of the response object, yes. Just like send file was, just like JSON was, it's the beauty of using respect, it's the beauty of using express. I can just say render and express those, everything that needs to happen to render my HTML for me.

I can just say, send file, and it knows everything that I need to do to send a file. I can say, JSON knows everything to do the response to get JSON, right? It's the beauty of using Express to do this for us. Express handles all of that. All right, let me show you one thing and then we're gonna take a break. One thing, we're gonna take a break. All right. We said that data is holding our what? Data is holding our what? Our array, yes. It's an array of objects. We console logged it. Look, look, look, look, look. We console logged it. Here we go.

We console logged it. Here are all the objects, right? All the objects, all the objects that were in that array. All these objects that came from our database, right? All these objects that came from our database, right? All right? Now, what name, what name did I give to that array? Take a look at this code. What name am I giving to this array? It's stored in data, but I've given it a different name. You ready? Take a look. Info. Here is an object. Here's an object.

Here's an object. The name or the property is called info and the value is data, which is our array of objects, right? We have an array of objects that's here called data, but I've given it a name of info. Why? Well, EJS is expecting me to pass in my data in what format? Take a look. What am I passing into my EJS? Yeah, it's expecting an object. So that's what I'm giving it. I'm giving it an object. and I'm giving that object the property of info, right? I'm giving it the property of info, and I am passing that array in with the name of info. So when I look in my EJS, when I look in my EJS and I see the word info, what is it really? Wherever I see info, it is really my what? It is really what?

It is data or my array of objects or my array of objects that have the wrapper data inside. So wherever I see info inside of index.ejs, it is my array of objects. So let's take a look at the ejs file. Inside my views folder is an index.ejs. Let's take a look at this loop and then we're gonna take a break. What am I looping through here, chat? What am I looping through here? I am looping through info, which is my array of objects. So when I do info dot, info square brackets I, the very first time that this loop runs, info I is really info zero. And if I look, if I look the first object, here it is, info zero would give me this object. Does this object have a stage name property? Yes, it's 21 savage. So that's the same thing as me plugging in 21 savage here into the span. Right? Info zero, we're just gonna keep doing it here.

Info zero birth name. Does my first object have a birth name property? It does, we plug in their real name. So it's as though I took this real name and plugged it in here. Right? Then info zero likes, does it have a likes property? Yep. And it has a value of one. So it's as though I plugged in one here. Boom. Now, the interesting thing is, it's not just gonna stay like this, right? We're gonna put it back what we had in here. The interesting thing is that we did this for the first object, but how many more times do we need to do this? How many more times do we need to do this? I love you.

You should definitely be using the map function. No. You got to be able to see it. You got to be able to feel it. We're here to learn not to be code weenies. All right. All right. So we need to do it three more times. So this L I is going to be created it three more times, right? Three more times. And we're gonna go ahead and grab that data. We're gonna go ahead and grab Chance the Rapper and plug it in. We're gonna grab Polo G and plug it in. We're gonna grab little Nos X and plug it in, right? We're gonna plug it in.

So somebody's saying, why a for loop though? It's a for loop because I have no idea. I have no idea how many wrappers are going to be in my collection, right? I have no idea how many wrappers are going to be in my collection, but with a loop, right? With a loop, I can do it as many times as I need to. I can create as many LIs as I need to, right? And so this runs. I build out each of my LIs, right? Can you use, oh yeah, you can use, you can use a lot of different stuff in here, right? Right? Remember, we're not really worried about the mechanics today. We're worried about the why, the picture, right? So this is gonna spit out three more LIs after our first one. And when it's done, we're gonna have an HTML file. We're gonna have an HTML file that has how many LIs?

How many HTML files, right? Yeah, it's gonna have four LIs. And so when we come back and look at our code, we know that we just rendered out an HTML file. We just rendered out an HTML file that had four LIs in it. And then what the heck do we do with that HTML file that has four LIs in it? We respond, baby. We send it back to the browser and that HTML file is loaded in the client side and our user can see all the wrappers that are currently stored in our database. So I know it's a lot. I know it's a lot. When we come back from our break, we are going to run through the get one more time. And then, ooh, look at it. Look at, uh, uh, uh, uh, oh, ooh. We're gonna go ahead and look at the creating as well. Right, we're gonna look at the creating as well. So we'll run through the get one more time.

We'll see the code, and then we'll take a look at the create, and we'll wrap up with a delete as well. Mr. Mike Randazzo added a two minutes to the timer, so we get a sweet seven minute break, folks. If you are able, holy fans teaser. Let's go ahead and take a seven minute break, please. Enjoy, if you're able to, please get up, move around, hydrate, and we'll be back in seven minutes, folks. Come on back, come on back. Please listen to Dr. Levi, the fitness doctor. Don't be like me, do your stretches, take care of yourself, please. I'm telling you, if you don't take care of yourself, it'll catch up eventually. Was a jam. Hey, good to hear that, Dummas. All right, let's get into it, folks. All right, so we talked about the get.

Let's run it back one more time. One more time, let's run it back one more time, then we're gonna look at the creating. All right, let's see, let's have a blank canvas here. We type in the URL we do in our client side, in our browser, we type in the URL localhost 2121. That makes a request to our what? Use our client side and makes a request to where? Our server, exactly. Makes a request to our server. And our server has some code running on it that can hear that request. What do we call that code that can hear the request? Beautiful, our API. and a part of that API is something that's already been coded that's listening for that type of request. It was an app.get, and since we're on the main route, we're gonna see that lovely forward slash. Now, once that request was heard, we had coded some stuff that we wanted to have happen. we wanted the request to then go to our database, find our collection of wrappers, and we know that a collection is made up of what?

Made up of objects, And so we're gonna go ahead and find all of those objects that were inside of that collection. And once we have a bunch of objects, what can we use to hold all of those objects? An array. So we did two array. Great. So all that we did is when we heard that request, we went to the database, we found our wrappers collection, we found all the documents in that collection, and we turned it into an array. Then once we had all that data in array, we passed that data into our what? Passed it into our EGS, so we had this, all right, we know we're gonna do a response, but we're gonna respond by rendering our EJS file, which I believe is index.ejs. And we're gonna render our EJS file, and we're gonna pass in all of our data, but we called it info. And you're like, Leon, why'd you call it info? Just, I picked something to show that that's how it could happen, but you could choose any word that you want. All right, now, inside of our EJS, wherever we saw info, info was really holding our what? What was info holding inside of our EJS file? It was holding the array of objects, exactly. We looped through that array of objects to build an LI for each object.

And when we were done, when this rendering was completed, it spit out what? Spit out HTML. Exactly. And it was already there for us the whole time. We responded with that HTML to the browser. Beautiful. Once that HTML hit the browser, what other requests did it make? What other requests did it make? Yeah, that actual HTML file, right? That actual HTML file made a request for a CSS file, a JS file, right? And was there actually like a particular part of our API that we set up that we have to like code out our API to handle that CSS and that JS file request? Nah, we were able to just use the public folder and we told Express, hey, anything that's in this public folder, just serve up, no questions asked. We don't have to create a route for it. We don't do anything fancy. We just drop it in that folder and call it a day.

Woo, Express, baby. All right. How are we feeling about the git? How are we feeling about the git? Like high-level concept. Not like the Lee and I feel ready to type this out. No, that's not where we're at. Like high-level concept that we understand how full stack web applications do this. Cool. Now, what I want you to think about is that the underlying bricks may be different, but every application you use is doing something similar. They might use a different database. They might use a different web framework, but it's still a request. There's still an API hearing that request. They're still going and getting data from a database. They're still plugging that into some kind of template, and they're still responding with HTML.

No matter what app you're using, it could be Facebook, it could be Twitter, it could be anything, like that's still happening underneath the hood. Plug in different languages, different kind of databases, different frameworks, but every app is doing the same type of stuff. Cool. What was the create? Chillbilly, hey, thank you for the gift of subs. I appreciate that. Thank you for being here. Cool. Thank you so much. What? What was the creation here? What are we creating in this application? Every time we did what, what were we doing that was creating? Yeah, whenever we added a new wrapper, that was creating. Cool, so let's go ahead and create a new wrapper.

You click on this instead of here. Let me slide this over here. All right, let's add a new wrapper. Rico nasty, and I have no idea what their birth name is. Rico nasty. There we go. Boom. Copy. Cool. And let's submit. Boom, there we go. So when I, Let me remind you, all right? I'm a poppin', let me remind you. They have one of the strongest bars in that song. What was it?

Come and find you. Oh, what was that? It's like one of my favorite bars of all time too. I'll remember it. I'll share it later. Oh, I got to look it up. Let's see. I'm going to go to genius over here. It's going to bother me. Sorry. Diversion. We'll come back to it. I don't even know if it's like stream friendly for me to say it, but. Oh, that's it. I love this part.

I love this part. This is so good. I'm not going to say the whole thing on the stream. I ain't scared. We'll say itch. I ain't scared. It's just a whole lot of gang shit. I'm a bear. You're a motherfucking reindeer. What? What? Bars. Bars. Where I stay, you motherfucking can't go there. Oh, oh, bars, bars, bars, bars, bars.

I love that. I, every single time I pop out my chair when, when they say that. Oh boy. I love that song so much. All right, cool. We made a new post that was going to bother me. When I have a bar in my brain, I can't remember. It has to come out. I had to stop everything. All right, cool. So we added, we added Rico nasty. What was the actual request though? What did I do to make the request? It is a, it is a post, but what did I do to like make that post happen? Like what did I do?

Yeah, I clicked the submit button. So when I clicked the submit button, that form submitted, right? When I clicked the submit button, the form submitted, and a bunch of stuff happened when that form submitted. So let's talk through what happens when a form submits. Cool. Let's go back to our slides real quick just because we have this nice little handy dandy graphic here. So it wasn't a URL. It was the submission of a form. And when I made the submission, that made what kind of requests? When I submitted the form, what type of requests did I make? Yeah, I made a POST request to the server. All right, I made a POST request to the server. Now, there was some code that was set up to hear the POST request from that form. The code that we wrote ahead of time that was listening for that request coming from the form was part of our what? What was that code called?

There was something in that code that could hear the post request. Yeah, it was our API. And we had a specific post request just for that form. I'll show you in a second how we could have multiple forms and how we can listen for posts from different forms. We'll get there in a second. But we made a post request from the form and we had a route set up to hear that request. Now, when it heard that request, what did we do? We heard the POST request, what did we do? Yeah, well, something really interesting. When we sent that post request from our form, we sent a lot of data along with it. We sent a lot of data along with that form. Whenever you submit a form, you're sending a lot of information. Not only are you sending what was in the form, you're sending a lot of information about your browser, like what version of Chrome you're running, you're sending like sometimes your IP address, cookies, all this stuff gets sent. And it's this huge request that gets sent to the server. Right?

There's a lot of data that's part of that server, right? A lot of data is part of that, sorry, that's part of that request that gets sent along, right? And so if you ever like wondered like how people like know where you are or like whatever, like any of that stuff, like every single time you make a request, You're not just like making a request. You're sending all this data along with each request. Your fingerprint, exactly. Not only, yeah, your user agent, any of your advertising cookies, your trackers, exactly, right? All this stuff gets sent with a request. And people store this. You can store that information. You can see like, all right, request came from this IP address. It was this version of Chrome. It was these plugins that were installed, right? And the interesting thing is like you can like pretty uniquely identify people not even based off of their IP address But by like what version of Chrome what operating system what fonts you have installed? Developers and designers stay getting got because we have really unique sets of fonts on our machines and all that gets sent right, and so the cool thing is we can actually look at that request and Pull the crap out of it that we want Right? Browserleaks.com, exactly.

Try browserleaks.com, it'll show you everything that's being sent with the request. Pretty neat. But a part of this request was what? What two things were we really concerned about with this request this time though? What two things were sent with that request? Yeah, we had some data that got sent along. We set along their stage name and their birth name along with this request, right? and so the interesting thing is inside of our app dot post the very first thing that we have to do is Pull that data out of the request Right. We have to pull that data out of the request and once we have that data from the request What are we gonna do with it? We're gonna send it to the database and we're gonna create a new what in our database? We're gonna create a new what in our database? Yeah, we're gonna create a new document. Remember, this is our wrappers collection. So we're gonna create a new document inside of this rappers collection that has Rico and what was their birth name? Maria.

That's a really pretty name. Maria Cecilia Simone Kelly. That's a beautiful name. So they put Rico and Maria inside of that document, right? All right, so the request came through. We grabbed the data out of that request. We sent that data to our Mongo database where we created a document that had that data. And then what was the last thing that we did? There's one other thing we did. When we were done sending everything to the database, when we were done creating the document, What did we tell the browser to do? Yeah, we told the browser everything went okay, it's time for you to refresh. And when the browser refreshed, it made a what? It made a get request. The get request did its thing, it went to the database, but this time when it went to the database, when it went to the database this time, there was one new document for Rico Nasty, right? There's one new document in there, right?

And when we passed all that data to the EJS, this time, instead of doing four LIs, instead of doing four LIs, we did five LIs, right? Because now there's an extra document. It's no longer four LIs, There's now a fifth. So we create a, sorry, fifth document. So we create a fifth ally in that EJS. That EJS spits out the HTML and we respond with that HTML, right? So it started off with a post and we ended up here. Charlotte 98, or Carlotte, Carlotte in 98. Thank you so much for the hydration. Cheers to you. I'll lose my friend. Minty fresh it is. Costco had it. Jasper, there is no timer. We're at the end of stream.

Is that a flex? I think Jasper is just flexing. Jasper is like, I can, I got so many channel points. I can, I can put out timers when there's no timers. He's like, ah, hey, look at me slashing out these channel points. You got to like that, huh, Jasper? Oh boy. All right. So we ready to see the code? If you remind me next class, we can do it on the first one, but y'all chat has to remind me. All right, you ready to see the code? Jester's like nah, it's okay. I got it like that. I Love it He's like nah we good Y'all the best Give VIP. Yeah, let's give VIP.

That was hilarious. I got a five. There we go. Jatt 20 Jasper Well Jasper you got VIP made me laugh Now you can flex for real. Cool, all right. So let's take a look at the code. Remember, we made a post. Made a post. We submitted a form. I cannot spell to save my life today. I just could not spell, I'm glad you couldn't see it. I'm glad you couldn't see it. I literally messed up spelling form. All right, so we submitted a form, which made a POST request to our server. Our server was set up to hear the POST request from that form.

Was set up to hear the POST request from that form. It took the data that came along with that POST request. We sent that data to our Mongo database, specifically our wrappers collection. We created a new document, right? A new document that had that data in it. And then once we were done, we said, all right, refresh. That refresh triggered the get and the rest is history. Let's take a look at the code. All right, so here is our post. Once again, remember, same stuff we've seen over and over again. Don't freak out when we see it, right? Same stuff every single time. In here, we have the same stuff we saw with the get, we're just going to do things that are a little bit different, all right? Things that are a little bit different. Can we avoid the page refresh?

Yes, but that's something we're gonna get to later. I want you to see, I want you to feel raw, I want it to feel real, I want you to see The, the, the, the, the, the, the, the, the, what's actually happening underneath the hood. Oh, this, and it's Jasper too. My name's Jasper. No, I'm not a rapper. I'm just here to make my stacks grow faster. Now, if you know what that's from, y'all some real OGs. Hey, hey, hey, I see you bark. All right, cool. So the post request was made. Abracadabra, abracadabra. If you watch Looter Squad, abracadabra is the best. Oh, that's hilarious. All right, anyway, let's get back into it. We made a post request.

Yeah, it was Odd Future. It's from Odd Future, yeah. We made a POST request. Once we hear that POST request come in, we go to the database. We find the Wrappers collection. And what do we wanna do inside that collection? What do we wanna do inside of that collection? We wanna put a document into that collection. And look at this beauty of a piece of, look at this. Would you just look at it? Look at it. I don't have to learn some new querying language. I don't have to learn, like, how to do some fancy database stuff. I literally say, insert one. Insert one.

And whatever I put inside of these curly braces, right? Whatever I put inside these curly braces, that's what gets put into the database. That's it. That's what gets put into the database, right? I can put anything I want in here. Let's clean this up. Let's make this do something really wild. Let's just inside of here, do Jasper VIP. That's it, we're gonna do Jasper VIP. That's it. We save it, let's restart the server. I might've made some other changes that'll break this, but let's see. All right. Let's go ahead and run this back. Let's put anything we want into this thing here.

Gonna say test, test. Right, test, test, right? All I've typed in test, test, but let's go to our Mongo database and take a peek. Look what's inside of our database. Jasper VIP, right? There's a refresh button, there is, yeah. That's it, that's what we put in there. If we look, let's go back, let's take a look. We submitted the form, we submitted the form, we went to the database, we found the wrappers collection, and we inserted a new document that had Jasper VIP in it. That's it. And then we told the page to refresh, right? When the page refreshed, we made a get request and it didn't know what to do. Like our EJS didn't know what to do with Jasper VIP because our EJS was looking for stage name and birth name. And it just wasn't, that wasn't here. So the EJS didn't know what to do with it.

But the beautiful thing is it didn't break. It just, it just rolled with the punches. Like, I don't know. And kept moving. It's beautiful. Like, it's so flexible. I feel like so, so many folks get really kind of like, ugh, like they get, they get really like, they get, they get really tight about this stuff. But it's so flexible. It just like lets you do what you want to do. And it's uninvited exactly, right? It just kind of gets out your way and it's just beautiful. I really love this stuff. Like I really, really do. And I hope that I'm doing at least a somewhat okay job of like showing you like how cool and like not too wild this idea is, right? Like we heard the post requests, just like we heard all the other events, right?

Right? Just like we heard a get, just like we heard anything else we've seen so far, but now we can hear a post, right? And now we're gonna go to the database, we're gonna go to the wrappers collection, and we're gonna insert a new document, right? A new document that we have full control over. We can put whatever the heck we want into there, right? We can put whatever the heck we want into there, but this time we just chose to put Jasper in there, right? We could put whatever the heck we want in there, but we chose to put that. So let's take a look at what we did actually have there in the beginning. Stage name, birth name, and likes. What I am doing here is I am crafting the document that's going into our database. All right, I am crafting the document that's going into our database. And I am literally giving it its property and value. Property and value. Property and value. Remember how I said that so much stuff get sent with that request?

Well, one of the things that we can look at when that request comes through is this thing called the request body, right? Is the request body. It's just stuff that gets sent along with the request. And part of the stuff that's getting sent with that request is anything that came out of the form. So to understand what's happening here, we have to look at the form, okay? Let's take a look at the form and I wanna show you. Here in our form, here's our form, let's take a look. The form has an action of add wrapper. Notice that action is the same as our route. That's how we could have different forms that are all looking for different posts, right? We could have as many different forms as we want, right? And the way we tie our API to a specific form is that the route is the same as our action. Okay? The route and action have to be the same. Look, look, the action on the form is add wrapper and the route on my post is add wrapper.

Right? That's how we connect them. We connect the form and the route via the action. Cool. Now, let's look at the actual form itself, and you'll notice that we have two inputs. How do we differentiate between the two inputs? Well, they both have different name properties. Whatever name I put there is how I can get that data from the request. Remember, this form's gonna submit and we're gonna send all the data with this request, right, this post request. Look, we're even telling it it should be a post request. We're gonna send all this data with the post request and inside that data will be something called of the request body. And that body is going to have a stage name property and a birth name property. Once we look at the request, we're gonna be able to grab that stage name and that birth name. I know that's a jump, so let's see it. Let's see it.

Let's actually see the request and let's actually see the body as well. Let's go ahead and do it. So let's do the request. I was gonna console log the request just so you can see all the wild stuff. All right, so first I'm just gonna console log the request just so we can see it, okay? All right, let me restart my server here. We're running on port 2021. We're connected to the database. Let's go ahead and add a wrapper here. Hmm, excuse me. All right, let's go ahead and add a wrapper. Somebody give me a wrapper. Who should we add? All right, I'm just going to pick my own. Thank you though.

Baby Keem. There you go. I don't know why they popped into my brain. Baby Keem. I don't know what their real name is, but let's go ahead and look up baby Keem real Quick. You got got. All right. Wow. Cool. Copy. Come back to our application here. All right, let's submit. All right, so I submitted my post request, right? I submitted my post requests, the request came to my server, and we should have been able to console log the request. Look at all this crap that came along with the request.

Look at all this crap. I'm not even gonna go all the way up. But look at all this stuff that came along with the request. All this stuff. And at the very end, And at the very end, what do we see? We made a, we submitted the form, right? Submitted the form, right? All this data came along with the request. This is what Express is doing. Express is handling all of this for us. We don't have to know shit about this. Express just does it for us. Like what, what, right? We need thicker wires. We do all this data is being sent along, but at the very, very bottom, the very, very bottom, we see this part of it and it's just an object, right?

It's just an object that's being sent, right? At the very, very end, we see an object that has the property of body. All right, has the property of body. And inside of that body, we can see stage name and birth name key value pairs here. Why, or sorry, how did we get this key of stage name and this key of birth name? Where did those come from? We can see that a part of the request, So we got this request body, but where did stage name and birth name come from? The form, exactly. If we go back and look at the form, if we go back and look at the form, we go back and look at the form, we can see that the first input had the name of stage name. And if we look, the first property is stage name. and we saw the second input had the name of birth name, and we can see that the second property is birth name. So when a form submits, it is making a POST request, right? It is making a POST request, and all of this information is being sent with that request, including a body property that has the information that came from the form itself. And so the cool thing is we can yoink and grab these values out of this body object, right? Out of this body object.

And so if we go to our server, you can see that's exactly what we're doing. Look at this. Look at the request, grab the body property, and grab the stage name out of this. What, the part I have highlighted right now, what does that actually like result in? What does that resolve to? If we looked at the request, we went to the body, we grabbed the stage name, what is it? What's the value there? it's the same thing as me plugging in baby Keem, exactly. And if we come down here to birth name, it's the same thing as if I had plugged in this bit here. So now the cool thing is when I go ahead and I insert the document into my database, when I insert the document into my database, it will now have the stage name property of baby Keem. It'll have the birth name with the value of Jamal Carter. And then it also has this right here, likes. Right? Did that likes come from anywhere or did I just hard code it? Did likes come from anywhere?

Yeah, I hard-coded it. I want each of my, each of my wrappers that have likes next to them. So I didn't get that from like the request body or anything. I just hard-coded it. So the cool thing is like we could hard-code any value that we wanna put into, into the document, right? Anything I wanna put into that document, I could hard-code here. And that's why when we, when we go and look at our actual database and I refresh it. I think this was actually running, right? We're gonna see that there's a likes of zero hard-coded as well, right? So we got the stage name and birth name from the form. And I also hard-coded likes. Cool, so let me go ahead and undo this real quick. And why, just real quick, why am I not gonna hard code baby keem? Why am I not gonna hard code their birth name here? Why do I have these kind of like variables that are pulling from the request body?

Yeah, so I can reuse it over and over again. I wanna be able to submit every wrapper into this form. I wanna be able to submit request after request after request after request. I wanna be able to sit there and make requests all day long with different wrappers. And so if I hard coded it, they would all just be baby Keem. No matter what I put into that form, if I hard-coded baby keem here, it would just be baby keem every single time. We don't want that. We wanna be able to reuse it, right? We wanna be able to reuse that code over and over again. Cool. All right. Let's go down here. I was gonna chill my server for a second. And clear this. All right.

I'm gonna get rid of this console so we don't blow out our console every single time. Save this. Go ahead and restart the server just so that it's running. All right, connected to the database. Beautiful. Now, the very last thing. The very last thing. I went ahead, I inserted that value into the database. What's the last thing that we do? Look at our response. So far we saw a response to send a file. We saw a response for some JSON. We saw a response for rendering some EJS. But this response is a redirect back to the main route which triggers exactly, I see you in chat, a refresh. It triggers a refresh.

And so once it refreshes, we actually make a get request, right? We make a get request. This time we go to the database, we go to the wrappers collection, we find all the documents that are inside that wrappers collection. We turn them into an array. We pass that array into the EJS. And this time there is one new document or one new object in that array that we're passing in for baby Keem. We plug that into our EJS. There's more LIs now. This EJS spits out an HTML file and we respond with that HTML file that has the wonderful baby key minute And it all happened so fast like we're on we're relieving ourselves and and codes flying around the interwebs and it's going to servers, it's doing all this stuff, it's going to database and it comes back like, what? What? That's wild. It's magic, but you now know how to do it. what does that make you? You're a wizard. a code wizard, a magician, you're a wizard Harry.

Code weenie. No, you're not a code weenie until you start going. I don't know about this EJS Leon. I don't know. I'm going to use a pug or you know what? I might, I might just skip all this and go straight to react. That's when you become the code weenie. For now, for now we're all wizards. We'll take that. All right. One more thing, one more thing. Let's just, we got like two minutes, but I'm gonna go like, I'm gonna go like three or four minutes over. Three or four minutes and then we'll do a raid. All right, three or four minutes and then we'll do a raid. I just wanna talk about the delete real quick.

and if we got the git, we know the post, right? The git's not too, too wild, okay? Nox is like, that's bingo. All right, let's take a look. All right. All right. How can the user, how can we delete something? Let's say goodbye to babykeem. Boom, babykeem went away, right? Babykeem went away. What heard that click? What heard that click on the trashcan? The Smurfs, our event listeners, our client-side JavaScript heard that click. What's the only thing that we know of that can make a request from the client side. What's the only thing that we've used so far?

A fetch. So if we actually go ahead and look at this lovely main.js, right, if we look at this lovely main.js, what we'll see is that it actually makes a fetch. You can see this fetch here. I'm using the lovely async await syntax, right? Look at that. Ooh, sexy, right? It makes this fetch. And what type of fetch do we tell it to make? This is coming from the client-side JavaScript, right? That heard that click. Look, we're inside of a click event, right? The same click events that we've always seen. This is exactly the same code that you use for your fetches. Don't get wild out here, right? It's a fetch, but we told it to be a delete.

So the fetch name is DeleteWrapper, and we told it to be a delete. So if we look at our code, we have a delete on DeleteWrapper. So our API is set up to hear this delete request, right? So we made a fetch that was a delete request to the server. That request, that delete request made it to the server, All right, made it to the server. No one's saying delete anymore. Made it to the server. Our API had a route that heard that delete request, right? Remember with the fetch was a delete fetch. It had the path already, right? We heard the delete. And when we heard the delete, what did we do? When we heard the delete, what did we code it to do? So last year, Kamal said, I'm in shock. This all makes sense to me.

Hey, I'm glad it's making sense. Yeah, it went to the database. It went to the database and it deleted the document from our collection of wrappers. And once it removed that document from the collection of our wrappers, what did it do? It told the browser to refresh. And when it refreshed, that made a get request. The get request went to our database, but when it went to the database, it was missing this other document. That document had been deleted. So when it passed the data to the EJS, it was missing one and it sent that HTML as a response. So when we delete something, we're literally just going to the database and deleting that content from the database and then telling the browser to refresh. And when the browser refreshes, it goes to get all that data and it's missing something. And that's why we don't see that data in the HTML anymore. Let's take a look at the code and then we'll do a RAID. Here it is. Our API was set up to hear that delete that was coming from that fetch request.

We went to the database, We found the rapper's collection and we told it to delete one. What? I don't have to learn a querying language. I literally just say delete one. What? And then I tell it what to delete. I tell it to go and find an object, right? Find an object. find an object that had a stage name of BabyKeem, right? With my delete request, I sent some data, right? Just like I did it with the post, but we did it from the fetch. I sent some data, right? And I then went to my database. I found someone that had the stage name of BabyKeem, and that is what got deleted from the database. Since it's a fetch, what was the fetch waiting for?

What was the fetch waiting for? It was waiting for some sweet, sweet, sweet response, probably some JSON, a promise, right? So what are we gonna do? We're gonna hit that fetch with some JSON as a response. And if we go back and look at the fetch, once it heard the response, what did it do? Oh. Once it heard the response, it refreshed. And when it refreshed, when it refreshed, that triggered a get. We went to the server, we heard the get, we went to the database, that last document was missing. We passed the data into the EGS, it spit out the HTML. The HTML was missing that baby keem and we sent that HTML missing baby keem. Why is the refresh now client-side instead of server-side? Because we made a fetch and this fetch has to what? This fetch has to what? It has to resolve.

The fetch has to resolve. And so we know that we're responding back to this fetch. Once we hear that response, we just tell it to refresh right there. Eventually we'll handle this stuff asynchronously. We do other things, but for now, I really want you to be able to see it like step by step to see what's happening. So tonight we dove deep into the getting, we dove deep into the posting, right? We, we, we, we hinted, we hinted at some lovely, lovely deleting or deleting, right? We hit, we hit on some deleting, right? And so what we have left to do now is to, when we come back on Thursday, dive a little bit deeper into this deleting. I don't think we're fully there on the deleting, right? We're gonna dive a little bit deeper into the deleting. We are going to see the updating. We're gonna see the updating, and then we're gonna talk about all the accessory code that makes this work. So on Thursday, we're jumping right into it, right? Jumping right into it, we're gonna see the updating, we're gonna see the deleting in more detail, and we're gonna see all of the extra stuff that's making this work, just so we can get a feel for it.

In the followup to this, when I follow up to the message on Discord, I will send you this repo. For homework, please, for homework. I would love, I would love if you went through, made sure you had your Mongo Atlas account. If you haven't done the homework, maybe take a peek at it, and then start playing with this code. The goal would be to make your own app and get it on Heroku, but you don't have to do that yet. Just start playing with the class. you have to actively recall after this class. There's no way that this stuff makes sense unless you are actively recalling. So please actively recall, make sure that you are reviewing this, maybe catch the VOD again, right? Play with it, play with the code, see if it makes sense. Maybe try connecting your database, right? See how that goes. And then on Thursday, we're gonna run it all back. We're gonna run it all back. We're gonna see the last part, which is the updating.

And then we're gonna take our two week well-deserved break. So please, please come on Thursday. I really wanna see, I really wanna drive these points home. That way, if you choose to work on your apps during the break, you can, but you're there folks. You are there. You are there. You have the ability to build full stack web applications. Even if you just hung on to like 30, 50% of what's happened tonight, you're there. It's not much more after this. We're gonna plug in some little things here or there, but you're there, you can do it. You are a full stack web developer, all right? So let's bring it home on Thursday. Let's make sure we can do the rest that we need to do. And let's go ahead and do a raid. Polarin was in here yesterday on last, I think maybe office hours or on Thursday, um, they were in here helping folks out.

So let's, let's go over to them and say, what's up. All right. Queuing up the raid. Have a wonderful rest of your night folks. I hope you are doing well. I hope that you will take what we learned tonight to build amazing things. I know you're going to do that. Let's go ahead and raid. Peace everyone. You're doing great. I don't care if it's clicking 100% or 10%, you're doing great. You're showing up and that's more than most folks can say. That's right.

End of Transcript