إنشاء نظام تسجيل الدخول باستخدام PHP و MySQL و HTML

الدروس التعليمية
MySQL PHP

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

إدارة أنظمة المؤسسات والأمان | التسجيل في الدورة المجانية*

*رابط الشراكة. انظر شروط الاستخدام.

هذا البرنامج التعليمي يتكون من 5 أجزاء.

جدول المحتويات

  1. المتطلبات
  2. نظام التسجيل
  3. نظام تسجيل الدخول
  4. صفحة الترحيب
  5. نص تسجيل الخروج

1) المتطلبات لبناء نظام تسجيل دخول PHP

لكي تتبع هذا البرنامج التعليمي بنجاح وتقوم ببناء نظام تسجيل الدخول باستخدام PHP، يجب أن تكون لديك وتكون ملمًا بالأمور التالية:

  • خادم يدعم PHP لتشغيل الشفرة الخاصة بك
  • معرفة وملم بـ HTML و CSS
  • قاعدة بيانات MySQL مثبتة على جهازك، والمعرفة بكيفية استخدامها
  • القدرة على إضافة جميع التدابير الأمنية الصحيحة على نظام تسجيل الدخول الخاص بك

إذا كانت لديك جميع هذه المتطلبات الأساسية والمعرفة، فإنك جاهز للمتابعة إلى الخطوات التالية لاستكشاف كيفية بناء نظام تسجيل دخول PHP الخاص بك.

2) بناء نظام التسجيل

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

الخطوة 1: إنشاء نموذج تسجيل في HTML

سنقوم بإنشاء ملف PHP يحمل اسم register.php بالكود التالي فيه. هذا نموذج HTML بسيط مع بعض التحقق الأساسي. إذا لم تكن ملمًا بـ HTML يمكنك الحصول عليه من العديد من المواقع عبر الإنترنت التي تقدم نماذج جاهزة لنماذج تسجيل الدخول html5.

HTML

  

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Sign Up</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h2>Register</h2>
                    <p>Please fill this form to create an account.</p>
                    <form action="" method="post">
                        <div class="form-group">
                            <label>Full Name</label>
                            <input type="text" name="name" class="form-control" required>
                        </div>    
                        <div class="form-group">
                            <label>Email Address</label>
                            <input type="email" name="email" class="form-control" required />
                        </div>    
                        <div class="form-group">
                            <label>Password</label>
                            <input type="password" name="password" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label>Confirm Password</label>
                            <input type="password" name="confirm_password" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <input type="submit" name="submit" class="btn btn-primary" value="Submit">
                        </div>
                        <p>Already have an account? <a href="login.php">Login here</a>.</p>
                    </form>
                </div>
            </div>
        </div>    
    </body>
</html>

سيبدو ناتج النموذج HTML أعلاه كالتالي.

Sign Up

جميع حقول الإدخال مطلوبة عن طريق إضافة السمة "مطلوب" وهي السمة الافتراضية لـ HTML. استخدام type="email" سيقوم بالتحقق من عنوان البريد الإلكتروني الذي يقدمه المستخدمون ويعطي خطأ إذا كان العنوان غير صالح. لنموذج التسجيل، قمنا باستخدام bootstrap للتطوير السريع. إذا كنت ترغب في توفير وقتك في كود HTML يمكنك دائمًا استخدام بعض نماذج HTML5 مجانية لمشروعك.

الخطوة 2: إنشاء جدول قاعدة البيانات MySQL

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

MySQL

  

CREATE TABLE `users` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `name` varchar(75) NOT NULL,
  `password` varchar(255) NOT NULL,
  `email` varchar(100) NOT NULL,
  PRIMARY KEY (`id`),
  UNIQUE KEY `email` (`email`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=1;

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

الآن، لقد قمنا بإنشاء جدول المستخدمين. دعنا ننشئ ملف PHP جديد يسمى config.php للاتصال بقاعدة بيانات MySQL. الصق الكود التالي في ملف config.php وقم بتغيير اسم قاعدة البيانات إلى ما تختاره أثناء إنشاء قاعدة البيانات.

PHP

 

الخطوة 4: إنشاء ملف جلسة

دعنا ننشئ ملفًا يسمى session.php. في هذا الملف، سنبدأ الجلسة ونتحقق مما إذا كان المستخدم قد سجل الدخول بالفعل، إذا كان كذلك، سنقوم بإعادة توجيه المستخدم إلى ملف welcome.php.

PHP

 

الخطوة 5: إنشاء نموذج تسجيل في PHP

وأخيرًا، حان الوقت لإنشاء كود PHP يسمح للمستخدمين بتسجيل حساباتهم في النظام. سيقوم هذا الكود بتنبيه المستخدمين بخطأ إذا كان أي مستخدم مسجل بالفعل بنفس عنوان البريد الإلكتروني.

استبدل الكود التالي في ملف register.php.

PHP

  

prepare("SELECT * FROM users WHERE email = ?")) {
        $error = '';
        // ربط المعلمات (s = سلسلة، i = رقم صحيح، b = تدفق بيانات، وما إلى ذلك)، في حالتنا اسم المستخدم هو سلسلة لذلك نستخدم "s"
	$query->bind_param('s', $email);
	$query->execute();
	// تخزين النتيجة حتى نتمكن من التحقق مما إذا كان الحساب موجودًا في قاعدة البيانات.
	$query->store_result();
        if ($query->num_rows > 0) {
            $error .= '
The email address is already registered!
';
        } else {
            // التحقق من صحة كلمة المرور
            if (strlen($password ) < 6) {
                $error .= '
Password must have atleast 6 characters.
';
            }

            // التحقق من تأكيد كلمة المرور
            if (empty($confirm_password)) {
                $error .= '
Please enter confirm password.
';
            } else {
                if (empty($error) && ($password != $confirm_password)) {
                    $error .= '
Password did not match.
';
                }
            }
            if (empty($error) ) {
                $insertQuery = $db->prepare("INSERT INTO users (name, email, password) VALUES (?, ?, ?);");
                $insertQuery->bind_param("sss", $fullname, $email, $password_hash);
                $result = $insertQuery->execute();
                if ($result) {
                    $error .= '
Your registration was successful!
';
                } else {
                    $error .= '
Something went wrong!
';
                }
            }
        }
    }
    $query->close();
    $insertQuery->close();
    // إغلاق اتصال قاعدة البيانات
    mysqli_close($db);
}
?>





