بناء تطبيق CRUD بسيط بلغة PHP و MySQL

hocine
Hocine G
Back-end Developer (Python/Django)
13/03/2022 |برمجة 💻
بناء تطبيق CRUD بسيط بلغة PHP و MySQL

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

لغة PHP هي من الغات المشهورة و التي تحضى بشهرة و دعم كبير من المجتمع، و تعلمها لا يعتبر شيئا صعبا جدا، في هذا المقال سوف نتعلم كيفية بناء تطبيق ويب يقوم بالعمليات الاساسية مع قاعدة البيانات:
Create - انشاء
Read - قراءة
Update - تحديث
Delete - حذف
و التي هي العمليات الأساسية لمعالجة البيانات في قاعدة البيانات. سوف نقوم بعمل كل منها بال PHP.

المستلزمات

لبدأ بناء تطبيقنا سوف نحتاج الى خادم، في هاذا المقال سوف نستعمل XAMPP و الذي يحتوي على خادم Apache و ايضا MySQL الذي نحتاجه لانشاء قاعدة البيانات و تنفيذ الاوامر الاساسية، و ربطه بالـ PHP. و ايضا سوف نقوم باستعمال Bootstrap لتصميم تطبيقنا بسرعة و جمال.

رابط تحمل XAMPP. سوف نفرض انك على دراية بكيفية تثبيت و تشغيل الادوات الاساسية للبدأ بالعمل مع PHP و MySQL.

انشاء قاعدة البيانات و الجداول

قم بتنفيذ الكود في MySQL لانشاء قاعدة البيانات و انشاء الجدول الضروري  للتطبيق.

-- لانشاء قاعدة البيانات
CREATE DATABASE php_crud
-- لانشاء جدول العمال
CREATE TABLE employees (
    id INT NOT NULL PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(100) NOT NULL,
    address VARCHAR(255) NOT NULL,
    salary INT(10) NOT NULL
);

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

واجهة phpMyAdmin

للمزيد حول MySQL قم بزيارة إدارة قاعدة البيانات MySQL.

 

انشاء ملف config.php للاتصال بخادم قاعدة البيانات MySQL

بعد انشاء الجدول في قاعدة البيانات, الان سوف نحتاج الى سكريبت php للاتصال بخادم قاعدة البيانات و ذلك بانشاء ملف سوف نسميه 'config.php' و نضع الكود الاتي بداخله.

سوف نقوم بتضمين هذا الملف داخل الملفات الاخرى باستعمال require_once()

<?php
    $servername = "localhost";
    $username = "root";
    $password = "";
    $dbname = "php_crud";

    // Create connection
    $conn = new mysqli($servername, $username, $password, $dbname);
    // Check connection
    if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
    }
?>
قم بتغيير اسم المستخدم و كلمة المرور و اسم قاعدة البيانات و ضع المعلومات الخاصة بك.
اذا قمت بتثبيت XAMPP فاسم المستعمل و كلمة السر لخادم MySQL يكون كما في شفرة الـ PHP السابقة (root, كلمة السر فارغة).

 

إنشاء الصفحة الرئيسية

بمجرد ملء جدول الموظفين ببعض السجلات ، ستبدو الصفحة الرئيسية لتطبيقنا CRUD تشبه الصورة الموضحة أدناه:

الصفحة الرئيسية

 

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

 

<!DOCTYPE html>
<html lang="ar" dir="rtl">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" >
  <script src="https://kit.fontawesome.com/927f8205e9.js"></script>
  <title>الصفحة الرئيسية</title>
</head>

<body>
  <?php include 'navbar.php' ?>
  <div class="container text-center">
    <div class="container-fliud m-0">
      <table class="table table-bordered border-primary">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">الاسم</th>
            <th scope="col">العنوان</th>
            <th scope="col">الراتب</th>
            <th scope="col">تعديل/حذف</th>
          </tr>
        </thead>
        <tbody>
          <?php
          require_once "config.php";
          $sql = "SELECT id, name, address, salary FROM employees";
          $result = $conn->query($sql);
          if ($result->num_rows > 0) {
            // output data of each row
            while ($row = $result->fetch_assoc()) {
              echo '<tr>';
              echo '<th scope="row">' . $row["id"] . '</th>';
              echo '<td>' . $row["name"] . '</td>';
              echo '<td>' . $row["address"] . '</td>';
              echo '<td>$' . $row["salary"] . '</td>';
              echo '<th scope="row" class="p-0 align-middle">' . '<a href="./update.php?id=' . $row["id"] . '" class="m-1"><i class="fa-solid fa-user-pen"></i></a> <a href="./delete.php?id=' . $row["id"] . '" class="mb-1"><i class="fa-solid fa-trash-can"></i></a> <a href="./read.php?id=' . $row["id"] . '" class="mb-1"><i class="fa-solid fa-eye"></i></a>' . '</th>';
              echo '</tr>';
            }
          } else {
            echo "0 results";
          }
          $conn->close();
          ?>
        </tbody>
      </table>
      <a type="button" href="./create.php" class="btn btn-primary">اضافة سجل جديد</a>
    </div>
  </div>

