Import Mongodb to web page (local atm) index.html


#1

Hi guys I found your forum trough a google search and i'm happy to just join :slight_smile:

A little about me I have pretty heavy vba coded project in excel. And for a few months ago I decided to move my project into an html page. And with no knowledge whatsoever. I have been able:

  • Setup a server over at digital ocean
  • Made an working web scraper script using node.js
  • Setup mongodb
  • Imported all of this into mongodb

So most of the "difficult" stuff I think I have handled. But know im back to my local foler which have a few files:

Index.html
script.js

And i'm stuck trying to figure out how I can import my data from mongodb into my local html page (I guess when it goes live the data will also be loaded there?)

ANy help with this would be much appreciated

frederik


#2

Hi,

You can't interface with Mongo directly from your HTML page, you'll need to do that in Node.js. There are a number of ways to go about this, but the easiest would be to grab the data you need from Mongo, then pass it off to a view template to render. Using a framework like express would simplify the process.

You could also use Ajax to request the data from the front-end, have a script running on your server fetch the data, then send it back to the client to display. That would work, too.


#3

Just to add to @Pullo's reply, you can use the official Mongo Node database driver to interface with your database.

Basically, what you want to do is this:

  1. Set up a Node.js web server (Express, like @Pullo suggested, is a great option for this)
  2. Connect to your database in your Node/Express server using the database driver
  3. Write a route in your Express app to pull the data you need to get into your page from the database and respond with the data.

At this point, you can either use Express and some template engine to build a page with your data already in it and respond with that, or you can keep the HTML page as you have it and have it make a request to the endpoint that responds with only the data from your database. You'll then be able to put this on the page with Javascript.


#4

Hi thanks for all your replies , I must admit this was way more complicated then making a web scraper with excel vba :slight_smile: - I'm sorry but I don't quite understand. I guess further reading would be necessary for me.

ATM I have the app already running on my server page over at digital ocean which pushes the data to my database. -
would I need 2nd node/express app to handle this data ?

@raddevon
"or you can keep the HTML page as you have it and have it make a request to the endpoint that responds with only the data from your database. You'll then be able to put this on the page with Javascript."

  • Is the suggestion that I make an new app express/node app? then make a javascript code to push from the database?

Any further reading you guys could provide ? Or some sort of sample (to make my life easier) ?

Frederik


#5

Yes, that's right. You'll need to connect to your database from a web server since you can't do this within HTML and front-end Javascript.

Here's a nice article to get you started. From the sound of it, this may do way more than what you need, but it should be helpful in pulling data from your database into Node/Express and getting it to your front-end.
https://medium.freecodecamp.org/building-a-simple-crud-application-with-express-and-mongodb-63f80f3eb1cd


#6

thanks alot for this , sure appreciate it

cheers


#7

@raddevon

Hi I have read I read the article you provided, Im not sure if im on the right track here. I have been able to serve my webpage to the server using express. but would I also need to upload my js/css folders to the server ?

However i'm a bit lost here. I wonder if you could answer a few follow up questions ?

  • the plan is(was?) to upload my page to godaddy or something, how would I be able to get right www. links in the navigations bar?

pheew this is confusing. I guess in while I will understand all of this. but at the moment im completely lost

frederik


#8

any sample for this would be much appreciated. Its so easy for you guys , but with my skill level I would need to google "front end" youst to figure out what it means :slight_smile:


#9

The article I shared from Free Code Camp is a good example of the first paradigm I suggested (which is the easiest to implement and the one I would suggest for you to try). Here are links for the pertinent sections of the article.

Getting data out of your database: https://medium.freecodecamp.org/building-a-simple-crud-application-with-express-and-mongodb-63f80f3eb1cd#9783

Putting the data into a template: https://medium.freecodecamp.org/building-a-simple-crud-application-with-express-and-mongodb-63f80f3eb1cd#0d6d

You're biting off a lot with this project if you just figured out how to do HTML and CSS. You might want to find a good online course to get you started in back-end development and ease into it a little more slowly.

