قواعد البيانات mysql : اجراء اتصال بواسطة PHP

متطلبات تشغيل قواعد البيانات mysql

تخضع خوادم الويب لواحدة أو أكثر من الخطوات التي تتيح لنا الوصول إلى mysql أيا كانت أنظمة التشغيل , وقد تختلف بعض الخطوات في تفعيلها على الخادم. أما في حال كنت تعمل على نظام ويندوز فإن الأمر متاحًا عبر الواجهات الرسومية.

أما في حال العمل على أنظمة Linux فإن ذلك يتطلب منا بعض المهارات في تنصيب بيئة عمل الخادم.

• تنصيب خادم Apache على نظام التشغيل أو أي خادم يتوافق مع بيئة mysql.
• إتقان لغة PHP ومهاراتها الأساسية.
• الإلمام بعض الجوانب بلغة SQL.

الدخول الى phpMyAdmin

من المستحسن العمل على لوحة phpMyAdmin بدلاً من الاتصال بقواعد البيانات mysql عبر شاشة الكونسول. حيث أن في ذلك واجهة تصميم جيدة تستطيع من خلالها إضافة وإلغاء بعض الجداول العلائقية.

بالتالي سنعمل على الدخول إلى المضيف المحلي الخاص بنا في هذا الدرس بدلاً من الدخول لملفات مشاريع appserver وعند كتابة العنوان http://localhost أو عنوان 127.0.0.1 ستظهر لنا واجهة قواعد البيانات كما في الشكل التالي: 

 قم باختيار Database Manager ويأخذك المتصفح إلى صفحة تسجيل الدخول وهي اسم المستخدم الافتراضي root وكلمة المرور في حال قمت بتعيينها أثناء تنصيب خادم Appserv.

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

إضافة قواعد البيانات mysql

سنذهب إلى خانة SQL وهي المحرر الذي يتم من خلاله الاستعلام والإضافة والحذف والتعديل في قواعد البيانات , بالتالي سنعمل إلى إضافة قاعدة بيانات باسم con_tut كما في الصورة التالية:

نعمل على نسخ الشيفرة التالية في محرر SQL لكي نتمكن من إضافة قاعدة بيانات جديدة:

CREATE DATABASE con_tut;

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

على سبيل المثال سوف نعمل على إضافة جدول مكون من ثلاثة حقول وهي id و username و email.

بالتالي نقم بتظليل قاعدة البيانات على يسار الشاشة ثم نعمل على فتح واجهة SQL. صورة يظهر فيها عملية الدخول إلى قاعدة البيانات وفتح محرر SQL.

ومع ذلك تستطيع إضافة الجداول إما عن طريق واجهة Structure أو عن طريق إضافة بعض الأوامر في لغة SQL بالتالي سنستخدم سطور الشيفرة التالية بدلاً من ذلك:

CREATE TABLE data_db(
                        id  integer PRIMARY KEY AUTO_INCREMENT,
                        username  VARCHAR (250),
                        email   VARCHAR (250)
                    );

نلاحظ أن حقل id يجب أن يتضمن رقمية تلقائية للعناصر في الجدول , بالتالي يجب أن يحتوي على خاصية PRIMARY KEY. على سبيل المثال , فإن الجداول في قواعد البيانات mysql يجب أن تحتوي على أرقام تسلسلية فريدة في الذاكرة لكي يتم الوصول لعناصرها.    

إضافة العناصر للجداول

نستطيع إضافة عناصر الجدول إما عن طريق واجهة Structure يدويًا أو عبر سطور الشيفرة ويمكن إضافة بيانات متعددة وعشوائية , بالتالي نقوم  بملئ حقول بيانات مستخدمين وهمية في الشيفرة التالية:

