ارجو المساعدة في برمجة Search Bar

تم تحميل الصفحة في 1,5631161 ثانية
ارجو المساعدة في برمجة Search Bar

hw11001it

Beginner Developer
rank
إنضم
8 يوليو 2019
المشاركات
9
الإعجابات
3
النقاط
3
العمر
37
السلام عليكم
انا اواجه مشكلة في موقعي وهي في نموذج البحث داخل الموقع لا يعمل علي موقعي

وقد قمت بانشاء وبرمجة الثلاث اكواد هذه
Index.HTML
Index.PHP
Style.CSS
الان اريد فقط مساعدتكم بتوجيهي اين اضع هذه الملفات الثلاث او الاكواد البرمجية داخل موقعي
مع العلم ان موقعي علي الاستضافة التالية
www.000webhost.com
وعندما اردت اضافة نموذج البحث داخل الموقع قمت باتباع احد الشرحات من خلال هذه الدورة علي اليوتيوب
الفيديو الاول
الفيديو الثاني


وقد قمت بكتابة الاكواد وتجهيزها لنشرها علي موقعي ولكن لم يعمل معي نموذج البحث علي موقعي
كما انني قمت بانشاء قاعدة بيانات علي PHPMYADMIN كما هو موضح في الصورة التالية




هذه هي الاكواد التي قمت بكتابتها من خلال الدورة الموجود علي اليوتيوب في الفيديوهات السابقة
Index.HTML

Index.PHP
Style.CSS

كود Index.HTML

HTML:
<!Doctype html>
<html>
    <head>
        <title>Professional Search Bar</title>
        <link rel="stylesheet" href="css/style.css" />
        <script type="text/javascript">
            function active(){
                var searchBar = document.getElementById('searchBar');[/B]

[B]                if(searchBar.value == 'Search...'){
                    searchBar.value = ''
                    searchBar.placeholder ='Search...'
                }
            }
            function inactive(){
                var searchBar = document.getElementById('searchBar');[/B]

[B]                if(searchBar.value == ''){
                    searchBar.value = 'Search...'
                    searchBar.placeholder =''
                }
            }
        </script>
    </head>
    <body>
        <form action="index.php" method="post">
            <input type="text" id="searchBar" placeholder="" value="Search..." maxlength="25" autocomplete="off" onMouseDown="active();" onBlur="inactive();" /> <input type="submit" id="searchBtn" value="Go!" />
        </form>[/B]

[B]    </body>
</html>
كود Index.PHP

PHP:
<?php
    if($_GET['q'] !== 'Search...'){
        header('Location: index.php');
    }
    if($_GET['q'] !== ''){}
    $con = mysql_connect('localhost','id10099747_pro','350324');
    $db = mysql_select_db('id10099747_search_bar_tutorials');
?>
<html>
    <head>
        <title>Professional Search Bar</title>
        <link rel="stylesheet" href="css/style.css" />
        <script type="text/javascript">
            function active(){
                var searchBar = document.getElementById('searchBar');[/B]

[B]                if(searchBar.value == 'Search...'){
                    searchBar.value = ''
                    searchBar.placeholder ='Search...'
                }
            }
            function inactive(){
                var searchBar = document.getElementById('searchBar');[/B]

[B]                if(searchBar.value == ''){
                    searchBar.value = 'Search...'
                    searchBar.placeholder =''
                }
            }
        </script>
        <style>
#searchBar {
border: 1px solid #000000;
font-size:16px;
padding: 10px;
outline: none;
width: 250px;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
#searchBtn {
border: 1px solid #000000;
font-size: 16px;
padding: 10px;
background: #f1d829;
font-weight: bold;
cursor: pointer;
outline: none;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
border-top-right-radius-radius: 10px;
border-bottom-right-radius: 10px;
}
#searchBtn:hover {
    background: #f6e049;
}
body {
      font-family: arial;
}
h3 {
    margin: 20px 0px 0px 0px;
    padding: 0;
}
p {
    margin: 0;
    padding: 0;
}
a {
    color: #000000;
    text-decoration: underline;
}
    a:hover {
        color: #000000;
        text-decoration: none;
}
</style>
    </head>
    <body>
        <form action="index.php" method="GET">
            <input type="text" name="q" id="searchBar" placeholder="" value="Search..." maxlength="25" autocomplete="off" onMouseDown="active();" onBlur="inactive();" /> <input type="submit" id="searchBtn" value="Go!" />
        </form>
        <?php
            if(!isset($q)){
                echo '';
            } else {
            $query = msql_query("SELECT * FROM products WHERE title LIKE '%$q%' OR description LIKE '%$q%'");
            $num_rows = mysql_num_rows($query);
            ?>
            <p><strong><?php echo $num_rows; ?></strong> results for '<php echo $q; ?>'</p>
                <?php
            while($row = mysql_fetch_array($query)){
                $id = $row['id'];
                $title = $row['title'];
                $desc = $row['description'];[/B]

[B]                echo '<h3><a href="' .$id . '.php">' . $title . '</h3><p>' . $desc . '</p><br />';
            }
        }
        ?>
    </body>