</body>

</html>

كما نلاحض في الاعلى يقوم السطر الاول require_once "config.php"; بطلب الملف للاتصال بقاعدة البيانات. ثم نقوم بكتابة سطر امر الـ SQL لي جلب البيانات المتعلقة بالعمال في الجدول 'employees'. ثم نجلب كل مجال بتوفير اسمه مثل 'name', 'id', ...الخ.

 

إنشاء صفحة الإنشاء Create

في هذا الجزء سوف نقوم بانشاء صفحة تقوم بعملية انشاء (Create) السجلات للموضفين.

اضافة سجل - صفحة creat

اولا نقوم بانشاء ملف باسم create.php و نضع فيه الكود الذي بالاسفل.

<?php
  require_once "config.php";
  $fname = $lname = $addr = $salary = "";
  // في حالة وجود خطأ في المدخلات
  $name_err = $addr_err = $salary_err = "";
  // Processing form data when form is submitted
  if($_SERVER["REQUEST_METHOD"] == "POST") {
    // التحقق من الاسم
    if(empty($_POST["fname"]) || empty($_POST["lname"])) {
      $name_err = "من فضلك تحقق من الاسم او اللقب";
    } else {
      $fname = trim($_POST["fname"]);
      $lname = trim($_POST["lname"]);
    }
    // التحقق من العنوان
    if(empty($_POST["addr"])) {
      $addr_err = "من فضلك تحقق من العنوان";
    } else {
      $addr = trim($_POST["addr"]);
    }
    // التحقق من الراتب
    $salary_err = trim($_POST["salary"]);
    if(!empty($salary_err) && is_numeric($salary_err) && $salary_err > 0) {
      $salary = $salary_err;
      $salary_err = '';
    } else {
      $salary_err = "من فضلك تحقق من الراتب";
    }
    // التحقق من المدخلات قبل انشاء السجل في قاعدة البيانات 
    if(empty($name_err) && empty($salary_err) && empty($addr_err)) {
      $f_name = $fname . ' ' . $lname;
      echo $f_name;
      $sql = "INSERT IGNORE INTO employees (name, address, salary) 
      VALUES ('". $f_name ."', '". $addr ."', '" .$salary ."')";
      if ($conn->query($sql) === TRUE) {
        header("location: index.php");
        exit("تم انشاء سجل جديد");
      } else {
        echo "Error: " . $sql . "<br>" . $conn->error;
      }
      
      $conn->close();
    }
  }
?>

كما نلاحض في الكود السابق, اولا نقوم بالتحقق من نوع الـ method بانها POST ثم بعد ذلك نتحقق من ان كل مجال تم كابته حيث يتم ارسال رسالة خطأ اذا كان فارغ باستعمال الدالة empty او ليس رقم في حالة الراتب باستعمال is_numeric().

بعد الانتهاء من ذلك نقوم بالتحقق من ان كل مجالات الخطأ ($name_err, $salary_err, $addr_err) فارغة و هذا يدل على ان كل مجالات الادخال تم ملأها, ليس علينا الان الا اعداد امر الـ SQL لانشاء السجل الجديد في الجدول employee.

 

انشاء صفحة القرائة Read

الصفحة هذه تصهر لنا المعلومات, حيث تقوم بالبحث بال id عن العامل وتحديده.

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

لنقم بانشاء صفحة تقوم بعرض معلومات العامل حسب اختيارنا:

<?php
  if(isset($_GET["id"]) && !empty(trim($_GET["id"]))){
    require_once "config.php";
    $input_id = $_GET["id"];
    $sql = "SELECT * FROM employees WHERE id = ". $input_id;
    $result = $conn->query($sql);
    if ($result->num_rows > 0) {
        $row = $result->fetch_assoc();
        $name = $row["name"];
        $address = $row["address"];
        $salary = $row["salary"];
    } else {
        echo "حدث خطأ";
     }
    $conn->close();
  }
?>
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<script src="https://kit.fontawesome.com/927f8205e9.js" crossorigin="anonymous"></script>
    <title><?php echo $name ?></title>
