كيفية إنشاء محرك Ajax Search

~~السلفي الأثري~~ · 2010-07-09, 09:08

بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته

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

تحميل الملفات هنا

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

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

كود Xml / html

اقتباس:

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

02<html xmlns="https://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

ointer;

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 و هو المسؤول عن جلب نتائج البحث و عرضها و محتواه :

كود 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 و هو المسؤول بالاعدادات الاساسية للعملية و بيانات قاعدة البيانات و محتواه مع شرح ما يجب تعديله كالتالي :

كود 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>");}[CENTER][/CENTER]

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

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

و ملتقانا في موضوع جديد و السلام عليكم و رحمة الله و بركاته

ولد السوفي · 2010-07-09, 09:55

بارك الله فيك

fatimazahra2011 · 2010-08-08, 17:45

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';
}

تقبل تحياتي
انتظر ردك

طهراوي ياسين · 2011-04-12, 20:24

جزاك الله خيراااااا