Get Data From MongoDB Atlas to HTML using EJS

i think this hat is a little small for me anyway merry christmas and it's the marina from techmuze here with another tutorial we're going to extract the data from mongodb atlas to the html using the e g e j s package what do you think about that i think it's pretty dope so without further ado subscribe to my channel merry christmas again and let's go [Applause] okay guys so in this tutorial we are going to extract data from our mongodb atlas to html through a simple way i by using ejs so let's start first of all i'm going to show you which databases i currently have in my mongodb atlas so let's go to mongodb atlas let's open it up um sign in login if you don't know how to connect your app to mongodb atlas i have another tutorial on that one so please check that out for now i go to collections and it's loading and it's loading and it's loading so you see i have vlog database items movies blah blah blah what do we have in movies database okay we can use this one i like this one we have the incredible hulk my favorites of hulk movies and the avengers so let's start sorry i got distracted by the cat anyway let's go to our terminal my cat is a bit crazy today let's see the desktop there's a top and create a new directory that you will call html okay city into html and what do we want to create here we want to create server.js file and index dot uh okay and that's it for now okay just server.js file and now we want to install um express and um eg ejs okay ah i forgot we need also to install mongoose let's also install mongoose and go to rvs code open up our new folder html and here we're going to do the usual stuff express equal required express abdullah okay let's also create ej ejs okay and what else do we need we need app.set with each ejs what you need to do is to set the view engine to ejs okay and with mongoose we just connected mongoose.connect here we'll have the url and here we'll have the application and port i don't know 4000 um server is running okay so now let's connect our mongodb atlas so we go we go here and remember our database is called moviesdb so let's go back to clusters click on connect connect your application copy this line here let's go here paste it right here and here instead of db name let's just say movies db and we also have to specify the password here okay and just to check that everything is working let's just say app.get regress rest.send working okay now we can start our server all and now if we go to localhost 4000 we should see that it's working okay it's working so guys here i would like to point out the difference between html and ej ejs format so for example here when you have html file you just specify let's let's create one one file it will be just index.html okay and here we will have a simple i don't know h1 that says html here what you do with html files is you can simply send file and here instead of uh here you specify the location of the file yeah so your name plus slash index.html and now if you go back here you can see html here but with ejs files what you do is first you need to create a separate folder for those files so let's go here and and create a new folder that we will call it should be called views and it is very important it should be called views and inside views let's create a new file that will be index.ejs okay and here we will just copy everything from html file so it's basically the same but now ejs format allows us to incorporate some javascript inside this html file that is pretty healthy so now how do we render this file um we go to our server dot js and instead of sending file we res dot rendered file and we don't have to specify the location because it already knows that the file we want to render is located in the folder called views so all you have to do is to specify the name of the file so in this case index okay so now let's save like this and you'll see the result is the same is the same result okay cool so now what ejs allows you to do is to specify in here as a second argument a javascript object with any field that you want so for example here you will have something and here equals to something okay okay why do i use some let's just say name it was to name okay okay it will be confusing for you okay let's do like this user name equals to name okay uh and here in app.get we will create this let's name equal to marina okay so now we create this name variable and we pass it here so we pass this username to our index dot ejs file so now in our index.ejs file we can access this username let's uh and it will be equal to name which is marina so let's go to our index ejs file and let's see how we can incorporate it here html here let's for example instead of writing html here we want to write marina here and we want to use that variable name which was user name okay so how do we do that with e g a e j s um e j s syntax oh my god i'm a mess let's do like this we just specify open i don't know how you call it okay just follow my syntax here we open the bracket and then we specify the percentage sign and then the equal sign and then we specify the name of the arrival which is user name and then we specify the percentage sign and we close the brackets okay so now it should say marina here now it received the username in this file let's check it out you see if we refresh it says marina here so it was the same logic we can use um any any variable we can pass any variables from our server to our html essentially okay so back to our db we are using the movies database so anyway we need to create the movies schema and the movie model here so let's do that movies schema it was an object where we have what do we have there let's check let's check let's go back to our collections and to our movies database we have a title genre and yeah okay so we will have title which will be a string genre between what's happening why okay and here okay let's do it also stream um it's not the point and we create our movie model yeah so movie model will be [Music] okay so now we can use this movie model to get all the movies here so let's delete all of these and in index.html or index.ejs we delete everything here and let's pass our movie data to html table yeah yes that reminds me we need also bootstrap link but we'll do that later and here we take our movie model movie dot find we find all the movies in the database and then we have access to the function here where we will have all these found movies and then what do we want to do with those movies we want to pass them to our index.ejs file so that then we can look through them and put them into the html table okay so let's do that let's what how do we do that let's just think about this a bit confused uh okay here we just specify res dot render the name of ejs file which in our case is index dot ejs and then comma and an object what variables what data we want to pass to this index.ejs file in our case we want to pass movies list which is uh here is just movies why i don't like these pop-ups come on i don't need them movies okay so like this oops now we can receive this movie's list in our index.ejs file and here because it's not an html format we can write as if we were in a javascript file so for example we have we said we have access to movies list and what do we want to do we want for each and here we will have all what do we have for each um movie we want to uh to create for example a paragraph with and here we specify i almost messed it up with the with the es6 syntax what do we have here we want here movie dot for example movie.title but we cannot write it like this so we need to enclose it between these tags open bracket percentage sign equal sign and then percentage sign closed tag i guess is like this yes so now this is the syntax to specify uh variables right but to we need also to enclose the javascript syntax so javascript lines inside ejs tags which is in this case is open percentage and then at the end of the line we specify percentage close and the same we do on this line open percentage and percentage close okay so let's save and let's see what we have [Music] very interesting for each movie title cannot read property for each of now why we don't receive movies list come on we just passed it here yes we found all the movies and then we passed it here okay what's uh maybe here we have the function of with two arguments the first our argument is an error and then the movies okay maybe this will help i don't know yes it works now we have our movies title coming from mongodb atlas in plain html just using the ee a bit of ejs syntax okay so now as promised let's put it in the table for this i will go to bootstrap max cdn yes and we copy this link here and we paste it in our index.ejs and then we look for we look for a table table yes please yes yes this one is okay copy and we paste it let's delete this here we paste it here okay and as we are going to look through we don't need actually these or this let's see how it looks okay we have a table so now in our table which headers are we going to have first one will be title if you want we can also make id title then we have id title genre and yeah yeah so here for example instead of one we want to pass for each movie we want this let's delete this line here and copy all of this code i mean cut all of this code someplace here okay and we are going to cut this part here with a table rows inside these brackets so now what we are saying is we loop through the movies list and for each movie what do we return we return the table rows with table heading so the first one is as we said the movie dot id oops i did it again and the syntax of ejs as we said is open bracket percentage sign equal sign then we specify movie dot id low dash id and because it's come it comes from the mango db and then percentage time close and if you want you can copy this here because it's not very pleasant to type and here instead of movie dot low dash id you specify movie dot title and here you specify movie dot genre and here is movie dot what do we have here let's save and go back to our browser ta-da amazing now guys you can do anything you want with data you can then pass and get and to the table and from the server to the database ejs is a very useful thing but once you master the react or other framework similar framework don't really need this you don't really need this i hope this tutorial and the quality of sound was good and the video was good and you enjoyed it i will see you in the next video thank you bye bye

Channel: Marina Kim

Views: 9,590

Rating: 4.9178081 out of 5

Keywords: mongodb tutorial, mongodb node express, how to get data from mongodb, hot to get data from mongodb to html, how to get data from mongodb atlas, get data from mongodb to html, get data from mongodb atlas, get data from mongodb node js, ejs tutorial, ejs tutorial node js, ejs tutorial for beginners, ejs vs html, how to extract data from mongodb, node js pass data to html, how to pass data to html page, embedded javascript in html, embedded javascript tutorial

Id: yH593K9fYvE

Length: 19min 18sec (1158 seconds)

Published: Wed Dec 23 2020