Oh, and, while I'm here, the front-end is the part of the web site that runs in the user's browser. The back-end is the part of your site that runs on your web server. In the case of this project โ€”assuming you build it based on my suggestion here โ€” the back-end will be the code that defines your routes, gets your data out of the database, and fills it into the template. The front-end will be simply the HTML your server sends back to the browser with the data already in it along with any CSS and any Javascript you deliver alongside that. I hope that helps!


#10

Hey man, sure. I'm in the middle of reinstalling my OS right now, so won't be around for a couple of days. Maybe read the article that raddevon links to, then we can look at your specific setup after that. I'll check back in when I'm done reinstalling.


#11

Hi thanks to the both of you for your replies.

  • My project sure is challenging for a beginner like myself , Unfortunately my entire website is dependent upon getting this data imported before I can proceed with it. there is nothing I like more then good challenges and this for sure is , lol . :slight_smile:

I would say this was way more simple to do in excel , but when this is finished it will be 100 times more efficient. Im sure of this when I read about all the possibilities one could to with server side code.

@raddevon I will read all the new links you provided , and reread the first once. I appreciate you help a lot and and thanks for you patience . Im sure my questions may sound quite stupid :slight_smile:

I guess I would actually need to study this a bit more . But I have been stuck many times before and saying to myself that its to difficult for me to handle. and after a couple weeks when I revisit the problem im able to solve it, I hope this will be the case here as well.

So far I have done this:

  • Setup a server
  • Made a working web scraper app using node.js
  • Extracted all of this data to mongodb

Hopefully in a couple of weeks I would be able to use all of this data .. (or sooner)

@Pullo When my skill level increases I could come back asking more specific questions. now its time take some coffe and study all of this.

Cheers and thanks again

frederik


#12

Hi again guys Ive been spending much of my day reading about all of this. So far I have been able to make a test page uploaded to my server page, Including Styles and javascripts, jquery.

But I have been thinking about this quite a while. and something just don't feel right. Then just now I stumbled upon this thread over at digital ocean : https://www.digitalocean.com/community/tutorials/how-to-set-up-a-host-name-with-digitalocean

Would this fix the navigation link after I set everything up. The thing that is holding me back is that so far the link to my web page is http://178.62.253.206:3000/ and after reading all those guides you provided me with (and a dozen+ more)
it still looks like the webpage link would be the same. ?

Would it be correct that Im supposed to points my domain name to my Droplet's IP address and this will give me correct www.domainname.com link to my site ?

frederik


#13

You should definitely try it. It may just be that you'll need to do some reading or find a course that deals with something similar to go through before you can really dig into your project. Since you've come this far, I'm sure you'll find a way to get it done.

Come back if you have more questions. Good luck!


#14

Hey,

I'm back online now (more or less)

So you good, or there anything you need help with?


#15

Hi that is great...

and also thanks for your time helping me with this, but I think I figured out a solution.

Is it correct that I need to setup a domain and point the dns settings to my server page to get www,domainname.com ?

Also if im to understand this correctly its not possible to get data from mongodb into my local html page except with use of my server ?

So I will need to do all testing of the page from the server ?

I have read a ton of guides but nowhere was this mentioned probably because this is something everyone knows., except me of course. having an IP address as domain name was holding me back, but with this new knowledge im ready to continue with my project. I think those links raddevon provided provided will be perfect to continue my work on ...

frederik


#16

Essentially, yes. The process differs slightly depending on which hosting provider you are using. If you're doing this as a personal project, you might like to look at something like Heroku who offer free basic Node hosting (with the caveat that your app will go to sleep when not in use). Couple that with something like mLabs (hosted Mongo dbs) and bingo!

Correct.


#17

I already have a server setup over at digital ocean. This is a personal project but if i'm able to complete it i'm sure it might be useful for someone else (but that is way down the road)

My plan is to build an army of scraper bots.

I also found this guide here which I kinda like:
https://medium.com/@alibhatti99/how-to-make-a-front-end-application-using-the-mean-stack-535e1622860c

Is this setup prefered over this one https://medium.freecodecamp.org/building-a-simple-crud-application-with-express-and-mongodb-63f80f3eb1cd

I guess both guides do the same thing.

Also Thanks alot for your help 2 weeks of headache finally disappeared. Finally I can continue with my project. Im sure I will have more questions. But that's for another post


closed #18

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.