الدرس الثاني في الNode.js عمل خاصية البحث
السلام عليكم ورحمة الله وبركاته
من خلال الدرسين السابقين والملاحظات:
تم التعرف على الفرق بين الـNode.js والـPHP , ماهو سبب تفوق سرعة النود وماهو النود جي اس مجملا , كما تم طرح الدرس الأول عن كيفية عمل خاصية تسجيل الدخول و حفظ الكوكيز في المتصفح ومنها يكون:
- عمل كونكشن مع الداتا بيس
- ارسال البيانات من فورم , طريقة استقبال المعلومات المرسلة , وبشكل خاص في الـNode.js , التعامل مع الـCookies بعد تسجيل الدخول ,كيفية التعامل مع البيانات من ومطابقتها مع قاعدة البيانات.
في هذا الدرس الثاني سيتم عمل خاصية البحث بالطريقة الاعتيادية اولا ومن ثم سيكون هناك درس آخر لتبيان التغييرات لعمل البحث بشكل حي Live.
إذا, لنبدأ هذا الدرس حيث سأفترض اولا بأنك اتممت قراءة الدرس الأول وتطبيق الدرس الأول و فهم ملاحظات الـJQuery مع الـNode.js , سنبدأ بعمل ملف الـبحث ومثلا يكون كالتالي:
<!DOCTYPE html>
<html lang="en">
<head id="head">
</head>
<script src='js/jquery.js'></script>
<script src="js/head.layout.js"></script>
<script src="js/search.js"></script>
<body>
<!--/.nav-start -->
<!--
Navigation Goes Here
-->
<nav class="navbar navbar-default">
<script src="js/nav.js"></script>
</nav>
<!--/.nav-end -->
<div class="container">
<div class="col-md-12">
<div class="col-md-3">
<form class="form-horizontal" action="/api/search" method="GET" id='searhform'>
<div class="form-group">
<label for="search"><h4><i class="fa fa-search" id="spinning_animation"></i> Search Key</h4></label>
<input name='search' id='search' class="form-control" class="form-control" />
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary"> Search</button>
</div>
</form>
</div>
</div>
<div class="col-md-12">
<!-- Search Results -->
<div id="search_results"></div>
</div>
</div>
</body>
</html>
والملف الآخر في مجلد js يحتوي على ajax لإرسال قيمة الـinput#search
$(document).ready(function() {
//Ajax Search
$(document).on("submit","#searhform",function(e){
$("#search_results").empty();
$("#spinning_animation").removeClass("fa fa-search");
$("#spinning_animation").addClass("fa fa-circle-o-notch fa-spin");
var search = $("#search").val();
$.ajax({
type: "GET",
url: "api/search",
async:true,
timeout: 500,
data: {search:search},
success: function(response){
// $(".img-responsive").hide();
$("#spinning_animation").removeClass("fa fa-circle-o-notch fa-spin");
$("#spinning_animation").addClass("fa fa-search");
$.each( response, function( key, val ) {
if(val.ID != null){
$("#search_results").append(
"<div class='col-md-3 text-center'>"+
"<div class='box'>"+
"<h3>"+val.car_name+"</h3>"+
"<p>Brand: "+val.car_brand+"<p>"+
"<p>Model: "+val.car_model+"<p>"+
"</div>"+
"</div>"
);
} else{
$("#spinning_animation").removeClass("fa fa-circle-o-notch fa-spin");
$("#spinning_animation").addClass("fa fa-search");
$("#search_results").html("<p style='color:red;'>No Results</p>");
}
});
},
error: function(){
$("#spinning_animation").removeClass("fa fa-circle-o-notch fa-spin");
$("#spinning_animation").addClass("fa fa-search");
$("#search_results").html("<p style='color:red;'>Error In Request</p>");
}
});
e.preventDefault();
});
});
البحث سيكون في قاعدة البيانات التي سبق وعملتها وللتأكد , هذه هي القاعدة والجدول الذي سنبحث فيه حيث يحتوي على car_name, car_model, car_brand, ID (Primary)
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";
--
-- Table structure for table `cars`
--
CREATE TABLE `cars` (
`ID` int(11) NOT NULL,
`car_name` text NOT NULL,
`car_brand` text NOT NULL,
`car_model` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
--
-- Dumping data for table `cars`
--
INSERT INTO `cars` (`ID`, `car_name`, `car_brand`, `car_model`) VALUES
(1, 'Nissan Patrol', 'Nissan', 2016),
(2, 'Camaro SS', 'Chevy', 2010),
(3, 'Mustang', 'Ford', 2013),
(4, 'S500', 'Mercedes', 2009),
(5, '330i', 'BMW', 2014);
-- ------------------------------------
--
-- Indexes for dumped tables
--
--
-- Indexes for table `cars`
--
ALTER TABLE `cars`
ADD PRIMARY KEY (`ID`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `cars`
--
ALTER TABLE `cars`
MODIFY `ID` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=6;
وبهذا تم الانتهاء من اعداد قاعدة البيانات, ملف الـsearch.html وكذلك Ajax لارسال قيمة البحث إلى الـserver.js , لننتقل إلى ملف الـserver.js ونضيف الـroute المسؤول عن استقبال قيمة متغير البحث, عمل اللازم و ارجاع الناتج بعد ذلك .. حيث سيكون كالتالي:
var http = require('http');
var express = require("express");
var mysql = require('mysql');
var app = express();
app.use('/bootstrap', express.static(__dirname + '/bootstrap'));
app.use('/css', express.static(__dirname + '/css'));
app.use('/js', express.static(__dirname + '/js'));
app.use('/images', express.static(__dirname + '/images'));
app.use('/faawesome', express.static(__dirname + '/faawesome'));
var mysql = require('mysql');
var connection = mysql.createConnection({
host : 'localhost',
user : 'root',
password : '',
database : 'cars'
});
app.get('/api/search', function (req, res) {
var searchkey = req.query.search;
console.log(JSON.stringify(searchkey, null, 4));
if(searchkey != ""){
connection.query('SELECT * FROM cars WHERE `car_name` LIKE ?',"%"+searchkey+"%", function(err, rows, fields) {
if (err){
throw err;
}
else {
if(rows.length > 0){
res.writeHead(200, {'Content-Type': 'application/json'});
console.log(JSON.stringify(rows, null, 4));
res.end(JSON.stringify(rows ,null, 4));
}
}
});
} else {
res.send("Nothing");
}
});
app.get('/',function(req,res){
res.redirect("/home");
});
app.get('/home',function(req,res){
res.sendFile(__dirname + "/home.html");
});
app.get('/search',function(req,res){
res.sendFile(__dirname + "/search.html");
});
app.listen(3000,function(){
console.log("Working on port 3000");
});
شرح: هنا نلاحظ الـRoute المسؤول عن استقبال قيمة متغير البحث
app.get('/api/search', function (req, res) {
var searchkey = req.query.search;
console.log(JSON.stringify(searchkey, null, 4));
if(searchkey != ""){
connection.query('SELECT * FROM cars WHERE `car_name` LIKE ?',"%"+searchkey+"%", function(err, rows, fields) {
if (err){
throw err;
}
else {
if(rows.length > 0){
res.writeHead(200, {'Content-Type': 'application/json'});
console.log(JSON.stringify(rows, null, 4));
res.end(JSON.stringify(rows ,null, 4));
}
}
});
} else {
res.send("Nothing");
}
});
خطوة اخيرا , قم بتشغيل التطبيق من خلال الأمر
node server.js
افتح المتصفح على الصفحة
127.0.0.1:3000/search
الملفات المرفقة
js/nav.js
$(".navbar.navbar-default").append(
"<div class='container'>"+
"<div class='navbar-header'>"+
"<button type='button' class='navbar-toggle collapsed' data-toggle='collapse' data-target='#navbar' aria-expanded='false' aria-controls='navbar'>"+
"<span class='sr-only'>Toggle navigation</span>"+
"<span class='icon-bar'></span>"+
"<span class='icon-bar'></span>"+
"<span class='icon-bar'></span>"+
"</button>"+
"<a class='navbar-brand home' href='home'>"+
"<img src='images/nodejs-logo.png' style='max-width:52px;height:auto;' class='hidden-xs'>"+
"<img src='images/nodejs-logo-small.png' class='visible-xs'><span class='sr-only'></span>"+
"</a>"+
"</div>"+
"<div id='navbar' class='collapse navbar-collapse'>"+
"<ul class='nav navbar-nav navbar-left' id='uls'>"+
"<li class='active'><a style='color: #FFF;'><i class='fa fa-home'></i> Home</a></li>"+
"<li><a href='about'><i class='fa fa-folder-open'></i> About</a></li>"+
"<li><a href='contact'><i class='fa fa-phone'></i> Contact</a></li>"+
"</ul>"+
"</div>"+
"</div>"
);
js/head.layout.js
// $(document).ready(function() {
$("#head").append(
"<meta charset='utf-8'>"+
"<meta http-equiv='X-UA-Compatible' content='IE=edge'>"+
"<meta name='viewport' content='width=device-width, initial-scale=1'>"+
"<title>Search / NodeJS Bootstrap 101</title>"+
"<link rel='stylesheet' href='bootstrap/css/bootstrap.css'>"+
"<link href='css/style.blue.css' rel='stylesheet' id='theme-stylesheet'>"+
"<link rel='stylesheet' href='faawesome/css/font-awesome.css' media='screen' title='Font Awesome'>"+
"<script src='js/jquery.form.js'></script>"+
"<script src='bootstrap/js/bootstrap.js'></script>"
);
// });
كلمات دليلية:
التعليقات (0)
لايوجد لديك حساب في عالم البرمجة؟
تحب تنضم لعالم البرمجة؟ وتنشئ عالمك الخاص، تنشر المقالات، الدورات، تشارك المبرمجين وتساعد الآخرين، اشترك الآن بخطوات يسيرة !