منتدى استراحات زايد - [ درس ] بحث سريع مثل الفيس بوك ! اجاكس PHP MySQLi JQuery

السلام عليكم ورحمة الله وبركاته
الحمدلله والصلاة والسلام على رسول صلوات الله عليه .

صباح ومسائكم مبارك مبرمجي ومطوري ترايدنت الأعزاء
اليوم حبيت ان اطرح عليكم اداه جميله تتيح لكم عرض نتائج بنكهة الأجاكس ( Ajax )
عند أجراء عملية بحث في احدى برمجياتك , جميل .
ممكن هذه الطريقه متبعه في نسب كبيره من المواقع المتميزه في ادائها كالفيسبوك وغيرها وغيرها وحتى فورم بحث جوجل وانا اليوم رح اعطيكم الفكره وانتوا تطوروها براحتكم .

http://www.traidnt.net/vb/images/img...14/03/1887.png

ما هي خطوات هذا الدرس

1- انشاء قاعدة بيانات تحمل اسماء الموضوع
التي سيبحث في داخلها .
2- عمل صفحة باسم index.php
ندرج بداخلها فورم البحث الذي سيظهر لنا فيه نتائج سريعه
3- عمل صفحة باسم style.css
تنسيق فورم البحث وتأطير النتائج السريعه بال CSS
4- ادراج مكتبة الجكويري وانشاء ملف بأسم traidnt.js لنقوم بادراج اكواد الجكويري بداخله
http://code.jquery.com/jquery-2.0.2.min.js | من خلال الرابط المدرج

5- عمل صفحة بأسم Process.php
في داخل هذه الصفحة سنجلب نتائج البحث عن طريق الاجاكس والجكويري

نبدأ على بركة الله في الخطوة الأولى
1- انشاء قاعدة بيانات تحمل اسماء الموضوع

نقوم بأنشاء قاعدة بيانات بأسم search
ثم نعمل حقل بأسم articles
تحمل حقلين id - name
id(INT) - Primary - AutoIncerment
name(Varchar) - 255
اول حقل لأيدي الموضوع تلقائي ومن نوع الارقام
ثاني حقل الاسم من نوع النص و255 حرف لتخزين اسم الموضوع

2- عمل صفحة باسم index.php

نضيف فيه التالي

رمز PHP:

<span style="color: #000000"> DOCTYPE html>

البحث

البحث السريع في المقالات ..

جاري البحث ...</p>

</div> </div>اول شي ضفنا بداية وثيقة html ثم وسم head بداخله استدعينا ملف style.css ثم استدعيها ملفي
الجكويري و traidnt.js
ثم اضفنا وسم body وبداخله table جدول ثم عملنا فورم بحث عادي وخلينا اول شيء
input من نوع تيكست لنضيف بداخله كلمة البحث ومن مميزاتها ان وقفنا الأكمال التلقائي autocomplete وخليناه required واعطيناه id بأسم search_text حتى من خلاله نأخذ كلمة البحث في الجكويري .

عملنا حقل اخر من نوع submit هو زر الارسال ويحمل id باسم search_btn جواه عملنا
box صندوق الي رح يظهر بداخله النتائج .

3- عمل صفحة باسم style.css

الان نقوم بتنسيق الفورم باللغة CSS
وبداخل ملف style.css

رمز PHP:

* {
padding: 0;
margin: 0;
direction: rtl;
list-style: none;
font-family: tahoma;
}
table {
width: 100%;
}
a {
text-decoration: none;
font: normal 13px tahoma;
}
h1 {
width: 100%;
text-align: center;
font: bold 15px tahoma;
margin: 10px 0px 10px 0px;
color: #2c3e50;
}
h2 {
width: 100%;
text-align: center;
font: bold 13px tahoma;
margin: 0px 0px 10px 0px;
color: #7f8c8d;
}
.search {
width: 400px;
height: 40px;
margin: 0 auto;
}
input {
font-family: tahoma;
}
.search .inp {
height: 20px;
line-height: 50px;
margin: 5px;
width: 300px;
padding: 10px;
border: 1px solid #bdc3c7;
border-radius: 3px;
}
.search .inp:focus {
box-shadow: inset 2px 2px 3px #ecf0f1;
}
.search .btn {
background: #f39c12;
color: #fff;
text-align: center;
height: 40px;
line-height: 40px;
border-radius: 3px;
border: none;
width: 60px;
font-weight: bold;
cursor: pointer;
}
.search .btn:Hover {
background: #2c3e50;
}
.search .box_search {
position: absolute;
display: none;
box-shadow: 0px 2px 10px #eee;
background: #fff;
z-index: 999;
width: 310px;
border-radius: 5px;
padding: 10px;
cursor: auto;
}
.search .box_search ul {
width: 230px;
float: left;
margin: 0;
padding: 0;
}
.search .box_search ul li {
border-bottom: 1px solid #ddd;
float: left;
padding: 5px 0px 10px 0px;
}
.search .box_search ul li:last-child {
border-bottom: none;
padding: 5px 0px 0px 0px;
}
.search .box_search ul li a {
margin-top: 10px;
float: left;
display: block;
color: #888;
width: 310px;
}
.search .box_search ul li a:hover {
color: #222;
}
.search .box_search .search-load {
background: url("ajax-loader2.gif") no-repeat left center;
padding-left: 25px;
display: none;
font-size: 12px;
}