</html>
<?php
    } else {
        header('Location: index.php');
    }
    ?>
كود style.css

CSS:
#searchBar {
border: 1px solid #000000;
font-size:16px;
padding: 10px;
outline: none;
width: 250px;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
#searchBtn {
border: 1px solid #000000;
font-size: 16px;
padding: 10px;
background: #f1d829;
font-weight: bold;
cursor: pointer;
outline: none;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
border-top-right-radius-radius: 10px;
border-bottom-right-radius: 10px;
}
#searchBtn:hover {
    background: #f6e049;
}
ارجو مساعدتكم بتوجيهي اين اضع هذه الملفات الثلاث او الاكواد البرمجية داخل موقعي واعلامي باي اخطاء موجود في الاكواد
وبارك الله فيكم
 

ZeRo-ErRoR

Beginner Developer
rank
إنضم
10 يناير 2015
المشاركات
107
الإعجابات
77
النقاط
28
العمر
25
الإقامة
عدن
سوف أعطيك مربع بحث تفاعلي أي أنة كلما تغيرت القيمة في حقل البحث تضهر نتائج جديدة هذا لأن الكود يقوم بطباعة القيمة في صفحة المعالجة وعرضها في مربع النتائج .
طبعا الكود مجرد تماماً من أي تنسيق، أنت عليك تنسقة بما يناسب موقعك .
كل ماعليك هو إتباع الخطوات :

أولاً كود الـ html :
( index.html )

HTML:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="search.php"></script>
</head>
<body>

<form action="search.php" method="get">
<input type="hidden" name="search" value="بحث" class='search_b'>
<input id="Search" type="search" name="value" class='search_f' placeholder='أدخل كلمة للبحث' maxlength='20'>
</form>

<span class="found" style="width:150px"></span>
<br>
<span onclick="close_search();">close</span>
</body>
</html>
طبعاً كل ما يهم في الكود هو :

HTML:
<input id="Search" type="search" name="value" placeholder='search for somthing'>
وهذا الجزء من الكود

HTML:
<span class="found" style="width:150px"></span>
وهذا الجزء من الكود

HTML:
<span onclick="close_search();">close</span>
الأول هو مربع البحث الذي سوف تضعi في موقعك .
الثاني هو المكان الذي سوف تضهر نتائج البحث فيه .
الثالث هو اضافة ثانوية لإغلاق مربع النتائج يعني مثلا تحط بدله علامة X أو صورة إغلاق الخ ...
والفورم تقدر تلغية أو تبقيه حتى ينقل الباحث إلى صفحة نتائج خارجية .

ولاتنسى إستدعاء مكتبة الجيكويري في الهيد والإستدعاء الآخر لكود الجافا سكربت الخاص بعمل محرك البحث .

طبعاً هذا الكود مجرد من الديزاين أنت صممة بكيفك .

الآن كود الجافا سكربت :
( search.php )
تقدر تخليه ضمن الصفحة مش بملف خارجي أنت حر .
طبعاً أنا عامل بدل ملف الجافا سكربت ملف php ومحولة إلى جافا سكربت بإستخدام الهيدر .
بيسألني احدهم ليه ؟!
عشان اقدر أضيف متغيرات php براحتي مثل رابط الموقع أو أي شيء .
أنت حر إذ تريد تخليه ملف جافا سكربت غير لاحقة الملف من .php إلى .js ولا تنسى تقير الرابط في الإستدعاء فوق search.php

JavaScript:
<?php
$system_url = "." ;
header("Content-type: application/javascript");
?>

/* global $ */
$(function (){
   $('#Search').keyup(function (){

     var what = $('#Search').val();
     var datea = {"whatserach":what}
     //va""r vall = { "searchValue":de }
        //console.log(what);
        if(what.length >-1){
     $.ajax({
        url:"<?php echo $system_url ; ?>/look4.php",
        type:'post',
        data:datea,
        success:function(data){
           //console.log(data);
           $('.found').html(data);

        }

     });}
   });
});