Sign Up










Register


Please fill this form to create an account.



































Already have an account? Login here.

بمجرد أن ينقر المستخدم على زر الإرسال، سيتم التحقق مما إذا كانت $_SERVER["REQUEST_METHOD"] == "POST" و $_POST['submit'] تم تعيينها كمتغير. لأسباب أمنية، نقترح دائمًا عدم تخزين كلمة المرور على شكل نص عادي في قاعدة البيانات. لقد استخدمنا وظيفة password_hash() التي تنشئ تجزء كلمة مرور جديد باستخدام خوارزمية تجزئة قوية في اتجاه واحد.

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

3) بناء نظام تسجيل الدخول

في هذا الجزء، سنقوم بإنشاء نموذج تسجيل الدخول للسماح للمستخدمين بالوصول إلى المنطقة المقيدة من النظام. في حالتنا، المنطقة المقيدة هي صفحة ترحيب سنغطيها في الجزء التالي.

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

فيما يلي نموذج تسجيل الدخول في HTML. الصقه في ملف يسمى login.php

HTML

  

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Login</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h2>Login</h2>
                    <p>Please fill in your email and password.</p>
                    <form action="" method="post">
                        <div class="form-group">
                            <label>Email Address</label>
                            <input type="email" name="email" class="form-control" required />
                        </div>    
                        <div class="form-group">
                            <label>Password</label>
                            <input type="password" name="password" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <input type="submit" name="submit" class="btn btn-primary" value="Submit">
                        </div>
                        <p>Don't have an account? <a href="register.php">Register here</a>.</p>
                    </form>
                </div>
            </div>
        </div>    
    </body>
</html>

سيكون مخرج الكود أعلاه على النحو التالي

Login

الخطوة 2: إنشاء نظام تسجيل الدخول في PHP

بعد إنشاء نموذج تسجيل الدخول في HTML ، سنقوم بكتابة كود للتحقق من بيانات تسجيل الدخول. عند تقديم النموذج ، سنتحقق من ملء البريد الإلكتروني وكلمة المرور. إذا تم ملؤهما ، سننفذ استعلام SELECT للعثور على السجل في قاعدة البيانات بناءً على البريد الإلكتروني وكلمة المرور. إذا تم العثور على أي سجل ، سنقوم بتخزين "userID" في الجلسة وسيتم توجيه المستخدم إلى ملف welcome.php ، وإلا ، سيتم تنبيه المستخدم برسالة خطأ.

لنقم بتعويض الكود التالي في ملف login.php.

PHP

  

Please enter email.';
    }

    // التحقق مما إذا كانت كلمة المرور فارغة
    if (empty($password)) {
        $error .= '
Please enter your password.
';
    }

    if (empty($error)) {
        if($query = $db->prepare("SELECT * FROM users WHERE email = ?")) {
            $query->bind_param('s', $email);
            $query->execute();
            $row = $query->fetch();
            if ($row) {
                if (password_verify($password, $row['password'])) {
                    $_SESSION["userid"] = $row['id'];
                    $_SESSION["user"] = $row;

                    // توجيه المستخدم إلى صفحة الترحيب
                    header("location: welcome.php");
                    exit;
                } else {
                    $error .= '
The password is not valid.
';
                }
            } else {
                $error .= '
No User exist with that email address.
';
            }
        }
        $query->close();
    }
    // إغلاق الاتصال
    mysqli_close($db);
}
?>





Login










Login


Please fill in your email and password.






















Don't have an account? Register here.

4) إنشاء صفحة الترحيب

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

لنقم بإنشاء ملف welcome.php ولصق الكود التالي فيه.

PHP

  







Welcome <?php echo $_SESSION["name"]; ?>










Hello, . Welcome to demo site.





Log Out

5) نص الخروج

أخيرًا ، دعونا نقوم بإنشاء ملف logout.php مع الكود التالي فيه.

PHP

 

بمجرد أن ينقر المستخدم على رابط تسجيل الخروج، سيتم استدعاء النص السابق لتدمير الجلسة وإعادة توجيه المستخدم إلى ملف login.php.

الاستنتاج

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

Source:
https://dzone.com/articles/create-a-login-system-using-php