How to create a website with a searchbar to query a mongo database?

爱⌒轻易说出口 提交于 2019-12-04 14:58:10

There are the following steps to the problem:

  1. Create the front-end, which will consist of HTML, CSS, and Javascript. Beginners often find it easiest to work with jQuery and jQuery UI, because they are well-documented and contain plugins for almost all possible scenarios (they should not, however, be used to create large complex applications!). Bootstrap or Foundation can help you with the HTML / CSS.
  2. Create a (probably) JSON API, which the front-end can communicate with to submit searches and retrieve results. You could use PHP, Python, Ruby, or many other languages to do this. For a simple site like the one you're describing, it's more a matter of preference than anything else.
  3. Translate the search request from the front-end into the MongoDB query APIs, and return the results through the API. You will use a MongoDB client library compatible with whatever language you have chosen.

Depending on your needs, you may be able to eliminate (2) by using an existing REST API for MongoDB.

Note that if you just want to make MongoDB data accessible via searching / charting, then you may be able to avoid coding altogether by leveraging SlamData, an open source project I contribute to. SlamData lets you use Google-style search (or more advanced SQL) to query MongoDB and get the results back in tabular or chart form.

I am doing such in nodejs.

In my server side app I have connection via mognoose like:

var mongoose = require('mongoose');
mongoose.connect('mongodb://yourhost/database');

Next you need to have your model to your database

var YourDBVarName = mongoose.model('collectionName', {
  yourfields1 : type,
  yourfields2 : type,
  yourfields3 : type
  ...
});

Then I make GET for it

var express = require('express');
var app = express();
app.get('/dblisting', function(req,res){
   YourDBVarName.find({ yourfieldsX: 'value'}, function(err, data) {
      if(err) {
         res.send(err.message);
      }
      else{
        res.send(data);
      });
});

Then simply you make some GET with $.ajax to yournodeserver.com/dblisting and in response you recive your collection filtered as in

{ yourfieldsX: 'value'}

Ofcourse you may do just {} so you get all your stored data.

SLee If you want know about retrieving data from mongoDB, you can use my github https://github.com/parthaindia/CustomMongo .Use getByCondition() method which requires collection name and a Map . The Map can be your queries in form of key value pair,Key being the column name. I use this method when I write search Query for the web development. The java code gives you a Json. Write a Servlet to post your Json to WEB UI.

This is an example to show how to post the retrieved data using Js ,"server_base_url + /server/FetchData" would be your Service URL.The data you has to be appended to a table . Or a span ,depends on what you actually want.The below code appends data

function getdata() {

$.get(server_base_url + "/server/FetchData", {
}).done(function (data) {
    $.each(data, function (index, value) {
        alert("The Index" + index + "The Value" + value);
          $("#11table1").append("<tr><td id='dynamicid1" + index + "'>" + value + "</td></tr>");
    });

});

}

This function can be used for defining table

function defineTable() {

$("#mainDivID").text("").append("<div id='contpanel' class='contentpanel'>");
$("#contpanel").append("<div id='rowid11' class='row'>");
$("#rowid11").text("").append("<div id='row11table1' class='col-md-12'>");
$("#row11table1").text("").append('<br /><br /><center><h5 class="lg-title mb5" style="background-color:#428BCA;height:20px;color:#fff;padding-top:4px;"><b>Heading</b></h5></center>');
$("#row11table1").append("<div id='table11id1' class='table-responsive'>");
$("#table11id1").append("<table id='11table1' class='table table table-bordered mb30' >");
$("#11table1").append("<thead><tr><th>Index</th><th>Value</th></tr></thead>");

}

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!