function close_search(){
$('.found').html("");
}
شرحة مشوار بس المهم هو :

PHP:
<?php

$system_url = "." ;

header("Content-type: application/javascript");

?>
السطر الأول تبع المتغير حق رابط الموقع والثاني تبع تحويل الملف .

وهذا الجزء من الكود

JavaScript:
 url:"<?php echo $system_url ; ?>/look4.php",
هذا المسار حق ملف الـ php اللي بايكون فيه عمليات البحث في قاعدة البيانات

وهذا الجزء من الكود

JavaScript:
function close_search(){
$('.found').html("");
}
هذا حق إغلاق مربع النتائج .

طبعاً هذا الكود يعرض لك ناتج عمليات الـphp الذي في ملف look4.php .
يعني انت باتعمل عمليات البحث وبالنهاية باتعرض ناتج، هذا الناتج بينعرض في داخل الكلاس found الذي في الأعلى في كود الـ html .

الآن كود الـ php
( look4.php )

PHP:
<?php
echo"something";
?>
'طبعاً الملف فارغ فقط فيه أمر عرض جملة something .
أنت سوي عمليات الإستخراج من قاعدة البيانات ثم اطبعها بـ echo

إلى هنا إنتهى .

سامحنا على الشرح البدائي لكن أنا علتي من زمان هي توصيل المعلومة .

سوف أرفق الملفات حتى تستطيع تحميلها جاهزة .

بالتوفيق .


تــــحــــمــــيــــل
 

hw11001it

Beginner Developer
rank
إنضم
8 يوليو 2019
المشاركات
9
الإعجابات
3
النقاط
3
العمر
37
مشكور اخوي علي شرحك المفصل ما قصرت بارك الله فيك
لكن الصراحة انا ما فهمت شي
لانه انا لا افهم او اعرف اي شي في برمجة الويب او لغات برمجة الويب
انا فقط كنت اعتفد انه الملفات تكون جاهزة ولا تحتاج تعديل برمجي فقط كنت اتوقع ان يكون الحل بوضع او رفع الملفات في مكان محدد علي الموقع
اعتقد الموضوع صعب تنفيذه بالنسبة لي لعدم معرفتي بلغات البرمجة
ولكن اذا تقدر تساعدني وتقولي اين اضع هذه الملفات او الاكواد البرمجة
ارفعها الي الموقع مثلا او اضعها في كود برمجة html داخل احد صفحات الموقع
او اين بالضبط
شكرا جزيلا اخوي جزاك الله كل خير
 

ZeRo-ErRoR

Beginner Developer
rank
إنضم
10 يناير 2015
المشاركات
107
الإعجابات
77
النقاط
28
العمر
25
الإقامة
عدن
مشكور اخوي علي شرحك المفصل ما قصرت بارك الله فيك
لكن الصراحة انا ما فهمت شي
لانه انا لا افهم او اعرف اي شي في برمجة الويب او لغات برمجة الويب
انا فقط كنت اعتفد انه الملفات تكون جاهزة ولا تحتاج تعديل برمجي فقط كنت اتوقع ان يكون الحل بوضع او رفع الملفات في مكان محدد علي الموقع
اعتقد الموضوع صعب تنفيذه بالنسبة لي لعدم معرفتي بلغات البرمجة
ولكن اذا تقدر تساعدني وتقولي اين اضع هذه الملفات او الاكواد البرمجة
ارفعها الي الموقع مثلا او اضعها في كود برمجة html داخل احد صفحات الموقع
او اين بالضبط
شكرا جزيلا اخوي جزاك الله كل خير
طيب أعمل صفحة php وسميها search.php وضيف فيها الكود هذا :

PHP:
<?php
if(!empty($_POST['whatserach'])){
 $con = mysqli_connect('localhost','id10099747_pro','350324');
    $db = mysqli_select_db($con,'id10099747_search_bar_tutorials');
    $q = addslashes($_POST['whatserach']);     
    $query = mysqli_query($con,"SELECT * FROM products WHERE title LIKE '%$q%' OR description LIKE '%$q%'");
    $num_rows = mysqli_num_rows($query);
echo"<p><strong> $num_rows </strong> results for '$q'</p>";

            while($row = mysqli_fetch_array($query)){
                $id = $row['id'];
                $title = $row['title'];
                $desc = $row['description '];
 
                echo '<h3><a href="' .$id . '.php">' . $title . '</a></h3><p>' . $desc . '</p><br />';
            }
            
              echo 'ff';
              echo '<br />';

// زر إغلاق مربع النتائج تستطيع تغييرة بأيقونة .
              echo '<span onclick="close_search();">close</span>';

            }
        ?>

