• 0

كيف أبحث داخل قاعدة البيانات باستخدام PHP وJquery؟

أبحث عن شيفرة برمجية للبحث داخل قاعدة البيانات باستخدام لغات PHP وJquery، فكيف أفعل ذلك؟

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

سأشرح لك طريقة سهلة باستخدام مكتبة تدعى بـ typeahead، قم بتحميلها وأضفها إلى ملف المشروع.
حسنا، لنفترض أنك قد قمت بإنشاء قاعدة بيانات بهذه الطريقة:

CREATE TABLE 'users_name'
(
    user_id INT(20) PRIMARY KEY,
    fname TEXT
);

ومن ثم أنشئ صفحة مشابه لهذه (مثال بسيط على صفحة ويب):

<html>
  <head>
    <title>Search Box</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="typeahead.min.js"></script>
  </head>
    <body>
     <input type="text" name="typeahead">
    </body>
    </html>

الصفحة بسيطة تحتوي فقط على مربع لادخال الكلمة للبحث.

وسنستدعي في مثالنا PHP عن طريق استخدام get كما في المثال التالي:

  <script>
    $(document).ready(function(){
    $('input.typeahead').typeahead({
        name: 'typeahead',
        remote:'search.php?key=%QUERY',
        limit : 10
    });
});
    </script>

حيث ستكون الشيفرة البرمجية الخاصة بالبحث كالتالي (ملف search.php):

<?php
    $key=$_GET['key'];
    $array = array();
    $con=mysql_connect("localhost","root","");
    $db=mysql_select_db("database name",$con);
    $query=mysql_query("select * from table_name where <coloumn_name> LIKE '%{$key}%'");
    while($row=mysql_fetch_assoc($query))
    {
      $array[] = $row['title'];
    }
    echo json_encode($array);
?>

قم باستبدال معلومات قاعدة البيانات حسب المطلوب.

المصدر

تمّ تعديل بواسطة هشام رزق الله

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

 في المثال التالي، أقدم لك الطريقة المتبعة من قبل المبرمجين لعرض النتائج المبحوث عنها في قاعدة بيانات mysql عن طريق Jquery:

معلومات حول قاعدة البيانات:

database name => phpgang
table name => live_search
column names => id, name, email

إنشاء قاعدة البيانات و الجدول، وملءه ببعض البيانات:

create database `phpgang`;
use `phpgang`;
 
CREATE TABLE `live_search` (
  `id` int(10) NOT NULL auto_increment,
  `name` varchar(255) NOT NULL,
  `email` varchar(100) NOT NULL,
  `date` timestamp NOT NULL default CURRENT_TIMESTAMP on update CURRENT_TIMESTAMP,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=5 DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;
 
INSERT INTO `live_search` VALUES (1, 'Huzoor Bux', 'huzoorbux@gmail.com', '2013-08-29 11:04:36');
INSERT INTO `live_search` VALUES (2, 'Sameer Khan', 's_khan@gmail.com', '2013-08-29 11:04:36');
INSERT INTO `live_search` VALUES (3, 'Ravi Khana', 'r_khana@phpgang.com', '2013-08-29 11:05:31');
INSERT INTO `live_search` VALUES (4, 'Neelam Ara', 'neelam@phpgang.com', '2013-08-29 11:05:31');

ملف db.php للاتصال بقاعدة البيانات:

<?php
    $connection = mysqli_connect('localhost','phpgang_usr','******','phpgang');
    if (mysqli_connect_errno())
    {
         echo "Failed to connect to MySQL: " . mysqli_connect_error();
    }
?>

ملفindex.php يتضمن حقل البحث:

<div class="content">
<input type="text" class="search" id="searchid" placeholder="Search for people" />&nbsp; &nbsp; Ex: <b><i>huzoor bux, neelam, ravi or sameer</i></b><br /> 
<div id="result"></div>
</div>

Javascript والتي ستتيح البحث عند كل حرف يكتب في الحقل المخصص للبحث:

<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(function(){
$(".search").keyup(function() 
{ 
var searchid = $(this).val();
var dataString = \'search=\'+ searchid;
if(searchid!=\'\')
{
    $.ajax({
    type: "POST",
    url: "result.php",
    data: dataString,
    cache: false,
    success: function(html)
    {
    $("#result").html(html).show();
    }
    });
}return false;    
});
 
jQuery("#result").on("click",function(e){ 
    var $clicked = $(e.target);
    var $name = $clicked.find(\'.name\').html();
    var decoded = $("<div/>").html($name).text();
    $(\'#searchid\').val(decoded);
});
jQuery(document).live("click", function(e) { 
    var $clicked = $(e.target);
    if (! $clicked.hasClass("search")){
    jQuery("#result").fadeOut(); 
    }
});
$(\'#searchid\').click(function(){
    jQuery("#result").fadeIn();
});
});
</script>

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

<style type="text/css">
    .content{
        width:900px;
        margin:0 auto;
    }
    #searchid
    {
        width:500px;
        border:solid 1px #000;
        padding:10px;
        font-size:14px;
    }
    #result
    {
        position:absolute;
        width:500px;
        padding:10px;
        display:none;
        margin-top:-1px;
        border-top:0px;
        overflow:hidden;
        border:1px #CCC solid;
        background-color: white;
    }
    .show
    {
        padding:10px; 
        border-bottom:1px #999 dashed;
        font-size:15px; 
        height:50px;
    }
    .show:hover
    {
        background:#4c66a4;
        color:#FFF;
        cursor:pointer;
    }
</style>

ملف result.php  المسؤول عن ارسال جمل الاستعلام للبحث عن الكلمة المبحوث عنها:

<?php
include('db.php');
if($_POST)
{
    $q = mysqli_real_escape_string($connection,$_POST['search']);
    $strSQL_Result = mysqli_query($connection,"select id,name,email from live_search where name like '%$q%' or email like '%$q%' order by id LIMIT 5");
    while($row=mysqli_fetch_array($strSQL_Result))
    {
        $username   = $row['name'];
        $email      = $row['email'];
        $b_username = '<strong>'.$q.'</strong>';
        $b_email    = '<strong>'.$q.'</strong>';
        $final_username = str_ireplace($q, $b_username, $username);
        $final_email = str_ireplace($q, $b_email, $email);
        ?>
            <div class="show" align="left">
                <img src="https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-prn1/27301_312848892150607_553904419_n.jpg" style="width:50px; height:50px; float:left; margin-right:6px;" /><span class="name"><?php echo $final_username; ?></span>&nbsp;<br/><?php echo $final_email; ?><br/>
            </div>
        <?php
    }
}
?>

يمكنك تجريب المثال من خلال Demo.

تمّ تعديل بواسطة E.Nourddine

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن