المساعد الشخصي الرقمي

مشاهدة النسخة كاملة : كيفية إنشاء محرك Ajax Search

السلفي الأثري
2010-07-09, 09:08
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته

اخواني الكرام اليوم باذن الله راح نتعلم كيفية عمل محرك بحث جميل جدا باستخدام PHP و jQuery و MYSQL
كالعادة خلينا نشوف مثال على العملية و ملفات التطبيق متاحة لتحميل ايضا

تحميل الملفات هنا (http://www.m5zn.com/files-070910010735krjczuqmetn7i9d4bd-ajax_search_jQuery.zip)


لعملها نتبع التالي:

1 - نجهز ملف بمسمى index.php و يكون هذا محتواه


كود Xml / html



01<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd (http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">


02<html xmlns="http://www.w3.org/1999/xhtml (http://www.w3.org/1999/xhtml)">

03<head>

04<**** **********="*******-Type" *******="text/html; charset=iso-8859-1" />

05<title>Ajax Tutorial: How to Create Ajax Search Using PHP jQuery and MYSQL</title>

06<script type="text/javascript" src="jquery.js"></script>

07<link rel="stylesheet" type="text/css" media="screen" href="css.css" />

08</head>

09<script ********="javascript">

10$(document).ready(function(){

11$(".searchBtn").click(function(){

12$("#sub_cont").fadeIn(1500).html("<div class='*******'><center ><img src='ajax-loader.gif'/>جاري التحميل</center></div>");

13$("#sub_cont").load("search.php?val=" + $("#search").val());

14});

15});

16</script>

17<body>

18<div class="textBox">

19<input type="text" value="" maxlength="100" name="searchBox" id="search"/>

20<img class="searchBtn" src='search_ico.png'/>

21</div>

22<div id="sub_cont"></div>

23</body>

24</html>



ما نلاحظ يجب تضمين ملف مكتبة الجي كواري ضمن الملف بهذا الكود :

كود plain







1<script type="text/javascript" src="jquery.js"></script>












و كذالك ضمنا ملف الانماط الانسيابة - لاضافة لمسات تجميلية للعملية بهذا الكود


كود plain






1<link rel="stylesheet" type="text/css" media="screen" href="css.css" />








طبعا لازم نعمل ملف ثاني بمسمى css.css و محتواه :


كود css







01BODY {


02FONT-SIZE: 13px; COLOR: #003399; FONT-FAMILY: Tahoma, Helvetica, Arial, sans-serif;


03


04}


05A {


06 COLOR: #003399; TEXT-DECORATION: none;


07 text-align: right;


08}


09.searchBtn



10 {


11 float:right;


12 cursor:pointer;



13 }


14



15


16.textBox input


17 {


18 color:#330000;


19 font: 14px Tahoma;


20 float:right;


21 height:20px;


22 padding:12px 0 0 9px;




23 vertical-align:middle;




24 width:432px;



25 text-align: center;




26 }




27.******* {


28BORDER-RIGHT: #87CEFA 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #fff 1px solid; PADDING-LEFT:4px; BACKGROUND: #EAF4FF repeat-x left top; PADDING-BOTTOM: 4px; BORDER-LEFT: #e0e0e0 1px solid; PADDING-TOP: 4px; BORDER-BOTTOM: #e0e0e0 1px solid


29;


30float:right;


31text-align: right;



32margin: 2px 0px 2px 0px;


33padding: 5px;



34border: 1px solid #FFCC33;


35width: 432px; clear:both;


36


37}
السلفي الأثري
2010-07-09, 09:26
3 - نضيف ملف جديد بمسمى search.php و هو المسؤول عن جلب نتائج البحث و عرضها و محتواه :



include("config.php");$rec = $_REQUEST['val'];if(!empty($rec) and strlen($rec) >4){$query = mysql_query("SELECT * FROM $table WHERE $Field LIKE '$rec' LIMIT $LIMIT");$total = mysql_num_rows($query);while ($rows = mysql_fetch_assoc($query)){extract($rows);echo "<div class='*******'><a href=".$url.$$id." target='_blank'>".$$Title."</a></div>";} }if($total==0){ echo '<div class="*******">لا توجد نتائج</div>';}

- نضيف ملف اخير بمسمى config.php و هو المسؤول بالاعدادات الاساسية للعملية و بيانات قاعدة البيانات و محتواه مع شرح ما يجب تعديله كالتالي :


/////////////////////////////////// معلومات قاعدة البيانات //$SQL_USER="root";// اسم المستخدم لقاعدة البيانات$SQL_PWD="ghost";// كلمة المرور لقاعدة البيانات$SQL_DB="good";// اسم قاعدة البيانات////////////////////////////////// بيانات الجدول //$table = "thread";// اسم الجدول$Field = "rtv1";// اسم الحقل الذي سيبحث فيه$LIMIT = "10";// عدد النتائج المستخرجة$Title = "rtv";$id = "SID";$url = "thread.php?id=";///////////////////////////////// لا تعدل أي شيئ هنا //$Connect =@mysql_connect("localhost",$SQL_USER,$SQL_PWD);$Select =@mysql_select_db($SQL_DB,$Connect);if(!$Connect){ exit("<p align='center'><b><font face='Tahoma' size='2' color='#FF0000'>لايوجد اتصال بالقاعده</font></b></p>&nbsp;</p>");}if(!$Select){exit("<p align='center'><b><font face='Tahoma' size='2' color='#FF0000'>لم يتم تحديد قاعده بيانات</font></b></p>&nbsp;</p>");}


و في الاخير اضفنا صورتين - الاولى search_ico.png و هي زر تنفيذ العملية و الثانية ajax-loader.gif تظهر اثناء تحميل النتائج و كليهما موجودة ضمن ملف المثال

باختصار شديد هذه هي الفكرة الاساسية لعمل محرك بحث بتقنية الاجاكس و يبقى ان اقول ملاحظة مهمة لمن لا يستخدمون الترميز العالمين utt-8 - حيث راح يلاقون صعوبات في التعامل مع النصوص العربية و لاكن لها حل اكيد و من اراد هذا الحل نحن جاهزون لتلبية الطلب

و ملتقانا في موضوع جديد و السلام عليكم و رحمة الله و بركاته
ولد السوفي
2010-07-09, 09:55
بارك الله فيك
fatimazahra2011
2010-08-08, 17:45
http://files.fatakat.com/2010/6/1277322610.gif
fifi95
2010-11-23, 20:05
بارك الله فيك
To Gether
2011-03-06, 18:52
بارك الله فيك
سبق و ان قمت بتنفيذها بالجكويري ايضا ، نفذتها بكلتا الطريقتين و حقيقة الاجاكس نقلة نوعية و تقنية جميلة لكن المشكل انها ضد الارشفة لذا لا ينصح بتاتا بالاكثار منها ، يكفي استعمالها في بعض الحركات الجمالية لاعطاء السكريبت اكثر سلاسة وينصح استخدامها في الامور التي لا تخص المواضيع و الردود وما الى ذلك
وفقكم الله
zamile
2011-03-12, 09:30
طريقة رائعة
yakoub21
2011-04-12, 18:56
اشكرك اخي على البرنامج
كما اردت ان اطلب منك مساعدتي في القيام بوضع الجزء المسطر في الكود في قاعدة بيانات

{
echo('<li class="resultlistitem"><a href="' . $value->Url . '">');
echo('<h3>' . $value->Title . '</h3></a>');
echo('<p>' . $value->Description . '</p>');
echo('<p>' . $value->DateTime . '</p>');

//echo 'hiiiiiiiiiiiiiiiiiiiii';
}

http://www.duckload.com/download/4567516/New_Picture.bmp


تقبل تحياتي
انتظر ردك
طهراوي ياسين
2011-04-12, 20:24
جزاك الله خيراااااا