</head>
<body>
<div class="container text-center" style="text-align:right;">
    <h1 class="p-2"> عرض المعلومات</h1>
    <div class="container m-0" style="text-align: right;">
        <label for="id"><i class="fa-regular fa-id-badge"></i> رقم التعريف</label>
        <input class="form-control m-1" id="id" type="text" value="<?php echo $input_id ?>" disabled readonly>            
        <label for="id"><i class="fa-solid fa-user"></i> الاسم و اللقب</label>
        <input class="form-control m-1" id="name" type="text" value="<?php echo $name ?>" disabled readonly>
        <label for="id"><i class="fa-solid fa-address-card"></i> العنوان</label>
        <input class="form-control m-1" id="address" type="text" value="<?php echo $address ?>" disabled readonly>
        <label for="id"><i class="fa-solid fa-dollar-sign"></i> الراتب</label>       
        <input class="form-control m-1" id="salary" type="text" value="<?php echo $salary ?>" disabled readonly>
    </div>
</div>
</body>
</html>

كما نلاحض قمنا بتحيد تعبير الـ MySQL الذي يقوم بجلب البيانات المرغوب بها من الجدول employee:

$sql = "SELECT * FROM employees WHERE id = ". $input_id;

بعد ذلك بتم تنفيذ الامر ووضع النتائج في المتغير $result:

$result = $conn->query($sql);

يمكننا القيام بالتحقق من ان الاسطر الناتجة اكثر من صفر بالدالة num_rows, تقوم الدالة  fetch_assoc() بوضع النتائج في مجموعة حيث نقوم بقرائتها.

نستعمل الـ while() لقرائة نتائج الدالة السابق ذكرها, لكن في حالتنا نعلم ان الناتج هو سطر واحد للموضف في قاعدة البيانات لذا لا داعي لاستعمال الحلقة while().

 

انشاء صفحة التحديث/التعديل Update

صفحة التحديث سوف يكون شكلها النهائي هكذا:

تحديث معلومات العمال

سوف نقوم بانشاء صفحة تمكننا من تحديث معلومات العمال, اولا نقوم بانشاء ملف update.php.

<?php
  require_once "config.php";
  $fname = $lname = $addr = $salary = "";
  // في حالة وجود خطأ في المدخلات
  $name_err = $addr_err = $salary_err = "";

  if(isset($_POST["id"]) && !empty($_POST["id"])) {
    $id = $_POST["id"];
    // التحقق من الاسم
    if(empty($_POST["fname"]) || empty($_POST["lname"])) {
      $name_err = "من فضلك تحقق من الاسم او اللقب";
    } else {
      $fname = trim($_POST["fname"]);
      $lname = trim($_POST["lname"]);
    }
    // التحقق من العنوان
    if(empty($_POST["addr"])) {
      $addr_err = "من فضلك تحقق من العنوان";
    } else {
      $addr = trim($_POST["addr"]);
    }
    // التحقق من الراتب
    $salary_err = trim($_POST["salary"]);
    if(!empty($salary_err) && is_numeric($salary_err) && $salary_err > 0) {
      $salary = $salary_err;
      $salary_err = '';
    } else {
      $salary_err = "من فضلك تحقق من الراتب";
    }
    // التحقق من المدخلات قبل انشاء السجل في قاعدة البيانات 
    if(empty($name_err) && empty($salary_err) && empty($addr_err)) {
      $f_name = $fname . ' ' . $lname;
      $sql = "UPDATE employees SET name='". $f_name."', address='". $addr ."', salary='". $salary ."' WHERE id='". $id ."';";
      if ($conn->query($sql) === TRUE) {
        header("location: index.php");
        exit("تم انشاء سجل جديد");
      } else {
        echo "Error: " . $sql . "<br>" . $conn->error;
      }
      
      $conn->close();
    }
  } else {
    if(isset($_GET["id"]) && !empty(trim($_GET["id"]))){
      $id =  trim($_GET["id"]);
      $sql = "SELECT * FROM employees WHERE id = '". $id ."';";
      $result = $conn->query($sql);
      if ($result->num_rows > 0) {
          $row = $result->fetch_assoc();
          $f_name = $row["name"];
          $name_arr = explode(" ", $f_name);
          $fname = $name_arr[0];
          $lname = '';
          for ($x = 1; $x < count($name_arr); $x++) {
            $lname = $lname ." ". $name_arr[$x];
          } 
          $addr = $row["address"];
          $salary = $row["salary"];
      } else {
          echo "حدث خطأ";
       }
      $conn->close();
    }
  }
?>
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
  <title>تحديث <?php echo $f_name ?></title>
  <style>
    input {
      text-align: right;
    }
  </style>
