اشترك في مجموعة montadaphp.net حتى تصلك أخبار المنتدى  

بريدك الإلكتروني:

النتائج 1 إلى 6 من 6
شجرة الإعجاب9إعجاب
  • 2 Post By mohwaali
  • 2 Post By mohwaali
  • 1 Post By
  • 1 Post By mohwaali
  • 2 Post By sh_e2000
  • 1 Post By gant

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

  1. #1
    عضو فعال الصورة الرمزية mohwaali
    تاريخ التسجيل
    27-04-2014
    السن
    32
    المشاركات
    135
    معدل تقييم المستوى
    4

    Thumbs up محرك بحث مثل فيس بوك يجلب الاسم والصورة عند كتابة ثلاثة حروف بتقنية الاجاكس

    السلام عليكم ورحمة الله وبركاته
    مرحبا شباب اتمنا ان تكونو بالف خير
    اليوم سنتطرق الى عمل محرك بحث لموقعنا بتقنية الاجاكس وبدون اطالة نبدا بتجهيز مستلزمات المحرك
    سنحتاج للتالي
    1اولا ملف الاتصال بقاعدة البيانات config.php
    2ثانيا صفحة index.phpوالتي سنضع فيها كود جافاسكريبت والفورم
    3-ثالثا ملف title.php والذي سنرسل اليه الفورم لمعالجة الطلب بالاجاكس دون ريفرش تلقائي
    4رابعا واخيرا search.php لعرض النتيجة المطلوبة بعد اختيار العضو والضغط على السوبميتsubmit
    قم بانشاء مجلد باسمupوضع فيه صور الاعضاء لا تنسى نحن نجرب المهم الان الفكرة
    نبدا على بركة الله ونقول بسم الله الرحمان الرحيم
    اولا ننشئ قاعدة بيانات جديدة نسميها test عن طريق phpmyadmin

    ونزرع فيها كود الاعضاء
    ويشمل الاتي
    id username img
    اليك الكود
    كود:
     
    كود:
    CREATE TABLE `users` (
      `id` int(11) NOT NULL AUTO_INCREMENT,
      `username` varchar(200) NOT NULL,
      `img` varchar(300) NOT NULL,
      PRIMARY KEY (`id`)
    ) ;
    قم بادخال عدة عضويات عن طريق الضغط على users ثم على insert
    قم بوضع رابط للصور المهم يكون رابط صحيح مثلا
    up/img.png في الحقل img

    الان بعد اعداد جميع الملفات وقاعدة البيانات وزرع الجدول وادخال العضويات ناتي الى صفحة

    config.php

    كود:
     
    كود:
    <?php
    $server='localhost';
    $rootname='root'; 
    $rootpassword=''; 
    $dbname='test'; 
    $db = new mysqli($server,$rootname,$rootpassword,$dbname);
    
    
          if (!$db)
           {
              die ('<center>لا يوجد قاعدة بيانات متصلة </center>');
           }
           @$db->query("set names 'utf8'");    
    
    
    function safe($vars){
            $html =htmlspecialchars(addslashes(trim($vars)));
    return $html ;
    }
    ?>

    الان نبدا بصفحة
    index.php

    ايك الكود كامل
    كود:
        <script type="text/javascript">
    /*  فنكشن الخاص بتعريف
    XMLHttpRequest object
    على حسب نوع المتصفح
     */
    function XmlObject(){
         if(window.XMLHttpRequest)
        {
            xmlHttp= new XMLHttpRequest();
        }
        else if (window.ActiveXObject)
            {
                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            return xmlHttp;
        }
        
    /* فنكشن البحث الخاص بإحضار البيانات من ال
    input 
    وإرسالها إلى صفحة البحث*/
    function ajax_search(){
        var title = document.search_form.title.value;/*إحضار محتويات ال input*/
        if (title.length>2){/*إذا كان عدد الأحرف اكبر من 2*/
        xmlHttp = XmlObject();/*تعريف ال object*/
        xmlHttp.open('post', 'title.php');/*طريقة إ رسال البيانات و إلى أين*/
        xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");/*عند إستخدام نوع إرسال البيانات POST لابد من تعريف الهيدر وترميزه*/
        xmlHttp.onreadystatechange = handelinfo;/*إستدعاء الفنكشن الخاص بإستقبال البيانات وإظهارها بالصفحة*/
        xmlHttp.send('title='+title);/*إرسال البيانات*/
        }else{
            document.getElementById('list_div').innerHTML = '';
        }
        }
        
        
        
        function hide_div(){/* فنكشن إخفاء الديف عند إستدعائه*/
            document.getElementById('list_div').style.display = "none";
        }
        
        function show_div(){/*فنكشن إخفاء الديف*/
            document.getElementById('list_div').style.display = "block";
        }
        
     function handelinfo(){/*فنكشن إستقبال البيانات و إظهارها*/
          if (xmlHttp.readyState == 4)
            {
                show_div();
                var response=xmlHttp.responseText;
                document.getElementById('list_div').innerHTML = response;
            }
     }
    
    
    /*فنكشن نسخ السر الذي نقوم بالنقر عليه في ديف البحث*/
    function copy_title(text){
     var text;
     document.search_form.title.value = text;
     text = '';
     }
     
    </script>
    <center>
    
      <form action="search.php" id="form11"  method="post" name="search_form" style='margin-bottom:px;margin-top:5px;height:px;border:1px solid #ccc;background:#background: #DDE2F0;'>
      <table border="0" width="100%" id="table1" cellspacing="0" cellpadding="0" align="center">
    <tr>
     <td align="">
                <div class="search_div">
                    <input type="text" name="title" id="title_id"  onkeyup="ajax_search();"  placeholder="<?php  ?>" >
                    
                    <INPUT  name="sub" id="subs1" TYPE="image" SRC="css/img/im/K2hcJZ7o7-d.png" HEIGHT="" WIDTH="" BORDER="" ALT="أدخل بياناتك">
                    <div id="list_div"></div>
                </div>
                </td>
            </tr>
        </table>
      
     </form> 
    </center>
    <style type="text/css">
    /*خصائص الديف الموجود به 
    input البحث
    والديف الذي سوف يظهر لنا عند البحث*/    
        .search_div{
        position: relative;
        
    }
    /* خصائص ال input الخاص بالبحث*/
    #title_id{
        height:25px;
    padding:0px;
    border-radius:100px;
    font-family:tahoma;
    font-size:16px;
    border:0px solid #ccc;
    background-color: #005566;
    padding-right:5px;
    color:#fff;
        
    }
    /* خصائص الديف الذي سوف يظهر
    اهم الخصائص
    هي الموقع
    position
    overflow الخاصة بالسكرول بار حتى لا يتمدد الديف
    
    
    */
    .list_div{
        color: #005599;
        font-weight: bold;
        position: absolute;
        top: 20px;
        right: 0px;
        width: 299px;
        height:;
        background-color: #f1f1f1;
        overflow: auto;
        border-color:1px solid #005599;
        border-style: dashed;
        border-width: 0px 1px 1px 1px;
    }
    </style>
    الان نتوجه الى ملف المعالجة وهو
    title.php
    اليك الكود
    كود:
    <?php
        include "config.php";
        $title = safe($_POST['title']);
        if (strlen($title)>2){
            $query =@$db->query("SELECT username,img FROM users WHERE username LIKE '%$title%'");
            $num=@$query->num_rows;
            if($num){
            echo '<div class="list_div">';
            while ($result =@$query->fetch_array()){
            echo"<table style='background:#fff;'><tr><td width='15%'>";
            echo "<img src='".$result['img']."'width='70px'height='70px'></td>";
                
                echo '<td class="td"width="85%">
                <font onclick="copy_title(\''.$result['username'].'\')">'.$result['username']."<span>
                لا يوجد وصف متاح
                </span></font>";
                echo'
                
                </td></tr></table>';
                
            }
            echo '</div>';
            }
        }
        ///////////////////////////////////////////////////
        
        
    ?>
    <style>
    .td:hover{
    background:#005599;color:#fff;font-family:tahoma;
    }
    
    
    </style>
    الان نتوجه الى ملف عرض النتائج بعد الطلب وهو ملف

    search.php
    الكود الكامل
    كود:
    <?php
    include "config.php";
    $title = safe($_POST['title']);
    if(empty($title)){
        
    header ("location:index.php");
    }else{
    if (strlen($title)>2){
                  
    echo '<div class="head"> <span style="color:#005599;">هل تعرفهم</span> <span style="color:#005599;float:left;">يمكنك طلب الصداقة</span></div>';
    
    
    $query =@$db->query("SELECT * FROM users WHERE username LIKE '$title%'");
            $num=@$query->num_rows;
            if ($num > 0){
            echo '<div class="body">';
                 echo "<table class='table'>";
            while ($result =@$query->fetch_array()){
                   $id=$result['id'];
                   $nem=  $result['username'];
                       echo"<tr><td width='15%'>";
                       echo   "<img src='".$result['img']."' width='70px' height='70px'><br/>
                       </td>";
      
                   echo"<td width='65%'>";    
                   echo '<font onclick="copy_title(\''.$result['username'].'\')">'.$result['username']."</font><br/>";
            echo "</td>
            <td width='20%'>
                <a href='profile1.php?act1=act2&id=$id'>  الدهاب الى حائط$nem </a>
            </td>
            </tr>";    
                         
            }
            echo "</table></div>";
            }  else
                          {
                           
                           echo " <h2>لا يوجد شخص بهذا الاسم</h2> ";
                          } 
    
    
        }
    
    
        }
        ?>

    انظر في الكود جيدا وتمعن لتفهم جميع نواحيه
    وفي الاخير اقول لكم السلام عليكم ورحمة الله
    انا في انتظار تسائلاتكم

  2. #2
    عضو فعال الصورة الرمزية mohwaali
    تاريخ التسجيل
    27-04-2014
    السن
    32
    المشاركات
    135
    معدل تقييم المستوى
    4

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

    اليكم الملفات في المرفقات
    الملفات المرفقة الملفات المرفقة

  3. #3
    عضو مشارك الصورة الرمزية محمد طه
    تاريخ التسجيل
    27-01-2014
    المشاركات
    36
    معدل تقييم المستوى
    0

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

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

  4. #4
    عضو فعال الصورة الرمزية mohwaali
    تاريخ التسجيل
    27-04-2014
    السن
    32
    المشاركات
    135
    معدل تقييم المستوى
    4

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

    واياك اخي الكريم

  5. #5
    عضو مشارك
    تاريخ التسجيل
    16-04-2009
    المشاركات
    34
    معدل تقييم المستوى
    0

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

    رائع جدا جزاء الله خيراً

  6. #6
    عضو مشارك الصورة الرمزية gant
    تاريخ التسجيل
    21-07-2008
    المشاركات
    56
    معدل تقييم المستوى
    10

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

    هل هناك مثال او صورة للعمل النهائي؟

