كيفية بناء تطبيق ويب كامل باستخدام PHP و HTML

تمت الكتابة بواسطة: عبد الحكيم

تارخ آخر تحديث: 18 سبتمبر 2024

محتوى المقال

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

كيفية بناء تطبيق ويب كامل باستخدام PHP و HTML

تعد PHP و HTML من الأدوات الأساسية في بناء تطبيقات الويب الديناميكية. باستخدام PHP، يمكنك إنشاء تطبيقات ويب تتفاعل مع قواعد البيانات وتعرض المعلومات بشكل ديناميكي على صفحات HTML. في هذا المقال، سنتعرف على كيفية بناء تطبيق ويب كامل خطوة بخطوة باستخدام PHP و HTML، بدءًا من إعداد البيئة إلى التعامل مع قواعد البيانات.

الخطوة الأولى: إعداد البيئة

قبل البدء في بناء التطبيق، تحتاج إلى إعداد بيئة تطوير PHP. ستحتاج إلى:

تثبيت PHP على جهازك.
تثبيت خادم ويب مثل Apache أو Nginx.
تثبيت قاعدة بيانات MySQL أو MariaDB.
استخدام أدوات مثل XAMPP أو WAMP التي تجمع كل هذه الأدوات في حزمة واحدة.

استخدام XAMPP

أداة XAMPP هي واحدة من أسهل الطرق لإعداد بيئة تطوير PHP. يمكنك تحميل XAMPP من الموقع الرسمي وتثبيته على جهازك. بعد التثبيت، قم بتشغيل خادم Apache وقاعدة بيانات MySQL.

الخطوة الثانية: إنشاء هيكل المشروع

بعد إعداد البيئة، يمكنك البدء في إنشاء مشروع الويب الخاص بك. ستحتاج إلى إنشاء عدة ملفات لتنظيم المشروع بشكل جيد:

index.php: الصفحة الرئيسية للتطبيق.
db.php: ملف الاتصال بقاعدة البيانات.
styles.css: ملف CSS لتنسيق الصفحات.
create.php: صفحة لإضافة بيانات جديدة إلى قاعدة البيانات.
read.php: صفحة لعرض البيانات المخزنة في قاعدة البيانات.

الخطوة الثالثة: إعداد قاعدة البيانات

لبناء تطبيق ديناميكي، ستحتاج إلى قاعدة بيانات لحفظ البيانات. سنستخدم MySQL في هذا المثال. قم بإنشاء قاعدة بيانات جديدة باستخدام الأوامر التالية في واجهة phpMyAdmin أو في سطر الأوامر:


            CREATE DATABASE webapp;

            USE webapp;

            CREATE TABLE users (

                id INT AUTO_INCREMENT,

                name VARCHAR(100),

                email VARCHAR(100),

                PRIMARY KEY(id)

            );

في هذا المثال، قمنا بإنشاء قاعدة بيانات جديدة باسم "webapp" وجدول باسم "users" يحتوي على الحقول: "id"، "name"، و "email".

الخطوة الرابعة: إنشاء ملف الاتصال بقاعدة البيانات

الخطوة التالية هي إنشاء ملف الاتصال بقاعدة البيانات. سنستخدم ملف db.php للاتصال بقاعدة البيانات MySQL.


            <?php

                $host = 'localhost';

                $user = 'root';

                $pass = '';

                $dbname = 'webapp';



                $conn = new mysqli($host, $user, $pass, $dbname);

                if ($conn->connect_error) {

                    die("Connection failed: " . $conn->connect_error);

                }

            ?>

في هذا الملف، نستخدم mysqli للاتصال بقاعدة البيانات. في حال فشل الاتصال، سيتم عرض رسالة خطأ.

الخطوة الخامسة: إنشاء نموذج إدخال البيانات

الآن، سنقوم بإنشاء صفحة تسمح للمستخدم بإدخال بيانات جديدة في قاعدة البيانات. سنقوم بإضافة نموذج HTML في ملف create.php.


            <form action="create.php" method="POST">

                <label>الاسم:</label>

                <input type="text" name="name" required>



                <label>البريد الإلكتروني:</label>

                <input type="email" name="email" required>



                <button type="submit">إرسال</button>

            </form>

عندما يقوم المستخدم بإدخال البيانات في هذا النموذج، سيتم إرسالها إلى ملف create.php باستخدام طريقة POST.

الخطوة السادسة: معالجة البيانات في PHP

في ملف create.php، سنقوم بكتابة كود PHP لمعالجة البيانات المدخلة وإدخالها في قاعدة البيانات.


            <?php

                include 'db.php';



                $name = $_POST['name'];

                $email = $_POST['email'];



                $sql = "INSERT INTO users (name, email) VALUES ('$name', '$email')";

                if ($conn->query($sql) === TRUE) {

                    echo "تم إدخال البيانات بنجاح!";

                } else {

                    echo "حدث خطأ: " . $conn->error;

                }



                $conn->close();

            ?>

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

الخطوة السابعة: عرض البيانات من قاعدة البيانات

لإنشاء صفحة تعرض البيانات المخزنة في قاعدة البيانات، سنقوم بإنشاء ملف read.php الذي يحتوي على كود لعرض المستخدمين المخزنين في قاعدة البيانات.


            <?php

                include 'db.php';



                $sql = "SELECT * FROM users";

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



                if ($result->num_rows > 0) {

                    while($row = $result->fetch_assoc()) {

                        echo "الاسم: " . $row['name'] . " البريد الإلكتروني: " . $row['email'] . "<br>";

                    }

                } else {

                    echo "لا توجد بيانات لعرضها.";

                }



                $conn->close();

            ?>

يعرض هذا الكود جميع المستخدمين المخزنين في قاعدة البيانات. إذا لم يكن هناك أي بيانات، سيتم عرض رسالة "لا توجد بيانات لعرضها".

الخلاصة

في هذا المقال، قمنا ببناء تطبيق ويب بسيط باستخدام PHP و HTML. تعلمنا كيفية إعداد بيئة تطوير PHP، إنشاء قاعدة بيانات، التعامل مع نماذج HTML، وإدخال وعرض البيانات باستخدام PHP و MySQL. يمكنك توسيع هذا المشروع ليشمل ميزات إضافية مثل تحرير وحذف البيانات، إضافة المصادقة، وغيرها من الميزات الديناميكية.