كيفية إنشاء محرك Ajax Search - منتديات الجلفة لكل الجزائريين و العرب

العودة   منتديات الجلفة لكل الجزائريين و العرب > منتديات أصحاب المواقع > منتدى تطوير مواقع الانترنت > قسم دروس ودورات تطوير المواقع

في حال وجود أي مواضيع أو ردود مُخالفة من قبل الأعضاء، يُرجى الإبلاغ عنها فورًا باستخدام أيقونة تقرير عن مشاركة سيئة ( تقرير عن مشاركة سيئة )، و الموجودة أسفل كل مشاركة .

آخر المواضيع

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

إضافة رد
 
أدوات الموضوع انواع عرض الموضوع
قديم 2010-07-09, 09:08   رقم المشاركة : 1
معلومات العضو
السلفي الأثري
محظور
 
إحصائية العضو










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

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

اخواني الكرام اليوم باذن الله راح نتعلم كيفية عمل محرك بحث جميل جدا باستخدام 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">




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 cursorointer;



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   رقم المشاركة : 2
معلومات العضو
السلفي الأثري
محظور
 
إحصائية العضو










افتراضي


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   رقم المشاركة : 3
معلومات العضو
ولد السوفي
عضو نشيط
 
الصورة الرمزية ولد السوفي
 

 

 
إحصائية العضو










افتراضي

بارك الله فيك










رد مع اقتباس
قديم 2010-08-08, 17:45   رقم المشاركة : 4
معلومات العضو
fatimazahra2011
عضو ماسي
 
الصورة الرمزية fatimazahra2011
 

 

 
الأوسمة
وسام التألق  في منتدى الأسرة و المجتمع 
إحصائية العضو










افتراضي










رد مع اقتباس
قديم 2010-11-23, 20:05   رقم المشاركة : 5
معلومات العضو
fifi95
عضو فعّال
 
الصورة الرمزية fifi95
 

 

 
إحصائية العضو










افتراضي

بارك الله فيك










رد مع اقتباس
قديم 2011-03-06, 18:52   رقم المشاركة : 6
معلومات العضو
To Gether
عضو مجتهـد
 
إحصائية العضو










افتراضي

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










رد مع اقتباس
قديم 2011-03-12, 09:30   رقم المشاركة : 7
معلومات العضو
zamile
عضو مجتهـد
 
إحصائية العضو










افتراضي

طريقة رائعة










رد مع اقتباس
قديم 2011-04-12, 18:56   رقم المشاركة : 8
معلومات العضو
yakoub21
عضو جديد
 
الصورة الرمزية yakoub21
 

 

 
إحصائية العضو










افتراضي

اشكرك اخي على البرنامج
كما اردت ان اطلب منك مساعدتي في القيام بوضع الجزء المسطر في الكود في قاعدة بيانات

{
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   رقم المشاركة : 9
معلومات العضو
طهراوي ياسين
عضو ذهبي
 
الصورة الرمزية طهراوي ياسين
 

 

 
إحصائية العضو










افتراضي

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










رد مع اقتباس
إضافة رد

الكلمات الدلالية (Tags)
محرك, ajax, search, إنشاء, كيفية


تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة

الانتقال السريع

الساعة الآن 07:08

المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى
المنتدى غير مسؤول عن أي إتفاق تجاري بين الأعضاء... فعلى الجميع تحمّل المسؤولية


2006-2024 © www.djelfa.info جميع الحقوق محفوظة - الجلفة إنفو (خ. ب. س)

Powered by vBulletin .Copyright آ© 2018 vBulletin Solutions, Inc