معلومات الموضوع

الأعضاء الذين يشاهدون هذا الموضوع

الذين يشاهدون الموضوع الآن: 1 (0 من الأعضاء و 1 زائر)

المواضيع المتشابهه

  1. جلب نتائج البحث عن الصور من موقع فليكر بتقنية الاجاكس
    بواسطة the_unknown في المنتدى دروس بي اتش بي PHP Lessons
    مشاركات: 2
    آخر مشاركة: 08-08-2011, 08:10 PM
  2. طلب كود اعادة تسمية الملفات من حروف كبيرة الى حروف صغيرة
    بواسطة mo7med في المنتدى مشاكل وحلول PHP Errors & Troubleshooting
    مشاركات: 0
    آخر مشاركة: 11-12-2009, 07:15 PM
  3. مشكلة عند كتابة الاسم اذا كان موجود ينقلنى واذا كان غير موجود ينقلنى
    بواسطة alaa ali في المنتدى مشاكل وحلول PHP Errors & Troubleshooting
    مشاركات: 1
    آخر مشاركة: 04-07-2009, 07:12 PM
  4. استفسار أعيروني تلاتت دقاإق من فظلكم
    بواسطة abdelhaq في المنتدى مشاكل وحلول PHP Errors & Troubleshooting
    مشاركات: 2
    آخر مشاركة: 11-02-2009, 11:38 PM
  5. استفسار عرض البيانات بتقنية الاجاكس
    بواسطة مبتدئ شوية في المنتدى مشاكل وحلول PHP Errors & Troubleshooting
    مشاركات: 1
    آخر مشاركة: 26-07-2008, 01:15 AM

ضوابط المشاركة

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