</head>
<body>
<?php include 'navbar.php' ?>
    <div class="container text-center">
        <h1 class="">تحديث</h1>
        <div class="container border">
            <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="POST">
              <div class="input-group p-3">
                <span class="input-group-text">الاسم و اللقب</span>
                <input type="text" name="fname" value="<?php echo $fname ?>" aria-label="الاسم" placeholder="الاسم" class="form-control <?php echo (!empty($name_err) ? 'is-invalid' : '');?>">
                <input type="text" name="lname" value="<?php echo $lname ?>" aria-label="اللقب" placeholder="اللقب" class="form-control <?php echo (!empty($name_err) ? 'is-invalid' : '');?>">
                <span class="invalid-feedback"><?php echo $name_err;?></span>
              </div>
              <div class="input-group p-3">
                <span class="input-group-text">العنوان</span>
                <input type="text" name="addr" value="<?php echo $addr ?>" aria-label="العنوان" placeholder="العنوان" class="form-control <?php echo (!empty($addr_err) ? 'is-invalid' : '');?>">
                <span class="invalid-feedback"><?php echo $addr_err;?></span>
              </div>
              <div class="input-group p-3">
                <span class="input-group-text">الراتب</span>
                <input name="salary" value="<?php echo $salary ?>" aria-label="الراتب" placeholder="الراتب" class="form-control <?php echo (!empty($salary_err) ? 'is-invalid' : '');?>">
                <span class="invalid-feedback"><?php echo $salary_err;?></span>
              </div>
              <input type="submit" class="btn btn-success mb-3" value="تحديث">
              <input type="hidden" name="id" value="<?php echo $id; ?>"/>
              <a href="./index.php" class="btn btn-primary mb-3">الغاء</a>
              <?php

              ?>
            </form>
          </div>
    </div>
</body>

</html>

 

انشاء صفحة الحذف Delete

قبل حذف سجل ما نقوم بالتأكد من استمرار العملية لتفادي اي حذف بالخطأ:

صفحة الحذف

و اخيرا نقوم بانشاء صفحة الحذف التي تقوم بحذف سجل ما من قاعدة البيانات’ نقوم بانشاء ملف نسميه delete.php و نضع فيه الكود التالي:

<?php
if (isset($_POST["id"]) && !empty($_POST["id"])) {
    require_once "config.php";
    $id = $_POST["id"];
    $sql = "DELETE FROM employees WHERE id= '" . $id . "';";
    if ($conn->query($sql) === TRUE) {
        header("location: index.php");
        exit();
    } else {
        echo "Error deleting record: " . $conn->error;
    }
    $conn->close();
} else {
    if (empty(trim($_GET["id"]))) {
        header("location: error.php");
        exit();
    }
}
?>
<!DOCTYPE html>
<html lang="ar" dir="rtl">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<script src="https://kit.fontawesome.com/927f8205e9.js"></script>
    <title>حذف</title>
</head>

<body>
<?php include 'navbar.php' ?>
 <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="POST">
    <div class="alert alert-danger">
        <input type="hidden" name="id" value="<?php echo trim($_GET["id"]); ?>" />
        <p>هل انت متأكد من حذف هذا السجل؟</p>
        <p>
         <input type="submit" value="نعم" class="btn btn-danger">
         <a href="index.php" class="btn btn-secondary ml-2">لا</a>
        </p>
    </div>
  </form>
</body>

</html>

هنا نقوم بحذف العامل بتحديد رقم الـ id الموجود في قاعدة البيانات الخاص به. اذا لم يتم توفير رقم الـ id سوف يتم اعادة التوجيه الى صفحة الخطأ error.php.

 

انشاء صفحة الخطأ error.php

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

صفحة الخطأ - error page

كود الصفحة بسيط, يحتوي فقط على رسالة خطأ و رابط الى الصفحة الرئيسية:

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<script src="https://kit.fontawesome.com/927f8205e9.js"></script>
  <title>حدث خطأ</title>
</head>
<body>
<?php include 'navbar.php' ?>
  <div class="container alert alert-danger">
      <h1>حدث خطأ</h1>
      <a href="./index.php">العودة الى الصفحة الرئيسية</a>
  </div>
</body>
</html>

 

الان قمنا بانهاء مشروع تطبيق CRUD بلغة البرمجة PHP, اتمنى ان يكون الشرح مفهوم.

يمكنك تحميل المشروع كامل من Github هنا.

لا تتردد في ترك تعليق على الموضوع, سوف يسعدنا ذلك.

تذكر أن المساهمات في هذا الموضوع يجب أن تتبع إرشادات المجتمع.

التعليقات:

    لا توجد تعليقات بعد.