Adding Searching Functionality In Node

In this article we see how we can enable the searching of data from server in our node application.

 Setup The Folder
 a) Make a new folder using command prompt.Type the following command.
  • mkdir search
b) change to the new folder
  • cd search
Setup Node In Folder
For setting up node we type the following command
  • npm init -y
it will initialize the node in our project.
And we get a package.json file in our folder.
Which  means node is initialized in our folder.

Install Packages
Now we install the packages which will be required for building the application.
  • npm install express ejs body-parser mongoose.

Add New Folder
  • models
  • views
  1. models - this will contain our schema of collections(table).
  2. views - will contain the ejs pages.
 Model
Add new file in folder name it data.js
var mongoose = require('mongoose');
var bookSchema = new mongoose.Schema({
author:{
type:String
},
books:{
type:String
}
});
module.exports = mongoose.model('books',bookSchema);
view raw data.js hosted with ❤ by GitHub


Views
Add 2 folders
a)pages
b)partial

 In partial folder add 2 new files header.ejs and footer.ejs
header.ejs
<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>
view raw header.ejs hosted with ❤ by GitHub
footer.ejs
view raw footer.ejs hosted with ❤ by GitHub

In pages add home.ejs file.
home.ejs
<%-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')-%>
view raw home.ejs hosted with ❤ by GitHub

Add New File
Add new file name it app.js.
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');
//connect to db
mongoose.connect('mongodb://localhost:27017/searchingg',{useNewUrlParser:true})
.then(()=>console.log('connectd to db'))
.catch((err)=>console.log('error ',err))
//init app
var app = express();
//set view engine
app.set('view engine','ejs');
///fetch the data from request
app.use(bodyParser.urlencoded({extended:false}));
//default page load
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);
}
});
//search
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));
view raw app.js hosted with ❤ by GitHub

for more "$regex" usage see this link

Comments

Post a Comment

Popular posts from this blog

How To Use Sequelize-Cli In Node

Image
Introduction   In this article we will see how to use sequelize-cli for creating table in our database.and how can we setup a relationship between two table using foreignKey using sequelize Project Structure Setup The Node Project Open the console and  type the below cmd to make a new directory.         # mkdir seqlcli Then change to that directory by typing below cmd.         # cd seqlcli Setup Node In Project Now  type the below cmd on console and that will generate the package.json file.       # npm init  It will ask you to provide the basic details related to the package.json file have like name,version,author etc. After the file is initialize we can build our node project. The file will have all the metadata related to our project. Install Packages Now we will install the package which are required for building our application. On console type  ...
Read more

Upload And Download File In Node

Image
Here we will use multer middleware for uploading file . Click the link to know what is  multer . Setup The Project Folder create a new folder using console/terminal. open console/terminal type mkdir followed by the folder name you want to give. change to that folder by typing cd  folder name. Setup Node For The Project now type npm init on console/terminal. the  npm init  will create a  package.json  file.But we can create it manually too. just open the folder and  add a new file  and name it  package.json  and then we can structure it the same way as its been structured when using  npm init . the package.json will look like this. now we will install packages for our project using npm install followed by package names we want to install. the following packages will be installed express ejs body-parser multer mongoose . this will generate a folder name node_modules wh...
Read more

Import CSV File Data Into MongoDB In Node

Image
Setup Folder Open the command prompt and create new folder using the following command followed by folder name. mkdir csv After creating the folder.Change to that folder by using the following command cd csv Setup Node In Folder To setup node in folder use the following command npm init -y This will setup node in our folder.And  after the execution of this command you will see package.json file which means node is initialised. This package.json file will contain the metadata related to our project. The package.json will look like this Install Packages Now we have to install packages to be used to build our application. To install packages we use the following command followed by package name.  npm install csvtojson express ejs mongoose multer body-parser  After installation package.json will look like this Add New Folders Add few new folders in our project folder  models public views Models Fold...
Read more