وبعدين صفحة ال html يعني اما انك تعمل صفحة أو تشل فقط اللي تحتاجة منها

HTML:
<html>
    <head>
        <title>Professional Search Bar</title>

<!-- بداية كود إستدعاء مكتبة الجيكويري -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- نهاية كود إستدعاء مكتبة الجيكويري -->
        
<!-- بداية كود الجافا اللي يخلي المربع يشتغل عند الكتابة ويجلب البيانات من ملف search.php -->       
<script type="text/javascript">
   /* global $ */
$(function (){
   $('#searchBar').keyup(function (){
 
     var what = $('#searchBar').val();
     var datea = {"whatserach":what}
        if(what.length >-1){
     $.ajax({
        url:"search.php",
        type:'post',
        data:datea,
        success:function(data){
           //console.log(data);
           $('.found').html(data);
 
        }
 
     });}
   });
});
    
// إغلاق مربع النتائج
function close_search(){
$('.found').html("");
}
 </script>
<!-- نهاية كود الجافا اللي يخلي المربع يشتغل عند الكتابة ويجلب البيانات من ملف search.php -->           
<style>
#searchBar {
border: 1px solid #000000;
font-size:16px;
padding: 10px;
outline: none;
width: 250px;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
#searchBtn {
border: 1px solid #000000;
font-size: 16px;
padding: 10px;
background: #f1d829;
font-weight: bold;
cursor: pointer;
outline: none;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
border-top-right-radius-radius: 10px;
border-bottom-right-radius: 10px;
}
#searchBtn:hover {
    background: #f6e049;
}
body {
      font-family: arial;
}
h3 {
    margin: 20px 0px 0px 0px;
    padding: 0;
}
p {
    margin: 0;
    padding: 0;
}
a {
    color: #000000;
    text-decoration: underline;
}
    a:hover {
        color: #000000;
        text-decoration: none;
}
</style>
    </head>               
    <body>
<!-- بداية فورم البحث -->   
        <form action="index.php" method="GET">
            <input type="text" name="q" id="searchBar" placeholder="Search..." maxlength="25" autocomplete="off" /> <input type="submit" id="searchBtn" value="Go!" />
        </form>
<!-- نهاية فورم البحث -->   

<!-- بداية مربع النتائج -->
<span class="found" style="width:150px"></span>
<!-- نهاية مربع النتائج -->       
<br>

</body>
</html>
يعني تقدر تشل بس كود الفورم وتحطة في المكان اللي تريدة وكود مربع النتائج برضة .

المهم أي إستفسار بالخدمة

وأعذرنا على التأخير أصلاً ماسك محل ومشغول مع الزبائن كل قليل يجيك زبون ما خلونا افضي لك أخي .

سلام
 

ZeRo-ErRoR

Beginner Developer
rank
إنضم
10 يناير 2015
المشاركات
107
الإعجابات
77
النقاط
28
العمر
25
الإقامة
عدن
عفواً نسيت أضيف هذان السطران حتى يتم دعم إستخراج البيانات باللغة العربية :

PHP:
mysqli_query($con,"set character_set_server='utf8'") ;
mysqli_query($con,"set names 'utf8'") ;
أضفهما بعد سطر تحديد قاعدة البيانات هذا

PHP:
$db = mysqli_select_db($con,'id10099747_search_bar_tutorials');
 

hw11001it

Beginner Developer
rank
إنضم
8 يوليو 2019
المشاركات
9
الإعجابات
3
النقاط
3
العمر
37
بارك الله فيك اخوي ما قصرت
انا عملت الملفين والاكواد
بس وين احط الملفين الحين في الموقع

هذه الملفات اللي انشاتها بناء علي شرحك
new
 

hw11001it

Beginner Developer
rank
إنضم
8 يوليو 2019
المشاركات
9
الإعجابات
3
النقاط
3
العمر
37
بارك الله فيك اخوي ما قصرت
انا عملت الملفين والاكواد
بس وين احط الملفين الحين في الموقع
اقصد كيف افعل نافذة او نموزج البحث علي موقعي ويكون ظاهر في الموقع للزوار
هذه الملفات اللي انشاتها بناء علي شرحك
new
 

ZeRo-ErRoR