اول دالة هيه ( * ) عملنا ريسيت للسي اس اس
ثاني دالة table عملنا عرض 100%
ثالث شي الروابط شلنا الخط الي تحتها عن طريق text-decoration ورتبنا الفونت
رابع شي h1 الي فيه كلمة ( البحث ) نسقناها من حيث المظهر وايضا h2 الي فيها البحث السريع ايضاً نسقناها ..

خامس شي عملنا تنسيق لكلاس search الي بداخله form وايضا عملنا تنسيق للفورم من حيث الكتابة والزر تبع البحث

سادس شي عملنا تنسيق لصندوق النتائج تبع البحث السريع وخليناه مخفي display: none عند الكتابة واظهار النتائج يظهر الصندوق بواسطة jQuery وايضا عملنا تنسيق لروابط النتائج .

الان صار عدنا الفورم بهذا الشكل
http://www.traidnt.net/vb/images/img...14/03/1888.png

4- ادراج مكتبة الجكويري وانشاء ملف بأسم traidnt.js لنقوم بادراج اكواد الجكويري بداخله

طبعاً احنا قمنا بأدراج المكتبة وعملنا ملف راح الان بداخل الملف traidnt.js
نضيف التالي

رمز PHP:

$(document).ready(function(){
$('#search_text').keyup(function(){
var search_word = $(this).val();
if(search_word.length > 1){
$('#search_box').css({'display':'block'});
$.ajax({
type: 'POST',
data: 'search_word='+search_word,
url: 'process.php',
beforeSend: function(){
$('#search_load').css({'display':'block'});
},
success: function(data){
$('#search_load').css({'display':'none'});
if(data == 1){
$('#result_s').text('Searching 0 results .');
}else {
$('#result_s').html(data);
}
}

});
}else {
$('#search_box').fadeOut('fast');
}
});
$('#search_text').blur(function(){
$('#search_box').fadeOut('fast');
});
});

اول شي قمنا بتهيئة الملف بأنه مستند جكويري عن طريق دالة ready() وعلمنا فيها فنكشن
بداخل هذا الفنكشن قمنا بعمل access لحقل نص البحث عن طريق الايدي #search_text وبعدين استخدمنا دالة keyup للي مايعرف هذي الدالة :

jQuery keyup() Method

وبعدها قمنا بانشاء متغير باسم search_word وعن طريق دالة val() اخذنا محتوى حقل البحث مع ذلك دالة keyup ظيفتها عند الكتابة في الحقل تتأكد عن طريق علامة شرطية ان عدد حروف الي داخل الحقل اكبر من 1 حرف يتم اظهار صندوق النتائج عن طريق تحويل بدالة css للخاصية display من none الى block

بعد هذا عن طريق دالة ajax() وللي مايعرفها
jQuery AJAX Methods

عن طريقها رح نرسل للملف process.php محتوى الحقل بخاصية POST وقبل الارسال رح نظهر رسالة " جاري البحث ... " مثل ماظهرنا صندوق البحث عن طريق تحويل بدالة css() من none الى block وبعد ذلك عند جلب النتائج نقوم باخفائها بعكس الطريقة ثم نسحب data ونعمل شرط اذا استلمنا رقم 1 انو ماكو نتائج بحث ورح نعرض رسالة للمستخدم انوا نتائج بحث ماكو بهاي الكلمة اما خلافها رح نعرض النتائج من process.php ونرفقها بالايدي #result_s وعن طريق دالة html() نرفق بداخلها البيانات المستلمة من الملف

الحين في النهاية اذا شلنا ماوس الكتابة من حقل البحث عن طريق دالة blur() رح يشيل فورم البحث عن طريق دالة fadeOut والسرعه هي fast ..

5- عمل صفحة بأسم Process.php

الان محتوى ملف ال process.php

رمز PHP:

اول شي عملنا اتصال في قاعدة البيانات بدالة mysqli اول بارمتر اسم السيرفر والثاني المستخدم والثالث كلمة السر والرابع اسم قاعدة البيانات وهي search كما انشئناها في السابق .

الان نتأكد ان تم ارسال عن طريق الاجاكس بخاصية ال POST والارسال مو فارغ
رح نعمل متغير باسم word ونستخدم بعض دوال حماية المدخلات
الان نعمل استعلام بجلب النتائج عن طريق متغير get_query ونجلب 5 نتائج فقط .
الان نتحقق ان اكو نتائج بهذه الكلمة
نعرض النتائج عن طريق دالة while()

اما اذا خلافها نعرض رقم 1 الي بقراءة jQuery رح يعطي للمستخدم رساله بعدم وجود نتائج مطابقه للبحث .

الان الشكل النهائي والمتوقع للعمل

http://www.traidnt.net/vb/images/img...14/03/1889.png

مع ذلك ادري في نسبة من الناس تبي حاظر المشروع
وانا لعيونهم ارفقته في المرفقات :tears:

تحياتي وتقديري واحترامي لكم
المصمم والمطور محمد الحسيني

</div></div>
الملفات المرفقة http://www.traidnt.net/vb/images/attach/zip.gif search.zip (4.0 كيلوبايت)