Introduction
In this article, we see how to add a search option to our node application. We will be using '$regex' to search for data in Mongo.
Structure Of The Project
|--------models
| |-------data.js
|
|---------views
| |-----pages
| | |-----home.ejs
| |
| |-----partial
| |-------header.ejs
| |------footer.ejs
|---------app.js
Setup The Folder
a) Make a new folder using the command prompt. Type the following command followed by the folder name.
b) Switch to the new folder
Setup Node In Folder
Now setup node in folder
And Its execution we will see package.json file which means node is initialised in the folder.
Install Packages
Now install the packages which are required for building the application.
- npm install express ejs mongoose body-parser
Add New Folder
After installing the package, add two new folders.
- The models folder will contain the collections(table) schema.
- Views folder will contain the ejs pages.
Model
In the model folder, add file data.js
- var mongoose = require('mongoose');
-
- var bookSchema = new mongoose.Schema({
- author:{
- type:String
- },
- books:{
- type:String
- }
- });
-
- module.exports = mongoose.model('books',bookSchema);
Views
In the Views folder, add two new folder
- Pages
- Partial
Partial Folder, add 2 new files
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>Searching</title>
- <link rel="stylesheet" href="https://bootswatch.com/4/pulse/bootstrap.css">
- <link rel="stylesheet" href="https://bootswatch.com/_assets/css/custom.min.css">
- </head>
- <body>
- <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
- <a class="navbar-brand" href="#">Searching</a>
- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
- <span class="navbar-toggler-icon"></span>
- </button>
- <ul class="navbar-nav mr-auto">
- <li class="nav-item active">
- <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">Features</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">Pricing</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#">About</a>
- </li>
- </ul>
- <div class="collapse navbar-collapse nav justify-content-end" id="navbarColor01">
- <form class="form-inline my-2 my-lg-0" action="/search" method="get">
- <input class="form-control mr-sm-2" type="text" name="dsearch" placeholder="Search">
- <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
- </form>
- </div>
- </nav>
- <footer class="fixed-bottom bg-primary">
- <div class="text-center" style="color: whitesmoke;">@copyright2020</div>
- </footer>
- <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
- </body>
- </html>
Now in pages, add home.ejs file
- <%-include('../partial/header')-%>
- <div class=" container">
- <center>
- <div class="card" style="width: fit-content;">
- <div class="card-body">
- <form action="/" method="POST">
- <div class="row">
- <div class="form-group col-md-12">
- <input type="text" class="form-control" name="author" placeholder="Auhtor Name" required>
- </div>
- </div>
- <div class="row">
- <div class="form-group col-md-12"">
- <input type="text" class="form-control" name="book" placeholder="Book Name" required>
- </div>
- </div>
- <button type="submit">Submit</button>
- </form>
- </div>
- </div>
- </center>
- <br>
- <%if(data.length>0){%>
- <center>
- <div style="width:auto; border-style: solid;border-color: black;">
- <table class="table table-border table-hover">
- <thead class="bg-warning">
- <tr>
- <th>
- s.no
- </th>
- <th>
- Auhtor
- </th>
- <th>
- Books
- </th>
- </tr>
- </thead>
- <tbody>
- <%for(var i=0;i< data.length;i++){%>
- <tr>
- <td>
- <%=i+1%>
- </td>
- <td>
- <%=data[i].author%>
- </td>
- <td>
- <%=data[i].books%>
- </td>
- </tr>
- <%}%>
- </tbody>
- </table>
- </div>
- </center>
- <%}%>
-
- </div>
- <%-include('../partial/footer')-%>
Add New File
Add a new file to the project folder.
This will be the entry point of our application.
- var mongoose = require('mongoose');
- var bodyParser = require('body-parser');
- var express = require('express');
- var bookModel = require('./models/data');
-
- mongoose.connect('mongodb://localhost:27017/searchingg',{useNewUrlParser:true})
- .then(()=>console.log('connectd to db'))
- .catch((err)=>console.log('error ',err))
-
- var app = express();
-
- app.set('view engine','ejs');
-
- app.use(bodyParser.urlencoded({extended:false}));
-
- app.get('/',(req,res)=>{
- try {
- bookModel.find((err,data)=>{
- if(err){
- console.log(err)
- }else{
- res.render('pages/home',{data:data});
- }
- });
- } catch (error) {
- console.log(error);
- }
- });
-
- app.get('/search',(req,res)=>{
- try {
- bookModel.find({$or:[{author:{'$regex':req.query.dsearch}},{books:{'$regex':req.query.dsearch}}]},(err,data)=>{
- if(err){
- console.log(err);
- }else{
- res.render('pages/home',{data:data});
- }
- })
- } catch (error) {
- console.log(error);
- }
- });
- app.post('/',(req,res)=>{
- try {
- var books = new bookModel({
- author:req.body.author,
- books:req.body.book
- });
- books.save((err,data)=>{
- if(err){
- console.log(err)
- }else{
- res.redirect('/');
- }
- })
- } catch (error) {
- console.log(error);
- }
- });
- var port = process.env.PORT || 3000;
- app.listen(port,()=>console.log('server run at '+port));
References
Download the code from
here.