Beginner Developer
rank
إنضم
10 يناير 2015
المشاركات
107
الإعجابات
77
النقاط
28
العمر
25
الإقامة
عدن
هذا الموقع اللي انا شغال عليه
https://www.000webhost.com
قصدي ايش هو الموقع اللي أنت تبرمجة يعني وين تشتي تضيف مربع البحث بأيش من قالب أو سكربت إدارة محتوى، قصدي ووردبريس مثلاً أو انت صممت الموقع أو أيش
 

hw11001it

Beginner Developer
rank
إنضم
8 يوليو 2019
المشاركات
9
الإعجابات
3
النقاط
3
العمر
37
قصدي ايش هو الموقع اللي أنت تبرمجة يعني وين تشتي تضيف مربع البحث بأيش من قالب أو سكربت إدارة محتوى، قصدي ووردبريس مثلاً أو انت صممت الموقع أو أيش
ايوا انا صممت الموقع من خلال الاستضافة نفسها
 

ZeRo-ErRoR

Beginner Developer
rank
إنضم
10 يناير 2015
المشاركات
107
الإعجابات
77
النقاط
28
العمر
25
الإقامة
عدن
ايوا انا صممت الموقع من خلال الاستضافة نفسها
هات سكربت الموقع عشان أعدل علية وأضيف البحث فية

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

hw11001it

Beginner Developer
rank
إنضم
8 يوليو 2019
المشاركات
9
الإعجابات
3
النقاط
3
العمر
37
هات سكربت الموقع عشان أعدل علية وأضيف البحث فية

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

ZeRo-ErRoR

Beginner Developer
rank
إنضم
10 يناير 2015
المشاركات
107
الإعجابات
77
النقاط
28
العمر
25
الإقامة
عدن
انتظر حتى تعود الكهرباء للعمل وأقوم بتشغيل الكمبيوتر وارفع الملف للميديا فاير
 

ZeRo-ErRoR

Beginner Developer
rank
إنضم
10 يناير 2015
المشاركات
107
الإعجابات
77
النقاط
28
العمر
25
الإقامة
عدن
بس أنصحك تعمل موقع بإستخدام الووردبريس يكون متجاوب ونظيف وسهل التحكم
 

hw11001it

Beginner Developer
rank
إنضم
8 يوليو 2019
المشاركات
9
الإعجابات
3
النقاط
3
العمر
37
للاسف ما اشتغل اخوي نموزج البحث
عند عمل بحث يعطي خطا 404
انا بحول وورد برس اخوي افضل زي ما قلت لي
ما بدي اغلبك اكثر من هيك
شكرا جزيلا اخوي ما قصرت والله
ربي يحفظك ويبارك لك في عمرك
 

ZeRo-ErRoR

Beginner Developer
rank
إنضم
10 يناير 2015
المشاركات
107
الإعجابات
77
النقاط
28
العمر
25
الإقامة
عدن
للاسف ما اشتغل اخوي نموزج البحث
عند عمل بحث يعطي خطا 404
انا بحول وورد برس اخوي افضل زي ما قلت لي
ما بدي اغلبك اكثر من هيك
شكرا جزيلا اخوي ما قصرت والله
ربي يحفظك ويبارك لك في عمرك
لا عليك أخي الناس لبعضها
إن أردت أن تنتقل إلى الووردبريس فأنصحك بغالب engine فهو مناسب لمجال موقعك وستجد القالب المعرب منة على النت .

بالتوفيق وسامحنا على التقصير .
 

hw11001it

Beginner Developer
rank
إنضم
8 يوليو 2019
المشاركات
9
الإعجابات
3
النقاط
3
العمر
37
لا عليك أخي الناس لبعضها
إن أردت أن تنتقل إلى الووردبريس فأنصحك بغالب engine فهو مناسب لمجال موقعك وستجد القالب المعرب منة على النت .

بالتوفيق وسامحنا على التقصير .
تسلم اخوي ما قصرت والله
ربي يكرمك ويوسع رزقك ويبارك لك في عملك
شكرا جزيلا اخوي
بارك الله فيك
 

الأعضاء النشطين حاليآ الذين يشاهدون هذا الموضوع (1 عضو و 0 ضيف)

خيارات الاستايل

نوع الخط
مودك
اخفاء السايدر بار OFF
توسيط المنتدى OFF
فصل الأقسام OFF
الأقسام الفرعية OFF
عرض المشاركات
حجم الخط
معلومات العضو OFF
إخفاء التوقيع OFF

إرجاع خيارات الإستايل