INSERT INTO data_db (username, email)
values ('Salma','salma@mail.com') , ('Ahmad' , 'ahmad@mail.com'), ('Mutawe' , 'mutawe@mail.com'), ('Mohammed' , ''mohamed@mail.com') , 
       ('Hanan','hanan@mail.com') , ('Lama' , 'lama@mail.com'), ('Salem' , 'salem@mail.com'), ('Medhat' , 'medhat@mail.com')

عند النظر إلى الصورة التالية نلاحظ أن هناك عملية إدخال بيانات ناجحة عبر الشيفرة , بالرغم من أن بعض إصدارات اللغة تتطلب منك التغيير في قواعد Syntax أثناء إضافة العناصر وذلك بسبب بعض الفروقات ولكن تستطيع البحث عبر الويب عن الحلول الممكنة.

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

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

إنشاء الاتصال عبر لغة PHP

سنعمل على إضافة صفحة خاصة بعملية الاتصال بقواعد البيانات باسم connection.php وهي التي تمكننا من الوصول إلى جدول data db. بالتالي نقوم بإنشاء صفحة اتصال بلغة PHP وتضمينها بصفحة index.php والمساعدة في إنشاء صفحات PHP.

<?php

//connection.php

$dbname= "con_tut";

$connect = mysqli_connect("localhost" ,"root" ,"" , $dbname);

if(!$connect){
die ("connect error".mysqli_error());
}
else{
echo " <div style='text-align: center; font-size: 30px; background: #FFFFF0;'> You have successfully connected to $dbname </div>";

}

echo "<br/>";

?>

نلاحظ أننا نقوم بعمل اتصال بحساب root وفي حال قمت بتهيئة حساب قواعد البيانات دون كلمة مرور , فتستطيع الدخول دون الإشارة إليه. أما إن تعذرت عملية الاتصال يجب إدخال كلمة المرور والتأكد من أن حسابك يعمل على صفحة localhost الخاصة بالخادم.

يمكنك التحقق من نجاح الاتصال بقواعد البيانات عن طريق زيارة صفحة connection.php بالمتصفح. ولكي نتمكن من زيارتها يتعين علينا وضع العنوان http://localhost/tutorial/connection.php في شريط المتصفح. بالتالي ستظهر احدى الرسالتين الواردة في الكود السابق.  

 إن تعذر منك الوصول لصفحة الخادم , نتأكد من اسم المشروع الذي أنشأنا به صفحاتنا وفي حالتنا هنا , قد تم العمل بمشروع tutorial الذي قمنا باستخدامه في دورة PHP.

يجب تضمين ملفات صفحة connection.php داخل صفحة index.php والتي تستطيع نسخها من الشيفرة التالية , بالتالي تأكد دائما إدراكك لعمليات تضمين الصفحات قبل الاستمرار بهذا الشرح.

<?php

//index.php

include "connection.php";


$sql = "SELECT * FROM `data_db`";
$run = mysqli_query($connect , $sql);


?>
<table border="1">
<tr>
<td width="100px" align="center">Username</td>
<td width="300px" align="center">Email</td>

</tr>
</table>
<?php

while($data = mysqli_fetch_assoc($run)) {
?>
<table border="1">
<tr>
<td width="100px"><?php echo $data['username']; ?></td>
<td width ="300px"><?php echo $data['email']; ?></td>


</tr>
</table>


<style>
td   {
background-color: #fffff0;
}

table{
margin:1px auto;
}
</style>

<?php
}

?>

نعتبر أن جملة الاستعلام SELECT هي مفتاح عمل الشيفرة السابقة وهي إحدى مهام لغة SQL التي تمكن المستخدم من الوصول إلى بيانات الخادم. بالتالي قد يتساءل الكثيرون عن مهام قواعد البيانات mysql ولماذا يجب على المشاريع الكبيرة امتلاكها؟.

على سبيل المثال , فإن قواعد البيانات تساعد المستخدمين على إنشاء صفحات وبيانات ديناميكية دون تدخل مباشر من المبرمج . بالتالي يتم جلبها عند الحاجة بواسطة خوارزميات مخزنة مسبقًا, فلنا أن نتخيل بعض المواقع الإلكترونية التي تمكننا من امتلاك حساباتنا الخاصة دون التأثير على بقية المستخدمين.

التفاعل مع البيانات

توفر لك تقنيات الويب التفاعل مع بيانات الصفحة عبر لغاتٍ متعددة , على سبيل المثال لو قمنا بعرض البيانات القادمة من قواعد البيانات mysql ووضعها في وسم HTML خاص , فإن ذلك ممكنًا.

مع ذلك فإننا نستطيع القيام بهذا الإجراء عبر لغة جافا سكريبت باستخدام خصائص DOM.

حققت جافا سكريبت تقدم كبير في عالم الويب , فهي تسمح لك بإظهار محتويات مرادفة على الصفحة دون عمل تحديث للمتصفح. على سبيل المثال نعتبر التعليقات على المنشورات واضافة أي حدث على الشاشة واحدا من خصائصها.

يتسنى لنا الآن إجراء عدد من التحديثات على الشيفرة الخاصة بنا في صفحة index.php , حيث يستطيع المستخدم النقر على حقول الجدول.

سيودي ذلك إلى التغيير بقيمة وسوم HTML والتي سنعمل على اضافتها والوصول إليها عبر معرفات id. بالتالي ستحتوي هذه الوسوم على عنوان id من قواعد البيانات mysql ومن الجدول الذي قمنا بإنشائه. بالإضافة أننا سنتمكن من طباعة حقول username او email.  

دمج اللغات

تلعب لغة جافا سكريبت دور هام في السيطرة على صفحات الويب , وقد بدى ذلك واضحًا أثناء تفاعلها مع قواعد البيانات mysql وقيمها الخاصة , فهي بدورها توفر للمبرمجين وسائل أكثر حرفية في جلب البيانات وإجراء طلبات ناجحة للخادم.

ستجد بعض التحديثات على شيفرة index.php حيث قمنا بتمرير قيم PHP من دالة تابعة لجافا سكريبت أثناء حصر شيفرة mysql. وذلك مع إجراء تحويل بسيط لجعل كافة اللغات تدرك ما الذي نحاول الوصول إليه.

<?php

//index.php


include "connection.php";


$sql = "SELECT * FROM `data_db`";
$run = mysqli_query($connect , $sql);




while($data = mysqli_fetch_assoc($run)) {

$values ='
<table  border="1">
        <tr id = '.$data['id'].'>
            <td onclick="doSelect(''.$data['id'].'' , ''.$data['username'].'' ,  ''.$data['email'].'');" width="100px"> '.$data['username'].' </td>
            <td onclick="doSelect(''.$data['id'].'' , ''.$data['username'].'' ,  ''.$data['email'].'');" width ="300px">'.$data['email'].'</td>


        </tr>
    </table>
   

';

echo $values;


}

?>

<br><br><br><br>

<table border="2">
    <tr>
        <td  width="100px" align="center">ID</td>
        <td  width="100px" align="center">Username</td>
        <td  width="300px" align="center">Email</td>
    </tr>
    <tr>
        <td id="dataId" class="td" width="100px" align="center"></td>
        <td id="dataUsername" class="td" width="100px" align="center"></td>
        <td id="dataEmail" class="td" width="300px" align="center"></td>
    </tr>

</table>

<script>

    function doSelect(id , username , email)
    {
        document.getElementById("dataId").innerHTML =" " +
            "<td> " + id + " </td> ";
        document.getElementById("dataUsername").innerHTML ="" +
            "<td> "+username+" </td> ";
        document.getElementById("dataEmail").innerHTML ="" +
            "<td> "+email+" </td> " +
            "";
    }
</script>


<style>

    .td{
        background-color: #ff442e;
        color: ivory;
        padding: 4px;
        font-size: 20px;
        width: 80px;
    }

    td   {
        background-color: #fffff0;
        cursor: pointer;
    }

    table{
        margin:1px auto;
    }
</style>

 بالتالي ستجد أن الشيفرة السابقة ليست سوى دمج منطقي ويقبل العمل في لغات تطوير الويب. لقد قمنا بالاتصال بدالة قمنا بتعريفها مسبقًا في لغة جافا سكريبت.

 وذلك عن طريق الأمر onclick , ونجحنا بتمرير متغيرات PHP من حلقة While التكرارية مصحوبًا معها حقول من قواعد البيانات mysql.

بالتالي سيتم التعامل مع متغيرات PHP على أنها قيم صحيحة في لغة جافا سكريبت. وتفيد الدالة doSelect عملية إنشاء حدث عند النقر على إحدى عناصر الجدول ليتم حينئذ تجميع القيم بوسوم HTML وارسالها إلى صفحة الويب أمام المستخدم.

على سبيل المثال , سيتم التبديل بين المتغيرات عند النقر على أي حقل في الجدول. ولو نظرنا إلى مخرجات أحداث جافا سكريبت , سنجد أنها قيم id من جدول data db و قيم username و email. بذلك نتجت عملية جلب البيانات من خلال الاتصال بقاعدة البيانات con_tut. ليصبح ناتج الشاشة كالتالي:

إن ما يعيب عملية دمج اللغات هو صعوبة تمرير المتغيرات بين أكثر من لغة ببعض الأحيان , وقد تظهر بعض الأخطاء عند تحديث الخادم أو إصدارات PHP على وجه خاص. لكن هذه الطريقة هي بدورها الأكثر عملية في بناء صفحات الويب التفاعلية.  

صفحات طلب الخادم Request

لا يقف الأمر عند جلب البيانات فحسب , فقد وفرت لك لغات الويب عمليات طلب الخادم عند وقوع الأحداث بمتصفح الويب , بالتالي نعتبر أن عملية طلب الخادم بواسطة أحداث جافا سكريبت هي الأكثر عملية في هذا الدور بالرغم من إمكانية الطلب عبر submit في PHP.

نعتبر قنوات اتصال جافا سكريبت إحدى عمليات الاستعانة المشهورة , بالتالي تستطيع طلب الخادم بواسطة جافا سكريبت , ليس للتخلي عن قدرات PHP بل للخروج من قواعد Submit التي يتم فرضها عند وسوم Form بلغة HTML.

وبالتالي للقيام بتلك المهمة يتطلب ذلك إضافة حقلين تمكن المستخدم من إدخال البيانات إلى جدول data db.

وهما اسم المستخدم والبريد الإلكتروني وعند النقر على زر Save Data سيتم فتح قناة اتصال مع الخادم والتأثير بقاعدة البيانات mysql. نقم بإضافة وسوم عملية الإدخال في السطر 52 من صفحة index.php , لتصبح الوسوم بالشكل التالي:

<br>

<div style="text-align: center;">
    <input id="username" placeholder="Enter Your Name"/>
    <input id="email" placeholder="Enter Your Email"/>
    <button onclick="insertData();">Save Data</button>
</div>

تتحقق عملية الاتصال بلغة جافا سكريبت عند تعريف متغير يرجع دالة XMLHttpRequest. حيث تعمل هذه الدالة على إرسال البيانات إلى صفحة الخادم . سنعمل على إضافة صفحة server.php من أجل تحقيق الاتصال بقواعد البيانات mysql.

لن ننسى دالة insertData التي قمنا بطلبها عند إضافة الوسوم , لذا سنعمل على تعريفها في المكان المخصص بـ كود جافا سكريبت. بالتالي يتعين لنا نسخ الشيفرة التالية في السطر 75 من صفحة index.php أو في أي مساحة خاصة بشيفرة جافا سكريبت.

function insertData()
   {
     var username= document.getElementById("username").value;
     var email = document.getElementById("email").value;


     if((username && email != null) && (email && username  != null))
     {
         var xhr = new XMLHttpRequest();

         xhr.onreadystatechange = function(){
             if(xhr.readyState == 4 && xhr.status == 200){
                 
             }
         }
         xhr.open("POST" , "server.php?username=" + username + "& email ="+ email , true);
         xhr.send();
     }
     else
     {
         alert("You Should Insert Data Before!!");
     }

   }

في حال وجدت صعوبة تحليل الشيفرة السابقة فلا تقلق, فإنها دالة مكونة من احتمالين وهما , التقديم عند تعبئة البيانات وإظهار رسالة خطأ للمستخدم في حال لم يتم ملئ الحقول كاملة. وعند مليء الحقول سيذهب بنا تنفيذ الشرط إلى دالة xhr طلب الخادم.

عند فتح قناة الاتصال , قمنا بإرفاق قيم string التي قام المستخدم بتعبئتها في الحقول وذهبنا بها إلى صفحة server.php. في حال كنت مبتدئًا ندعوك إلى نسخ الشيفرة و الاستمرار بالقراءة وستبدو المسألة واضحة شيئا فشيئًا.  

صفحة الخادم server.php

  صفحة الخادم تفيد باستقبال البيانات القادمة من قناة xhr. وهي قيم ومتغيرات تم جلبها من وسوم إدخال HTML وذلك أثناء تفاعل العميل معها.  بالتالي فإننا نسعى الآن للوصول إلى قواعد البيانات mysql ومن ثم ادخال القيم إلى حقول جدول data db.

سنقوم بنسخ الشيفرة التالي بصفحة server.php لتصبح كالتالي:

<?php

//server.php

include "connection.php";

 $username =  $_REQUEST['username'];
 $email = $_REQUEST['email'];


$sql = "INSERT INTO `data_db` (`username` , `email`)
                                                 VALUES ('$username'  ,'$email'  );";
mysqli_query($connect, $sql);

تذكر دائما أن تقوم بتضمين صفحة قواعد البيانات mysql في جميع صفحاتك , حيث أن الاتصال بقواعد البيانات لن يعمل دونها.

أما الآن وعند زيارة المتصفح وإدخال البيانات مع النقر على Save Data ستجد أن البيانات المرفقة تم إدخالها بنجاح. وتستطيع التحقق من ذلك عبر تحديث المتصفح ورؤية القيم الجديدة في الجدول.

لكن ماذا لو أردنا ظهور القيمة فورًا قبل إرسالها إلى قواعد البيانات ؟ , بالتالي سنعمل على تضمين القيم بوسوم الجدول وذلك في الدالة insertData. سنعمل على إضافة معرف id لوسم الجدول الرئيسي , ومن ثم نقم بإضافة القيمة mainData.

ويمكنك إضافة أي معرف شريطة أن لا يتعارض مع أي معرف آخر بالصفحة. ثم سنعمل على الوصول لهذا المعرف من خلال دالة insertData وإضافة عنصر جديد عند النقر على Save Data.

الشيفرة كاملة

بعد اتمامك للدورة الحالية , تستطيع الحصول على شيفرة المشروع. ندعوك إلى نسخ كافة محتويات الصفحات التالية ومن ثم تطبيقها في متصفحك:

<?php

//connection.php

$dbname= "con_tut";

$connect = mysqli_connect("localhost" ,"root" ,"" , $dbname);

if(!$connect){
    die ("connect error".mysqli_error());
}
else{
    echo "  <div style='text-align: center; font-size: 30px; background: #FFFFF0;'> You have successfully connected to  $dbname  </div>";

}

echo "<br/>";

?>

<?php

//server.php

include "connection.php";

 $username =  $_REQUEST['username'];
 $email = $_REQUEST['email'];


$sql = "INSERT INTO `data_db` (`username` , `email`)
                                                 VALUES ('$username'  ,'$email'  );";
mysqli_query($connect, $sql);

<?php

//index.php


include "connection.php";


$sql = "SELECT * FROM `data_db`";
$run = mysqli_query($connect , $sql);




while($data = mysqli_fetch_assoc($run)) {

$values ='
<table id="mainData"  border="1">
        <tr>
            <td  onclick="doSelect(''.$data['id'].'' , ''.$data['username'].'' ,  ''.$data['email'].'');" width="100px"> '.$data['username'].' </td>
            <td  onclick="doSelect(''.$data['id'].'' , ''.$data['username'].'' ,  ''.$data['email'].'');" width ="300px">'.$data['email'].'</td>


        </tr>
    </table>
   

';

echo $values;


}

?>

<br><br><br><br>

<table border="2">
    <tr>
        <td  width="100px" align="center">ID</td>
        <td  width="100px" align="center">Username</td>
        <td  width="300px" align="center">Email</td>
    </tr>
    <tr>
        <td id="dataId" class="td" width="100px" align="center"></td>
        <td id="dataUsername" class="td" width="100px" align="center"></td>
        <td id="dataEmail" class="td" width="300px" align="center"></td>
    </tr>

</table>
<br>

<div style="text-align: center;">
    <input id="username" placeholder="Enter Your Name"/>
    <input id="email" placeholder="Enter Your Email"/>
    <button onclick="insertData();">Save Data</button>
</div>

<script>

    function doSelect(id , username , email)
    {
        document.getElementById("dataId").innerHTML =" " +
            "<td> " + id + " </td> ";
        document.getElementById("dataUsername").innerHTML ="" +
            "<td> "+username+" </td> ";
        document.getElementById("dataEmail").innerHTML ="" +
            "<td> "+email+" </td> " +
            "";
    }
    // document.getElementById("tst").innerHTML=xhr.responseText;


    function insertData()
    {
      var username= document.getElementById("username").value;
      var email = document.getElementById("email").value;


      if((username && email != null) && (email && username  != null))
      {
          var xhr = new XMLHttpRequest();

          xhr.onreadystatechange = function(){
              if(xhr.readyState == 4 && xhr.status == 200){

                  document.getElementById("mainData").innerHTML +="" +
                      "<td> "+username+" </td> <td> "+email+" </td> ";
              }
          }
          xhr.open("POST" , "server.php?username="+ username +"& email="+email , true);
          xhr.send();
      }
      else
      {
          alert("You Should Insert Data Before!!");
      }

    }


</script>


<style>

    .td  {
        background-color: #ff442e;
        color: ivory;
        padding: 4px;
        font-size: 20px;
        width: 80px;
    }

    td   {
        background-color: #fffff0;
        cursor: pointer;
    }

    table{
        margin:1px auto;
    }
</style>

مزايا إضافيّة مع SQL

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

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